@import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  height: 130vh;
  position: fixed;
  width: 100%;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(30vh);
          transform: translateY(30vh);
}
.load2 .background {
  -webkit-transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}

.background:before {
/*  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);*/
}

.content-wrapper {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  font-family: Montserrat;
  text-transform: uppercase;
  -webkit-transform: translateY(40vh);
          transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
    max-width: 1034px;
  margin:0 auto;
}

.background.up-scroll {
  -webkit-transform: translate3d(0, -15vh, 0);
          transform: translate3d(0, -15vh, 0);
}
.background.up-scroll .content-wrapper {
  -webkit-transform: translateY(15vh);
          transform: translateY(15vh);
}
.background.up-scroll + .background {
  -webkit-transform: translate3d(0, 30vh, 0);
          transform: translate3d(0, 30vh, 0);
}
.background.up-scroll + .background .content-wrapper {
  -webkit-transform: translateY(30vh);
          transform: translateY(30vh);
}

.background.down-scroll {
  -webkit-transform: translate3d(0, -130vh, 0);
          transform: translate3d(0, -130vh, 0);
}
.background.down-scroll .content-wrapper {
  -webkit-transform: translateY(40vh);
          transform: translateY(40vh);
}
.background.down-scroll + .background:not(.down-scroll) {
  -webkit-transform: translate3d(0, -15vh, 0);
          transform: translate3d(0, -15vh, 0);
}
.background.down-scroll + .background:not(.down-scroll) .content-wrapper {
  -webkit-transform: translateY(15vh);
          transform: translateY(15vh);
}





.pager {
    width:15px;
    position:fixed;
    z-index:999;
    right:50px;
    top:50%;
    margin-top:-155px;
}
.pager .dd {
    width:15px;
    height:15px;
    margin-bottom:10px;
    border:3px solid #fff;
    background:#ddd;
    box-shadow:inset 0 0 2px rgba(0,0,0,.4);
    border-radius:50%; cursor:pointer;
}
.pager .dd.sel {
    background:transparent;
}
.pager .dd.d1.sel {
    background:#00608a;
}






.content-block {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.content-right {
    position: relative;
}
.background-1 .content-right:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 1px;
    bottom: 50px;
    transform: translateX(-50%) rotateX(82deg);
    box-shadow: 0 0 130px 170px rgba(39, 39, 39, 0.8);
    border-radius: 50%;
    left: 50%;
    z-index: 0;
}
.content-title {
    font-size: 32px;
    line-height: 1.5;
    font-family: 'Roboto', sans-serif;
    max-width:500px;
}


.background-1 {
    background-color:#e1dfe0;
  -webkit-transform: translateY(-15vh);
          transform: translateY(-15vh);
    color:#782D28;
    z-index: 100;
}
.background-1 .content-phone {width:348px;height:604px;background:url(../img/tel_1-1.png) no-repeat left top;position: relative;z-index: 1;background-size: 100%;}
.background-1 .content-logo {width: 109px;height: 63px;margin-bottom: 44px;background:url(../img/logo.svg) no-repeat left top;}
	.content-store a {display:inline-block;}
.background-1 .content-wrapper {
  -webkit-transform: translateY(15vh);
          transform: translateY(15vh);
    max-width: 1070px;
}
	.background-1 .content-title {margin-bottom: 51px;line-height: 1.37;font-size: 40px;max-width: 613px;}
    .background-1 .content-store a {width: 216px;margin-right: 7px;}
    .background-1 .content-store a:last-child {width: 232px;}
    .background-1 .content-store img {width: 100%;}
.background-2 {background-color:#0f6f95; z-index:90;}
	.background-2 .content-phone {width: 517px; height: 870px;}
	.background-2 .content-title {color:#fff; text-align: left;}
	.background-2 .content-left {padding-right: 0;margin-left: 90px;}
    .background-2 .content-title {max-width: 599px;width: 599px;}

.background-3 {background-color:#702d27; z-index:80;}
	.background-3 .content-phone {width: 340px; height: 600px;}
	.background-3 .content-title {color:#fff;text-align: right;max-width: 662px;}
	.background-3 .content-left {padding-left: 5px;}

.background-4 {background-color:#0f6f95; z-index:70;}
	.background-4 .content-phone {width: 323px; height: 568px;}
	.background-4 .content-title {color:#fff; text-align: left;max-width: 651px;}
	.background-4 .content-left {padding-right:24px;}

.background-5 {background-color:#702d27; z-index:60;}
	.background-5 .content-phone {width: 316px; height: 573px;}
	.background-5 .content-title {color:#fff;text-align: right;max-width: 640px;}
	.background-5 .content-left {padding-left:24px;}

.background-6 {background-color:#0f6f95; z-index:50;}
	.background-6 .content-phone {width: 326px; height: 581px;}
	.background-6 .content-title {color:#fff;max-width: 650px;text-align: left;}
	.background-6 .content-left {padding-right:24px;}

.background-7 {background-color:#702d27; z-index:40;}
	.background-7 .content-phone {width: 464px; height: 714px;margin-right: -32px;}
	.background-7 .content-title {color:#fff;max-width: 484px;text-align: right;}
	.background-7 .content-left {padding-left:24px;}

.background-8 {background-color:#0f6f95; z-index:30;}
	.background-8 .content-phone {width: 329px; height: 568px;margin-right: 39px;}
	.background-8 .content-title {color:#fff; text-align:left;max-width: 450px;}
	.background-8 .content-left {padding-right:24px;}
    .background-8 .content-block {justify-content: flex-start;}

.background-9 {background-color:#702d27; z-index:20;}
	.background-9 .content-phone {width: 451px; height: 751px;}
	.background-9 .content-title {color:#fff;}
	.background-9 .content-left {padding-left:24px;}

.background-10 {background-color:#0f6f95; z-index:10;}
    .background-10 .content-block {justify-content: flex-start;}
	.background-10 .content-phone {width: 332px; height: 569px;margin-left: -15px;margin-right: 50px;}
	.background-10 .content-title {color:#fff; text-align: left;max-width: 777px;width: 777px;}
	.background-10 .content-left {padding-right:24px;}

.background-11 {background-color:#702d27; z-index:9;}
    .background-11 .content-phone {width: 311px; height: 581px;margin-left: 55px;}
    .background-11 .content-title {color:#fff;text-align: right;}
    .background-11 .content-left {padding-left:24px;}
    .background-11 .content-block {justify-content: flex-end;}

.background-12 {background-color:#fff; z-index:8; display: flex; justify-content: center; align-items: center;}



	.load .background-2 .content-phone {background: url(../img/tel_2-1.png) no-repeat right bottom,url(../img/tel_2-2.png) no-repeat left top;}
	.load .background-3 .content-phone {background: url(../img/tel_3.png) no-repeat center;}
	.load .background-4 .content-phone {background: url(../img/tel_4.png) no-repeat center;}
	.load .background-5 .content-phone {background: url(../img/tel_5-1.png) no-repeat center;}
	.load .background-6 .content-phone {background: url(../img/tel_6.png) no-repeat center;}
	.load .background-7 .content-phone {background: url(../img/tel_7-1.png) no-repeat left bottom,url(../img/tel_7-2.png) no-repeat right top;}
	.load .background-8 .content-phone {background: url(../img/tel_8-1.png) no-repeat center;}
	.load .background-9 .content-phone {background: url(../img/tel_9-1.png) no-repeat left bottom,url(../img/tel_9-2.png) no-repeat right top;}
	.load .background-10 .content-phone {background:url(../img/tel_10.png) no-repeat center center;}
	.load .background-11 .content-phone {background:url(../img/tel_11.png) no-repeat center center;}


.pagerBot {display:block; position:fixed; bottom:0; height:10vh; width:100%; z-index:999;}
	.pagerBotBtn {display:block; bottom:0; height:50px; width:50px; background:url(../img/str-bot.svg) no-repeat center center; background-size:contain; margin:0 auto; cursor:pointer; opacity:0.3;  
		transition: all 0.3s ease ; 
		-webkit-transition:all 0.3s ease ;
		position:relative; top:0;
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);		
		}
		.pagerBotBtn:hover {opacity:0.3; top:5px;}

.t772__scroll-icon-wrapper { display:none; opacity:0.2;
		transform: rotate(-90deg);		
		float:right; margin-right:30px;
}
	.s0 .t772__scroll-icon-wrapper {opacity:0.9;}
.t772__scroll-icon {display:block; width:60px; height:60px; fill:#fff; 
    -webkit-animation: t772__icon-anim 1.5s infinite;
    animation: t772__icon-anim 1.5s infinite;
}
 @-webkit-keyframes t772__icon-anim {
  0% {
   -webkit-transform:translate3d(-20px,0,0);
   opacity:0
  }
  10% {
   -webkit-transform:translate3d(-20px,0,0);
   opacity:0
  }
  20% {
   -webkit-transform:translate3d(-20px,0,0);
   opacity:1
  }
  70% {
   -webkit-transform:translate3d(0,0,0);
   opacity:1
  }
  80% {
   -webkit-transform:translate3d(0,0,0);
   opacity:1
  }
  81% {
   -webkit-transform:translate3d(0,0,0);
   opacity:0
  }
  100% {
   -webkit-transform:translate3d(0,0,0);
   opacity:0
  }
 }
 @keyframes t772__icon-anim {
  0% {
   transform:translate3d(-20px,0,0);
   opacity:0
  }
  10% {
   transform:translate3d(-20px,0,0);
   opacity:0
  }
  20% {
   transform:translate3d(-20px,0,0);
   opacity:1
  }
  70% {
   transform:translate3d(0,0,0);
   opacity:1
  }
  80% {
   transform:translate3d(0,0,0);
   opacity:1
  }
  81% {
   transform:translate3d(0,0,0);
   opacity:0
  }
  100% {
   transform:translate3d(0,0,0);
   opacity:0
  }
 }

.footer {background:#fff; padding:50px;}
	.foot1 {max-width:1140px; margin:0 auto; display:flex; justify-content:space-between; margin-bottom:30px;}
		.bnr {}
			.bnr > a {display:inline-block; margin-right:47px;}

	.foot2 {max-width:1140px; margin:0 auto; display:flex; justify-content:space-between;}
		.foot2 .f1 {font-size:14px; width:57%; color: #838383; line-height:1.1em;}
			.foot2 .f2_in {display:flex; width:400px; justify-content:space-between;}
			.foot2 .str {text-align: center;}
				.foot2 .str a {margin-right:25px;margin-bottom: 15px;display: inline-block;}
			.foot2 .str_top {position:relative; width:64px;}
				.foot2 .str_top .a1 {position:absolute; top:-10px; display:block; width:64px; height:64px; background: #F03223 url(../img/str-bot.svg) no-repeat center center; box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.25); border-radius:50%; cursor:pointer;}
					.foot2 .str_top .a1:hover {background-color: #C32D21 ;}



ul.menu {
display:flex;
margin-right:-10px;
}
ul.menu li {
  display: inline-block;
  margin: 10px;
}
ul.menu li a i.fa {
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 30px;
  padding: 0px;
  border-radius: 40px;
  color: #424242;
  position: relative;
  transition: all ease 0.2s;
}
ul.menu li a i.fa::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  border-radius: 40px;
  background-color: #9E9E9E;
}


ul.menu li a i.fa-vk:after {
  background-image: url(../img/soc1.svg);
  background-repeat:no-repeat;
  background-position:center center;
}
ul.menu li a i.fa-facebook:after {
  background-image: url(../img/soc2.svg);
  background-repeat:no-repeat;
  background-position:center center;
}
ul.menu li a i.fa-twitter:after {
  background-image: url(../img/soc3.svg);
  background-repeat:no-repeat;
  background-position:center center;
}
ul.menu li a i.fa-instagram:after {
  background-image: url(../img/soc4.svg);
  background-repeat:no-repeat;
  background-position:center center;
}
ul.menu li a i.fa-yt:after {
  background-image: url(../img/soc5.svg);
  background-repeat:no-repeat;
  background-position:center center;
}
ul.menu li a i.fa-ok:after {
  background-image: url(../img/soc6.svg);
  background-repeat:no-repeat;
  background-position:center center;
}
ul.menu li a i.fa-rss:after {
  background-image: url(../img/soc7.svg);
  background-repeat:no-repeat;
  background-position:center center;
}
ul.menu li a i.fa-telegram::after {
  background-image: url(../img/soc8.svg);
  background-repeat: no-repeat;
  background-position: center center;
}



ul.menu li a i.fa:hover {
  color: #fff;
  font-size: 18px;
}
ul.menu li a i.fa:hover::after {
  animation: animate ease 0.6s forwards;
}
ul.menu li a i.fa-vk:hover::after {
  background-color: #4e77a2;
}
ul.menu li a i.fa-facebook:hover::after {
  background-color: #3b5998;
}
ul.menu li a i.fa-twitter:hover::after {
  background-color: #00aced;
}
ul.menu li a i.fa-instagram:hover::after {
  background-color: #8a3ab9;
}
ul.menu li a i.fa-yt:hover::after {
  background-color: #ff0000;
}
ul.menu li a i.fa-ok:hover::after {
  background-color: #ef6303;
}
ul.menu li a i.fa-rss:hover::after {
  background-color: #f44105;
}
ul.menu li a i.fa-telegram:hover::after {
  background-color: #4e77a2;
}

@keyframes animate {
  0%,20% {
    transform: scale(1);
    border-radius: 40px;
    background-color: #9E9E9E;
  }
  30% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
    border-radius: 10px;
  }
  60%,100% {
    transform: scale(1);
    border-radius: 5px;
  }
}


@media (max-width: 1520px) {
  .background-2 .content-title {
    max-width: 480px;
  }
}
@media only screen and (max-width: 1279px) {
	.foot1 {flex-direction:column; justify-content:center; align-items:center;}
		.foot1 .f1 {padding-bottom:30px;}
		.foot1 .f2 {padding-bottom:10px;}
	.foot2 {flex-direction:column-reverse; justify-content:center; align-items:center;}
		.foot2 .f2 {padding-bottom:40px;}
		.foot2 .f1 {padding-bottom:0px; width:680px;}
    .content-wrapper {
        max-width: 937px;
    }
    .content-title {
        font-size: 26px;
    }
    .background-1 .content-title {
        font-size: 32px;
    }
    .background-1 .content-store a {
        width: 169px;
    }
    .background-1 .content-store a:last-child {
        width: 183px;
    }
    .background-1 .content-phone {
        width: 353px;
    }
    .background-1 .content-left {
        padding-left: 24px;
    }
    .background-2 .content-block,
    .background-7 .content-block {
        justify-content: flex-start;
    }
    .background-2 .content-phone,
    .background-7 .content-phone,
    .background-9 .content-phone {
        width: 375px;
        height: 540px;
    }
    .background-2 .content-left {
        margin-left: 40px;
    }
    .background-2 .content-title {
        max-width: 503px;
        width: auto;
    }
    .background-3 .content-phone {
        width: 270px;
        height: 398px;
    }
    .load .background-3 .content-phone {
        background-size: 180px;
    }
    .background-3 .content-title {
        max-width: 468px;
    }
    .background-3 .content-block,
    .background-4 .content-block,
    .background-5 .content-block,
    .background-6 .content-block,
    .background-8 .content-block,
    .background-9 .content-block,
    .background-10 .content-block,
    .background-11 .content-block {
        justify-content: center;
    }
    .load .background-2 .content-phone,
    .load .background-4 .content-phone,
    .load .background-5 .content-phone,
    .load .background-6 .content-phone,
    .load .background-7 .content-phone,
    .load .background-8 .content-phone,
    .load .background-9 .content-phone,
    .load .background-10 .content-phone,
    .load .background-11 .content-phone {
        background-size: 260px;
    }
    .background-4 .content-phone,
    .background-5 .content-phone,
    .background-6 .content-phone,
    .background-8 .content-phone,
    .background-10 .content-phone,
    .background-11 .content-phone {
        width: 290px;
        height: 435px;
    }
    .background-4 .content-title {
        max-width: 435px;
    }
    .background-5 .content-title {
        max-width: 395px;
    }
    .background-6 .content-title {
        max-width: 415px;
    }
    .background-7 .content-left {
        padding-right: 50px;
    }
    .background .content-phone {
        margin: 0;
    }
    .background-9 .content-title {
        max-width: 440px;
    }
    .background-10 .content-title {
        max-width: 470px;
        width: auto;
    }
    .background-10 .content-phone {
        margin: 0;
    }
    .background-11 .content-title {
        max-width: 352px;
    }
}


@media only screen and (min-width: 1101px) {
	.background-1 {background-image: url(../img/img_1_max.jpg);}
	.load .background-2 {background-image: url(../img/img_3_max.jpg);}
	.load .background-3 {background-image: url(../img/img_2_max.jpg);}
	.load .background-4 {background-image: url(../img/img_3_max.jpg);}
	.load .background-5 {background-image: url(../img/img_4_max.jpg);}
	.load .background-6 {background-image: url(../img/img_5_max.jpg);}
	.load .background-7 {background-image: url(../img/img_6_max.jpg);}
	.load .background-8 {background-image: url(../img/img_7_max.jpg);}
	.load .background-9 {background-image: url(../img/img_8_max.jpg);}
	.load .background-10 {background-image: url(../img/img_9_max.jpg);}
	.load .background-11 {background-image: url(../img/img_10_max.jpg);}
}

@media only screen and (max-width: 1100px) {
	.background-1 {background-image: url(../img/img_1_1024.jpg);}
	.load .background-2 {background-image: url(../img/img_3_1024.jpg);}
	.load .background-3 {background-image: url(../img/img_2_1024.jpg);}
	.load .background-4 {background-image: url(../img/img_3_1024.jpg);}
	.load .background-5 {background-image: url(../img/img_4_1024.jpg);}
	.load .background-6 {background-image: url(../img/img_5_1024.jpg);}
	.load .background-7 {background-image: url(../img/img_6_1024.jpg);}
	.load .background-8 {background-image: url(../img/img_7_1024.jpg);}
	.load .background-9 {background-image: url(../img/img_8_1024.jpg);}
	.load .background-10 {background-image: url(../img/img_9_1024.jpg);}
	.load .background-11 {background-image: url(../img/img_10_1024.jpg);}
}


@media only screen and (max-width: 1000px) {
	.pager {height:15px; position:fixed; z-index:999; top:40px; left:0; width:100%; text-align:center; margin-top:0;}
		.pager .dd {display:inline-block; margin:0 5px;}
		.t772__scroll-icon-wrapper {display:block;}
		.pagerBotBtn {display:none;}
}

@media (max-height: 769px) {
    .background-2 .content-phone,
    .background-7 .content-phone,
    .background-9 .content-phone {
        height: 690px;
    }
}
@media only screen and (max-width: 767px) {
	.background-1 {background-image: url(../img/img_1_mob.jpg);}
	.load .background-2 {background-image: url(../img/img_3_mob.jpg);}
	.load .background-3 {background-image: url(../img/img_2_mob.jpg);}
	.load .background-4 {background-image: url(../img/img_3_mob.jpg);}
	.load .background-5 {background-image: url(../img/img_4_mob.jpg);}
	.load .background-6 {background-image: url(../img/img_5_mob.jpg);}
	.load .background-7 {background-image: url(../img/img_6_mob.jpg);}
	.load .background-8 {background-image: url(../img/img_7_mob.jpg);}
	.load .background-9 {background-image: url(../img/img_8_mob.jpg);}
	.load .background-10 {background-image: url(../img/img_9_mob.jpg);}
	.load .background-11 {background-image: url(../img/img_10_mob.jpg);}

	.foot1 {}
		.foot1 .f1 {}
		.foot1 .f2 {}
	.foot2 {}
		.foot2 .f2 {}
		.foot2 .f1 {width:100%;}
	.bnr > a {margin-right:0; transform:scale(.9)}

	
	.content-title {max-width:inherit;}
	
	.background-1 .content-block {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
	.background-1 .content-left {width:100%; position:relative;padding-left: 30px;}
		.background-1 .content-title {margin-bottom:50px; max-height:inherit; height:inherit;}
		.background-1 .content-logo {    margin-bottom: 40px;}
		.background-1 .content-store {text-align:center; margin-bottom:40px; padding-right:24px; position:absolute; top: 10px; right:0;}
			.background-1 .content-store a {margin: 0 25px;}
        .background-1 .content-store a:last-child {width: 187px;}
	.background-1 .content-right {width:100%;}
	.background-1 .content-phone {margin:0 auto;}

    .load .background-2 .content-phone,
    .load .background-4 .content-phone,
    .load .background-5 .content-phone,
    .load .background-6 .content-phone,
    .load .background-7 .content-phone,
    .load .background-8 .content-phone,
    .load .background-9 .content-phone,
    .load .background-10 .content-phone,
    .load .background-11 .content-phone {
        background-size: 360px;
    }
    .background-4 .content-phone,
    .background-5 .content-phone,
    .background-6 .content-phone,
    .background-8 .content-phone,
    .background-10 .content-phone,
    .background-11 .content-phone {
        width: 350px;
        height: 610px;
    }

    .background-2 .content-phone,
    .background-7 .content-phone,
    .background-9 .content-phone {
        width: 530px;
        height: 720px;
    }
    .background-2 .content-block,
    .background-4 .content-block,
    .background-6 .content-block,
    .background-8 .content-block,
    .background-10 .content-block {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .background-2 .content-left,
    .background-4 .content-left,
    .background-6 .content-left,
    .background-8 .content-left,
    .background-10 .content-left {
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .background-3 .content-block,
    .background-5 .content-block,
    .background-7 .content-block,
    .background-9 .content-block,
    .background-11 .content-block{
        flex-direction: column;
        align-items: flex-end;
    }
    .load .background-3 .content-phone {
        background-size: 250px;
    }
    .background-3 .content-phone {
        width: 300px;
        height: 532px;
    }
    .background-3 .content-left,
    .background-5 .content-left,
    .background-7 .content-left,
    .background-9 .content-left,
    .background-11 .content-left {
        margin-right: 30px;
        margin-bottom: 20px;
    }
    .background-2 .content-phone {
        margin-left: -22px;
    }

    .background-7 .content-phone,
    .background-9 .content-phone {
        margin-right: -22px;
    }
    .background-4 .content-phone,
    .background-6 .content-phone,
    .background-8 .content-phone,
    .background-10 .content-phone {
        margin-left: -10px;
    }
    .background-5 .content-phone,
    .background-11 .content-phone {
        margin-right: -10px;
    }
    .background-7 .content-left {
        padding-right: 0;
    }
    .background-9 .content-title {
        text-align: right;
    }
}