* {box-sizing: border-box;}

@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Italic.woff2') format('woff2'),
url('../fonts/Montserrat-Italic.woff') format('woff'),
url('../fonts/Montserrat-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
url('../fonts/Montserrat-Regular.woff') format('woff'),
url('../fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Merriweather-Regular';
src: url('../fonts/Merriweather-Regular.woff2') format('woff2'),
url('../fonts/Merriweather-Regular.woff') format('woff'),
url('../fonts/Merriweather-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Merriweather-Black';
src: url('../fonts/Merriweather-Black.woff2') format('woff2'),
url('../fonts/Merriweather-Black.woff') format('woff'),
url('../fonts/Merriweather-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}

html {padding-top: 5px; padding-bottom: 10px; background-color: DimGrey;}

@media (max-width:600px) {
body {width: 100%;}
.dva {display: block; width: 100%;}
.label {left: 90px;top: 50px;}
.map{width: 90%;}
.rght {width: 30%; margin-right: 10px;}
.demo {width: 20%;}
.dg1 {width: 100px; height: 100px; margin: 7px 3px 7px 3px;}
.dg2 {width: 100px; height: 100px; margin: 10px 3px 30px 3px; font-size: 0.6em;}
p {margin-left: 10px; margin-right: 10px; font-size: 1.0em;}
.stat ul {margin-left: 20px; margin-right: 10px;}
ul {font-size: 1.0em;}
.havo p {font-size: 1.0em;}
figcaption {font-size: 0.8em;}

}

@media (min-width:601px) {
body {width: 90%;}
.dva {display: inline-block; width: 49%;}
.label {left: 190px;top: 50px;}
.map{width: 450px;}
.rght {width: 30%; margin-right: 40px;}
.demo {width: 200px;}
.dg1 {width: 150px; height: 150px; margin: 7px 7px 7px 7px;}
.dg2 {width: 150px; height: 150px; margin: 10px 7px 30px 7px; font-size: 0.8em;}
p {margin-left: 40px; margin-right: 40px; font-size: 1.1em;}
.stat ul {margin-left: 50px; margin-right: 40px;}
ul {font-size: 1.1em;}
.havo p {font-size: 1.3em;}
figcaption {font-size: 1.0em;}

}

body {min-width: 300px; margin: 0 auto; background-image: url(../img/fon2.png);}

header {height: 170px; background-image: url(../img/header.jpg);}

footer {height: 45px; color: Snow;}

header, section, footer {width: 100%;}

section {margin: 0; padding: 0;}

img {max-width: 100%;}

a {text-decoration: none; color: Black;}

a:link {color: Black;}
a:visited {color: Black;}
a:hover {color: White;}
a:active {color: Blue;}

.dva a:hover {text-shadow: 0 0 4px Black;}

.tip::after {content: "читать"; }

p {
font-family: Montserrat, Verdana, sans-serif;
color: Black;
margin-top: 10px;
word-spacing: 2px;
line-height: 150%;
text-align: justify;
text-indent: 1em;
}

h1, h2, h3 {
font-family: Merriweather-Black, Verdana, sans-serif;
letter-spacing: -1px;
margin: 0;
padding: 0;
border: 0;
font-size: 0.0em;
color: #464646;
}

ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
line-height: 140%;
font-family: Montserrat, Verdana, sans-serif;
color: Black;
}

.price, .havo, .stat {width: 98%;} 

.price {border: 3px solid Black; margin: 5px auto; background-color: Gainsboro;}

.havo {
border: 3px solid Gainsboro;
border-radius: 0 20px 0 20px;
margin: 5px auto;
background-color: LightSlateGray;
text-align: left;
}

.havo h1 {
font-size: 1.4em;
color: Snow;
margin-left: 10px;
text-shadow: -4px 4px 3px Black;
}

.havo h1::after {content: "Есть вопрос";}

.havo p {
font-family: Merriweather-Regular, Verdana, sans-serif;
text-align: justify;
margin: 2px 10px 5px 25px;
}

.havo a:link {color: White;}
.havo a:visited {color: White;}
.havo a:hover {color: #464646; text-shadow: 0 0 5px White;}
.havo a:active {color: #B2F511;}

.stat {
border: 3px solid LightSlateGray;
border-radius: 20px 0 0 0;
margin: 5px auto;
background-color: Snow;
text-align: left;
}

.stat h1, .stat h2 {
font-size: 1.4em;
margin-top: 3px;
margin-left: 10px;
text-shadow: -4px 4px 3px #999999;
}

.stat h3{
font-size: 1.2em;
margin-top: 20px;
margin-left: 30px;
text-shadow: -4px 4px 3px #999999;
}

.stat ul {
list-style-image: url(../img/rsh.png);
padding-left: 20px;
list-style-position: outside;
text-align: justify;
line-height: 140%;
text-indent: 0.5em;
}

.pric li {text-align: left;}

.stat ul ul {
font-style: italic;
list-style-image: url(../img/noj.png);
margin-left: 10px;
margin-right: 10px;
}

.stat li {word-spacing: 2px; padding-top: 10px;}

.stat a {color: Black;
background-color: Silver;
border: 1px solid LightSlateGray;
border-radius: 20px 0 20px 0;
padding: 0 8px 0 8px;
}

.vnst {text-shadow: -1px 1px 2px White; white-space: nowrap;}

.stat a:hover {color: Silver; background-color: Black;}

.dva h3, .dva img {margin: 5px; font-size: 1.0em;}

.map{
border: 2px solid LightSlateGray;
border-radius: 10px;
margin: 8px;
padding: 8px;
}

.foto{
border: 1px solid LightSlateGray;
border-radius: 0 15px 0 15px;
margin: 2px;
padding: 1px;
}

figure {display: block; margin-top: 15px; margin-bottom: 30px;}

.rght {float: right; margin-left: 15px;}

figcaption {
font-family: Merriweather-Regular, Verdana, sans-serif;
color: Black;
text-shadow: -4px 4px 3px #999999;
}

.niz{
font-family: Merriweather-Regular, Verdana, sans-serif;
color: Black;
padding: 3px;
margin: 10px auto;
background-color: Snow;
width: 200px;
height:30px;
border: 2px solid LightSlateGray;
border-radius: 30px 0 30px 0;
}

@-webkit-keyframes fadeIn {
from {opacity: 1;}
40% {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeIn{
from {opacity: 1;}
40% {opacity: 0;}
to {opacity: 1;}
}

.havo h1 {
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 2s;
animation-name: fadeIn;
animation-duration: 2s;
animation-iteration-count: infinite;
}

.demo {
display: block;
float: right;
margin: 15px 10px 15px 10px;
}

.fixpos {
font-family: Merriweather-Regular, Verdana, sans-serif;
background-color: Red;
border-radius: 20px;
color: White;
font-size: 1.1em;
margin: 5px;
padding: 4px 10px;
opacity: 0.5;
cursor: pointer;
}

.fixpos:hover {opacity: 1;}

body, figure, .centr, .fotogal, .demo, #gal, #clos {text-align: center;}

#krug {text-align: center;}

.prld {display: none;}

.ftgl {
display: none;
position: fixed;
top: 0px;
left: 0px;
margin: 0;
padding: 2px;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.95);
text-align: center;
}

#clos {
font-family: Merriweather-Regular, Verdana, sans-serif;
position: fixed;
top: 30px;
left: 30px;
margin: 0;
padding: 3px;
height: 25px;
width: 80px;
background-color: Red;
border-radius: 20px;
color: White;
cursor: pointer;
opacity: 0.3;
}

#clos:hover{opacity: 1;}

#ftgl_cont {height: 100%; width: 100%;}

#ftgl_foto, #ftgl_foto1{
margin-top: 0px; 
object-fit: contain;
object-position: 50% 50%;
height: 100%;
width: auto;
}

.dg1none {display: none;}

.dg1, .dg2 {display: inline-block;}

.fprew{
width: 100%;
height: 100%;
padding: 1px;
object-fit: contain;
object-position: 50% 50%;
cursor: pointer;
box-shadow: 0 0 8px black;
border: 2px solid LightSlateGray;
border-radius: 50%;
}

.fprew:hover{box-shadow: 0 0 11px black;}

#ms12::after {content: "Мужская стрижка от 500 рублей";}
#js12::after {content: "Женская стрижка от 800 рублей";}
#ukl2::after {content: "Укладка от 1000 рублей";}
#rek2::after {content: "Реконструкция волос от 3500 рублей";}
#okr2::after {content: "Окрашивание от 3500 рублей";}
#slo2::after {content: "Сложное окрашивание от 8000 рублей";}

#video_cont{min-height: 320px; height: 100%;}

#vidgl{
object-fit: contain;
object-position: 50% 50%;
height: 100%;
}

.titul {
font-family: Merriweather-Black, Verdana, sans-serif;
color: Snow;
line-height: 120%;
text-align: left;
text-indent: 0em;
font-size: 1.5em;
letter-spacing: -1px;
padding: 0;
margin: 0;
text-shadow: Black 0 0 4px;
}

.label {
position: relative;
margin: 0;
padding: 0;
height: 75px;
width: 200px;
}