/*
    SCROLL
*/

html , .skyessence , section { block-size: 100%; scroll-behavior: smooth;}
html { scroll-snap-type: y mandatory;}
.skyessence section ,
.skyessence footer {  scroll-snap-align: start; scroll-snap-stop: always;}


/*
    GENERAL
*/

.skyessence main { text-align: center; font-size: 18px; font-weight: 300;}
.skyessence h2 { font-weight: 100; letter-spacing: 1px;}
.skyessence section { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding-top: 50px;}
.skyessence section .content-1440 { width: 90%; max-width: 1440px; margin: auto;}
.skyessence section .content-1280 { width: 90%; max-width: 1280px; margin: auto;}
.skyessence .down-btn { display: flex; flex-direction: row; justify-content: space-between; align-items: center; max-width: 335px; color: #fff; font-size: 16px; background: #2d2e31; border: 1px solid #2d2e31; border-radius: 40px; padding: 10px 20px; margin-bottom: 15px; transition: color .5s ease, background-color .5s ease;}
.skyessence .down-btn svg { width: 10px; height: 15px; margin-bottom: 0; transition: margin .3s ease;}

@media (hover:hover) {
    .skyessence .down-btn:hover { color: #000; background: #fff;}
    .skyessence .down-btn:hover svg { margin-bottom: -15px;}
}

@media (max-height: 799px){
    .skyessence section { height: auto; padding: 100px 0;}
}
@media (max-width: 1023px) {
    .skyessence main { font-size: 16px;}
    .skyessence h2 { font-size: 24px !important; line-height: 30px;}
    .skyessence .down-btn { font-size: 14px;}
}



/* 
    .init 
*/

.skyessence .init .content { width: 90%; max-width: 500px;} 
.skyessence .init .content .figure { width: 100px; margin-bottom: 20px;}
.skyessence .init .content h1 span { position: fixed; top: 0; left: 0; z-index: 0; font-size: 0px; text-indent: -500000rem;}
.skyessence .init .content h1 img { width: 100%;}
.skyessence .init button { display: flex; flex-direction: row; justify-content: center; align-items: center; background: #fff; border: 1px solid #000; border-radius: 40px; padding: 10px 15px 10px 20px; margin: 30px auto 0;}
.skyessence .init button svg { margin-left: 15px;}
.skyessence .init .next-section { position: absolute; bottom: 30px; left: calc(50% - (12px / 6) );}
.skyessence .init .next-section svg { width: 13px; height: 42px; margin: 0 auto;
      stroke-width: 1;
      stroke: #000; 
      fill: none;
      stroke-dasharray: 400; stroke-dashoffset: 400; 
      animation-duration: 3.0s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: draw;
    }
@keyframes draw {
    to { stroke-dashoffset: 0;}
}


@media (min-height: 900px){
    .skyessence .init .content .figure { width: 150px;}
}



/* 
    .text-content 
*/

.skyessence .text-content { width: 90%; max-width: 600px;}
.skyessence .text-content img { width: 100%;}
.skyessence .text-content h2 { margin: 50px 0 20px;}
.skyessence .text-content p { margin: 20px;}
.skyessence .text-content p:last-of-type { margin: 0;}

.skyessence .white-girl { color: #fff; background: #000;}
.skyessence .black-girl { background: #fff;}

.skyessence .black-girl .text-content { overflow: hidden;}
.skyessence .black-girl .text-content > * { position: relative; z-index: 10;}
.skyessence .black-girl .text-content > img { z-index: 1; max-width: 450px; animation: rotate 40s linear infinite;}

@keyframes rotate {
    from { transform: rotate(0deg);}
    to { transform: rotate(360deg);}
}


@media (min-width: 1200px) {
    .skyessence .white-girl { background: #000 no-repeat url(../img/sky-essence/sky-essence-blanco-sobre-negro.jpg) bottom right; background-size: auto 90%; background-attachment: fixed;}
    .skyessence .black-girl { background: #fff no-repeat url(../img/sky-essence/sky-essence-negro-sobre-blanco.jpg) bottom left; background-size: auto 90%; background-attachment: fixed;}
    .skyessence .black-girl .text-content { margin-left: auto;}
}
@media (max-width: 1199px) {
    .skyessence .text-content { margin: auto;}
}





    /* .characteristics */
.skyessence .characteristics { /*display: block;*/ text-align: left; border-top: 1px solid #000; /*padding-top: 75px;*/}
.skyessence .characteristics .content-1440 { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap;}
.skyessence .characteristics p { text-align: left;}
.skyessence .characteristics a.down-btn:first-of-type { margin-top: 50px;}
.skyessence .characteristics a.down-btn:last-of-type { margin-bottom: 50px;}
.skyessence .characteristics .ecodesign { width: 100%; max-width: 290px; margin-top: 50px;}
.skyessence .characteristics .text-content { position: relative; z-index: 10; width: 50%; max-width: 500px;}
.skyessence .characteristics .text-content h2 { margin-top: 0;}
.skyessence .characteristics .image-content { position: relative; z-index: 1; width: 65%;  margin: 75px -3% 0 -25%;}
.skyessence .characteristics .image-content img { width: 100%;}
.skyessence .characteristics .image-content img:not(.base) { position: absolute; top: 0; left: 0;}


@media (min-width: 1200px) {
    .skyessence .characteristics .text-content { margin-right: -50%;}
    .skyessence .characteristics .ecodesign { max-width: 335px;}
    .skyessence .characteristics .image-content { }
}
@media (max-width: 1023px) {
    .skyessence .characteristics { text-align: center; padding-bottom: 0;}
    .skyessence .characteristics .content-1440 { flex-wrap: wrap;}
    .skyessence .characteristics .text-content { order: 2; width: 100%;}
    .skyessence .characteristics a.down-btn { margin: 0 auto 15px;}
    .skyessence .characteristics p { text-align: center;}
    .skyessence .characteristics .ecodesign { margin-top: 0;}
    .skyessence .characteristics .image-content { order: 1; width: 100%; max-width: 600px; margin: 0 auto 50px;} 
}


    /* .more-options */
.skyessence .more-options { height: auto;}
.skyessence .more-options h2 { margin: 50px 0;}
.skyessence .more-options .texto-hover { background: rgba( 256, 256, 256, .95);}
.skyessence .more-options header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 300; letter-spacing: 1px; text-align: left;}
.skyessence .more-options p { font-size: 16px !important; line-height: 22px; text-align: left; margin-top: 20px;}
.skyessence .more-options .vision-futuro.active .eleganticon { transform: rotate(180deg);}
.skyessence .more-options .panel-title { text-align: left;}
.skyessence .more-options .panel-title a { display: block;  letter-spacing: 1px;}

@media (max-width: 1023px) {
    .skyessence .more-options h2 { margin-top: 0;}
    .skyessence .more-options header { font-size: 16px;}
    .skyessence .more-options p { font-size: 14px !important; line-height: 20px;}
}




























/* 
    .modal 
*/

.modal { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; z-index: 0; width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: center; align-items: center; opacity: all .5s ease; }
.modal .modal-bg { position: absolute; top: 50%; left: 50%; width: 3px; height: 0; opacity: .9; background-color: #282a29;}

.modal .modal-close { position: absolute; top: -35px; left: inherit; right: -35px; z-index: 10; display: block; width: 50px; height: 50px; margin: -.5rem;}
.modal .modal-close span { position: relative; z-index: 10; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100%;}
.modal .modal-close svg { width: 20px; height: 20px; stroke: #fff; transition: stroke .2s ease;}


.modal .modal-content { opacity: 0; position: relative; z-index: 10; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 75%; height: 80%; }
.modal .modal-content iframe { width: 100%; height: 100%;}

@media(max-width: 767px){
    .modal .modal-content { height: 80%;}
}

/* SHOW MODAL */

.modal.active { z-index: 5000; opacity: 1; z-index: 1; pointer-events: all;}
.modal.active .modal-bg { animation: show-modal .9s .35s ease-in-out forwards;}
.modal.active .modal-content { animation: modal-content-opacity 1.5s .5s ease-in-out forwards;}

@keyframes show-modal {
    0%   { top: 50%; left: 50%; width: 3px;  height: 0;}
    50%  { top: 0%;  left: 50%; width: 3px;  height: 100%;}
    100% { top: 0%;  left: 0%;  width: 100%; height: 100%;}
}
@keyframes modal-content-opacity {
    0%   { opacity: 0;}
    100% { opacity: 1;}
}