#sect1{display:}  /* Amfibia Family */
#sect2{display:}  /* DRYBOX + AQUABOX */
#sect3{display:}  /* WET-JET */
#sect4{display:}  /* РЕЖИМЫ УБОРКИ */
#sect5{display:}  /* ЧИСТЫЙ ДОМ - БЕЗ ХЛОПОТ */
#sect6{display:}  /* КОМПЛЕКТАЦИЯ */
#sect7{display:}  /* ТЕХ.ХАРАКТЕРИСТИКИ */


/* -------------Прелоадер----------------- */
#preload{padding-top:10%}

.spinner, .spinner1, .spinner2, .spinner3
 {
  opacity: 0;
  display: box;
  width: 40px;
  height: 40px;
  margin: 10px auto;
  background-color: #333;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.5s infinite ease;
/*
sk-scaleout - имя анимации
1.5s		- длительность анимации
infinite    - Анимация проигрывается бесконечно
ease-in-out - Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1)
*/
}

.spinner1 {animation-delay: 0.2s;}
.spinner2 {animation-delay: 0.4s;}
.spinner3 {animation-delay: 0.6s;}

@keyframes sk-scaleout {
  0% { 
   -webkit-transform: scale(0);
   transform: scale(0);
	opacity: 0.9;
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
/* --------------end--------------- */





/* -------------Корзина----------------- */


.basket1, .basket2, .basket3
 {
  position: absolute;
  opacity: 0;
  display: box;
  width: 130px;
  height: 130px;
/*  margin: 10px auto; */
  border: 4px solid #B9B9B9;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 3.0s infinite ease;
/*
sk-scaleout - имя анимации
1.5s		- длительность анимации
infinite    - Анимация проигрывается бесконечно
ease-in-out - Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1)
*/
}

.basket1 {animation-delay: 0.20s;}
.basket2 {animation-delay: 0.60s;}
.basket3 {animation-delay: 0.80s;}

@keyframes sk-scaleout {
  0% { 
   -webkit-transform: scale(0);
   transform: scale(0);
	opacity: 0.9;
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
/* --------------end--------------- */





/* --------------стили--------------- */
div, section{box-sizing: border-box; 
	-webkit-box-sizing: border-box;         /* бордюры и отступы не влияют на размер блока */
	font-family: Verdana, Arial, Helvetica;
	font-size:18px;
}

.my-flex-container {
	border: 0px solid #ff0000;
	max-width: 1920px;
	min-width: 320px;
	display: flex;
	flex-direction: column;                 /* дочерние блоки будут выстраиваться в верикальную колонну */
	margin-bottom: 0px;
}

.my-flex-block, .block_body {
	border: 0px solid #aaaaaa;
	width: 100%;
	min-width: 320px;
	position:relative;
	margin: 0px;
}



.ldr{
display:flex;
width:200px;
border: 0px solid #888888;
}


.ldr1{
display:flex;
width:200px;
}

.hor{
	display: flex;
	-ms-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;        
	margin-bottom: 0%;
	-ms-flex-pack: distribute;
	justify-content: space-around; /* Flex-элементы отображаются с равным интервалом между границами границы контейнера */
	margin-top: 0%;
	border:0px solid #0000ff;
}


.summary {
	font: Roboto, sans-serif;
   font-size: calc(25px + 5 * ((100vw - 320px) / (1920 - 320)));
   font-weight: 400;
   color: #ffffff;  
   background-color:#1F3742; 
   text-align: center;
   width:100%;
   padding-top: 1%;
   padding-bottom: 1%;
   } 

.summary1 {
	font: Roboto, sans-serif;
   font-size: calc(25px + 5 * ((100vw - 320px) / (1920 - 320)));
   font-weight: 400;
   color: #ffffff;  
   background-color:#264351; 
   text-align: center;
   width:100%;
   padding-top: 1%;
   padding-bottom: 1%;
   }



.summary-text {
   font: Roboto, sans-serif;
   font-size: calc(17px + 5 * ((100vw - 320px) / (1920 - 320)));
   font-weight: 400;
   color: #ffffff; 
   text-align: center;

   text-decoration: none;
	border-bottom: 1px dashed #B9E8FF;
   line-height: 2.0em;}




.menup{
   font-size: calc(16px + 5 * ((100vw - 320px) / (1920 - 320)));	
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: 400;
	color: #515151;
	position:relative;
	padding-left:4%;
	padding-right:7%;
	text-align:justify;  
	width:100%;
	margin-bottom:20px;
	border: 0px solid #999999;
	line-height: 1.6em;
}
.menup-small{
   font-size: calc(14px + 5 * ((100vw - 320px) / (1920 - 320)));	
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: 200;
	color: #515151;
	position:relative;
	padding-left:3%;
	padding-right:5%;
	text-align:justify;  
	width:100%;
	margin-bottom:20px;
	border: 0px solid #999999;
	line-height: 1.8em;
}
.menup1{
   font-size: calc(16px + 5 * ((100vw - 320px) / (1920 - 320)));	
   font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic;
   font-weight: 200;
	color: #A2BFCC;
	position:relative;
	padding-left:4%;
	padding-right:7%;
	text-align:justify;  
	width:100%;
	margin-bottom:10px;
	border: 0px solid #999999;
	line-height: 2.1em;
}


.anchor{
   font-size: calc(18px + 5 * ((100vw - 320px) / (1920 - 320)));	
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: 200;
	color: #A2BFCC;
	text-decoration: none;
	border-bottom: 1px dashed #688B9B;
   line-height: 2.0em;
}




.menup2{
   font-size: calc(16px + 5 * ((100vw - 320px) / (1920 - 320)));	
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: 100;
	color: #A2BFCC;
	position:relative;
	padding-left:4%;
	padding-right:7%;
	text-align:justify;  
	width:100%;
	margin-bottom:20px;
	border: 0px solid #999999;
	line-height: 1.7em;
}

.cell1{
  width:100%;
  max-width:180px;
  position:relative;
  margin: 1%;
  text-align: center;
  border: 0px solid #aaaaaa;
  text-align:center;
  padding-bottom: 1%;
  padding-top: 1%;
}
.nasadki{
  width:100%;
  max-width:180px;
  position:relative;
  text-align: center;
  border: 0px solid #aaaaaa;
  text-align:center;
  padding-bottom: 1%;
  padding-top: 1%;
  margin: 1%;
}

.des {
  text-align:center; 
  font-family: 'Montserrat, Arial, Helvetica,', sans-serif;
  font-size: calc(15px + 5 * ((100vw - 320px) / (1920 - 320)));
  font-weight: 300;
  color: #ffffff;
  padding: 0%;
  padding-top: 1%;
  margin-top:200px;
  line-height: 26px;   
}

.drb1 {
  display:block;
  font-family: 'Montserrat, Arial, Helvetica,', sans-serif;
  font-size: calc(30px + 5 * ((100vw - 320px) / (1920 - 320)));
  font-weight: 500;
  color: #FF0000;
  margin-bottom: 1%;
  margin-top: 1%;
}

.font-orange {
   font: Roboto, sans-serif;
   font-size: calc(23px + 5 * ((100vw - 320px) / (1920 - 320)));
   font-weight: 400;
   color: #ffffff; 
   margin-bottom: 0%;
   margin-top: 0%; padding: 1%; 
   background-color:#FF6C00; 
   line-height: 1.4em;
   text-align: center;
   width:100%;}

.orang {
   font-family: 'Roboto', sans-serif;
   font-size: calc(19px + 5 * ((100vw - 320px) / (1920 - 320)));
   font-weight: 400;
   color: #FF6C00;
   line-height: 30px; 
   margin-bottom: 1%;
   margin-top: 2%;}

.tms-section-7 {
    background-color: #2E4E5D;
    padding: 5%;
    width:100%;}
  
 
.section-video {
    background-color: #132229;
    padding: 5%;
    width:100%;}
    
.section-call {
    background-color: #132229;
    padding: 1%;
    padding-left: 5%;
    padding-right: 5%;
    width:100%;} 
    
.section-call-form {
    background-color: #304752;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px; }
 
.tms-section-7-header {
    text-align: center; }
        
.tms-section-7-item {
    background-color: #405F6E;
    padding: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px; }
    
.tms-section-7-item .tms-p {
    padding-left: 10px;
    min-width: 49%;
    width: calc((485px - 100%) * 1000);
    max-width: 100%;
    text-align: left; }
  
.tms-p {
  font-family: 'Montserrat', sans-serif;
  font-size: calc(14px + 5 * ((100vw - 320px) / (1920 - 320)));
  font-weight: 200;
  color: #D3E5EE;
  line-height: 24px; }
   
  
.tms-wrp {padding: 0 6%; }  
.pict {position:absolute; top:20px; left:54px}  
.lable{max-width:80%;}
     
#shapka{background: url(../img/sec1_1920.jpg) left top no-repeat #FFFFFF;}
#shapka1{background: url(../img/secVLAGA_back3.jpg) left top no-repeat #FFFFFF;}
#shapka2{background: url(../img/secVLAGA_back.jpg) left top no-repeat #FFFFFF;}
#shapka2-1{background-color: #2E4E5D;}
#shapka2_1{background: url(../img/secVLAGA_back2_1.jpg) left top no-repeat #FFFFFF;}
#shapka3{background: url(../img/secVLAGA_back1.jpg) left top no-repeat #FFFFFF;}
#shapka4{background: url(../img/secVLAGA_back2.jpg) left top no-repeat #FFFFFF;}
#shapka5{background-color: #2E4E5D;}
#shapka6{background-color: #2E4E5D;}

/* --------------end--------------- */


/* -------------медиазапросы--------------- */
@media (max-width: 400px){
	#sec3_back{ background: url(../img/sec3_back400.jpg) left top no-repeat #FFFFFF;
	height:70vw;
	}
	#sec2_back{ background: url(../img/question360.jpg) left top no-repeat #FFFFFF;
	height:70vw;
	}
	#sec3_back1{ background: url(../img/sec3_aq_back400.jpg) left top no-repeat #FFFFFF;
	height:70vw;
	}
	#sec4_back{ background: url(../img/sec4_img400.jpg) left top no-repeat #FFFFFF;
	height:70vw;
	}
	#sec6_back{ background: url(../img/sec6_back400.jpg) left top no-repeat #FFFFFF;
	height:70vw;
	}
	#kontk{ background: url(../img/kontakt400.jpg) left top no-repeat #FFFFFF;
	height:55vw;} 	
	#pay{ background: url(../img/pay400.jpg) left top no-repeat #FFFFFF;
	height:73vw;}
}

@media (min-width: 401px) and (max-width: 768px){
	#sec3_back{ background: url(../img/sec3_back768.jpg) left top no-repeat #FFFFFF;
	height:50vw;
	}		
	#sec2_back{ background: url(../img/question768.jpg) left top no-repeat #FFFFFF;
	height:50vw;
	}	
	#sec3_back1{ background: url(../img/sec3_aq_back768.jpg) left top no-repeat #FFFFFF;
	height:50vw;
	}
	#sec4_back{ background: url(../img/sec4_img768.jpg) left top no-repeat #FFFFFF;
	height:50vw;
	}
	#sec6_back{ background: url(../img/sec6_back768.jpg) left top no-repeat #FFFFFF;
	height:50vw;
	}
	#kontk{ background: url(../img/kontakt768.jpg) left top no-repeat #FFFFFF; 
	height:38vw;}
	#pay{ background: url(../img/pay768.jpg) left top no-repeat #FFFFFF;
	height:42vw;}	
}

@media (min-width: 769px) and (max-width: 1920px){
	#sec3_back{ background: url(../img/sec3_back.jpg) left top no-repeat #FFFFFF; 
	height:28vw;
	}	
   #sec2_back{ background: url(../img/question1920.jpg) left top no-repeat #FFFFFF; 
	height:28vw;
	}
	#sec3_back1{ background: url(../img/sec3_aq_back.jpg) left top no-repeat #FFFFFF; 
	height:28vw;
	}
	#sec4_back{ background: url(../img/sec4_img.jpg) left top no-repeat #FFFFFF;
	height:28vw;
	}
	#sec6_back{ background: url(../img/sec6_back.jpg) left top no-repeat #FFFFFF;
	height:31vw;
	}
	#kontk{ background: url(../img/kontakt.jpg) left top no-repeat #FFFFFF; 
	height:18vw;}	
	#pay{ background: url(../img/pay.jpg) left top no-repeat #FFFFFF;
	height:20vw;}
}

@media (min-width: 769px) and (max-width: 1370px) {
   #shapka {background: url(../img/sec1_1366.jpg) left top no-repeat #FFFFFF}
}
@media (min-width: 769px) and (max-width: 1920px) {
  #sky {background-image: url('../img/sec_aqua_back.jpg')}
}

@media (max-width: 768px) {
	#arleft1 {display: none} /* */
	#arleft {display: none}	/* */
	#arright {display: none}
	#arright1 {display: none}
	#sky {background-image: url('../img/sec_aqua_back_sm.jpg')}	
	#komplekt {display: none}	
	#wet_back {display: none} 
   #shapka {background: url(../img/sec1_768.jpg) left top no-repeat #FFFFFF}
   #shapka1 {background: url(../img/secVLAGA_back3_small.jpg) left top no-repeat #FFFFFF}
   #shapka2 {background: url(../img/secVLAGA_back_small.jpg) left top no-repeat #FFFFFF}
   #shapka2_1{background: url(../img/secVLAGA_back2_1_sm.jpg) left top no-repeat #FFFFFF;}
   #shapka3 {background: url(../img/secVLAGA_back1_small.jpg) left top no-repeat #FFFFFF}
   #shapka4 {background: url(../img/secVLAGA_back2_small.jpg) left top no-repeat #FFFFFF}
}

@media (max-width: 711px) {

   #shapka {background: #F1F1F1;}
}

/* --------------end--------------- */  


/* ------СТИЛИ СКРИПТА ДЛЯ ВИДЕО---------- */

.ramka{
position:relative;
border: 0px solid #ffffff; 
background:#132229;
width:80vw; 
height:50vw /* */
}

.ifrm{
width:100%; 
display:none
}

.video {
/*   position:absolute; 
  z-index:100; 
  top:0px; 
  left:0px; */
  border: 1px solid #5C646A;
  cursor:pointer;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  transition: box-shadow 0.5s, transform 0.5s;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
}

.video:hover,
.video:focus,
.video:active {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  box-shadow: 9px 9px 9px rgba(0, 0, 0, .6);
}

.video-container{
position:relative;
padding-bottom:42.25%;
padding-left: 20%;
padding-right: 20%;
height:0;
overflow:hidden;
}

/* ------СТИЛИ СКРИПТА ДЛЯ ВИДЕО---------- */
 /* ------------button------------*/

.border-button {
  text-decoration: none;
  display: inline-block;
  padding: 12px 18px;
  margin: 4px 10px;
  position: relative;
  color: #FFFFFF;
  border: 0px solid rgba(255, 40, 40, .4);
  background: none;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  font-size:  calc(15px + 3 * ((100vw - 320px) / (1500 - 320)));
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color:  #D60000;
  border-radius: 0.35rem;

}
.border-button:before, .border-button:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  box-sizing: border-box;
}

.border-button:hover:before, 
.border-button:hover:after {
  height: 100%;
  width: 100%;
  opacity: 1;
}
.border-button:hover:before {
  transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;
}
.border-button:hover:after {
  transition: 0s ease opacity .4s, .2s ease height .4s, .2s ease width .6s;
}
.border-button:hover {
  background: #FF2121;
}
 /* ------------button------------*/

input[type=text] {
  border-radius: 4px;
  width: 100%;
  height: 40px;
  padding: 1%;
  margin: 1%;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #f8f8f8;
  box-sizing: border-box;
}

label[type=tel] {
  border-radius: 4px;
  width: 100%;
  height: 40px;
  padding: 1%;
  margin: 1%;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #f8f8f8;
  box-sizing: border-box;
}