

    :root{
    
        --color-primary                 : #ffcd00;
        --color-primary-ligter          : #ffe785;
        --color-ascent                  : #ededed;
        --color-ascent-100              : #e4e4e4;
        --color-ascent-200              : #dbdbdb;
        --color-ascent-300              : #d2d2d2;
        --color-text-primary            : #333333;
        --color-text-secondary          : #8c8c8c;
        --color-text-dim                : #aeaeae;
        --color-text-light              : #f0f0f0;
        --color-link                    : #999999;
        --color-link-side-hover         : #878787;
        --color-frame                   : #f5f5f5;
        --color-separator               : #ebebeb;
        --color-gray-steper             : #d5d5d5;
        --color-input-border            : #d6d6d6;
        --color-input-border-focus      : #9c9c9c;
        --color-input-border-disabled   : #dddddd;
        --color-table-fill              : #fafafa;
        --color-table-border            : #f0f0f0;
        --color-warning                 : #eb0f1a;
        --color-info                    : #1473e6;
        --color-dark                    : #585858;
        --color-dark-lighter            : #6b6b6b;
        --color-side-bg                 : #f2f2f2;
        --color-confirm                 : #cee7b2;
        --color-confirm-200             : #a8d576;
        --color-refuse                  : #ffbcbc;
        --color-refuse-200              : #fd9a9a;
        
        --padding-body-x                : 15px;
        --padding-body-y                : 15px;
        --padding-block-y               : 50px;
        --padding-box-x                 : 20px;
        --padding-box-y                 : 20px;
        
        --gap-small                     : 15px;
        --gap-normal                    : 20px;
        --gap-large                     : 30px;
        
        --height-logo                   : 22px;
        --height-main-menu              : 75px;
        --width-page                    : 1500px;
    }
    
@media only screen and (max-width: 1390px){

    :root{
    
        --padding-body-x                : 15px;
        --padding-body-y                : 15px;
        --padding-box-x                 : 15px;
        --padding-box-y                 : 15px;
        
        --gap-small                     : 10px;
        --gap-normal                    : 15px;
        --gap-large                     : 20px;
        
        --height-logo                   : 20px;
        --height-main-menu              : 65px;
        
        }
    
        .favorite__grid{
            grid-template-columns : 1fr 1fr 1fr;
        }
    
        .about{
            gap: 30px;
        }
    
        .about h1{
            font-size: 1.6rem;
        }
        
        .about__text{
            font-size: .9rem;
            line-height: 1.4rem;
        }
        
        .appsGrid{
            grid-template-columns: 1fr;
        }
        
        .appsGrid h2 {
            font-size: 1.3rem;
        }
        
        .appsGrid h3 {
            font-size: .85rem;
        }
    


}    
    

@media only screen and (max-width: 990px){

    :root{
    
        --padding-block-y               : 20px;
        --height-logo                   : 18px;
        --height-main-menu              : 55px;
        
        }
    
        .pageheader__after--desktop,
            [a-nav-type="main"],
            [a-nav-type="lng"]{
            display: none;
        }
        
        .pageheader__after--mobile{
            display: initial;
        }
        
        .favorite__grid{
            grid-template-columns : 1fr 1fr;
        }
        
        .pageheader__contact{
            justify-content: space-between;
            width: 100%;
        }
    
        .about{
            flex-direction: column;
            padding: 0 var(--padding-block-y);
        }
        
        .about__content{
            width: 100%;
            max-width: 700px;
            text-align: center;
            align-items: center;
            order: 2;
        }
        
        .about__picture{
            width: 100%;
            max-width: 500px;
            order: 1;
        }
        
        .appDetail__graphic{
            display: none;
        }
    

}


@media only screen and (max-width: 790px){

        .button{
            height: 45px;
            font-size: .75rem;
            padding: 0 25px;
            
        }

        .button--small{
            font-size: .65rem;
            padding: 0 12px;
            height: 34px;
        }
    
        .favorite__grid{
            grid-template-columns : 1fr;
        }
    
        .appsGrid__image{
            display: none;
        }
        
        .filterselect{
            display: block;
        }
        
        .filterbar{
            display:none;
        }
        
    
    

}
