@charset "UTF-8";
/* Layout */
body{margin:0px; font-family: 'Roboto', sans-serif; -webkit-text-size-adjust: 100%; font-size:16px; color:#4E4135; line-height:25px; font-weight: 300; }
a{text-decoration:none; cursor: pointer; color:#4E4135; } 
a:hover{text-decoration:underline;}
.visual img{width:100%;}
.hiddenlink{display:none;}
p{margin:0px;}
.visual{line-height: 0px;}
.face{margin-bottom: -8px;}


/* Spacing */
.spacearound{padding:30px;}
.disafter{margin-bottom:20px;}

/* Typography */
h1, h2{font-size:22px; line-height:35px; margin:0px; font-weight: 100;}
h3{font-size:16px; line-height:25px; font-weight: 300;}
h3{margin: 0px;}

/* Colors */
.white{color:#fff;}
.red{color:#FF2E39;}
.green{color:#02BF6D;}
.greenlink a{color:#02BF6D;}
.yellow{color:#F8AB41;}
.yellowlink a{color:#F8AB41;}
.grey{color:#AFA295;}
.grey-small{color:#AFA295;}
.red-bg{background-color:#FF2E39;}
.green-bg{background-color:#02BF6D;}
.yellow-bg{background-color:#F8AB41;}
.grey-bg{background-color:#EBE4DE;}
.yellowhover:hover{color:#F8AB41; text-decoration: none;}
.redhover:hover{color:#FF2E39; text-decoration: none;}
#contact{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
    .spacearoundnotop{padding:0px 30px 30px 30px;}
.fullwidth{width:100%;}

/* Elements */
.content{padding:30px 30px 60px 30px;}
.copy{padding:0 30px 30px 30px;}
.row{padding:0px 0px 30px 0px;}
.face{width:66%;}
.facecontainer{width:100%; text-align: center; margin-top:100px;}
.face img{margin-top:100px;}
.sociallink{background-image:url("img/icons.svg");}
.sociallink{width:58px; height:58px; float:left; margin:20px 10px 20px 0;}
.sl1{background-position: -66px 0px;}
.sl3{background-position: -132px 0px;}
.sl2:hover{background-position: 0px -100px;}
.sl1:hover{background-position: -66px -100px;}
.sl3:hover{background-position: -132px -100px;}
.footer .copy{padding-top:30px;}
.siteend{padding-bottom: 0px;}
.sketch{width:260px;height:100px; position:absolute; display:none; left:80px; bottom:80px; background-image: url("img/sketches.png"); background-size: 810px 100px; background-repeat: no-repeat;}
.sketch2{background-position: -300px 0px;}
.sketch3{background-position: -600px 0px;}
.button{ margin-bottom: 80px; }
.button a{background-color: #01BD6F; padding:10px 15px; border:2px solid; border-color:#01D14E; color:#fff; letter-spacing: 1px; border-radius:4px;}
.botton a:hover{text-decoration: none; background-color:#01BD6F;}
.visualcontainer { position: relative;}
.visualcontainer:before { display: block; content: ""; width: 100%; padding-top: 56.25%;}
.visualcontainer > .visualcontent { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size:cover; background-repeat: no-repeat;}
.portfolio1{background-image: url("img/portfolio-1-small.jpg");}
.portfolio2{background-image: url("img/portfolio-2-small.jpg");}
.portfolio3{background-image: url("img/portfolio-3-small.jpg");}
.visualcontent img{overflow: hidden; margin-left:-16.6%;}
.disbefore{margin-top:60px;}
.cta{text-align: center; margin:50px 30px 150px 30px;}
.stars{font-family: sans-serif, Arial;}
.nounderline a:hover{text-decoration: none;}
/* Fontsize & Spaces Change ------------------------------------------------------------- 768px */
@media screen and (min-width: 768px) {  
    body{margin:0px; font-family: 'Roboto', sans-serif; -webkit-text-size-adjust: 100%; font-size:20px; line-height:30px;}
    h1, h2{font-size:50px; line-height:75px;}
    h3{font-size:30px; line-height:40px;}
    .spacearound{padding:40px 50px 50px 50px;}
    .spacearoundnotop{padding:0px 50px 50px 50px;}
    .row{padding:25px;}
    .copy{padding:25px;}
    .content{padding:50px 50px 100px 50px;}
    .siteend{padding-bottom: 0px;}
    .visualcontent img{overflow: hidden; margin-left:0;}
    .portfolio1{background-image: url("img/portfolio-1.jpg");}
    .portfolio2{background-image: url("img/portfolio-2.jpg");}
    .portfolio3{background-image: url("img/portfolio-3.jpg");}
}
/* Layout Change ------------------------------------------------------------- 1200px */
@media screen and (min-width: 1200px) {  
    .col-4{ width:33%; float:left;}
    .col-8, .facecontainer{ width:66%; float:left;}
    .row:after{content: ''; display: block; clear: both;}
    .spacearound{padding:90px 100px 100px 100px;}
    .spacearoundnotop{padding:0px 100px 100px 100px;}
    .content{padding:100px; width:30%; position:absolute; top: 0px; }
    .workcontainer{position: relative;}
    .grey-small{color:#FFF;}
    .row{padding:50px;}
    .copy{padding:50px;}
    .siteend{padding-bottom: 0px;}
    .sketch{display:block;}
}