/* ==========================================================================
   HEADER.CSS
   E-Strategic Website
   Desktop Version
   ========================================================================== */


/* ==========================================================================
   OUTER HEADER
   ========================================================================== */

.outer_header{

    width:100%;
    margin:0;
    padding:12px 0;
    background:transparent;

}


/* ==========================================================================
   HEADER PANEL
   ========================================================================== */

.header{

    width:994px;
    max-width:100%;

    margin:0 auto;

    background:#f4f4f4;

    border:1px solid #d7d7d7;

    box-sizing:border-box;

    padding:14px 18px 0;

}


/* ==========================================================================
   HEADER RIGHT
   ========================================================================== */

.header_right{

    width:100%;

}


/* ==========================================================================
   TOP ROW
   ========================================================================== */

.header_top{

    display:grid;

    grid-template-columns:150px 330px 185px;

    justify-content:space-between;

    align-items:start;

    column-gap:18px;

}


/* ==========================================================================
   LOGO
   ========================================================================== */

.logo{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:4px;

}

.logo img{

    width:135px;

    height:auto;

    display:block;

}


/* ==========================================================================
   LOGIN
   ========================================================================== */

.login{

    width:100%;

}

.login_top{

    background:#ffffff;

    border:1px solid #d8d8d8;

    border-radius:16px;

    box-shadow:0 1px 4px rgba(0,0,0,.08);
    
    width:360px; 

    padding:18px 22px;

}

.login_h2{

    margin:0 0 12px;

    padding:0;

    font-size:18px;

    font-weight:normal;

    color:#444;

}

.login_form ul{

    margin:0;

    padding-top:5px;

    list-style:none;

}

.login_form li{

    margin-bottom:14px;

}

.login_form input{

    width:100%;

    height:32px;

    padding:0 12px;

    border:1px solid #cccccc;

    border-radius:16px;

    box-sizing:border-box;

    font-size:14px;

}

.login_form input:focus{

    outline:none;

    border-color:#8cc63f;

}

.success_message{

    min-height:0;

}

.login_form_errors{

    margin-top:4px;

    font-size:12px;

}

[aria-current="disable"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: white;
}


/* ==========================================================================
   SOCIAL PANEL
   ========================================================================== */

.follow{

    background:#ffffff;

    border:1px solid #d8d8d8;

    border-radius:16px;

    box-shadow:0 1px 4px rgba(0,0,0,.08);

    padding:14px 16px;

    box-sizing:border-box;

}

.follow_data ul{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    align-items:center;

    gap:8px;

}

.follow_us{

    font-weight:bold;

    color:#555;
    
    margin-bottom:3px;

}

.numbers{

    margin-top:16px;

    line-height:1.4;

    font-size:15px;

    font-weight:bold;

    color:#444;

}

.emailtop{

    margin-top:10px;

}

.emailtop a{

    color:#21007f;

    text-decoration:none;

    font-style:italic;

    font-weight:bold;

}

.emailtop a:hover{

    text-decoration:underline;

}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.main_navigation{

    margin-top:2px;

}


/* ==========================================================================
   CLEAN UP
   ========================================================================== */

.clear{

    display:none;

}

.header_social_icon{

    width:20px;

    height:20px;

    display:block;

    margin:0 4px;

    transition:transform .2s ease;

}

.header_social_icon:hover{

    transform:scale(1.08);

}

/* ==========================================================================
   TABLET
   ========================================================================== */

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

    /* ----------------------------------------------------------
       HEADER
       ---------------------------------------------------------- */

    .header{

        width:96%;

        padding:16px;

    }

    /* ----------------------------------------------------------
       TOP ROW
       ---------------------------------------------------------- */

    .header_top{

        display:grid;

        grid-template-columns:1fr 1fr;

        grid-template-areas:
            "logo logo"
            "login social";

        column-gap:20px;

        row-gap:20px;

        align-items:start;

    }

    .logo{

        grid-area:logo;

        justify-content:center;

        padding-top:0;

    }

    .login{

        grid-area:login;

        width:100%;

        max-width:360px;

        justify-self:end;

    }

    .follow{

        grid-area:social;

        width:100%;

        max-width:220px;

        justify-self:start;

    }

    /* ----------------------------------------------------------
       NAVIGATION
       ---------------------------------------------------------- */

    .main_navigation{

        margin-top:10px;

    }

}

/* ==========================================================================
   MOBILE
   ========================================================================== */

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

    /* ----------------------------------------------------------
       HEADER PANEL
       ---------------------------------------------------------- */

    .header{

        width:100%;

        margin:0;

        padding:12px;

        border-left:none;

        border-right:none;

        box-sizing:border-box;

    }

    /* ----------------------------------------------------------
       HEADER LAYOUT
       ---------------------------------------------------------- */

    .header_top{

        display:grid;

        grid-template-columns:1fr;

        grid-template-areas:

            "logo"
            "login"
            "social";

        row-gap:16px;

    }

    .logo{

        grid-area:logo;

        justify-content:center;

        text-align:center;

    }

    .logo img{

        width:115px;

        height:auto;

    }

    .login{

        grid-area:login;

        width:100%;

        max-width:420px;

        justify-self:center;

    }

    .follow{

        grid-area:social;

        width:100%;

        max-width:420px;

        justify-self:center;

        text-align:center;

    }

    .follow_data ul{

        justify-content:center;

    }

    .numbers,
    .emailtop{

        text-align:center;

    }

    /* ----------------------------------------------------------
       NAVIGATION
       ---------------------------------------------------------- */

    .main_navigation{

        margin-top:16px;

    }

    #frontNav{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:14px;

    }

}