*, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    font-family: 'Open Sans', sans-serif;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
    color: darkgrey;
    text-decoration: none;
}

a:hover {
    color: black;
}

/* reset end */

.grid { 
display: grid;
    grid-template-columns: 2% auto 2%;
    grid-template-rows: auto;
    grid-template-areas: "one navi two"
                        "one heading two"
                        "one title two"
                        "one image1 two"
                        "one image2 two"
                        "one image3 two"
                        "one feature two"
                        "one image4 two"
                        "one help two"
                        "one about two"
                        "one logos two"
                        "one footer two";
    grid-gap: 10px;
}

@media only screen and (min-width: 481px){
.grid {
    display: grid;
    grid-template-columns: 10% 1fr 1fr 10%;
    grid-template-rows: auto;
    grid-template-areas: "one navi navi two"
                        "one heading heading two"
                        "one title title two"        
                        "one image2 image1 two"
                        "one feature feature two"
                        "one image4 image3 two"
                        "one help help two"
                        "one about about two"
                        "one logos logos two"
                        "one footer footer two";
    grid-gap: 20px;  }
}

@media only screen and (min-width: 769px){
    .grid {
        display: grid;
        grid-template-columns: 10% 1fr 1fr 1fr 10%;
        grid-template-rows: auto;
        grid-template-areas: "one navi navi navi two"
                            "one heading heading heading two"
                            "one title title title two"        
                            "one image1 image2 image3 two"
                            "one image4 feature feature two"
                            "one help help help two"
                            "one about about about two"
                            "one logos logos logos two"
                            "one footer footer footer two";
        grid-gap: 20px;  }
}



.grid > * {
    display: flex;
    align-items: center;
    justify-content: center;
}






.navi {
    grid-area: navi;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-auto-rows: auto;
    grid-template-areas: "space navhome navwork navcontact";
    text-align: right;
    justify-content: flex-end;
    padding-top: 20px;
    padding-bottom: 30px;
    font-weight: 300;
    line-height: 1.5;
    grid-column-gap: 20px;  
}

.navhome {
    grid-area: navhome;
    align-self: flex-end;

}

.navwork {
    grid-area: navwork;
        align-self: flex-end;

}

.navcontact {
    grid-area: navcontact;
        align-self: flex-end;
}

.heading {
    grid-area: heading;
            justify-content: flex-start;
}

.title {
    grid-area: title;
    justify-content: flex-start;
    display: inline;   
}

h1 {  
    font-size: 2.27em;
    color: #FBB534;
    font-weight: 700; 
    padding-bottom: 40px;
}

h2 {
    font-size: 1.75em;
    color: #74d6fc;
    font-weight: 300; 
    padding-bottom: 20px;
}

h3 {
    font-size: 1.25em;
    font-weight: 500;
    color: darkgray
}

h4 {
    font-size: 1em;
    font-weight: 500;
}


@media only screen and (min-width: 600px){
h1 {
    font-size: 3.7em;
    }
h2 {
    font-size: 1.8em;
}}    

@media only screen and (min-width: 1200px){
h1 {
    font-size: 4.27em;
    }
h2 {
    font-size: 2.7em;
}}    


.black {
    color: black;
}

.image {
    width: 100%;
    height: 100%
    object-fit: cover;
}

.headerimg1 {
    display: none;
}

.headerimg2 {
    display: none;
}

.headerimg3 {
    display: block;
}

@media only screen and (min-width: 481px){
.headerimg1 {
    display: block;
}
    .headerimg2 {
    display: none;
}
    .headerimg3 {
    display: none;
}}

@media only screen and (min-width: 769px){
.headerimg1 {
    display: none;
}
    .headerimg2 {
    display: block;
}
    .headerimg3 {
    display: none;
}}



.foliopack p {
    padding-top: 5px;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.3;
    color: darkgrey
}


.folio {
    grid-area: about;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}


@media only screen and (min-width: 481px){
.folio {
    grid-area: about;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    align-items: start;
}}

@media only screen and (min-width: 769px){
.folio {
    grid-area: about;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
    align-items: start;
}}


.letter {
    width: 60px;
    object-fit: cover;
}

.image1 {
    width: 100%;
    height:  100%;
    grid-area: image1;
}

.image2 {
    grid-area: image2;
}

.image3 {
    grid-area: image3;
}

.image4 {
    grid-area: image4;
}

.feature {
    grid-area: feature;
}

.help {
    grid-area: help;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color: black;
    grid-gap: 20px;
    column-count: 1;
    background-color: #ebfcff;
    font-size: 1.2em;
    line-height: 1.4;
}

@media only screen and (min-width: 769px){
.help {
    grid-area: help;
    padding-top: 20px;
    padding-bottom: 20px;
    color: black;
    grid-gap: 20px;
    column-count: 2;
    font-size: 1.4em;
    line-height: 1.3;
}}

@media only screen and (min-width: 481px){
.help {
    grid-area: help;
    padding-top: 20px;
    padding-bottom: 20px;
    color: black;
    grid-gap: 20px;
    column-count: 1;
        font-size: 1.4em;
    line-height: 1.3;
}
}

.terms {
    grid-area: help;
    display: block;
}


ol {
    font-size: 1.25em;
}

article {
   font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    
}

.about {
    grid-area: about;
    display: grid;
    background-color: #ebebeb;
    color: back;
    padding: 20px;
    align-items: start;
    grid-gap: 20px;
}



.aboutportrait {
    width: 80px;
}


.logos {
    grid-area: logos;
    padding-bottom: 40px;
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-gap: 1rem;
}

.footer {
    grid-area: footer;
    padding-bottom: 20px;
    padding-top: 40px;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: auto;
    grid-column-gap: 20px;  

}


.socialtxt {
      font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    color: darkgrey  
}





strong {
    font-weight: 600;
    color: black;
}

.social {
    width: 40px;
}