body,html {
    padding: 0px;
    margin: 0px;
    min-height: 100vh;
}

header {
    font-family: VAGzStarBold;
}

nav {
    overflow: visible;
}

h1 {
    text-align:center;
}

.sr-only { left:-9999px; position:fixed; }

.content-container {
    margin:auto;
    font-size: 16px;
    font-family: VAGzStarBold;
    padding: 0% 1%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.content-container h1 img {
    max-width:90%;
}

.column-title.text h2 {
    line-height: 0 !important;
    font-size: 28px;
}

.content-container .logo {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 12%;
}

.content-container .logo img {
    width: 100%;
}

:focus-visible {
    outline-color: transparent;
    outline: 0;
}

.button-container {
    width: 100%;
    padding: 4px;
    display: inline-block;
    box-sizing: border-box;
    margin: auto;
}

a.button-container:link,
a.button-container:visited {
    text-decoration: none !important;
}

a.button-container:hover {
    cursor:pointer;
}
a.button-container:focus,
a.button-container:focus-visible,
.columns-container a:focus-visible {
    border-radius:3vmin;
    cursor:pointer;
    text-decoration: none;
    outline: 2px solid #000;
    box-shadow: inset 0px 0px 0px 2px #fff;
}

.button-container span {
    color: #1C3800;
    text-align:center;
    width:100%;
    display: block;
    margin-top: -3%;
}

.align-center {
    text-align: center;
}

/* rows */
.w-12p5 {
    width: 12.5%;
}

.w-15 {
    width: 15%;
}

.w-16p6 {
    width:16.6%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-33 {
    width: 33%;
}

.w-40 {
    width: 40%;
}

.w-45 {
    width: 45%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width:80%;
}

.w-85 {
    width:85%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

.w-12p5 > img,
.w-15 > img,
.w-16p67 > img,
.w-20 > img, 
.w-20 > img, 
.w-30 > img, 
.w-33 > img, 
.w-45 > img, 
.w-50 > img, 
.w-60 > img, 
.w-70 > img, 
.w-75 > img, 
.w-80 > img,
.w-85 > img,
.w-90 > img, 
.w-100 > img {
    width: 100%;
}

.columns-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0px auto;
    padding: 0% 0% 4vh 0%;
    position:relative;
    max-height: calc(96vh - 65px);    
    aspect-ratio: 1157 / 700;
    max-width: 98%;    
}

.rows-container {
    aspect-ratio: 1024/768;
    max-width: 90%;
    margin: auto;
    font-size: .8em;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    float: left;
    margin: auto;
}

.rows-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.rows-container a {
    padding: 5px;
    box-sizing: border-box;
    text-align:center;
    display: block;
    margin-bottom: 4px;
}

.rows-container a:hover {
    cursor: pointer;
}
.rows-container a:focus,
.rows-container a:focus-visible {
    cursor: pointer;
    outline: 2px solid #000;
    box-shadow: inset 0px 0px 0px 2px #fff;
    border-radius: 3vmin;
}

.row-individual {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
}

/* ipad pro */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)
{
    .columns-container {
        width:1366px;
        max-width:90%;
        aspect-ratio: 1024/688;
    }
}

@media only screen and (device-width: 1366px) and (device-height: 768px) and (max-height: 680px) {
    .columns-container {
        width: 870px;
    }
}

/* ipad mini */
@media screen and (orientation: landscape) and
(-webkit-min-device-pixel-ratio: 2) and
(min-device-width: 744px) and
(max-device-width: 1366px) {
    .columns-container {
        aspect-ratio: 1057 / 700;
    }
}


/* chromebooks */
@media only screen and (device-width: 1366px) and (device-height: 768px) and (max-height: 640px) {
    .columns-container {
        max-width: 90%;
    }
}

/* more chromebooks */
@media only screen and (min-width: 1920px) and (min-height: 1080px) {
    .columns-container {
        max-width: 90%;
    }
}

@media only screen and (device-width: 2256px) and (device-height: 1504px),
only screen and (device-width: 2400px) and (device-height: 1600px){
    .columns-container {
        max-width: 90%;
    }
}

@media only screen and (device-width: 1920px) and (device-height: 1200px) and (orientation: landscape) {
    .columns-container {
        max-width: 90%;
    }
}

@media (max-height: 600px) {
    body {
        overflow-y: visible;
        min-height: 100vh;
        padding-bottom: 25px !important;
    }
    
    .columns-container {
        max-height: unset !important;
        aspect-ratio: unset !important;
    }
    
    .rows-container {
        max-height: unset !important;
        aspext-ration: unset !important;
        width: 100%;
    }
}

@media screen and (max-width: 828px) and (min-width: 667px) and (orientation: landscape) and (resolution: 3dppx) {
    .columns-container {
        width: 80%;
    }
}

.columned-out {
    display: flex;
    justify-content: space-around;
}

.corner-back a:hover {
    cursor: pointer;
}

.corner-back a:focus,
.corner-back a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -1px;
    border-radius: 3vmin;
    cursor: pointer;
}

.padded {
    padding: 4px;
    box-sizing:border-box;
}


@media (max-width: 888px) {
    .content-container {
        font-size: .8em;
    }
}

@media (max-width: 857px) {
    .button-container span {
        white-space: normal;
    }

    .columns-container {
        height: unset;
        max-height:unset;
        aspect-ratio: unset;
        width: 100%;
        text-align: center;
    }

    .hide-zoomed-md-d-none {
        display: none !important;
    }

    a.expired-copy:link {
        font-size:.8em;
    }

    .shrink-font {
        font-size: .8em !important
    }
}

@media (max-width: 790px) {
    .md-larger-display-none {
        display: none;
    }
}

@media (max-width:768px) {
    .hide-zoomed-sm-v-none {
        visibility:hidden !important;
    }
    .hide-zoomed-sm-d-none,
    .md-display-none {
        display: none !important;
    }
    
    .shrink-font {
        font-size: .7em !important
    }
}

@media (max-width: 730px) {    
    .columns-container {
        aspect-ratio: unset !important;
    }
}

.sm-display-block {
    display: none !important;
}

@media (max-width: 560px) {

    body {
        overflow-y: scroll;
        min-height: 100vh;
        padding-bottom: 25px !important;
    }
    
    .content-container {
        font-size: 1em;
    }
    
    .columned-out {
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .header-slide-in {
        margin: auto;
        position: relative;
        display: block;
        left: auto;
        width: auto;
    }

    .columns-container {
        flex-direction: column;
        align-items: center;
        max-height: unset !important;
    }
    
    .rows-container {
        max-height: unset !important;
        aspect-ratio: unset !important;
    }

   
    .w-10, .w-12p5, .w-16p6, .w-20, .w-30, .w-33, .w-40, .w-45, .w-50, .w-60 {
        width: 50%;
    }

    .text.column-title, .seasonal-column .column-title {
        margin-top: 0% !important;
    }

    .sm-width-45 {
        width: 45%;
    }
    
    .sm-width-50 {
        width: 50%;
    }

    .sm-width-100 {
        width: 100%;
    }
    
    .sm-display-none {
        display: none !important;
    }
    
    .sm-display-block {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .columns-container {
        flex-direction: column;
        align-items: center;
        aspect-ratio: unset !important;
        max-height: unset !important;
    }
    
    .w-10,
    .w-12p5,
    .w-16p6,
    .w-20, 
    .w-30, 
    .w-33, 
    .w-40, 
    .w-45, 
    .w-50, 
    .w-60, 
    .w-70,
    .w-75,
    .w-80,
    .w-85,
    .w-90 {
        width: 90% !important;
    }
}

#rotate_icon {
    position: relative;
}

#rotate_icon_container {
    text-align: center;
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    display: none;
}

/* mobile iOS and android devices */
@media screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait),
screen and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
screen and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 744px) and (max-device-width: 1366px),
screen and (device-width: 800px) and (device-height: 1340px) and (orientation: portrait), 
screen and (min-device-width: 600px) and (max-device-width: 1280px) and (min-device-height: 800px) and (max-device-height: 1920px) and (orientation: portrait),
screen and (min-device-width: 600px) and (max-device-width: 960px) and (orientation: portrait) {
    #rotate_icon_container {
        display: block;
    }
}