/*@font-face {
font-family: 'bravo';
src: url('bravo.ttf');
font-weight: normal;
font-style: normal;
}*/
@font-face {
font-family: 'robotobold';
src: url('robotobold.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto';
src: url('roboto.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'din';
src: url('din.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
    font-family: 'bravo';
    src: url('/BebasNeueRegular.eot');
    src: url('/BebasNeueRegular.eot?#iefix') format('embedded-opentype'),
        url('/BebasNeueRegular.woff2') format('woff2'),
        url('/BebasNeueRegular.woff') format('woff'),
        url('/BebasNeueRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bravo';
    src: url('/BebasNeueBold.eot');
    src: url('/BebasNeueBold.eot?#iefix') format('embedded-opentype'),
        url('/BebasNeueBold.woff2') format('woff2'),
        url('/BebasNeueBold.woff') format('woff'),
        url('/BebasNeueBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
.bgred {background-color: #b22222;}
.bgwhite {background-color: #fff;}
.bgblack {background-color: #111;}
.bgblue {background-color: #00143d;}
.colorred {color: #b22222;}
.colorwhite {color: #fff;}
.colorblack {color: #111;}
.colorblue {color: #112040;}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {text-decoration: none;}
body,html {
overflow-x: hidden;
font-family: 'bravo';
font-size: 16px;
letter-spacing: 0.5px;
}
img {
max-width: 100%;
}
p{
padding-bottom: 1em;
}
h1{
color: #b22222;
font-size: 60px;
padding: 10px 20px;
display: inline-block;
}
h2 {
font-size: 60px;
text-align: center;
color: #001b3e;
padding-top: 100px;
}
.fl {float: left;}
.fr {float: right;}
.fn {float: none;}
.container {margin: auto;max-width: 1200px;clear: both;}
.container-full {clear: both;}
.row:before, 
.row:after,
.clear:before, 
.clear:after {
content: "";
clear: both;
display: block;
}
.nopadx{padding-left:0;padding-right: 0;}
.inline-block {display: inline-block;}
.circle {border-radius: 1000px;}
.h10{height: 10px;}
.w10 {width: 10px;}
.h20{height: 20px;}
.w20 {width: 20px;}
.tal {text-align: left;}
.tar {text-align: right;}
.tac {text-align: center;}
.pr15 {padding-right: 15%;}
.tabs__tab {
display: none;
}
.tabs__tab.active {
display: block;
}
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
.bg-yellow {
background-color: yellow;
}
.bg-black {
background-color: black;
}
.bg-grey {
background-color: grey;
}
.space10{
height: 10px;
width: 100%;
clear: both;
}
.space25{height: 25px;width: 100%;clear: both;}
.space50{height: 50px;width: 100%;clear: both;}


.relative{position: relative;}
.tac{text-align: center;}
.tar{text-align: right;}
.tal{text-align: left;}
.container{margin:auto;max-width:1200px;padding: 0 15px;}
.row:before,.row:after,.clear:before,.clear:after{content:"";clear:both;display:block;}
.row{margin:0 -15px;}
.cx1,.cs1,.cm1,.cl1,
.cx2,.cs2,.cm2,.cl2,
.cx3,.cs3,.cm3,.cl3,
.cx4,.cs4,.cm4,.cl4,
.cx5,.cs5,.cm5,.cl5,
.cx6,.cs6,.cm6,.cl6,
.cx7,.cs7,.cm7,.cl7,
.cx8,.cs8,.cm8,.cl8,
.cx9,.cs9,.cm9,.cl9,
.cx10,.cs10,.cm10,.cl10,
.cx11,.cs11,.cm11,.cl11,
.cx12,.cs12,.cm12,.cl12{position:relative;min-height:1px;padding-left:15px;padding-right:15px;}
.cx1,.cx2,.cx3,.cx4,.cx5,.cx6,.cx7,.cx8,.cx9,.cx10,.cx11,.cx12{float:left;display: block;}
@media (max-width:767px){
.portfinfo {
padding: 30px 0 !important;
}
.preimicontitle {
font-size: 20px !important;
}
.plavniki {
background-image: url(volna1-min.png) !important;
}
.plavniker .verhv::before,.plavniker .nizv::after {
width: 7.8% !important;
height: 140% !important;
}
.plavniz::after {
width: 14% !important;
height: 420% !important;
bottom: -10% !important;
}
.plavverh::before {
width: 14% !important;
height: 420% !important;
top: -250% !important;
}
.xmin78vh {
min-height: 78vh;
}
.footer img {
position: absolute;
right: 5%;
bottom: 0;
width: 27%;
transform: translate(0,20%);
}
.etaps-desc {
left: 0 !important;
right: 0 !important;
width: 100% !important;
position: static !important;
}
.etaps-desc p {
font-size: 20px !important;
}
.etaps-desc span {
font-size: 36px !important;
}
.work-etap1, .work-etap2, .work-etap3, .work-etap4 {
display: none !important;
}
.work-etaps {
background:transparent !important;
padding-bottom: 50px !important;
margin: 0 !important;
}
.nopadx{padding: 0;}
.cx12{width:100%;}
.cx11{width:91.66666667%;}
.cx10{width:83.33333333%;}
.cx9{width:75%;}
.cx8{width:66.66666667%;}
.cx7{width:58.33333333%;}
.cx6{width:50%;}
.cx5{width:41.66666667%;}
.cx4{width:33.33333333%;}
.cx3{width:25%;}
.cx2{width:16.66666667%;}
.cx1{width:8.33333333%;}
.cxo12{margin-left:100%;}
.cxo11{margin-left:91.66666667%;}
.cxo10{margin-left:83.33333333%;}
.cxo9{margin-left:75%;}
.cxo8{margin-left:66.66666667%;}
.cxo7{margin-left:58.33333333%;}
.cxo6{margin-left:50%;}
.cxo5{margin-left:41.66666667%;}
.cxo4{margin-left:33.33333333%;}
.cxo3{margin-left:25%;}
.cxo2{margin-left:16.66666667%;}
.cxo1{margin-left:8.33333333%;}
.cxo0{margin-left:0%;}
.cxh{display: none;}
.xtac {text-align: center;}
}
@media (min-width:768px) and (max-width:991px){.cs1,.cs2,.cs3,.cs4,.cs5,.cs6,.cs7,.cs8,.cs9,.cs10,.cs11,.cs12{float:left;display: block;}
.services-block {
padding-bottom: 100px !important;
margin-bottom: -150px !important;
}
.plavniki {
background-image: url(volna1-min.png) !important;
}
.footer img {
position: absolute;
right: 5%;
bottom: 0;
width: 6%;
transform: translate(0,20%);
}
.etaps-desc span {
font-size: 50px !important;
}
.etaps-desc p {
padding-top: 0 !important;
font-size: 18px !important;
}
.etaps-desc {
margin-top: -25px;
width: 50% !important;
}
.nopads{padding: 0;}
.sfr {float: right;}
.stac {text-align: center;}
.csh{display: none;}
.cs12{width:100%;}
.cs11{width:91.66666667%;}
.cs10{width:83.33333333%;}
.cs9{width:75%;}
.cs8{width:66.66666667%;}
.cs7{width:58.33333333%;}
.cs6{width:50%;}
.cs5{width:41.66666667%;}
.cs4{width:33.33333333%;}
.cs3{width:25%;}
.cs2{width:16.66666667%;}
.cs1{width:8.33333333%;}
.cso12{margin-left:100%;}
.cso11{margin-left:91.66666667%;}
.cso10{margin-left:83.33333333%;}
.cso9{margin-left:75%;}
.cso8{margin-left:66.66666667%;}
.cso7{margin-left:58.33333333%;}
.cso6{margin-left:50%;}
.cso5{margin-left:41.66666667%;}
.cso4{margin-left:33.33333333%;}
.cso3{margin-left:25%;}
.cso2{margin-left:16.66666667%;}
.cso1{margin-left:8.33333333%;}
.cso0{margin-left:0%;}
}
@media (min-width:992px) and (max-width:1199px){.cm1,.cm2,.cm3,.cm4,.cm5,.cm6,.cm7,.cm8,.cm9,.cm10,.cm11,.cm12{float:left;display: block;}
.services-block {
padding-bottom: 100px !important;
margin-bottom: -150px !important;
}
.footer img {
position: absolute;
right: 5%;
bottom: 0;
width: 10%;
transform: translate(0,20%);
}
.etaps-desc span {
font-size: 50px !important;
}
.nopadm {padding: 0;}
.mfr {float: right;}
.mtac {text-align: center;}
.cmh{display: none;}
.cm12{width:100%;}
.cm11{width:91.66666667%;}
.cm10{width:83.33333333%;}
.cm9{width:75%;}
.cm8{width:66.66666667%;}
.cm7{width:58.33333333%;}
.cm6{width:50%;}
.cm5{width:41.66666667%;}
.cm4{width:33.33333333%;}
.cm3{width:25%;}
.cm2{width:16.66666667%;}
.cm1{width:8.33333333%;}
.cmo12{margin-left:100%;}
.cmo11{margin-left:91.66666667%;}
.cmo10{margin-left:83.33333333%;}
.cmo9{margin-left:75%;}
.cmo8{margin-left:66.66666667%;}
.cmo7{margin-left:58.33333333%;}
.cmo6{margin-left:50%;}
.cmo5{margin-left:41.66666667%;}
.cmo4{margin-left:33.33333333%;}
.cmo3{margin-left:25%;}
.cmo2{margin-left:16.66666667%;}
.cmo1{margin-left:8.33333333%;}
.cmo0{margin-left:0%;}
}
@media (min-width:1200px){.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9,.cl10,.cl11,.cl12{float:left;display: block;}
.services-block {
padding-bottom: 150px !important;
margin-bottom: -220px !important;
}
.footer img {
position: absolute;
right: 5%;
bottom: 0;
width: 10%;
transform: translate(0,20%);
}
.nopadl {padding: 0;}
.clh{display: none;}
.cl12{width:100%;}
.cl11{width:91.66666667%;}
.cl10{width:83.33333333%;}
.cl9{width:75%;}
.cl8{width:66.66666667%;}
.cl7{width:58.33333333%;}
.cl6{width:50%;}
.cl5{width:41.66666667%;}
.cl4{width:33.33333333%;}
.cl3{width:25%;}
.cl2{width:16.66666667%;}
.cl1{width:8.33333333%;}
.clo12{margin-left:100%;}
.clo11{margin-left:91.66666667%;}
.clo10{margin-left:83.33333333%;}
.clo9{margin-left:75%;}
.clo8{margin-left:66.66666667%;}
.clo7{margin-left:58.33333333%;}
.clo6{margin-left:50%;}
.clo5{margin-left:41.66666667%;}
.clo4{margin-left:33.33333333%;}
.clo3{margin-left:25%;}
.clo2{margin-left:16.66666667%;}
.clo1{margin-left:8.33333333%;}
.clo0{margin-left:0%;}
}
.nopad {padding: 0;}
.fr{float: right;}


.relative{position: relative;}
.static{position: static;}
.absolute{position: absolute;}
.vertcenter{top:50%;transform:translateY(-50%);}
.verttop{top:0;}
.vertbottom{bottom:0;}


.mainmenu {}
.mainmenu li {
display: inline-block;
padding: 0 5px;
}
.mainmenu li a, .mainnumber {
font-size: 23px;
line-height: 50px;
padding: 0 3px;
}
.mainnumber {
font-size: 24px;
font-weight: bold;
}
.mainlogo,.header {
max-height: 50px;
}
@keyframes plavnik {
0% {left: -10%;transform: rotateY(180deg);}
5% {left: 20%;transform: rotateY(180deg);}
10% {left: 25%;transform: rotateY(180deg);}
15% {left: 30%;transform: rotateY(180deg);}
20% {left: 40%;transform: rotateY(180deg);}
25% {left: 55%;transform: rotateY(180deg);}
30% {left: 70%;transform: rotateY(180deg);}
35% {left: 75%;transform: rotateY(180deg);}
40% {left: 80%;transform: rotateY(180deg);}
45% {left: 90%;transform: rotateY(180deg);}
50% {left: 120%;transform: rotateY(0deg);}
55% {left: 90%;transform: rotateY(0deg);}
60% {left: 75%;transform: rotateY(0deg);}
65% {left: 70%;transform: rotateY(0deg);}
70% {left: 50%;transform: rotateY(0deg);}
75% {left: 40%;transform: rotateY(0deg);}
80% {left: 30%;transform: rotateY(0deg);}
85% {left: 25%;transform: rotateY(0deg);}
90% {left: 20%;transform: rotateY(0deg);}
95% {left: 0%;transform: rotateY(0deg);}
100% {left: -20%;transform: rotateY(180deg);}
}
.plavnik-row {
background-image: url(volna.png);
background-repeat: repeat-x;
background-position: 90px 0px;
background-size: 100% 88%;
animation: volna 50s linear infinite alternate;
overflow: hidden;
}
.plavnik-row:before {
content: "";
position: absolute;
width: 100px;
height: 147px;
background-image: url(plavnik.png);
top: 0px;
z-index: -1;
transition: all 15s;
left: 5%;
animation: plavnik 20s linear infinite;
}
.plavnik-row:after {
content: "";
position: absolute;
width: 49px;
height: 73px;
background-image: url(plavnikw.png);
z-index: 1;
transition: all 15s;
left: 5%;
animation: plavnik 35s linear infinite;
bottom: -12px;
background-size: 100%;
}
.services-block {
border: dashed 3px #00143d;
border-radius: 12px;
padding: 10px;
margin-top: 50px;
}
.services-block-title {
font-size: 27px;
color: #0a213f;
border-bottom: dashed 3px #0a213f;
margin-bottom: 10px;
}
.services-block-ul {

}
.services-block-ul li {
list-style: none;
padding: 2px;
}
.services-block-ul li a {
color: #0a213f;
font-size: 18px;
line-height: 25px;
}
.services-more {
color: #fff;
background-color: #b22222;
display: inline-block;
padding: 4px 12px;
border-radius: 2px;
margin-top: 15px;
margin-bottom: 20px;
}
.plavniki {
background-image: url(volna1.png);
padding: 160px 0;
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: 80%;
}
.plavniki:before {
content: "";
position: absolute;
width: 50px;
height: 74px;
background-image: url(plavnikb.png);
background-size: cover;
left: 0%;
top: 3%;
z-index: -1;
animation: plav2 21s linear infinite;
}
.plavniki:after {
content: "";
position: absolute;
width: 50px;
height: 74px;
background-image: url(plavnikw.png);
background-size: cover;
right: 0%;
bottom: 20%;
animation: plav1 12s ease-in infinite;
}
.portvolna {
background-color: #0a213f;
padding: 0 !important;
}
.portvolna::before {
content: "";
display: block;
height: 200px;
width: 100%;
background-image: url(portvolnaverh.jpg);
background-size: 100% 100%;
}
.portvolna::after {
content: "";
display: block;
height: 150px;
width: 100%;
background-image: url(portvolnaniz.jpg);
background-size: 100% 100%;
}
.footervolna:after {
display: none;
}
.imacmockup {
width: 86%;
height: 64%;
position: absolute;
z-index: -1;
background-size: 100% auto;
left: 7%;
top: 5%;
animation: landscreen 10s infinite ease alternate;
}
.imacmockup {
width: 86%;
height: 64%;
position: absolute;
z-index: -1;
background-size: 100% auto;
left: 7%;
top: 5%;
animation: landscreen 10s infinite ease alternate;
}
.ipadmockup {
width: 81%;
height: 85%;
position: absolute;
z-index: -1;
background-size: 100% auto;
left: 10%;
top: 7%;
animation: landscreen 10s infinite ease alternate;
}
.iphonemockup {
width: 78%;
height: 91%;
position: absolute;
z-index: -1;
background-size: 100% auto;
left: 11%;
top: 4%;
animation: landscreen 10s infinite ease alternate;
}
@keyframes landscreen {
from {
background-position: top;
}
to {
background-position: bottom;
}
}
.uletaps {

}
.uletaps li {
list-style: none;
line-height: 1.3;
}
.uletaps li p {
font-family: din;
}
.uletaps li p span {
color: #b22222;
text-transform: uppercase;
font-weight: bold;
}
.plavnikiw {
height: 450px;
margin: -200px auto;
position: relative;
z-index: 2;
}




.activemobmen #mobilemenu {
    overflow-y: auto;
    overflow-x: hidden;
}
#mobilemenu {
    position: fixed;
    z-index: 99;
    background-color: 
    #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
}


.activemobmen #mobilemenu {
    display: block;
}

#exitmobilemenu {
    font-size: 90px;
    font-family: Arial;
    transform: rotate(45deg);
    cursor: pointer;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-top: 6px;
    float: right;
    color: #00143d;
}
#mobiphone {
color:#00143d;
font-size: 40px;
padding-top: 10px;
display: block;
}




































































.work-etap1, .work-etap2, .work-etap3, .work-etap4 {
display: table;
} 
.work-etap1 > img, .work-etap2 > img, .work-etap3 > img, .work-etap4 > img {
width: 60%;
margin: 20%;
}
.etaps-desc {
position: absolute;
text-align: center;
font-size: 70px;
color: #1a2640;
margin-bottom: 0px;
width: 38.15%;
font-family: "bravo";
text-transform: uppercase;
line-height: 70px;
}
#etap1-desc {
top: 15%;
right: 5%;
}
#etap2-desc {
top: 40%;
left: 5%;
}
#etap3-desc {
top: 60%;
right: 0;
}
#etap4-desc {
top: 85%;
left: 5%;
}
.work-etaps {
/*width: 1100px;*/
width: 100%;
margin: -150px auto 0;
/*height: 2000px;*/
padding-bottom: 182%;
background-image: url(bgetapov.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center 60%;
position: relative;
}
.work-etaps p {
color: #fff;
font-family: "bravo";
font-size: 40px;
text-transform: uppercase;
line-height: 1;
}
.etaps-desc span {
font-size: 60px;
color: #fff;
background-color: #b22222;
padding: 5px 20px;
}
.etaps-desc p {
padding-top: 15px;
color: #1a2640;
font-size: 18px;
text-transform: none;
line-height: 1.3;
}
.bganimdiv1 {
display: none;
width: 50px;
height: 80px;
position: absolute;
background-image: url(plavnik2.png);
background-repeat: no-repeat;
background-size: 50px;
/*-webkit-animation: etap1-anim 4s steps(10000) infinite;
animation: etap1-anim 4s steps(10000) infinite;*/
}
.bganimdiv2 {
display: none;
width: 100%;
height: 100%;
position: absolute;
background-image: url(plavnik3.png);
background-repeat: no-repeat;
background-size: 50px;
-webkit-animation: etap2-anim 4s steps(10000) infinite;
animation: etap2-anim 4s steps(10000) infinite;
}
.bganimdiv3 {
display: none;
width: 100%;
height: 100%;
position: absolute;
background-image: url(plavnik2.png);
background-repeat: no-repeat;
background-size: 50px;
-webkit-animation: etap3-anim 4s steps(10000) infinite;
animation: etap3-anim 4s steps(10000) infinite;
}
@-webkit-keyframes etap1-anim {
0% {
    background-position: 160px 410px;
}
3% {
    background-position: 160px 410px;
}
6% {
    background-position: 210px 450px;
}
9% {
    background-position: 225px 475px;
}
12% {
    background-position: 238px 495px;
}
15% {
    background-position: 254px 515px;
}
18% {
    background-position: 270px 532px;
}
21% {
    background-position: 290px 550px;
}
24% {
    background-position: 315px 560px;
}
27% {
    background-position: 335px 568px;
}
30% {
    background-position: 360px 570px;
}
33% {
    background-position: 385px 575px;
}
36% {
    background-position: 410px 572px;
}
39% {
    background-position: 435px 568px;
}
42% {
    background-position: 458px 563px;
}
45% {
    background-position: 485px 560px;
}
48% {
    background-position: 510px 555px;
}
51% {
    background-position: 533px 554px;
}
54% {
    background-position: 559px 554px;
}
57% {
    background-position: 583px 555px;
}
60% {
    background-position: 610px 558px;
}
63% {
    background-position: 634px 562px;
}
66% {
    background-position: 659px 566px;
}
69% {
    background-position: 683px 572px;
}
72% {
    background-position: 707px 582px;
}
75% {
    background-position: 730px 594px;
}
78% {
    background-position: 750px 608px;
}
81% {
    background-position: 775px 620px;
}
84% {
    background-position: 795px 630px;
}
87% {
    background-position: 803px 650px;
}
90% {
    background-position: 810px 666px;
}
93% {
    background-position: 813px 685px;
}
96% {
    background-position: 819px 690px;
}
100% {
    background-position: 827px 718px;
}
}
@keyframes etap1-anim {
0% {
    background-position: 160px 410px;
}
3% {
    background-position: 160px 410px;
}
6% {
    background-position: 210px 450px;
}
9% {
    background-position: 225px 475px;
}
12% {
    background-position: 238px 495px;
}
15% {
    background-position: 254px 515px;
}
18% {
    background-position: 270px 532px;
}
21% {
    background-position: 290px 550px;
}
24% {
    background-position: 315px 560px;
}
27% {
    background-position: 335px 568px;
}
30% {
    background-position: 360px 570px;
}
33% {
    background-position: 385px 575px;
}
36% {
    background-position: 410px 572px;
}
39% {
    background-position: 435px 568px;
}
42% {
    background-position: 458px 563px;
}
45% {
    background-position: 485px 560px;
}
48% {
    background-position: 510px 555px;
}
51% {
    background-position: 533px 554px;
}
54% {
    background-position: 559px 554px;
}
57% {
    background-position: 583px 555px;
}
60% {
    background-position: 610px 558px;
}
63% {
    background-position: 634px 562px;
}
66% {
    background-position: 659px 566px;
}
69% {
    background-position: 683px 572px;
}
72% {
    background-position: 707px 582px;
}
75% {
    background-position: 730px 594px;
}
78% {
    background-position: 750px 608px;
}
81% {
    background-position: 775px 620px;
}
84% {
    background-position: 795px 630px;
}
87% {
    background-position: 803px 650px;
}
90% {
    background-position: 810px 666px;
}
93% {
    background-position: 813px 685px;
}
96% {
    background-position: 819px 690px;
}
100% {
    background-position: 827px 718px;
}
}
@-webkit-keyframes etap2-anim {
0% {
    background-position: 880px 895px;
}
12% {
    background-position: 850px 955px;
}
17% {
    background-position: 820px 995px;
}
23% {
    background-position: 800px 1015px;
}
29% {
    background-position: 760px 1040px;
}
35% {
    background-position: 690px 1070px;
}
41% {
    background-position: 620px 1085px;
}
49% {
    background-position: 560px 1095px;
}
57% {
    background-position: 500px 1095px;
}
69% {
    background-position: 500px 1095px;
}
79% {
    background-position: 450px 1100px;
}
88% {
    background-position: 410px 1100px;
}
91% {
    background-position: 370px 1120px;
}
93% {
    background-position: 330px 1135px;
}
97% {
    background-position: 300px 1150px;
}
98% {
    background-position: 270px 1165px;
}
99% {
    background-position: 270px 1165px;
}
100% {
    background-position: 240px 1215px;
}
}
@keyframes etap2-anim {
0% {
    background-position: 820px 930px;
}
4% {
    background-position: 813px 960px;
}
8% {
    background-position: 800px 980px;
}
12% {
    background-position: 780px 1000px;
}
16% {
    background-position: 760px 1012px;
}
20% {
    background-position: 740px 1026px;
}
24% {
    background-position: 718px 1038px;
}
28% {
    background-position: 695px 1048px;
}
32% {
    background-position: 675px 1055px;
}
36% {
    background-position: 650px 1062px;
}
40% {
    background-position: 637px 1065px;
}
44% {
    background-position: 625px 1068px;
}
48% {
    background-position: 600px 1072px;
}
52% {
    background-position: 575px 1077px;
}
56% {
    background-position: 550px 1079px;
}
60% {
    background-position: 528px 1082px;
}
64% {
    background-position: 503px 1081px;
}
68% {
    background-position: 478px 1085px;
}
72% {
    background-position: 453px 1089px;
}
76% {
    background-position: 427px 1093px;
}
80% {
    background-position: 403px 1101px;
}
84% {
    background-position: 383px 1106px;
}
88% {
    background-position: 368px 1118px;
}
92% {
    background-position: 353px 1140px;
}
96% {
    background-position: 340px 1152px;
}
100% {
    background-position: 333px 1175px;
}
}
@-webkit-keyframes etap3-anim {
0% {
    background-position: 880px 895px;
}
12% {
    background-position: 850px 955px;
}
17% {
    background-position: 820px 995px;
}
23% {
    background-position: 800px 1015px;
}
29% {
    background-position: 760px 1040px;
}
35% {
    background-position: 690px 1070px;
}
41% {
    background-position: 620px 1085px;
}
49% {
    background-position: 560px 1095px;
}
57% {
    background-position: 500px 1095px;
}
69% {
    background-position: 500px 1095px;
}
79% {
    background-position: 450px 1100px;
}
88% {
    background-position: 410px 1100px;
}
91% {
    background-position: 370px 1120px;
}
93% {
    background-position: 330px 1135px;
}
97% {
    background-position: 300px 1150px;
}
98% {
    background-position: 270px 1165px;
}
99% {
    background-position: 270px 1165px;
}
100% {
    background-position: 240px 1215px;
}
}
@keyframes etap3-anim {
0% {
    background-position: 240px 1340px;
}
2% {
    background-position: 240px 1372px;
}
4% {
    background-position: 245px 1396px;
}
6% {
    background-position: 255px 1420px;
}
8% {
    background-position: 265px 1440px;
}
10% {
    background-position: 283px 1457px;
}
12% {
    background-position: 299px 1473px;
}
14% {
    background-position: 319px 1488px;
}
16% {
    background-position: 342px 1502px;
}
18% {
    background-position: 363px 1513px;
}
20% {
    background-position: 384px 1524px;
}
22% {
    background-position: 409px 1536px;
}
24% {
    background-position: 433px 1543px;
}
26% {
    background-position: 458px 1553px;
}
28% {
    background-position: 480px 1560px;
}
30% {
    background-position: 505px 1565px;
}
32% {
    background-position: 529px 1569px;
}
34% {
    background-position: 554px 1572px;
}
36% {
    background-position: 580px 1572px;
}
38% {
    background-position: 605px 1574px;
}
40% {
    background-position: 630px 1573px;
}
42% {
    background-position: 654px 1572px;
}
44% {
    background-position: 679px 1570px;
}
46% {
    background-position: 704px 1565px;
}
48% {
    background-position: 728px 1558px;
}
50% {
    background-position: 751px 1550px;
}
52% {
    background-position: 778px 1538px;
}
54% {
    background-position: 800px 1520px;
}
56% {
    background-position: 813px 1500px;
}
58% {
    background-position: 816px 1478px;
}
60% {
    background-position: 815px 1453px;
}
62% {
    background-position: 800px 1432px;
}
64% {
    background-position: 775px 1428px;
}
66% {
    background-position: 750px 1432px;
}
68% {
    background-position: 730px 1445px;
}
70% {
    background-position: 715px 1470px;
}
72% {
    background-position: 715px 1494px;
}
74% {
    background-position: 720px 1516px;
}
76% {
    background-position: 733px 1538px;
}
78% {
    background-position: 743px 1558px;
}
80% {
    background-position: 760px 1574px;
}
82% {
    background-position: 780px 1590px;
}
84% {
    background-position: 790px 1605px;
}
86% {
    background-position: 795px 1615px;
}
88% {
    background-position: 805px 1625px;
}
90% {
    background-position: 815px 1640px;
}
92% {
    background-position: 825px 1655px;
}
94% {
    background-position: 830px 1670px;
}
96% {
    background-position: 830px 1670px;
}
98% {
    background-position: 830px 1670px;
}
100% {
    background-position: 830px 1670px;
}
}
.work-etap1 {
width: 26.5%;
height: 14.55%;
border-radius: 300px;
background-color: #001b3e;
position: absolute;
margin-top: 21.4%;
margin-left: 0.75%;
}
.work-etap2 {
width: 26.5%;
height: 14.55%;
border-radius: 300px;
background-color: #001b3e;
position: absolute;
margin-top: 65.35%;
margin-left: 64.1%;
}
.work-etap3 {
width: 26.5%;
height: 14.55%;
border-radius: 300px;
background-color: #001b3e;
position: absolute;
margin-top: 103.15%;
margin-left: 11.55%;
}
.work-etap4 {
width: 26.5%;
height: 14.55%;
border-radius: 300px;
background-color: #001b3e;
position: absolute;
margin-top: 146.2%;
margin-left: 73.5%;
}

.footer {
overflow: hidden;
}
.footer form textarea {
resize: none;
width: 100%;
padding: 10px;
border-radius: 7px;
border: dashed 2px;
height: 151px;
margin-bottom: 15px;
}
.footer form input {
width: 100%;
padding: 10px;
border-radius: 7px;
border: dashed 2px;
height: 40px;
margin-bottom: 15px;
}
.footer form button {
background-color: #b22222;
color: #fff;
width: 100%;
height: 40px;
border: none;
border-radius: 5px;
}
#modalform form textarea {
resize: none;
width: 100%;
padding: 10px;
border-radius: 7px;
border: dashed 2px;
height: 151px;
margin-bottom: 15px;
}
#modalform form input {
width: 100%;
padding: 10px;
border-radius: 7px;
border: dashed 2px;
height: 40px;
margin-bottom: 15px;
}
#modalform form button {
background-color: #b22222;
color: #fff;
width: 100%;
height: 40px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.footer p {
padding-bottom: 5px;
font-size: 18px;
}
.footer span {
font-size: 30px;
}
/*.footer img {
position: absolute;
right: 0;
bottom: -50px;
width: 10%;
}*/
.dtable {
display: table;
height: 100%;
}
.dtablerow {
display: table-row;
}
.dtablecell {
display: table-cell;
vertical-align: middle;
}
.plavniki-content {
font-size: 19px;
line-height: 1.5;
}
.bigtext {
padding: 50px;
font-size: 60px;
color: #fff;
text-align: center;
}
.preimicon {
padding: 20px 0;
}
.preimiconimg {

}
.preimicontitle {
text-transform: uppercase;
font-size: 27px;
padding: 10px;
clear: both;
}
.preimicontext {
font-size: 18px;
}
.preimicontext span {
color: #b22222;
}
.preimicontext a {
color: #b22222;
text-decoration: underline;
text-transform: uppercase;
font-size: 21px;
}
#mobmen {
width: 35px;
height: 35px;
cursor: pointer;
}
#mobmen div {
width: 100%;
height: 7px;
background-color: #112040;
margin-top: 6px;
border-radius: 2px;
}
.plavniker {
background-color: #00143d;
}
.plavniker .verhv {
background-color: #00143d;
position: relative;
}
.plavniker .verhv::before {
content: "";
position: absolute;
width: 3.4%;
height: 70%;
background-image: url(plavnikb.png);
background-size: cover;
left: 0%;
bottom: 3%;
animation: plav2 20s linear infinite;
}
.plavniker .nizv::after {
content: "";
position: absolute;
width: 3.4%;
height: 70%;
background-image: url(plavnikw.png);
background-size: cover;
right: 0%;
bottom: 20%;
animation: plav1 12s ease-in infinite;
}
.plavniker .nizv {
background-color: #00143d;
position: relative;
}
.plavniker .nizv img {
margin-bottom: -5px;
}
@keyframes plav1 {
0% {
right: -10%;
bottom: 75%;
}
100% {
right: 100%;
bottom: -15%;
}
}
@keyframes plav2 {
0% {
left: -10%;
bottom: 60%;
}
100% {
left: 110%;
bottom: -35%;
}
}
.plavverh {
position: relative;
padding-bottom: 5%;
background-image: url(1verh.png);
background-size: auto 101%;
animation: volna 15s linear infinite alternate;
}
.plavverh::before {
content: "";
position: absolute;
width: 3.5%;
height: 105%;
background-image: url(plavnikb2.png);
top: 10%;
z-index: 2;
left: 5%;
animation: plavnik 20s linear infinite;
background-size: cover;
}
.plavniz {
position: relative;
padding-bottom: 5%;
background-image: url(1niz.png);
background-size: auto 101%;
animation: volna 25s linear infinite reverse;
}
.plavniz::after {
content: "";
position: absolute;
background-image: url(plavnikw.png);
z-index: 1;
left: 5%;
animation: plavnik 35s linear infinite;
background-size: 100%;
width: 3.5%;
height: 105%;
bottom: 40%;
}
@keyframes volna {
from{background-position: 0% 0;}
to{background-position: 200% 0;}
}
.centrator {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translate(0,-50%);
}
.centrator h1 + p {
padding: 0 20px;
font-size: 40px;
}
.centrator h1 + p span {
opacity: 0.2;
}
#mobmen {
width: 35px;
height: 35px;
cursor: pointer;
display: inline-block;
margin-right: 10px;
}
#mobmen div {
width: 100%;
height: 7px;
background-color:#111;
margin-top: 6px;
border-radius: 2px;
}
.verhv img, .nizv img {
width: 100%;
}