@charset "UTF-8";
/* YMA Header Styling */

/* Colors for menubar */
/* IMPORTANT! Color needs customized for different branch*/
.demo-2 .dl-menuwrapper ul,
#cluster-box-4:hover{
    background-color: #71c8f0;/**darker blue hovered**/
}
#cluster-box-1,
#cluster-box-2,
#header-center-box-main,
.header-side-box{
    border-top: solid 1.5vmin #cefafe;
}
#cluster-box-3{
    background: #BEBEBE url("../Assets/header/header-small-box-blue.png") no-repeat center;
    background-size: cover;
}
.header-side-box,
#cluster-box-4,
#header-center-box-logo{
    background-color: #cefafe;/*light*/
}
.empty-header-box-small-square.pale-purpler-square-2 {
    background-color:#fbd685;
}   
.empty-header-box-small-square.purple-square-4 {
    background-color: #cdcdfe;/*#A5F5FC*/ /*less light*/
}

/**Center Box**********************************************/
#header-center-box-main{
    color: #71c8f0;
}
.head-center-box-title-header-yma{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr 2fr 3fr;
    width: 100%;
    height:100%;
    font-size:1.5vh; /*set font-size for branch name font*/
    overflow:hidden;
}
    @media only screen and (max-width:1023px) and (orientation:portrait)
    {.head-center-box-title-header-yma{grid-template-rows:1fr 1fr 1fr 1fr; grid-template-columns:2fr 1fr 2fr 3fr;}}
    @media only screen and (max-width:1400px) and (orientation:landscape)
    {.head-center-box-title-header-yma{grid-template-rows:2fr 1fr 2fr; grid-template-columns:2fr 1fr 2fr 3fr;}}
    
.fullerton-title.yma,
.fv-title.yma{
    font-family: "Impact", sans-serif;
    letter-spacing: -0.04em;
    color:white;
    font-size: 8.5em;
    opacity: 0; /**needed because animation of this element is delayed*/
    
}
    @media only screen and (max-width:600px) and (orientation:portrait)
        {.fullerton-title.yma,
         .fv-title.yma{font-size:3em;}}
    @media only screen and (min-width:601px) and (max-width:1023px) and (orientation:portrait)
        {.fullerton-title.yma,
         .fv-title.yma{font-size:4.5em;}}

    @media only screen and (min-width:1204px) and (max-width:1400px) and (orientation:landscape)
        {.fullerton-title.yma,
         .fv-title.yma{font-size:8em;}}
    @media only screen and (min-width:768px) and (max-width:1203px) and (orientation:landscape)
        {.fullerton-title.yma,
         .fv-title.yma{font-size:9em;}}
    @media only screen and (max-width:767px) and (orientation:landscape)
        {.fullerton-title.yma,
         .fv-title.yma{font-size:10em;}}
    
.fullerton-title.yma{
    padding-left:1%;
    grid-area: 1/1/2/2;
    align-self: end;
    line-height: 0.7em;
}
    @media only screen and (max-width:600px) and (orientation:portrait)
        {.fullerton-title.yma{grid-area:1/1/3/3;align-self:start;}}
    @media only screen and (min-width:601px) and (max-width:1024px) and (orientation:portrait)
        {.fullerton-title.yma{grid-area:4/1/5/3;align-self:start;}}
    @media only screen and (max-width:1400px) and (orientation:landscape)
        {.fullerton-title.yma{grid-area:3/1/4/3;align-self:start;}}

.fv-title.yma{
    padding-right:1%;
    text-align: right;
    grid-area: 1/2/2/5;
    align-self:start;
    line-height: 0.7em;
}
    @media only screen and (min-width:601px) and (max-width:1023px) and (orientation:portrait)
        {.fv-title.yma{grid-area:1/2/5/5;}}
    @media only screen and (max-width:600px) and (orientation:portrait)
        {.fv-title.yma{grid-area:3/2/5/5;align-self:end;}}
    @media only screen and (min-width:1024px) and (max-width:1400px) and (orientation:landscape)
        {.fv-title.yma{grid-area:1/2/3/5;}}

#header-center-box-subtitle-yma{
    position: relative;
    margin: 0 0 3% 5%;
    font-size: 2.5vmin;
    grid-area:1/2/2/5;
    z-index:100;
    align-self:end;
}
    @media only screen and (max-width:600px) and (orientation:portrait)
        {#header-center-box-subtitle-yma{grid-area:2/1/3/5;justify-self:center;align-self:center;margin:0 0 0 0}}
    @media only screen and (min-width:601px) and (max-width:1023px) and (orientation:portrait)
        {#header-center-box-subtitle-yma{grid-area:3/1/4/5;margin:0 0 0 0;align-self:center;padding-left:14%;}}
    @media only screen and (min-width:768px) and (max-width:1400px) and (orientation: portrait)
        {#header-center-box-subtitle-yma{font-size: 2vmin;}}
    @media only screen and (max-width:767px) and (orientation: portrait)
        {#header-center-box-subtitle-yma{font-size: 1.8vmin;}}

    @media only screen and (min-width:2000px) and (orientation: landscape) 
        {#header-center-box-subtitle-yma{font-size: 2vmin;}}
    @media only screen and (min-width:768px) and (max-width:1400px)and (orientation: landscape) 
        {#header-center-box-subtitle-yma{font-size: 3vh;grid-area:1/1/3/4;align-self:end;}}
    @media only screen and (max-width:767px) and (orientation:landscape)
        {#header-center-box-subtitle-yma{font-size: 3vh;grid-area:2/1/3/3;align-self:start;}}

#header-center-box-subtitle-yma span:nth-child(2){
    letter-spacing: 0.05em;
}

/**Right Box Logo*******************************************************/
#header-center-box-logo{
    color: #71c8f0;/*dark*/
    background: url("../Assets/header/header-logo.png") no-repeat center;
    background-size: cover;
}