/* GOOGLE FONTS - OPEN SANS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* GOOGLE FONTS - SOURCE SANS PRO */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');


:root{
    --font1: 'Open Sans', sans-serif;
    --font2: 'Source Sans Pro', sans-serif;
    --color1: #B98D3B;
    --color2: #311E10;
}

::placeholder{
    font-size: 1em;
    font-weight: bolder;
    text-transform: capitalize;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

a{
    color: inherit;
    text-decoration: none;
}

img{
    width: 100%;
}

body{
    font-family: var(--font2);
    font-size: 15px;
}



/* Flexbox Classes */
.flex{
    display: flex;
}

.wrap{
    flex-wrap: wrap;
}

.row-center{
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.row-center-center{
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.row-start{
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.row-start-center{
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.row-end{
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
}

.row-end-center{
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.row-between{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.row-between-center{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.row-around{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
}

.row-around-center{
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.row-even{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
}

.row-even-center{
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.column-center{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.column-center-center{
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.column-start{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.column-start-center{
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.column-end{
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.column-end-center{
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

section{
    padding: 10px 100px;
}



/* NAVBAR */
.navbar{
    width: 100%;
    height: auto;
    padding-top: 10px;
}

.navbar .top{
    width: 100%;
    height: auto;
    padding: 5px 100px;
    border-bottom: 2px solid var(--color2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.navbar .top .outlink{
    width: fit-content;
    height: auto;
    font-family: var(--font1);
    font-size: 1em;
    font-weight: bold;
    text-transform: capitalize;
}

.navbar .top .outlink .icon{
    margin-right: 5px;
    font-size: 1.2em;
}

.navbar .top .school-link{
    width: fit-content;
    height: auto;
    font-family: var(--font1);
    font-size: 1em;
    font-weight: bold;
    text-transform: capitalize;
}

.navbar .mid{
    width: 100%;
    height: auto;
    padding: 20px 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.navbar .mid .logo{
    width: fit-content;
    max-width: 50%;
    height: auto;
    font-family: var(--font1);
    font-size: 1.75em;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--color2);
}

.navbar .mid .logo .eph{
    text-transform: uppercase;
}

.navbar .mid .issue-link{
    width: fit-content;
    margin-right: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.navbar .mid .issue-link .issue-pic{
    width: 100px;
    height: auto;
    margin-right: 15px;
}

.navbar .mid .issue-link .issue-deets{
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.navbar .mid .issue-link .issue-deets .const{
    width: fit-content;
    height: auto;
    padding: 5px 0;
    margin: 5px 0;
    border-bottom: 2px solid var(--color2);
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
    column-rule: var(--color2);
}

.navbar .mid .issue-link .issue-deets .var .cert{
    margin-top: 10px;
    font-weight: bold;
    color: var(--color2);
}

.navbar .down{
    width: 100%;
    height: auto;
    padding: 0px 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color2);
    color: #fff;
}

.navbar .down ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
}

.navbar .down ul .toplink{
    cursor: pointer;
    width: fit-content;
    height: auto;
    border-right: 1px solid #fff;
    text-transform: capitalize;
}

.navbar .down ul .toplink:first-child{
    border-left: 1px solid #fff;
}

.navbar .down ul .toplink a{
    display: inline-block;
    padding: 15px 20px;
}

.navbar .down ul .toplink:hover{
    background-color: #5c3920;
}

/* DROPDOWN */
.drop{
    position: relative;
    padding: 15px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.drop .icon{
    margin-left: 10px;
    font-size: .75em;
}

.drop .drop-content{
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    height: auto;
    overflow: hidden;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #eee;
    color: #000;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    transition: 1s ease;
}

.drop .drop-content a{
    width: 100%;
    height: auto;
    padding: 15px 25px;
    font-weight: bold;
    text-transform: capitalize;
}

.drop:hover .drop-content{
    display: flex;
}

.drop-content a:hover{
    background-color: var(--color2);
    color: #fff;
}

.navbar .down .action{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.navbar .down .action a{
    cursor: pointer;
    width: fit-content;
    height: auto;
    padding: 14px 10px;
    border: 1px solid var(--color2);
    text-transform: capitalize;
    font-weight: bold;
    background-color: #fff;
    color: #000;
}

.navbar .down .action a:hover{
    background-color: #eee;
}

.navbar .menubtn{
    display: none;
    position: relative;
    width: fit-content;
    height: auto;
    cursor: pointer;
    font-size: 1.25em;
}
.navbar .menubtn .first{
    display: block;
    width: auto;
}

.navbar .menubtn .second{
    display: none;
    width: auto;
}

/* MOBILE MENU */
.mobile-menu{
    width: 100%;
    height: 0;
    overflow: hidden;
    margin-top: 0px;
    padding: 0px 30px;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: var(--color2);
    color: #fff;
    transition: height .4s ease;
}

.mobile-menu .link{
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
}

.mobile-menu .link.last{
    margin-top: 20px;
}

.mobile-menu .colla-text{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
    color: #eee;
}

.mobile-menu .colla-text .icon{
    margin-left: 7px;
}

/* COLLAPSIBLE */
.mobile-menu .collapsible{
    margin-top: 20px;
}

.mobile-menu .collapsed{
    width: 100%;
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: max-height 0.4s ease;
}

.mobile-menu .collapsed .link{
    margin-bottom: 7px;
}

.collapser{
    background-color: #ccc;
    color: #000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    font-weight: bold;
}

.active, .collapser:hover{
    background-color: #ccc;
}

.collapser:after{
    content: '\002B';
    color: #000;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.collapser .active:after{
    content: "\2212";
}

.content{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.part{
    width: 100%;
    height: auto;
    padding: 10px 20px;
    background-color: #eee;
}

.part a{
    display: inline-block;
    margin-bottom: 7px;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
    text-decoration: underline;
    color: var(--color1);
}

.content .part:last-child{padding-bottom: 20px;}

/* BOARD */
/* .board{
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.board tr:nth-child(even){
    background-color: #f2f2f2;
}

.board th{
  padding: 10px 15px;
  border: 2px solid #ccc;
  border-bottom: 2px solid #000;
  text-transform: capitalize;
  background-color: #fff;
  color: #000;
}

.board td{
    border: 1px solid #aaa;
    padding: 10px 15px;
    font-weight: bold;
} */

.main{
    width: 60%;
    height: auto;
    padding-top: 30px;
}

.submain{
    width: 30%;
}

.between{
    width: 100%;
    height: 50px;
}

.general{
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    /* border-top: 3px solid var(--color1);
    border-bottom: 3px solid var(--color1); */
    font-size: 1.25em;
    font-weight: bold;
    text-transform: capitalize;
    background-color: #ccc;
}

ul.alter li{
    margin: 7px 0;
}

/* SIDE */
.side{
    width: 100%;
    height: auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.side .intro{
    width: 100%;
    height: auto;
    padding: 10px;
    font-size: 1.1em;
}

.side .call{
    width: 100%;
    height: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    justify-content: center;
    background-color: #eee;
}

.side .call .head{
    padding: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid #000;
    font-size: 1.25em;
    font-weight: bold;
}

.side .call .linka{
    text-transform: capitalize;
    text-decoration: underline;
    font-weight: bold;
    color: var(--color1);
}

.side .listed{
    width: 100%;
    height: auto;
    padding: 20px;
    list-style-type: square;
    list-style-position: inside;
    background-color: #eee;
}

.side .listed .sub-head{
    width: fit-content;
    padding: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid #000;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
}

.side .listed li{
    width: fit-content;
    margin-bottom: 3px;
    font-weight: bold;
    color: var(--color1);
}

.side .listed li:hover a{
    text-decoration: underline;
    padding-left: 10px;
}



/* HERO */
.cast{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.header{
    width: fit-content;
    height: auto;
    padding: 5px;
    margin-bottom: 7px;
    border-bottom: 3px solid var(--color1);
    font-family: var(--font1);
    font-size: 1.15em;
    font-weight: 600;
    text-transform: capitalize;
}

.emphasis{
    width: 85%;
    text-align: justify;
}

.org{
    list-style-type: decimal;
}

.org li{
    margin-bottom: 10px;
}

.org li .lead{
    text-transform: capitalize;
    font-weight: bold;
    text-decoration: underline;
}

.locals{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.locals .local-link{
    position: relative;
    width: 60%;
    height: auto;
    padding: 10px 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font1);
    font-weight: bold;
    text-transform: capitalize;
    background-color: var(--color1);
    color: #fff;
    transition: .3s all ease;
}

.locals .local-link .icon{
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.locals .local-link:hover{
    background-color: #555;
}

.linking{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.linking .downlink{
    width: fit-content;
    height: auto;
    margin-bottom: 10px;
    font-family: var(--font1);
    font-weight: bold;
    text-decoration: underline;
    text-transform: capitalize;
    color: var(--color1);
}

.linking .downlink:hover{
    color: var(--color2);
}

.inlink{
    font-weight: bold;
    text-decoration: underline;
    color: var(--color1);
}

ul.editorials{
    width: 100%;
    padding: 20px 40px;
    list-style-type: square;
    background-color: #eee;
}

ul.editorials li{
    margin-bottom: 40px;
}

ul.editorials li h3{
    margin: 5px 0;
    text-transform: uppercase;
}

ul.editorials li span.univ{
    display: inline-block;
    text-transform: capitalize;
    font-style: italic;
}

ul.editorials li p{
    text-transform: uppercase;
    text-decoration: underline;
}

ul.editorials li span.univ a{
    margin-left: 5px;
    text-transform: lowercase;
    text-decoration: underline;
    font-weight: bold;
    color: #24150a;
}

ul.improv{
    margin-top: 10px;
    list-style-type: square;
}

ul.improv li{
    margin-bottom: 8px;
}


/* LOGIN */
.login{
    width: 100%;
    height: auto;
    min-height: 55vh;
    padding: 20px 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

form.log{
    width: 70%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

form.log.full{
    width: 100%;
}

form.log .header{
    width: 50%;
    margin-bottom: 20px;
    font-family: var(--font1);
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
}

form.log input[type=text], form.log input[type=email], form.log input[type=password], form.log select, form.log textarea{
    width: 100%;
    height: auto;
    padding: 15px 55px;
    margin-bottom: 20px;
    border: 2px solid var(--color2);
}

form.log select, form.log textarea{
    padding: 15px;
    font-weight: 900;
    text-transform: uppercase;
    resize: none;
}

form.log textarea{
    height: 150px;
}

form.log .block{
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 2px solid var(--color2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

form.log label{
    width: fit-content;
    height: auto;
    margin-right: 10px;
    font-weight: bold;
    text-transform: capitalize;
}

.user-inp{
    background-image: url('assets/img/user.svg');
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 1.5em;
}

.mail-inp{
    background-image: url('assets/img/mail.svg');
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 1.5em;
}

.pass-inp{
    background-image: url('assets/img/pass.svg');
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 1.5em;
}

form.log button[type=submit]{
    width: fit-content;
    height: auto;
    padding: 10px 30px;
    border: none;
    font-family: var(--font1);
    font-weight: bold;
    text-transform: capitalize;
    background-color: var(--color2);
    color: #fff;
}

form.log button[type=submit]:hover{
    cursor: pointer;
    background-color: #5c3920;
}



/* FOOTER */
footer{
    width: 100%;
    height: auto;
    padding: 0;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #eee;
}

footer .top{
    width: 100%;
    height: auto;
    padding: 30px 100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    background-color: #5c3920;
}

.foot-link{
    width: 48%;
    height: auto;
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
    background-color: #fff;
    transition: .3s ease;
}

.foot-link .icon{
    width: 20px;
    height: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    border-radius: 50%;
}

.foot-link:hover{
    background-color: #555;
    color: #fff;
}

footer .mid{
    width: 100%;
    height: auto;
    padding: 30px 100px;
    border-bottom: 2px solid #ccc;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.foot{
    width: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.foot .head{
    width: fit-content;
    height: auto;
    padding: 2px 0px;
    margin-bottom: 10px;
    border-bottom: 3px solid #000;
    font-family: var(--font1);
    font-weight: bold;
    color: var(--color2);
    text-transform: uppercase;
}

.foot a{
    width: fit-content;
    height: auto;
    padding: 0;
    margin-bottom: 10px;
    /* font-weight: 600; */
    text-transform: capitalize;
    color: #000;
    transition: .3s;
}

.foot a:hover{
    padding-left: 7px;
    text-decoration: underline;
    color: #555;
}

footer .down{
    width: 100%;
    height: auto;
    padding: 30px 100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    border-bottom: 2px solid #ccc;
}

.social{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
}

.social .head{
    width: fit-content;
    height: auto;
    padding: 3px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #000;
    font-family: var(--font1);
    font-size: 1.2em;
    font-weight: bold;
    text-transform: capitalize;
}

.social .soci-list{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.social .soci-list a{
    width: fit-content;
    height: auto;
    padding: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    background-color: var(--color1);
    color: #fff;
    transition: .3s all;
}

.social .soci-list a:hover{
    background-color: #000;
}

footer .end{
    width: 100%;
    height: auto;
    padding: 10px 100px;
    text-transform: capitalize;
}



/* MOBILE VIEW */
@media screen and (max-width: 780px){
    section{
        padding: 10px 40px;
    }
    
    .navbar .top{
        padding: 5px 40px;
    }
    
    .navbar .top .outlink{
        font-size: .85em;
    }
    
    .navbar .top .school-link{
        font-size: .85em;
    }
    
    .navbar .mid{
        padding: 20px 40px;
    }
    
    .navbar .mid .logo{
        max-width: 70%;
        font-size: 1.5em;
    }
    
    .navbar .mid .issue-link{
        margin-right: 0px;
        width: 30%;
    }
    
    .navbar .mid .issue-link .issue-pic{
        width: 80px;
        margin-right: 7px;
    }
    
    .navbar .mid .issue-link .issue-deets .const{
        font-size: 1em;
        font-weight: bold;
        text-transform: capitalize;
        color: var(--color2);
    }

    .navbar .mid .issue-link .issue-deets .var{
        font-size: .85em;
    }
    
    .navbar .down{
        padding: 0px 40px;
    }
    
    .navbar .down ul .toplink{
        padding: 10px 15px;
    }
    
    .drop .icon{
        margin-left: 7px;
        font-size: .75em;
    }
    
    .drop .drop-content a{
        width: 100%;
        height: auto;
        padding: 15px 25px;
        font-weight: bold;
        text-transform: capitalize;
    }
    
    .navbar .down .action a{
        padding: 10px;
        font-size: .9em;
    }

    /* LOGIN */
    .login{
        padding: 20px 30px;
    }

    form.log{
        width: 100%;
    }

    form.log input{
        width: 100%;
        height: auto;
        padding: 15px 50px;
        margin-bottom: 20px;
        border: 2px solid var(--color2);
    }

    .user-inp{
        background-image: url('assets/img/user.svg');
        background-repeat: no-repeat;
        background-position: 20px center;
        background-size: 1.5em;
    }

    .mail-inp{
        background-image: url('assets/img/mail.svg');
        background-repeat: no-repeat;
        background-position: 20px center;
        background-size: 1.5em;
    }

    .pass-inp{
        background-image: url('assets/img/pass.svg');
        background-repeat: no-repeat;
        background-position: 20px center;
        background-size: 1.5em;
    }

    form.log button[type=submit]{
        width: fit-content;
        height: auto;
        padding: 10px 30px;
        border: none;
        font-family: var(--font1);
        font-weight: bold;
        text-transform: capitalize;
        background-color: var(--color2);
        color: #fff;
    }

    form.log button[type=submit]:hover{
        cursor: pointer;
        background-color: #5c3920;
    }
}



/* MOBILE VIEW */
@media screen and (max-width: 650px){
    section{
        padding: 10px 30px;
    }    
    
    .navbar .top{
        padding: 5px 30px;
    }
    
    .navbar .top .outlink{
        font-size: .75em;
    }
    
    .navbar .top .school-link{
        font-size: .75em;
    }
    
    .navbar .mid{
        padding: 20px 30px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .navbar .mid .logo{
        max-width: 100%;
        margin-bottom: 20px;
        font-size: 1.35em;
    }
    
    .navbar .mid .issue-link{
        width: fit-content;
        margin-right: 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    
    .navbar .mid .issue-link .issue-deets .const{
        font-size: 1.3em;
    }

    .navbar .mid .issue-link .issue-deets .var{
        font-size: 1.1em;
    }
    
    .navbar .down{
        padding: 0px 30px;
    }
    
    .navbar .down ul{
        display: none;
    }

    .navbar .menubtn{
        display: block;
    }    
    
    .navbar .down .action{
        padding: 12px 15px;
    }
    
    section.flex.row-between{
        flex-direction: column;
    }
    
    .main{
        width: 100%;
    }
    
    .submain{
        width: 100%;
    }
    
    .between{
        height: 30px;
    }
    
    .emphasis{
        width: 100%;
    }
    
    .org{
        list-style-position: inside;
    }
    
    .locals .local-link{
        position: relative;
        width: 100%;
    }

    footer .top{
        padding: 0 30px;
        padding-top: 15px;
        flex-direction: column;
    }
    
    .foot-link{
        width: 100%;
        padding: 10px 20px;
        margin-bottom: 15px;
    }
    
    footer .mid{
        padding: 30px;
    }
    
    .foot{
        width: 140px;
        margin-bottom: 25px;
    }
    
    footer .down{
        padding: 30px;
    }
    
    footer .end{
        width: 100%;
        height: auto;
        padding: 10px 30px;
        text-transform: capitalize;
    }
}