/*-- сброс --*/
body,header,nav,main,article,section,aside,footer,h1,h2,h3,h4,h5,h6,div,span,p,dl,dt,dd,ol,ul,li,pre,button,a,b
{ 
margin:0;
padding:0;
border:0;
box-sizing:border-box;
outline:0;
list-style:none;
font-size:1rem;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-family:'Arial Narrow', sans-serif;
vertical-align:baseline;
line-height:1;
text-overflow:ellipsis;
text-decoration:none;
text-shadow:0px 0px 1px hsla(0,0%,0%,.4);
color:hsla(0,0%,0%,1);
background:transparent;
}

/*-- по умолчанию --*/
header, main, footer
{
display:block;
max-width:calc(1000px) !important;
margin:0 auto;
overflow:hidden;
}
h1, h2, h3, h4, h5
{
text-align:center;
margin:0 auto;
}
img, object, video, embed, canvas, figure
{
max-width:100%;
display:block;
position:relative;
}
footer
{
clear:both;
}										
a
{
text-decoration:none;
color:hsla(0,0%,0%,1);
}
ol, ul
{
list-style:none;
}
:focus{outline:0;}
/*--------------------start--------------------*/
.electric
{
width:calc(100%);
height:calc(100vh);

background:url("img/f_b-e.jpg") no-repeat center center fixed, hsla(0,0%,0%,1);
background-size:100% 100%;
}

/*-- хедер  --*/
.electric_header
{
padding-top:10px;

background:hsla(56,98%,55%,1);
box-shadow:inset hsla(46,98%,20%,1) -6px -6px 28px, inset hsla(56,98%,30%,1) 0px 6px 28px;

display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.header-h1
{
margin:initial;

text-shadow:-3px 0px 0px hsla(0,0%,100%,1), -4px 0px 0px hsla(0,0%,0%,1);
letter-spacing:4px;
font:700 3.4rem/1 'Arial Narrow',sans-serif;
color:hsla(0,0%,0%,1);

flex:1 0 auto;
}
.header_a
{
padding-top:5px;

text-align:center;

background:url("img/header_a-b.png") no-repeat 15% center hsla(0,0%,0%,0);
background-size:contain;

flex:1 0 auto;
}
.header_a-b
{
display:block;

font:normal 2rem/1 'Arial Narrow',sans-serif;
text-shadow:none;
color:hsla(0,0%,0%,1);
}
.header_a-b:hover
{
text-decoration:underline;
}
.header_a-i
{
display:block;

font:100 1.2rem/1  'Times New Roman', serif;
text-shadow:none;
color:hsla(240,100%,50%,1);

cursor:default;
}
/*--- заказы ---*/
.header_ul
{
width:calc(100%);
padding:5px;

background:url("img/h_ul.png") no-repeat 80% center hsla(0,0%,0%,0);
background-size:8rem;
}
.header_ul-li
{
width:calc(100%);
height:calc(3rem);
margin-bottom:2px;

font:italic 600 1.2rem/1 'Times New Roman', serif;
color:hsla(0,0%,10%,1);
text-indent:3.5rem;
line-height:4rem;

text-shadow:0px 0px 0px hsla(0,0%,0%,0);
}
.header_ul-li:hover
{
cursor:pointer;
text-decoration:underline;
}
.header_ul-li:nth-child(1)
{
background:url("img/h_t.png") no-repeat left center hsla(0,0%,0%,0);
background-size:contain;
}
.header_ul-li:nth-child(2)
{
background:url("img/h_m.png") no-repeat left center hsla(0,0%,0%,0);
background-size:contain;
}
.header_ul-li:nth-child(3)
{
background:url("img/h_em.png") no-repeat left center hsla(0,0%,0%,0);
background-size:contain;
}
/*--== заказ_modal ==--*/
.variant
{
position:absolute;
top:0;
left:0;
width:calc(100%);
height:calc(100vh + 20px);

background:hsla(0,0%,0%,.9);
z-index:999;
}
.variant > .header_a
{
position:relative;
top:calc(20vh);
display:block;
margin:0 auto;

background:url("img/header_a-b.png") no-repeat left center hsla(56,98%,55%,1);
background-size:contain;
}
.variant > .header_ul
{
position:relative;
top:calc(20vh);
display:block;
margin:0 auto;

background:url("img/h_ul.png") no-repeat 80% center hsla(56,98%,55%,1);
background-size:8rem;
z-index:999;
}
/*--== заказ_ссылка ==--*/
.docket
{
position:fixed;
top:calc((100vh/2) + 3rem);
left:calc(100vw - 3.5rem);
width:calc(3rem);
height:calc(3rem);
padding:5px;
border-radius:5% 5% 0 0;
box-shadow:inset -2px -2px 20px hsla(0,0%,0%,1), 2px 2px 5px hsla(0,0%,0%,1), inset 0px 0px 2px hsla(0,0%,0%,1);

background:url("img/header_a-b.png") no-repeat bottom left,url("img/h_s.png") no-repeat bottom right, url("img/h_em.png") no-repeat center center, hsla(56,98%,55%,1);
background-size:40%, 35%, 105%;
z-index:99;
}
.docket:hover
{
border-radius:5px;
box-shadow:inset -2px -2px 15px hsla(240,100%,30%,.6), 2px 2px 20px hsla(0,0%,100%,1), inset 2px 2px 15px hsla(240,100%,30%,.6);
cursor:pointer;
}

/*--- header_correction ---*/
@media screen and (min-width:1000px) {
.docket
{
top:calc((100vh/2) + 5.5rem);
left:calc(100vw - (((100vw - 1000px)/2) + 7rem));
width:calc(5rem);
height:calc(5rem);
}
}

@media screen and (max-width:840px) {
.header_a
{
background:url("img/header_a-b.png") no-repeat 3% center hsla(0,0%,0%,0);
background-size:contain;
}
.header_a-b
{
font:normal 1.6rem/1 'Arial Narrow',sans-serif;
text-indent:3rem;
}
.header_a-i
{
font:100 1rem/1  'Times New Roman', serif;
text-indent:3rem;
}

}

@media screen and (max-width:540px) {
.electric_header
{
flex-direction:column;
flex-wrap:nowrap;
justify-content:center;
}
.header_a
{
background:url("img/header_a-b.png") no-repeat 2% center hsla(0,0%,0%,0);
background-size:contain;
}
.header_a-b
{
font:normal 1.6rem/1 'Arial Narrow',sans-serif;
}
.header_a-i
{
font:100 1rem/1  'Times New Roman', serif;
}
.header_ul
{
background:url("img/h_ul.png") no-repeat 95% center hsla(0,0%,0%,0);
background-size:6rem;
}
.variant > .header_ul
{
background:url("img/h_ul.png") no-repeat 95% center hsla(56,98%,55%,1);
background-size:6rem;
}
.header_ul-li
{
height:calc(2.5rem);
margin-bottom:1px;

font:italic 600 1rem/1 'Times New Roman', serif;
text-indent:3rem;
line-height:3.5rem;
}
}
@media screen and (max-width:490px) {
.variant > .header_a 
{
text-align:left;
text-indent:3rem;
}
}
/*--end---*/

/*-- контент --*/
.electric_main
{
min-height:calc(100vh - 6rem);
background:hsla(0,100%,50%,1);
}
/*---предупреждение---*/
.electric_aside
{
margin:2px auto;
padding:5px;

background:hsla(0,0%,10%,1);
box-shadow:inset hsla(0,0%,100%,1) -3px -3px 8px, inset hsla(0,0%,100%,1) 3px 3px 8px;
}
.aside-h4
{
width:calc(100%);
height:calc(3rem);

font:italic 600 1.4rem/1 'Times New Roman', serif;
color:hsla(0,0%,100%,1);
letter-spacing:1px;
line-height:3rem;

background:url("img/aside_h-4.png") no-repeat left center, url("img/aside_f-h4.png") no-repeat right center, hsla(0,0%,10%,1);
background-size:contain, contain;

transition:all .2s linear 0s;
}
.aside-h4:hover
{
color:hsla(0,100%,50%,1);
cursor:pointer;

background:url("img/aside_h4.png") no-repeat left center, url("img/aside_f1-h4.png") no-repeat right center, hsla(0,0%,10%,1);;
background-size:contain, contain;
}
/*--окно_предупреждение--*/
.modal
{
position:absolute;
top:0;
left:0;
width:calc(100%);
height:calc(100vh + 20px);

background:hsla(0,0%,0%,.9);
z-index:999;
}
/*--кнопка_закрыть--*/
.modal_close, .variant > .modal_close
{
position:absolute;
top:calc(20vh - 2rem);
left:calc(100vw - 4rem);
width:calc(4rem);
height:calc(4rem);
padding:.5%;
border-radius:50%;
background:hsla(0,100%,50%,1);
box-shadow: inset -2px -2px 20px hsla(0,0%,0%,1), 2px 2px 5px hsla(0,0%,0%,1), inset 0px 0px 2px hsla(0,0%,0%,1);
cursor:pointer;
display:none;
z-index:9999;
}
.modal_close:after 
{
background:hsla(0,0%,90%,.6);
content: '';
height: 45%;
width: 8%;
position: absolute;
top:4%;
left:15%;
border-radius:50%;
transform:rotate(40deg);
}
.close
{
display:block;
margin:0;
padding:0;
text-shadow:none;
font:700 2.8rem/1 'Arial Narrow',sans-serif;
color:hsla(0,0%,100%,1);
text-shadow:1px 1px 1px hsla(0,0%,0%,.6),-1px -1px 1px hsla(0,0%,0%,.6);
transition:all .4s linear 0s;
}
.close:hover
{
color:hsla(0,100%,20%,1);
text-shadow:-1px -1px 1px hsla(0,0%,100%,.6),1px 1px 1px hsla(0,0%,100%,.6);
}
.modal_div
{ border:1px solid hsla(220,100%,70%,1);
width:calc(100vw - 4rem);
padding:1rem;
margin:0 auto;
margin-top:calc(20vh);
background:hsla(0,0%,100%,1);
display:none;
}
.modal_div-strong
{
font:italic normal 1.6rem/1.4 'Arial Narrow',sans-serif;
color:hsla(0,100%,50%,1);
}
.modal_div-b
{
font:700 1rem/1 'Times New Roman',serif;
color:hsla(0,0%,20%,1);
}
/*--- предупреждение_correction ---*/
@media screen and (min-width:1000px) {
.modal_close, .variant .modal_close
{
top:calc(20vh - 2.5rem);
left:calc(100vw - (((100vw - 1000px)/2) + 2.5rem));
width:calc(5rem);
height:calc(5rem);
}
.modal_div
{
width:calc(1000px);
}
}
@media screen and (max-width:540px) {
.aside-h4
{
letter-spacing:0px;
}
}
/*-- end --*/

/*---навигация---*/
.electric_nav
{
position:fixed;

background: hsla(0,0%,0%,0);
z-index:99;
/*overflow:hidden;*/
}
.nav_dl
{
width:calc(11rem);
}
.nav_dl-dt
{
width:calc(100%);
max-height:calc(3rem);
position:relative;

background:hsla(0,0%,0%,0);
}
.dt-strong
{
border-left:1px solid hsla(0,0%,100%,1);
display:block;
position:relative;
width:calc(8rem);

font:normal 1.8rem/2 'Times New Roman',serif;
text-align:center;
color:hsla(0,0%,100%,1);
background:hsla(12,74%,33%,1);
box-shadow:.1rem .1rem 2rem hsla(0,0%,0%,.6)inset,-.1rem -.1rem 2rem hsla(0,0%,0%,.6)inset,.1rem .1rem 1rem hsla(0,0%,10%,1);

transition:all .6s linear 0s;
}
.dt-strong:before
{
content:"";
position:absolute;
top:0;
left:8rem;
width: 0;
height:0;
border-left:calc(40px) solid hsla(38,48%,67%,1);
border-top:calc(30px) solid transparent;
border-bottom:calc(28px) solid transparent;
border-right:calc(0px) solid  transparent;
}
.dt-strong:after
{
content:"";
position:absolute;
top:15px;
left:calc(8rem + 20px);
width: 0;
height:0;
border-left:calc(20px) solid hsla(0,0%,0%,1);
border-top:calc(15px) solid transparent;
border-bottom:calc(15px) solid transparent;
border-right:calc(0px) solid  transparent;
}
.dt-strong:hover
{
cursor:pointer;
text-decoration:underline;
}
.nav_dl-dd
{
width:calc(8rem);
height:calc(0rem);
border-left:1px solid hsla(0,0%,100%,1);
box-shadow:4px 4px 14px hsla(0,0%,0%,1);

font:italic 600 1.4rem/1.4 'Arial Narrow', sans-serif;
text-indent:1rem;
color:hsla(0,0%,10%,1);
background:
url("img/f_dl.jpg") no-repeat center center,
hsla(0,0%,0%,0);
background-size:8rem 2rem;

overflow:hidden;
transition:height .6s linear 0s;
}
.nav_dl-dd:hover
{
cursor:pointer;
text-decoration:underline;
}

/*--секции--*/
.electric_section
{
width:calc(100%);
min-height:calc(100vh - 3rem);
margin:0 auto;

background: hsla(0,0%,100%,1);
overflow:hidden;
}
.section-h2
{ 
width:calc(100%);
min-height:calc(3rem);

font:normal 1.6rem/2 'Arial Narrow', sans-serif;
text-indent:10rem;
color:hsla(0,0%,100%,1);
background:hsla(240,100%,50%,1);
box-shadow:inset hsla(240,90%,20%,1) 0px 3px 18px,0rem .4rem 1rem hsla(0,0%,0%,1);
}
/*--виды_услуг--*/
.ul
{
display:block;
border:1px solid hsla(0,0%,80%,1);
width:calc(100% - 10rem);
margin-top:.4rem;
margin-left:9.5rem;
margin-bottom:.4rem;
padding:1rem;

box-shadow:hsla(0,0%,0%,.6) -4px 4px 8px;
background:hsla(0,0%,100%,.8);
transition:all .2s linear 0s;
}
.ul:hover
{
background:hsla(0,0%,100%,1);
}
.attention
{
font:600 1rem/1 'Arial Narrow', sans-serif;
color:hsla(0,0%,0%,1);
}
.remark
{
font:italic normal 1rem/1 'Arial Narrow', sans-serif;
color:hsla(0,0%,10%,1);
}
.description
{

}

/*--- ul_correction ---*/
@media screen and (max-width:540px) {
.ul
{
width:calc(100% - 3rem);
margin-left:3rem;
}
}
/*-- end --*/

/*--монтаж--*/
.mounting
{
background:url("img/f_s1.png") no-repeat center center hsla(0,0%,30%,1);
}
.mounting_ul
{ 

}
.mounting_ul-li
{

}
/*--ремонт--*/
.repairs
{
background:url("img/f_s2.png") no-repeat center bottom hsla(0,0%,30%,1);
}
.repairs_ul
{

}
.repairs_ul-li
{

}
/*--замена--*/
.change
{
background:url("img/f_s3.png") no-repeat center bottom hsla(0,0%,30%,1);
}
.change_ul-li
{

}
.change_ul-li
{

}
.change_ul-li
{

}
/*--подключение--*/
.launch
{
background:url("img/f_s4.png") no-repeat center bottom hsla(0,0%,50%,1);
}
.launch_ul
{

}
.launch_ul-li
{

}
/*--преимущества--*/
.advantage
{
background:url("img/f_s5.png") no-repeat center bottom hsla(0,0%,20%,1);
}

.advantage_ul
{

}
.advantage_ul-li
{

}
/*---correction---*/
@media screen and (orientation:landscape) {
.electric_section
{
background-size:70% 80%;
}
.mounting
{
background-size:100% 100%;
}
.repairs
{
background-size:40% 80%;
}
}
@media screen and (orientation:portrait) {
.electric_section
{ 
background-size:100% 70%;
}
.mounting
{
background-size:100% 100%;
}
.repairs
{
background-size:70% 60%;
}
}
/*--end---*/

/*-- где купить --*/
.buy
{
background-color:hsla(0,100%,25%,1);
}

#container 
{border:1px solid hsla(0,0%,0%,0);
width:calc(70%);
min-height:calc(100vh - 3rem);
margin:0 auto;
background:url("img/f_f1.png") no-repeat center center hsla(0,0%,0%,0);
background-size:80%;
perspective:800px;
perspective-origin:50% 225px;
}   
#shape
{
position:relative;
margin: 0 auto;
margin-top:calc(25vh);
width:calc(240px);
height:calc(140px);

transform-style:preserve-3d;
}
.plane 
{
position:absolute;
width:calc(240px);
height:calc(140px);
border: 1px solid white;
border-radius:12px;
box-sizing:border-box;

font:italic normal 1rem/1 sans-serif;
color:hsla(0,0%,0%,1);
text-align: center;

background-color: rgba(255, 255, 255, 0.6);

transition:transform 2s, opacity 2s;
backface-visibility:hidden;
}
    
#shape
{
animation:spin 24s infinite linear;
}

@keyframes spin
{
from
{transform:rotateY(0);
}
to
{
transform:rotateY(-360deg);
}
}

/* ---------- ring styles ------------- */
.one
{
transform:translateZ(280px);

background:url("shop/shop_1.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.two
{
transform:rotateY(51deg) translateZ(280px);

background:url("shop/shop_2.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.three
{
transform:rotateY(104deg) translateZ(280px);

background:url("shop/shop_3.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.four
{
transform:rotateY(158deg) translateZ(280px);

background:url("shop/shop_4.png") no-repeat center center hsla(59,99%,46%,1);
background-size:100% 100%;
}
.five
{
transform:rotateY(210deg) translateZ(280px);

background:url("shop/shop_5.jpg") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.six
{
transform:rotateY(260deg) translateZ(280px);

background:url("shop/shop_6.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.seven
{
transform:rotateY(310deg) translateZ(280px);

background:url("shop/shop_7.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
/*.eight
{
transform:rotateY(210deg) translateZ(280px);

background:url("shop/shop_8.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.nine
{
transform:rotateY(-120deg) translateZ(280px);

background:url("shop/shop_9.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.ten
{
transform:rotateY(-90deg) translateZ(280px);

background:url("shop/shop_10.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.eleven
{
transform:rotateY(300deg) translateZ(280px);

background:url("shop/shop_11.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}
.twelve
{
transform:rotateY(330deg) translateZ(280px);

background:url("shop/shop_12.png") no-repeat center center hsla(0,0%,100%,1);
background-size:100% 100%;
}*/
.shop
{
display:block;
width:calc(100%);
height:calc(100%);
}

/*--  футер --*/
.electric_footer
{
min-height:calc(100vh);

background-color:hsla(240,100%,25%,1);
}
.footer-h5
{
width:calc(100%);
min-height:3rem;

font:normal 1.6rem/2 'Agency FB', sans-serif;
color:hsla(0,0%,100%,1);

box-shadow:inset hsla(120,100%,10%,1) 0px 3px 18px,0rem .4rem 1rem hsla(0,0%,0%,1);
background:hsla(120,100%,18%,1);
}

@media screen and (max-width:690px){

}