/*
Theme Name: Kabul2
Author: Guido Bettinsoli Digital Studio
Description: A perfect clean theme
Version: 0.9
*/

@import url("assets/css/preset.css"); 

@import url("assets/css/components.css");

/*
--------------------------------------------- 
Kabul Theme
---------------------------------------------
*/

:root {
--color-1:#232323;
--color-2:#B4B4B4;
--color-3:#F1F1F1;
--color-4: #707070;
--text-color:var(--color-1);
--menu-height:30px;
--menu-index-height:34px;
--color-theme-1:#6219FF;
--color-theme-2:#FCD700;
--color-theme-3:#23ad96;
--color-theme-4:#e87177;
--color-message:var(--color-theme-1,#6219FF);
--archive-width:400px;
--color-text:var(--color-1);
}

.tag-button { display:inline-block;margin: 4px 8px;margin-left: 0px;border:1px solid;border-radius:20px;--line-height: 20px!important;padding: 0 8px;}
.scroll {transform:none}
.small-title {margin-bottom:-13px}
.tag-button {cursor:pointer}

.contact-email {width:100%}
.contact-email input[type=checkbox]:after {--color-text:var(--color-theme-1,#6219FF)}
.contact-email input::placeholder {color:#858484}

.loading span{animation:pulse 2.2s alternate infinite;animation-delay:var(--pulse-delay,0s);animation-fill-mode: both;display: inline-block;will-change: transform;margin-left: 5px;}

.loading span:nth-child(1){ --pulse-delay:0.2s }
.loading span:nth-child(2){ --pulse-delay:0.3s }
.loading span:nth-child(3){ --pulse-delay:0.4s }
.loading span:nth-child(4){ --pulse-delay:0.5s }
.loading span:nth-child(5){ --pulse-delay:0.6s }
.loading span:nth-child(6){ --pulse-delay:0.7s }
.loading span:nth-child(7){ --pulse-delay:0.8s }
.loading span:nth-child(8){ --pulse-delay:0.9s }
.loading span:nth-child(9){ --pulse-delay:1s }
.loading span:nth-child(10){ --pulse-delay:1.1s }

.figure{--color:var(--color-3)}

/* Site
-----------------------------------------------------*/

#site-cover, #main-site, #page-footer, .single-title-bar, .start .single-title-bar {left:var(--left-site-position, 0px);transition: left 1s;position: fixed;width:100%;will-change: left;}
#site-cover {padding:50px;left: calc( var(--left-site-position) - 100vw);}
#site-cover img {object-position:center var(--cover-align, center);width: 100%;height: 100%;object-fit: cover;}
.js-appear-cover { height: calc(100% - var(--menu-height));width: 15px;bottom: 0;z-index: 1;cursor: pointer;position: absolute;}

#site-cover .site-cover-credits {position: absolute;left: 10px;top: 50%;transform: translate(-50%, -50%) rotate(90deg);width: 100vh;text-align: center;}
#site-cover .site-cover-credits { animation:fade-in 1s 1s; animation-fill-mode:both; }

@keyframes fade-in {
    from{opacity:0}
    to {opacity:1}
}

/*cookie*/
.open-privacy #cookie-notice { display:none; }
#cookie-notice #cn-notice-buttons .button {padding: 7px;border-radius: 18px;}
#cookie-notice {--cookie-space-around:57px 109px 35px 109px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.85) 67.71%, rgba(255, 255, 255, 0) 100%);}
#cookie-notice.cookie-notice-visible.cn-effect-slide, #cookie-notice.cookie-revoke-visible.cn-effect-slide { animation-delay:4.5s; }
#cookie-notice.cn-effect-slide {animation-delay:0s;}

body:not(.mobile) #cookie-notice{min-width: initial; background:none;}
body:not(.mobile) #cookie-notice .cookie-notice-container{padding:20px; position:relative; width: 500px!important; margin:20px}
body:not(.mobile) #cookie-notice .cookie-notice-container #cn-notice-buttons{justify-content: flex-end;}
body:not(.mobile) #cookie-notice .cookie-notice-container:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background: rgba(255, 255, 255, 0.9);}
body:not(.mobile) #cookie-notice .cookie-notice-container:before {border-radius: 5px;background: rgba(255, 255, 255, 0.9);filter: blur(5px); border-radius: 5px; }
body:not(.mobile) #cookie-notice .cookie-notice-container>* {position:relative}

/*main*/
#main-site {height: 100vh;background: white;overflow: hidden;}

/*cover*/
#site-cover .site-cover-gradient {background-position: 0px 50px; background-repeat:no-repeat;background-size: 100% 300%;}
#site-cover .site-cover-gradient {background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 13%, rgba(255,255,255,1) 23%, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 38%, rgba(255,255,255,0) 47%, rgba(255,255,255,1) 56%, rgba(255,255,255,0) 63%, rgba(255,255,255,1) 79%);}
#site-cover .site-cover-gradient { mask: var(--logo) no-repeat center center; -webkit-mask:var(--logo) no-repeat center center; mask-size: contain; -webkit-mask-size: contain;}
#site-cover .site-cover-gradient {animation:logo-animation 4s; animation-fill-mode: both;}

@keyframes logo-animation {
    0%{background-position: 0px 0px;}
    80%{background-position: 0px 100%; opacity:1;}
    100% {background-position: 0px 100%; opacity:0;}
}

/*gradient*/
#gradient {z-index:20;animation:gradient-move steps(30, end) 15s alternate infinite;animation-fill-mode:both;will-change:transform;mix-blend-mode: multiply;}
#gradient .gradient-1 { background-image:linear-gradient(0, rgba(98, 25, 255, 0) 11.52%,var(--color-theme-1,#6219FF) 26.55%, rgba(98, 25, 255, 0) 69.38%);}
#gradient .gradient-2 { background-image:linear-gradient(0, rgba(252, 215, 0, 0) 11.52%, var(--color-theme-2,#FCD700) 26.55%, rgba(252, 215, 0, 0) 69.38%);}
#gradient .gradient-3 { background-image:linear-gradient(0, rgba(35, 173, 150, 0) 11.52%, var(--color-theme-3,#23ad96) 26.55%, rgba(35, 173, 150, 0) 69.38%);}
#gradient .gradient-4 { background-image:linear-gradient(0, rgba(232, 113, 119,0) 11.52%,var(--color-theme-4,#e87177) 26.55%, rgba(232, 113, 119,0) 69.38%);}

#gradient>div {transition:opacity 0.7s; opacity:0;}
#gradient>div.active {opacity:0.15;}


@keyframes gradient-move {

    0% { transform:scale(1.2) translate(0,0) rotate(0deg); }
    25% { transform:scale(1.7) translate(20px,-150px) rotate(10deg); }
    50% { transform:scale(1.8) translate(-60px, -230px) rotate(30deg); }
    75% { transform:scale(1.3) translate(10px, 20px) rotate(-20deg); }
    100% {transform:scale(1.2) translate(0,0) rotate(0deg); }

}

/*header*/
#main-header {--row: var(--archive-width) 1fr auto; position:absolute; left:0; height:var(--menu-height,30px);}
#main-header>* {height: 100%;}
#main-header .header-menu {--row: 60% 40%;--spacing:5px;height: 100%;}
#main-header .header-menu li {border-bottom:1px solid;display: flex;align-items: center;height: 100%;}
#main-header .site-logo {position:relative;z-index: 3;height: initial;margin: 6px;position: relative;align-self: start;}

/*Menu index*/
#menu-index, #menu-index-back {z-index:2;top:var(--menu-height);position:absolute;left:0;width:100%;--row: 691px 438px 587px 402px;--spacing: 0;}
#menu-index .index-title, #menu-index-back .index-title  {height:var(--menu-index-height);display:flex;align-items:center;justify-content:center;background:white;z-index:2;width: 100%;}
body:not(.mobile) #menu-index .index-title:first-child {padding-left:8px}
#menu-index .menu-index-inner {width: -moz-fit-content; width: fit-content;}

/* Site Opening
-----------------------------------------------------*/

    body {--left-site-position:0px;}
    .appear-cover {--left-site-position: 20vw}
    .start, .open-cover {--left-site-position: 100vw;}


/* Archive
-----------------------------------------------------*/

    #main-header #archive {background:var(--color-1);position:relative;--color-text:var(--color-2);padding: 0 8px;padding-top: 5px;}
    #main-header .archive-inner {position:absolute;z-index: 3;background:var(--color-1);max-height: calc(100vh - var(--menu-height));width:100%;left: 0;top: var(--menu-height);}
    #main-header .archive-inner:before { content:""; top:0; left:8px; height:1px; width:calc(100% - 16px); background:var(--color-2); position:absolute;  z-index:5; }
    #main-header .archive-inner {transition:height 0.5s; height:0; overflow:hidden;}
    #main-header .archive-menu-title {width: -moz-fit-content; width: fit-content;cursor: pointer;}
    #main-header .archive-menu-title .archive-arrow { margin-left:2px; }
    #main-header .archive-filter-label {text-transform:capitalize}

    #main-header #archive .archive-close { margin:10px 15px; transition:opacity 0.5s; opacity:0; pointer-events: none; cursor:pointer}
    #main-header #archive.open .archive-close { opacity:1; pointer-events: all;}

    #main-header #archive .archive-open {transition:0s 0s z-index; z-index:1;}
    #main-header #archive.open .archive-open {transition:0s 1s z-index; z-index:-1;}
    
    #main-header #archive.open .archive-inner { height:100vh; }
    /*#main-header #archive:hover .archive-inner,
    #main-header #archive .archive-inner:hover { height:100vh; }*/

    #main-header #archive .archive-button-open { display:none; }
    #main-header #archive.open .archive-button-open { display:initial; }
    /*#main-header #archive:hover .archive-button-open { display:initial; }*/
    #main-header #archive.open .archive-button { display:none }
    /*#main-header #archive:hover .archive-button { display:none}*/

    /*archive filters*/
    #main-header #archive #archive-filters {padding-bottom: 0;z-index:5;position:absolute;overflow:hidden;width:191px;left:0;right:0;margin:0 auto;border:1px solid;background:#0D0D0D;}
    #main-header #archive .filter-close{position:absolute;left:0;width:100%;height:100%;top: 0;}
    #main-header #archive #archive-filters .filter-category {border-bottom:1px solid;padding-bottom: 3px; max-height:150px;}
    #main-header #archive #archive-filters .filter-tags {max-height: 260px;--scroll-width:5px;margin: 0;margin-top: 5px;padding-top: 6px;}
    #main-header #archive #archive-filters .filter-item {cursor:pointer; margin-bottom: 7px;margin-left: 20px;position:relative; text-transform:capitalize}

    #main-header #archive #archive-filters .filter-item:before {content:'';width:10px;height:10px;display:inline-block;vertical-align:middle;border-radius:50%;border:1px solid;margin-right: 9px;}
    #main-header #archive #archive-filters .filter-item:before {position:absolute;right: calc(100% - 2px);top: 1px;}
    #main-header #archive #archive-filters .filter-item.active:before { background-color:var(--color-text) }

    #main-header #archive #archive-filters {transition:max-height 0.5s, padding 0.5s, border 0.5s; border-width:0; max-height:0; padding:0; overflow:hidden; }
    
    /*archive filters opening*/
    body:not(.mobile) #main-header #archive #archive-filters:hover,
    body:not(.mobile) #main-header #archive.open .archive-menu-title:hover ~ .archive-inner #archive-filters,
    .mobile.open-filters #main-header #archive #archive-filters {max-height:420px;border-width:1px;padding:10px;padding-bottom: 5px;}
    .mobile.open-filters .archive-menu-title .archive-arrow { transform:rotate(180deg); top:-1px; position:relative }
    body:not(.mobile) #main-header #archive.open .archive-menu-title:hover .archive-arrow, .mobile.open-filters #archive-filters #archive-arrow{ transform:rotate(-180deg) }

    .mobile:not(.open-filters) .filter-close { display:none }

    #main-header #archive-window {--spacing:10px;}
    #main-header #archive-window .scroll-wrapper { padding:15px 8px}
    
    #main-header #archive-window .archive-item { margin-bottom:14px; --spacing:6px}
    #main-header #archive-window .archive-item header.column {--spacing:3px}

    
/* Index
-----------------------------------------------------*/

    #index {position: absolute; top: calc(var(--menu-height) + var(--menu-index-height)); background: white;}
    #index .slide-wrapper {column-gap: 8px;padding: 0 8px;width: -moz-fit-content; width: fit-content;}
    #index .index-column {height: calc(100vh - var(--menu-height));position:relative;--spacing: 4px;padding-bottom:30px;}
    #index .index-column>.scroll-wrapper { padding-bottom:40px; }
    #index .index-column header.column {--spacing:2px}
    
    #index .index-column figure {background:var(--color-3)}
    #index .index-column figure {transition: filter 0.5s;filter: saturate(0);}
    #index .index-column:hover figure {filter:saturate(1); }
        
    /*category columns*/
        #index-magazine { width:683px; }
        #index-digital-library { width:587px; }
        #index-publications { width:422px; }
        #index-project { width:386px; }

        #index-magazine .row{ --row:1fr 422px; --spacing:8px}
        #index-magazine .issue-cover {margin-bottom:25px}
        #index-magazine .column {--spacing: 4px;}
        #index-magazine .issue-cover-left .ft-title-s {margin-bottom:8px}
        #index-magazine .magazine-item {margin-bottom:25px}
        #index-magazine .issue-item+.issue-item:before {content: ""; margin: 43px 0; margin-top:15px; display: block; border-top:1px solid; width:400px}

        #index-publications .publication-item {margin-bottom: 35px;}

        #index-digital-library .digital-item.row{margin-bottom: 30px;--row:145px 1fr;--spacing: 25px;}
        #index-digital-library .digital-item .column {--spacing: 4px;}

        #index-project .project-item figure  {margin-top:10px;}
        #index-publications  figure {margin-top:6px;}
        #index-project .project-item {margin-bottom: 35px;}
    
/* Page
-----------------------------------------------------*/

    #main-site.page #content .close-page {bottom: 100%;--color-text:var(--color-3);height: var(--menu-height);display: flex;align-items: center;}
    #main-site.page .page-content { padding:10px 6px;}
    #main-site.page .page-content p+p {margin-top:20px;}
    #main-site.page .page-content figure {margin-top:10px}
    #main-site.page .page-content strong {margin-bottom:2px;}
    #main-site.page .page-content a, .single-text p a {text-decoration:none;background:linear-gradient(var(--color-theme-1,#6219FF),var(--color-theme-1,#6219FF)) no-repeat;background-position: 0 100%;background-size: 100% 4px;}
    .single-content-inner .single-text p a {background-position: 0 1em; }
    #main-site  #content .wpcf7-acceptance a { background:none; text-decoration:underline; }

/* Open Page
-----------------------------------------------------*/
    #page-overlay {background:#232323; z-index: 3;}
    #page-overlay {position:absolute;width:100%;height:100%;left:0;z-index: 6;top:0;mix-blend-mode: multiply;}            
    #page-overlay-popup, #main-site.page #content {background: var(--color-3);position:absolute;height:calc(100% - var(--menu-height));bottom:0;left:var(--popup-position, 0);width:var(--popup-width,400px);z-index: 7;}

    #page-overlay { transition:opacity 0.3s; opacity:0; pointer-events:none; }
    .open-page  #page-overlay { opacity:0.8;  pointer-events:all;}
    
    #page-overlay-popup {transition: transform 0.6s linear;transform: translateY(100%);}
    .open-page #page-overlay-popup{transform: translateY(0);will-change: transform;-webkit-will-change: transform;}
        
    #main-site.page #content {opacity:0;pointer-events: none;}
    .open-page:not(.loading-page) #main-site.page #content{opacity:1; pointer-events:all} 

/* Post
-----------------------------------------------------*/

    #main-site.single #content {position:absolute;width:100%;height: calc(100% - var(--menu-height, 30px)); top:var(--menu-height, 30px); z-index:1;background:white;}
    #main-site.single #content .single-page {z-index:2;top: 0;}
    .br-gecko #main-site.single #content .single-page {z-index:unset;}
    #main-site.single #content .single-page>.scroll-wrapper {padding-bottom: 100vh;padding-top: calc(var(--menu-index-height) + 12px);}
    #main-site.single #content .single-page>.scroll-wrapper {background:linear-gradient(white,white) no-repeat 0 0;background-size: 100% calc(100% - 100vh);}
    #main-site.single #menu-index .index-title {transition:top 0.5s;position:relative;top:0;}
    #main-site.single #menu-index.hide-menu:not(.visible-menu) .index-title{ top:calc(calc(-1* var(--menu-index-height)) - 10px) ; }
    #main-site.single #menu-index.hide-menu:not(.visible-menu) {pointer-events:none; }
    #main-site.single .single-content-footer a {text-decoration: underline;}
    
    /*lang selector*/
        .lang-selector{position: absolute;left: 8px;top: 10px;--color-text: #626262;}
        .lang-selector.lang-ita span.ita,
        .lang-selector.lang-eng span.eng {--color-text: var(--color-2);}

    /*title bar*/
        .single-title-bar {position:fixed;background:white;z-index: 7;height:var(--menu-height);width: calc(100% - var(--archive-width));top:0;padding-left: 8px;padding-right:70px;margin-left: var(--archive-width);}
        .js-reading-bar:before {content:'';background:linear-gradient(var(--color-1), var(--color-1)) no-repeat 0 0;background-size: var(--reading-bar,0) 100%;position:absolute;top:0;left: 0;height: 100%;width: 100%;}
        .single-title-bar:after {content:'';border-bottom: 1px solid var(--color-1);width:100%;position:absolute;bottom:0;width:calc(100% - 75px);}
        .single-title-bar .title {height:100%;display: block;--color-text: #dcdcdc;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;margin-top: 5px;padding-left: 50px;}
        .single-site-logo {position:fixed;right:0;z-index: 8;top: 0;margin: 6px;}

    /*menu*/
        .single-menu {width:100%; --row:683px 587px 422px 386px;}

    /*header*/
        .single-top-header {--row:1fr auto;align-items: baseline;margin-top: 7px;}
        .single-header {margin-top:46px; }
        .single-header h1 { margin-bottom:23px }

    /*content*/
        .single-content, .single-content-2 {--row:400px 1fr;padding-right:130px;padding-bottom: 90px;}
        .single-text {margin-bottom:15px;}
        .single-text>* { margin-bottom:40px }
        body:not(.mobile) .single-text>p::first-letter {margin-left:20px}
        body:not(.mobile) .single-text>p:before {content:'';display: inline;margin-left: 20px;}

        /*video & audio*/
        .single-text iframe {width:100%;}
        .single-text iframe[allowfullscreen] { height:500px}


    /*side content*/
        .single-content aside, .single-content-2 .single-aside { padding-left:8px }
        .single-content-2 .single-aside {--spacing:16px}

    /*link*/
        .single-aside p a {text-decoration:none;background:linear-gradient(var(--color-theme-2,#FCD700),var(--color-theme-2,#FCD700)) no-repeat;background-position: 0 100%;background-size:100% 3px;}
        .publication-page .single-text>p a {background-image:linear-gradient(var(--color-theme-2,#FCD700),var(--color-theme-2,#FCD700))}
        .digital-library-page .single-text>p a {background-image: linear-gradient(var(--color-theme-3,#23ad96),var(--color-theme-3,#23ad96));}
        .project-page .single-text>p a, 
        .project-page .single-aside p a  {background-image:linear-gradient(var(--color-theme-4,#e87177),var(--color-theme-4,#e87177))}

    /*img*/  
        .single-text img { width:100%!important; max-width:none; }
        .single-text .aligncenter{ width:100%!important; } 
        .single-text .alignnone { width: calc(100% + 410px)!important; position:relative;left:-410px;} 
        .single-text .wp-caption {--color-text:var(--color-4); display:block }
        .single-text .wp-caption-text {margin-top:7px; display: block; --color-text:var(--color-4);}
        .single-text .alignnone .wp-caption-text, .single-text .alignnone .wp-caption-text + p { margin-left:410px}
        .single-text .alignleft {width:400px!important;position:absolute;left:0;padding-left: 8px;padding-right: 15px;}
        .single-text figure {background:var(--color-3)}


    /*quote*/
        .single-text .single-quote {position:absolute;left: 10px;width: 375px;}
        .single-text blockquote {padding-left:70px;--color-text:var(--color-4);}
        .single-text .hero-block {text-transform:uppercase;text-align:center;width: calc(100% + 110px);position: relative;left: -55px;}
        .single-text blockquote a {background:none; text-decoration:underline}
        .single-text .hero-block:before,
        .single-text .hero-block:after {content:''; width:52px; border-bottom:6px solid; display:block; margin:62px auto;  }
        
    /*note*/
        .note-anchor { cursor:pointer}
		.note-number { font-style:normal}
        .single-text .note-number { vertical-align:super; --color-text:var(--color-theme-1,#6219FF) }
        .publication-page .note-number{--color-text:var(--color-theme-2,#FCD700)}
        .digital-library-page .note-number{--color-text:var(--color-theme-3,#23ad96)}
        .project-page .note-number{--color-text:var(--color-theme-4,#e87177);}
        .note {position:absolute;width:400px;left:0; z-index:12; --color-text:var(--color-4);background:rgba(255,255,255,0.96);padding: 8px;}
        .note a {background:none!important;text-decoration: underline!important;}
        .close-note {margin:2.5px; cursor:pointer}
        
        /*opening*/
            .note {transition:opacity 0.5s, transform 0.5s; opacity:0; transform:translateX(-20%); pointer-events:none}
            .note.open {opacity:1;transform:translateX(0);pointer-events:all;}
            
    /*gallery*/
        .single-gallery {--gallery-height: 673px;margin-bottom:71px;}
        .single-gallery-caption {margin-left:var(--archive-width);margin-top:8px;padding-left:8px;--color-text: var(--color-4);}
        .single-gallery .gallery.single li{width:calc(100% - var(--archive-width));padding-left:8px;padding-right:130px;float:right;}
        
    /*footer-note*/ 
        .single-content-footer:before {content:"";position:absolute;top:0;border-bottom: 1px solid;width:164px;}
        .single-content-footer {--row:1fr 285px; --spacing:13px; padding-top:12px; position:relative; }

    /*bottom bar*/
        .project-page .single-bottom-bar {display:none!important}
        .single-bottom-bar {height:var(--menu-height);--row: 400px 1fr 1fr 140px;--spacing: 0;width:100%;position: absolute;}
        body:not(.page-footer-appear) .single-bottom-bar:not(.appear) {position:fixed;bottom: -120px;transition:bottom 0.5s;}
        body:not(.page-footer-appear) .scroll-down:not(.scroll-start) .single-bottom-bar:not(.appear) {bottom:0}
        .single-bottom-bar .bottom-bar-label {margin-top: 2px;}
        .single-bottom-bar .bottom-bar-column {position:relative;height: 100%;cursor:pointer;background: white;}
        .single-bottom-bar .bottom-bar-column .bottom-bar-content {position:relative; top:15px; }
        .single-bottom-bar .bottom-bar-column .bottom-bar-content .scroll-wrapper, .single-bottom-bar .bottom-bar-column .bottom-bar-content-inner {padding-bottom:20px}
        .single-bottom-bar .bottom-bar-column .bottom-bar-column-inner{background: white;--spacing:20px;height:auto;overflow:hidden;position:absolute;bottom:0;padding: 8px;width: 100%;min-height: calc(var(--menu-height) + 1px);}
        .single-bottom-bar .bottom-bar-column:first-child .bottom-bar-column-inner { background:var(--color-3)}

        /*bottom authors column*/
        .single-bottom-bar .author-column .column{--spacing: 2px;}
        .single-bottom-bar .author-site {margin-top:8px;text-decoration: underline;}
        .single-bottom-bar .author-column li {margin-bottom: 20px;}

        /*opening*/
            .single-bottom-bar .bottom-bar-column .bottom-bar-content {transition: max-height 0.5s;max-height: 0;}
            body:not(.mobile) .single-bottom-bar .bottom-bar-column:hover .bottom-bar-content {max-height:400px;}

        /*buy button*/
            .single-buy {position: fixed;bottom: 39px;right:8px;}
            .single-book-price, .single-buy-button {background:white;--color-text:var(--color-1);width:130px;height:32px;border-radius:40px;display:flex;align-items:center;justify-content:center;border:2px solid;margin-bottom: 2px;}
            .single-book-price:before {content:'€'}
            .single-buy-button { background:var(--color-1); border-color:var(--color-1); --color-text:var(--color-2) }
        
/*Footer Content
-----------------------------------------------------*/

        /*relative*/
        .single-relative {padding:8px; background:var(--color-1);--color-text:var(--color-2);--spacing: 8px;--row:repeat(4,1fr);}
        .single-relative img{ filter:saturate(0); }
        .single-relative h4 { margin-bottom:24px }
        .single-relative-row {margin-bottom: 20px;}
        .single-relative .authors:before {content:'di '; text-transform:lowercase}

        /*newsletter*/
        .single-newsletter { background:var(--color-3); Padding:60px 8px; text-align:center;}
        .single-newsletter h5 { margin-bottom:15px}
        .single-newsletter>p { margin-bottom:40px; }
        .single-newsletter .contact-email { width:552px; }

/*Footer Page
-----------------------------------------------------*/

    #page-footer {background:var(--color-1);--color-text:var(--color-2);height: calc((100% - var(--menu-height)) + 2px);position:fixed;top: auto;bottom: 0;z-index:-1;}
    #page-footer .page-footer-logo {--image-height:38px; --image-width:auto; margin:0 auto;width: -moz-fit-content; width:fit-content; margin-top:77px; background:none; }
    #page-footer .page-footer-content {width:854px;margin:0 auto;left:0;right:0;text-align:center;top: calc(50% - calc(42px + calc(var(--menu-height)/2)));}
    #page-footer .page-footer-bottom {padding:18px 22px;border-top:1px solid;width:100%;--spacing:17px;position: absolute;}
    
    .page-footer-social {position:fixed; bottom:85px; width: -moz-fit-content; width:fit-content; padding:18px 22px; z-index:-1} 
    .page-footer-social a { --color-text:var(--color-2); margin-right:66px}
    
    .page-footer-appear .page-footer-social {z-index: 2;}
    

/*Open Post
-----------------------------------------------------*/
    #single-overlay {position:absolute; width:100%; height:100%; background:white; }

    .loading-logo{text-align:center;width: -moz-fit-content; width: fit-content;margin: 0 auto;left: 0;right: 0;}
    body:not(.open-post) #single-overlay .loading-logo,
    body:not(.loading-page) #single-overlay .loading-logo {display:none;}
    
    #single-overlay {transition:transform 0.8s ease; transition-delay:0.2s; transform: translateY(100%);}
    .open-post  #single-overlay{transform: translateY(calc( calc(var(--menu-height,30px) + var(--menu-index-height)) - 2px));will-change: transform;-webkit-will-change: transform;}
    
    #content {transition:opacity 0.6s ease;  opacity:1; pointer-events:all; }
    .loading-page  #content { transition:opacity 0.2s ease, top 0.6 ease; top:100%; opacity:0; pointer-events:none; }

/*Privacy Page
-----------------------------------------------------*/

    /*.open-privacy {--left-site-position:0px;}*/
    .open-privacy.open-page  #page-overlay { opacity:0;  pointer-events:none;}
    .open-privacy.open-page  #page-overlay { opacity:0;  pointer-events:none;}
    .open-privacy.open-page  #page-overlay-popup { opacity:0;  pointer-events:none;}
    .open-privacy.open-page  #gradient>div{ opacity:0;  pointer-events:none;}

    #main-site.privacy #content { width: 100%; z-index: 1;}
    #main-site.privacy #content .scroll-wrapper {padding-top:50px; padding-left:var(--archive-width); padding-right:130px; width:100%; }
    #main-site.privacy #content h1 {padding:90px 0}
    #main-site.privacy #content .privacy-content>* { margin-bottom:40px }
    #main-site.privacy #content .privacy-content>p::first-letter {margin-left:20px}
    #main-site.privacy #content .privacy-content>p:before {content:'';display: inline;margin-left: 20px;}

    #main-site.privacy #content{transition:bottom 0.6s linear; bottom:-100vh; opacity:1; top:auto;}
    .open-page:not(.loading-page) #main-site.privacy #content{ bottom:0; }

/*Safari
-----------------------------------------------------*/

    .br-safari.os-mac .page-footer-social { width:auto}
    .br-safari.os-mac .single-bottom-bar {position:static!important}

/* Mobile
-----------------------------------------------------*/

    /*cookie*/
    .mobile #cookie-notice #cn-notice-buttons .button {padding: 7px;border-radius: 16px;}
    .mobile #cookie-notice { --cookie-space-around:87px 8px 25px 8px; }

    /*mobile home start shift*/
    /*#main-site.home {transition: left 1s 0s,width 0s 1s;}
    .mobile:not(.open-post) #site-cover, .mobile #main-site.home {transition-timing-function: cubic-bezier(0.25, 0.1, 0.85, 1.74);}
    .mobile.start #main-site.home {width: calc(100% + 200px) }*/

    /*gradient*/
    .mobile  #gradient {width:200%; height:120%; }
    .mobile .js-appear-cover {display:none}

    /*header*/
    .mobile { --menu-height:44px; --index-spacing:6px }
    .mobile .js-reading-bar { position:absolute; top:0; left:0; width:100vw; height:100%; }
    .mobile:not(.open-post) .js-reading-bar,.mobile.loading-page .js-reading-bar { --reading-bar:0%!important }
    .mobile:not(.open-post) .js-reading-bar:before, .mobile.loading-page .js-reading-bar {transition:0.5s background; }
    .mobile #main-header {--row: 38px 1fr 38px;width: 100%;border-bottom: 1px solid var(--color-1);padding: 0 var(--index-spacing, 6px);}
    .mobile #main-header .site-logo {margin:0;height:35px;align-self: center;}
    .mobile #main-header .site-logo img{ width:100%; height:auto; }

    /*archive*/
    .mobile #main-header #archive {background:none;--color-text:var(--color-1);height: var(--menu-height);display: flex;justify-content: center;padding-top: 3px;}
    .mobile #main-header .archive-inner {width:100vw;left:0;position: fixed;--color-text: var(--color-1); z-index:5}
    .mobile #main-header .archive-inner #archive-window, 
    .mobile #main-header .archive-inner #archive-filters{--color-text: var(--color-2); }
    .mobile #main-header .archive-inner #archive-filters{ transform:scale(1.15); transform-origin:50% 0}
    .mobile #main-header .archive-menu-title {z-index: 2;--color-text: #dcdcdc;mix-blend-mode: exclusion;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: calc(100vw - 135px);text-align: center;}    
    .mobile #main-header  #archive .archive-close {position:fixed;margin:0;justify-content: flex-end;background: var(--color-1);--color-text:#dcdcdc; width:100%;height:var(--menu-height);display:flex;align-items:center;z-index: 1;padding-right: 8px;padding-top: 3px;}
    
    .mobile #main-header #archive .archive-open {z-index: 4;}
    .mobile #main-header #archive.open .archive-open {z-index:0}
    
    .mobile #main-header  #archive .archive-close {transition:0.5s right; right:-100vw;}
    .mobile #main-header  #archive.open .archive-close {right:0}

    /*header menu*/
    .mobile #main-header .button-menu {overflow:hidden;z-index: 0;position: relative;mix-blend-mode: exclusion;--color-text: #dcdcdc;}
    .mobile #main-header .button-menu span {display:flex;transition:top 0.5s;position:absolute;top:calc(var(--button-menu-offset,-100%) + 100%);height:100%;z-index: 0;align-items:center;padding-top: 3px;}
    .mobile #main-header .button-menu .close-menu {top:var(--button-menu-offset,-100%); }

    .mobile #main-header .button-menu span { transition:top 0.5s; --button-menu-offset:-100%;}
    .mobile #main-header .button-menu.active span,
    .mobile.open-page #main-header .button-menu span {--button-menu-offset:0px;}
    
    /*menu window*/
    .mobile #main-header .mobile-menu-window {width:100%;position:fixed;top:var(--menu-height);z-index: 4;background: white;left: 0;overflow: hidden;display: flex;justify-content: space-between;flex-flow: column;}
    .mobile #main-header ul>li {display:block; width:100%; text-align:center; border:none; margin:10px 0;}
    .mobile #main-header .mobile-menu-top {padding: 20px 0;background:white;}
    .mobile #main-header .mobile-menu-bottom {position:absolute;bottom:0;width:100%;padding: 200px 0 20px 0;--color-text:var(--color-theme-1);background: linear-gradient(0deg, #F1F1F1 30.21%, rgba(241, 241, 241, 0) 100%);pointer-events: none;}
    .mobile #main-header .mobile-menu-bottom li { pointer-events:all}

    .mobile #main-header .mobile-menu-window { transition:height 0.5s; height:0; }
    .mobile #main-header .mobile-menu-window.open {height: calc(100% - calc(var(--menu-height) + var(--mobile-top-spacing, 0px)));}

    /*cover*/
    .mobile #site-cover img {object-fit: cover;height: 100%;}

    /*menu index*/ 
    .mobile #menu-index,.mobile #menu-index-back {--auto: 100vw;--row: initial; }
    .mobile #menu-index-back {top:0;}
    .mobile:not(.open-post) #menu-index { opacity:0; pointer-events: none; }
    .mobile #index {top:var(--menu-height);height: calc(100% - calc(var(--menu-height) + 30px));}

    /*index*/
    .mobile #index .index-column {width: 100vw;padding:var(--index-spacing, 6px);}
    .mobile #index .slide-wrapper {padding:0;column-gap: 0;}
    .mobile #index>.slide-wrapper { padding-top: calc(var(--menu-height) - 10px);}
    .mobile #index #index-digital-library .row{ --spacing:12px; --row:95px 1fr}

    .mobile #index-magazine .issue-item+.issue-item:before {width:210px; margin-left:auto; margin-right:auto; }

    /*page*/
    .mobile #page-overlay { background:none }
    .mobile #page-overlay-popup, 
    .mobile #main-site.page #content { width:100vw}    
    .mobile #main-site.page .page-content a, .mobile .single-text p a { background-position: 0 calc(1em + 2px);}

    .mobile #main-site.page #content .close-page {display:none;}

    /*post*/
    .mobile .lang-selector {top: 60px;left: auto;right: var(--index-spacing);mix-blend-mode: unset;z-index: 3;}
    .mobile .loading-logo {margin-top:calc(-2.5*(var(--menu-height)))}
    .mobile .single-content, .mobile .single-content-2,
    .mobile .single-content aside, 
    .mobile .single-content-2 .single-aside {padding:var(--index-spacing);width:100%;position: relative;}
    .mobile .single-content-2 .single-aside { padding:0;}
    .mobile .single-content-inner {width: calc(100vw - calc(2*var(--index-spacing)));}
    .mobile .single-page>.scroll-wrapper { padding:0; }
    .mobile #main-site.single #content .single-page>.scroll-wrapper {padding-top:calc(var(--menu-height) - 10px)}
    .mobile #page-footer  { top: var(--menu-height); }

    .mobile .single-top-header {margin-top:20px;padding-right: 25px;}
    .mobile .single-header {margin:35px 0; }
    .mobile .single-header h1 {margin-bottom:10px;}
    .mobile .single-header .ft-subtitle-art-mob {margin-bottom:20px}
    .mobile .single-text>* {margin-bottom: 35px;}
    .mobile .single-content-footer>* {margin-bottom:30px}

    .mobile .single-gallery {--gallery-height:267px; margin-bottom:35px}
    .mobile .single-gallery-caption {margin-top: 6px!important;margin: 0px!important;}
    .mobile .single-gallery .gallery.single li {padding-left:0;padding-right:0;float:none;width: 100%;}
    
    .mobile .single-text .hero-block:before, 
    .mobile .single-text .hero-block:after { width:25px; margin:36px auto; border-bottom:3px solid; }
    .mobile .single-text .hero-block {width:100%; left:0}
    .mobile .single-text blockquote {padding:0 30px}

    .mobile .single-text .single-quote {position:static; display:none; }
    .mobile .single-text .alignnone .wp-caption-text,
    .mobile .single-text .alignnone .wp-caption-text + p {margin-left:0;}
    .mobile .single-text .wp-caption{text-align:center;}
    .mobile .single-text .alignleft,
    .mobile .single-text .alignnone {width:100%!important;position:static;padding: 0;} 
    .mobile .single-text figure { position:relative!important; left:calc(-1*var(--index-spacing))!important; right:auto; width:100vw!important; }

    .mobile .note {width:100%;top: var(--menu-height);position: fixed;height: calc(100% - var(--menu-height));overflow: auto;}
    .mobile .close-note {display:none}
    
    /*Bottom bar*/
    .mobile .single-bottom-bar {pointer-events:none;  }
    .mobile:not(.page-footer-appear) .single-bottom-bar:not(.appear) {pointer-events:all; bottom:-200px}

    .mobile .single-bottom-bar {width:100%; display:block;  }
    .mobile .single-bottom-bar .bottom-bar-column {position:absolute;width:100%;bottom:0;top:auto;}

    .mobile .single-bottom-bar .bottom-bar-column {height:var(--menu-height); }
    .mobile .single-bottom-bar .bottom-bar-column:first-child .bottom-bar-column-inner { background:white}
    .mobile .single-bottom-bar .bottom-bar-column .bottom-bar-column-inner {padding: 11px var(--index-spacing);border-top: 1px solid;min-height: calc(var(--menu-height) + 1px);}
    .mobile .single-bottom-bar .bottom-bar-column.empty-column {border-top: 1px solid;}
    .mobile .single-bottom-bar .bottom-bar-label { z-index:9; position:relative; width:-moz-fit-content; width:fit-content;}
    .mobile .single-bottom-bar .bottom-bar-column:nth-child(2n) .bottom-bar-label {text-align: right;display: block;float: right;}

    .mobile .single-bottom-bar .bottom-bar-content {height:0;max-height:none;z-index: 0;}
    .mobile .single-bottom-bar .open .bottom-bar-content {height: calc( var(--window) - calc(3*var(--menu-height)));margin-bottom: var(--menu-height);border-bottom: 1px solid;clear: both;}

    .mobile .single-bottom-bar .bottom-bar-content { transition: height 0.5s, margin 0.2s 0.3s; }
    .mobile .single-bottom-bar .open .bottom-bar-content { transition: height 0.5s, margin 0s; }

    .mobile .single-buy {margin-bottom: 0px;z-index: -1; bottom:50px; }
    .mobile .single-book-price { margin-bottom:2px}
    
    /*relative*/
    .mobile .single-relative article { margin-bottom:40px}
    .mobile .single-relative .tags-list { margin:5px 0 10px 0}

    /*newsletter*/
    .mobile .single-page .single-newsletter { padding:35px var(--index-spacing)}
    .mobile .single-page .single-newsletter .contact-email {width:100%; max-width:308px;}
    .mobile .single-page .contact-email input[ type=email] {padding: 12px 47px 10px 17px;height: 35px;}
    .mobile .single-page .contact-email input[ type=submit] { top:2px; right:15px} 
    .mobile .single-page .contact-email input[type="checkbox"] { margin-left:19px; border-radius:50%}
    .mobile .single-page .single-newsletter>p {margin-bottom:30px}

    /*footer page*/
    .mobile .page-footer-social {padding:0;display:flex;justify-content:space-between;width:100%;padding:var(--index-spacing);bottom: 73px;}
    .mobile .page-footer-social li {width:auto;}    
    .mobile .page-footer-social li a {margin:0;}
    .mobile #page-footer .page-footer-bottom {padding: 12px var(--index-spacing);}
    .mobile #page-footer .page-footer-content {width:100%}
    .mobile #page-footer .page-footer-logo {margin-top:65px}
    .mobile #page-footer .page-footer-content {padding:0 23px; top:calc(50% - calc(var(--menu-height)/2))}

    /*privacy*/
    .mobile #main-site.privacy #content {background:white; z-index:2}
    .mobile #main-site.privacy #content .scroll-wrapper { padding:0px var(--index-spacing); padding-bottom:60px }
    .mobile #main-site.privacy #content h1 {padding:34px 0}
    .mobile #main-site.privacy #content .privacy-content>* { margin-bottom:25px }

    /*iphone*/
    .mobile.br-iphone.open-page #main-site #content #inner-content>.scroll,
    .mobile #index .index-column{height: calc(calc(100vh - var(--menu-height)) - 90px);}
    
    .mobile.br-iphone:not(.page-footer-appear) #page-footer *{opacity:0;}
    .mobile.br-iphone:not(.page-footer-appear) #page-footer {background:var(--color-3)}
    .mobile .single-bottom-bar .open .bottom-bar-content {height:calc(calc( var(--window) - calc(3*var(--menu-height))) - 110px); }

/*news banner*/

    .news-banner:not(.open) {display:none}
    .news-banner-container {position: fixed;bottom: 20px;right: 16px;}
    .news-banner { position:relative; width: 504px; min-height: 128px;  padding: 10px; padding:24px 20px; }
    .news-banner:before {content:""; background:#6219FF; filter: blur(7px); border-radius: 5px;width:100%;height:100%;position:absolute;top:0px;left:0px;}
    .news-banner-inner { position:relative; --color-text:white; }
    .news-banner .close-banner {position:absolute;right: 10px;top: 7px;cursor: pointer;}
    .banner-text {margin-top:15px}
    .ft-banner-text {letter-spacing: -0.02em;}
    .ft-banner-title {letter-spacing:-2%}

    .news-banner-container {transition:opacity 0.5s 1s; opacity:1;}
    .start .news-banner-container {opacity:0;} 

    .news-banner-container.gradient-1 {--background-banner:var(--color-theme-1)}
    .news-banner-container.gradient-2 {--background-banner:var(--color-theme-2)}
    .news-banner-container.gradient-3 {--background-banner:var(--color-theme-3)}
    .news-banner-container.gradient-4 {--background-banner:var(--color-theme-4)}
    .news-banner:before {transition:background 0.5s}

/*news banner mobile*/
    .mobile { --mobile-top-spacing:0px;}
    .mobile.two-banners { --mobile-top-spacing:80px;}
    .mobile.one-banner { --mobile-top-spacing:40px;}
    .mobile .news-banner-container .an-marquee {animation-duration:40s}

    .mobile .news-banner-container {position:static; width:100vw; display:flex; flex-flow:column-reverse}
    .mobile .news-banner-container {transition:none; opacity: 1;}
    .mobile .news-banner {height:40px;min-height: auto;box-sizing: border-box;padding: 0; width:100vw;}
    .mobile .news-banner .news-banner-content>*{padding-left:100px}
    .mobile .news-banner:before { border-radius:0; filter:initial; }
    .mobile .news-banner:first-child:before,
    .mobile.one-banner .news-banner:before{ height:calc(100% + 13px); background:linear-gradient(#6219FF 34px, transparent ) }
	.mobile .news-banner:first-child:before,	
	.mobile.one-banner .news-banner:before {background:#6219FF; height:100%; }
    .mobile .news-banner:before { transition:none; }

    .mobile .news-banner-inner {overflow:hidden;height: 100%;white-space: nowrap;width: calc(100vw - 30px);}
    .mobile .banner-text, .mobile .banner-title, .mobile .banner-subtitle {display:inline-block}
    .mobile .banner-title,.mobile .banner-subtitle {padding-right:20px}
    .mobile .news-banner .close-banner { top:15px; right:10px;}
    .mobile .news-banner .close-banner img { width:12px; height:12px; }
    .mobile .news-banner+.news-banner {border-bottom:1px solid white}

    .mobile #main-header { top: var(--mobile-top-spacing, 0px);}
    .mobile #menu-index, #menu-index-back {top: calc(var(--mobile-top-spacing, 0px) + var(--menu-height));}
    .mobile #index { top: calc(var(--mobile-top-spacing, 0px) + var(--menu-height));}
    .mobile #main-site.single #content {top: calc(var(--mobile-top-spacing, 0px) + var(--menu-height,30px));}
    .mobile #page-footer {top: calc(var(--mobile-top-spacing, 0px) + var(--menu-height));}
    .mobile #main-header .mobile-menu-window {top: calc(var(--mobile-top-spacing, 0px) + var(--menu-height));}
    .mobile #main-header #archive .archive-close {top: var(--mobile-top-spacing, 0px);}
    .mobile #main-header .archive-inner {top: calc(var(--mobile-top-spacing, 0px) + var(--menu-height));}
    .mobile #page-overlay-popup, #main-site.page #content { height:calc(100% - calc(var(--mobile-top-spacing, 0px) + var(--menu-height)))}
    .mobile .note {top: calc(var(--mobile-top-spacing, 0px) + var(--menu-height));}

/*Search*/
    #ajax-search {position:relative; width:100%; --color-text:white;}
    #ajax-search form {position:relative;z-index:6;border:none;width:calc(100% - 80px);cursor:pointer;display: flex;align-items:center;}
    #ajax-search form input {border:none;padding-left: 10px;}
    #ajax-search .icon-search {display:flex;align-items:center;}
    #ajax-search #ajax_search_results_container {position: fixed;width:100%;height: 100%;top: 0;left: 0;z-index: 5;background: rgba(35, 35, 35, 0.95);--color-text: white;}
    #ajax-search #ajax_search_results_container #ajax_search_results {max-width:653px;margin:0 auto;padding: 50px;padding-bottom: 0;}
    #ajax-search .close-search {position:absolute; z-index:6; right:0; top:5px; cursor:pointer}
    #ajax-search .lazy-spinner {display:block; position: absolute;top:50%;left: 50%; transform:translate(-50%,-50%); width:60%!important; height:60%!important; max-width: 70px!important; max-height: 70px!important;background:url('assets/images/resources/loader/lazy-loading.svg') no-repeat center center; background-size:contain  }
    #ajax-search #ajax_search_results_container li {border:none; margin-bottom:26px}
    #ajax-search #ajax_search_results_container li h4,
    #ajax-search #ajax_search_results_container li h5 {margin-bottom:2px}
    #ajax-search #ajax_search_results_container .result-excerpt {margin-top:10px}

    #ajax-search #ajax_search_results_container { transition:height 0.1s; }
    #ajax-search:not(.open) #ajax_search_results_container {height: 0;}
    #ajax-search {transition:opacity 0.3s; }
    body.open-post:not(.mobile)  #ajax-search { opacity:0; pointer-events:none; }
    #ajax-search.open .icon-search svg * { stroke:white }
    #ajax-search:not(.open) .close-search {pointer-events:none;}
    #ajax-search .result-item:not(.active) {display: none;}

    .mobile #main-header  #ajax-search form,
    .mobile #main-header  #ajax-search form input::placeholder  {--color-text:var(--color-theme-1); text-transform:uppercase; opacity:1; }
    .mobile #main-header  #ajax-search form {width:100%;text-align:center;padding:0;display: block;}
    .mobile #main-header  #ajax-search form  input {  text-align:center; text-transform:uppercase; padding-left:0; padding-right:0}
    .mobile #ajax-search:not(.open) .close-search { display:none; }
    .mobile #ajax-search .close-search { width:100%;opacity:1;position:fixed;top: var(--mobile-top-spacing,0);height:var(--menu-height);}
    .mobile #ajax-search #ajax_search_results_container {background:white;--color-text:#232323;top: calc(var(--mobile-top-spacing,0px) + var(--menu-height));}
    .mobile #ajax-search.open #ajax_search_results_container {height: calc(calc(100% - 50px) - calc(var(--mobile-top-spacing,0px) + var(--menu-height)));}
    .mobile #ajax-search #ajax_search_results_container li {text-align:left}
    .mobile #ajax-search #ajax_search_results_container li .result-excerpt {display:none}
    .mobile #ajax-search #ajax_search_results_container #ajax_search_results {padding:5px}
    .mobile #main-header .header-menu .js-popup {--color-text:#232323}
    .mobile #ajax-search:before {content:'';background:linear-gradient(0deg, #F1F1F1 30.21%, rgba(241, 241, 241, 0) 100%);position:fixed;bottom:0;width:100%;height:250px;left:0;pointer-events: none;z-index:6;}
    
    .mobile #ajax-search:before  {opacity:0; transition:opacity 0.3s}
    .mobile #ajax-search.open:before {opacity:1}
    .mobile #ajax-search #ajax_search_results_container li { margin-bottom:16px; }

    .mobile #ajax-search .lazy-spinner {filter:brightness(0)}


    /* Scroll Button
    -----------------------------------------------------*/

    .ic-scroll {position:fixed;bottom:0;z-index: 1;pointer-events: none!important;right:0;margin: auto 0;top: 0;transform: rotate(90deg);transform-origin: 0% 50%;}

    .ic-scroll{width: 38px;height: 58px;box-shadow: inset 0 0 0 1.5px var(--color-text);border-radius: 30px;}
    .ic-scroll:before{ position: absolute; left: 50%;}
    .ic-scroll:before{ content: ''; width: 8px; height: 8px; background:var(--color-text); margin-left: -4px;  top: 8px; border-radius: 50% }
    .ic-scroll:before{ animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: scroll}
    
    @keyframes scroll{
        0% { opacity: 1}
        100% {opacity: 0; transform: translateY(25px);} 
    }

    .ic-scroll {box-shadow:none;width: 50px;height: 100px;margin-right: 14px;border: 2px solid var(--color-1);}
    .ic-scroll:before{content: '';width: 12px;height: 12px;background: var(--color-1);margin-left:-6px}

    body:not(.mobile) .ic-scroll {display:none}

    .start .ic-scroll {opacity:0; }
    .ic-scroll {transition:0.5s opacity; }
    .removed.ic-scroll { opacity:0; }