/*
    === Fonts system ===

    Initial Desktop:

    Basis: 21px (main text)
    Large: 25px (21px -> 1.19em) (features in product, header description in product, related categories, promo-article base font)
    Extra: 35px (audio categories, header description in promo-article, h3)
    Small: 18px (21px -> .86em) (secondary main menu, copyrights in footer)
    h1: 64px
    h2: 50px
    h3: 35px

 */


body
{
    width: auto;
    min-width: 960px;
    max-width: unset;
}

.content-wrap
{
    width: auto;
    min-width: 960px;
    max-width: 1920px;
}

.content-wrap-fixed
{
    width: 1425px;
    min-width: unset;
    max-width: unset;

    padding: 0 40px;
}



.app-navigation__container
{
    max-width: 1425px;
}






/*--- Media Queries -----------------------------------------------------------------------------*/


/*--- All iPad's in portrait & landscape ---*/

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
{

}

@media only screen
and (max-device-width: 768px)
and (orientation: portrait)
{

}





/*--- All desktops, laptops and mobiles: ---*/

/* Rules (max-width: px) must be listed
in descending order: 1600 -> 1200 -> 1024 etc. */



@media only screen
and (max-width: 1920px)
{

} /*-- END @media (max-width: 1920px) --*/






@media only screen
and (max-width: 1500px)
{
    .body-categories,
    .body-category,
    .body-product-classic
    {
        min-width: 960px;
    }

    .content-wrap-fixed
    {
        width: 960px;
        min-width: unset;
    }

    .product__spec__table__section
    {
        min-width: 960px;
    }

    .contacts__hotline,
    .feedback
    {
        width: 600px;
        padding: 0;
    }

} /*-- END @media (max-width: 1500px) --*/






@media only screen
and (max-width: 1024px)
{
    /*=== Fonts system ===*/
    body
    {
        font-size: 25px;
    }

    .login-menu
    {
        font-size: 25px;
    }

    .categories__item__text
    {
        font-size: 35px;
    }

    .categories.small .categories__item__text
    {
        font-size: 31px;
    }

    .product__header__description
    {
        font-size: 31px;
    }

    .product__spec__usp
    {
        font-size: 31px;
    }

    .footer__copy
    {
        font-size: 21px;
    }
    /*=== Fonts system ===*/



    .promo-block__text
    {
        padding: 60px;
    }

    .promo-block__text__p-half
    {
        margin-bottom: .5em;
    }



    /*--  App Navigation: Main Menu to mobile hamburger transformation --*/
    .header
    {
        height: 0;
    }

    .app-navigation
    {
        position: static;
    }

    .app-navigation__container
    {
        width: auto;
        margin: unset;

        flex-direction: column-reverse;
        justify-content: flex-end;
    }

    .logo
    {
        width: 130px;
    }

    .login-menu
    {
        margin-bottom: 40px;

        justify-content: left;
    }

    .main-menu
    {
        margin-top: 80px;

        justify-content: left;
        align-items: start;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .login-menu .cnavbar,
    .main-menu .cnavbar
    {
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .search-form
    {
        padding-top: 1.4em;
        padding-bottom: 1.4em;

        position: static;
    }

    .search-form__input
    {
        width: 270px;
    }

    .login-menu,
    .main-menu .cnavbar,
    .search-form
    {
        width: 400px;
        margin-left: auto;
        margin-right: 60px;
        display: none;
    }

    .hamburger
    {
        display: block;
        top: 28px;
        right: 30px;
    }

    .hamburger__icon
    {
        width: 40px;
        height: 32px;
    }
    /*-- END App Navigation: Main Menu to mobile hamburger transformation --*/



    /*-- Categories: Audio --*/
    .categories__item
    {
        width: 420px;
    }

    .categories__item__text
    {
        padding: 40px 50px;
    }

    .categories.small .categories__item
    {
        width: 420px;
    }
    /*-- END Categories: Audio --*/


} /*-- END @media (max-width: 1024px) --*/






@media only screen
and (max-width: 768px)
{
    body
    {
        min-height: 1663px;
    }



    /*=== Fonts system ===*/
    .login-menu
    {
        font-size: 35px;
    }

    .main-menu
    {
        font-size: 35px;
    }
    /*=== Fonts system ===*/



    /*-- App Navigation: Main Menu --*/
    .login-menu
    {
        margin-bottom: 60px;
    }
    /*-- END App Navigation: Main Menu --*/


} /*-- END @media (max-width: 768px) --*/






@media only screen
and (max-width: 530px)
{

    /*-- App Navigation: Main Menu --*/
    .app-navigation
    {
        min-height: 105px;
    }

    .logo
    {
        width: 180px !Important;
    }

    .hamburger
    {
        top: 30px;
        right: 40px;
    }

    .hamburger__icon
    {
        width: 50px;
        height: 40px;
    }
    /*-- END App Navigation: Main Menu --*/


} /*-- END @media (max-width: 530px) --*/





@media only screen
and (max-width: 375px)
{
    /*=== Fonts system ===*/
    body
    {
        font-size: 31px;
    }

    body,
    .btn-lg
    {
        font-weight: 400;
    }

    .login-menu
    {
        font-size: 45px;
    }

    .main-menu
    {
        font-size: 45px;
    }

    .promo-block .btn
    {
        font-size: inherit;
    }

    .categories__item__text
    {
        font-size: 35px;
    }

    .categories.small .categories__item__text
    {
        font-size: 35px;
    }

    .product__header__description
    {
        font-size: 31px;
    }

    .product__spec__usp
    {
        font-size: 31px;
    }

    body.body-product-classic .promo-block
    {
        font-size: 31px;
    }

    .footer__copy
    {
        font-size: 25px;
    }
    /*=== Fonts system ===*/



    /*-- App Navigation: Main Menu --*/
    .app-navigation
    {
        min-height: 120px;
    }

    .logo
    {
        width: 200px !Important;
        top: 30px;
    }

    .login-menu,
    .main-menu .cnavbar,
    .search-form
    {
        width: 500px;
    }

    .search-form__input
    {
        width: 360px;
    }

    .search-form__submit
    {
        margin-bottom: -20px;
    }

    .hamburger
    {
        top: 35px;
        right: 45px;
    }

    .hamburger__icon
    {
        width: 60px;
        height: 48px;
    }
    /*-- END App Navigation: Main Menu --*/



    .color-switch
    {
        height: 90px;
    }

    .color-switch__handle
    {
        width: 35px;
        height: 35px;
        margin-right: 30px;

    }

    .color-switch__handle.active:after
    {
        width: 45px;
        height: 45px;
    }



    .product__related .product-list__item
    {
        width: 420px;
    }



    .scroll-to-page-top
    {
        font-size: 66px;
        line-height: 66px;
    }



    .contacts__hotline,
    .feedback
    {
        width: 100%;
    }



    .login__bubble
    {
        max-width: 600px;
    }


} /*-- END @media (max-width: 375px) --*/