/* Add fonts to header */
@font-face {
    font-family: 'Lato-Regular';
    src: url('./fonts/lato/Lato-Regular.ttf')  format('truetype');
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('./fonts/lato/Lato-Bold.ttf')  format('truetype');
}

@font-face {
    font-family: 'Lato-Black';
    src: url('./fonts/lato/Lato-Black.ttf')  format('truetype');
}

@font-face {
    font-family: 'Lato-Semibold';
    src: url('./fonts/lato/Lato-Semibold.ttf') format('truetype');
}

/* Desktop CSS starts */
body {
    background-color: white;
}

#header {
    box-shadow: 0 -3px 19px 0 rgba(28,28,28,.1);
}

.left-nav-desktop {
    display: block;

    width: 33.3%;
    height: 70px;
}

.left-nav-sm-desktop,.left-nav-mobile,.right-nav-mobile {
    display: none;
}

.center-inner-div {
    display: flex;

    align-items: center;
    justify-content: center;
}

.display-flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.header-links {
    display: inline-block;

    padding: 23px 15px;
    
    color: #000;
    
    outline: 0;
    
    font-family: 'Lato-Bold';
    font-size: 15px;
}

.hiring-button {
    padding: 10px;

    width: 186px;
    height: 34px;

    color: #337ab7;
    
    font-family: 'Lato-Semibold';
    font-size: 15px;
    
    cursor: pointer;
    
    background-color: #edf7ff;
    border-radius: 3px;
    box-shadow: 0 1px 3px 1px rgba(182,221,255,.52);
}

.signin-button {
    padding: 10px;

    margin-left: 22px;

    width: 85px;
    height: 34px;

    background-color: #337ab7;
    border-radius: 3px;
    box-shadow: 0 1px 5px 1px rgba(51,122,183,.2);
    
    cursor: pointer;
}

.signin-button a {
    color: #fff;
 
    font-family: 'Lato-Semibold';
    font-size: 15px;
}

.header-logo-desktop {
    width: 33.3%;
    height: 70px;
}

.header-logo-desktop img {
    width: 200px;
    height: 30px;
}

.header-logo-tab {
    display: none;
}

.right-nav {
    width: 33.33%;
}

.sidebar-overlay-container {
    display: none;
}

/* Large Tablet CSS*/
@media only screen and (max-width: 1150px) {
    .left-nav-desktop,.left-nav-mobile {
        display: none;
    }

    .left-nav-sm-desktop {
        display: flex;

        width: 33.3%;
        height: 70px;

        align-items: center;
        justify-content: center;
        
    }
}

/* Small Tablet CSS*/
@media only screen and (max-width: 1000px) {
    .header-logo-desktop {
        display: none;
    }

    .header-logo-tab {
        display: inline-flex;

        width: 29.3%;
        height: 70px;
    }

    .header-logo-tab img{
        width:60px; 
        height:30px;
    }

    .hiring-button {
        font-size: 13px;
    }

    .signin-button a {
        font-size: 13px;
    }

    .header-links {
        padding: 20px 13px;

        font-size: 13px;    
    }
}

/* Small Tablet CSS*/
@media (max-width: 767px) and (min-width: 600px) {
    .header-logo-tab {
        width: 25.3%;
    }

    .right-nav {
        width: 35.33%;
    }

    .hiring-button {
        font-size: 1.8vw;
    }

    .signin-button a {
        font-size: 1.8vw;
    }

    .header-links {
        padding: 7% 3%;

        font-size: 1.8vw;    
    }
}

/* Mobile CSS */
@media (max-width: 600px) {
    
    .left-nav-desktop,.left-nav-sm-desktop,.right-nav {
        display: none;
    }

    .left-nav-mobile {
        display: block;

        width: 33.3%;
        
        cursor: pointer;
    }

    .left-nav-mobile img {
        margin-left: 20px;

        height: 20px;
        width: 20px;
    }

    .right-nav-mobile {
        display: inline-block;

        width: 33.3%;

        text-align: right;
    }

    .right-nav-mobile img{
        margin-right: 20px;
        
        width: 20px;
        height: 20px;
    }

    .header-logo-desktop {
        display: inline-flex;
    }

    .header-logo-tab {
        display: none;
    }

    .sidebar-overlay-container {
        display: block;
        
        position: fixed;

        width: 0;
        height: 100%;
        
        top: 0;
        left: 0;
        
        background-color: #fff;
        
        z-index: 100;
        overflow-x: hidden;
        transition: width .2s ease-in-out;
    }

    .actual-sidebar-width {
        width: 80%;
    }

    #backdrop-overlay {
        display: none;

        position: absolute;
        
        width: 100%;
        height: 100%;

        background: rgba(0,0,0,0.4);
        
        z-index: 10;
    }

    .sidebar-fp-logo {
        margin: 32px 0 57px 32px;
    } 

    .sidebar-fp-logo img {
        width:200px;
        height:30px;
    }

    .sidebar-link {
        display: block;

        padding-left: 27px;
        
        margin: 10px auto 10px auto;
        
        color: black;
        
        font-family: 'Lato-Semibold';
        font-size: 16px;
    }
}

@media (max-width: 346px) {
    .sidebar-fp-logo img {
        width: 175px;
    }
}