@charset "UTF-8";
/*********************Home CSS*****************************/
html, body {
  height: 100%;
  margin: 0;
}
*{
    box-sizing: border-box; /**For flexbox**/
}
#head-center-box-title{
    opacity:0;
}
.background {
    width:100vw;
    font-size: 1.5vh;
    background-image:none;
}
#header-box{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
#page-box {
    margin:0 auto;
    width:100%;
    padding-top:13em;
}
@media (max-height:768px) {
    #page-box{padding-top: calc(1vh * 13);/*adjusted for mobile portrait font size*/}
}
@media only screen and (max-height: 500px) and (orientation: landscape) {
    #page-box{padding-top: calc(1.3vw * 13);/*adjusted for mobile portrait font size*/}
    
}

#bottom-box{
    padding:0 3%;
    margin:6% 0;
}  
    @media only screen and (max-width:1400px) and (orientation:portrait)
        {#bottom-box{padding:0 0;margin:0 0;}}
    @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:landscape)
        {#bottom-box{padding:0 5%;margin:12vh 0;}
         #bottom-box-menu{gap:2vw 8vw !important;}}

/*Branch Specific Elements**************************************/
#feature-box a{
    color: var(--branch-font-color);     
}

#banner-1{
    background-image: var(--home-banner); 
    background-repeat: no-repeat; 
    background-position: center left; 
    background-size:contain;
}
#scroll-down-btn{
    text-shadow:
    2px 2px 0 rgb(var(--scroll-down-btn) / 1),
    3px 3px 0 rgb(var(--scroll-down-btn) / 0.9),
    4px 4px 0 rgb(var(--scroll-down-btn) / 0.8);
}
#scroll-down-btn .arrow::before,
#scroll-down-btn .arrow::after {
    background: var(--branch-bg-color); 
}
.contact-button.animate-border,
.enroll-button.animate-border{
    border-color: var(--branch-bg-color);
}
/******************** Parallax css ************************************/
.parallax-slow,
.parallax-medium,
.parallax-fast,
.subtitle-pic{
    will-change:transform;/*need to include in html with universal-parallax.js*/
}
.parallax {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size:2.4em;
    font-weight:bold;
    overflow: hidden;
    min-height:650px;
}  
    @media only screen and (max-width:1400px)
        {.parallax{/*padding-top:8vh;padding-bottom:8vh;*/}}
    @media only screen and (min-width:769px) and (max-width:1400px) and (orientation:landscape)
        {.parallax{width:100vw;}}
    @media (max-width:768px)
        {.parallax{min-height:0;height:30vh;}}
	@media only screen and (max-height:500px) and (orientation:landscape)
	{.parallax{min-height:0; height:70vh;}}
      
.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
@media (max-width:768px)
{.parallax-bg{height:100%;}}

.parallax-bg > picture > img{
    width: 100vw;
    height: auto;
    object-fit: contain;
    transform: translateY(0);
    will-change: transform;
    transition: transform 0.1s linear;
}
    @media (orientation: portrait) {
        .parallax-bg > picture > img {object-position: top center;}}

.parallax-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, color 0.15s linear, -webkit-text-fill-color 0.15s linear;
    will-change: opacity, transform;
    z-index:25;
}
.parallax-text.visible {
    opacity: 1;
    transform: translateY(0);
}