@charset "UTF-8";
/* Group Head CSS */

#header-box{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4%;
    width:inherit;
}
@media only screen and (orientation:portrait)
    {#header-box{flex-flow:column nowrap;width:100vw;margin-bottom: 1%;}}
    
@media only screen and (max-width:1400px) and (orientation:landscape)
    {#header-box{display:flex; flex-flow: column nowrap;justify-content:center;align-items:center;margin:3% 0;}}
    

#head-pic{
    flex: 0 1 75%;
    height:28rem;/**450px total height if matching scrollerbar**/ 
    width:75%;
} 
@media only screen and (orientation:portrait)
    {#head-pic{flex:1 1 auto;width: 100vw;height:calc(100vw * 0.43);background-size:cover;margin-top:4%;}}
    
@media only screen and (max-width:1400px) and (orientation:landscape)
    {#head-pic{flex: 1 1 auto; width: 100vw; height: calc(100vw * 0.43);}}

#scrollbar {}
.banner{
    width: 100%;
    height:5vh;
    position: relative;
    margin-bottom: 3%;
    display:flex;
    align-items:center;
}
@media only screen and (min-width:1024px) and (orientation: portrait)
    {.banner{height: 5vh;width: 100%;margin-top:3%;}}
@media only screen and (min-width: 768px) and (max-width:1023px) and (orientation: portrait)
    {.banner {height: 3.6vh; width: 100%; margin-top:3%;}}

@media only screen and (min-width:768px) and (max-width:1400px) and (orientation:landscape)
    {.banner{height: 6vh; width:100vw;/*align-self:flex-start;*/}}
@media only screen and (max-width:767px) and (orientation:landscape)
    {.banner{height:10vh; width:100vw;margin-bottom:3%;}}

#course-title {
    font-size: 4.8rem;
    font-weight: bold;
    font-variant: small-caps;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    padding-bottom: 1%;
}
@media only screen and (min-width:768px) and (max-width:1400px) and (orientation:landscape)
    {#course-title{font-size:7vh;padding-left: 3%;}}
@media only screen and (max-width:767px) and (orientation:landscape)
    {#course-title{font-size:10vh;padding-left:3%;}}

@media only screen and (min-width:768px) and (orientation:portrait)
    {#course-title{font-size:4vh;padding-left: 3%}}
@media only screen and (max-width:767px) and (orientation:portrait)
    {#course-title{padding-left:0%;text-align: center;}}