@import url(reset.css);

@font-face {
	font-family: MuseoBlack;
	src: url(../fonts/MuseoSansBlack.ttf);
}

@font-face {
	font-family: MuseoMed;
	src: url(../fonts/MuseoSansMedium.ttf);
}

@font-face {
	font-family: Museo;
	src: url(../fonts/MuseoSansRegular.ttf);
}

/*********************************/

.modalWrap {
	position: absolute;
	width: 100%;
	text-align: center;
}

.galery {
	background-color: white;
	border-radius: 15px;
	max-width: 85%;
	padding: 15px;
	position: relative;
	z-index: 5555;
	display: none;
	margin-bottom: 50px;
}

#galeryImg {
	max-width: 100%;
}

.modal_close {
	position: absolute;
	font: 24px MuseoBlack;
	line-height: 26px;
	color: black;
	width: 32px;
	height: 32px;
	border: 2px solid black;
	border-radius: 50%;
	background-color: white;
	transform: rotate(45deg);
	text-align: center;
	margin-left: calc(100% - 70px);
	margin-top: 10px;
	display: inline-block;
	cursor: pointer;
}

.burgerModal {
	border-radius: 15px;
	max-width: 85%;
	padding: 15px;
	position: relative;
	z-index: 5555;
	display: none;
	margin-bottom: 50px;
}

.burgerModal a {
	color: white;
	font: 28px MuseoBlack;
	line-height: 3;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.videoModal {
	background-color: white;
	border-radius: 15px;
	width: 100vw;
	height: 56.25vw;
	max-width: 85%;
	padding: 15px;
	position: relative;
	z-index: 5555;
	display: none;
	margin-bottom: 50px;
}

.videoFrame {
	max-width: 100%;
}

.modalForm {
	background-color: white;
	border-radius: 15px;
	max-width: 370px;
	width: calc(100% - 20px);
	padding: 25px 0;
	position: relative;
	z-index: 5555;
	display: none;
	margin-bottom: 50px;
	padding-top: 30px;
	padding-bottom: 30px;
}

input {
	max-width: 370px;
	width: calc(100% - 30px);
	background-color: #ededed;
	border: 0;
	height: 60px;
	border-radius: 5px;
	margin-bottom: 15px;
	padding-left: 60px;
	font: 16px Museo;
	color: black;
}

.nameWrap::before {
	content: "";
	width: 25px;
	height: 25px;
	margin-top: 17px;
	margin-left: 20px;
	opacity: 0.4;
	/*background-color: red;*/
	display: inline-block;
	position: absolute;
	background: url(../images/svg/avatar.svg) no-repeat;
	background-position: center;
}

.phoneWrap::before {
	content: "";
	width: 25px;
	height: 25px;
	margin-top: 17px;
	margin-left: 20px;
	opacity: 0.4;
	/*background-color: red;*/
	display: inline-block;
	position: absolute;
	background: url(../images/svg/phone-call.svg) no-repeat;
	background-position: center;
}

.promoWrap::before {
	content: "";
	width: 25px;
	height: 25px;
	margin-top: 17px;
	margin-left: 20px;
	opacity: 0.4;
	/*background-color: red;*/
	display: inline-block;
	position: absolute;
	background: url(../images/svg/information.svg) no-repeat;
	background-position: center;
}

.emailWrap::before {
	content: "";
	width: 25px;
	height: 25px;
	margin-top: 17px;
	margin-left: 20px;
	opacity: 0.4;
	/*background-color: red;*/
	display: inline-block;
	position: absolute;
	background: url(../images/svg/envelope.svg) no-repeat;
	background-position: center;
	filter: invert(100%);
}

.adresWrap::before {
	content: "";
	width: 25px;
	height: 25px;
	margin-top: 17px;
	margin-left: 20px;
	opacity: 0.4;
	/*background-color: red;*/
	display: inline-block;
	position: absolute;
	background: url(../images/svg/placeholder.svg) no-repeat;
	background-position: center;
}

.submit {
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	max-width: calc(100% - 30px);
	height: 50px;
	border-radius: 3px;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	border-bottom: 2px solid #ff4e00;
	cursor: pointer;
	user-select: none;
	text-align: center;
	box-sizing: border-box;
}

#agree {
	width: 0px;
	height: 0px;
	position: absolute;
	display: none;
	opacity: 0;
}

.fakeCheckbox {
	width: 19px;
	height: 19px;
	background-image: linear-gradient( 90deg, #ededed 0%, #ededed 100%);
	margin-left: 15px;
	margin-bottom: 15px;
	margin-top: 0;
	display: inline-block;
	border-radius: 5px;
	border: 1px solid #aaaaaa;
	float: left;
	text-align: left;
}

.fakeCheckboxChecked::after {
	content: "";
	width: 12px;
	height: 12px;
	background-image: url(../images/svg/checked.svg);
	margin-top: 3px;
	margin-left: 3px;
	display: inline-block;
	position: absolute;
	border-radius: 5px;
	filter: invert(100%);
	border: 0;
}

.fakeCheckboxChecked::before {
	content: "";
	width: 19px;
	height: 19px;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	margin-top: -1px;
	margin-left: -1px;
	display: inline-block;
	position: absolute;
	border-radius: 5px;
}

.soglasen {
	font: 13px Museo;
	line-height: 19px;
	color: black;
	float: left;
	padding-left: 10px;
	margin-bottom: 15px;
}

.submit h4 {
	font: 18px MuseoMed;
	color: white;
	vertical-align: middle;
	display: inline-block;
}

.submit:hover {
	background-image: linear-gradient( 270deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
}

.submit:active {
	border-bottom: 0;
	transform: translateY(2px);
}

#overlay {
	z-index:5554;
	position:fixed;
	background-color:#000;
	opacity:0.8; 
	filter:alpha(opacity=80);
	width:100%; 
	height:calc(100% + 1000px);
	top:0;
	left:0;
	cursor:pointer;
	display:none;
}

.empty {
	box-shadow: 0 0 15px red inset;
}
/*********************************/

header {
	height: 100px;
	box-sizing: border-box;
}

.container {
	position: relative;
}

.headerWrap {
	height: 100px;
}

.fixHead {
	position: fixed;
	width: 100%;
	border-bottom: 4px solid #efefef;
	z-index: 99;
	background-color: white;
}

.helper {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.insideHeadWrap {
	height: 100px;
	padding: 0;
}

.logo {
	display: inline-block;
	vertical-align: middle;
}

.headNavList {
	display: inline-block;
    vertical-align: middle;
	padding: 0;
}

.headNavList li {
	display: inline-block;
}

.headNavList li:nth-child(2) {
	padding-left: 22px;
}

.headNavList li:nth-child(3) {
	padding-left: 22px;
}

.headNavList li a {
	color: black;
	font: 18px Museo;
}

.tel {
	display: inline-block;
	vertical-align: middle;
	font: 21px MuseoBlack;
	line-height: 21px;
	color: black;
	background: url(../images/tel.png) no-repeat;
	background-position: center left;
	padding-left: 35px;
}

.tel span {
	font: 16px Museo;
	color: #757575;
}

.buttonWrap {
	padding: 0;
}

.button {
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	max-width: calc(100% - 25px);
	height: 50px;
	border-radius: 3px;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	border-bottom: 2px solid #ff4e00;
	cursor: pointer;
	user-select: none;
	text-align: center;
	box-sizing: border-box;
}

.button h4 {
	font: 18px MuseoMed;
	color: white;
	vertical-align: middle;
	display: inline-block;
}

.button:hover {
	background-image: linear-gradient( 270deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
}

.button:active {
	border-bottom: 0;
	transform: translateY(2px);
}

.blick {
	position: absolute;
	width: 20px;
	background-color: white;
	height: 300px;
	margin-top: -100px;
	left: -50px;
	transform: rotate(25deg);
	
	animation-name: shine;
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes shine {
    0% {left: -50px; }
    10% {left: -50px; }
    20% {left:600px;}
    100% {left: 600px; }
}

.sec1 {
	min-height: 700px;
	position: relative;
}

.devBgWrap {
	position: absolute;
	width: 100%;
	overflow-x: hidden;
	overflow-y: visible;
}

.devBg {
	background: url(../images/sec1bg.png) no-repeat;
	background-position: left bottom;
	margin-left: calc(50% - 190px);
	width: 1158px;
	height: 700px;
	position: relative;
}

.circle1 {
	background: url(../images/circle1.png) no-repeat;
	width: 195px;
	height: 195px;
	margin-top: 210px;
	margin-left: 240px;
	position: absolute;
	
	animation-name: verhniz;
	animation-duration: 8s;
	/*animation-timing-function: cubic-bezier(0, 1, 0);*/
	animation-iteration-count: infinite;
}

.circle2 {
	background: url(../images/circle2.png) no-repeat;
	width: 75px;
	height: 75px;
	margin-top: 50px;
	margin-left: 650px;
	position: absolute;
	
	animation-name: verhniz;
	animation-duration: 6s;
	/*animation-timing-function: cubic-bezier(0, 1, 0);*/
	animation-iteration-count: infinite;
}

@keyframes verhniz {
    0% {transform: translateY(0);}
    50% {transform: translateY(-80%);}
    100% {transform: translateY(0);}
}

.devushka {
	position: absolute;
	width: 397px;
	height: 684px;
	background: url(../images/okna.png) no-repeat;
	margin-top: 16px;
	margin-left: 337px;
}

.playButton {
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	box-shadow: 0px 10px 18px 0px rgba(255, 151, 129, 1);
	width: 100px;
	height: 100px;
	position: absolute;
	border-radius: 50%;
	margin-left: 200px;
	margin-top: 500px;
	text-align: center;
}

.pulse::before {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1px solid #ee3c43;
	animation-name: pulse;
	animation-duration: 4s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	position: absolute;
	display: block;
	opacity: 0;
}

.pulse::after {
	content: "";
	width: 100%;
	height: 100%;
	margin-top: -100%;
	border-radius: 50%;
	border: 1px solid #ee3c43;
	animation-name: pulse;
	animation-duration: 4s;
	animation-timing-function: ease-in;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	position: absolute;
	display: block;
	opacity: 0;
}

@keyframes pulse {
    0% {transform: scale(1); opacity: 0; }
    1% {transform: scale(1); opacity: 1; }
    51% {transform: scale(1.75); opacity: 0; }
    100% {transform: scale(1.75); opacity: 0; }
}

.playButton:hover {
	background-image: linear-gradient( 270deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	text-decoration: none;
}

.play {
	display: inline-block;
	vertical-align: middle;
	width: 41px;
	height: 45px;
	margin-left: 4px;
}

.play svg {
	width: 41px;
	height: 45px;
	fill: white;
}

h1 {
	font: 56px MuseoMed;
	line-height: 1.2;
	color: black;
	padding-top: 170px;
}

.red {
	color: #ee3a43;
}

.sec1 h2 {
	color: black;
	font: 18px Museo;
	padding-top: 20px;
	padding-bottom: 20px;
}

h3 {
	text-align: center;
	padding-top: 90px;
	font: bold 36px MuseoMed;
	color: black;
}

.stick {
	width: 80px;
	height: 4px;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	margin: 15px auto 0 auto;
}

.sec2 {
	padding-bottom: 150px;
	overflow: hidden;
}

.sec2 .container {
	position: relative;
}

.sec2 ul {
	padding-top: 30px;
}

.sec2 ul li {
	padding-top: 40px;
}

.listIconWrap {
	width: 70px;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

.listIcon {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	box-shadow: 0px 10px 18px 0px rgba(255, 151, 129, 1);
	display: inline-block;
	text-align: center;
}

.listIcon svg {
	vertical-align: middle;
	margin-left: -1px;
	fill: white;
}

.listIcon img {
	vertical-align: middle;
	margin-left: -1px;
}

.listContentWrap {
	display: inline-block;
	width: calc(100% - 75px);
	vertical-align: middle;
}

.listContentWrap h6 {
	font: bold 17px MuseoMed;
	line-height: 1.5;
	padding-bottom: 10px;
	color: black;
}

.listContentWrap p {
	font: 16px Museo;
	color: #353535;
	line-height: 1.625;
}

.rightList .listContentWrap {
	text-align: right;
}

.rightList .listIconWrap {
	text-align: right;
}

.greyCircles {
	position: relative;
	z-index: -1;
	border: 0;
	outline: 0;
}

.greyCircle1 {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 1px solid #f9f9f9;
	animation-name: pulse2;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	position: absolute;
	display: block;
	margin-left: calc(50% - 50px);
	margin-top: 200px;
	outline: 0;
	opacity: 0;
}

.greyCircle2 {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 1px solid #f9f9f9;
	animation-name: pulse2;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	position: absolute;
	display: block;
	margin-left: calc(50% - 50px);
	margin-top: 200px;
	outline: 0;
	opacity: 0;
}

.greyCircle3 {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 1px solid #f9f9f9;
	animation-name: pulse2;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	position: absolute;
	display: block;
	margin-left: calc(50% - 50px);
	margin-top: 200px;
	outline: 0;
	opacity: 0;
}

@keyframes pulse2 {
    0% {transform: scale(0); opacity: 0;}
    1% {transform: scale(0); opacity: 1;}
    41% {transform: scale(7); opacity: 1;}
    51% {transform: scale(9); opacity: 0;}
    100% {transform: scale(0); opacity: 0; }
}



.rukzak360 {
	text-align: center;
	padding-top: 100px;
}

.polzunokWrap {
	text-align: center;
	margin-top: 30px;
}

.polzunok {
	text-align: left;
	width: calc(100% - 30px);
	display: inline-block;
	position: relative;
}

.fakePolzunok {
	background-color: #ee3a43;
	height: 4px;
	border-radius: 2px;
	position: absolute;
	width: 100%;
	margin-top: 9px;
}

.eglet {
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	box-shadow: 0px 2px 32px 0px rgba(241, 100, 70, 1);
	border-radius: 5px;
	height: 20px;
	width: 48px;
	margin-left: -24px;
	transform: translateX(0) translateY(-8px);
	display: inline-block;
	text-align: center;
	color: white;
	font: bold 16px MuseoMed;
	line-height: 20px;
	user-select: none;
}

.polzunok360 {
	border: 1px solid red;
	opacity: 0;
	cursor: pointer;
	transform: scale(1.05);
	max-width: 100%;
	padding: 0;
}

.rukzak0360img {
	width: calc(100% - 50px);
	max-width: 310px;
}

.sec4 {
	
}

.photoCard {
	display: inline-block;
	background-size: cover;
	height: 26vw;
	padding: 0;
	text-align: center;
	user-select: none;
}

.blackMask {
	height: 26vw;
	background-color: rgba(0,0,0,0.5);
	transition: 0.25s;
}

.blackMask:hover {
	opacity: 0;
	cursor: default;
	transition: 0.25s;
}

.mask {
	display: inline-block;
	vertical-align: middle;
}

.mask svg {
	fill: white;
}

.mask h6 {
	color: white;
	font: 30px Museo;
	line-height: 80px;
}

.card1 {
	background-image: url(../images/sertificat_1.jpg);
}

.card2 {
	background-image: url(../images/sertificat_2.jpg);
}

.card3 {
	background-image: url(../images/sertificat_3.jpg);
}

.card4 {
	background-image: url(../images/sertificat_4.jpg);
}


.sec4 {
	padding-top: 60px;
}

.photoGalery {
	position: relative;
}

.photoGalery img {
	width: 100%;
}

.lupa {
	position: absolute;
	text-align: center;
	width: calc(100% - 30px);
	height: calc(100% - 3px);
	background-color: rgba(240, 81, 87, 0.8);
	opacity: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: 0.3s;
}

.lupa:hover {
	opacity: 1;
	transition: 0.3s;
}

.lupa svg {
	vertical-align: middle;
	width: 41px;
	fill: #fff;
}

.sec5 {
	padding-bottom: 30px;
}

.sec5 ul {
	padding-top: 30px;
}

.sec5 ul li {
	padding-top: 40px;
}

.numb {
	font: bold 25px MuseoMed;
	color: white;
	line-height: 50px;
	margin-left: -1px;
}

.yellowBagWrap {
	text-align: center;
	margin-top: 60px;
}

.yellowBag {
	width: calc(100% - 30px);
	position: relative;
	z-index: -2;
}

.priznakWrap {
	position: absolute;
	z-index: 1;
	border-radius: 50%;
}

.priznakImg {
	background-size: cover;
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	width: 0;
	height: 0;
	margin-left: 20px;
	margin-top: 20px;
	transform: translateY(0) translateX(0);
	box-shadow: 0px 2px 40px 0px #bababa;
	
	transition: 0.3s;
}

.priznakWrap:hover .priznakImg {
	width: 173px;
	height: 173px;
	margin-left: 20px;
	margin-top: 20px;
	transform: translateY(-86px) translateX(-173px);
	
	animation-name: uvelich;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
}

@keyframes uvelich {
    0% {width: 0; height: 0; transform: translateY(0) translateX(0);}
    80% {width: 216px; height: 216px; transform: translateY(-108px) translateX(-216px);}
    100% {width: 173px; height: 173px; transform: translateY(-86px) translateX(-173px);}
}



.priznak {
	vertical-align: middle;
	display: inline-block;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	box-shadow: 0px 10px 18px 0px rgba(255, 151, 129, 1);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	z-index: 2;
}

.priznakWrap:hover .priznak svg {
	display: none;
}

.priznak1 {
	margin-left: calc(62%);
	margin-top: 205px;
}

.priznak1Img {
	background-image: url(../images/big1.jpg);
}

.priznak1:hover .priznak::after {
	content: "1";
	color: white;
	font: bold 20px MuseoMed;
	line-height: 40px;
}

.priznak2 {
	margin-left: calc(20%);
	margin-top: 385px;
}

.priznak2Img {
	background-image: url(../images/big2.jpg);
}

.priznak2:hover .priznak::after {
	content: "2";
	color: white;
	font: bold 20px MuseoMed;
	line-height: 40px;
}

.priznak3 {
	margin-left: calc(50% + 10px);
	margin-top: 5px;
}

.priznak3Img {
	background-image: url(../images/big3.png);
}

.priznak3:hover .priznak::after {
	content: "3";
	color: white;
	font: bold 20px MuseoMed;
	line-height: 40px;
}



.priznak4 {
	margin-left: calc(48%);
	margin-top: 105px;
}

.priznak4Img {
	background-image: url(../images/big4.jpg);
}

.priznak4:hover .priznak::after {
	content: "4";
	color: white;
	font: bold 20px MuseoMed;
	line-height: 40px;
}

.priznak svg {
	fill: white;
	width: 22px;
	margin-top: 9px;
}

.sec6 {
	background: url(../images/sec6bg.png) no-repeat;
	background-position: center top;
	background-size: cover;
	padding-bottom: 100px;
}

.practicWrap {
	margin-top: 60px;
}

.practic {
	position: relative;
}

.practicCard {
	position: relative;
	display: inline-block;
	margin-bottom: 24px;
}

.practicCard img {
	z-index: 1;
	position: relative;
	filter: grayscale(100%) brightness(70%);
	width: 100%;
}

.practicCard:hover img {
	filter: grayscale(0%) brightness(70%);
}

.opisanieWrap {
	position: absolute;
	z-index: 2;
	text-align: center;
	width: calc(100% - 30px);
	height: 100%;
}

.practicCard1::after {
	content: "Вместительный";
	color: white;
	position: relative;
	font: bold 24px MuseoMed;
}

.practicCard2::after {
	content: "Очень удобный";
	color: white;
	position: relative;
	font: bold 24px MuseoMed;
}

.practicCard3::after {
	content: "Заметный и безопасный";
	color: white;
	position: relative;
	font: bold 24px MuseoMed;
}

.practicCard4::after {
	content: "Невероятно легкий";
	color: white;
	position: relative;
	font: bold 24px MuseoMed;
}

.practicCard5::after {
	content: "Отдыхайте где угодно";
	color: white;
	position: relative;
	font: bold 24px MuseoMed;
}

.practicCard6::after {
	content: "Сильно, эстетично и практично";
	color: white;
	position: relative;
	font: bold 24px MuseoMed;
	display: inline-block;
	top: -50%;
	margin-top: -29px;
}

.practicCard:hover .opisanieWrap::after {
	display: none;
}

.practicCard .opisanieWrap .opisanie {
	display: none;
	vertical-align: middle;
	width: calc(100% - 70px);
	color: white;
	font: 16px Museo;
}

.practicCard:hover .opisanieWrap .opisanie {
	display: inline-block;
	position: relative;
}

.sec7 {
	padding-top: 0;
	padding-bottom: 90px;
}

.rukzakTypeWrap {
	margin-top: 60px;
	position: relative;
}

.rukzakType {
	width: 20%;
	height: 200px;
	display: inline-block;
	float: left;
	cursor: pointer;
	color: white;
	position: relative;
}

.rukzakType .typeImg {
	margin-top: -10px;
	margin-left: -10px;
}

.typeMini {
	background-image: linear-gradient( 90deg, rgb(0,123,241) 0%, rgb(14,86,160) 100%);
	border-radius: 4px 0 0 4px;
	border: 10px none #007df2;
	padding: 10px;
}

.typeClassic {
	background-image: linear-gradient( 90deg, rgb(218,101,29) 0%, rgb(123,0,0) 100%);
	border: 10px none #da651d;
	padding: 10px;
}

.typeBig {
	background-image: linear-gradient( 90deg, rgb(94,41,111) 0%, rgb(48,6,65) 100%);
	border: 10px none #5d286e;
	padding: 10px;
}

.typeNo2 {
	background-image: linear-gradient( 90deg, rgb(183,39,61) 0%, rgb(84,4,13) 100%);
	border: 10px none #b6273c;
	padding: 10px;
}

.typeRekanken {
	background-image: linear-gradient( 90deg, rgb(194,76,135) 0%, rgb(87,41,65) 100%);
	border-radius: 0 4px 4px 0;
	border: 10px none #c04b85;
	padding: 10px;
}

.curType {
	border-style: solid;
	background: white;
	padding: 0;
	color: black;
}

.curType .typeImg {
	margin-top: 0;
	margin-left: 0;
	width: 100%;
}

.typeName {
	font: 24px MuseoMed;
	display: inline-block;
	vertical-align: middle;
	padding-left: 5px;
	z-index: 2;
	position: relative;
}

.typeImg {
	width: calc(100% - 10px);
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
}

.typeMini .typeImg {
	background-image: url(../images/rehau_mini_1.png);
	background-position: calc(100% - 10px) center;
}

.typeClassic .typeImg {
	background-image: url(../images/veka_mini_1.png);
	background-position: calc(100% - 10px) center;
}

.typeBig .typeImg {
	background-image: url(../images/big.png);
	background-position: calc(100% - 10px) center;
}

.typeNo2 .typeImg {
	background-image: url(../images/no2.png);
	background-position: calc(100% - 10px) center;
}

.typeRekanken .typeImg {
	background-image: url(../images/rekanken.png);
	background-position: calc(100% - 10px) center;
}

.curRukImgWrap {
	margin-top: 80px;
}

.curRukImgWrap img {
	width: 100%;
}

.discount {
	position: absolute;
	border-radius: 50%;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	box-shadow: 0px 10px 18px 0px rgba(255, 151, 129, 1);
	width: 98px;
	height: 98px;
	text-align: center;
	margin-left: calc(80% - 50px);
	margin-top: 70px;
	user-select: none;
}

.discount p {
	display: inline-block;
	color: white;
	vertical-align: middle;
	font: bold 30px MuseoMed;
}

.shopWrap {
	margin-top: 70px;
}

.shopCurName {
	color: black;
	font: bold 24px MuseoMed;
	display: inline-block;
}

.infoIconWrap {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #ee3a43;
	text-align: center;
	cursor: help;
	display: inline-block;
	margin-left: 15px;
}

.infoIconWrap svg {
	fill: white;
	height: 16px;
	margin-top: 3px;
}

.infoIconWrap:hover .infoWrap {
	display: inline-block;
}

.infoWrap {
	position: absolute;
	width: 400px;
	padding: 12px;
	background-color: white;
	box-shadow: 0px 5px 18px 0px rgba(239, 239, 239, 1);
	margin-left: -170px;
	margin-top: 30px;
	font: 16px Museo;
	line-height: 1.5;
	display: none;
	color: black;
	z-index: 2;
}

.charsWrap {
	margin-top: 10px;
	display: inline-block;
	float: left;
	position: relative;
}

.charsWrap .helper {
	position: absolute;
}

.delimiter {
	clear: both;
}

.leftChars {
	width: 380px;
}

.rightChars {
	width: 265px;
}

.char {
	display: inline-block;
	padding: 5px 0;
	float: left;
	width: 100%;
}

.leftChar {
	width: 70px;
	display: inline-block;
	vertical-align: middle;
	font: bold 14px MuseoMed;
	color: black;
}

.centerChar {
	width: 70px;
	margin: 0 30px;
	background-color: #d3d3d3;
	height: 1px;
	display: inline-block;
	vertical-align: middle;
}

.rightChar {
	font: 14px Museo;
	line-height: 1.857;
	color: black;
	display: inline-block;
	vertical-align: middle;
}

.colorsWrap {
	margin-top: 40px;
}

.colorName {
	font: bold 16px MuseoMed;
	color: black;
	line-height: 1.625;
}

.colorName span {
	font: 16px Museo;
}

.colors {
	background-color: #f6f6f6;
	margin-top: 15px;
	padding: 10px 15px;
	display: none;
}

.visibleColors {
	display: block;
}

.colorWrap {
	padding: 10px 5px;
	display: inline-block;
}

.color {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
}

.curColor::after {
	content: "";
	width: 30px;
	height: 30px;
	margin-top: -30px;
	position: absolute;
	border: 5px inset #888888;
	border-radius: 50%;
}

.prices {
	margin-top: 20px;
}

.oldPrice {
	font: 20px Museo;
	color: black;
	text-decoration: line-through;
	display: inline-block;
	vertical-align: middle;
}

.price {
	display: inline-block;
	font: bold 36px MuseoMed;
	color: #ee3a43;
	vertical-align: middle;
	padding-left: 20px;
}

.economy svg {
	width: 30px;
	fill: #ee3a43;
	vertical-align: middle;
}

.economy {
	color: black;
	font: 18px Museo;
	margin-top: 15px;
}

.economy span {
	color: #ee3a43;
	font: bold 18px MuseoMed;
}

.button3Wrap {
	padding: 0;
	margin-top: 20px;
}

.button3 {
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	width: 265px;
	max-width: calc(100% - 25px);
	height: 60px;
	border-radius: 3px;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	border-bottom: 2px solid #ff4e00;
	cursor: pointer;
	user-select: none;
	text-align: center;
	box-sizing: border-box;
}

.button3 h4 {
	font: 18px MuseoMed;
	color: white;
	vertical-align: middle;
	display: inline-block;
}

.button3:hover {
	background-image: linear-gradient( 270deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
}

.button3:active {
	border-bottom: 0;
	transform: translateY(2px);
}


.sec8 {
	background: url(../images/sec8bg.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	padding-bottom: 90px;
}

.sec8 h3 {
	color: white;
}









.sliderWrap {
	overflow: hidden;
	width: calc(100% - 200px);
	padding-top: 60px;
	margin-left: 100px;
	position: relative;
}

.sliderWrap ul {
	position: relative;
	width: 10000px;
	height: 100%;
	display: inline-block;
}

.sliderWrap ul li {
	width: 460px;
	min-width: 250px;
	padding: 0 15px;
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	float: left;
}

.sliderWrapInside {
	background-color: white;
	padding: 30px 20px 0 20px;
	position: relative;
	display: inline-block;
	border-radius: 5px;
	box-sizing: border-box;
}

.sliderImgWrap {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: black;
	border: 1px solid white;
	display: inline-block;
	position: relative;
	float: left;
}

.sliderImg {
	vertical-align: middle;
	width: 80px;
	height: 80px;
}

.sliderName {
	font: bold 22px MuseoMed;
	color: black;
	line-height: 1.5;
	display: inline-block;
	padding-top: 15px;
	padding-left: 15px;
	width: 55%;
}

.sliderDate {
	font: 14px Museo;
	color: #5a5a5a;
	line-height: 1;
	display: inline-block;
	padding-top: 0px;
	padding-left: 15px;
}

.sliderOtzyv {
	font: 16px Museo;
	line-height: 1.625;
	color: black;
	box-sizing: content-box;
}

.costyl {
	height: 0px;
}

.navWrap {
	position: relative;
	user-select: none;
	margin-top: 20px;
}

.sliderNav {
	text-align: center;
}

.navPages {
	display: inline-block;
}

.navPage {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #606060;
	margin: 0 5px;
	cursor: pointer;
}

.navButtons {
	position: relative;
}

.prevSvg {
	fill: #d37436;
	height: 35px;
	cursor: pointer;
	position: absolute;
	margin-left: 35px;
}

.nextSvg {
	fill: #d37436;
	height: 35px;
	cursor: pointer;
	transform: rotate(180deg);
	position: absolute;
	margin-left: calc(100% - 70px);
}

.curPage {
	background-color: #ee823c;
}










.sec9 {
	padding-bottom: 100px;
}

.etapyWrap {
	text-align: center;
	padding-top: 70px;
	padding-bottom: 50px;
}

.etap {
	width: 265px;
	height: 140px;
	background-color: white;
	box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.08);
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

.etapIconWrap {
	width: 85px;
	height: 85px;
	background-color: #fff;
	border-radius: 50%;
	display: inline-block;
	margin-top: -45px;
	box-shadow: 0px -10px 5px 0px inset rgba(0, 0, 0, 0.02);
	text-align: center;
}

.etapIconWrap svg {
	fill: #ee3a43;
	vertical-align: middle;
}

.shopCart {
	width: 36px;
}

.headphones {
	width: 41px;
}

.deliveryCar {
	width: 50px;
}

.arrowEtap {
	display: inline-block;
	width: 75px;
	text-align: center;
	vertical-align: middle;
}

.etapImg {
	transform: rotate(180deg);
	fill: #ee3c44;
	width: 20px;
}

.etapOpisanie {
	font: 16px Museo;
	line-height: 1.625;
	color: black;
	padding-top: 20px;
}

.button2Wrap {
	text-align: center;
}

.button2 {
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	width: 280px;
	height: 75px;
	border-radius: 3px;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	border-bottom: 2px solid #ff4e00;
	cursor: pointer;
	user-select: none;
	text-align: center;
	box-sizing: border-box;
}

.button2 h4 {
	font: 18px MuseoMed;
	color: white;
	vertical-align: middle;
	display: inline-block;
}

.button2:hover {
	background-image: linear-gradient( 270deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
}

.button2:active {
	border-bottom: 0;
	transform: translateY(2px);
}

.circlesWrap {
	position: relative;
}

.circle3 {
	background: url(../images/circle3.png) no-repeat;
	width: 79px;
	height: 79px;
	margin-top: -50px;
	margin-left: calc(100% - 190px);
	position: absolute;
	
	animation-name: verhniz;
	animation-duration: 8s;
	/*animation-timing-function: cubic-bezier(0, 1, 0);*/
	animation-iteration-count: infinite;
}

.circle4 {
	background: url(../images/circle4.png) no-repeat;
	width: 120px;
	height: 120px;
	margin-top: 35px;
	margin-left: 50px;
	position: absolute;
	
	animation-name: verhniz;
	animation-duration: 6s;
	/*animation-timing-function: cubic-bezier(0, 1, 0);*/
	animation-iteration-count: infinite;
}

.sec10 {
	background: url(../images/sec10bg.png) no-repeat;
	background-position: center top;
	background-size: cover;
	padding-bottom: 90px;
}

.voprosyWrap {
	position: relative;
	margin-top: 40px;
	margin-bottom: 20px;
}

.vopros {
	background-color: white;
	background-image: url(../images/arrowDown.png);
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) 16px;
	height: 60px;
	box-shadow: 0px 10px 18px 0px rgba(232, 232, 232, 1);
	margin-top: 20px;
	overflow-y: hidden;
	padding: 0 35px 0 20px;
	cursor: pointer;
	display: inline-block;
}

.upArrow {
	background-image: url(../images/arrowUp.png);
}

.vopros h6 {
	font: bold 18px MuseoMed;
	line-height: 60px;
	color: black;
}

.vopros p {
	padding-bottom: 25px;
	font: 16px Museo;
	line-height: 1.625;
	color: black;
}
.sec11 {
	padding-top: 95px;
	padding-bottom: 95px;
}

.contactsWrap {
	text-align: center;
}

.contact {
	display: inline-block;
}

.contactIcon {
	border-radius: 50%;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	width: 98px;
	height: 98px;
	text-align: center;
	display: inline-block;
}

.contactIcon img {
	width: 45px;
	vertical-align: middle;
}

.contactInfo {
	display: inline-block;
	padding-left: 15px;
	color: black;
	font: 16px Museo;
	line-height: 2;
	vertical-align: middle;
	text-align: left;
}

.contactInfo span {
	color: black;
	font: bold 20px MuseoMed;
}

.emailContact {
	float: left;
}

.timeContact {
	float: right;
}

.footer {
	border-top: 4px solid #efefef;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-bottom: 30px;
}

.footer .logo {
	vertical-align: middle;
	padding-right: 70px;
}

.footer .button {
	width: 170px;
	vertical-align: middle;
	float: right;
	margin-top: 15px;
}

.footerInfo {
	display: inline-block;
	vertical-align: middle;
	font: 14px Museo;
	line-height: 1.429;
	color: black;
	max-width: calc(100% - 390px);
}

.footerInfo a {
	color: #2256db;
	text-decoration: underline;
}

.footerInfo a:hover {
	text-decoration: none;
}






.padd0 {
	padding: 0 !important;
}

.sliderxsWrap {
	position: relative;
	text-align: center;
	padding: 0 !important;
	margin: 20px 0 0 0 !important;
	box-sizing: content-box;
}

.sliderxsNavPrev {
	width: 22px;
	height: 22px;
	display: inline-block;
	margin: 0;
	padding: 0;
	user-select: none;
	vertical-align: middle;
}

.sliderxsNavPrev svg {
	fill: #ff8600;
	user-select: none;
}

.sliderxsNavNext {
	width: 22px;
	height: 22px;
	display: inline-block;
	margin: 0px;
	padding: 0;
	user-select: none;
	vertical-align: middle;
}

.sliderxsNavNext svg {
	fill: #ff8600;
	transform: rotate(180deg);
	user-select: none;
}

.sliderxsUlWrap {
	display: inline-block;
	width: calc(100vw - 60px);
	max-width: 400px;
	overflow-x: hidden;
	vertical-align: middle;
}

.sliderxs {
	width: 10000px;
	text-align: left;
	padding: 0 !important;
}

.sliderxsLi {
	display: inline-block;
	width: calc(100vw - 60px);
	max-width: 400px;
	text-align: center;
	padding: 20px 15px !important;
	vertical-align: top;
	position: relative;
	height: 100%;
	float: left;
}

.sliderxsLiInside {
	box-shadow: 0px 5px 18px 0px rgba(239, 239, 239, 1);
	background-color: white;
	height: 100%;
}

.xspage {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #cbcbcb;
	display: inline-block;
	margin: 5px;
}

.curXsPage {
	background-color: #ee823c;
}

/*individual*/
.sliderxsA1 {
	height: 340px;
}

.sliderxsA1 .sliderxsLi .sliderxsLiInside {
	padding-top: 20px;
	padding-bottom: 20px;
}

.sliderxsA1 .pp1 {
	font: bold 16px MuseoMed;
	color: black;
	line-height: 3;
}

.sliderxsA1 .pp2 {
	font: 14px Museo;
	color: #353535;
	line-height: 1.571;
	padding: 0 15px;
}




.sliderxsA2 {
	height: auto;
}

.sliderxsA2 img {
	width: 100%;
}

.sliderxsA2 .sliderxsLi .sliderxsLiInside {
	padding: 0 !important;
}

.sliderxsA3 {
	height: 350px;
}

.sliderxsA3 .nambyr {
	width: 50px;
	height: 50px;
	background-image: linear-gradient( 90deg, rgb(238,58,67) 0%, rgb(238,147,58) 100%);
	box-shadow: 0px 10px 18px 0px rgba(255, 151, 129, 1);
	border-radius: 50%;
	color: white;
	display: inline-block;
	margin-top: 15px;
	font: bold 25px MuseoMed;
	line-height: 50px;
}

.sliderxsA3 .pp1 {
	font: bold 16px MuseoMed;
	color: black;
	line-height: 3;
}

.sliderxsA3 .pp2 {
	font: 14px Museo;
	color: #353535;
	line-height: 1.571;
	padding: 0 15px;
}


.sliderxsA4 {
	height: auto;
}

.sliderxsA4 .monohrom {
	width: 100%;
	height: 0;
	padding-bottom: 72%;
	display: inline-block;
	filter: grayscale(100%) brightness(70%);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.sliderxsA4 .apesanee {
	color: white;
	font: bold 24px MuseoMed;
	line-height: 1;
	position: absolute;
	z-index: 2;
	text-align: center;
	width: calc(100% - 30px);
	/*margin-top: 70px;*/
	margin-top: 25%;
	padding: 0 15px;
}

.sliderxsA4 .pp1 {
	font: 14px Museo;
	color: #353535;
	line-height: 1.571;
	padding: 0 15px;
	padding-top: 15px;
}

.sliderxsA5Wrap {
	margin-bottom: 30px;
}

.sliderxsA5 {
	height: 160px;
}

.sliderxsA5 .pp1 {
	font: 14px Museo;
	color: #353535;
	line-height: 1.571;
	padding: 0 5px;
	padding-top: 15px;
}


.sliderxsA2 .sliderxsLi .sliderxsLiInside {
	padding-top: 20px;
	padding-bottom: 20px;
}


/************/

.sec3 h3 {
	padding-top: 0px;
}


/* WINDOW PRICES */
.block-window-prices {
  padding-top: 80px;
  padding-bottom: 30px;
}

.block-window-prices h3 {
	padding-top: 40px;
}

.block-window-prices h2 {
  font-size: 32px;
  position: relative;
  z-index: 10;
  text-shadow: 0 0 10px #FFF;
}

.block-window-prices .nav-tabs {
  margin-top: 30px;
  border: none;
}

.block-window-prices .nav-tabs:before, .block-window-prices .nav-tabs:after {
  content: " ";
  display: table;
}

.block-window-prices .nav-tabs:after {
  clear: both;
}

.block-window-prices .nav-tabs > li {
  float: left;
  padding: 0 15px;
  width: 100%;
}

.block-window-prices .nav-tabs > li > a {
  border: 1px solid #6B6B6B !important;
  background: #FFF;
  text-align: center;
  color: #6B6B6B;
  border-radius: 0;
}

.block-window-prices .nav-tabs > li > a span {
  display: block;
}

.block-window-prices .nav-tabs > li > a .h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.block-window-prices .nav-tabs > li > a .h4 {
  font-size: 13px;
  margin: 5px 0 0;
}

.block-window-prices .nav-tabs > li > a:hover {
  background-color: rgba(255, 133, 0, 0.8);
  border-color: #FF8500 !important;
  color: #FFF;
}

.block-window-prices .nav-tabs > li.active > a {
  border: 1px solid #FF8500 !important;
  background-color: #FF8500 !important;
  color: #FFF;
  border-radius: 0;
}

.block-window-prices .tab-content {
  border: none;
  margin-top: 20px;
}

.block-window-prices .tab-content .tab-pane {
  padding: 15px 0;
}

.block-window-prices .tab-content .col-corner .table {
  margin-top: 20px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .block-window-prices .tab-content .col-corner .table {
    margin-top: 60px;
  }
}

.block-window-prices .tab-content .table > tbody > tr > td {
  font-size: 12px;
  vertical-align: middle;
  line-height: 1;
}

.block-window-prices .tab-content .table > tbody > tr > td + td {
  font-weight: bold;
}

.block-window-prices .tab-content .table > tbody > tr > td.font-size-14 {
  font-size: 14px;
}

.block-window-prices .tab-content .col-window {
  text-align: center;
  margin-bottom: 20px;
}

.block-window-prices .tab-content .col-window .img {
  text-align: center;
  min-height: 290px;
  position: relative;
}

.block-window-prices .tab-content .col-window .img .economy {
  font-size: 12px;
  position: absolute;
  top: -15px;
  left: -15px;
  padding: 5px 10px;
  color: #FFF;
  background: #F15A24;
  border-radius: 25px;
  line-height: 18px;
  text-align: center;
  height: 50px;
}

.block-window-prices .tab-content .col-window .img .economy .num {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.block-window-prices .tab-content .col-window .title {
  text-align: center;
  min-height: 40px;
}

.block-window-prices .tab-content .col-window .price-old {
  margin-top: 10px;
  color: #999999;
}

.block-window-prices .tab-content .col-window .price-old .num {
  color: #7F7F7F;
}

.block-window-prices .tab-content .col-window .price {
  position: relative;
  margin-top: 5px;
  font-size: 16px;
}

.block-window-prices .tab-content .col-window .price .num {
  font-weight: bold;
  font-size: 30px;
}

.block-window-prices .tab-content .col-window .price .discount {
  font-size: 17px;
  position: absolute;
  top: 50%;
  left: -15px;
  margin-top: -25px;
  padding: 5px 0;
  color: #FFF;
  background: #29ABE2;
  border-radius: 25px;
  line-height: 40px;
  text-align: center;
  width: 50px;
  height: 50px;
}

.block-window-prices .tab-content .col-window .button-compensation {
  text-align: center;
}

.block-window-prices .tab-content .col-window .button-compensation a {
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px dashed #337ab7;
}

.block-window-prices .tab-content .col-window .button-compensation a:hover {
  border-bottom-color: rgba(51, 122, 183, 0.2);
}
.img-responsive-inline {
display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
.margin-top-15 {
	margin-top: 15px;
}
.description {
	padding: 0 0 25px 0;
}
.description p {
	margin-bottom: 15px;
	font: 16px Museo;
    line-height: 1.625;
    color: black;
}
.description h1 {
	text-align: left;
    margin:25px 0;
    padding: 0;
    font: bold 36px MuseoMed;
    color: black;
}
.description h2 {
	text-align: left;
    margin:20px 0;
    padding: 0;
    font: bold 28px MuseoMed;
    color: black;
}
.description ul {
	padding: 0 0px 30px 40px;
	list-style: disc;
	font: 16px Museo;
}
.description-container__text {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
}
.description-container__short {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.description-container__short.active {
	    height: auto;
}
.description-container__text:after {
	-webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline-style: none;
    margin: 0;
    padding: 0;
content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(66%,rgba(255,255,255,0.67)),color-stop(98%,#fff),to(#fff));
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.67) 66%,#fff 98%,#fff 100%);
}
.description-container.active .description-container__text:after {
	display: none;
}
.description-container__button {
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}
.description-container__button.active .description-container__button_hide, .description-container__button_show {
	display: block;
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}

.description-container__button_hide, .description-container__button.active .description-container__button_show {
	display: none;
}
@media (max-width: 767px) {
  .block-window-prices h2 {
    font-size: 26px;
  }
  .block-window-prices .nav-tabs > li {
    margin: 0;
  }
  .block-window-prices .nav-tabs > li > a {
    border-width: 2px !important;
  }
  .block-window-prices .nav-tabs > li.active > a {
    border-width: 2px !important;
  }
}

@media (min-width: 768px) {
  .block-window-prices .nav-tabs > li {
    width: 33.3333333333%;
  }
}