@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

*{
    margin: 0px;
    padding: 0px;
}

body{
    font-family: 'Exo', sans-serif;
}


.context {
    width: 100%;
    position: absolute;
    top:18vh;
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}


.area{
    background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:150vh;
    
   
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
















.flexy__item {
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
}
.flexy__child {
  -webkit-box-flex: 1;
          flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
.flexy__child--fill {
  flex-basis: 100%;
}
.flexy__item, .flexy_child {
  box-sizing: border-box;
}
.flexy--row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
.flexy--column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.flexy--between {
  -webkit-box-pack: justify;
          justify-content: space-between;
}
.flexy--around {
  justify-content: space-around;
}
.flexy--justify-start {
  -webkit-box-pack: start;
          justify-content: flex-start;
}
.flexy--justify-end {
  -webkit-box-pack: end;
          justify-content: flex-end;
}
.flexy--justify-center {
  -webkit-box-pack: center;
          justify-content: center;
}
.flexy--items-center {
  -webkit-box-align: center;
          align-items: center;
}
.flexy--self-end {
  align-self: flex-end;
}
.flexy--reverse-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
          flex-direction: column-reverse;
}
.flexy--reverse-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
          flex-direction: row-reverse;
}

.svg-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}

.svg-icon {
  width: 1em;
  height: 1em;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.svg-icon__sprite {
  display: none;
}
.svg-icon--rotated-180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.space--small {
  margin-bottom: 0.7em;
}
@media (max-width: 75em) {
  .space--small {
    margin-bottom: 0.518em;
  }
}

.space--normal {
  margin-bottom: 1.4em;
}
@media (max-width: 75em) {
  .space--normal {
    margin-bottom: 1.036em;
  }
}

.space--medium {
  margin-bottom: 2.8em;
}
@media (max-width: 75em) {
  .space--medium {
    margin-bottom: 2.072em;
  }
}

.space--big {
  margin-bottom: 4.2em;
}
@media (max-width: 75em) {
  .space--big {
    margin-bottom: 3.108em;
  }
}

.space--huge {
  margin-bottom: 5.6em;
}
@media (max-width: 75em) {
  .space--huge {
    margin-bottom: 4.144em;
  }
}

.color--white {
  color: #FFFFFF;
}

.fill--white {
  fill: #FFFFFF;
}

.stroke--white {
  stroke: #FFFFFF;
}

.color--black {
  color: #000000;
}

.fill--black {
  fill: #000000;
}

.stroke--black {
  stroke: #000000;
}

.color--red {
  color: #FF5572;
}

.fill--red {
  fill: #FF5572;
}

.stroke--red {
  stroke: #FF5572;
}

.color--coral {
  color: #FF6960;
}

.fill--coral {
  fill: #FF6960;
}

.stroke--coral {
  stroke: #FF6960;
}

.color--orange {
  color: #FF7555;
}

.fill--orange {
  fill: #FF7555;
}

.stroke--orange {
  stroke: #FF7555;
}

.color--gray {
  color: #404040;
}

.fill--gray {
  fill: #404040;
}

.stroke--gray {
  stroke: #404040;
}

.svg-icon {
  stroke-width: 3;
}

.video {
  width: 30em;
  margin-left: 31%;
  position: relative;
  overflow: hidden;
  font-size: 1.2em;
  box-shadow: 0 2.5em 2.5em -1.875em rgba(0, 0, 0, 0.5), 0 1.25em 5em 1em rgba(0, 0, 0, 0.2);
}
.video__player {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.video__control {
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
  position: absolute;
  box-sizing: border-box;
  padding: 0 1em;
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 65em) {
  .video__control {
    opacity: 0;
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
}
.video__control__button {
  padding: 1em .5em;
  display: -webkit-box;
  display: flex;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.video__control__button:before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1.9em;
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  border-radius: 1.9em;
  background-color: #FF5572;
  -webkit-transition: all 0.15s cubic-bezier(0.54, -0.24, 0.46, 1.28);
  transition: all 0.15s cubic-bezier(0.54, -0.24, 0.46, 1.28);
}
.video__control__button.volume {
  flex-basis: 2em;
}
.video__control__button:hover:before, .video__control__button.active:before {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
.video__control__button:hover > .video__track__range__sound, .video__control__button.active > .video__track__range__sound {
  padding-left: .5em;
  pointer-events: all;
  opacity: 1;
  -webkit-box-flex: 1;
          flex: 1;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .video__control > .video__control__button.volume {
    display: none;
  }
}
.video__control > .video__control__button.volume:hover {
  flex-basis: 5em;
}
.video__duration {
  padding-right: .5em;
  font-size: .5em;
  color: rgba(255, 255, 255, 0.5);
}
.video__track__range[type=range] {
  -webkit-appearance: inherit;
  /* WebKit */
  width: 100%;
  background-color: transparent;
}
.video__track__range[type=range]:focus {
  outline: none;
}
.video__track__range[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1.5em;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none;
  background: transparent;
  border-radius: 1.5em;
  border: 2px solid #FFFFFF;
}
.video__track__range[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #FFFFFF;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2px;
}
.video__track__range[type=range]::-moz-range-track {
  width: 100%;
  height: 1.5em;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none;
  background: transparent;
  border-radius: 1.5em;
  border: 2px solid #FFFFFF;
}
.video__track__range[type=range]::-moz-range-thumb {
  box-shadow: none;
  border: 0;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #FFFFFF;
  background: transparent;
  cursor: pointer;
}
.video__track__range[type=range]::-ms-track {
  width: 100%;
  height: 1.5em;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
  border: 2px solid #FFFFFF;
}
.video__track__range[type=range]::-ms-fill-lower {
  background: transparent;
  border: 0;
  border-radius: 1.5em;
  box-shadow: none;
}
.video__track__range[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0;
  border-radius: 1.5em;
  box-shadow: none;
}
.video__track__range[type=range]::-ms-thumb {
  box-shadow: none;
  border: 0;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #FFFFFF;
  background: transparent;
  cursor: pointer;
}
.video__track__range[type=range]:focus::-ms-fill-lower {
  background: transparent;
}
.video__track__range[type=range]:focus::-ms-fill-upper {
  background: transparent;
}
.video__track__range__sound {
  display: -webkit-box;
  display: flex;
  width: 0;
  opacity: 0;
  padding-left: 0;
  pointer-events: none;
  -webkit-transition: all 0.15s cubic-bezier(0.54, -0.24, 0.46, 1.28);
  transition: all 0.15s cubic-bezier(0.54, -0.24, 0.46, 1.28);
}
.video:hover .video__control {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.tooltip {
  position: relative;
}
.tooltip:after {
  content: attr(data-tooltip-content);
  position: absolute;
  bottom: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  padding: 1em;
  font-size: 12px;
  color: #FFFFFF;
  background-color: #FF5572;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.54, -0.24, 0.46, 1.28);
  transition: all 0.3s cubic-bezier(0.54, -0.24, 0.46, 1.28);
}
.tooltip:hover:after {
  opacity: 1;
}