/*
******************************************************************
CSS for responsive

(c) sinntun.codes
******************************************************************
*/

@media only screen and (max-width: 87.5rem) {

    #head-canvas .topline {
        margin-right: 1.5625rem;
    }

    #head-canvas .wave-container .wave {
        width: 78.125rem;
    }

    #footer-canvas {
        grid-template-columns: 15.625rem 1fr 1fr;
    }

    #footer-canvas .center-right-column {
        grid-column: initial;
    }

    #footer-canvas .right-column {
        grid-column-end: 4;
    }
}

@media only screen and (max-width: 68.75rem) {
    #footer-canvas {
        display: flex;
        gap: 2.1875rem;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}


@media only screen and (max-width: 64rem) {

    /*****************************************************************
    *********** Canvases
    ******************************************************************/
    #main-navigation,
    #meta-navigation,
    #head-canvas .wave-container,
    #head-canvas .topline,
    #head-canvas #logo,
    #aside-canvas {
        display: none !important;
    }

    #main-canvas {
        width: 100%;
        min-width: 100%;
    }

    #logo-mobile {
        display: block;

    }

    #head-canvas .logo-container a {
        margin-left: 2.5000rem;
    }

    #head-canvas .logo-container a:focus-visible {
        outline-offset: .1rem;
    }

    #logo-mobile {
        margin-left: 0;
    }

    #head-canvas .logo-container {
        gap: 3.125rem;
    }

    .menu-trigger {
        display: initial;
    }

    #head-container {
        height: 1.875rem;
        margin: 1.875rem auto;
    }

    #head-canvas .image-container {
        padding-top: 1.25rem;
    }

    #footer-canvas {
        grid-template: initial;
    }

    #footer-canvas .center-right-column,
    #footer-canvas .right-column {
        grid-column: initial;
    }

    #footer-canvas .right-column a {
        display: flex;
        justify-content: center;
    }

    #footer-canvas .right-column a:not(:last-child) {
        margin-right: initial;
    }

    #footer-canvas img {
        margin: auto;
    }

    .footer-background-grey .nav-footer {
        justify-content: center !important;
    }

    body > .background {
        display: none;
    }
}

@media only screen and (max-width: 60rem) {
    #footer-canvas {
        flex-wrap: nowrap;
        flex-flow: column;
    }

    #footer-canvas .column {
        text-align: center;
    }
}

@media only screen and (max-width: 43.75rem) {
    #head-canvas .logo-container {
        gap: 2.5rem;
    }

    #logo-mobile {
        height: 3.75rem;
    }

    #head-canvas .logo-container .title .main {
        font-size: 1.5rem;
    }

    #head-canvas .logo-container .title .sub {
        font-size: 1.375rem;
    }

    .nav1-mobile-div.menu-1 {
        top: 4.375rem;
        height: calc(100vh - 4.375rem);
    }

    .menu-trigger {
        top: 1.375rem;
    }
}

@media only screen and (max-width: 32.5rem) {

    #head-canvas .logo-container {
        gap: 2.1875rem;
    }

    .nav1-mobile-div.menu-1 {
        top: 3rem;
        height: calc(100vh - 3rem);
    }

    #logo-mobile {
        height: 4.0625rem;
    }

    .menu-trigger {
        top: 0.625rem;
    }

    #head-canvas .logo-container .title .main {
        font-size: 1.625rem;
    }

    #head-canvas .logo-container .title .sub {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 32.5rem) {

    #head-canvas .logo-container {
        gap: 1.25rem;
    }

    #logo-mobile {
        height: 2.5rem;
    }

    #head-canvas .logo-container .title .main {
        font-size: 1rem;
    }

    #head-canvas .logo-container .title .sub {
        font-size: 0.875rem;
    }

}

#head-canvas .copyright {
    font-size: 0.75rem;
    /*margin-top: -1.4375rem;
    align-self: end;
    padding: 0.3125rem 0.3125rem 0 0.3125rem;
    z-index: 5;
    color: #707070;
    position: absolute;
    bottom: 0.313rem;
    right: 0;*/
    display: flex;
    justify-content: flex-end;
}

#head-canvas .ai-mark {
    position: absolute;
    bottom: 1.25rem;
    right: 0.313rem;
}

#head-canvas .ai-mark:before {
    content: '';
    background: url(/_images/ai-mark.svg) no-repeat;
    height: 1.5625rem;
    width: 1.5625rem;
    display: block;
    opacity: .4;
    position: relative;
    z-index: 50;
}

#head-canvas .image-container {
    position: relative;
}