@charset "UTF-8";
/* Page Top-Middle-Bottom Document */

* {
    box-sizing: border-box; /**For flexbox**/
}
.background {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-content: center;
    width:100vw;
}
#page-wrapper{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 3% auto;
    width:90rem;/*explicit declaration needed*/	
}
@media only screen and (orientation:portrait)
    {#page-wrapper{width: 100vw;margin:5% 0 0 0}}

@media only screen and (min-width:2000px) and (orientation:landscape)
    {#page-wrapper{width: 70vw;}}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {#page-wrapper{width: 100vw;}}

/*Top****************************************************/
.page-header{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 1.5% 0;
    height: 15.5em;
}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {.page-header{height: 22vh;width: 100%;}}
@media only screen and (orientation:portrait)
    {.page-header{height: 15vh;width: 100%;}}

.page-header-image {
    height: 100%;
    width: 20em;
    margin-right:1.5%;
}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {.page-header-image{width: 25vh;height: 22vh;}}
@media only screen and (orientation:portrait)
    {.page-header-image{width: 17vh;height: 15vh;}}
.page-header-label{
    display: flex;
    align-items: center;
    height: 100%;
    width:100%;
    font-size: 3.3vw;/*valid for news*/
    color:#646464;
    text-align:left;
    padding: 0 4%;
}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {.page-header-label{font-size:4vw;}}
@media only screen and (min-width:900px) and (orientation:portrait)
    {.page-header-label{font-size:4vh;}}
@media only screen and (max-width:899px) and (orientation:portrait)
    {.page-header-label{font-size:3vh;}}

/*Middle*****************************************/
#middle-box {
	visibility: visible;
    margin-bottom: 5%;
    width: 100%;
}
@media only screen and (orientation:portrait)
    {#middle-box{width:95%;margin-bottom:0;}}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {#middle-box{width:95%;}}

/*Bottom*******************************************/
#bottom-box {
    width: 100%;
    height: auto;
    margin-bottom: 3%;
}