@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&subset=cyrillic-ext');

html {
	scrollbar-gutter: stable;
}

body
{
	
	font-family: 'Roboto', sans-serif;
	font-display: swap;
}

h1, h2 {
/*  font-family: "Lobster", cursive;*/
  font-size: 1.5em;
  margin-bottom: 10px;
}

h3 {
  font-size: 1em;
  margin:auto;
}

h4, h5, h6	{
	color: black;
	margin: auto;
	font-size: 1.2em;
	}
b, strong { font-weight: bold; }



@media screen and (max-width: 1020px) 
	{
		.aside 
		{
			display: none;
		}
	}

	
/*phone friendly*/
@media screen and (min-width:720px) {.need-show{display:none;}}

@media (min-width:920px){.need2hide{display:none;}} /* прячем таблицу на мобилках*/
@media (max-width:920px){.need2show{display:none;}}

@media screen and (max-width:720px){.my_div{max-width:100%;overflow-x:scroll;-webkit-overflow-scrolling:touch;}}


@media screen and (max-width: 720px) 
	{
		.phone-hide
		{
			display: none;
		}
	}
	
@media screen and (min-width: 720px) 
	{
		.phone-show
		{
			display: none;
		}
	}	

/*таблица прайса не влазит в 775*/
@media screen and (min-width: 775px) 
	{
		.phone-show-p
		{
			display: none;
		}
	}

@media screen and (max-width: 774px) 
	{
		.phone-hide-p
		{
			display: none;
		}
	}	
	
@media only screen and (min-width: 1020px){/*Тут размер в пикселах*/
    .hide-big {display: none;}
   }	



.day {
  font-size: 20px;
  /*max-width: 320px;*/
  width: 100%;
  position: relative;
  display: inline-block;
  color: #465457;
  display: table;
  width: auto;
  margin: 15px 25px;
  color: crimson;
  z-index: 100;
  
}

.day:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -15px;
  z-index: -1;
  background: #fed57b;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}


.info {
	background-color:Crimson;
	border-radius:2px;
	color:white;
	padding:0.2em 0.5em;
	text-decoration:none;
	
}

.btn2 {
  background: LightGray;
  color:black;	
  display: inline-block;
  padding: 4px 10px 5px 10px;
  font-size: 0.8em;
  margin: 2px 2px 2px 2px;
  border:  1px;
  border-style: solid;
  border-color:SteelBlue;
  text-decoration: none;
  vertical-align: bottom;
  border-radius: 2px;
}

.btn2:hover {
  Background:SteelBlue;
  color: #ffffff;
  text-decoration: none;
}

.btn_podcat {
  background: LightGray;
  color:black;	
  display: inline-block;
  padding: 4px 10px 5px 10px;
  font-size: 0.8em;
  margin: 2px 2px 2px 2px;
  border:  1px;
  border-style: solid;
  border-color:SteelBlue;
  text-decoration: none;
  vertical-align: bottom;
  border-radius: 2px;
}

.btn_podcat:hover {
  Background:SteelBlue;
  color: #ffffff;
  text-decoration: none;
}

.btn_red {
  background: LightGray;
  color:black;	
	
  display: inline-block;
  padding: 4px 10px 5px 10px;
  font-size: 1em;
  margin: 2px 2px 2px 2px;
  border:  1px;
  border-style: solid;
  border-color:Crimson;
  text-decoration: none;
  vertical-align: bottom;
  border-radius: 2px;
}

.btn_red:hover {
  Background:Crimson;
  color: white;
  text-decoration: none;
}

.btn_blue {
  background: LightGray;
  color:black;	
	
  display: inline-block;
  padding: 4px 10px 5px 10px;
  font-size: 1em;
  margin: 2px 2px 2px 2px;
  border:  1px;
  border-style: solid;
  border-color:DodgerBlue;
  text-decoration: none;
  vertical-align: bottom;
  border-radius: 2px;
}

.btn_blue:hover {
  Background:DodgerBlue;
  color: #ffffff;
  text-decoration: none;
}


.podbutton {
  margin: 5px;
  padding: 5px;
}

.btn_podcat_all {
  display: inline-block;
  background: Crimson;
  font-family: 'Roboto Condensed', sans-serif;
  margin: 2px 2px 2px 2px;
  padding: 5px 10px 5px 10px;
  font-size: 12pt;
  color: #ffffff;
  border:  0px;
  text-decoration: none;
 border-radius: 5px;
}

.btn_podcat_all:hover {
  background: SteelBlue;
  text-decoration: none;
}









a.buttonbook {
	-webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	display: block;
	margin: 20px auto;
	width: 80%;
	text-decoration: none;
	 font-size: 1.2em;
	border-radius: 4px;
	padding: 20px 30px;
	color: black;
	box-shadow: crimson 0 0px 0px 2px inset;
	text-align:center;
}

a.buttonbook:hover {
	color: white;
	box-shadow: SteelBlue 0 160px 0px 2px inset;
	text-decoration: none;
}







/*кнопка баннера*/
.btn_banner {
  

  margin: 2px 2px 2px 2px;
  padding: 5px 0px 5px 6px;
  -webkit-border-radius:50px 0px 0px 50px; 	 				 
  border-radius: 50px 0px 0px 50px; 					
  -moz-border-radius-topleft:50px; 					
  -moz-border-radius-topright:0px; 					
  -moz-border-radius-bottomleft:50px; 					
  -moz-border-radius-bottomright:0px;  
  float: left; 
  font-size: 0.8em;
  //background: LightGray;
  background:WhiteSmoke;
  color:black;	
  border:  1px;
  border-style: solid;
  border-color:SteelBlue;
  text-decoration: none;
  vertical-align: center;
  width:150px;
}

.btn_banner:hover {
  Background:SteelBlue;
  color: #ffffff;
  text-decoration: none;
}

/*кнопка баннера cлева*/
.btn_banner_left {
  

  margin: 2px 2px 2px 2px;
  padding: 5px 0px 5px 6px;
  -webkit-border-radius:50px 0px 0px 50px; 	 				 
  border-radius: 0px 50px 50px 0px; 					
  -moz-border-radius-topleft:0px; 					
  -moz-border-radius-topright:50px; 					
  -moz-border-radius-bottomleft:0px; 					
  -moz-border-radius-bottomright:50px;  
  float: left; 
  font-size: 0.8em;
  //background: LightGray;
  background:WhiteSmoke;
  color:black;	
  border:  1px;
  border-style: solid;
  border-color:SteelBlue;
  text-decoration: none;
  vertical-align: center;
  width:150px;
}

.btn_banner_left:hover {
  Background:SteelBlue;
  color: #ffffff;
  text-decoration: none;
}


/**/
a {
  color: #000;
  text-decoration: none;
}
a:hover { text-decoration: underline;}
/**/


	
	
/*phone friendly*/
a 	{
border:none;
outline: none;
	}
	
.fantik 
	{
	  position: center;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: stretch;
	  max-width: 1020px;//960px
	  //border: 2px solid gray;
	  margin: 0 auto;
	}
	
/* верхний фантик */	
.fantikm 
	{
	  position: center;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: stretch;
	  max-width: 1020px;//960px
	  //border: 2px solid gray;
	  margin: 0 auto;
	}	

.fixedm 
	{
	  border: 0px; 
	  //flex: 0 0 480px;
	  background: url(../images/ton1.jpg) no-repeat;
	  height: 350px;
	  width: 450px;
	  //background-color: #FF9999;
	}

.rezinkam 
	{
		border: 0px;
	//flex: 0 0 570px;
    background: url(../images/ton2.jpg) no-repeat;
	width: 570px;
	height: 350px;
	//background-size: 100%;
	}

/* верхний фантик */

.fantikmenu 
	{
	  position: center;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: stretch;
	  max-width: 1020px;
	  //border: 2px solid gray;
	  margin: 0 auto;
	  text-align:center;
	}


.fixed 
	{
	  flex: 0 0 240px;
	  padding: 10px;
	  //background-color: #FF9999;
		background-color: WhiteSmoke;
	}

.rezinka 
	{
	//flex: 1 1 25%;
    background: url(..//images/flash.jpg) no-repeat;
	width:100%;
	height: 400px;
	 //background-size: 100%;
	}

.fantikbig 
	{
	  position: center;
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  justify-content: space-between;
	  align-items: stretch;
	  //height: 100%;
	  max-width: 1020px;
	  //border: 2px solid gray;
	  margin: 0 auto;	
	}
img {max-width: 100% !important; }

.rezinkabig 
	{
	  flex: 1 1 25%;
	  //background-color: #9999FF;
	  background-color: WhiteSmoke;
	  padding: 10px 10px 10px 10px;
	  max-width:1000px;
	  overflow-x:none;
		  
	}


.header
	{
	  position: center;
	 // display: flex;
//	  flex-direction: row;
	
	  margin:0;
	  padding:0;
      width:100%;
	  height:55px;
      background-color:white;
	  text-align: center;
	}
	 
.menuer
	{
      width:100%;
      background-color:#ededed;
	  text-align: center;
	}
	 
.footer
	{
      width:100%;
	  //height:100px;
      //background-color:#ddd;
	  background:Lavender;
	  padding:0px;
	  margin:0px;
	}



/*старые стили*/

.round_div_grey1 
	{ 
	
	float: left; 
	margin-right: 0px; 
	margin-top: 10px;
	width: 100%; 

	background-color: #EDEDED;
	border-top: 5px solid SteelBlue;
	color: #000;    
	padding: 0px; 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; 
	}

.center_div {text-align:center;}

.round_m 
	{
	float: left; 
	padding: 0px;
	margin-right: 1%; 
	margin-left: 1%;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 31.33%;
	height: auto;
	min-width:100px;
	background-color:SteelBlue;
	color: #fff;    
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; 
	}

.round_red
	{
	float: left; 
	padding: 0px;
	margin-right: 1%; 
	margin-left: 1%;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 31.33%;
	height: auto;
	min-width:100px;
	background-color:Crimson;
	color: #fff;    
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; 
	}

.pc__clear {clear:both;}
.phone__clear {clear: both;}

@media screen and (min-width: 721px) 
	{	.phone__clear {
		display: none;
		}
	}

@media screen and (max-width: 720px) 
	{	.pc__clear {
		display: none;
		}
		
		.round_red
		{
			width: 48%;
		}
		
		.round_m
		{
			width: 48%;
		}
	}
	

.div_center
{text-align:center;}
.div_left
{text-align:left;}
.div_right
{text-align:right;}
.div_10
{padding:10px;}
.div_5
{padding:5px;}
.div_m10
{margin:10px;}
.div_m5
{margin:5px;}
	

.round_div
	{ 
//float: left; 
margin: 20px 10px 0px 0px;
//width:100%; 
background-color: #EDEDED;
border-top: 5px solid SteelBlue;
color: #000;    
padding: 0 10px 10px 10px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; 
	}	


.round_div_grey 
	{ 
width:100%;
float: left; 
margin: 10px 10px 10px 0px;
background-color: #EDEDED;
border-top: 5px solid SteelBlue;
color: #000;    
padding: 0 2px 2px 2px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; 
	}	

.round_div_red
	{ 
width:100%;
float: left; 
margin: 10px 10px 10px 0px;
background-color: #EDEDED;
border-top: 5px solid Crimson;
color: #000;    
padding: 0 2px 2px 2px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; 
	}		

.pic 
	{
	  border: 0px solid #fff;  
	  width: 100%;
	  height: auto;	
	  overflow: hidden;
	}




.sepia img 
	{
	width: 100%;
	  -webkit-transition: all 1s ease;
		 -moz-transition: all 1s ease;
		   -o-transition: all 1s ease;
		  -ms-transition: all 1s ease;
			  transition: all 1s ease;
	}

.sepia img:hover 
	{
	-webkit-filter: sepia(100%);
	}



/*меню*/

.ad-menu *:focus,.ad-menu *::before,.ad-menu *::after 
	{
	  margin: 0;
	  outline: 0;
	  box-sizing: content-box; /*это свойство обязательно*/
	  //text-align: center;
	}

.ad-menu li 
	{
	  display: inline-block;
	  background: #ededed;
	  font-size: 1.2em;
	  text-align: center;
	  //width: 24%;
	  padding: 0 10px;
	}
.ad-menu li:hover 
	{
	//background:#ddd;
	text-decoration: none;
	background:SteelBlue; 
	color:white !important;
	padding: 0 10px;
	}

.ad-menu li a 
	{
	display: block;
	text-decoration: none;
	//color: black;
	padding: 10px 0px;
	width: 100%;
	}




/*поведения и структура при экране менее 680 пикселей*/
@media screen and (max-width: 720px) 
	{		
			.ad-menu li 
				{
				text-align:left;
				width: 100%;
				}

			.ad-menu ul 
				{
				display: none;
			  	}
			
			.ad-menu nav::before,
			.ad-menu::after 
				{
				box-sizing: content-box;
				  content: '';
				  position: absolute;
				  top: 0;
				  right: 0;
				  display: block;
				  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAE5JREFUeAFjwAkYcQC6SFAKBt4fo/6AaMMUQTUQIYJpFaqrMIICzkATR2Hi5uDUjmkh7tDAHUq4Qw8ujl+CsFEEHDVowg1n1OJKDLiTDwBLrgJ9vkuXOwAAAABJRU5ErkJggg==);
				  cursor: pointer;
				  height: 24px;
				  width: 24px;
				  
				}
			
			.ad-menu nav::before,
			.ad-menu::after 
				{
				background-color: #fc0;
				border: 9px solid #fc0;
				}
			.ad-menu::after 
				{
				background-position: -24px -24px;
				z-index: 1;
				}
			.ad-menu nav::before 
				{
				z-index: 2;
				}
			.ad-menu nav:focus::before 
				{
				z-index: 0;
				}
			.ad-menu nav:focus ul,
			.ad-menu ul:hover 
				{ /*решаем проблему со скликиванием*/
				display: block;
				//text-align: left;
				overflow: hidden;
				}
				
				.dropdown-content
					{
					margin: 0 0 0 50px; /*отступ для мобилок на раскрытом меню*/
					}
				
	

				
	}



/*выпадающее меню*/
.dropbtn 
	{
	background-color: #4CAF50;
	color: white;
	//padding: 20px;
	border: none;

	}

.dropdown 
	{
	display: inline-block;
	
	}

.dropdown-content 
	{
	display: none;
	position: absolute;
	//margin: 0 0 0 20px;
	background-color: #f1f1f1;
	min-width: 200px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 21;
	}

.dropdown-content a 
	{
	
	color: black;
	margin: auto;
	font-size: 1em;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	}

.dropdown-content a:hover 
	{
	background-color: #ddd;
	text-decoration: none;
	}

.dropdown:hover .dropdown-content 
	{
	display: block;
	}

.dropdown:hover .dropbtn 
	{
	background-color: #3e8e41;
	}


@media screen and (max-width: 720px) 
	{		
			.dropdown
				{
			
				width: 100%;
				text-align:left;
				}
				.dropdown nav
				{
					text-align:left;
				}
				
	}			


/* поиск */

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
font-family: 'Roboto', sans-serif;
  width: 70%;
  border: 1px solid SteelBlue;
  margin:0;
  padding: 5px 5px ;
  //height: 20px;
  
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: Black;
  padding: 5px 5px ;
}

.searchButton {
font-family: 'Roboto', sans-serif;
  width: 30%;
  //height: 1.5em;
  border: 1px solid SteelBlue;
	background: SteelBlue;
  text-align: center;
  color: white;
 
  cursor: pointer;
  font-size: 1em;
}


/*grid--------------------------------------------------------------*/
/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
	content: "";
  display: table;
  clear: both;
}


.wrapper {
  margin: 0 auto;
  padding: 20px;
  max-width: 95%;
  background-color: #fff;
}



/* grid */
.row {
  margin: 0 -10px;
  margin-bottom: 20px;
}

.row0 {
  margin: 0 -10px;
  margin-bottom: 0;
}

.row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  padding: 10px;
}

@media all and ( min-width: 600px ) {
  
  .col-2-3 {
    float: left;
    width: 66.66%;
  }
  .col-1-2 {
    float: left;
    width: 50%;
  }
  .col-1-3 {
	  inline: block;
    float: left;
    width: 33.33%;
  }
  .col-1-4 {
    float: left;
    width: 25%;
  }
  
    .col-2-4 {
    float: left;
    width: 50%;
  }
  
  .col-3-4 {
    float: left;
    width: 75%;
  }
  .col-1-8 {
    float: left;
    width: 12.5%;
  }
  
}


/*     TABS ----------------------*/

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


/*TABS2*/
/* Style the tab */
.tab1 {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab1 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab1 button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab1 button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent1 {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/*TABS2*/



/*Боковое меню*/
.menu {list-style:none; width:100%;}
.menu li {border-top:solid 0px black; border-bottom:solid 1px SteelBlue; transition: 0.4s;}
.menu li a {text-decoration:none;padding:8px 2px;display:block; color:black;}
.menu li a:hover {background:SteelBlue; color:white;}





table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 90%;
    border: 0px solid #ddd;
}







/*стили для баннеров*/
 #module_right { 
 position:fixed; /* свойство позиционирования, которое делает блок плавающим */
 top:2%; /* расстояние блока от верхнего края экрана */ 
 right:2%; /* расстояние блока от левого края экрана */ 
 
 }
 
 
 #module_left { 
 position:fixed; /* свойство позиционирования, которое делает блок плавающим */
 top:2%; /* расстояние блока от верхнего края экрана */ 
 left:2%; /* расстояние блока от левого края экрана */ 
 }
 
 #pop_hide, #pop_hide2, #pop_hide3
	{
	 display: none;	
	}

 #pop_left { 
 position:fixed; /* свойство позиционирования, которое делает блок плавающим */
 top:25%; /* расстояние блока от верхнего края экрана */ 
 left:0%; /* расстояние блока от левого края экрана */ 
 margin: auto;
 width: 150px;
 }
 

 #pop_right { 
 position:fixed; /* свойство позиционирования, которое делает блок плавающим */
 top:25%; /* расстояние блока от верхнего края экрана */ 
 right:0%; /* расстояние блока от левого края экрана */ 
 margin: auto;
 //background: white;
 width: 150px;
 }
 
 @media screen and (max-width:1280px) {
    #pop_right {
	display: none;}
	#pop_left {
	display: none;}
	
 }
 
  
@media screen and (max-width:1200px) {
    #module_right {
        display: none;
    }
    #module_left {
        display: none;
    }
}


   ol.hr {
   text-align: left;
    margin: 0; /* Обнуляем значение отступов */
    padding: 4px; /* Значение полей */
   }
   ol.hr li {
    display: inline; /* Отображать как строчный элемент */
   }
/*конец стили для баннеров*/


/* Wobble Vertical - прыгающий баннер */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


/*Дивы для включено и не включено*/
.div_green
{width:100%;
background:PaleGreen;
padding:10px;
}
.div_red
{width:100%;
background:LightPink;
padding:10px;
}
/*Дивы для включено и не включено*/



/*растягиваем видео по ширине*/
.video {position:relative;padding-bottom:56.25%;/*пропорции видео 16:9 */padding-top:; height:0;}
.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
/*растягиваем видео по ширине*/