@media only screen 
and (-webkit-min-device-pixel-ratio: 1)
and (max-width: 1400px),
only screen 
and (-min-moz-device-pixel-ratio: 1)
and (max-width: 1400px),
only screen 
and (-o-min-device-pixel-ratio: 1/1)
and (max-width: 1400px),
only screen 
and (min-device-pixel-ratio: 1)
and (max-width: 1400px),
only screen 
and (in-resolution: 72dpi)
and (max-width: 1400px),
only screen 
and (min-resolution: 1dppx)
and (max-width: 1400px),
only screen
and (max-width: 1400px) {
    header, #flash li, .content, footer {
        width: 90%;
    }

    header {
        padding: 10px 5%;
    }

    #flash li {
        padding: 0px 5%;
    }
    
    .content, footer {
        padding: 20px 5%;
    }

    nav, #mainContactForm {
        width: 75%;
    }
}

@media only screen 
and (-webkit-min-device-pixel-ratio: 1)
and (max-width: 1200px),
only screen 
and (-min-moz-device-pixel-ratio: 1)
and (max-width: 1200px),
only screen 
and (-o-min-device-pixel-ratio: 1/1)
and (max-width: 1200px),
only screen 
and (min-device-pixel-ratio: 1)
and (max-width: 1200px),
only screen 
and (in-resolution: 72dpi)
and (max-width: 1200px),
only screen 
and (min-resolution: 1dppx)
and (max-width: 1200px),
only screen
and (max-width: 1200px) {
    header, #flash li, .content, footer {
        width: 95%;
    }

    header {
        padding: 10px 2.5%;
    }

    #flash li {
        padding: 0px 2.5%;
    }
    
    .content, footer {
        padding: 20px 2.5%;
    }

    nav, #mainContactForm {
        width: 75%;
    }

    #largeCol, #membershipContent {
        width: 70%;
    }
    
    #smallCol, #membershipInput {
        width: 28%;
    }
}

/* Landscape and big portrait devices - general styling */
@media only screen 
and (-webkit-min-device-pixel-ratio: 1)
and (min-width: 768px)
and (max-width: 1024px) 
and (orientation: landscape),
only screen 
and (-min-moz-device-pixel-ratio: 1)
and (min-width: 768px)
and (max-width: 1024px) 
and (orientation: landscape),
only screen 
and (-o-min-device-pixel-ratio: 1/1)
and (min-width: 768px)
and (max-width: 1024px) 
and (orientation: landscape),
only screen 
and (min-device-pixel-ratio: 1)
and (min-width: 768px)
and (max-width: 1024px) 
and (orientation: landscape),
only screen 
and (in-resolution: 72dpi)
and (min-width: 768px)
and (max-width: 1024px) 
and (orientation: landscape),
only screen 
and (min-resolution: 1dppx)
and (min-width: 768px)
and (max-width: 1024px) 
and (orientation: landscape),
only screen
and (min-width: 768px)
and (max-width: 1024px) 
and (orientation: landscape),
only screen 
and (-webkit-min-device-pixel-ratio: 1)
and (min-width: 800px)
and (max-width: 1024px)
and (orientation: portrait),
only screen 
and (-min-moz-device-pixel-ratio: 1)
and (min-width: 800px)
and (max-width: 1024px)
and (orientation: portrait),
only screen 
and (-o-min-device-pixel-ratio: 1/1)
and (min-width: 800px)
and (max-width: 1024px)
and (orientation: portrait),
only screen 
and (min-device-pixel-ratio: 1)
and (min-width: 800px)
and (max-width: 1024px)
and (orientation: portrait),
only screen 
and (in-resolution: 72dpi)
and (min-width: 800px)
and (max-width: 1024px)
and (orientation: portrait),
only screen 
and (min-resolution: 1dppx)
and (min-width: 800px)
and (max-width: 1024px)
and (orientation: portrait),
only screen
and (min-width: 800px)
and (max-width: 1024px)
and (orientation: portrait) {
    #websiteNav ul {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #websiteNav li {
        width: 32%;
        text-align: center;
    }
}

/* Portrait devices (and landscape mobiles) - general styling */
@media only screen 
and (-webkit-min-device-pixel-ratio: 1)
and (max-width: 800px)
and (orientation: portrait),
only screen 
and (-min-moz-device-pixel-ratio: 1)
and (max-width: 800px)
and (orientation: portrait),
only screen 
and (-o-min-device-pixel-ratio: 1/1)
and (max-width: 800px)
and (orientation: portrait),
only screen 
and (min-device-pixel-ratio: 1)
and (max-width: 800px)
and (orientation: portrait),
only screen 
and (in-resolution: 72dpi)
and (max-width: 800px)
and (orientation: portrait),
only screen 
and (min-resolution: 1dppx)
and (max-width: 800px)
and (orientation: portrait),
only screen
and (max-width: 800px)
and (orientation: portrait),
only screen 
and (-webkit-min-device-pixel-ratio: 1)
and (max-width: 768px)
and (orientation: landscape),
only screen 
and (-min-moz-device-pixel-ratio: 1)
and (max-width: 768px)
and (orientation: landscape),
only screen 
and (-o-min-device-pixel-ratio: 1/1)
and (max-width: 768px)
and (orientation: landscape),
only screen 
and (min-device-pixel-ratio: 1)
and (max-width: 768px)
and (orientation: landscape),
only screen 
and (in-resolution: 72dpi)
and (max-width: 768px)
and (orientation: landscape),
only screen 
and (min-resolution: 1dppx)
and (max-width: 768px)
and (orientation: landscape),
only screen
and (max-width: 768px)
and (orientation: landscape) {
    body {
        font-size: 15px;
        padding-top: 80px;
    }

    header #websiteLogo {
        min-width: 100px;
        margin: 5px 0 0;
    }

    #websiteNav ul, footer, #blogPost {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #websiteNav ul {
        -webkit-transition-property: max-height;
        -moz-transition-property: max-height;
        -ms-transition-property: max-height;
        -o-transition-property: max-height;
        transition-property: max-height;
    }
    
    #websiteNav ul {
        -webkit-transition-duration: 900ms;
        -moz-transition-duration: 900ms;
        -ms-transition-duration: 900ms;
        -o-transition-duration: 900ms;
        transition-duration: 900ms;
    }
    
    #websiteNav ul {
        -webkit-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }

    header, #flash li, .slideshow {
        width: 98%;
        padding: 0 1%;
    }

    .content, footer {
        width: 98%;
        padding: 1.11em 1%;
    }

    header {
        max-height: 80px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: rgb(255, 255, 255);
    }

    header.sticky {
        height: unset;
        background-color: inherit;
    }

    .logo {
        max-width: 35%;
        height: 100%;
        max-height: 62px;
    }

    .logo img {
        height: 100%;
        max-height: 62px;
        width: auto;
    }

    #websiteNav #hamburger {
        cursor: pointer;
        width: 45px;
        height: 45px;
        display: block;
        position: fixed;
        top: 12px;
        right: 1%;
        background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 5%, rgb(46, 49, 146) 5%, rgb(46, 49, 146) 25%, rgb(255, 255, 255) 25%, rgb(255, 255, 255) 40%, rgb(46, 49, 146) 40%, rgb(46, 49, 146) 50%, rgb(46, 49, 146) 50%, rgb(46, 49, 146) 60%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 75%, rgb(46, 49, 146) 75%, rgb(46, 49, 146) 95%, rgb(255, 255, 255) 95%, rgb(255, 255, 255) 100%);
        background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 5%, rgb(46, 49, 146) 5%, rgb(46, 49, 146) 25%, rgb(255, 255, 255) 25%, rgb(255, 255, 255) 40%, rgb(46, 49, 146) 40%, rgb(46, 49, 146) 50%, rgb(46, 49, 146) 50%, rgb(46, 49, 146) 60%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 75%, rgb(46, 49, 146) 75%, rgb(46, 49, 146) 95%, rgb(255, 255, 255) 95%, rgb(255, 255, 255) 100%);
        background: -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 5%, rgb(46, 49, 146) 5%, rgb(46, 49, 146) 25%, rgb(255, 255, 255) 25%, rgb(255, 255, 255) 40%, rgb(46, 49, 146) 40%, rgb(46, 49, 146) 50%, rgb(46, 49, 146) 50%, rgb(46, 49, 146) 60%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 75%, rgb(46, 49, 146) 75%, rgb(46, 49, 146) 95%, rgb(255, 255, 255) 95%, rgb(255, 255, 255) 100%);
        background: linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 5%, rgb(46, 49, 146) 5%, rgb(46, 49, 146) 25%, rgb(255, 255, 255) 25%, rgb(255, 255, 255) 40%, rgb(46, 49, 146) 40%, rgb(46, 49, 146) 50%, rgb(46, 49, 146) 50%, rgb(46, 49, 146) 60%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 75%, rgb(46, 49, 146) 75%, rgb(46, 49, 146) 95%, rgb(255, 255, 255) 95%, rgb(255, 255, 255) 100%);
    }

    #websiteNav ul {
        width: 100%;
        max-width: 480px;
        max-height: 0;
        overflow: hidden;
        position: fixed;
        right: 0;
        top: 75px;
        background-color: rgb(255, 255, 255);
        box-shadow: -1px 2px 2px rgb(255, 221, 0);
    }

    #websiteNav.openMenu ul {
        max-height: 18em;
        overflow: hidden;
    }

    #websiteNav ul li {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        margin: 0;
    }

    #websiteNav ul li:hover {
        background-color: rgb(250, 250, 250);
    }

    #websiteNav ul li a {
        display: block;
    }

    .half, #mainContactForm, .contact #contactNames, .contact #eventName, #largeCol, #smallCol, .blogImage, .blogDetails, .smallCol, .largeCol, #membershipContent, #membershipInput {
        width: 100%;
    }

    #mainContactForm {
        margin: 0;
    }

    .quarter {
        width: 48%;
        margin: 0 0 1.11em;
    }

    .imageLeft, .imageRight {
        float: none;
        width: 90%;
        margin: 0 5% 20px;
    }

    .twoColSmallLarge {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .twoColSmallLarge > div:first-child {
        margin-bottom: 20px;
    }

    #blogContent {
        text-align: justify;
    }

    footer, footer .half + .half {
        text-align: center;
    }
}