/*
Logo colors
Dark red: #D32F2F
Red: #F44336
Orange: #e35300
Light grey: #9e9e9e
Dark grey: #303030;
Black
*/
* {
    margin: 0px; 
    padding: 0px;
    transition: .15s;
}
body, html {
    height: 100%;
    background: #fff;
    color: #303030;
    font-family: 'Open Sans', sans-serif;
    font-size: large;
    line-height: 1.3;
}
a {
    text-decoration: none;
    color: #0f4060;
}
a:hover {color: #e35300;}
h1, h2, h3, h4 {
    margin: 0;  
    padding: 20px 0;
    font-family: 'Roboto Condensed', sans-serif;
}

h1 {
    font-size: 250%;
    text-transform: capitalize;
}
h1.entry-title {display: none;}
h2, h3, h4 {
    font-weight: bold;
    color: inherit;
}
h2 {font-size: 150%;}
h3 {
    padding: 10px 0;
    font-size: 125%;
}
h4 {
    padding: 10px 0 0;
    font-size: 110%;
}
hr {
    clear: both;
    margin: 75px auto;
    width: 60%;
    height: 1px;
    border: none;
    border-top: 1px solid #a7a7a7;
}
img {
    max-width: 100%;
    border: none;
}
li {margin-left: 50px;}
p {padding: 10px 0;}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], 
select, textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 10px;
    font-family: inherit;
    /*background: #dee6eb;*/
    font-size: 80%;
    border: none;
    /*border-top: 2px solid #ffdcb8;*/
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, 
select:focus, textarea:focus {
    background: #fff;
}
textarea {
    height: 150px;
    font-size: 80%;
}
input[type="submit"] {font-size: 90%;}
.input-error {
    background: #ffd7d7;
    border-bottom: 1px solid red;
}
.label {
    font-size: 90%;
    color: #6c6c6c;
}
.float-r {float: right;}
.float-l {float: left;}
.clear {clear: both;}
.rel {position: relative;}
.nopadding {padding: 0;}
.indent {padding-left: 30px;}
.spacer {padding-top: 30px;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.small {font-size: 90%;}
.large {font-size: 110%;}
.nowrap {white-space: nowrap;}
.noborder {border: none;}
.flex {display: flex;}
.flex.equal, .flex-persist {flex-direction: row;}
.flex.equal {flex-wrap: wrap;}
.flex.equal div, .flex-persist div {flex: 1;}
.flex-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-header {
    flex: 0 0 40%;
    font-size: 120%;
    text-align: center;
}
.flex-header ~ div {flex: 0 0 50%;}

.button {
    display: inline;
    padding: 10px 20px;
    width: auto;
    cursor: pointer;
    color: inherit;
    border: 2px solid #6c6c6c;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
}
.button:hover {
    color: #F44336;
    border: 2px solid #F44336;
}
.cta {
    display: inline-block;
    min-width: 60%;
    max-width: 400px;
    margin: 30px auto 0;
    padding: 20px;
    border: 2px solid #fff;
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
}
/*a.cta {color: #fff;}*/
.cta:hover, .cta:focus, .form-submit input[type="submit"]:hover, .form-submit input[type="submit"]:focus {
    background: #fff;
    color: #F44336;
    border: 2px solid #F44336;
}
.accordion {
    padding: 0 20px;
    /*border: 1px solid #b8b8b8;*/
    /*border-top: none;*/
}
.accordion-indent > * {padding-left: 30px;}
/*.accordion:nth-child(1) {border-top: 1px solid #b8b8b8;}*/
.accordion h3 {position: relative; cursor: pointer;}
.accordion h3:hover {color: #F44336;}
.accordion-arrow {
    content: " ";
    margin-bottom: 7px;
    margin-right: 15px;
    border: solid #2D282A;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.accordion-arrow-close {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
}
.expand-accordion-container {
    overflow: hidden;
    transition: .5s;
}
.expand-accordion {padding: 0 0 30px 30px;}
.expand-accordion .flex {font-size: 85%;}


#container {height: 100%;}
.content-section {padding: 150px 10px;}
.first-section {
    position: relative;
    padding-top: 0;
}
.content {
    max-width: 1200px;
    margin: 0 auto;
}
.content-narrow {
    max-width: 90%;
    margin: 0 auto;
}
.content-wide {
    width: 100%;
    max-width: 1500px;
}
.content-x-wide {
    width: 100%;
    max-width: 1800px;
}
/*generic flex settings*/
.flex {
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    justify-content: space-around;
    
}
.flex.equal, .flex-persist {flex-direction: row;}
.flex.equal div, .flex-persist div {flex: 1;}
#site-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 0 10px;
    text-align: center;
    background: #fff;
    box-shadow: 0 1px 5px #3b3b3b;
    z-index: 10;
    animation-name: menu-slide-in;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes menu-slide-in {
    0%, 50% {
        opacity: 0;
        top: -100px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
#nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
}
#nav-content #big-menu {display: block;}
#nav-content #small-menu {display: none;}
#expand-menu {
    position: relative;
    padding: 15px;
    cursor: pointer;
    background: #fff;
}
#expand-menu .accordion-arrow {
    margin: 0px 0 0 10px;
    border: solid #212121;
    border-width: 0 1px 1px 0;    
}
#expand-menu:hover .accordion-arrow {
    border: solid #212121;
    border-width: 0 1px 1px 0;    
}
.menu-open .accordion-arrow , .expand-menu:hover .accordion-arrow {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
}
#expanded-menu {
    display: block;
    position: absolute;
    top: -15em;
    right: 0;
    width: 50vw;
    padding-top: 10px;
    padding-right: 20px;
    /*padding-left: 20vw;*/
    /*min-width: 50vw;*/
    background: #fff;
    text-align: right;
    opacity: 0;
    z-index: -1;
}
#expanded-menu a {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
}
.menu-open #expanded-menu, .expand-menu:hover #expanded-menu {
    top: 100%;
    opacity: 1;
}
#site-nav img {
    height: 1.5em;
    padding: 0 20px;
    line-height: -3px;
}
.menu-item {
    display: inline-block;
    position: relative;
    /*top: -15px;*/
    padding: 20px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 110%;
    text-decoration: none;
    color: #9e9e9e;
    z-index: 1;
}
.menu-item:hover, .home .home, .about .about, .services .services, .products .products, .careers .careers, .contact .contact {color: #fff;}
.menu-item:before {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 0px;
    right: 0px;
    background-color: #f62a2a;
    opacity: 0;
    z-index: -1;
    transition: all 0.15s;
}
.menu-item:hover:before, .home .home:before, .about .about:before, .services .services:before, .products .products:before, .careers .careers:before, .contact .contact:before {
    top: 0px;
    bottom: 0px;
    opacity: 1;
}
.page-header {
    position: relative;
    height: 30vw;
    min-height: 300px;
    overflow: hidden;
    animation-name: page-header-zoom-130;
    animation-duration: 60s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
#header-split {
    position: relative;
    height: 100%;
}
.header-split-section {
    position: absolute;
    height: 100%;
    width: 60%;
    -ms-transform: skew(-20deg); /* IE 9 */
    -webkit-transform: skew(-20deg); /* Safari prior 9.0 */
    transform: skew(-20deg); /* Standard syntax */
    overflow: hidden;
}
.header-split-section, .header-split-section img, .header-split-text, .header-split-text-details {
    transition: 1s;
}
#header-split-div1 {right: 49%}
#header-split-div2 {left: 49%}
.header-split-image, .header-split-text {
    position: absolute;
    -ms-transform: skew(20deg); /* IE 9 */
    -webkit-transform: skew(20deg); /* Safari prior 9.0 */
    transform: skew(20deg); /* Standard syntax */
    overflow: visible;
}
.header-split-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.header-split-image img {
    width: 140%;
    max-width: 140%;
    margin-left: -20%;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}
.header-split-text {
    min-width: 400px;
    padding: 30px;
    background: url(images/black-trans.png);
    text-align: center;
    color: #fff;
    overflow: hidden;
}
.header-split-text h3 {
    color: inherit;
}
.header-split-text-details {max-height: 0;}
.header-split-text hr {
    margin: 30px auto; 
    border-top: 1px solid #ababab;
}
.header-split-text .button {border: 2px solid #fff;}
#header-split-div1 .header-split-text {
    left: 30%;
    top: 30%;
}
#header-split-div2 .header-split-text {
    right: 45%;
    bottom: 20%;
}

/*Hover states triggered by js*/
#header-split-div1.hoverfocus {
    width: 62.5%;
    right: 48%
}
#header-split-div1.hoverfade {
    right: 52%
}
#header-split-div2.hoverfocus {
    width: 62.5%;
    left: 48%
}
#header-split-div2.hoverfade {
    left: 52%
}
.hoverfocus img {margin-top: -1%;}
.hoverfocus .header-split-text-details {max-height: 300px;}
.hoverfade img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

#page-header-home {
    height: 40vw;
    min-height: 325px;
}
#page-header-home-static {
    background: #ababab url(images/refinery-with-mountains-static.jpg) no-repeat fixed;
    background-size: 100% auto;
}
#page-header-about {
    background: #ababab url(images/worker-in-front-of-refinery.jpg) no-repeat fixed;
    background-size: 100% auto;
}
#page-header-services {
    background: #ababab url(images/refinery-at-sunset.jpg) no-repeat fixed;
    background-size: 100% auto;
}
#page-header-careers {
    background: #ababab url(images/plant-workers.jpg) no-repeat fixed;
    background-size: 100% auto;
}
#page-header-contact {
    background: #ababab url(images/inspectors-in-front-of-plant.jpg) no-repeat fixed;
    background-size: 100% auto;
}
.main-header {
    display: flex;
    justify-content: flex-start;
    position: relative;
    top: -2em;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 75px;
}
.main-header .content {
    margin: 0;
    border: 1px solid #a7a7a7;
    background: #f7f7f7;
    padding: 0 100px;
}
.notice {
    margin: -75px auto 100px;
    padding: 30px 20px;
    max-width: 1000px;
    border: 1px solid #a7a7a7;
    white-space: pre-wrap;
}
.notice::first-line {
    padding-bottom: 20px;
    font-size: 150%;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
}
#page-links-section {
    background: url(images/black-trans.png), url(images/refinery-at-dusk.jpg) fixed ;
    background-position: center, bottom;
    background-size: cover, cover;
}
.page-links-div {flex-wrap: wrap;}
.page-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px;
    min-width: 20%;
    padding: 10px;
    border: 1px solid #a7a7a7;
    text-align: center;
    color: #9e9e9e;
}
.page-links h3 {color: #fff;}
.page-links .button {
    padding: 10px;
    color: #fff;
    border: 2px solid #9e9e9e;
}
.page-links:hover {
    color: #303030;
    background: #fff;
    border: 1px solid #F44336;
}
.page-links:hover h3 {color: inherit;}
.page-links:hover .button {
    color: inherit;
}
.page-links:hover .button:hover {
    color: #F44336;
    border: 2px solid #F44336;
}
.page-links-blank, .page-links-blank:hover {border: 1px solid transparent; background: none;}
#map-section {
    height: 30vw;
}
.about #map-section {
    padding-top: 0;
}
#map-section .content, #map-div, #map-content {
    position: relative;
    height: 100%;
}
#map-div {
    position: relative;
    width: 70%;
    /*z-index: -1;*/
}
#map-content > * {transition: .5s;}
#world-map, .world-map-overlay {
    position: absolute;
    width: 100%;
}
.world-map-overlay {
    opacity: 0;
}
.world-map-overlay img {
    width: 100%;
    background: #fff;
    opacity: .5;
}
.world-map-countries {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2vw;
    font-weight: bold;
    font-style: italic;
    /*color: #000;*/
}
.world-map-countries p {opacity: 0; margin-left: -10vw;}
.world-map-overlay.visible {opacity: 1;}
.world-map-overlay.visible .world-map-countries p {
    animation-name: world-map-countries-slide-in;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.world-map-overlay.visible .world-map-countries p:nth-child(2) {animation-delay: .1s;}
.world-map-overlay.visible .world-map-countries p:nth-child(3) {animation-delay: .2s;}
.world-map-overlay.visible .world-map-countries p:nth-child(4) {animation-delay: .3s;}
.world-map-overlay.visible .world-map-countries p:nth-child(5) {animation-delay: .4s;}
.world-map-overlay.visible .world-map-countries p:nth-child(6) {animation-delay: .5s;}
.world-map-overlay.visible .world-map-countries p:nth-child(7) {animation-delay: .6s;}
.world-map-overlay.visible .world-map-countries p:nth-child(8) {animation-delay: .7s;}
.world-map-overlay.visible .world-map-countries p:nth-child(9) {animation-delay: .8s;}
.world-map-overlay.visible .world-map-countries p:nth-child(10) {animation-delay: .9s;}
@keyframes world-map-countries-slide-in {
    from {
        opacity: 0;
        margin-left: -10vw;
    }
    to {
        opacity: 1;
        margin-left: 0;
    }
}

#map-desc {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 35%;
    /*min-width: 500px;*/
    z-index: 1;
}

.world-map-hover {
    position: absolute;
    height: 29.8vw;
    left: 0;
    right: 0;
    /*border: 1px solid red;*/
}
.world-map-hover div {
    position: absolute;
    opacity: 30%;
}
.world-map-hover .world-map-hover-north-america {
    /*background: blue;*/
    bottom: 45%;
    top: 0;
    right: 67.5%;
    left: 0;
    border-radius: 40vw 0vw 50vw 50vw;
}
.world-map-hover .world-map-hover-south-america {
    /*background: red;*/
    bottom: 0;
    top: 55%;
    right: 65%;
    left: 15%;
    border-radius: 20vw 10vw 50vw 20vw;
}
.world-map-hover .world-map-hover-africa {
    /*background: brown;*/
    bottom: 15%;
    top: 40%;
    right: 40%;
    left: 38%;
    border-radius: 10vw 20vw 20vw 30vw;
}
.world-map-hover .world-map-hover-asia {
    /*background: purple;*/
    bottom: 45%;
    top: 0;
    right: 0;
    left: 55%;
    border-radius: 30vw 30vw 100vw 10vw;
}
.world-map-hover .world-map-hover-asia {
    /*background: purple;*/
    bottom: 40%;
    top: 0;
    right: 0;
    left: 52%;
    border-radius: 80vw 30vw 100vw 100vw;
}
.world-map-hover .world-map-hover-europe {
    /*background: green;*/
    bottom: 60%;
    top: 12%;
    right: 44%;
    left: 40%;
    border-radius: 10vw 0vw 10vw 10vw;
}
.world-map-hover .world-map-hover-oceania {
    /*background: orange;*/
    bottom: 5%;
    top: 55%;
    right: 10%;
    left: 70%;
    border-radius: 5vw 10vw 10vw 20vw;
}

.bio {
    padding: 20px;
    text-align: center;
    font-size: 90%;
}
.bio-image {
    width: 50%;
    margin: auto;
    border-radius: 1000px;
    background: #e3e3e3;
    overflow: hidden;
}
.bio img {width: 100%;}
.bio h3 {color: inherit;}
.bio h3 .small {
    display: block;
    padding-top: 10px;
    color: #474747;
}
.service-div {
    position: relative;
    margin-top: 150px;
}
.service-div:nth-child(1) {
    margin-top: 0px;
}
.service-image {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
}
.service-image img {max-width: 100%;}
.service-desc {
    display: inline-block;
    position: relative;
    top: 50px;
    width: 50%;
    margin-left: 11%;
    padding: 30px 40px;
    background: #fff;
    border: 1px solid #a7a7a7;
}
.service-desc h2 {padding-top: 10px;}
.service-div:nth-child(even) .service-image {
    right: auto;
    left: 0;
}
.service-div:nth-child(even) .service-desc {
    margin-left: 33%;
}
#contact-form-section {
    margin-top: -30px;
    padding: 30px;
    background: #f7f7f7;
}
#footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(to bottom left, #9e9e9e, #e3e3e3);   
}
#footer div {
    padding: 20px;
    flex: 1;
}
#footer div#footer-last {
    flex: 0 0 25vw;
    max-width: 400px;
    text-align: left;
    color: #fff;
    /*background: #F44336;*/
    background: #f62a2a;
    /*background-image: linear-gradient(to bottom right, #F44336, #e35300);  */
    background-image: linear-gradient(to top left, #f62a2a, #dd0000);    
}


@media only screen and (max-width: 1500px) {   
    #header-split-div1 .header-split-text {
        left: 30%;
        top: 30%;
    }
    #header-split-div2 .header-split-text {
        right: 30%;
        bottom: 20%;
    }
}

@media only screen and (max-width: 1200px) {   
    #header-split-div1 .header-split-text {
        left: 20%;
        top: 30%;
    }
    #header-split-div2 .header-split-text {
        right: 20%;
        bottom: 20%;
    }
}

@media only screen and (max-width: 1100px) {  
    body {font-size: medium;} 
    h1 {font-size: 225%;}
    .menu-item {
        padding: 15px 10px;
    }
    .content-section {padding: 100px 10px;}
    .first-section {padding-top: 0;}
        
    /*Stop hover effect here*/
    #header-split-div1 {right: 50%}
    #header-split-div2 {left: 50%}
    #header-split-div1 .header-split-text {
        position: relative;
        left: auto;
        top: auto;
    }
    #header-split-div2 .header-split-text {
        position: relative;
        right: auto;
        bottom: auto;
    }
    .header-split-section {
        display: flex;
        justify-content: center;
        align-items: center;
        /*position: absolute;*/
        /*height: 100%;*/
        width: 50%;
        -ms-transform: skew(0deg); /* IE 9 */
        -webkit-transform: skew(0deg); /* Safari prior 9.0 */
        transform: skew(0deg); /* Standard syntax */
        /*overflow: hidden;*/
    }
    .header-split-image, .header-split-text {
        /*position: absolute;*/
        -ms-transform: skew(0deg); /* IE 9 */
        -webkit-transform: skew(0deg); /* Safari prior 9.0 */
        transform: skew(0deg); /* Standard syntax */
        /*overflow: visible;*/
    }
    .header-split-image img {
        width: 140%;
        max-width: 140%;
        height: 100%;
        width: auto;
        max-width: 100%;
        object-fit: cover;
        margin-left: 0;
        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
        filter: grayscale(0%);
    }
    .header-split-text {min-width: 300px;}
    .header-split-text-details {max-height: 300px;}
    .header-split-text-details p {display: none;}
    .header-split-text-details .cta {min-width: 200px;}
    /*Hover states triggered by js*/
    #header-split-div1.hoverfocus {
        width: 50%;
        right: 50%;
    }
    #header-split-div1.hoverfade {
        right: 50%;
    }
    #header-split-div2.hoverfocus {
        width: 50%;
        left: 50%;
    }
    #header-split-div2.hoverfade {
        left: 50%;
    }
    .hoverfocus img {margin-top: 0;}
    .main-header .content {padding: 0 50px;}
    .main-header {margin: 0 auto 50px;}
    .page-links {min-width: 250px;}
    .page-links.page-links-blank {display: none;}
}

@media only screen and (max-width: 900px) {  
    #site-nav {font-size: small;}
    #site-nav img {
        height: 1.25em;
        padding: 15px 7px;
    }
    .menu-item {
        padding: 15px 7px;
    }
    #page-header-home {height: auto;}
    .header-split-section, #header-split-div1, #header-split-div2 {
        position: relative;
        height: 55vw;
        width: 100%;
        left: 0;
        right: 0;
        overflow: hidden;
    }
    #header-split-div1 {margin-top: 1.5em;}
    /*Hover states triggered by js*/
    #header-split-div1.hoverfocus {
        width: 100%;
        right: 0;
    }
    #header-split-div1.hoverfade {
        right: 0;
    }
    #header-split-div2.hoverfocus {
        width: 100%;
        left: 0;
    }
    #header-split-div2.hoverfade {
        left: 0;
    }

    #page-header-home-static {
        background: #ababab url(images/refinery-with-mountains-static.jpg) no-repeat scroll;
        background-size: cover;
        background-position: center;
    }
    #page-header-about {
        background: #ababab url(images/worker-in-front-of-refinery.jpg) no-repeat scroll;
        background-size: cover;
        background-position: left;
    }
    #page-header-services {
        background: #ababab url(images/refinery-at-sunset.jpg) no-repeat scroll;
        background-size: cover;
        background-position: center;
    }
    #page-header-careers {
        background: #ababab url(images/plant-workers.jpg) no-repeat scroll;
        background-size: cover;
        background-position: right;
    }
    #page-header-contact {
        background: #ababab url(images/inspectors-in-front-of-plant.jpg) no-repeat scroll;
        background-size: cover;
        background-position: center;
    }
    .content-section {padding: 50px 10px;}
    .first-section {padding-top: 0;}
    .main-header .content {padding: 0 20px;}
    .main-header {
        top: -1em;
        margin: 0 auto 25px;
    }
    .notice {
        margin: -25px auto 50px;
        padding: 30px 20px;
    }
    .flex-header-container {flex-direction: column;}
    #map-section {height: auto;}
    #map-div, .world-map-hover {height: 42vw;}
    #map-section {height: auto;}
    #map-div {width: 100%;}
    #map-desc {
        position: relative;
        display: block;
        width: 100%;
        padding-top: 20px;
    }
    .bio {min-width: 250px;}
}

@media only screen and (max-width: 630px) { 
    #nav-content #big-menu {display: none;}
    #nav-content #small-menu {display: block;}
    .contact .flex.equal div {
        min-width: 300px;
        text-align: center;
    }
    #contact-form-section, #contact-form {text-align: left;}
    #footer {
        flex-direction: column-reverse;
    }
    #footer div#footer-last {
        flex: 1;
        width: 100%;
        padding: 20px 0;
        max-width: none;
        text-align: center;
    }
}

@media screen and (max-width: 700px) and (min-aspect-ratio: 1/1) {		/*mobile landscape*/
}