*{
    box-sizing: border-box;
}
html, body{
    height:100%;
    padding:0;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    /*font-size: 14pt;*/
    font-size: 1.08014rem;
}
body{
    color:white;
    backdrop-filter: blur(5px);
}
a {
    color: #3398B9;
}
header, footer{
    width:100%;
    height:60px;
    background-color:#111;
    padding: 10px 20px;
}
header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
header h1 {
    height: 100%;
    margin: 0 10px 0 0;
}
header h1 img {
    height: 100%;
    margin: 0;
}
header .details {
    width: 100%;
    max-width: 600px;
    text-align: justify;
    border-left: solid 1px gray;
    padding-left: 10px;
}
main{
    height: calc(100% - 120px);
    padding:20px;
    position: relative;
    background-color: black;
}

article{
    margin-bottom:20px;
    height: -webkit-fill-available;
    height: calc(100% - 23px);
    overflow: hidden auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}
article div{
    margin-bottom:10px;
    margin-right: 40px;
    min-width: 45%;
}
article h2{
    
    font-size: 1.125em;
    margin-bottom: 5px;
}

article div p{
    margin-top: 0;
}
article p:not(last-of-type) {
    margin-bottom: 0;
}
section{
    
    border-top: solid 1px #ffffff66;
    position: absolute;
    padding: 10px 0;
    bottom: 0;
    width: calc(100% - 40px);
    display:flex;
    justify-content: space-around;
}
section > div {
    flex-shrink: 8;
}
section > div:not(.details) {
    text-align: center;
}
.details {
    /*font-size: .5em;*/
    font-size: .6425em;
    color: #adadad;
}

div.details p, div:not(.details) p {
    padding: 0;
    margin: 0;
    min-width:340px;
}
footer .details {
    width: 620px;
    text-align: justify;
    display: flex;
}
footer {
    position: fixed;
    bottom: 0;
    display: flex;    
    justify-content: space-between;
}
footer a {
    text-decoration: none;
    padding: 0 10px;
    width:70px;
}
footer img {
    height: 100%;
}

/*------------------------------
    Media query
------------------------------*/
@media (orientation: portrait) {
    header, footer{
        height:5vh;
    }
    header {
        align-items: flex-start;
        flex-direction: column;
        height: auto;
    }
    header h1 {
        height: 100%;
        margin: 10px;
    }
    header h1 img {
        width: 30vw;
    }
    header .details{
        width: auto;
        font-size: 2vw;
        border: 0;
    }
    main {
        height: calc(100% - 200px);
        width: 100%;
    }
    details {
        font-size: 2vw;
    }

    article{
        flex-direction: row;
        height: calc(100% - 23px);
    }
    article div {
        margin-bottom: 10px;
        margin-right: 40px;
        min-width: initial;
        width: 100%;
    }
    article div:last-of-type {
        margin-bottom: 2vh;
    }
    article h2 {
        font-size: 5vw;
        margin-bottom: 1vh;
    }
    article div p {
        font-size: 4.5vw;
        margin-bottom: .5vh;
    }
    section{
        font-size: 3.5vw;
        background-color: inherit;
    }
    footer{
        height: 10vh;
    }
    footer > a {
        max-width: 25%;     
        width: fit-content;   
        background-image: url(https://www.dropbox.com/s/a68wkzh6j7r9t4g/ASU_EducationExploration_Vert_RGB_White_150ppi.png?dl=1);
        background-size: contain;
        background-position-y: -.5vh;
        background-repeat: no-repeat;
    }
    footer > a img {
        height: auto;
        max-width: 100%;
        opacity: 0;
    }
    footer .details{
        margin-left: 2vw;
        font-size: 2vw;
        width: initial;
    }
    footer .details a {
        max-width: 20%;
    }
    footer .details a img {
        height: auto;
        width: 100%;
    }
    div.details p, 
    div:not(.details) p {
        min-width: 245px;
    }
}
@media (orientation: landscape) {
    .layout-title #stage-stage .content oli-adaptive-delivery div .info-icon-popup .popup-background janus-capi-iframe {
        min-width: initial;
        max-width: initial;
        min-height: initial;
        max-height: initial;
    }
}