html, body{margin:0; padding:0; width:100%; height:100%; background-color: transparent;}
html{overflow-y: scroll !important; padding: 0!important;}
body{
    z-index:1;
    font-family: 'MyriadProRegular', sans-serif;

}
a,a:visited{ color: #ff007a;}

.myr-bold{ font-family: 'MyriadProBold';}
.myr-regular{ font-family: 'MyriadProRegular';}
.txt-shadow{ text-shadow: 1px 0 1px #000000;}

a.bordered{ border:1px solid; }
a.bordered-white{ border-color: #ffffff; }
.back-shadow{ background: rgba(0,0,0,0.5);
    -webkit-transition: all 1000ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition:         all 1000ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.back-shadow:hover{ background: rgba(0,0,0,0.8);
    -webkit-transition: all 1000ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition:         all 1000ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}


/** пофиксенные элементы **/
.fixedElements .earphones{
    position: fixed; top: 2rem; right: 12%; background: url(/assets/images/earphones.png) 0 0 no-repeat; 
    background-size: contain; cursor: pointer;
    width: 3rem; height: 3rem; z-index: 4;
    border-radius: 50%;
    animation: earphone-rotate 8s ease-in-out infinite;
}
.fixedElements .earphones:after{ content:'';
    position: fixed; width:3rem; height:3rem;
/*    animation: earphones 3s ease-in-out infinite;*/
    border-radius: 50%;

}
.fixedElements .earphones:hover{
    animation-duration: 2s;
}

.fixedElements .earphones:hover:after{
    animation-duration: 1s;
}



@keyframes  earphone-rotate{
    0%, 20%, 50%, 80%, 100%{ transform: rotatez(0);}
    35%{ transform: rotatez(45deg);}
    65%{ transform: rotatez(-45deg);}
}
@keyframes earphones {
    /*0% {box-shadow: 0 0 8px 6px rgba(23,167,167, 0), 0 0 0px 0px rgba(0,0,0,0), 0 0 0px 0px rgba(23,167,167, 0);}*/
    0% {box-shadow: 0 0 8px 6px #DA1E6B, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px #DA1E6B;}
    100% {box-shadow: 0 0 8px 6px rgba(23,167,167, 0), 0 0 0px 40px rgba(0,0,0,0), 0 0 0px 40px rgba(23,167,167, 0);}
}
.fixedElements-akciya{
    background: transparent; color: #ff007a!important;
    position: fixed; right: 12%;
    border: 3px solid #ff007a;
    border-radius: 20px/50%;
    top: 6rem;
    height: 3rem;
    width: 7rem;
    z-index:4;
    line-height: 1em;
    text-align: center;
    font-family: 'MyriadProBold';
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.3em;
}

.fixedElements .vs{
    position: fixed; top: 2rem; left: 12%; background: url(/assets/images/VS.png) 0 0 no-repeat; background-size: contain;
    width: 3rem; height:3rem; z-index: 4;
}

.fixedElements .phoneAtTop, .fixedElements .mailAtTop {
    position: fixed;
    font-family: 'MyriadProBold';
    z-index:4;
    top: 2rem;  text-decoration: none; font-size: 1.5rem;
}
.fixedElements .mailAtTop{
    top: 3.5rem;
}

.fixedElements .menu-button{
    position: fixed; bottom: 2rem;  width: 3rem; height:3rem; font-size:2rem; text-decoration: none; z-index: 4;
    line-height: 3rem; text-align:center;
     border-radius: 50%; border: 0.2rem solid #ff007a;
}

.fixedElements .earphones, .fixedElements .vs, .fixedElements .menu-button {top: 2rem;}
.fixedElements .filter-button{ right: 9%;}
.fixedElements .vs { left: 9%;}
/*.fixedElements .menu-button{ right: calc(9% + 4rem); }
.fixedElements .earphones{ right: 9%;}
.fixedElements-akciya {right: 9%; }
*/
.fixedElements .menu-button{ right: 9%; } 
.fixedElements .phoneAtTop, .fixedElements .mailAtTop{ right: calc(9% + 4rem); }
/* фиксенные заголовки */

.fixedElements .headers-txt{
    position:fixed; top:0; left: 0; width:100%;
    text-align: center; color: #ffffff; text-transform: uppercase;
    font-size: 1rem;/*0.75rem; font-family: MyriadProBold;*/ letter-spacing: 0.2rem;
    background-image: linear-gradient(to bottom, #000000, transparent);
    z-index: 3;
    height:10rem;
}

.fixedElements .headers-txt-container{
    display: inline-block; 
    position: relative;
}

.fixedElements .headers-txt a.white{
    cursor:pointer; color: #ffffff!important; text-decoration: none;
}
.fixedElements .headers-txt a.white:hover{
    text-decoration-color: rgba(255,255,255,0.5);
    text-decoration-line: underline;
    text-decoration-style: solid;
}
.headers-txt .headers-txt-logo{
	
}

.fixedElements .headers-art{
    position:fixed; top: 38vh; left: 0; width:100%;
    text-align: center; color: #ffffff; text-transform: uppercase;
    font-family: 'MyriadProBold';
    font-size:3.125rem;
    z-index: 3;
}
.fixedElements .headers-art.small-header {
    font-size: 1rem;
    top: 5rem;
    cursor: pointer;
}
.fixedElements .headers-art.big-header{
    font-size:3.125rem; top:34vh;
}
.fixedElements .headers-virtu{
    position:fixed; 
    top:54vh; left: 0; right: 0; 
    margin: 0 auto;
    width: auto; 
    white-space: nowrap;
    text-align: center; color: #ffffff;
    font-family: "MyriadProCondRegular";
    font-size: 11rem;
    z-index: 3;
}
.headers-txt-logo{
    color: transparent
}
.fixedElements .headers-virtu.small-header, .fixedElements .headers-txt-container-virtu {
    position: absolute; 
    letter-space: 0.2rem;
    font-family: "MyriadProRegular", sans-serif;
    font-size: 1rem; top: 0;
    width: auto;
    left: 0;
    cursor: pointer;
    white-space: nowrap
}
.fixedElements .headers-virtu.small-header:after{ content: '.';}
.fixedElements .headers-virtu.big-header {
    font-size: 11rem; top: 50vh;
}
/*
.fixedElements .small-header, .fixedElements .big-header{
    -webkit-transition: all 700ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition:         all 700ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}
*/

.fixedElements .fullpage-arrow{ position: fixed; 
    bottom: 2rem; width: 2rem; 
    height:3rem; 
    background: url(/assets/images/icons/angle-triple-down.png) center no-repeat; background-size:contain;
    opacity: 0.8; 
    animation: fullpage-arrow linear 3s infinite;
    cursor: pointer;
    z-index:2;
}
.fixedElements .fullpage-arrow-1{
    left: calc(50% - 19%);
}

.fixedElements .fullpage-arrow-2{
    left: calc(50% + 19%);
}
/*
.fixedElements .fullpage-arrow:after{
    content: '\f103'; font-size: 4rem; font-weight:bold;  color: #ff007a; opacity: 0.8;
}

.fixedElements .fullpage-arrow.white:after{
    color: #ffffff; opacity: 1;
}
.fixedElements .fullpage-arrow.up:after{
    content: '\f102';
}
.fixedElements .fullpage-arrow:hover:after{
    opacity: 1;
}
*/
.fixedElements .fullpage-arrow.white{ 
    -webkit-filter: brightness(0) invert(1); 
    -moz-filter: brightness(0) invert(1); 
    -ms-filter: brightness(0) invert(1); 
    -o-filter: brightness(0) invert(1); 
    filter: brightness(0) invert(1); 
}
.fixedElements .fullpage-arrow.up{
    transform: rotatex(180deg);
}
.fixedElements .fullpage-arrow:hover{
    opacity: 1;
}

.fixedElements .fullpage-arrow.disabled { display: none; }

@keyframes fullpage-arrow{
    0%,70%, 80%, 90%, 100% { bottom: 2rem;}
    75%,85%,95%{ bottom:2.2rem;}
    
}

#steppermenu{
    position: fixed;
    bottom: 2rem;
    right: 9%;
    height: 22px; font-size:2rem; text-decoration: none; z-index: 4;
    margin: 0;
}
#steppermenu li{display: inline-block;
    height: 22px; width: 4px; margin-right: 4px; background: #ff007a;
}
#steppermenu li a{display: block; width:100%; height:100%;}
#steppermenu li.active{ background: #ffffff;}
/** menu **/

#offcanvas-left{
    overflow: hidden;

    background: rgba(0,0,0,0.9);
}
#offcanvas-left .close{
    position: absolute;
    right: calc(250% * 0.09);
    top: 2rem;
    width:3rem; height: 3rem;
    border-radius: 50%;
    border: 0.2rem solid #ff007a;
    line-height: 2.7rem;
}

/*
#offcanvas-left nav{text-align: center; position: relative; width:100%; height:100%;}
#offcanvas-left>ul{ position: absolute; top: 10vh; left:0; right:0; margin:  0 auto;}
#offcanvas-left nav a{ font-size: 1rem;}
#offcanvas-left nav>ul>li>a {color: white;
    text-transform: uppercase;
    font-size: 1.5rem; line-height: 1.75rem;
}
*/
#offcanvas-left nav{ position: relative; width:100%; height:100%; color: #ffffff; font-size: 1.1rem;}

#offcanvas-left nav a{ color: #ffffff; display:inline-block;}
#offcanvas-left nav  li{ padding-top:0.2rem;}
#offcanvas-left nav>ul>li{ padding-top:2rem;}
#offcanvas-left nav>ul>li>a, #offcanvas-left nav>ul>li>span {color: white;  text-transform: uppercase; }
#offcanvas-left nav ul ul li a:first-letter, #offcanvas-left nav ul ul li>span:first-letter{ color: #ff007a; letter-spacing:1px;}
#offcanvas-right .close,#offcanvas-left .close { font-size: 1.5rem!important; }
#offcanvas-left li.rootactive>a{ color:  #ff007a;}

#offcanvas-left nav.ver2{ padding-top: 1rem;}
#offcanvas-left nav.ver2>ul>li{ padding-top: 0.2rem;}
#offcanvas-left nav.ver2 li{display: block;}
#offcanvas-left nav.ver2 li:nth-of-type(4n), #offcanvas-left nav.ver2 li:nth-of-type(4n-1){
    text-align: right;
}
#offcanvas-left nav.ver2>ul>li>a, #offcanvas-left nav>ul>li>span{ text-transform: none;}
/** тело **/
/*
.wrapperScroll, .wrapperScroll>div, .wrapperScroll>div>div{ min-height:100vh; }
*/


#stepbody1 {
    background-color: #000000;
}
.webp #stepbody1 .step1-1 {
    background: url(/assets/images/bg/webp/1.webp) center no-repeat;
    background-size: cover;
}

.no-webp #stepbody1 .step1-1 {
    background: url(/assets/images/bg/1.jpg) center no-repeat;
    background-size: cover;
}

.webp #stepbody1 .step1-2 {
    background: url(/assets/images/bg/webp/1-2.webp) center no-repeat;
    background-size: cover;
}

.no-webp #stepbody1 .step1-2 {
    background: url(/assets/images/bg/1-2.jpg) center no-repeat;
    background-size: cover;
}


.webp #stepbody1 .step1-3 {
    background: url(/assets/images/bg/webp/1-3.webp) center no-repeat;
    background-size: cover;
}

.no-webp #stepbody1 .step1-3 {
    background: url(/assets/images/bg/1-3.jpg) center no-repeat;
    background-size: cover;
}

.webp #stepbody1 .step1-4 {
    background: url(/assets/images/bg/webp/1-4.webp) center no-repeat;
    background-size: cover;
}

.no-webp #stepbody1 .step1-4 {
    background: url(/assets/images/bg/1-4.jpg) center no-repeat;
    background-size: cover;
}

.webp #stepbody1 .step1-5 {
    background: url(/assets/images/bg/webp/pergola_9-rsz.webp) center no-repeat;
    background-size: cover;
}

.no-webp #stepbody1 .step1-5 {
    background: url(/assets/images/bg/pergola_9-rsz.jpg) center no-repeat;
    background-size: cover;
}

#stepbody1 .step1-6 {
    background: url(/assets/images/bg/webp/1-6.webp) center no-repeat;
    background-size: cover;
}

.no-webp #stepbody1 .step1-6 {
    background: url(/assets/images/bg/1-6.jpg) center no-repeat;
    background-size: cover;
}


.webp .wrapperScroll .step2{
    background:  url(/assets/images/bg/webp/1.webp) center no-repeat;
    background-size: cover;
}
.no-webp .wrapperScroll .step2{
    background:  url(/assets/images/bg/1.jpg) center no-repeat;
    background-size: cover;
}
.wrapperScroll .step2>div{
    background-color: rgba(0,0,0,0.7);
}


.wrapperScroll .step3{

    z-index:1;
    top: 100%;
}
.webp .wrapperScroll .step3{
    background: url(/assets/images/bg/webp/2.webp) center no-repeat;
    background-size: cover;
}
.no-webp .wrapperScroll .step3{
    background: url(/assets/images/bg/2.jpg) center no-repeat;
    background-size: cover;
}

.webp .wrapperScroll .step4{
    background: url(/assets/images/bg/webp/2.webp) center no-repeat;
    background-size: cover;

}
.no-webp .wrapperScroll .step4{
    background: url(/assets/images/bg/2.jpg) center no-repeat;
    background-size: cover;

}
.wrapperScroll .step4>div{
    background: rgba(0,0,0,0.7);
}

.webp .wrapperScroll .step5{
    background: url(/assets/images/bg/webp/3.webp) center no-repeat;
    background-size: cover;
    position:relative;
}

.no-webp .wrapperScroll .step5{
    background: url(/assets/images/bg/3.jpg) center no-repeat;
    background-size: cover;
    position:relative;
}


.wrapperScroll .step5:before{
    content: '';
    background: rgba(0,0,0,0.8);
    position:absolute;
    height:0.5rem; width:100%;
    left:0; 
    top:0; bottom:0;
    margin: auto 0;

}
.wrapperScroll .step5:after{
    content: '';
    background: rgba(0,0,0,0.8);
    position:absolute;
    height:100%; width: 0.5rem;
    left:0; right: 0;
    top:0;
    margin: 0 auto;
    z-index: 1;

}


.webp .wrapperScroll .step6{
    background: url(/assets/images/bg/webp/3.webp) center no-repeat;
    background-size: cover;
}


.no-webp .wrapperScroll .step6{
    background: url(/assets/images/bg/3.jpg) center no-repeat;
    background-size: cover;
}
.wrapperScroll .step6>div{
    background: rgba(0,0,0,0.6);
}
.webp .wrapperScroll .step7{
    background: url(/assets/images/bg/webp/4.webp) center no-repeat;
    background-size: cover;
}

.no-webp .wrapperScroll .step7{
    background: url(/assets/images/bg/4.jpg) center no-repeat;
    background-size: cover;
}

.wrapperScroll .step1 .step1-1-1, 
.wrapperScroll .step1 .step1-2-1, 
.wrapperScroll .step1 .step1-3-1, 
.wrapperScroll .step1 .step1-4-1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.wrapperScroll .step1 .step1-2-1{
    color: #ff007a;
}
.wrapperScroll .step1 .step1-1-2 a,.step1 .body>div.step-button a{
    display: inline-block;
    font-size:1.25rem; padding: 0.5rem 1rem;
}
.wrapperScroll .step1 .stepButton{ width: 200px; text-align: center;}
.wrapperScroll .step1 .stepButton:hover{ background: rgba(0,0,0,0.3);}

.wrapperScroll .step2{
    color: #ffffff;
}


/*.wrapperScroll .step1 .body>div.active{ display: block; opacity:1;}*/


.wrapperScroll .body{ width:76vw; margin:0 auto; }

/** step 1 **/
.stepSlide{ position: relative;}
.stepSlide .step1Text{ position: absolute; width:100%; left:0; bottom: 18vh; text-align: center; color:#ff007a;
    font-family: 'MyriadProBold';
    font-size:3.125rem;
}
.stepSlide .step1Text a {text-decoration: none;}
.step1-buttons{
    display: flex;
    position:absolute; z-index:2; bottom: 2vh; color: #ffffff; font-size: 1.25rem; text-transform: uppercase;
    width: 82%;
    left: 9%;
    justify-content: space-between;

}
/*
.stepButton{ position:absolute; z-index:2; bottom: 2vh; color: #ffffff; font-size: 1.25rem; text-transform: uppercase}
.stepButton-left{ left: 9%;}
.stepButton-right{ right: 9%;}
*/
.step2Text{ position: absolute; bottom: 13vh; left: 0; width:100%; z-index:2; text-align: center;  color:#ff007a;
	font-family: 'MyriadProBold';
/*	font-size: 2.5rem;*/
        font-size:3.125rem;
    }


/** step 2 **/
.step2 .body{ padding: 22vh 0 10vh; font-size: 2.5vh;}

.step2 .centerColumn{ position: relative;}
.step2 .centerColumn:before, .step2 .centerColumn:after{ content: ''; position: absolute;
    left:0; right: 0; margin: 0 auto;
    background: rgba(255,255,255,0.5);
    width:0.2rem;
    height: 20vh;
}
.step2 .centerColumn:before{ bottom: 115%; ;}
.step2 .centerColumn:after{ top: 115%;}
.step2-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 9%; row-gap: 1rem;
}
@media (max-width: 768px){
    .step2-grid {
	grid-template-columns: 1fr;
    }
    .step2-grid .perenos{
	font-size: 1rem;
    }
    .step2-grid-sm-order-1{ order: 1}
    .step2-grid-sm-order-2{ order: 2}
    .step2-grid-sm-order-3{ order: 3}
    .step2-grid-sm-order-4{ order: 4}
    .step2-grid-sm-order-5{ order: 5}
    .step2-grid-sm-order-6{ order: 6}
    .step2-grid-sm-order-7{ order: 7}
    .step2-grid-sm-order-8{ order: 8}
    .step2-grid-sm-order-9{ order: 9}
}

/** step 3 **/
.step3 .body{ padding-top: 5vh;  padding-bottom: 4rem; color: #ffffff;}
.step3 .col.back-shadow{ padding:1.5rem; font-size: 1rem; }
.step3 .step2-2{ font-size: 1rem; line-height: 1.4rem;}
.step3 .col-6{ margin-bottom: 10vh;}
.step3 .step2-2 h3{ font-size: 1.5625rem; margin: 0 0 1vh 0; text-transform: uppercase;}
.step3 .step2-2 p{margin:0;}

/** step 4 **/
.step4 .body{
    padding-top: 2vh;
}
.step4-img{ padding: 0 3.5rem;}

/** step 5 **/
.step5{position: relative;}
.step5 .col{ color: #ffffff; position: relative; align-items: center;}

/*
.step5 .col div{position: absolute; left:0; width:100%; text-align: center;}
*/
/*
.step5 .col>div:first-child{top: 35%;}
.step5 .col>div:last-child{ bottom: 32.5%}
*/

.step5 .row:first-child .col div { margin-right: 2%; margin-left: 0;}
.step5 .row:first-child .col:first-child div{ margin-left: 2%; margin-right: 0; }

.step5 .col a.button{ padding: 0; font-size: 180%; padding: 1rem 0;}
.step5 .col>div>a:first-child{ margin-bottom: 1rem;}
/*.step5 .col:after{ content:''; position: absolute; left:0; right:0; margin: auto; width:98%; height: 0.2rem; background: rgba(0,0,0,0.8); top: 0; bottom: 0;}*/
.step5 .row:first-child .col:after{ margin-right: 2%; margin-left: 0;}
.step5 .row:first-child .col:first-child:after{ margin-left: 2%; margin-right: 0;}

.step5 .back-shadow{ position: absolute; width: 22%; padding: 0.5rem; color: #ffffff; top: 0; bottom:0; min-height: 10%; max-height: 50%;
    left:0; right:0; margin:auto; text-align: center; min-height: 10%; background: rgba(0,0,0,0.8); z-index:2;
}

.step5 .col div, .step5 .back-shadow .p5center div:nth-child(2) span{ text-align :center; background: rgba(0,0,0,0.5);      
    padding: 1rem 0rem; 
    -webkit-transition: all 1000ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition:         all 1000ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}                                                
.step5 .row .col div:hover, .step5 .back-shadow .p5center div:nth-child(2):hover span{ background: rgba(0,0,0,0.8); 
    -webkit-transition: all 1000ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition:         all 1000ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.step5 .back-shadow .p5center div:nth-child(2) span{padding: 5px; text-align:left;}

.step5 .back-shadow .p5center {height:100%;
    /*background-image: url(/assets/images/Cor-Ten_01.jpg);*/
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content1: center;
}
.webp .step5 .back-shadow .p5center{
    background-image: url(/assets/images/webp/2-2.webp);
    background-size: cover;

}
.no-webp .step5 .back-shadow .p5center{
    background-image: url(/assets/images/2-2.jpg);
    background-size: cover;
}


.step5 .back-shadow .p5center div {
    display:flex;
    padding: 0.3rem;
    font-size:175%; line-height: 115%;
    text-transform: uppercase;
    width:100%; flex-grow: 2; border1:solid red 1px; 
    align-items: flex-start;
    justify-content: center;
}

.step5 .back-shadow .p5center div:nth-child(2) {
    align-items: center;
    text-align: left;
    justify-content: left;
    flex-grow: 1;
    text-shadow: 0 0 1em #000000;
}

.step5 .back-shadow .p5center div:nth-child(3) {
     align-items: flex-end;
}

/*.step5 .back-shadow{ position: absolute; width: 20%; padding: 1rem; color: #ffffff; top: 0; bottom:0; min-height: 10%; max-height: 40%;
    left:0; right:0; margin:auto; text-align: center; min-height: 10%; background: rgba(0,0,0,0.8);
}

.step5 .back-shadow .mnogolink{
    border1: solid red 1px; height:100%; text-align: left;
}
.step5 .back-shadow .mnogolink div {
    border1: solid green 1px;
    height:25%; display: flex; align-items:center;
}

.step5 .back-shadow .mnogolink div a{
    font-size: 150%; width:100%;
}

.step5 .back-shadow .mnogolink div a span{
    display:block; text-align: right; color:#dddddd;
}*/

.step5 a.button2{
    font-size: 36px;
    line-height: 125%;
}
.step5 .body.fullPg, .step5 .fullPg .row{ height:100%; width:100%; }
.step5 .fullPg .row .col{ margin:0; width: 50%;}
.step5 .fullPg .row .col>div{ flex-direction: column; align-items: center; height:100%; display: flex; flex-basis:1; width:100%; background: none;}
.step5 .fullPg .row .col>div>a{ width:auto; height: 50%; text-indent: -99999px; position: relative;width: 100%; margin:0;}
.step5 .fullPg .row .col>div>a:after{ 
    --width: 76vw;
    --localWidth: 0.33333;
    --sdvig: 5%;
    content: attr(data-title); 
    position: absolute; 
    width: calc(var(--width) * var(--localWidth)); 
    margin: 0 auto; 
    left: 0; right: 0; 
    text-indent: 0;
    white-space: nowrap;
    background: rgba(0,0,0,0.5);
    padding: 2rem;
}
.step5 .fullPg .row .col:first-child>div>a:after{ right: var(--sdvig);}
.step5 .fullPg .row .col:first-child+.col>div>a:after{ left: var(--sdvig);}

.step5 .fullPg .row .col>div>a:first-child:after{ bottom: 0; }
.step5 .fullPg .row .col>div>a:last-child:after{top: 0;}
.step5 .fullPg .back-shadow .p5center{ position: relative;}
.step5 .fullPg .back-shadow .p5center a:after{
    width:100%; height: 100%; content: ''; top:0; left: 0; position: absolute
}
/** step 6 **/
.step6 .body{padding: 15vh 0 5vh;}



/** step 7 **/
.step7 .body{ padding: 5vh 0; color: #ffffff; height:70vh;}
.step7 .body .row:first-child {overflow: hidden; height: 60vh;}
.step7 .body .row:last-child{ padding-top: 3vh;}


/** step 8 **/
.step8 .body:not(.footer){ padding: 0;  position: relative; height:100vh;}
.step8 .body:not(.footer) .frst{ padding-top: 20vh;}

@media (max-height: 800px){
/*    .step2 .body{ padding: 5vh 0 10vh; height: 70vh;}*/
    .stepSlide .step1Text {bottom: 18vh;}
    .fixedElements .fullpage-arrow {bottom:1rem;}
    @keyframes fullpage-arrow{
	0%,70%, 80%, 90%, 100% { bottom: 0.5rem;}
	75%,85%,95%{ bottom:0.7rem;}
    
    }
}

@media (max-height: 700px){
    .wrapperScroll .step2, .wrapperScroll .step3, .wrapperScroll .step3 .step2-2{ line-height:110%;}
}


@media (max-width: 1280px) {
    /*    .wrapperScroll{ width: 1130px;}*/
    .stepButton-left{ left: 1.5vw;}
    .stepButton-right{ right: 1.5vw;}
    .fixedElements .vs { left: 1.5vw;}
    .fixedElements .menu-button { right: 1.5vw;}
     .fixedElements .phoneAtTop, .fixedElements .mailAtTop {right: calc(1.5vw + 4rem);}
    .fixedElements .earphones, #steppermenu, .fixedElements-akciya{ right: 1.5vw;}
    .fixedElements .headers-virtu {
        top: 50%;
    }
    .wrapperScroll .body{ width: 1130px;}
    .step5 .fullPg .row .col>div>a:after{ 
	--width: 1130px;
	--sdvig: 25%;
    }
    /*.wrapperScroll .step1>div{ padding-top: 45%; }*/
    #offcanvas-left .close{
	right: calc(1.5vw);
    }
    .step7 .body .row:first-child {overflow: hidden; height: 54vh;}
    .step5 .back-shadow{ width: 25%;}
}
@media (max-width: 1130px) {
    .wrapperScroll .body{width: 100%;}
}

@media (max-width: 768px) {
    .close{ font-size: 5rem!important; font-weight: bold;}
    .fixedElements .headers-virtu.small-header {font-size: 0.5rem; }
    .fixedElements .headers-virtu.big-header {font-size: 2.5rem; line-height: 125%; top: auto; bottom: 13rem;}
    .fixedElements .headers-art.small-header {font-size:1rem;  top:9vh;}
    .fixedElements .headers-art.big-header {font-size:2rem;}
    .fixedElements .headers-txt {font-size:0.5rem; letter-spacing: 0.2em;}
    .wrapperScroll .step1Text { font-size: 1.2rem; margin-bottom: 1rem; }
    .wrapperScroll .step2Text { font-size: 2rem;  }
    .wrapperScroll .stepButton{font-size: 0.5rem; }
    .wrapperScroll .step1-buttons{
        flex-direction: column;
        white-space :nowrap;
    }
    .wrapperScroll .step1 .stepButton{
        width: 100%;
	margin-bottom: 1rem;
	font-size: 1rem;
    }

    .wrapperScroll .step1 ~ div {background:none; animation: none; min-height: 0!important;}
    .wrapperScroll .step1  ~ div>div {background:#000000; min-height: 0!important; }
    .wrapperScroll .step1 ~ div .body{ padding: 0!important; margin: 0!important;}


    #offcanvas-left{ width: 100%!important;}
     #offcanvas-left nav{ font-size: 1rem; line-height: 1.2rem;}
    #offcanvas-left nav>ul>li>a, #offcanvas-left nav>ul>li>span{ font-size: 1rem; line-height:1rem;}
    #offcanvas-right .close,#offcanvas-left .close { font-size: 1rem; }
    .step2 .centerColumn:before, .step2 .centerColumn:after{ content: none;}
    .fixedElements-akciya{ padding-top:0.2rem;}
    .fixedElements .menu-button{ display:flex; justify-content: center; align-items: center;}
    .fixedElements .earphones {display:none;}
    .fixedElements .menu-button {right: calc(1.5vw);}
     .fixedElements .phoneAtTop, .fixedElements .mailAtTop{right: calc(1.5vw + 4rem);}
    


    .step4 .col {text-align: center;}
    .wrapperScroll .step5:after, .wrapperScroll .step5:before{ content: none;}
    .step6, .step6 .fp-tableCell, .step5 .fp-tableCell, .step7, .step7 .fp-tableCell{height:auto!important;}



    /* step2 */
    .step2{position: relative;}
    .step2 .body{ height:auto;}
    .step2 .col{ display:flex; flex-direction: column;}
    .step2 .col>div{ order:1; padding-top:1rem;}
    .step2 .col>a{order:3}
    .step2 .col>p {order: 2; }
    .step2 .col .button{ font-size: 1.5rem;}
    .step2 .col .button span{ display: inline-block}
    /* step3 */
    .step3 .body{ height: auto;}
    .step3 .step2-2{ margin-bottom:0; padding: 1rem 0.3rem; text-align: left;}
    .step3 .step2-2 h3{ font-size: 1.3rem; text-transform: uppercase; text-align:center;}
    .step3 .step2-2 p{
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;}
    .step3 .col.back-shadow{ padding: 0.3rem; margin-bottom: 1rem;}
    
    .step3 .row .col:nth-child(1){ order:1;}
    .step3 .row .col:nth-child(2){ order:2;}
    .step3 .row .col:nth-child(3){ order:4;}
    .step3 .row .col:nth-child(4){ order:3;}
    .step3 .row .col:nth-child(5){ order:5;}
    .step3 .col-6 a{ font-size: 1.5rem;}

    /* step4 */
    .step4 .body {height:auto;}
    .step4 .col{ display:flex; flex-direction: column;}
    .step4 .col>div{ order:1; padding-top:1rem;}
    .step4 .col>div.step4-img{ order:3; padding: 0;}
    .step4 .col>p {order: 2; padding: 0 0.3rem;}
    .step4 .col .button{ font-size: 1.5rem; padding-left: 1rem; padding-right: 1rem;}
    .step4 .col .button span{ display: block;}

    /* step5 */
    .step5{position: relative; height: auto; }
    .step5 .body {height:auto; padding-top: 1.5rem; }
    .wrapperScroll .step5:after, .wrapperScroll .step5:before{ content: none;}
    .step5 .fullPg .row .col {width:100%; margin:0;}
    .step5 .fullPg .row .col>div{ display: block; padding: 0; margin: 0 !important;}
    .step5 .fullPg .row .col>div>a{
      position: relative;
      margin: 5rem 0 1rem 0;
      background-image: url(/assets/images/bg/3.jpg);
      background-size: 200% 200%;
      background-repeat: no-repeat;
      height:12rem;
      width:100%;
      display: block;
	white-space: normal;
    }
       .step5 .fullPg .row .col-4:nth-child(1) a:nth-of-type(1){  
        background-position: left top;
    }
    .step5 .fullPg .row .col-4:nth-child(1) a:nth-of-type(2){ 
        background-position: left bottom;
    }
    .step5 .fullPg .row .col-4:nth-child(2) a:nth-of-type(1){ 
        background-position: right top;
    }
    .step5 .fullPg .row .col-4:nth-child(2) a:nth-of-type(2){ 
	background-position: right bottom;
    }
    
    .step5 .col{ min-height: none;}
    .step5 .col div{position: static;}
    .step5 .col:after{ content: none;}
    .step5 .back-shadow{ position: static; width:100%;}
    .step5 :not(.p5center) br{ display: none;}
    .step5  .button2-container{
	padding-top: 5rem;
    }
    .step5 .fullPg .row .col>div>a:after, .step5   a.button2{ 
	left:0 !important; 
	top: auto !important; 
	right: 0!important; 
	margin: auto auto; padding:0; background: none; 
	position: absolute;
	height: 2rem; width: 100%; 
	font-size: 1.5rem;
	line-height: 1.2em;
	white-space: normal;
    }
    .step5 .fullPg .row .col>div>a:after{
	bottom: calc(100% + 1rem) !important;
    }
    .step5 .back-shadow .p5center{ height:12rem;}
    .step5 .back-shadow .p5center div:nth-child(2) a {text-indent: -99999px; width:100%; display: block;}    
    .step5 .back-shadow .p5center div:nth-child(2) a:after{ 
        content: attr(data-title); text-indent: 0; width: 100%;
        height: 2rem; top: 0; bottom: 0; margin: auto; text-align: center;
        font-size: 1.5rem;
    }
    .step5 a.button2  {   
	    font-size: 1.5rem; 
	    bottom: calc(100% + 2rem); 
	    
    }

    /* step7 */
    .step7 .body,.step7 .body .row:first-child { height:auto; }

    /* step8 */
    .step8 .body{background: #ffffff!important; height: auto;}
    .step8 h1{ font-size: 2rem;}
    .step8 .body:not(.footer) .frst {padding: 1.5rem 0.3rem 0;}   .step2 p{ padding: 0.1rem 0.3rem;}
}

#footer.body { height:auto; padding:0;}
.footer>.row:first-child{border-top: 1px solid #333333; padding-top: 1rem; margin-top:0.5rem;}
/*
.footer-menu{  padding: 0 0 1rem 0; font-size: 90%;}
.footer-menu ul{ column-count: 5; list-style-type: none; border-bottom: 1px solid #efefef; padding: 0 0 0.3rem 0; margin: 0; column-gap: 1rem;
    -moz-column-gap: 1rem;
    -webkit-column-gap: 1rem;
}
.footer-menu ul a { text-decoration: none;  color: #333333;}
.footer-menu ul a:hover { text-decoration: underline;}
.footer-menu ul li{ line-height: 1rem;}
*/


.footer-menu{  padding: 0 0 1rem 0;  } 
.footer-menu .header{ font-weight:bold; border-bottom:1px solid; display:block; padding: 0 2px;}
.footer-menu .col{ position:relative; padding-top: 4rem; }
.footer-menu .col:before {content: attr(data-title); font-weight:bold; border-bottom:1px solid; display:block; width:100%; top:0;}
.footer-menu ul{ list-style-type: none; padding: 0; margin:0;font-size: 90%;}
.footer-menu ul li{ line-height: 1rem; padding-bottom:0.5rem;}
.footer-menu ul a { text-decoration: none;  color: #333333;}
.footer-menu ul a:hover { text-decoration: underline;}


.footer-menu > span,.footerHeader { font-weight: 800; text-transform: uppercase; display: block; font-family: "MyriadProBold",sans-serif;}
@media (max-width: 768px){
    .footer{ padding: 0 2vw;}
    .footer-menu{ font-size: 100%;}
    .footer-menu ul{ column-count: 2;}
    .footer-menu ul li {padding: 0.3rem 0;}
    .footer .col {padding: 0 0.5rem 1rem!important;}
    #offcanvas-left {overflow-y: scroll;}
    #offcanvas-left .row{ flex-direction: row!important; flex-wrap: wrap; margin-bottom: 1.5rem }
    #offcanvas-left .row .col{ width: 50%;}
    #offcanvas-left .row .col-12{ width: 100%;}
    .fixedElements-akciya{ right: 1vw;}
}
.our-social-links a {display: inline-block; width:2.5rem; height: 2.5rem; margin-left: 1rem; margin-top:0.5rem;}
@media (min-width:768px) and (max-width:1280px){
    .our-social-links a {margin-left:0.8rem;}
}

.modalw{ position: fixed; width:100%; height:100%; top:0; left:0;z-index:101;}
.modalw_back{ content:""; background: rgba(0,0,0,0.7); width:100%; height:100%; z-index:101;}
.modalw_body{ margin: 20vh 20vw; background: #d6d6d6; z-index: 102; position: fixed; top:0; left:0; border-bottom: 3px solid #333333;}
.modalw_close{ position: fixed; right:1vw; top:1vh; z-index: 103; background: #ffffff; width: 2rem; height: 2rem; text-align:
 center; vertical-align: middle; border-radius: 50%; cursor: pointer;}
.modalw_close:after{ content: "x"; font-family: Arial; font-size: 2rem; line-height: 90%;}
.modalw_body .success{ background: #0a8754; color: #ffffff; text-align: center; width:100%; height: auto; position:absolute;top: 0; bottom: 0;  padding: 20% 0 0 0; margin: auto; }

.modal-callback{ padding-top: 2rem;}
.modal-callback span{display: none;}
.modal-callback div{ width: 80%; margin: 0 auto; padding: 0.5rem 0;}
.modal-callback input, .modal-callback textarea{ background: #ffffff; padding: 0.5rem; color: #333333;}
.modal-callback input::-webkit-input-placeholder, .modal-callback textarea::-webkit-input-placeholder{ font-weight: bold;}
.modal-callback input::-moz-placeholder, .modal-callback textarea::-moz-placeholder{ font-weight: bold;}
.modal-callback input:-ms-input-placeholder, .modal-callback textarea:-ms-input-placeholder{ font-weight: bold;}
.modal-callback input:-moz-placeholder, .modal-callback textarea:-moz-placeholder { font-weight: bold;}
.modal-callback input::placeholder, .modal-callback textarea::placeholder { font-weight: bold;}
.modal-callback button{ background: #ff007a; color: #ffffff; text-decoration: none; width:auto; padding: 0.5rem 1.5rem;}

#offcanvas-left + .offmenu-right-btn{ display: none;}
#offcanvas-left.hide + .offmenu-right-btn{
    position: fixed;
               display: block;
    top:0; bottom: 25%;
    margin: auto 0;
    right: 0;
    height: 100px; width: 40px;
    
    color: rgba(255,255,255,0.4);
    z-index:100; 
    background: rgba(0,0,0,0.4);
    animation: offmenu-right 5s linear infinite; border-radius: 8px 0 0 8px;
   }             
#offcanvas-left + .offmenu-right-btn:after{ content: 'меню';  font-size: 18px;
    transform: rotate(180deg); display: inline-block; writing-mode: vertical-lr;
 -webkit-writing-mode: vertical-lr;
    height: 100px; text-align: center; width: 40px; line-height: 40px;
}
#offcanvas-left + .offmenu-right-btn:hover{ color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.7); cursor:pointer;}

@keyframes offmenu-right{
    0%,88%,92%,96%,100% {margin-right: 0;}
    90%,94%,98%{margin-right: 10px;}
}


@media (max-width:768px) {
    #fullpage {display: flex; flex-direction: column;}
    #fullpage .step1{ order: 10;}
    #fullpage .step2{ order: 20;}
    #fullpage .step3{ order: 55;}   
    #fullpage .step4{ order: 40;}
    #fullpage .step5{ order: 50;}
    #fullpage .step6{ order: 60;}
    #fullpage .step7{ order: 70;}
    #fullpage .step8{ order: 80;}
    .step4 .col {text-align:left;}
    .button.white span{ display: inline-block; margin: 0 0.6rem;}

}
.slick-arrow.slick-prev{
    z-index: 2;
    left: 0.5rem;
}
.slick-arrow.slick-next{
    z-index: 2;
    right: 0.5rem;
}


.main-slick-proekty-container{
    position: relative;
}
.main-slick-proekty-link{
    position: absolute;
    left: 0; right: 0;
    margin: 0 auto;
    top: calc(100% + 1rem);
    text-align: center;
}
#main-slick-proekty .slick-slide a, #main-slick-proekty-container .slick-slide img{
    display: block;
}

@media (max-width: 768px){
    .main-slick-proekty-container{
	margin-bottom: 4rem;
    }
}
.fp-responsive .fp-section,
.fp-responsive .fp-slide,
.fp-responsive .fp-tableCell{
    height: auto !important;
}