body
{
 background-color:Aliceblue;
}
/* Create a pseudo element that uses padding-bottom to take up space */
.aspect-ratio-box::after {
    display: block;
    content: '';
    /* 16:9 aspect ratio */
    padding-bottom: 56.25%;
}

/* Image is positioned absolutely relative to the parent element */
.aspect-ratio-box img {
    /* Image should match parent box size */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80%;
}
.demo
{
text-align:left;
font-family:'Jost', sans-serif;
color:Darkslategray;
}
a.ssilka {
  display: inline-block;
  color: white;
  
  text-decoration: none;
  padding: .5em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
}
a.ssilka:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.ssilka:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }
.big
  {
max-width:1400px;
position:absolute;
top:0px;
left:0px;
float:left;
 overflow: hidden;
}
.top
{
background-image: url('/xlog1.jpg.pagespeed.ic.2GNnOG-t_h.jpg');
 background-repeat:no-repeat ;
 background-size: contain;
 background-attachment: relative;
 background-position:5% 1%;
width:100%;
float:right;
background-color:DCDCDC;
   }
h1
   {
       font-family: 'Stalinist One', sans-serif;
        font-size: 30px;
        color:#FF0000;
        text-align:center;
   }
h2
{
font-family: 'Jost', sans-serif;
background:Peru;
  color:#ffffff;
  font-size:1em;
   text-transform: uppercase;
  text-align:center;
 }
 h4
   {
font-family: 'Poiret One', cursive;
        font-size: 16px;
        color:#FF4500;
        text-align:center;
   }

h3 {
  font-family: 'Poiret One', cursive;
  font-size: 18px;
  letter-spacing: 1px;
  width: 100%;
  position: relative;
  display: inline-block;
  color: #465457;
}
 
  .header-h2 {
    text-align: left;
    margin-bottom: .5rem;
  }
  .header-h2 h2 {
    display: inline-block;
    background: #0097a7;
    color: #fff;
    margin-bottom: 0;
    padding: .5rem 1rem .625rem 1rem;
    font-size: 1.0rem;
    text-transform: uppercase;
    border-radius: 30px;
   font-family: 'Play', sans-serif;
  }

.title_top
    {
      font-family: 'Poiret One', cursive;
      text-transform: uppercase;
       font-weight: 3000;
     font-size: 1.8em;
        line-height: 1.0;
         color:#2F4F4F;
     margin-left:200px
   }
 /*CТИЛЬ ДЛЯ H1*/
    .header-h1 h1 {
    position: relative;
    padding-bottom: .5rem;
    font-size: 3.0rem;
    text-transform: uppercase;
    text-align: center;
    color:Dimgray;
    font-family: 'Jost', sans-serif;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    border-bottom: 2px solid #00838f;
    bottom: .25rem;
    left: 50%;
    width: 30%;
    transform: translateX(-50%);
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    border-bottom: 2px solid #00838f;
    bottom: 0;
    left: 50%;
    width: 15%;
    transform: translateX(-50%);
  }
  .header-h1-left h1 {
    text-align: left;
  }
  .header-h1-left h1::before,
  .header-h1-left h1::after {
    left: 0;
    transform: translateX(0);
  }
  .header-h1-right h1 {
    text-align: right;
  }
  .header-h1-right h1::before,
  .header-h1-right h1::after {
    left: unset;
    right: 0;
    transform: translateX(0);
  }
 
 /*конец стиля для h1*/

.d3 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  right: 0;
  height: 12px;
  background: #A6D8CB;
  z-index: -1;
}
.d3 span {
  background: white;
  padding: 0 15px;
  margin-left: 20px;
}
hr
   {
 width:100%;
  height:px;
 color:Gray;	 /* Цвет линии для остальных браузеров */
   background-color: #5F9EA0; /* Цвет линии для браузера Firefox и Opera */
    }
 img
 {
 margin:10px;
 padding:10px;
 }
.job
 {
width:95%;
height:auto;
float:left;
margin-top:15px;
background-color:FFFFFF;
font-family: Georgia, 'Times New Roman', Times, serif;
 border: 3px #CCCCCC solid; /* стили рамки */
 -moz-border-radius:30px 30px 30px 30px; /* закругление для старых Mozilla Firefox */
 -webkit-border-radius:30px 30px 30px 30px; /* закругл. для старых Chrome и Safari */
 -khtml-border-radius:30px 30px 30px 30px; /* закругл. для браузера Konquerer системы Linux */
 border-radius:30px 30px 30px 30px; /* закругление углов для всех, кто понимает */
 padding:20px ; /* внутренние отступы */
 overflow: visible;
 text-align:center;
 }

 .string last-child;
 {
 margin-left: 0px;/*Убираем поле последнего div-а*/
}
.body
{
 width:100%;
float:left;
 border-radius:30px 30px 30px 30px; /* закругление углов для всех, кто понимает */
 padding-right:10px; /* внутренние отступы */
}

.tri
{
 text-align:left;
 color:Darkslategray;
 float:left;
 font-family: Mistral, 'Monotype Corsiva', cursive;

}
.podv
{
 width:100%;
height:250px;
 background-color:#2F4F4F;
 float:right;
 color:FFFFFF;
    font-family: monospace; /*меняем шрифт*/
    text-align:left
}

.bot a
{ text-align:left;
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#2F4F4F; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: monospace; /*меняем шрифт*/
  line-height:20px; /*ровняем меню по вертикали*/
  display: block;
}
.bot a:hover
{
   text-align:left;
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#ffffff; /*добавляем фон к пункту меню*/
  color:#2F4F4F; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: monospace; /*меняем шрифт*/
  line-height:40px; /*ровняем меню по вертикали*/
  display: block;
}

p
 { font-family: 'Play', sans-serif;
    padding:10px;
    font-color:#006400;
    text-align:justify;
    margin-bottom: 4px; margin-top: 4px;
 }

 /*Увеличение картинки*/
img.img.center{
margin:5px auto;
display: block;
max-height: 520px;
max-width: 520px;
}
img.img.center:hover {
transform:scale(3);
transition: all 0.3s linear 0.3s;

}
img.img.left{
float:left;
margin:5px 15px 5px 0;

}
img.img.right{
float:right;
margin:5px 0 5px 15px;
}
img.img.center{
margin:5px auto;
display: block;
}
img.img {
max-height: 520px;
max-width: 520px;
transition: all 0.3s linear 0s;
z-index: 1;
border: 1px solid #EEE;
background: #FFFFFF;
padding: 5px;
}
img.img:hover {
cursor:pointer;
box-shadow: 0 0 5px 5px #eee;
border: 1px solid #25A0E3;
z-index: 10;
transition: all 0.3s linear 0.3s;
}
img.img.left:hover{
transform:scale(3)
 translate(88px, 30px);

}
img.img.right:hover{
transform:scale(3)
 translate(-88px, 30px);

}
img.img.center:hover {
transform:scale(3);

}

p:first-letter
{
color:#8B0000;
font-size:30px;
font-family: 'Monotype Corsiva','Сomic Sans MS Cursive',  cursive;
padding: 4px; margin-bottom: 4px; margin-top: 4px;
}
a
{
 font-family: monospace;
 color:#2F4F4F;
 font-style: italic;
 text-decoration: none;
 font-size:16px;
 font-weight: bold;
}
a:hover
{
 color:#FF4500;
 text-decoration: none;
 font-style: italic;
 font-weight: bold;
}
/*font-family: 'Lobster', cursive;
font-family: 'Play', sans-serif;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Poiret One', cursive;
font-family: 'El Messiri', sans-serif;
font-family: 'Stalinist One', cursive;
font-family: 'Ruslan Display', cursive;
font-family: 'Yeseva One', cursive;
font-family: 'Rubik Mono One', sans-serif;
font-family: 'Jost', sans-serif;
*/
/*градиентный фон для шапки
.colorful {
	background:
		-webkit-linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
		-webkit-linear-gradient(315deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
		-webkit-linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
		-webkit-linear-gradient(135deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
	background:
		linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
		linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
		linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
		linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
	}
*/
/*Стили для открывающихся окон на главной странице*/
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
    display: none;
}
/* вид текста label */
.hide + label {
    margin: 0;
    padding: 0;
    color: #0000FF;
    cursor: pointer;
    display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block;
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    margin-left: 20px;
    padding: 10px;
    /* чуточку анимации при появлении */
     -webkit-animation:fade ease-in 0.5s;
     -moz-animation:fade ease-in 0.5s;
     animation:fade ease-in 0.5s;
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
.hide + label:before {
    background-color: #1e90ff;
    color: #fff;
    content: "\002B";
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    margin: 3px 5px;
    text-align: center;
    width: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.hide:checked + label:before {
    content: "\2212";
    /*Конец стилей открывающихся окон на главной странице*/