@charset "UTF-8";
/* Header-Bar . Menu bar color and branch colors need to be called in header-**.php */
/*IMPORTANT!!! This css is for YMA header only**/
* {
    box-sizing: border-box;
}
#header-top-box{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    height: 13em; /*root height of header*/
    width: 100vw;
    background-color:white;
    font-size:1.5vh; /*set to control branch name font size*/
}
    @media only screen and (orientation: portrait)
        {#header-top-box{width:100vw;}}
    @media only screen and (max-width: 767px)
        {#header-top-box{display:initial;margin:0 0;width:100%}}/**reset header-top-box**/

.header-side-box{
    width: 2%;/**can be any amount as the center box is with flex-grow at 1**/
    z-index:3000;
}
    @media (orientation:portrait)
        {.header-side-box{display:none;}}/**hide header-side-box**/
    @media only screen and (max-width:1023px) and (orientation:landscape)
        {.header-side-box{display:none;}}

/*Include left squares' cluster, center title box and right logo box******************************/
#header-center-box{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin: 0 0.4%;
    width: 100%;
    height: inherit;
}
    @media only screen and (max-width: 1023px) and (orientation: portrait)
        {#header-center-box{flex-flow: row nowrap; justify-content: space-between;margin: 0 auto;}}

/*left squares' cluster,***************************************************************************/
#header-center-box-cluster{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 13em;
    height: inherit;
    z-index:3000;
}
.header-center-box-cluster-small{
    width: 47%; /**adjust menu button size in menubarnew component css**/
    height: 47%;
}
#cluster-box-1{
    display:flex;
    flex-flow: row wrap;
    height: 50%;
}
.empty-header-box-small-square{
    width:50%;
    height:50%;
}
.empty-header-box-small-square.grayer-square-1 {
    background-color: #cefafe/*#BEBEBE*/;
}
.empty-header-box-small-square.gray-square-3{
    background-color: #fbff2c/*#e0e0e0*/;
}
#cluster-box-2{
    background: url("../Assets/header/header-small-box-pointer.png") no-repeat center;
    background-color: #e0e0e0;
    background-size: contain;
    color: #777777;
    font-size: 1.4em;
    padding: 4% 0 0 4%;
    height: 50%;
    width: 50%;
}

/*Menu square****************************************************************************************/
#cluster-box-4{
    /*transition: all 1.5s ease-out;*/
    background: url("../Assets/header/header-small-box-menu-icon.png") no-repeat center;
    background-size:cover;
}
#cluster-box-4:hover{
    background: transparent url("../Assets/header/header-small-box-menu-icon-hover.png") no-repeat center;
    background-size:cover;
}
#cluster-box-4.header-center-box-cluster-small{
    width:50%;
}

/*Fullerton-Fountain Valley & Branch group + Authorized Yamaha Music School*****DO NOT ALTER**********************/
#header-center-box-main{
    display:flex;
    flex-flow:row nowrap;
    justify-content:flex-end;
    align-items:center;
    z-index:1000;
    position: relative;
    background-color: #e0e0e0;
    margin: 0 0.5%;
    height: inherit;
    flex-grow: 1;
    max-width:75vw;
}
    @media only screen and (orientation:portrait)
        {#header-center-box-main{margin: 0 1%;}}
    @media only screen and (min-width:601px) and (max-width:1400px) and (orientation:portrait)
        {#header-center-box-main{max-width:65vw;}}
    @media only screen and (max-width:600px) and (orientation:portrait)
        {#header-center-box-main{max-width:50vw;}}
    @media only screen and (min-width:768px) and (max-width:1023px) and (orientation:landscape)
        {#header-center-box-main{max-width:65vw;}}
    @media only screen and (max-width:767px) and (orientation:landscape)
        {#header-center-box-main{max-width:70vw;}}
    

/*Fullerton-Fountain Valley & Branch group*************************************DO NOT ALTER***********************/
.header-center-box-title-branch-group{/*@media query in header-fv.php and header-fullerton.php*/
    display:grid;
    grid-template-rows: 2fr 1fr;
    grid-template-columns:1fr 2fr;
    padding-right:1%;
    height:100%;
    width:100%;
    overflow:hidden;
}
    @media only screen and (max-width:1400px) and (orientation:landscape)
        {.header-center-box-title-branch-group{padding-right:0}}

/*Fullerton-Fountain Valley******************************************************DO NOT ALTER************************/
#head-center-box-title{
    opacity:0;
    grid-area:1/1/3/3;
    justify-self:end;
}
    @media only screen and (max-width:1400px)
        {#head-center-box-title{grid-area:1/1/3/3;text-align:right;}}
    @media only screen and (max-width:1400px) and (orientation:portrait)
        {#head-center-box-title{justify-self:center;align-self:center;}}
    @media only screen and (min-width:1024px) and (max-width:1400px) and (orientation:landscape)
        {#head-center-box-title{justify-self:center;align-self:center;}}
    @media only screen and (min-width:768px) and (max-width:1023px) and (orientation:landscape)
        {#head-center-box-title{justify-self:end;}}
    @media only screen and (max-width:767px) and (orientation:landscape)
        {#head-center-box-title{justify-self:center;align-self:center;}}

#fullerton-title,
#fv-title{
    font-family: "Impact", sans-serif;
    /*font-size: 15em;/*relative to header-center-box-main*/
    color:white;
}
#fullerton-title{
    font-size:17em;
    line-height:0.7em;
    letter-spacing:-0.04em;
}
    @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:portrait)
        {#fullerton-title{font-size:8em;}}
    @media only screen and (max-width:767px) and (orientation:portrait)
        {#fullerton-title{font-size:6em;line-height:0;}}
    @media only screen and (min-width:1024px) and (max-width:1400px) and (orientation:landscape)
        {#fullerton-title{font-size:15em;line-height:0.8em;}}

#fv-title{
    font-size:13.5em;
    line-height:1em;
    letter-spacing:-0.05em;
}
    @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:portrait)
        {#fv-title{font-size:8em; line-height:0.7em;}}   
    @media only screen and (max-width:767px) and (orientation:portrait)
        {#fv-title{font-size:6em; line-height:0.7em;}}
    

    @media only screen and (max-width:1400px) and (orientation:landscape)
        {#fv-title{font-size:9em;line-height:0.6em;}}

/*Authourized Yamaha Music School*************************************************************************/
#header-center-box-subtitle{
    font-size: 2.5vmin;
    z-index:100;
    grid-area:2/1/3/3;
    justify-self:start;
    padding-left:1%;
}
    @media only screen and (max-width:1023px) and (orientation:portrait)
        {#header-center-box-subtitle{grid-area:2/1/3/3;justify-self:start;align-self:end;padding-left:3%; padding-bottom:3%;}}
    @media only screen and (min-width:768px) and (max-width:1400px) and (orientation: portrait)
        {#header-center-box-subtitle{font-size: 2vmin;}}
    @media only screen and (max-width:767px) and (orientation: portrait)
        {#header-center-box-subtitle{font-size: 1.8vmin;}}

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

.font-body {/*for "authorized yamaha music school"*/
    color:#777777;
}

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

/*Logo**************************************************************************************************/
#header-center-box-logo{
    width: 13em;
    height: inherit;
    z-index:1001;
}
    @media only screen and (min-width:2000px) and (orientation:landscape)
        {#header-top-box,#header-center-box-cluster,#header-center-box-logo{font-size: 1.1vw;}}
    @media only screen and (min-width: 1024px) and (max-width: 1400px) and (orientation:landscape)
        {#header-top-box,#header-center-box-cluster,#header-center-box-logo{font-size: 1.8vh;}}
    @media only screen and (min-width:768px) and (max-width: 1023px) and (orientation:landscape)
        {#header-top-box,#header-center-box-cluster,#header-center-box-logo{font-size: 2.5vh;}}
    @media only screen and (max-width: 767px) and (orientation:landscape)
        {#header-top-box,#header-center-box-cluster,#header-center-box-logo{font-size: 1.3vw;}}

    @media only screen and (min-width: 768px) and (max-width: 1400px) and (orientation:portrait)
        {#header-top-box,#header-center-box-cluster,#header-center-box-logo{font-size: 1.2vh;}}
    @media only screen and (max-width: 767px) and (orientation:portrait)
        {#header-top-box,#header-center-box-cluster,#header-center-box-logo{font-size: 1vh;}}