/* ----------------------------------------- */    
/* General sytles */
/* ----------------------------------------- */

* {
  margin: 0;
  padding: 0;
}


body {
  font-family: europa, sans-serif;
  font-size: 16px;
  font-weight: 400;  
  background: url("assets/background.png") top right no-repeat;    
}

/* on smaller sizes remove background */
@media screen and (max-width:560px) {
  body {
    background: none;
  }
}


p {
  color: rgba(0,0,0,0.60);
  font-size: 20px;
  line-height: 32px;
  margin: 0;
}

@media screen and (max-width:560px) {

  p {
    font-size: 18px; 
    line-height: 30px;
  }
  
}


  
h1, h2, h4 {
  font-family: utopia-std, serif;
}  

h2 {
  font-size: 48px;
  font-weight: 400;
  line-height: 64px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}
  
.subhead {
  line-height: 72px;
  display: block;
  width: 65%;
  margin: 24px auto;
}


@media screen and (min-width: 560px) and (max-width:960px) {
  #intro h1 img {
    max-width: 80%;
    text-align: center;
  }  
  
  h2 {
    font-size: 40px;
    line-height: 64px;
  }
  
  .subhead {
    width: 80%;
  }
}


/* eyebrow */
h3 {
  color: #FF4600;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

h4 {
  font-size: 32px;
  font-weight: 400;
  line-height: 48px;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 20px;
} 

@media screen and (max-width:960px) {
  h4 {
    margin-bottom: 0;
  }  
  
  h2.subhead {
    line-height: 64px;
  }
}

@media screen and (max-width:560px) {
  #intro h1 img {
  }
  
  h2.subhead {
    width: 90%;
  }
  
  h2, h2.subhead {
    font-size: 32px;
    line-height: 40px;    
  }
  
  h4 {
    font-size: 24px;
  }
  
}

  
section {
  padding: 0;
}

body > article {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

div.cta-wrapper {
  text-align: center;  
}

div.cta-wrapper div {
  padding: 24px 24px 0px 24px;
  font-size: 16px;
  line-height: 32px;
  color: rgba(0,0,0,0.60)
}

@media screen and (max-width:960px) {
  div.cta-wrapper div {
     padding-top: 16px;
  }  
}




a {
  color: black;
}

a:visited {
  color: black;
}

  
a.download {
  text-decoration: none;
  
  
  border-radius: 40px;
  
  /* border: 3px solid black; */
  
  
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  
  letter-spacing: 4px;
  line-height: 24px;
  padding: 24px 68px;
  

  display: inline-block;
  text-align: center;
  background: white;
  margin: 20px auto 0 auto;
  
  /* border: 3px solid #FF4600; */
  background: #FF4600;
  color: white;
  
}

a.download:hover {
 box-shadow: 0 8px 16px 0 rgba(39, 17, 45, .1);
  transform: scale(1.05) translate(0px, -4px);
  transition: transform 800ms ease, box-shadow 600ms ease, -webkit-transform 800ms ease;
}






/* ----------------------------------------- */    
/* Intro sytles */
/* ----------------------------------------- */

#header {
  margin-top: 100px;
  float: left;
  clear: both;
}

#header img {
  max-width: 100%;
}

@media screen and (max-width:560px) {
  #header {
    margin-top: 20px;
  }
}


#intro h1 {
  display: block;
  margin: 0 auto;
  text-align: center;
}


@media screen and (max-width:560px) {
  #intro h1 {
    width: 40%;
  }
}
  
  
#benefits {
  width: 100%;
  margin: 88px auto 120px auto;  
  clear: both;
  float: left;
}

@media screen and (max-width:560px) {
  #benefits {
    margin: 48px auto 32px auto;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
  }
}
  

/* individual benefits */
#benefits section {  
  width: 25%;
  padding-left: 6.25%;  
  text-align: center;
  display: block;
  float: left;
}

#benefits h2 {
  font-size: 32px;
  line-height: 48px;
  margin: 8px 0 0 0;
}


#productdesign {
  width: 50%;
  float: left;
}

#uxr {
  width: 50%;
  float: right;
}


@media screen and (max-width: 1000px) {
 #header #benefits > section {
    width: 100%;
    padding-left: 0;
    margin-bottom: 40px;
  }   
}


/* ----------------------------------------- */    
/* Who */
/* ----------------------------------------- */
  

#who section {
  
  width: 620px; /* works at fixed size */
  width: 48%;
  
  
  text-align: center;
  padding-bottom: 160px;
}



  
#who section img {
  margin-bottom: 64px;
}

#who section div {
  margin: 0 75px;
}

#who section#pros {
  clear: both;
  width: 100%;
  box-sizing: border-box;
}

#who img {
  max-width: 100%;
}

#who section#pros div {
  width: 580px;  
  margin: 0 auto;
}

@media screen and (max-width:560px) {
  #who section {
    padding-bottom: 60px;
  }
  
  #who section div {
    margin: 0 20px;
  }
  
  #who section#pros {
    padding-bottom: 60px;    
  }
  
  #who section#pros div {
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
}







@media screen and (max-width: 1000px) {
  #who section {
    width: 100%;
  }
  
  #who section#pros div {
    width: 100%;
  }
 
}




/* ----------------------------------------- */    
/* Templates */
/* ----------------------------------------- */

#templates-wrapper {
    background: url("assets/ruler.png") repeat-x top left black;
}

#templates {
  color: white;  
  padding: 6.25%;  
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;  
}


#templates > div {
  margin-top: 64px;  
  display: flex;
  flex-wrap: wrap;  
}

#templates img {
  margin-bottom: 48px;
  max-width: 100%;
}

#templates div.template-benefit {
  width: 30%;
  float: left;  
}

#showthework {
  margin-left: 5%;
  margin-right: 5%;
}

#templates p {
  color: rgba(255,255,255,0.60);
}

@media screen and (max-width:960px) {
  #templates {
    padding-top: 96px;
  }  
  
  div#templates-container {
    margin-top: 32px;
  }
  
  #templates img {
    margin-bottom: 0;
    width: 40%;
    padding-right: 32px;
    box-sizing: border-box;
    float: left;
  }
  
  #templates div.template-text {
    float: left;  
    width: 60%;
  }
    
  #templates div.template-benefit {
    width: 100%;
    margin-bottom: 48px;
  }
  
  #showthework {
    margin-left: 0;
    margin-right: 0;
  }
}





@media screen and (max-width: 560px) {
    #templates img {
      width: 100%;
      margin-bottom: 16px;
      padding-right: 0;
  }
  
  #templates div.template-text {
      width: 100%;
  }
  
}




/* ----------------------------------------- */    
/* Value props */
/* ----------------------------------------- */

#value-props {
  padding-top: 80px;
  padding-bottom: 80px;  
  width: 100%;  
  float: left;
  clear: both;
}

#value-props section {
  clear: both;
}

#value-props h2 {
  text-align: left;
}

#value-props div.description-container {
  width: 50%;
  float: left;
}

#value-props div.img-container {
  padding: 5% 0 5% 5%;
  background: #F6F8F9;    
  box-sizing: border-box;  
  width: 50%;
  float: right;
}

#value-props section:nth-child(even) div.img-container {
  float: left;
}

#value-props section:nth-child(even) div.description-container {
  float: right;
}



#value-props div.description {

  /* dynamic widths */
  width: 60%;
  padding-right: 20%;
  padding-top: 30%;
  
  /* specifc props */
  float: right;
}




#value-props img {
  max-width: 100%;
  /* box-shadow: 0px 0px 16px 8px rgba(0, 0, 0, .05); */
}






#value-props section:nth-child(even) > div.img-container {
  padding: 5% 5% 5% 0;
}


/* media query - smaller sizes */

@media screen and (max-width: 800px) {
  #value-props section > div.description-container {
    width: 100%;
  }
  
  #value-props section > div.img-container {
    padding-left: 60px;
    width: 100%;
  }
  
  
  #value-props div.description {
    box-sizing: border-box;
    padding: 80px 30px 40px 60px;
    width: 100%;
    float: left;
  }

}


@media screen and (max-width: 560px) {
  #value-props div.description {
    padding: 6.25%
  }
  
  #value-props section > div.img-container {
    padding: 6.25%
  }
  
  
  #value-props section:nth-child(even) > div.img-container {
    padding: 6.25%
  }
  
  
}



/* ----------------------------------------- */    
/* Customize */
/* ----------------------------------------- */


#customize {
  background: black;
  color: white;
  padding: 100px 80px;  
  float: left;
  clear: both;  
  border: none;  
  width: 100%;
  box-sizing: border-box;  
}

@media screen and (max-width:960px) {
  #customize {
    padding: 32px;  
  }
}

#customize img {
  margin-top: 24px;
  max-width: 100%;
}



/* ----------------------------------------- */    
/* CTA2 */
/* ----------------------------------------- */

#cta2 {
  clear: both;
  float: left;
  width: 100%;  
  background: white url("assets/triangle.png") top center no-repeat;  
  padding-top: 100px;
  padding-bottom: 80px;
}



/* ----------------------------------------- */    
/* Footer */
/* ----------------------------------------- */

footer {
  background-color: #E4E4E4;
  
  padding: 20px 0;
  
  
  clear: both;
  float: left;
  width: 100%;
}

footer > div {
  max-width: 1280px;
  width: 80%;
  margin: 0 auto;
  
  text-align: center;
  
/*  background: green; */
}



/* ----------------------------------------- */    
/* Testing sytles */
/* ----------------------------------------- */



/*

.subhead {
  border: 1px solid green;
}

#benefits {
  border: 1px solid black;
}

#benefits section {
  border: 1px solid red;
}

#who #pros {
  border: 1px solid red;
}

#intro {
  border: 1px solid red;
}

#intro h1 {
  border: 1px solid red;
}

*/




.title-image {
  position:  absolute;
  top: -4000px;
}