:root {
    --header-height: 32px;
}    
    
body {
    background-image: url(../../../img/bg/top/sm.png);
    padding-top: 0;
}

header {
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
    background-color: transparent;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    background-color: var(--white);
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #171717;
}

/*
Texts
*/
.text__address-white {
    margin-top: 2px;
}

/*
Main Block
*/
main {
    height: calc(100% - var(--header-height));
    padding-bottom: var(--spacing-7);
}

/*
Medium Screens
*/
@media only screen and (min-width: 768px) {

    :root {
        --header-height: 57px;
    }

    .menu a {
        color: var(--white);
        font-size: var(--spacing-9);
        text-shadow: 2px 1px 12px rgba(0, 0, 0, 0.35);
        letter-spacing: 1.04px;
        font-weight: bold;
    }
    
    main {
        padding-top: 0;
        padding-bottom: var(--spacing-4);
    }

    .text__title-white {
        margin-top: var(--spacing-4);
    }
    .text__address-white {
        margin-top: var(--spacing-11);
    }

}

/*
Large Screens
*/
@media only screen and (min-width: 992px) {

    :root {
        --header-height: 70px;
    }

    body {
        background-image: url(../../../img/bg/top/lg.png);
    }

    header {
        padding-top: var(--spacing-4);
    }

    #main__menu {
        margin-top: 58px;
    }
    #main__menu nav {
        padding-right: 0;
    }

    .menu a {
        text-shadow: 2px 1px 12px rgba(0, 0, 0, 0.5);
    }

    .text__title-white {
        margin-top: 0;
    }
    .text__address-white {
        margin-top: 40px;
    }

}

/*
Extra Large Screens
*/
@media only screen and (min-width: 1200px) {

    body {
        background-image: url(../../../img/bg/top/xl.png);
    }    

}

@media only screen and (min-width: 1690px) {

    :root {
        --header-height: 109px;
    }

    header {
        padding-top: 61px;
    }

    .menu a {
        text-shadow: 1px 1px 14px rgba(0, 0, 0, 0.5);
        letter-spacing: 1.21px;
    }

    main {
        padding-bottom: 60px;
    }
    #main__menu {
        margin-top: 67px;
    }

}

/*
Max Width 767px & DPI 2
*/
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (max-width: 767px) and (min-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (min-resolution: 192dpi),
    only screen and (max-width: 767px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../../../img/bg/top/sm@2x.png);
    }

}

/*
Max Width 767px & DPI 3
*/
@media only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 9/4),
       only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (max-width: 767px) and (min-device-pixel-ratio: 2.25),
       only screen and (max-width: 767px) and (min-resolution: 2.25dppx) {

    body {
        background-image: url(../../../img/bg/top/sm@3x.png);
    }

}

/*
Min Width 768px & DPI 2
*/
@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 768px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (min-resolution: 192dpi),
    only screen and (min-width: 768px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../../../img/bg/top/md@2x.png);
    }

}

/*
Min Width 768px & DPI 3
*/
@media only screen and (min-width: 768px) and (-o-min-device-pixel-ratio: 9/4),
       only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-width: 768px) and (min-device-pixel-ratio: 2.25),
       only screen and (min-width: 768px) and (min-resolution: 2.25dppx) {

    body {
        background-image: url(../../../img/bg/top/md@3x.png);
    }

}

/*
Min Width 992px & DPI 2
*/
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 992px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (min-resolution: 192dpi),
    only screen and (min-width: 992px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../../../img/bg/top/lg@2x.png);
    }

}

/*
Min Width 992px & DPI 3
*/
@media only screen and (min-width: 992px) and (-o-min-device-pixel-ratio: 9/4),
       only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-width: 992px) and (min-device-pixel-ratio: 2.25),
       only screen and (min-width: 992px) and (min-resolution: 2.25dppx) {

    body {
        background-image: url(../../../img/bg/top/lg@3x.png);
    }

}

/*
Min Width 1200px & DPI 2
*/
@media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 1200px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 1200px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 1200px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 1200px) and (min-resolution: 192dpi),
    only screen and (min-width: 1200px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../../../img/bg/top/xl@2x.png);
    }

}