* {
margin:0;
padding:0;
}
@charset "utf-8";
body{ 
 background: url(../img/22.png); 
 max-width:1300px;
 width: 100%;
 height: 100%;
 font-family: "Helvetica Neue Light", "Times New Roman", Helvetica, Arial, sans-serif;
 text-align: center;
 font-size:0.95em;/* 18px */
}
#wrapper{ 
  background:url(../img/333.png) repeat;
  width:90%;
  overflow:hidden;
  margin:auto; 
  margin-top:0px;  
}
#main_content{ 
  width:100%;
  height: 100%;
  margin: auto;
  padding:0;
}
#top_banner{ 
  width:100%;
  height:200px; 
  background:url(../img/shapca3.jpg) no-repeat;
  margin: auto;
  
}
#top_banner2{
    float:left; 
    margin-left:20px; 
	margin-top:0px; 
	font-size:24px;     
}
.div-cont{
    background:url(../img/333.png);
	width:100%;
    height: 3vh;
}
.bordur{
    max-width: 100px;
    border: 1px solid #333333;
    background: #FFFF99;
	margin: auto;
	padding:4px;
}
/*------top menu---------*/
#top_menu{ 
  width:100%;
  margin: auto; 
  padding-bottom:30px; 
}
/*----page content----*/

#page_content_left{
  background:url(../img/beg_ser.png);
  float: left;
  width:68%; 
  min-height: 100vh;
}
#page_content_right{    
  float: left;   
  width:30%;
  min-height: 100vh;
  margin: 6px;
}
.video-wrapper{
    float:left;
    width: 98%;
	margin: auto; 	
}
.movie {
    width: 98%;
    height: auto;
    margin: 0 auto; // выравнивает по центру по вертикали
    display: block;
    max-width: 350px;
}
.title{
  font-size:22px;
  font-weight: bold;
  color: #006600;
  clear:both;
  padding-left:10px; 
  margin:10px;
}
.content_text{ 
  width:80%;
  height:auto; 
  margin: auto;
  font-size:20px;
  color: #660000;
  text-align: justify;   
}


/* -------------------------------
 Форма
 ----------------------------------*/
.form {
    background-color: #D7F7C4;
	max-width:280px; 
	border: 1px solid #333333;
	border-radius: 7px 7px 7px 7px;
	margin:auto;
	margin-top: 12px;
}
.container{
   clear:both;
   color: #CC6600;
   margin-top: 1px;
   width:250px;   
}
.box{
   float: right;
   font-size: 0.80em;
   width: 150px;
   margin-top: 1px;
   margin-left:4px; 
   color: #333333;
}
.pik{
   font-size: 0.80em;
   float:left;
   margin-left:8px; 
   margin-top:1px; 
}
.input {
    width:60%;
	color:#404040;
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;	
}
#button {
  background: url(../img/button.gif) no-repeat center top;
  border: 0;
  padding: 0;
  margin: 0;
  width: 80%;
  height: 36px;
  cursor: pointer;
  margin-top: 5px;
  margin-bottom:3px; 
  
}
#button2 {
  background: url(../img/button2.jpg) no-repeat center top;
  border: 0;
  padding: 0;
  margin: 0;
  width: 71%;
  height: 30px;
  cursor: pointer;
  margin-top: 3px;
  margin-bottom:3px; 
  
}
.form input[placeholder]{
    font-size:14px;
	color: #080808;
	width: 80%;
	margin-top: 4px;
}

/* -------------------------------
 Timer
 ----------------------------------*/

.timer_tab {
    display:inline-block;   
    position: absolute;
    font-size: 12px; 
    margin-left:300px;    
	margin-top:230px;
    background-color: #FFFF00; 
    width: 320px;
	border: 1px solid #333333;
	padding:4px; 
	
}
.timer{ 
    padding: 2px;
	font-size: 12px;
	background:red;
	text-indent: 3px;
	letter-spacing: 3px;
	word-spacing: 3px;
}
/* -------------------------------
 Timer den
 ----------------------------------*/
#timer{ 
  color:#FF0000; 
  font-weight: bold;
  text-indent: 5px;
  letter-spacing: 5px;
  word-spacing: 5px;
}
#timer_tab {
  display: block;
  font-size:16px;
  margin:20px;
  margin-left: auto;
  margin-right: auto;
  padding:20px; 
  color: #00FF00;
  font-weight: bold;   
  width: 620px;
  height: 400px;
  background: url(../img/elka.jpg);   
}
#show{ 
  float:right;
  display: inline-block;
  width: 370 px;
  color: #FFFF00; 
  font-size:2.15em;
  font-weight: bold;
  
  letter-spacing:4px; 
  margin-top:20px; 
}
#chas{
  float:right;
  display: inline-block;
  width: 620px;
  color:#fff; 
  text-align: right;
  font-weight: bold;
  font-size:0.85em;
  word-spacing: 14px;	
}

/* -------------------------------
Стили текста
 ----------------------------------*/
.style1 {color: #660000;font-size: 1.55em; font-weight: bold;}/* коричневый большой */
.style2 {color: #660000;font-size: 1.25em; font-weight: bold;}/* коричневый средний */
.style3 {color: #660000;font-size: 1.00em;}/* коричневый средний */
.style33{color: #df0023;font-size: 1.05em;}/* красный мелкий */

.style4 {color: #333333; font-size: 1.75em; font-weight: bold;}/* темно зеленый большой */
.style5 {color: #006600; font-size: 1.05em;}/* зеленый средний */
.style6 {color: #006600; font-size: 1.15em; font-weight: bold;}/* зеленый средний */

.style7 {color: #FF0000;font-size: 0.95em;}/* красный средний */
.style8 {color: #df0023;font-size: 1.05em; font-weight: bold;}/* красный мелкий */

.style88 {color: #0000FF;font-size: 1.00em; font-weight: bold;}/* синий мелкий */

.style9 {color: #0000FF;font-size: 1.00em;}
.style99 {color: #0000FF;font-size: 0.85em;}

.style10 {color: #333333;font-size: 0.85em;}                  /* черный мелкий */ 
.style22 {color: #660000;font-size: 1.00em; font-weight: bold;}/* коричневый средний */

/*-------Промежуточная страница-----*/
#content{ background: #FFFFFF;
   width: 90%;
   height: 100%;        
   margin:auto;
}
.ban{ 
   width: 45%;
   height: 100%;
   float:left;
   margin: 10px; 
   padding: 10px; 
   margin:auto;
}

/*-------footer-----*/
#footer{
  float:left;
  width: 100%;
  height: 30px;
  background-color:#CCCCCC;
  padding:6px; 
  text-align:center; 
}
/* -------------------------------
 Ответы на вопросы
 ----------------------------------*/
body{
	background-image: url(../img/22.png);
}
details{
  display:block;
  background: #fff;
  width:800px;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow:hidden;
  margin-bottom: 1.05em;
  margin-left: auto;
  margin-right: auto;  
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:block;
   padding: .3em .3em .3em 1.4em;
   font-size:1.15em;
   color: #009900;
   cursor: pointer;
   position: relative;
   border-bottom: 1px solid #e2e8f0;
}
summary:before {  
  top: .4em;
  left: .3em;
  color: transparent;
  background: url(../img/pik2.png);
  width: 1em;
  height: 1em;  
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: rotateZ(90deg);
}
summary ~ * {
   padding: 0 2em 10px 2em;
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}

/* -------------------------------
 @media screen 
 ----------------------------------*/
 @media screen and (max-device-width : 809px) {
 #top_banner { 
  display:none;	
}
 #page_content_left{
  width:100%;
  float:none;
  margin:4px;
}
#page_content_right{    
  width:100%;
  float:none;
  margin: 4px;
}
.video-wrapper{
    float:none;
    width: 100%;
	margin: auto; 	
}
.movie {
    float:none;
    width: 100%;
    height: auto;
    margin: auto; 
    
}
  }
/*---------tegi---------*/

img {
   max-width:100%; 
   height:auto;
   width: auto\9; /* ie8 */
} 

h1 {color:#df0023;font-size: 1.45em; margin-top: 20px;}
h2 {color:#006600;font-size: 1.05em; display: inline-block;}
h3 {color:#006600;font-size: 1.05em; display: inline-block;}
h4 {color:#006600;font-size: 0.95em;}
h5 {font-size: 1.05em;}

strong {color:#006600;font-size: 1.00em;}

.shab{
  float:left;
  font-size:20px;
  margin-left:8px;
  color:#006800;  
  text-align:left;

} 
A {
  text-decoration: none; /* ”бирает подчеркивание дл¤ ссылок */
} 
A:hover { 
  color: red; /* —сылка красного цвета */
} 
.active { background-color: #4CAF50; color: white; }