@import "https://salonsonya.ru/style/font-awesome.css";
@import "https://salonsonya.ru/style/fonts.css";
@import "script.css";

* { font-family: 'Exo2', Verdana, Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box;}

html { font-size: 100%;}
html, body, main, article, header { border: 0; outline: 0;}
html, body { background-color: #5d5545;}
h1, h2, h3, h4, h5, h6 { text-align: center; padding: 10px 0 0; color: #c5df26;}
h2 { font-weight: 500; font-size: 1.6em; line-height: 25px;}
h3 { font-style: italic; font-weight: 500; font-size: 1.4em; line-height: 25px; text-decoration: underline; text-decoration-style: dotted;}
h4 { font-weight: 500; font-size: 1.1em; line-height: 15px; margin:0;}
h5 { font-style: italic; font-weight: 100; font-size: 0.9em;}
hr { margin: 0 20px 20px;} 

a, a:visited{ color: #c5df26; text-decoration: none;}
a:hover, a:active { color: #b9b9b9; text-decoration: underline; text-decoration-style: dotted;}
a[name] { padding: 0; margin-top: 50px; display: block;}

table { margin: 10px auto;}
table td { vertical-align: middle;}

#h_big, #h_mob, h1 {display: none}

/* Header BIG*/
#h_big { display: block; height: 600px; width: 100%; min-width: 800px; background: url('pic/bg_h.png') left top no-repeat; }
#h_big  div { margin-left: 400px; color: #fff; font-size: 1.3em;  text-align: right; padding-right: 200px;}
#h_big  div img {margin-bottom: 10px;}
#h_big  div p { display: block; margin-top: 5px;}
#h_big  div p svg, #h_big  div p i { display: block-inline; position: relative; top: 5px; margin-left: 10px; font-size: 1.4em; color: #c5df26;}
#h_big  div p svg { top: 10px;}
#h_big  .h_adr { font-size: 1.5em; margin-top: 5px;}
#h_big  .h_adr i { top: 0;}

#h_name { position: absolute; top: 253px; left: 250px; font-size: 2em; color: #000; }
#h_name  span{ border-left: solid 2px #c5df26; color: #fff; font-size: 0.9em; font-weight: normal; margin-left: 15px; padding-left: 20px;}
#h_serv { position: absolute; top: 330px; left: 220px; font-size: 1.4em; color: #fff; line-height: 37px; font-weight: normal;}
#h_serv i { display: block-inline; position: relative; top: 5px; margin-left: 10px; font-size: 1.3em; color: #c5df26;}

/* Header MOBILE*/
#h_mob { height: 460px; width: 100%; min-width: 360px; background: url('pic/bg_m.png') left top no-repeat; background-color: #5d5445;}
#h_mob  div { color: #fff; font-size: 1em;  text-align: right; padding-right: 10px;}
#h_mob  div img { margin: 10px; width: 170px;}
#h_mob  div b {  display: inline-block; font-size: 2.3em;  text-align: center; padding: 10px;}
#h_mob  div b a { padding: 0 3px; width: 44px; height:44px; vertical-align: top; text-align: center;}
#h_mob  div b a * { display: inline-block; vertical-align: top;}
#h_mob  div p { font-size: 1.5em; margin-right: 20px;}
#h_mob  div p i { display: block-inline; position: relative; top: 2px; font-size: 1.3em; color: #fff; margin-right: 5px;}

#h_name_m { position: absolute; top: 180px; left: 75px; font-size: 1.2em; color: #000; }
#h_name_m span { display: block; border-top: solid 2px #c5df26; color: #fff; font-size: 0.9em; font-weight: normal; padding-left: 20px;}
#h_serv_m { position: absolute; top: 230px; left: 100px; }
#h_serv_m span { display: block; margin-top:7px; line-height: 15px; font-weight: normal; font-size: 0.9em; color: #fff;}
#h_serv_m span:before { font-size: 1.1em; color: #c5df26; font-family: fontAwesome; content: "\f046"; position: absolute; left:-20px;}


/* Menu */
#menu {
display: block;
position: sticky;
top:0;
left: 0;
width: 100%;
padding: 10px;
text-align: center;
border: solid 3px #fff;
border-width: 3px 0 3px 0;
background-color: #383838;
box-shadow: 0 8px 8px -5px #000;
z-index: 1;
}
#menu  b { white-space: nowrap; color: #c5df26; font-size: 1.4em; margin: 15px 0;}
#menu  b.c { margin: 15px 40px;}
#menu  b i { color: #fff; font-size: 1.5em; padding-right: 5px;}

/* Main content*/

/* BOX maker */
div[id*=box]  { display: none; width: 100%; padding: 10px; text-align: center;}
div[id*=box]  p { color: #fff; font-size: 1.5em; margin: 10px 0 20px;}
div[id*=box]  img { width: 100%; max-width:810px; border: solid 3px #fff; border-radius: 10px;}

div:target { display: block; padding-bottom: 60px;}

table.tab_price { width: 100%; max-width: 750px; line-height: 23px; text-align: center; color: #fff;}
table.tab_price { border-collapse: collapse; box-shadow: 0 0 5px rgba(255,255,255,0.8);}
table.tab_price, table.tab_price tr, table.tab_price td, table.tab_price th{ border: 2px solid #aca7a6;}
table.tab_price td { padding: 3px;}
table.tab_price td:first-child{ color: #fff; font-weight: bold;  font-size: 1em; text-align: left; padding-left: 5px;}
table.tab_price tr.t_tit, table.tab_price tr.t_tit td { background: #383838; color: #fff;}
table.tab_price tr.t_tit h3, table.tab_price tr.t_tit h4 { padding: 6px 0; margin: 0; }
table.tab_price tr.t_tit h3 { font-weight: bold;}
table.tab_price th { font-size: 0.9em; padding: 0 0 5px; line-height: 20px;}

table.tab_link { width: 10%; line-height: 25px; color: #fff; font-weight: bold; margin-top: 10px;}
table.tab_link td { padding: 10px;}
table.tab_link td:first-child { color: #fff;  font-size: 2.5em; text-align: right;}
table.tab_link td:last-child { font-size: 1.5em; text-align: left; padding-left: 10px;}
table.tab_link tr.t_tit td { font-weight: bold; padding: 30px 0 10px; font-size: 1em;}
table.tab_link tr.t_tit td i { font-size: 1.2em; margin-right: 10px;}

#box2 p i { color: #c5df26; font-size: 1.5em; margin-right: 15px;}
/* ---- MEDIA Queries ----------------------------------- */

@media screen and (max-width: 1450px) { /* Full version */
 #h_big  div { padding-right: 200px;}
 #h_big { display: block;}
}

@media screen and (max-width: 1450px) and (min-width: 1350px) { /* Full version */
 #h_big  div { padding-right: 100px;}
 #h_big { display: block;}
}

@media screen and (max-width: 1350px) and (min-width: 1200px) { /* Full version */
 #h_big  div { padding-right: 50px;}
 #h_big { display: block;}
}

@media screen and (max-width: 1200px) and (min-width: 1160px) { /* Full version */
 #h_big  div { padding-right: 20px;}
 #h_big { display: block;}
}

@media screen and (max-width: 1160px) and (min-width: 1100px) { /* Full version */
 #h_big  div { padding-right: 20px; font-size: 1.1em;}
 #h_big  div img {margin-bottom: 25px;}
 #h_big { display: block;}
}

@media screen and (max-width: 1100px) and (min-width: 900px) { /* Full version */
 #h_big  div { padding-right: 20px; font-size: 0.9em; margin-left: 350px;}
 #h_big  div img {margin-bottom: 20px; width: 370px;}
 #h_big  div p {margin-top: 8px;}
 #h_big  div p svg, #h_big  div p i { font-size: 1.9em;}
 #h_big  .h_adr { margin-top: 5px;}
 #h_big { display: block;}
}

@media screen and (max-width: 900px) and (min-width: 800px) { /* Full version > 800px */
 #h_big  div { padding-right: 20px; font-size: 0.7em; margin-left: 350px;}
 #h_big  div img {margin-bottom: 20px; width: 370px;}
 #h_big  div p {margin-top: 15px;}
 #h_big  div p svg, #h_big  div p i { font-size: 1.9em;}
 #h_big  .h_adr { margin-top: 10px;}
 #h_big { display: block;}
}

@media screen and (max-width: 800px) { /* Mobile version */
 #main_content { margin: 70px 0 -10px 0;}
 #h_mob { display: block;}
 #h_big { display: none !important;}
 
 #menu  b { font-size: 1.1em;}
 #menu  b.c { margin: 5px 10px;}
 #menu  b i { font-size: 1.2em; padding-right: 3px;}
div[id*=box]  p { font-size: 1.1em;}
 #box2 p i { font-size: 1.3em; margin-right: 5px;}
}