@import url("reset.css");
@import url("https://use.typekit.net/fou2kfu.css");

/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Figtree", sans-serif;
  background-color: white;
  font-size: 18px;
  color:#333;
}

body, html {
  height: 100%;
}

h1,h2,h3,h4{
  color:#000;
  font-family: "Fustat", sans-serif;
}

h2,h3,h4{
  font-weight: 700;
}

h1{
  font-weight: 900;
  font-size: 5em;
  letter-spacing: -2px;
  color:#fff;
  margin-bottom: 5px;
}

h2{
  font-size: 2.5em;
  letter-spacing: -1px;
  display: block;
  padding-bottom: 25px;
  margin-bottom: 40px;
  background: url("../img/heading-divider.svg") no-repeat;
  background-position: bottom left;
}

h3{
  font-size: 1.8em;   
  margin-bottom: 20px;
}

h4{
  font-size: 1.2em; 
  margin-bottom: 10px;
}

p{
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 1.4em;
}

a{
  text-decoration: none;
  font-size: 1em;
  color:#2D2D2D;
}

.link{
  border-bottom: 4px solid #FB98D8;
}

.link:hover{
  border-bottom: 4px solid #DF0F95;
}


strong{font-weight: 700;}

.tag{
  font-size: 0.7em; 
  font-weight: 700;
  text-transform: uppercase;
  Letter-spacing:1px;
}

/* -------------------------------- 

Layout

-------------------------------- */


/* Home Page */

#introduction{
  width:100%;
  position: relative;
  padding: 0;
  background: #fff;
}

#intro-content{
  text-align: center;
  Width: 800px;
  margin: auto;
}

#intro-content p{
  font-size: 1.3em;
}

#intro-content p:last-of-type{ 
  margin-bottom: 80px;
}

#intro-content h1{
  color:#000;   
}

#intro-content h3{
  margin-bottom: 40px;   
}

#intro-content a{
  color:#333;
  font-weight: 700;
}

#intro-content a:hover{
  color:#666;
}

#intro-content a.cta{
  text-transform:uppercase;
  font-size: 1.2em;
  background: url('../img/icon_arrow_down.svg') no-repeat;
  background-size: 16px 21px;
  background-position: right;
  padding-right: 26px;
}


#my-work{
  margin:80px 0 60px 0;   
}

#my-work h3{
	margin-bottom: 20px;
        font-size: 1.3em !important;
        text-align: center; 
}


#my-work ul li{
  float:left;
  width: 50%;
  padding: 5px;
  
}

#my-work ul li h4{
  margin-bottom: 5px;
 font-size: 1.9em;   
}

#my-work ul li p{
  margin-bottom: 0px;   
}

#my-work ul li .work-item{
  width: 100%;
  height: 400px;
  position: relative;
  border-radius:16px;
}

#my-work ul li .work-item a{
  display: block;
  width: 100%;
  height: 100%;
}

#my-work ul li .work-item a span{
  display: none;   
}

.work-item h4, .work-item p{
	color:#fff;
}

.work-item{
  background-size: auto 400px;
  background-position-x: center;
  background-position-y: bottom;
}


.work-info{
	text-align: center;
	width:100%;
       padding-top:60px;
}

.work-domain{
  background-color:#005837;
  background-image: url(../img/img-domain-hero.png);
  
}
.work-domain:hover{
  background-color:#04772C;
}


.work-quickbooks{
  background-color:#39AD61;
  background-image: url(../img/img-quick-hero.png);
}
.work-quickbooks:hover{
  background-color:#41B695;
}



.work-ondemand{
  background-color:#962BFF;
   background-image: url(../img/img-jjj-hero.png);
}
.work-ondemand:hover{
  background-color:#AA53FF;
}

.work-evoke{
  background-color:#000000;
 background-image: url(../img/img-evoke-hero.png);
  background-size: auto 400px;

}

.work-evoke:hover{
  background-color:#1A1A1A;
}


.work-tyro{
  background-color:#1E6DA7;
   background-image: url(../img/img-tyro-hero.png);

}
.work-tyro:hover{
  background-color:#2B8DC9;
}

.work-cba{
  background-color:#3D5A65;
   background-image: url(../img/img-cba-hero.png);
}
.work-cba:hover{
  background-color:#506B72;
}




/* End Home Page */



/* Hero images */

.hero{
	max-width:1440px;
	height: 960px;
	text-align: center;
	margin:0 auto;
	background-size:1440px 960px;
	padding-top:80px;
	background-position: center;
	border-radius:16px;
}

#hero-domain{
  background-color:#005837;
  background-image: url(../img/img-domain-hero.png);
  background-repeat: no-repeat;
}

#hero-quickbooks{
  background-color:#39AD61;
  background-image: url(../img/img-quick-hero.png);
  background-repeat: no-repeat;
}

#hero-ondemand{
  background-color:#962BFF;
  background-image: url(../img/img-jjj-hero.png);
  background-repeat: no-repeat;
}

#hero-evoke{
  background-color:#000000;
  background-image: url(../img/img-evoke-hero.png);
  background-repeat: no-repeat;
}


#hero-tyro{
  background-color:#0068A7;
  background-image: url(../img/img-tyro-hero.png);
  background-repeat: no-repeat;
}

#hero-cba{
  background-color:#2C2B2B;
  background-image: url(../img/img-cba-hero.png);
  background-repeat: no-repeat;
}


.hero p{
	color:#fff;
	font-size: 1em;
}

/* End Hero images */


/* General */

header{
	padding:80px 0;
        text-align: center;
}

#logo-light{
	background-image: url("../img/logo-light.svg");
	background-size: 40px 31px;
    background-repeat: no-repeat;
	width:40px;
	height: 31px;
	display: inline-block;
}

#logo-home{
	background-image: url("../img/logo-home.svg");
	background-size: 40px 31px;
    background-repeat: no-repeat;
	width:40px;
	height: 31px;
	display: inline-block;
}

#logo-dark{
	background-image: url("../img/logo-dark.svg");
	background-size: 30px 24px;
    background-repeat: no-repeat;
	width:40px;
	height: 31px;
	display: inline-block;
}

#logo-light span, #logo-dark span, #logo-home span{
	display: none;
}


.container{
    width: 1050px;
    margin: 0 auto;
}

footer{
    clear: both;
	display: block;
	margin-bottom: 80px;
}

footer .container{
	background:#F8F8F8;
    padding:40px;
}

footer #logo-dark{
	float: left;
}

#social-icons{
    float: right;
}

#social-icons li{
    display: inline-block;
    margin-left: 20px;
}

#social-icons li a{
    display: inline-block;
    width:24px;
    height: 24px;
    background:black;
}

#social-icons li a span{
    display: none;
}

#social-icons li.linkedin a{
    background: url(../img/icon-linkedin.svg) no-repeat;
    background-size: 16px 16px;
    background-position: center center;
}


#social-icons li.dribbble a{
    background: url(../img/icon-dribble.svg) no-repeat;
    background-size: 16px 16px;
    background-position: center center;
}

#social-icons li.email a{
    background: url(../img/icon-email.svg) no-repeat;
    background-size: 24px 16px;
    background-position: center center;
}

.copy{
    float:left;
    padding-top:6px;
}

nav{
    padding-top:20px;
    margin-bottom: 80px;
}

header h1{
    margin-bottom: 10px;   
}

.img-box{
   border-radius:16px;
}

.img-box img{
    width: 100%;
    height: auto;
}

.text-box{
    margin:0 auto;
    width: 800px;
    padding:80px 0;
}

.text-box p:last-of-type, .contained-text p:last-of-type{
    margin-bottom: 0;
}

.contained-text{
    padding:25px;
	margin-bottom: 10px;
	background:#F2F3FF;
}

.break{
    margin-bottom: 40px !important;   
}

.large-break{
    margin-bottom: 80px !important;   
}

#next{
    Padding:80px 0;
    text-align: center;
}

#next a{
    font-weight:700;
}

nav a, #back a{
    font-size: 1.2em;   
}

.video-box{
    width:33.3333333333%;
    padding:0 15px;
    float:left;
}



.clear{
    clear:both;
}


/* End General */


/* Video Stuff */

video{
 width: 100%;
 height: auto;
 border: none;
}

video:focus{
    outline: none;
}

/* End Video Stuff */


/* -------------------------------- 

Different screen sizes

-------------------------------- */


/* Up to 1024px */

@media (max-width: 1024px) {
    .container{width:900px;}
    #intro-content, .text-box{{width:700px;}
}


/* Medium devices (tablets, 768px and up)*/
@media (max-width: 800px) { 
    Body{font-size:16px;}
    .container{width:100%; padding:0 50px;}
    #intro-content, .text-box{width:550px;}
    .text-box, #back{padding:50px 0;}
    nav{margin-bottom: 40px;} 
	.large-break{margin-bottom: 50px !important;}
}


/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) { 
    Body{font-size:15px;}
    h1{font-size:2.4em;}
    h2{font-size:1.9em;}
    h3{font-size:1.5em;}
    header{padding:40px 0;}
    .container{width:100%; padding:0 30px;}
    #intro-content h1{font-size:3em;}
    #intro-content h3{font-size:1.2em;}
    #intro-content, .text-box{width:100%;}
    #intro-content{padding:50px 20px 0 20px;}
    #intro-content p:last-of-type{ margin-bottom: 40px;}
    .text-box{padding:30px;}
    #my-work{margin:20px 0;}
    #my-work ul li{float:none; padding:0 0 10px 0; width:100%;}
.hero{
	width:100%;
	height: 500px;
	background-size: auto 500px !important;
	padding-top:60px;
	background-position-x: center;
        Background-position-y: bottom;
	border-radius:0px;
}

    .video-box{float:none; width: 100%; padding:0 15px 30px 15px;}
    .link{border-bottom: 2px solid #FB98D8;}
    .link:hover{border-bottom: 2px solid #DF0F95;}
	.break{margin-bottom: 30px !important;}
	.large-break{margin-bottom: 30px !important;}
}