styleCopy.css

html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }

html { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit}

.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden;}


*{
    margin: 0px;
    padding: 0px;
}

body {
    background-color:#F4F4F4;
    font-family: 'Catamaran', sans-serif;
    font-size: 20px;
    line-height: 29px;
}

html {
    font-size: 62.5%;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #E85B26;
}

nav ul li {
    display: inline-block;
    margin: 0 4%;
    font-family: 'Nova Flat', cursive;
    font-size: 20px;
}

nav ul {
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
    max-width: 400px;
}

nav li a {
    color: #186684;;
}

nav span {
    color: #E85B26;
}
header {
    background: url(./assets/image-1@2x.png) no-repeat top; 
    background-size: cover;
    height: 100vh;
}

.socialMediaContainer {
    position: absolute;
    right: 0px;
    top: 33%;
    font-size: 25px;
}

.socialMediaContainer a {
    color: #E85B26;
}

.socialMediaContainer ul li {
    margin: 15px 0;
}

.headerContainer {
    max-width: 90%;
    position: relative;
    margin: 0px auto;
    height: 100%;
}

h1 {
    font-family: 'Nova Flat', cursive;
    color: #186684;
    font-size: 110px;
    background-color: rgba(227,228,234, 0.89);
    display: inline-block;
    padding: 25px;
    position: absolute;
    top: 47%;
    left: 41.5%;
    margin: 0px;
    letter-spacing: 1.5px;
    line-height: normal;

}

h1 span{
    display: block;
}

.wrapper {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

/* about section styles */

.about div {
    width: 50%;
    height: 80vh;
    max-height: 600px;
}

.imageContainer.right {
    background: url(./assets/image-2_2@2x.png) no-repeat center;
    background-size: cover;
}

.imageContainer.left {
    background: url(./assets/image-2-copy@2x.png) no-repeat center;
    background-size: cover;
}

.about .left {
    float: left;
}

.about .right {
    float: right;
}

h2 {
    color: #186684;
    font-family: 'Nova Flat', cursive;
    font-size: 42px;
    margin-bottom: 30px;
}

.about .textContainer {
    margin: 20% 15%;
    width: 70%;
    height: auto;
}

img {
    width: 100%;
    height: 100%;
    display: block;
}
/* button styling */

button {
    font-family: 'Nova Flat', cursive;
    font-size: 18px;
    line-height: 29px;
    border: 4px solid #E85B26;
    text-transform: uppercase;
    padding: 7px 10px;
    margin-top: 20px;
    max-width: 180px;
    width: 100%;
}
.read {
        color: #186684;
}

.read:hover, 
.read:focus {
    background-color: #186684;
    border: 4px solid #F4F4F4;
    color: #F4F4F4;
}

.sub {
    background-color: #186684;
    color: #F4F4F4;
    width: 30%;
}

.sub:hover,
.sub:focus {
    border: 4px solid #186684;
    background: #F4F4F4;
    color: #186684;
}

/* slide out nav */

input[type=checkbox] {
    display: none;
}

.toggle .bar {
    /* needs display block for bars to appear */
    display: block;
    height: 4px;
    width: 100%;
    background-color: #186684;
    border-radius: 50px;
    margin-top: 10px;
}

.toggle {
    display: none;
    position: absolute;
    width: 40px;
    height: 50px;
}

/* blog Section styles */

.blog {
    background-color:  rgba(227,228,234, 0.89);
}

.blog .Bottom,
.blog .text {
    float: left;
}

.blog .Bottom {
    width: 30%;
    max-width: 300px;
}

.blog .text {
    width: calc(70% - 4%);
    margin-left: 4%;
}

.blog img {
    object-fit: contain;
}


.blog, .gram {
    padding: 6% 0px;
}

.links {
    background: url(./assets/image-5@2x.png) no-repeat center;
    background-size: cover;
    height: 60vh;
}

.links ul li {
    display: inline-block;
    margin: 0 30px;
    padding: 70px 0 70px 0;
}

.links ul {
    background-color: #F4F4F4;
    width: 40%;
    min-width: 600px;
    text-align: center;
    margin: 0px auto;
    position: relative;
    top: 22%;
}

.links span {
    display: block;
    color: #186684;
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
}

.links li {
    font-size: 40px;
    color: #E85B26;
}

.links ul li:first-child {
    font-size: 60px;
}

.gram h2 {
    text-align: center;
}

.gram ul li {
    margin-right: 30px;
    width: calc((100% - 60px) / 3);
    float: left;
}

.gram ul li:nth-child(3n) {
    margin-right: 0px;
}

/* footer styles */

.info {
    float: left;
}

.email {
    float: right;
}

footer h2 {
    color: #E85B26;
}

footer nav,
.contact {
    padding-bottom: 5%;
}


.email {
    width: 50%;
}

.email h2 {
    margin-bottom: 10px;
}

input[type=email] {
    width: 70%;
    border: none;
    padding: 12.5px 5%;
    margin-top: 21px;
}

input[type=email],
.sub {
    float: left;
}

footer .copyright {
    color:#F4F4F4;
    text-align: center;
    background:#1F2022;
}

/* media query */

@media (max-width: 1024px) {

    .wrapper,
    .about .textContainer {    
        max-width: 80%;
    }

    body {
        font-size: 16px;
        }

    h1 {
        left: initial;
        right: 5%;
    }

    .socialMediaContainer {
        top: 10%;
        right: 5%;
    }

    header {
        background-position: 30% 50%;
    }

    .headerContainer {
        max-width: 100%;
        position: relative;
    }

    .read {
        display: block;
        margin: 0 auto;
        font-size: 16px;
    }

    .about div {
        width: 100%;
        margin: 0 auto;
        height: auto;
        padding: 5% 0%;
    }

    .about .right,
    .about .left,
    input[type=email],
    .sub {
        float: none;
    }

    .about .textContainer,
    .blog .textContainer {
        width: 100%;
        margin: 0 auto;
        padding: 3% 0px;
    }


    .about .imageContainer {
        height: 50vh;
        background-attachment: fixed;
        background-size: 1024px;
        background-position: top;
    }

        h2 {
        text-align: center;
    }

    .blog .imageContainer {
        float: none;
        width: 50%;
        height: 50%;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    .blog .text {
        float: none;
        margin: 0 auto;
        width: 100%;
    }

    .gram {
        background-color: #F4F4F4;
    }

    .email {
        text-align: center;
    }

    input[type=email],
    .sub {
        text-align: center;
        width: 80%;
        max-width: initial;
    }



}

@media (max-width: 780px) {

    body,
    button {
        font-size: 16px;
    }

    header{
        overflow: hidden;
    }

    .toggle {
        display: block;
        position: absolute;
        top: 25px;
        right: 22px;
    }

    input[type=checkbox] {
        display: block;
        opacity: 0;
        height: 50px;
        width: 50px;
        position: absolute;
        top: 25px;
        right: 22px;
    }

    input[type=checkbox]:hover {
        cursor: pointer;
    }

    header nav,
    header .socialMediaContainer {
        position: absolute;
        right: 1000px;
    }


    h1 {
        right: 0px;
        top: 60%;
        font-size: 100px;
    }

    h2 {
        font-size: 30px;
    }

    .about .imageContainer {
        background-attachment: scroll;
        background-position: center;
        background-size: 780px;
    }

    .gallery ul li:last-child{
        display: none;
    }

    .gallery ul li {
        width: calc(50% - 5%);
        margin-right: 5%;
    }

    .gallery ul li:nth-child(2) {
        margin-right: 0px;
    }


    .links {
        height: 50vh;
    }

    .contact .info,
    .contact .email {
        float: none;
        margin: 0 auto;
        text-align: center;
    }

    .contact .email {
        padding-top: 5%;
    }
    
}

@media (max-width: 480px) {

    h1 {
        right: 0px;
        top: 50%;
        font-size: 75px;
    }

    .links ul {
        min-width: initial;
        top: 15%;
    }

    .links ul li:first-child {
        font-size: 50px;
    }

    .links ul li {
        display: block;
        padding: 10px 0px;
    }

    .links ul li {
        font-size: 40px;
    }
    
    .links ul li span {
        font-size: 20px;
    }
}