@font-face {
font-family:'Cristall normal'; 
src: url("..\fonts\17253.ttf") format("truetype"); 

font-style: normal;
font-weight: normal; 
}
.infa{border:1px solid khaki; width:420px;
text-align:'justify';
padding:10px;
background: rgba(250,255,155,.8);
		  border: lightgray 1px solid;
		  font-size: 110%;
		  font-weight:500;
		  border-radius:10px;
		   margin:3px  3px 13px 3px;
		line-height:.9em;
           box-shadow:2px 4px 5px gray;}
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-size:.1.2rem;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
}
	.modalDialog:target {
	display: block;
	pointer-events: auto;
}

.modalDialog > div {
	width: 860px;
	position: relative;
	margin: 5% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	color:white;
	overflow-x:hidden;
	background: #565;
	background: -moz-linear-gradient(#333, #999);
	background: -webkit-linear-gradient(#333, #999);
	background: -o-linear-gradient(#333, #999);
}	
.modalDialog23 {
width:1310px;
	position: fixed;
	font-family: Arial Helvetica, sans-serif;
	font-size:.1.2rem;
	top: 0;px
	right: -30px;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 999990;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
}
	.modalDialog23:target {
	display: block;
	pointer-events: auto;
}

.modalDialog23 > div {
	width: 1300px;
	position: relative;
	margin: 5% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	color:white;
	overflow-x:hidden;
	background: #565;
	background: -moz-linear-gradient(#333, #999);
	background: -webkit-linear-gradient(#333, #999);
	background: -o-linear-gradient(#333, #999);
}	

.info{
	background: #50c0c0;
	color: #FFFFFF;
	padding:5PX 10px 5PX 10px;
	line-height: 5px;
	position: relative;
	right: -182px;
	text-align: center;
	top: -122px;
	font-size:20px;
	text-decoration: none;
	font-weight: bold;
	border:1px solid white; 
	border-radius: 20px;
	box-shadow: 1px 1px 3px #000;
}
.info:hover { background: #ffffff;
color:red; text-decoration:none;}
.info1{
	background: #f03030;
	color: #FFFFFF;
	padding:5PX 10px 5PX 10px;
	line-height: 5px;
	position: relative;
	right: 50%;
	text-align: center;
	top: 0%;
	font-size:20px;
	text-decoration: none;
	font-weight: bold;
	border:1px solid white; 
	border-radius: 20px;
	box-shadow: 1px 1px 3px #000;
}
.info1:hover { background: #ffffff;
color:red; text-decoration:none;}
.info2{
	background: #f03030;
	color: #FFFFFF;
	padding:5PX 10px 5PX 40px;
	line-height: 5px;
	
	position: relative;
	text-align: center;
	width:1260px;
	overlay-x:hidden;
	height:300px;
	font-size:20px;
	text-decoration: none;
	font-weight: bold;
	border:1px solid white; 
	border-radius: 20px;
	margin-left:130px;
	box-shadow: 1px 1px 3px #000;}

.info2:hover { background: #ffffff;
cursor:pointer;
color:red; text-decoration:none;}

.close {
	background: #306030;
	border:5px solid rgba(255,255,255,.8);
	padding:2px;
		color: #FFFFFF;
	line-height: 10px;
	position: absolute;
	right: -7px;
	text-align: center;
	top: -7px;
	width:30px;
	text-decoration: none;
	font-weight: 300;
	border-radius: 5px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	-shadow: 1px 1px 3px #000;
}
.close:hover { background-color: rgba(255,0,0,0,0); color:white;  }
} 
a.cclose1 {
	background: #30a030;
	border:5px solid rgba(255,255,255,.8);
	padding:2px;
	color: #FFFFFF;
	line-height: 10px;
font-size:10rem;
	text-align: center;
	width:30px;
	text-decoration: none;
	font-weight: 300;
	border-radius: 5px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	-shadow: 1px 1px 3px #000;
}

.cclose1:hover { background-color: rgba(255,0,0,0,0); color:white;  }
          .btn {
	height:30px;
	border-color:#c2e254 #9bb838 #9bb838 #c2e254;
	border-style:solid;
	border-width:1px;
	background:#f22222;
	cursor:pointer;
	}
	.btn:hover {
	border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66;
	border-style:solid;
	border-width:1px;
	background:#FF3399;
	}
	.btn:focus {???
	background:#ddd;
	border-color:#ddd #333 #333 #ddd;
	border-style:solid;
	border-width:1px;
	}
	.btn:active {
	background:#ff0000;
	border-color:#ddd #333 #333 #ddd;
	border-style:solid;
	border-width:1px;

}

#video12 {
  position: relative;
  margin-bottom: 110px;
  padding-bottom: 70%;
}
#video12 iframe {
  position: absolute;
   left:8px;
  width: 95%;
  height: 95%;
}
#video12 div {
  position: absolute;
  bottom: -10px;
 left:25px;
  width:200px;
  height: 200px;
  padding: 0;
  overflow-x: auto;
  white-space: nowrap;
  text-align:left;
}
#video12 img {
  height: calc(100% - (5px + 1px)*2 - 10px);
  margin: 0 5px 0 0;
  padding: 5px;
  border: 1px solid #555;
  border-radius: 5px;
  opacity: .7;
}
#video12 img:hover {
  opacity: 1;
  cursor: pointer;
}
#video12 img:focus {
  opacity: .2;
}
.containerm{
position:absolute;
left:40px;
top:0px;
z-index:9999;
  width:70%;
  padding:10px;}
.container h1,h2 {
    color: white;}
	.video-background {
 background: #000;
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -99;
}
.video-background {
 background: #000;
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -99;
}
.video-foreground,
.video-background iframe {
 position: absolute;
 top: 0; left: 0;
 width: 100%; height: 100%;
 pointer-events: none;
}
#vidtop-content {
 top: 0;
}
@media (min-aspect-ratio: 16/9) {
 .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
 .video-foreground { width: 300%; left: -100%; }
}

h1 {font-size:3rem;
    font-weight:300;
	font-family:Lotto;}
.tit0{width:70%;
     color:white;
	 border:2px solid white;
	 border-radius:33px;}
	 .tit{margin:5px;
     color:white;
	 border:4px solid white;
	 border-radius:30px;}
.card{font-size:.75rem;}
.dmm {color:white;font-weight:700;font-size:6rem;}  
.yr {color:orange;font-weight:500;font-size:3rem;}
 


.target {color:white; font-size:1.2rem; padding:30px;}
.tdt {border-bottom:1px white solid; color:white;padding:10px;font-size:1.5rem;font-weight:200;}
.tdd{ font-weight:200;border-left: 1px solid #f3f3f3; border-bottom:1px white solid;
 color:white;padding:10px;font-size:1.5rem;}
 p{text-indent:30px;}
 .ww{text-align:left; font-size:3rem;color:gold;text-transform:uppercase;}
 .txtt {padding:10px 10px 10px 30px; border:1px darkblue solid; color:darkblue; 
 font-size:1.2rem;
 margin:30px; column-count:2; column-gap:40px;}
 .txtit {padding:10px 10px 10px 30px; border:1px darkblue solid; color:darkblue; 
 font-size:1.2rem;
 margin:30px; column-count:2; column-gap:40px;}
 .lcont{float:left; margin:5px 10px 5px -85px; padding:10px;
 background:honeydew;font-size:.97rem; line-height:.9rem;
 border:1px solid gray;font-family:arial;}
 
  .lcontm{float:left; margin:5px 10px 5px -95px; padding:10px;
 background:honeydew;font-size:.97rem; line-height:.9rem;
 border:1px solid gray;font-family:arial;}
 .rcont{float:right; margin:5px -130px 5px 10px; padding:10px;font-size:.97rem; line-height:.9rem;
 border:1px solid gray;font-family:arial;}
 .rcontm{float:right; margin:5px -140px 5px 10px; padding:10px;
 background:honeydew;font-size:.97rem; line-height:.9rem;
 border:1px solid gray;font-family:arial;}
 .td1{background:#afcfff;border:1px solid white;padding:0 5px 0 5px;}
  .td2{background:#efefaf;border:1px solid white;padding:0 5px 0 5px;}
 .th0 {background:#373773;border:1px solid white;color:#f0f0f0;text-align:center;
 padding:0 5px 0 5px;}
iiinput[type=number]::-webkit-inner-spin-button, 
iiinput[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.ff{color:white; font-size:1.2rem;;margin:20px;}
.bff{color:gray; font-size:1.2rem;;margin:20px;}
.fb{color:darkblue; font-size:1.2rem;;margin:20px;}
.demo {
	display: block;
	position: relative;
	background: #fff;
	text-align:justify;
	margin: 20px 30px;
	padding: 50px 50px;
	height: 100%;
}
.comment {
	display: block;
	background: #f66;
	font-size: 18px;
	color: #CCCCCC;
	text-align: center;
	margin: 50px 20px;
	padding: 50px 20px;
}
.comment a {
	font-weight: bold;
	color: #C2C2FF;
	text-decoration: none;
}
.tty {padding:3px; border:1px solid darkgreen;}
p.dsa:first-letter{
   margin: 0;
   padding: 2px;
   font-weight:bold;
   background: #f33;
   color: #fff;
   border: 1px solid #000;
   border-radius:10px 0 10px 0;
   }
   .ams {color:#373763;
         font-style:italic;
		 font-size:.96rem;
		 border-bottom:1px solid gray;}
.w011 {background:#fff;
color:gray;
      margin:10px;
	  padding:10px;
	  font-family:Arial;}       
	       
	  .gfg{margin:5px 20px 5px 20px;}
.hh1 {font-weight:500;font-size:1.4em;}
a{margin-bottom:55px;text-decoration:none;color:#171717;font-size:18px;line-height:14px;
font-weight:400;}
a:hover{margin-bottom:55px;text-decoration:none;color:white;font-size:16px;line-height:12px;font-weight:100;cursor:pointer;}
li{ list-style-type:none;}
	.lbb{coolor:white;font-size:9px;font-family:arial;line-height:.6rem;border:10px silver solid;padding:5px;}
	.lbb1{font-size:9px;font-family:arial;line-height:.6rem;}
	.lbb2{font-size:9px;font-family:arial;line-height:.6rem;border-BOTTOM:10px silver solid;padding:5px;}
a.aq1 {color:darkred; text-decoration:none;}
a.aq1:hover  {color:darkred; text-decoration:none;}

a.aq{font-size:8px;
  display: table-cell;
  color:#373773;
  text-decoration: none;
  background:rgba(255,255,255,0);
  padding:2px;
  transition: .6s border;
}
a.aq:hover{
  background:rgba(1,1,1,0.6);
  color:white;
 border-bottom:13px solid cyan;
}
.press{font-size:.95em;
  display:table-row;
 

  color:#373773;
  font-weight:100;
  letter-spacing:.01rem;
  text-decoration: none;
  background:rgba(255,255,255, .99);
  padding:2px 16px 2px 16px;
  text-transform:uppercase;
  transition: .6s background;
}
.press:hover{

  background:#373773;
padding:2px 16px 2px 56px;
  font-size:.95em;
  font-weight:100;
   text-transform:uppercase;
 border-bottom:2px solid cyan;
 color:#F0F0F0;
}
.prs {font-size:.9em;
  display: table-row;
  color: gray;
  text-decoration: none;
 /* background:rgba(1,1,0,0.4);*/
margin:2px 16px 2px 56px;
  transition: .6s border;}
  .men {width:16%;
          padding:15px;}
.menb {width:16%;
	
	vertical-align:top;
          padding: 5px;
		  text-align:center;}	
		.menb:hover {width:16%;
	border: 2px dotted white;
	
	border-bottom:5px solid red;
	 border-radius: 15px 15px 0px 0px; 
	vertical-align:top;
          padding: 5px;
		  background:rgba(100,100,100,.6);
		  color:red;
		  text-align:center;}	    
	.mnu {color:white;
	font-size:1.2em;
	 font-family: 'Helvetica Neue','Liberation Sans', Arial, FreeSans, sans-serif;}

  .oiu {padding:10px;}
  .fdf {color:darkgray;
  font-size:.96rem;
  width:95%;
  backgrounD-COLOR:#f0c0f0;
  border: 1px gray solid;
  border-radius:15px;}
pre {font-size:1.9rem;color:black;font-weight:500;background-color:green;}





.
.btmh {background-color:#f3f020;
   padding:15px;
   border:3px solid #aa5;
   border-radius:20px;
   margin:15px;
  color:#000000;
  font-size:1.8rem;
  width:250px;font-weight:100;
    text-align:justify;}
	
.dmme{background-color:#3f3f02;
   padding:15px;
   border:3px solid #aa5;
   border-radius:20px;
   margin:15px 20px;
  color:#F3f3f3;
  font-size:1.8rem;
  width:250px;font-weight:100;
    text-align:justify;}
	.year2222_on_img {color:red;
	padding:7px;
	background:white;
	border:red 2px solid;
	border-radius:15px;
	font-size:1.32rem;
	font-weight:bold;}
.year1_bth {color:darkred;;
border:2 white solid;
background:khaki;
font-size:2rem;
font-weight:bold};
.year2_bth {color:gray;

font-size:2rem; 
font-weight:bold};

.title12{color:red;
font-weight:700;

font-size:2rem;}
.dat {font-size:.6rem;
color:red;}
.thumb_tleft{float:left;
 margin:12px;
 border:2px red solid;}
	
.plainlist{font-size:1.2em;
 color:dagreen;}
.infobox {border:1px solid gray;}
@import url(https://fonts.googleapis.com/css?family=Carter+One);

$colors: #f8b195, #c06c85, #6c5c7c, #345d7e;

// Inputs
input[type='radio'] {
  display: none;
}

@for $i from 1 through length($colors) {
  input[type='radio']#section#{$i}:checked ~ nav label[for='section#{$i}'] {
    background-color: white;
  }
  
  input[type='radio']#section#{$i}:checked ~ section:nth-of-type(#{$i}) { 
    z-index: 1;
    top: 0;
    transition: top 0.5s ease-in-out;
    transition-delay: 0s;
  }
  
  input[type='radio']#section#{$i}:checked ~ .cover { 
   background-color: nth($colors, $i);
  }
}


// Navigation
.nav {
  position: fixed;
  z-index: 2;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  
  &__item {
    width: 12px;
    height: 12px;
    display: block;
    margin: 12px auto;
    border: solid 2px white;
    border-radius: 50%;
    cursor: pointer;
    
    &:hover {
      background-color: white;
    }
  }
}


// Sections
section {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 100%; right: 0; left: 0;
  transition-delay: 0.5s;
}

@for $i from 1 through 4 {
  section:nth-of-type(#{$i}) {
    background: nth($colors, $i);
  }
}


// Fix the white-space
.cover {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}


// Base
html,
body {
  height: 100%;
}
.mw-headline{color:red;
font-weight:bold;}
.thumb_tright{border: 2px red solid;
float:left;
margin:15px;}
.titl{color:darkred;font-size:12px;font-weight:bold;}
.plainlist {
	bobody {background:url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)}rder:1px white solid;
}

	.diea {width:250px;color:honeydew;background-color:#305040;padding:10px; margin:10px;border:3px solid black;padding:10px;
		border-radius:10px;  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);font-size:1.3rem;}
	
	.btha {width:250px;color:black;background-color:#f0e0f0;padding:10px; margin:10px;border:3px solid brown;
		border-radius:10px;  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
font-size:1.2em;}
	.bdea {width:250px;color:black;background-color:#afe0a0;padding:10px; margin:10px;border:3px solid darkgreen;
		border-radius:10px;  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);font-size:1.2em;}
	
		
		.abb:link{color:darkgreen;text-decoration:none; font-weight:bold; text-transform:uppercase;}
		.abb:visited{color:green;text-decoration:none; font-weight:bold; text-transform:uppercase;}
		.abb:hover{color:darkgreen;text-decoration:none; font-weight:bold; text-transform:uppercase;}
		.add:link{color:gold;text-decoration:none; font-weight:bold; text-transform:uppercase;}
		.add:visited{color:orange;text-decoration:none; font-weight:bold; text-transform:uppercase;}
		.add:hover{color:gold;text-decoration:none; font-weight:bold; text-transform:uppercase;}
		td {valign:top;}
	.byimg {font-weight:500;
font-size:1.4em;
padding:3px;
border:1px gray solid;
border-radius:10px;
background-color:green;
color:white;
position:relative;top:-20px;
}

.yev{font-weight:500;
font-size:1.4em;
padding:3px;
border:1px gray solid;
border-radius:0px;
background-color:darkgreen;
color:lightgreen;
margin-left:-32;z-index:9999;}
.dyimg {font-weight:500;
font-size:1.7em;
padding:3px;
border:1px gray solid;
border-radius:10px;
background-color:black;
color:white;
position:relative;top:-20px;
}
.nyev{font-weight:500;
font-size:1.4em;
padding:12px;
border:1px gray solid;
border-radius:10px;
background-color:gold;
color:black;
position:relative;top:-20px;
}
.ddd {padding:15px;

   margin:15px -0px 30px 60px;
  color:#000000;
  font-size:8.2rem;
  width:280px;font-weight:100;
  
    text-align:justify;}
.dv {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.llal {
  display: inline-block;
  width: 300px;
}

input:invalid+span:after {
    content: '?';
    padding-left: 5px;
}

input:valid+span:after {
    content: '?';
    padding-left: 5px;}

#body_button{
   height: 300px;
  margin: 0;
  padding: 0;
  color: #ddd;
   text-align: center;
  padding-top: 12vh;
}
.button_hola,
.button_hola::before,
.button_hola::after,
.button_hola span,
.button_hola span::before,
.button_hola span::after
{
  transition: all ease .5s;
}
 
.button_hola{
  position: relative;
  display: inline-block;
  padding: 0.3em;
  margin: 1em;
  border: solid 1px;
  text-transform: uppercase;
  cursor: pointer;
}
 
.button_hola:hover
{
  box-shadow: 0 0 5em .5em rgba(50,50,150,0.5);
}
 
.button_hola span
{
  display: inline-block;
  width: 100%;
  padding: 0.6em 2em;
}
 
.button_hola:hover span
{
  background-color: #fff;
  color: #112;
}
 
.button_hola::before,
.button_hola::after,
.button_hola span::before,
.button_hola span::after
{
  content: '';
  position: absolute;
  border: 1px;
}
 
.button_hola::before,
.button_hola span::before
{
  border-style: solid none;  
}
 
.button_hola::before,
.button_hola span::after{      
  left: 0;
  top: -0.4em;
  width: 100%; 
  height: calc(100% + 0.8em);
}
 
.button_hola::after,
.button_hola span::after
{
  border-style: none solid;   
}
 
.button_hola::after,
.button_hola span::before
{
  top: 0;
  left: -0.4em;
  height: 100%;
  width: calc(100% + 0.8em); 
}
 
.button_hola:hover::after,
.button_hola:hover span::after
{
  transform: scaleY(0);
}
 
.button_hola:hover::before,
.button_hola:hover span::before
{
  transform: scaleX(0);
}
 
.button_hola:hover span::after,
.button_hola:hover span::before
{
  opacity: 0;
}
.butt {color:white;
       font-weight:bold;
       text-decoration:none;}
.butt:hove{:color:black; cursor:pointer;
           }   



.a1{font-size:1.35em;
     font-weight:500;
     color:#000;} 

.a2{font-size:1.25em;
   
     font-weight:300;
     color:#000;}  

.a3{font-size:1.25em;
  text-transform: uppercase;
     font-weight:600;
     color:#300;}                    
a.bottom{
border:1px solid gray;
      background: linear-gradient(to top, orange,yellow,orange);
border-radius:7px;
  color:#088;
  text-decoration:none;
  display:block;
  width:290px;
  text-align:center;
  margin:20px auto;
  padding:10px 10px;
  transition:all 0.3s;
  }
 a.bottom:hover{
  box-shadow:0px -5px 0 #088 inset;
}
a.bottom1{
border:1px solid gray;
      background: linear-gradient(to top, orange,yellow,orange);
border-radius:7px;
  color:#088;
  position: fixed;
  bottom:40px;
  left:30px; 
  text-decoration:none;
  display:block;
  width:90px;
  text-align:center;
  margin:20px auto;
  padding:10px 10px;
  transition:all 0.3s;
  }
 a.bottom1:hover{
  box-shadow:0px -5px 0 #088 inset;
}
      #navbar9 {
        margin: 0;
        padding: 0;
        list-style-type: none;
        width: 180px;
		}
      #navbar9 li {
        border-left: 5px solid #fff;
        border-bottom: 1px solid #666;
      }
	.jk{color:white;
font-size:2em;
margin:10px;
}
  
	  #navbar9 td {
   padding:2px 5px 2px 15px
      }
	  #navbar9 li:hover { font-weight: bold;
        background-color: rgba(255,255,32,.5); color:black;
			        border-left: 3px solid #00aaaa;}
     
	  .dddds{background:darkred;color:white;padding:5px;font-size:2rem;}
#back-top {
    position: fixed;
    bottom: 10px;
    margin-left: -150px;
}
#back-top a {
    width: 28px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    /* переход */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
/* иконка стрелки (тег span) */
#back-top span {
    width: 28px;
    height: 28px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(up-arrw.gif) no-repeat center center;
    /* круглые углы */
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    /* переход */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}