/************************FOOTER************************/

.footer-container{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: 80px;
    color: var(--grey);
}

/*TABLET*/
@media screen and (max-width: 735px){
    .footer-container{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      padding-bottom: 100px;
    }
}

/*PHABLET*/
@media screen and (max-width: 540px){
    .footer-container{
        padding-bottom: 50px;
    }
}

.footer-hr{
    position: relative;
    margin: 140px auto 50px;
    border-bottom: 1px solid var(--horizontalRule);
}

/*TABLET*/
@media screen and (max-width: 735px){
    .footer-hr{
        margin: 60px auto;
    }
    .footer-text{
        margin-bottom: 80px;
    }
}

/*PHABLET*/
@media screen and (max-width: 540px){
    .footer-hr{
        display: none;
    }
    .footer-text{
        margin: 120px auto 100px;
    }
}

.footer-gradient{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 590px;
    z-index: 0;
    pointer-events: none;
    background: var(--gradient);
    -webkit-transition: var(--color-mode-transition);
    -o-transition: var(--color-mode-transition);
    transition: var(--color-mode-transition);
    mix-blend-mode: lighten;
}

/************************HEADER************************/

.back-arrow-ico-container{
    -webkit-transition: 0.2s -webkit-transform var(--ease-out-quad);
    transition: 0.2s -webkit-transform var(--ease-out-quad);
    -o-transition: 0.2s transform var(--ease-out-quad);
    transition: 0.2s transform var(--ease-out-quad);
    transition: 0.2s transform var(--ease-out-quad), 0.2s -webkit-transform var(--ease-out-quad);
    opacity: 0;
    padding-right: 30px;
    -webkit-animation: fadein 0.3s linear forwards;
            animation: fadein 0.3s linear forwards;
}

@-webkit-keyframes fadein {
    to {
      opacity: 1;
    }
}

@keyframes fadein {
    to {
      opacity: 1;
    }
}

/*DESKTOP MEDIUM*/
@media screen and (max-width: 1280px){
    .back-arrow-ico-container{
        display: none;
    }
}

.nav-container{
    position: relative;
    z-index: 100;
    padding-top: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

@media screen and (max-height: 800px) {
    .nav-container{
        padding-top: 50px;
    }
}

/*DESKTOP MEDIUM*/
@media screen and (max-width: 1280px){
    .nav-container{
        padding-top: 50px;
    }
}

.logo-link{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.logo-link[class*="data-ally"]:focus::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -30%;
    width: 120%;
    height: 160%;
    border: 2px solid var(--accent);
    background: rgba(255, 255, 255, 0.01);
    border-radius: 5px;
}

.logo-link[class*="back-arrow-ico-container"]{
    -webkit-transform: translateX(-3px);
        -ms-transform: translateX(-3px);
            transform: translateX(-3px);
}

.logo-link:hover{
    text-decoration: none;
}

/*DESKTOP MEDIUM*/
@media screen and (max-width: 1280px){
    .logo-link{
        left: 0
    }
}

.nav-controls{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*PHABLET*/
@media screen and (max-width: 540px){
    .nav-controls{
        right: -5px;
    }
}

.tool-tip{
    opacity: 0;
    -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
            transform: translateY(6px);
    position: absolute;
    padding: 4px 13px;
    border-radius: 5px;
    font-size: 14px;
    top: -35px;
    color: var(--primary);
    background-color: var(--tooltip);
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
}

@-webkit-keyframes pan-toolbar {
    0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
    30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
    70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
    100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
}

@keyframes pan-toolbar {
    0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
    30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
    70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
    100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
}

.icon-wrapper{
    opacity: 0.5;
    position: relative;
    border-radius: 5px;
    width: 40px;
    height: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    margin-left: 30px;
}

.icon-wrapper:hover{
    opacity: 1;
}

.icon-wrapper[class*="data-ally"]:focus::after {
    content: "";
    position: absolute;
    left: 0;
    top: -30%;
    width: 100%;
    height: 160%;
    border: 2px solid var(--accent);
    background: rgba(255, 255, 255, 0.01);
    border-radius: 5px;
}

/*TABLET*/
@media screen and (max-width: 735px){
    .icon-wrapper{
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-transform: scale(0.708);
            -ms-transform: scale(0.708);
                transform: scale(0.708);
        margin-left: 10px;
    }
    .icon-wrapper:hover{
        opacity: 0.5;
    }
}

.sun-rays{
    position: relative;
    right: -16px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid
      var(--primary);
    background: var(--primary);
    -webkit-transform: 1;
        -ms-transform: 1;
            transform: 1;
    -webkit-transition: all 0.45s ease;
    -o-transition: all 0.45s ease;
    transition: all 0.45s ease;
    overflow: hidden;
    -webkit-box-shadow: 0 -23px 0 var(--primary),
        0 23px 0 var(--primary),
        23px 0 0 var(--primary),
        -23px 0 0 var(--primary),
        15px 15px 0 var(--primary),
        -15px 15px 0 var(--primary),
        15px -15px 0 var(--primary),
        -15px -15px 0 var(--primary);
            box-shadow: 0 -23px 0 var(--primary),
        0 23px 0 var(--primary),
        23px 0 0 var(--primary),
        -23px 0 0 var(--primary),
        15px 15px 0 var(--primary),
        -15px 15px 0 var(--primary),
        15px -15px 0 var(--primary),
        -15px -15px 0 var(--primary);
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
            transform: scale(0.6);
}

.moon-or-sun{
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid
      var(--primary);
    background: var(--primary);
    -webkit-transform: 1;
        -ms-transform: 1;
            transform: 1;
    -webkit-transition: all 0.45s ease;
    -o-transition: all 0.45s ease;
    transition: all 0.45s ease;
    overflow: hidden;
}

.moon-mask{
    position: absolute;
    right: -1px;
    top: -8px;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    border: 0;
    background: var(--background-color);
    -webkit-transform: translate("0, 0");
        -ms-transform: translate("0, 0");
            transform: translate("0, 0");
    opacity: 1;
    -webkit-transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
    transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
    -o-transition: transform 0.45s ease, var(--color-mode-transition);
    transition: transform 0.45s ease, var(--color-mode-transition);
    transition: transform 0.45s ease, var(--color-mode-transition), -webkit-transform 0.45s ease;
}

.mask-to-sun-animation{
    -webkit-animation-name: mask-to-sun;
            animation-name: mask-to-sun;
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
}

.mask-to-moon-animation{
    -webkit-animation-name: mask-to-moon;
            animation-name: mask-to-moon;
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
}

.to-sun-animation{
    -webkit-animation-name: to-sun;
            animation-name: to-sun;
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
}

.to-moon-animation{
    -webkit-animation-name: to-moon;
            animation-name: to-moon;
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
}

.expand-rays{
    -webkit-animation-name: expand-rays;
            animation-name: expand-rays;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
}

.contract-rays{
    -webkit-animation-name: contract-rays;
            animation-name: contract-rays;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
}

@-webkit-keyframes mask-to-sun {
    from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
    to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
}

@keyframes mask-to-sun {
    from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
    to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
}

@-webkit-keyframes mask-to-moon {
    from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
    to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
}

@keyframes mask-to-moon {
    from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
    to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
}

@-webkit-keyframes to-sun {
    from {-webkit-transform: scale(1);transform: scale(1);}
    to {-webkit-transform: scale(0.5);transform: scale(0.5);}
}

@keyframes to-sun {
    from {-webkit-transform: scale(1);transform: scale(1);}
    to {-webkit-transform: scale(0.5);transform: scale(0.5);}
}

@-webkit-keyframes to-moon {
    from {-webkit-transform: scale(0.5);transform: scale(0.5);}
    to {-webkit-transform: scale(1);transform: scale(1);}
}

@keyframes to-moon {
    from {-webkit-transform: scale(0.5);transform: scale(0.5);}
    to {-webkit-transform: scale(1);transform: scale(1);}
}

@-webkit-keyframes expand-rays {
    from {-webkit-transform: scale(0.1);transform: scale(0.1);}
    to {-webkit-transform: scale(0.6);transform: scale(0.6);}
}

@keyframes expand-rays {
    from {-webkit-transform: scale(0.1);transform: scale(0.1);}
    to {-webkit-transform: scale(0.6);transform: scale(0.6);}
}

@-webkit-keyframes contract-rays {
    from {-webkit-transform: scale(0.6);transform: scale(0.6);}
    to {-webkit-transform: scale(0.1);transform: scale(0.1);}
}

@keyframes contract-rays {
    from {-webkit-transform: scale(0.6);transform: scale(0.6);}
    to {-webkit-transform: scale(0.1);transform: scale(0.1);}
}



.header-hidden{
    position: absolute;
    display: inline-block;
    opacity: 0;
    width: 0px;
    height: 0px;
    visibility: hidden;
    overflow: hidden;
}

/************************HEADER************************/

.page-button{
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    color: var(--primary);
}

.page-button:hover, .page-button:focus{
    opacity: 1;
    text-decoration: underline;
}

.page-number-button{
    font-weight: 400;
    font-size: 18px;
    text-decoration: none;
    color: var(--primary);
}

.page-number-button:hover, .page-number-button:focus{
    text-decoration: underline;
}

.spacer{
    opacity: 0.3;
}

.spacer::before{
    content: "...";
}

.mobiler-reference{
    font-weight: 400;
    color: var(--primary);
}

.mobile-reference em{
    font-style: normal;
    color: var(--primary);
}

.frame{
    position: relative;
    z-index: 1;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*TABLET*/
@media screen and (max-width: 735px){
    .frame{
        left: -15px;
    }
}