/*
*  CUSTOM RESPONSIVE WEBSITE STYLES
*  Use this stylesheet to overwrite or define new rules for your website's visual appearance.
*  If you need to reference the location of image files, please start your URLs with "/images/".
*/

/* -- Viewport Styles ( Media Query $7 / Default 1161px ) -- */
@media (min-width: $7){


}


/* -- Viewport Styles ( Media Query $6 / Default 1160px ) -- */
@media (max-width: $6){
    .header .header_logo {
        width: 400px !important;
        height: 80px !important;
    }

}


/* -- Viewport Styles ( < 1027px ) -- */
@media (max-width: $5){
   


}


/* -- Viewport Styles ( < 1026px ) -- */
@media (max-width: $4){

}


/* -- Viewport Styles ( < 1025px ) -- */
@media (max-width: $3){


}


/* -- Viewport Styles ( < 1024px ) -- */
@media (max-width: $2){
    
    .website {
        z-index: 10;
        background-color: rgba(0,0,0,0.5);
    }
     
    
    .header .header_logo {
        width: 300px !important;
        height: 80px !important;
        float: right;
    }
    .action_buttons,
    .header .header_info .detail {
        display: none !important;
    }
    .nav_expanded .header {
        background-color: #000;
    }
    
    .nav, 
    .has_action_buttons .nav {
        position:absolute;
        top: 20px;
        padding: 0;
    }
    .nav .nav_wrapper, 
    .nav {
        width: 100%;
    }
    .nav .nav_toggle,
    .nav_expanded .nav .nav_toggle{
        border: none;
        background: none;
        background-color: transparent;
        left: 10px;
        font-size: 32px;
    }
    .nav .list_pages {
        margin-top: 60px;
        background-color: #000;
    }
    .website .top .action_button.pos1, 
    .website .top .action_button.pos2, 
    .website .top .action_button.pos3 {
        max-width: 40%;
    }
    .nav .list_pages .item_page .link, 
    .nav .list_pages .item_page:hover .link, 
    .nav .list_pages .item_page.active .link {
        font-size: 24px;
        line-height: 42px;
    }
    .page {
        min-height: 300px;
    }
}



/* -- Viewport Styles ( Media Query $1 / Default 540px ) -- */
@media (max-width: $1){
    .action_buttons {
        display: initial !important;
    }
    .header .header_logo {
        width: 250px !important;
        height: 70px !important;
    }

}


/* -- Viewport Styles ( Media Query $0 / Default 320px ) -- */
@media (max-width: $0){


}