@media only screen and (min-width: 2001px) {

        .padding {
                padding-right: 17.5%;
                padding-left: 17.5%;
        }

}



@media only screen and (min-width: 1551px) and (max-width: 2000px) {

        .padding {
                padding-right: 15%;
                padding-left: 15%;
        }

}



@media only screen and (min-width: 1201px) and (max-width: 1550px) {

        .padding {
                padding-right: 12.5%;
                padding-left: 12.5%;
        }

}



@media only screen and (min-width: 1401px) {

        h1 { 
                font-size: 2.5em;
        }

        .section p {
                width: 65%;
        }

        .section ol p {
                width: 100%;
        }

        ol li {
                float: left;
                width: 31%;
                margin-right: 3.5%;
        }
        
        ol li:nth-child(3n) {
                margin-right: 0;
        }
        
        ol li:nth-child(3n+1) {
                clear: left;
        }

}



@media only screen and (min-width: 1001px) and (max-width: 1400px) {

        .site-branding {
                max-width: 50%;
        }

        .site-logoxxx {
                max-width: 50%;
        }

        h1 { 
                font-size: 2em;
        }

        ol li {
                float: left;
                width: 48%;
        }
        
        ol li:nth-child(odd) {
                margin-right: 2%;
                clear: left;
        }
        
        ol li:nth-child(even) {
                margin-left: 2%;
        }

}



@media only screen and (min-width: 1001px) and (max-width: 1200px) {

        .padding {
                padding-right: 10%;
                padding-left: 10%;
        }

}



@media only screen and (min-width: 1001px) {

        .action-buttons {
                float: right;
                margin-top: 1.5em;
        }

        .button-menu, 
        .button-menu-close {
                display: none;
        }

        .the-title { 
                text-shadow: 1px 1px 2px #000000;
                font-size: 4em;
                width: 60%;
        }

        .site-branding {
                position: absolute;
                top: 1.5em;
                left: 0;
                z-index: 3;
                max-width: 25%;
        }

        .site-header {
                padding-bottom: 1.5em;
        }

        .site-header-inner {
                position: relative;
        }

        .page-header {
                padding-top: 5.5em;
                padding-bottom: 1em;
        }

        .the-header {
                z-index: 2;
                padding-bottom: 1.5em;
        }

        .featured-image-container {
                position: absolute;
                top: 0;
                left: 45%;
                width: 55%;
                height: 100%;
        }

        .featured-image-rounded {
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
        }

        .featured-image {
                display: none;
        }

        .below-title-notice {
                width: 50%;
        }

        .gallery-item {
                display: inline-block;
                width: 49%;
        }

        .gallery-item:nth-of-type(even) {
                margin-left: 1%;

        }

        .gallery-item:nth-of-type(odd) {
                margin-right: 1%;
        }

        .footer-icon {
                font-size: 20em;
                position: absolute;
                z-index: 1;
                right: 10%;
                bottom: 0;
                opacity: 0.15;
                color: #ffffff;
        }

        .footer-logo {
                float: left;
                width: 25%;
        }

        .footer-notice {
                float: right;
                width: 65%;
                margin-right: 10%;
        }

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

        .contact-method {
                margin-left: 1em;
        }

        .back-to-top {
                top: 0;
        }

}



@media only screen and (max-width: 1000px) {

        .action-buttons {
                position: absolute;
                top: 1em;
                z-index: 3;
        }

        .button-menu-close {
                position: absolute;
                top: 1em;
                right: 7.5%;
        }

        .featured-image-container {
                background-image: none !important;
        }

        .featured-image {
                border-top: 10px solid #ffffff;
        }

        .the-title {
                font-size: 2.75em;
                letter-spacing: -2px;
                line-height: 1.2;
        }

        h1 { 
                font-size: 2em;
                margin-bottom: 1em;
        }

        ol li h3 i {
                font-size: 2em;
        }

        .footer-icon {
                display: none !important;
        }

        .footer-logo {
                margin-top: 1em;
                margin-bottom: 1em;
        }

        .contact-email,
        .contact-phone {
                display: none;
        }



        .back-to-top {
                bottom: 0;
        }

}



@media only screen and (min-width: 601px) and (max-width: 1000px) {

        .padding {
                padding-right: 12.5%;
                padding-left: 12.5%;
        }

        .site-branding {
                max-width: 50%;
        }

        .action-buttons {
                right: 0;
        }

        .footer-logo {
                max-width: 50%;

        }

}



@media only screen and (min-width: 1001px) {



}



@media only screen and (max-width: 1000px) {



}



@media only screen and (max-width: 600px) {

        .site-branding {
                position: relative;
                margin-left: 0;
                padding-top: 1em;
                padding-bottom: 2em;
                max-width: 70%;
        }

        .action-buttons {
                right: 7.5%;
        }

        .footer-logo {
                max-width: 75%;

        }

}



@media only screen and (min-width: 401px) and (max-width: 600px) {

        .padding {
                padding-right: 7.5%;
                padding-left: 7.5%;
        }

}


@media only screen and (max-width: 400px) {

        .padding {
                padding-right: 5%;
                padding-left: 5%;
        }

}