/* HEADER xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.header{
        position    : fixed;
        top         : 0px;
        width       : 100vw;
        clear       : both;
        height      : 76px;
        background-color    : #e2e4eb;
        box-shadow  : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        z-index     : 1000;
}

div.header div.logo_background{
        width       : 237px;
        height      : 76px;
        background-color    : #404e67;
        float       : left;
        cursor      : pointer;
}

div.header div.logo_background img{
        position    : relative;
        left        : 50%;
        top         : 50%;
        transform   : translate(-50%,-50%);
}

@media(max-width: 1300px){
    
        div.header div.logo_background{
                width   : 200px;
        }
        
        div.header div.logo_background img{
                width   : 90%;
        }    
}

/* COMMON TO WHEN USER IS LOGGED IN AND LOGGED OUT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.header div.top_links_container{
        position    : absolute;
        top         : 0px;
        right       : 0px;
        font-family: 'Didact Gothic', sans-serif;
        color       : #303548;
}

div.header div.top_links_icon{
        width       : 35px;
        height      : 35px;
        border-radius       : 5px;
        float       : left;
        margin-right: 10px;
        text-align  : center;
        color       : #ffffff;
        font-weight : bold;
        font-size   : 22px;
        padding-top : 3px;    
}

div.header div.top_links_text{
        padding-top : 7px;
        font-weight : bold; 
        float       : left;
        margin-right: 40px;
}

div.header div.top_links_blue{
        float       : left;
        cursor      : pointer;
        padding-top : 22px;
        padding-bottom : 19px;        
}

div.header div.top_links_icon.blue{
        background-color    : #14a2fa;    
}

@media(max-width: 800px){

        div.header div.top_links_icon{
                margin-right    : 20px;
        }    
}

/* WHEN USER IS NOT LOGGED IN xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.header div.top_links_container.logged_out{
        /*width       : 510px;*/
}

div.header div.top_links_purple,
div.header div.top_links_ink{
        float       : left;
        cursor      : pointer;
        padding-top : 22px;
        padding-bottom : 19px;        
}

div.header div.top_links_icon.purple{
        background-color    : #7c4dff;    
}

div.header div.top_links_icon.ink{
        background-color    : #020d83;    
}

@media(max-width: 800px){
 
        div.header div.top_links_container.logged_out{
                width   : 60px;
        }                        
}

/* COMMUNITIES DROPDOWN MENU xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.header div.communities_submenu{
        position    : absolute;
        right       : 360px;
        top         : 76px;
        z-index     : 1000000;
        width       : 150px;
        height      : 61px;
        background-color: rgba(245,245,245,1);
        border-top  : 1px solid #404e67;
        border-bottom-left-radius: 10px 10px;
        border-bottom-right-radius: 10px 10px;        
        box-shadow  : -4px 8px 8px 0px #a9a3a3;
        color       : #393939;
        font-size   : 1.1em;
        display     : none;
}

div.header div.communities_submenu div.communities_row_1{
        height      : 61px;
        padding-top : 7px;
        cursor      : pointer;
        border-top  : 1px solid #404e67;
        border-bottom-left-radius: 10px 10px;
        border-bottom-right-radius: 10px 10px;         
}

div.header div.communities_submenu div.communities_row_1.highlight{
        background-color    : #e2e4eb;
}

div.header div.communities_submenu div.communities_row_1.highlight i{
        color               : #020d83;
}

div.header div.communities_submenu div.communities_left{
        float       : left;
        padding     : 10px 10px 10px 20px;
}

div.header div.communities_submenu div.communities_right{
        float       : left;
        padding     : 10px;
}

@media(max-width: 800px){
        div.header div.communities_submenu{
                right       : 0px;
        }
}

/* WHEN USER IS LOGGED IN xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.header div.top_links_container.logged_in{
        width       : 650px;
}

div.header div.top_links_green,
div.header div.top_links_orange,
div.header div.top_links_pink{
        float       : left;
        cursor      : pointer;
        padding-top : 22px;
        padding-bottom : 19px;
}

div.header div.top_links_icon.green{
        background-color    : #02c2bc;    
}

div.header div.top_links_icon.orange{
        background-color    : #fe9365;    
}

div.header div.top_links_icon.pink{
        background-color    : #d4166c;    
}

div.header div.top_links_pink div.top_links_text{
        margin-right: 20px;
}

/* ACCOUNT DROPDOWN MENU xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.header div.account_submenu{
        position    : absolute;
        right       : 0px;
        top         : 76px;
        z-index     : 1000000;
        width       : 200px;
        height      : 112px;
        background-color: rgba(245,245,245,1);
        border-top  : 1px solid #404e67;
        border-bottom-left-radius: 10px 10px;
        box-shadow  : -4px 8px 8px 0px #a9a3a3;
        color       : #393939;
        font-size   : 1.1em;
        display     : none;
}

div.header div.account_submenu div.account_row_1,
div.header div.account_submenu div.account_row_2{
        height      : 55px;
        padding-top : 7px;
        cursor      : pointer;
}

div.header div.account_submenu div.account_row_2{
        border-top  : 1px solid #404e67;
        border-bottom-left-radius: 10px 10px;
}

div.header div.account_submenu div.account_row_1.highlight,
div.header div.account_submenu div.account_row_2.highlight{
        background-color    : #e2e4eb;
}

div.header div.account_submenu div.account_row_1.highlight i,
div.header div.account_submenu div.account_row_2.highlight i{
        color               : #d4166c;
}

div.header div.account_submenu div.account_left{
        float       : left;
        padding     : 10px 10px 10px 20px;
}

div.header div.account_submenu div.account_right{
        float       : left;
        padding     : 10px;
}