.logoamber{width:100%; margin:auto; z-index:99999; position:absolute; top:calc(30% + 50px); left:calc(50% - 212px)}
.logoamber img{max-width:100%; height:auto}
.loaded #prewrapper{opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;}	
#prewrapper{
  width:100px;
  height:100px;
  position:fixed;
  top:30%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
  z-index:9999
}
#preloader{
  width:100px;
  height:100px;
  border:2px solid #cfa82b;
  border-radius:0px;
  -webkit-animation: preloader 4.5s infinite linear;
    -moz-animation: preloader 4.5s infinite linear;
    -ms-animation: preloader 4.5s infinite linear;
    animation: preloader 4.5s infinite linear;
}

@-webkit-keyframes preloader {
0%{ -webkit-transform:scale(0);border-radius:20px;}
10%{ -webkit-transform:scale(1.3)}
12%{ -webkit-transform:scale(1)}
15%{ -webkit-transform:scale(1.3)}
17%{ -webkit-transform:scale(1)}
25%{ -webkit-transform:scale(1)}
40%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
42%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}

55%{ -webkit-transform:scale(1.3)}
60%{ -webkit-transform:scale(1)}
65%{ -webkit-transform:scale(1.3)}
70%{ -webkit-transform:scale(1)}
75%{ -webkit-transform:scale(1.3)}
78%{ -webkit-transform:scale(1)}
80%{ -webkit-transform:scale(1)}

95%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
100%{ -webkit-transform:scale(0) rotate(180deg); border-radius:20px;}
}

@-moz-keyframes preloader {
0%{ -moz-transform:scale(0);border-radius:20px;}
10%{ -moz-transform:scale(1.3)}
12%{ -moz-transform:scale(1)}
15%{ -moz-transform:scale(1.3)}
17%{ -moz-transform:scale(1)}
25%{ -moz-transform:scale(1)}
40%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
42%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}

55%{ -moz-transform:scale(1.3)}
60%{ -moz-transform:scale(1)}
65%{ -moz-transform:scale(1.3)}
70%{ -moz-transform:scale(1)}
75%{ -moz-transform:scale(1.3)}
78%{ -moz-transform:scale(1)}
80%{ -moz-transform:scale(1)}

95%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
100%{ -moz-transform:scale(0) rotate(180deg); border-radius:10px;}
}

@-ms-keyframes preloader {
0%{ -ms-transform:scale(0);border-radius:20px;}
10%{ -ms-transform:scale(1.3)}
12%{ -ms-transform:scale(1)}
15%{ -ms-transform:scale(1.3)}
17%{ -ms-transform:scale(1)}
25%{ -ms-transform:scale(1)}
40%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
42%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}

55%{ -ms-transform:scale(1.3)}
60%{ -ms-transform:scale(1)}
65%{ -ms-transform:scale(1.3)}
70%{ -ms-transform:scale(1)}
75%{ -ms-transform:scale(1.3)}
78%{ -ms-transform:scale(1)}
80%{ -ms-transform:scale(1)}


95%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
100%{ -ms-transform:scale(0) rotate(180deg); border-radius:20px;}
}

@keyframes preloader {
0%{ transform:scale(0);border-radius:20px;}
10%{ transform:scale(1.3)}
12%{ transform:scale(1)}
15%{ transform:scale(1.3)}
17%{ transform:scale(1)}
25%{ transform:scale(1)}
40%{ transform:scale(1) rotate(180deg); border-radius:20px;}
42%{ transform:scale(1) rotate(180deg); border-radius:20px;}

55%{ transform:scale(1.3)}
60%{ transform:scale(1)}
65%{ transform:scale(1.3)}
70%{ transform:scale(1)}
75%{ transform:scale(1.3)}
78%{ transform:scale(1)}
80%{ transform:scale(1)}

95%{ transform:scale(1) rotate(180deg); border-radius:20px;}
100%{ transform:scale(0) rotate(180deg); border-radius:20px;}
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}


    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #FFFFFF;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
				border-right:solid 1px #cfa82b;
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
				border-left:solid 1px #cfa82b;
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
 
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }

.loaded .ocean,.loaded .logoamber{visibility: hidden;-webkit-transition: all 0.2s 0.5s ease-out;-ms-transition: all 0.2s 0.5s ease-out;transition: all 0.2s 0.5s ease-out;}

.ocean { 
  height: 5%;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background: #015871;
}

.wave {
  background: url(wave.svg) repeat-x; 
  position: absolute;
  top: -138px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0); z-index:999999
}

.wave:nth-of-type(2) {
  top: -155px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-25px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}