:root {
	--main-color: #99FF99;
	--main-color-rgb: 153, 255, 153;
}

/*---------------------------------------------------------------------------------------*/

body {
    height: 100vh !important; overflow: hidden;
    
	background-color: #FFF;
	
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}
@-moz-document url-prefix() {
    body { height: 100dvh !important; }
}
@media (min-width: 900px)	 { body { font-size: 20px; } }
@media (max-width: 899.99px) { body { font-size: 16px; } }
body:after {
	content: '';
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
	
	background-image: url("../../images/logo.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 150px auto;
	
	animation: preloader-blink 1.5s ease-in-out infinite;
}
@keyframes preloader-blink {
	  0% { opacity:  50%; }
	 50% { opacity: 100%; }
	100% { opacity:  50%; }
}
@media (min-width: 782px) {
    .customize-support { height: calc(100vh - 32px) !important; }
    .customize-support:after { top: 32px; }
}
@media (max-width: 781.99px) {
    .customize-support { height: calc(100vh - 46px) !important; }
    .customize-support:after { top: 46px; }
}

/*---------------------------------------------------------------------------------------*/

#wrapper {
	position: relative; z-index: 1;
    height: 100%; overflow: hidden;
	background-color: #FFF;
    
    transform-style: preserve-3d;
    
	opacity: 0; transition: opacity 1s ease-out;
	pointer-events: none;
}
.loaded #wrapper {
	opacity: 1;
	pointer-events: auto;
}
@media (min-width: 782px)	 { .customize-support #wrapper { max-height: calc(100vh - 32px); } }
@media (max-width: 781.99px) { .customize-support #wrapper { max-height: calc(100vh - 46px); } }

/*---------------------------------------------------------------------------------------*/

#container {
	position: relative;
    max-height: 100%; overflow: hidden;
	background-color: inherit;
    
    isolation: isolate;
}
.loaded #container { overflow: auto; }
body[class*="open"] #container { overflow: hidden !important; }
@media (min-width: 900px)    { #container > section { margin: 100px 0; } }
@media (max-width: 899.99px) { #container > section { margin:  50px 0; } }
#container > section:first-of-type { margin-top: 0; }
#container > section:last-of-type  { margin-bottom: 0; }

/*---------------------------------------------------------------------------------------*/

.content-wrapper { max-width: 1200px; }
@media (min-width: 1300px)							 { .content-wrapper { margin: 0 auto; } }
@media (max-width: 1299.99px) and (min-width: 900px) { .content-wrapper { margin: 0 50px; } }
@media (max-width: 899.99px)						 { .content-wrapper { margin: 0 25px; } }

/*---------------------------------------------------------------------------------------*/

.cta-link {
    display: inline-block;
	text-decoration: none;
}
.cta-link > span {
	background-image: linear-gradient(to bottom, transparent calc(100% - 1px), currentColor calc(100% - 1px), currentColor 100%);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: bottom right;
    background-origin: content-box;
}
.loaded .cta-link > span { transition: background-size .2s ease-out; }
.cta-link.current:hover > span,
.cta-link:hover > span {
	background-size: 100% 100%;
	background-position: bottom left;
}

/*---------------------------------------------------------------------------------------*/

.arrow-link {
    position: relative;
    text-align: right;
}
.arrow-link > .arrow {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    display: block;
    
    background-color: var(--main-color);
    border-radius: 50%;
}
.arrow-link.corner > .arrow {
    top: unset; bottom: 0; transform: none;
}
.loaded .arrow-link > .arrow { transition: background-color .2s ease-out; }
.arrow-link > .arrow:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.arrow-link > .arrow:after {
    content: '';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg) translateX(-10px);
    display: block; height: 30%; width: 30%;
    
    background-color: #000;
    
    -webkit-mask-image: url("../../images/icons/arrow.link.svg");
    mask-image: url("../../images/icons/arrow.link.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.loaded .arrow-link > .arrow:after {
    transition:
        transform        .2s ease-out,
        background-color .2s ease-out;
}
.arrow-link:hover > .arrow:after { transform: translate(-50%, -50%) rotate(-45deg) translateX(10px); }
@media (min-width: 1100px) {
    .arrow-link { padding-right: 120px; }
    .arrow-link > .arrow { width: 100px; }
}
@media (max-width: 1099.99px) {
    .arrow-link { padding-right: 95px; }
    .arrow-link > .arrow { width: 75px; }
}

/*---------------------------------------------------------------------------------------*/

.folder {
    position: relative;
    overflow: hidden;
    padding-top: 60%;
    
    background-image: url("../../images/article-bg.png");
    background-position: center;
    background-size: cover;
    
    -webkit-mask-image: url("../../images/article-mask.png");
    mask-image: url("../../images/article-mask.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    isolation: isolate;
}
.folder > img {
    position: absolute; top: 0; left: 0;
    height: 100%; width: 100%;
    
    object-fit: cover;
    object-position: center;
}

/*---------------------------------------------------------------------------------------*/

.file {
    overflow: hidden;
    
    border-radius: 8px;
    
    -webkit-mask-image: url("../../images/profile-mask.png");
    mask-image: url("../../images/profile-mask.png");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-position: top left;
    mask-position: top left;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    isolation: isolate;
}