@media only screen and (max-width: 600px) {
    .link {
       font-size: .9em;
    }
    
    .footer {
          position: relative;
    }
    
    .footernav a {
        display: block;

    }

}

body {
    margin: 0; /* bottom = footer height */
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: .8em;
    font-weight: 500;
    line-height: 1.5;
   
}

#homepage {
     background-color: #242424;
}

@font-face {
    font-family: 'Cooper Hewitt Bold';
    src: url(http://www.dylanstefanisko.com/fonts/CooperHewitt-Bold.otf) format("opentype");
}

h3, h4, h5, h6 {
    color: #242424;
    text-align: center;
    margin: 0;
}

a {
    color: #333;
    text-decoration: none;
    font-weight: 700;
}

a:hover {
    opacity: .7;
}

.header {
    background-color: rgba(25,25,25,1);
    margin: 0;
    padding: .1em;
    letter-spacing: .1em;
}

.content {
    padding: 2% 0;
}

.content2 {
    background-color:#f8f8f8;
    padding: 2% 0 5% 0;
    margin: 0;
}

.content3 {
    background-color: rgba(25,25,25,1);
    padding: 2% 0; 
}

.content img {
    border: 1em 0 1em 0 solid black;
    padding: 1em 0;
}

.next {
    padding: 2%;
    text-align: center;
    font-size: 3em;
    text-transform: uppercase;
     -webkit-transition: background .5s linear;
  -moz-transition: background .5s linear;
  -o-transition: background .5s linear;
  transition: background .5s linear;
     clear: both;
}

/*.next:hover {
    background-color: #242424;
    color: rgb(150,150,150);
}

.next:hover a {
    color: rgb(150,150,150);
}*/



.next a{
    text-decoration: none;
    color: black;
    width: 100%;
     clear: both;
}

.next a:hover {
    color: #ffffff;
}

#seanext {
    background: linear-gradient(to top right, rgba(226,61,74,1),rgba(197,87,100,1));
     clear: both;
}

#seanext:hover {
    background: black;
}




.logo a {
   color:  rgba(240,240,240, 1);
    text-decoration: none;
    
}

.logo a:hover{
    color: rgba(250,250,250,.8);
}


.logo h1 {
    padding: .6em 0 .4em 0;
    margin: 0;
    font-family: "Cooper Hewitt Bold", Tahoma, sans-serif;
    font-size: 2.5em;
    line-height: 90%;
    
}

.logo{
    margin: 0 auto;
    text-align: center;
}



.nav { 
    text-transform: uppercase;
    width: 20em;
    margin: 0 auto 1.6em auto;
    text-align: center;
    
}

.nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav li{
    display: inline;
    margin: 0 .5em;
}



.nav a {
    text-decoration: none;
    color:  rgba(250,250,250, 1);
    font-weight: 100;
    letter-spacing: .05em;
    
}

.nav a:hover {
    color: rgba(250,250,250, .8);
    
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 18px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1; color: black; font-weight: 600;}

.dropdown:hover .dropdown-content {
    display: block;
    background-color: rgba(245,245,245,.97);
}

.footer {
    text-align: center;
    color: rgb(200,200,200);
    padding: 1em;
    background-color: #242424;
    clear: both;
}


.footernav { 
    margin: 0 auto 1.6em auto;
    text-align: center;
    
}

.footernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footernav li{
    display: inline;
    margin: 0 .5em;
}

.footernav a {
    text-decoration: none;
    color:  rgba(250,250,250, 1);
    font-weight: 400;
    letter-spacing: .05em;
    
}

.footernav a:hover {
    color: rgba(250,250,250, .8);
    
}



.words {
    font-size: 1.2em;
    line-height: 1.6;
    color: white;
}

.linktext {
    color: black;
}


.gallery {
    width: 100%;
    margin: 0 auto;
    padding:0;
    display: inline-block;
}

.row {
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    display: table;
    border-top:5px rgba(15,15,15,1) solid;
    border-bottom:5px rgba(15,15,15,1) solid; 
}

.link {
    margin: 0 auto;
    padding: 0 1%;
    height:30vw;
    font-weight: 100;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    display: table-cell;
    vertical-align: middle;
    width: 100vw;
    color: rgba(215,215,215,0);
    background-color: rgba(240,240,240,0);
    text-decoration: none;
    line-height: 1.3;
}


.htext h1 {
    margin: 1.2em 0 0 0;
    font-weight: 900;
    letter-spacing: 1pt;
    font-size: 3em;
    line-height: 1.1;
    padding: 1% 0;
   
}

.htext h2 {
    margin: 0;
    padding: 1% 0;
    font-weight: 500;
    font-size: 1.4em;
    line-height: 1.4;
    max-width: 33em;
    text-align: left;
   
}

.linkhero {
    margin: 0 auto;
    padding: 0 5%;
    height:10vw;
    font-weight: 100;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    display: table-cell;
    vertical-align: middle;
    width: 100vw;
    color: rgba(215,215,215,0);
    background-color: rgba(25,25,25,.2);
    background-color: hsl(25, 25, 25);
    text-decoration: none;
    line-height: 1.3;
}

.linkhero:hover {
    color: rgba(215,215,215, 1);
    background-color: rgba(15,15,15,.9);
    padding: 10% 5% 10% 5%;
    height: 15vw;
    width: 100vw;
    
}


.linkhero h1 {
    color: #fafafa;
    position: relative;
    text-shadow: 2px 2px 3px rgba(25 25 25 / 40%);
}
.linkhero h2 {
    position: relative;
}

.linkherodark
{
    color: #191919;
}



.link:hover {
    color: rgba(215,215,215, 1);
    background-color: rgba(15,15,15,.9);
    padding: 10% 0  10% 2%;
    height: 25vw;
    width: 100vw;
}






/*
.hoverlink {
    padding: 10%;
    margin: 0;
    height: 4em;
    font-weight: 300;
    -webkit-transition: .5s linear;
    -moz-transition: .5s linear;
    -o-transition: .5s linear;
    transition: .5s linear;
    
}

.hoverlink:hover {
    color: rgba(0,0,0,0);
    padding: 20% 10%;
}*/








.icon {
    width:45px;
    max-height: 45px;
}

.icon1 {
    width:55px;
    max-height: 55px;
}


.icon-text {
    font-weight: bold;
    color: #191919;
}



.linkhero-blurb-open {
    margin: 0 auto;
    padding: 10% 1% 10% 1%;
    max-height:50vw;
    font-weight: 100;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    display: table-cell;
    vertical-align: middle;
    width: 100vw;
    color:rgba(25,25,25,1);
   background-color: #fafafa;
    background-position: center;
    text-decoration: none;
    line-height: 1.3;
}


.linkhero-blurb-open h1 {
    margin: 0 auto;
    font-weight: 900;
    letter-spacing: 1pt;
    font-size: 3em;
    line-height: 1.1;
    padding: 1% 0;
    text-align: center;
}

.linkhero-blurb-open h2 {
   margin: 0 auto;
    padding: 0 3%;
    font-weight: 500;
    font-size: 1.4em;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 33em;
    text-align: center;
}



.linkhero-blurb {
    margin: 0 auto;
    padding: 10% 1% 10% 1%;
    max-height:50vw;
    font-weight: 100;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    display: table-cell;
    vertical-align: middle;
    width: 100vw;
    color: rgba(215,215,215,1);
   background-color: rgba(25,25,25,1);
    background-position: center;
    text-decoration: none;
    line-height: 1.3;
}


.home-blurb {
    max-width: 36em;
    margin: 1em auto 0 auto;
    font-size: 1.2em;
    font-weight: 400;
    text-align: left;
    
}


.home-buffer img {
    max-width: 10em;
    margin: 0 auto;
    
}

.home-buffer {
    color:#eaeaea;
    padding: 5%;
    margin: 0 auto;
    text-align: center;
    background-color: rgba(25,25,25,1);
    border-bottom:5px rgba(15,15,15,1) solid; 
}

.home-buffer2 {
    text-align: center;
    color: rgba(25,25,25,1);
    background-color: #eaeaea;
    padding: 5%;
    
}

.headshot {
    max-width: 20em;
    margin: 0 auto .5em auto;
}

.headshot-img {
    max-width: 8em;
}

.opening {
    margin: 0 0 3em 0;
}

.opening-content {
    margin: 0 auto;
    padding: 5em 1%;
    max-width: 100%;
}

.opening-content h1 {
    margin: 0;
}

.open-blurb {
    margin: 1em auto .2em auto;
    text-align: left;
    font-size: 1.2em;
    padding: 0 2%;
    line-height: 1.6;
    max-width: 28em;
}


.open-blurb-above {
    margin: 0 auto;
    text-align: center;
    font-size: 1.2em;
    padding: 0 2%;
    line-height: 1.6;
}

.open-blurb-above h3 {
    margin: .5em 0;
}

open-blurb-footer {
    margin: 1em auto .2em auto;
    text-align: center;
    font-size: .8em;
    padding: 0 2%;
    line-height: 1.6;
}

.what-i-do {
text-align: left;
   padding: 0 2%;
}

.what-i-do h3 {
    text-align: left;
    margin: 1em auto;
    max-width: 28em;
    font-size: 1.2em;
}

.open-blurb-bullets ul {
    margin: 1em auto .2em auto;
    text-align: left;
    font-size: 1.2em;
    padding: 0 2%;
    line-height: 1.6;
    max-width: 28em;
}

.open-blurb-bullets li {
    text-align: left;
    padding: 0;
    margin: 0 0 0 1em;
}



.bullets-home {
    text-align: left; 
    font-size: 1.2em;
    
}



.biglink-home {
    margin: 0 auto;
    padding: 0 2% ;
    text-align: center;
    font-size: 1.1em;
    display: inline-block;
    width: 10em;
    text-transform: uppercase;
    
}

.biglink-home a{
    margin: 0 auto;
    display: block;
    color: rgba(25,25,25,1);
    border: .15em solid rgba(25,25,25,1);
    text-decoration: none;
    padding: .75em;
    -webkit-transition: background .3s linear;
  -moz-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
}

.biglink-home a:hover {
  opacity: .7;
}

.opening-open h2 {
    
}

.opening-open {
    background-image: url(images/sf-fog.png);
    background-position: bottom; 
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    background-color: #eaeaea;
}

.opening-open h2 {
    font-weight: 100;
}


.linkhero-blurb h1 {
    margin: 0 auto;
    font-weight: 900;
    letter-spacing: 1pt;
    font-size: 3em;
    line-height: 1.1;
    padding: 1% 0;
    text-align: center;
}

.linkhero-blurb h2 {
   margin: 0 auto;
    padding: 0 3%;
    font-weight: 500;
    font-size: 1.4em;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 33em;
    text-align: center;
}


.icon-blurb{
    text-align: left; color: #eaeaea; font-weight: 400; font-size: .8em;
}

.full-size {
    max-width: 99%; margin: 0 auto;
}

.full-size img {
    max-width: 100%;
}

.bignumber-home {
    font-size: 24px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-weight: bold;
}


.column-work {
    margin: 0 auto 1em auto;
    padding: 0 2em;
    text-align: center;
    font-size: 18px;
    width: 10em;
}

.column-home {
    display: inline-block;
    margin: 2em auto 1em auto;
    padding: 0 6em;
    text-align: center;
    font-size: 18px;
    max-width: 10em;
}

.column-home:hover {
    opacity: .7;
}

.columns-home {
    margin: 0 auto;
    text-align: center;
    line-height: 1;
}

.column-home-com {
    display: inline-block;
    margin: 1em auto;
    padding: 0 0.1%;
    text-align: center;
    font-size: 18px;
    width: 10em;
    vertical-align: middle;
}

.columns-home-companies {
    margin: 0 auto;
    text-align: center;
    line-height: 1;
    padding: 2% 0;
}


.companies-logo {
    max-width: 150px;
}

.companies-logo-sm {
    max-width: 70px;
}

.companies-logo-sm2 {
    max-width: 55px;
}



.columns-add-work {
    margin: 0 auto;
    text-align: center;
    line-height: 1;
    padding: 5% 0;
    max-width: 100%;
}

.column-add-work {
    display: inline-block;
    margin: 1% auto;
    padding: 3%;
    text-align: center;
    vertical-align: middle;
}


.add-work-img {
   max-width: 20em;
    border: .1em solid #eaeaea;
}


/* work and process*/

.callout {
    background-color: rgba(30,30,30,1);
    margin: 0;
    padding:5% 0 5% 0;
}

.callout2 {
    background-color: #f1f1f1;
    margin: 0;
    padding:5% 0;
}

.callout2 h2 {
    color: black;
}


.workhero {
    background-color: rgba(25,25,25,1);
    padding: 10vw 0;
    margin: 0;
}

.caf-logo {
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
}

.caf-logo img {
    max-width: 200px;
}

.caf-work-hero {
    max-width: 65vw;
   margin: 5em auto 0 auto;
    text-align: center;
}

.caf-work-hero img {
    max-width: 65vw;
    
}

.bignumber {
    font-size: 48px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color:#79DF84;
}

.bignumber2 {
    font-size: 64px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color:#79DF84;
}

.sectionhead {
    font-size: 24px;
    margin: 2em auto;
}

.sectionhead h2 {
    margin: 0 0 .3em 0;
}

.sectionhead p {
    font-size: 18px;
    margin: 0 auto;
    max-width: 41em;
}

.work-sample {
    margin: auto;
    text-align: center;
    max-width: 60em;
    padding: 0 3%;
}


.work-sample-wide {
    margin: auto;
    text-align: center;
    max-width: 80em;
    padding: 0 3%;
}

.work-sample-wide2 {
    margin: auto;
    text-align: center;
    max-width: 100%;
    padding: 0 3%;
}


.work-sample-hero {
    margin: auto;
    text-align: center;
    max-width: 55em;
}


.work-sample p {
    margin: .5em auto;
    line-height: 1.4;
    font-size: 15px;
    text-align: left;
    max-width: 33em;
}


.work-sample-wide p {
    margin: .5em auto;
    font-size: 16px;
    text-align: left;
    max-width: 33em;
}



.work-sample-wide2 p {
    margin: .5em auto;
    font-size: 15px;
    text-align: left;
    max-width: 33em;
    line-height: 1.4;
}

.work-sample-hero p {
    margin: .5em auto;
    font-size: 15px;
    text-align: left;
    max-width: 33em;
    line-height: 1.4;
}


.work-sample img {
    max-width: 100%;
    text-align: center;
    border: .15em solid #EAEAEA;
    border-radius: .5em;
    margin: 0 auto;
}



.work-sample-hero img {
    max-width: 100%;
    text-align: center;
    border: .15em solid #EAEAEA;
    border-radius: .5em;
    margin: 0 2%;
}



.work-screenshots {
    background-color: #FAFAFA;
    padding: 5% 0;
}

.work-screenshots h3 {
    font-size: 18px;
    margin: 0;
}

.line-sample {
    margin: 1em auto 5em auto;
    width: 5em;
    border-bottom: .5em solid rgba(50,50,50,.05);
}

.line-sample-home {
    margin: .5em auto;
    width: 5em;
    border-bottom: .25em solid rgba(0,0,0,.25);
    border-radius: 25px;
}

.numbers-column {
    display: inline-block;
   width: 20em;
    margin: 1em auto;
    padding: 0 2em;
    text-align: center;
}


.columns-jump {

    margin: 0 auto;
    text-align: center;
    line-height: 1;
    max-width: 45%;
}


.numbers-column-jump {
    display: inline-block;
    margin: 1em auto;
    padding: 0 1em;
    text-align: center;
}

.columns-jump h2 {
    color: #EAEAEA;
    font-size: 18px;
}

.columns {

    margin: 0 auto;
    text-align: center;
    line-height: 1;
}

.columns h2 {
    color: #EAEAEA;
    font-size: 18px;
}

.columns2 {

    margin: 0 auto;
    text-align: center;
    line-height: 1;
}

.columns2 h2 {
    color: rgba(25,25,25,1);
    font-size: 18px;
}




.number-2 {
    color:#79DF84;;
}

.number-3 {
    color:#79DF84;;
}

.number-1-light {
    color:#6FAE60;
}

.number-2-light {
    color:#6FAE60;
}

.number-3-light {
    color:#6FAE60;
}

.hero {
    padding: 0;
    margin: 0;
    display: block;
}

.hero img {
    margin: 0 auto;
    padding: 3% 0 0 0;
    display: block;
    max-width: 15%;
}



.worktext {
    margin: 0 auto;
    padding: 3%;
    max-width: 41em;
}

.worktext p {
 margin: 0;
}

.worktext h3 {
    text-align: left;
    margin: 1em 0 0 0;
}


.worktext-white {
    margin: 0 auto;
    padding: 2%;
    max-width: 41em;
    color: #EAEAEA;
}

.worktext-white h2 {
    color: #EAEAEA;
}






.workheader h2 {
    margin: 1em 0;
}


.bullets {
    text-align: left; 
    font-size: 1.2em;
    
}




.line2 {
    margin: 2em auto 0 auto;
    width: 5em;
    border-bottom: .3em solid rgba(250,250,250, 1);
}

.testimonial {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 auto;
    font-style: oblique;
    text-align: left;
    max-width: 100%;
    padding: 5%;
    background-color: rgba(25,25,25,1);
    color: #EAEAEA;
}





.testimonial-text {
    max-width: 36em;
    margin: 0 auto;
}

.testimonial h1 {
    text-align: center;
    font-style: normal;
    font-size: 64px;
    margin: 0;
    font-family: serif;
    line-height: .9;
}



.testimonial-home h1 {
    text-align: center;
    font-style: normal;
    font-size: 64px;
    margin: 0;
    font-family: serif;
    line-height: .9;
}

.testimonial-home {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 auto;
    text-align: left;
    max-width: 100%;
    padding: 5%;
    background-color:#EAEAEA ;
    color: rgba(25,25,25,1) ;
}


.testimonial-text-home {
    max-width: 36em;
    margin: 0 auto;
}

.author-home {
    margin: 0;
    text-align: center;
    font-style: normal;
}

.quote-home {
    margin: 1em 0 2em 0;
}

.line2-home {
    margin: 2em auto 0 auto;
    width: 5em;
    border-bottom: .3em solid rgba(25,25,25,1);
}



.author {
    margin: 0;
    text-align: center;
    font-style: normal;
}

.quote {
    margin: 1em 0 2em 0;
}

.workabout {
    font-size: 15px;
    line-height: 1.4;
    margin: 1em auto;
    text-transform: none;
    text-align: left;
}

.fullsizep img {
    max-width: 75%;
    padding: 2% 0;;
    margin: 0 auto;
    display: block;
}

.halfsizep {
text-align: center;
    margin: 0 auto;
}


.workheader {
    color: black;
    letter-spacing: .05em;
    font-weight: 900;
    font-size: 1em;
    text-align: center;
    max-width: 45em;
    margin: 0 auto;
    padding: 0 3%;
}

.workheader img {
    max-width: 100%;
    
}

.threeacross{
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    

}

.imagesmall-wide {
    margin: 0 auto;
    padding: .5%;
    display: inline-block;
    vertical-align: middle;
}

.imagesmall-wide img {
    max-width: 20em;
    padding: 0;
    margin: 0;

}


.imagesmall-wide2 {
    margin: 0 auto;
    padding: .5%;
    display: inline-block;
    vertical-align: middle;
}

.imagesmall-wide2 img {
    max-width: 40em;
    padding: 0;
    margin: 0;
    border: .1em solid #eaeaea;
    

}

.imagesmall {
    margin: 0 auto;
    padding: 3%;
    display: inline-block;
    vertical-align: middle;
}

.imagesmall img {
    max-width: 20em;
    padding: 0;
    margin: 0;

}






.workheader h3 {
    margin: 0;
    padding: 0;
    font-weight: 100;
   
}
.paragraphs {
    max-width: 31em;
    font-size: 1.4em;
    line-height: 1.7;
    margin: 2em auto;
    padding: 0 1em;
    text-transform: none;
    text-align: left;
}

.workdesc {
    text-align: center;
    color: #242424;
}

.processdesc {
    color: #242424;
    padding: 2%;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.2em;
    letter-spacing: .05em;
}

.postbg {
    background-image: url(images/postcardbackground.jpg);
    display: block;
    border: 1px solid #242424;
    
}


.steps {
    display: block;
    margin: 0;
    padding: 2em 0;
}

.fullsize {
    margin: 1em 0;
    padding: 2% 0;
}


.fullsize img {
    width: 90%;
    margin: 0;
    padding: 0;
    display: block;
    margin: 0 auto;
}


.images {
    width: 75%;
    margin: 2em auto;
}

.images img {
    width: 100%;
}


.imagemedium {
    width: 60%;
    margin: 2em auto 1em auto;
}

.imagemedium img {
    width: 100%;
}



.video {
    margin: 0 auto;
    padding: 0;
}

Iframe {
width: 60em;
margin: 2em auto;
display: block;
}

.embed {
    margin: 2em 0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.process {
    margin: 0 auto;
    text-align: center;
    max-width: 90%;
    
}

.process img {
    vertical-align: center;
}

.scroll {
    margin: 0 auto;
    text-align: center;
    max-width: 80em;
}


.gallerysub {
    margin: 0 auto;
    padding: 1.5em 0;
    background-color: rgba(15,15,15,1);
}

.galleryrow1 {
    margin: 0 auto;
    display: block;
    text-align: center;
}

.box {
    max-width: 25em;
    padding: 0;
    margin: 1em 1em;
    display: inline-block;
    height: 25em;
    vertical-align: middle;
}

.linksub {
    padding: 0 3%;
    margin: 0;
    text-decoration: none;
    font-weight: 100;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
    display: table-cell;
    vertical-align: middle;
    height: 25em;
    color: rgba(220,220,220, 1);
    background-color: rgba(15,15,15,.9); 
    max-width: 25em;
}

.linksub:hover {
    color: rgba(50,50,50, .1);
    background-color: rgba(255,255,255,0);
}


.htextsub h1 {
    font-weight: 900;
    display: block;
    font-size: 3.5em;
    letter-spacing: 1pt;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.htextsub h2 {
    font-weight: 500;
    padding: 2% 0;
    margin: 0;
    font-size: 1.4em;
}

.htextsub {
    font-weight: 400;
    text-align: left;
    width: 100%;
    height: 25em;
}




/*#chaud {
    background-image: url(images/home-chaudiere.jpg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}*/


/*#star {
    background-image: url(images/starlarge.jpg);
    background-color: #214e9d;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}*/

/*#temp {
    background-image: url(images/home-tempest2017.jpg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;  
    background-color: black;
}*/


#sea {
    background-image: url(images/Geoflora_ads_vegbloom_copy.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
}


#lead {
    background-image: url(images/caf-lead-gen-hero2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}

#events {
    background-image: url(images/caf-Email-Marketing-Sales-Funnel.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}

#growth {
    background-image: url(images/caf-lead-gen-hero.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}

#product {
    background-image: url(images/caf-events-1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}

#email
{
    background-image: url(images/caf-Rectangle-11.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}

#advert
{
    background-image: url(images/magazines.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}


#caf {
    background-image: url(images/12-caf.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}



#post {
    background-image: url(images/geopotweb.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;

}

#terp {
    background-image: url(images/magazines.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;

}

#gns {
    background-image: url(images/gns_bifold.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
}

#lcw-home {
    background-image: url(images/GF_gatefold1.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
}

#lcw {
    background-image: url(images/lcwcoasters.png);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
}

#soft {
    background-image: url(images/social_media_LCW_insta);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;

}

#panic {
    background-image: url(images/postcard-large.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#est {
    background-image: url(images/seagramsdetail.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;  
    background-color: #0bbabb;
}



#must {
    background-image: url(images/Analytics);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat; 
}

#misfit {
    background-image: url(images/Geopot_Website);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}
/*
#grams h1:hover, #card h1:hover, #dont h1:hover, #bust h1:hover, #mag h1:hover, #msft h1:hover, #soap h1:hover {
      background-color: rgba(255,255,255,.1);
}

#grams h1 {
      background-color: rgba(200,255,25,1);
}



#card h1 {
    background-color: rgba(40,150,205,1);
}


#dont h1
{
       background-color: rgba(155,120,225,1);
}

#bust h1{
      background-color: rgba(155,180,155,1);

}

#mag h1 {
       background-color: rgba(255,155,185,1);
}

#msft h1 {
      background-color: rgba(235,55,90,1);
}

#soap h1 {
       background-color: rgba(135,104,155,1);
}

*/

/*about page*/

.aboutcontain {
    margin: 0 auto;
    text-align: center;
}

.bio {
    letter-spacing: .002em;
    display: inline-block;
    text-align: left;
    margin: 0;
    vertical-align: middle;
    padding: 1% 2%;
}

.bio h1 {
    margin: 1% 0;
}

.bio p {
    font-size: 1.2em;
    line-height: 1.7;
    margin: 0;
    padding: 1% 0;
    font-weight: 400;
}

.aboutimg {
    padding: 0;
    margin: 0 auto;
    max-width: 15em;
    display: inline-block;
    
}

.aboutimg img {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    vertical-align: middle;
    
}






/*contact page*/

.contact a:hover{
    color: rgba(255,255,255, .8);
    
}


.contactinfo {
    font-size: 1.2em;
    line-height: 1.7;
    margin: 1em;
    padding: 0 0 1em 0;
    font-weight: 400;
}

.contactpage{
    max-width: 33em;
    display: block;
    margin: 0 auto;
    
}

.contact {
    margin: 0;
    padding: 1em 0 1em 0;
    background-color: #242424;
    text-align: center;
}

.contact a {
    color: white;
    text-decoration: none;
    font-size: 2em;
}


.resume-home {
    margin: 0 auto;
    text-align: center;
}




.biglink {
    margin: 1em 0;
    padding: 0;
    display: inline-block;
    max-width: 14em;
    text-transform: uppercase;
    
}

.biglink a{
    margin: 0 auto;
    display: block;
    color: rgba(25,25,25,1);
    border: .15em solid rgba(25,25,25,1);
    text-decoration: none;
    padding: .5em;
    -webkit-transition: background .3s linear;
  -moz-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
}

.biglink a:hover {
   opacity: .7;
}



.work {
    margin: 3em 0;
}


#whitetext {
    color:white;
    background-color: #c1295e;
}

#whitetext h2 {
    color:white;
}

.line {
    margin: 2em auto;
    width: 5em;
    border-bottom: .5em solid rgba(50,50,50,.1);
}



.wire iframe {
    padding: 0;
    margin: 2em auto;
    max-width: 90%;
    height: 34em;
}

.h2center {text-align: center;
    padding-top: 2em;}




#gorilla{
    background-image: url(images/gorillabagmockup.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#geoflora{
     background-image: url(images/GF_bloom_veg_labels.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}



#glitexl{
     background-image: url(images/artdirection.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 20%;
}

#sungrower{
     background-image: url(images/artdirection.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 20%;
}





#magazines{
    background-image: url(images/gorillabagmockup.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#promo{
     background-image: url(images/GF_bloom_veg_labels.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}



#printed{
     background-image: url(images/artdirection.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 20%;
}

#displays{
    background-image: url(images/artdirection.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 20%;
}

#branding {
    background-image: url(images/GeoPot-one-color.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#geoflora {
    background-image: url(images/Geoflora_white_logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#marketing_material {
    background-image: url(images/marketing.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#packaging {
    background-image: url(images/GNS_DuoC.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(50,50,50,1);
}

#catalog {
    background-image: url(images/catalog_thumbnail.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
   
}

#printed_material {
    background-image: url(images/printed_material.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
   
}


#geopot_web {
    background-image: url(images/Geopot_Website);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#geoflora_web {
    background-image: url(images/geoflora_web.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#gns_web {
    background-image: url(images/gns_web.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}




#seagrams{
    background-image: url(images/seagramsdetail.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#postcard{
    background-image: url(images/postcard-large.jpg);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}



#dontpanic{
     background-image: url(images/paniclarge.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
}

#bustersmustard{
     background-image: url(images/bustershomepage.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#softsoap{
    background-image: url(images/softsoap.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#established{
     background-image: url(images/spread4.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}




/*

#one {
    
}

#two {
    padding: 35% 0;
}

#three {
    background-color: #d4d4d4; 
    padding: 25% 0;
}

#four {
    padding: 20% 0;
}

#five {
    padding: 3.5% 0;
    background-color: #0bbabb;
}

#six {
    padding: 20% 0;
    background-color: #1a246b;
}

#seven {
    padding: 5% 0;
    background-color: #ecf0f8;
}

#eight {
    padding: 5% 0;
    background-color: #e6e6e6;
}


.desc_wrap {
    margin: 0 auto;
    padding: 1em;
    max-width: 36em;
}


.btn_text {
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
}

.button {
    width: 11em;
    margin: 1em auto;
    
}


.button a {
    display: block; 
    margin: 0; 
    padding: .15em 0;  
    color: white; 
    text-decoration: none;
    background-color: rgba(0,0,0,.8);
    border-radius: 1em;
    letter-spacing: .1em;
}
*/