*{
  margin: 0;
  padding: 0;
}
.section{
  background: linear-gradient(
    45deg,
    rgba(29, 236, 197, 0.7),
    rgba(91, 14, 214, 0.7) 100%
  );
}
section{
  position: relative;
  width: 100%;
  height: auto;padding-top:50px;
  background: transparent;
  overflow: none;
}
section .air{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: url(./wave.png);
  background-size: 1000px 100px
}
section .air.air1{
  animation: wave 30s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
section .air.air2{
  animation: wave2 15s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 3px;
}
section .air.air3{
  animation: wave 30s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 8px;
}
section .air.air4{
  animation: wave2 5s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 12px;
}
@keyframes wave{
  0%{
    background-position-x: 0px;
  }
  100%{
    background-position-x: 1000px;
  }
}
@keyframes wave2{
  0%{
    background-position-x: 0px;
  }
  100%{
    background-position-x: -1000px;
  }
}
@import url(https://fonts.googleapis.com/css?family=Signika:700,300,600);

.h1 {
 font-size:18px;
 font:bold 7.5vw/1.6 'Signika', sans-serif;
 -webkit-user-select:none;
    -moz-user-select:none;
     -ms-user-select:none;
         user-select:none;
}

.h1 .span { display:inline-block; -webkit-animation:float .2s ease-in-out infinite; animation:float .2s ease-in-out infinite; }
 @-webkit-keyframes float {
  0%,100%{ -webkit-transform:none; transform:none; }
  33%{ -webkit-transform:translateY(-1px) rotate(-2deg); transform:translateY(-1px) rotate(-2deg); }
  66%{ -webkit-transform:translateY(1px) rotate(2deg); transform:translateY(1px) rotate(2deg); }
}
 @keyframes float {
  0%,100%{ -webkit-transform:none; transform:none; }
  33%{ -webkit-transform:translateY(-1px) rotate(-2deg); transform:translateY(-1px) rotate(-2deg); }
  66%{ -webkit-transform:translateY(1px) rotate(2deg); transform:translateY(1px) rotate(2deg); }
}
body:hover .span { -webkit-animation:bounce .6s; animation:bounce .6s; }
@-webkit-keyframes bounce {
  0%,100%{ -webkit-transform:translate(0); transform:translate(0); }
  25%{ -webkit-transform:rotateX(20deg) translateY(2px) rotate(-3deg); transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ -webkit-transform:translateY(-20px) rotate(3deg) scale(1.1); transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}
@keyframes bounce {
  0%,100%{ -webkit-transform:translate(0); transform:translate(0); }
  25%{ -webkit-transform:rotateX(20deg) translateY(2px) rotate(-3deg); transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ -webkit-transform:translateY(-20px) rotate(3deg) scale(1.1); transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

.span:nth-child(4n) { color:hsl(50, 75%, 55%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
.span:nth-child(4n-1) { color:hsl(135, 35%, 55%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
.span:nth-child(4n-2) { color:hsl(155, 35%, 60%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
.span:nth-child(4n-3) { color:hsl(30, 65%, 60%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }

.h1 .span:nth-child(2){ -webkit-animation-delay:.05s; animation-delay:.05s; }
.h1 .span:nth-child(3){ -webkit-animation-delay:.1s; animation-delay:.1s; }
.h1 .span:nth-child(4){ -webkit-animation-delay:.15s; animation-delay:.15s; }
.h1 .span:nth-child(5){ -webkit-animation-delay:.2s; animation-delay:.2s; }
.h1 .span:nth-child(6){ -webkit-animation-delay:.25s; animation-delay:.25s; }
.h1 .span:nth-child(7){ -webkit-animation-delay:.3s; animation-delay:.3s; }
.h1 .span:nth-child(8){ -webkit-animation-delay:.35s; animation-delay:.35s; }
.h1 .span:nth-child(9){ -webkit-animation-delay:.4s; animation-delay:.4s; }
.h1 .span:nth-child(10){ -webkit-animation-delay:.45s; animation-delay:.45s; }
.h1 .span:nth-child(11){ -webkit-animation-delay:.5s; animation-delay:.5s; }
.h1 .span:nth-child(12){ -webkit-animation-delay:.55s; animation-delay:.55s; }
.h1 .span:nth-child(13){ -webkit-animation-delay:.6s; animation-delay:.6s; }
.h1 .span:nth-child(14){ -webkit-animation-delay:.65s; animation-delay:.65s; }
            /* Height for devices larger than 576px */
            @media (min-width: 992px) {
              #intro {
                margin-top: -58.59px;
              }
            }
            @media (min-width: 320px) and (max-width: 767px) {
              .h1{ font-size: 12px;}.h1 p {font-size: 5px;}.navbar-brand{width:40px;Height:40px;}
              #myheader { display: none;
                background:#07486e;
               background-size: 100% 100%;
              width: 100%;
              height: 100%;
              height: auto !important;
              min-height:100%;
              }.top{width:100%;
              height:auto;
              margin:0 auto;
              overflow:hidden;
              }

              .language{width:100%;
              float:right;
              height:auto;
              }

              .top-lang{font:bold 13px/30px "lucida sans","trebuchet MS","Tahoma";
              color:#FFF;
              text-align:right;
              }

              .top-lang a{text-decoration:none; padding:5px; color:#FFF;}
              .skip{
                float:left;
              }
              .top-lang a:hover{text-decoration:underline; color:#FFF;}
            }
            @media (min-width: 768px) {
              .h1{ font-size: 20px;}.h1 p {font-size: 7px;} .navbar-brand{width:80px;Height:80px;}
              #myheader {
                background:#07486e;
               background-size: 100% 100%;
              width: 100%;
              height: 100%;
              height: auto !important;
              min-height:100%;
              }.top{width:100%;
              height:auto;
              margin:0 auto;
              overflow:hidden;
              }

              .language{width:100%;
              float:right;
              height:auto;
              }

              .top-lang{font:bold 13px/30px "lucida sans","trebuchet MS","Tahoma";
              color:#FFF;
              text-align:right;
              }

              .top-lang a{text-decoration:none; padding:5px; color:#FFF;}
              .skip{
                float:left;
              }
              .top-lang a:hover{text-decoration:underline; color:#FFF;}
            }
            .navbar .nav-link {
              color: #000 !important;
            }
            /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}