*{
	margin:0;
	padding:0;	
}
*:focus {
  outline: none;
}
body{
	background: #fff url(../img/bg.jpg) repeat top left;
	font-family: 'Comic Sans MS', sans-serif;
	font-size: 22px;
	color: #1d3c41;
}
a {
	color: #333;
	text-decoration: none;
}
a:hover{
	text-decoration: none;
	/*color: #D93D4A;*/
	background: #6B6B6B;
	color: #FFF;
}

/* Стиль чердака */
.codrops-top{
	line-height: 42px;
	font-size: 15px;
	background: rgba(255, 255, 255, 1);
	text-transform: uppercase;
	z-index: 9999;	
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
	width: 100%;    
	position: fixed;        
    z-index:99999999;  
	-webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);        
	box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45); 	
	}

.codrops-top a {	
	margin: 0 10px;
	padding: 12px 8px;
	width: 100px;
	height: 100px;
	
}
.codrops-top a:hover {
  background: #6B6B6B;
  text-decoration: none;
  color: #FFF;
}
.menu-right {
	float:right;
}
	
.wrapper {
	width: 100%;
	height: 100%;
	/*display: inline-block;*/
	display: flex;
	flex-direction: column;
}

/* левое меню */
.parent {
	float: left;
	width: 384px;
	/*flex: 384px 0;*/
    height: 100%;
	position: fixed;
	margin-top: 42px;
	z-index: 900;
	-webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);        
	box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);
	overflow-y: auto;
}
.menu {
    color: rgb(50, 49, 48);
	padding: 10px;
	width: 100%;
}
.menu-main {
	margin: 20px;
	padding: 10px 0px;
	font-size:18px;
	display: block;
	/*border: 1px solid rgb(178, 178, 178);*/
	text-transform: uppercase;
	color: #222;
	margin-bottom: 25px;
}
.menu-main li{
	margin-top: 20px;
	font-weight:bold;
	list-style: none;
}
.menu-main a {	
	margin: 0 10px;
	/*padding: 12px 18px;	*/
	
	text-decoration: none;
	outline: none;
	display: block;
	/*padding: 6px 0; */
	letter-spacing: 1px;
	font-weight: 300;
	color: #444;
	transition: .3s linear;
}
.menu-main a:hover {
	background: #6B6B6B;
	color: #FFF;  
  	margin: 0 10px;
	padding: 12px 18px;	
}
/*стилизация стролбара*/
::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

.container {
	float:center;
	/*width: 100%;*/
	flex: 100%;
	margin-top: 43px;
	margin-left: 385px;
	/*
	height: 100%;
	background:#FFFF99;
	overflow-y: auto;
	position: fixed;
	border: 1px solid rgb(178, 178, 178);*/
}
.container p {
	text-align: justify;
	padding: 10px;
}

table {
	border-spacing: 0;
	margin: auto; /* Выравниваем таблицу по центру окна  */
	font-size: 18px;
	
	border-collapse:collapse;
	border-top:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;
	border-bottom:1px solid black;
}
td {
	padding: 3px;
}
/*
tbody tr:nth-child(2n) {background: rgba(255, 255, 255, 0.7);}
*/
/* заголовок таблицы*/
caption {
caption-side: top;
text-align: right;
padding-bottom: 5px; 
margin-top: 0;
font-size: 18px;
}
.caption {
	text-align: right;
}

h1 {
	font-size:25px;
	/*margin-top: 50px;*/
	margin-bottom: 10px;
	text-align: center;
	color:#DC143C;
}
h2 {
	font-size:22px;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: center;
}
.lk {
	max-width: 1200px;
	margin: auto;
	padding: 40px 0px;
	/*border: 1px solid rgb(178, 178, 178);*/
}
.F1{  
  /*max-width:80%;  Выравниваем таблицу по центру окна  */    
  box-sizing:border-box;
  padding:40px;
  border-radius:5px;
  background:RGBA(255,255,255,1);
  -webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);        
  box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);  
}
li{
	margin-top: 10px;
	font-weight:bold;
	font-size: 22px;
}
input[type=radio]{	
	margin: 0 15px;
}
label{
	margin-bottom: 30px;	
	font-size: 18px;
}

/* Стили полей ввода */
.textbox {
  display:inline-block;
  height:50px;
  width:100%;
  border-radius:4px;
  border:rgba(0,0,0,.3) 2px solid;
  box-sizing:border-box;
  padding:10px;
  margin-bottom:20px;
  font-size:18px; 
  font-weight:bold; 
  color:#000000; 
	margin-top: 10px;  
}
.message:focus,
.textbox:focus{
	outline:none;
	border:rgba(24,149,215,1) 5px solid;
	color:rgba(24,149,215,1);
	background:#FFFF99;
}

/* Стили текстового поля */
.message{
    /*background: rgba(255, 255, 255, 0.4); */
    width:100%;
    height: 120px;
    border:rgba(0,0,0,.3) 2px solid;
    box-sizing:border-box;
	font-size:20px;
	font-weight:bold; 
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 4px; 
    display:block;
    padding:10px;
    margin-bottom:30px;
    overflow:hidden;
}
/* Таблица из div */
*{
  box-sizing: border-box;
}
.d-table{
  display: table;
  margin: auto;
  width: 60%;
  border-collapse: collapse;
}
.d-tr{
  display: table-row;  
}
.d-td{
  display: table-cell;
  /*width: 50%;
  border: none;
  text-align: center;  
  
  */
  
  border: 1px solid #ccc;
  vertical-align: middle;
}
.d-td:not(.no-p){
  padding: 4px;
}
/*
.d-tr:nth-child(2n) {background: rgba(255, 255, 255, 0.6);}
.d-tr-col{
	display: table-row-group;
	display: table-column-group;
}


.d-td-col{
	display: table-cell;
	box-sizing: border-box;
	font-size: 18px;
	text-align: center;	
	column-span:all;
	width: 100%;
}
*/


/*убрать через пять секунд*/
#hideMe {
	text-align:center;
	color:#DC143C;
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}






/* ОСОБЕННОСТИ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */

@media(max-width:1180px) {
.codrops-top {	
	background-color: #333;
    overflow: auto;
    white-space: nowrap;	
	overflow: hidden;
	}
.codrops-top a {
    color: white;
    text-decoration: none;
	overflow: hidden;
}
.menu-right {
	display: inline-block;
	float:none;
}
.wrapper {
	display: flex;
	height: 100%;
	gap: 0 20px;
	max-width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-snap-stop: always;
}
.parent {
	float:left;
	position: relative;
	width: 100%;
    height: 100%;
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	
  }
.container {
	float:left;
	width: 100%;
    height: 100%;
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	margin-left: 2px;
  }
}
.clr{
	clear: both;
	display:block;
	content:'.';
}

/* звезды */
.rating-area {
	/*
	
	width: 265px;
	margin: 0 auto;
	*/
	padding: 0; margin: 0;
	overflow: hidden;
	display: flex;	
	flex-direction: row-reverse;
	justify-content: flex-end;
}
.rating-area:not(:checked) > input[name] {
	display: none;
}
.rating-area:not(:checked) > label {
	float: right;
	width: 42px;
	padding: 0;
	margin: 0 auto;
	cursor: pointer;
	font-size: 32px;
	/*line-height: 32px;*/
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-area:not(:checked) > label:before {
	content: '\2605';
}
.rating-area > input[name]:checked ~ label {
	color: gold;
	text-shadow: 1px 1px #c60;
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
	color: gold;
}
.rating-area > input[name]:checked + label:hover,
.rating-area > input[name]:checked + label:hover ~ label,
.rating-area > input[name]:checked ~ label:hover,
.rating-area > input[name]:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input[name]:checked ~ label {
	color: gold;
	text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
	position: relative;
}
/* свернуть и развернуть текст
input[name]:checked
.slide p,*/
#slide1+label:after{content:"Развернуть";}
#slide1:checked+label:after{content:"Свернуть";}
#slide2+label:after{content:"Развернуть";}
#slide2:checked+label:after{content:"Свернуть";}


/* Используем псевдоэлемент after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при наведении */
/* задаем относительное позиционирование контейнеру */
.block{position:relative;
display: inline;
}
/* Оформление скрытого элемента по умолчанию */ 
.hidden
{display: none;
position: absolute;
bottom: 130%;
left: 0px;
background-color: #fff;
color: #3aaeda;
padding: 5px;
text-align: center;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.16);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16);
box-shadow: 0 1px 1px rgba(0,0,0,.16);
font-size: 12px;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.focus + .hidden:before
{content: " ";
position: absolute;
top: 98%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: #fff transparent transparent transparent;
z-index: 2;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.focus + .hidden:after
{content: " ";
position: absolute;
top: 100%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: rgba(0,0,0,.16) transparent transparent transparent;
z-index: 1;}
/* Появление скрытого элемента при клике */
.focus:focus + .hidden{display: block;}