/* ==========================================================================
   Media Queries
   ========================================================================== */


@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}





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


@media screen and (min-width: 30em) { /* 480px */
    
.feature-wrap{padding:25% 0 20% 0;}
.feature-wrap:after{
  font-size: 550px;
  color: #eee;
  top: 50%;
  left: 50%;
  margin: -265px 0 0 -200px;}

}


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


@media screen and (min-width: 37.5em) { /* 600px */

body{text-align:left;background:#fff;}
p{clear:both;}
p.lite{color:#afafaf;}
blockquote{font-size:1.8em;line-height:1.4em;margin:0.5em 0 0 0;padding:0;}
.about-text p {font-size: 53px;line-height: 53px;}

p.short-desc{width:70%;}
p.annotate{position: absolute;top: 205px; right: 100px;}
.col {float: left;}  
.gutter{margin-left:0;}
.gutter-col{margin-left:4.5%;}
.margin-top{margin-top:0;}


    .one {width: 4.5%;}
    .two {width: 13%;}
    .three {width: 21.5%;}
    .four {width: 30%;}
    .five {width: 38.5%;}
    .six {width: 47%;}
    .seven {width: 55.5%;}
    .eight {width: 66%;}
    .nine {width: 72.5%;}
    .ten {width: 81%;}
    .eleven {width: 89.5%;}
    .twelve {width: 98%;}
    
 

#about h3{clear:both;}
a.button-black.h1.resume,
img.profile-pic{float:right;}

/*PROCESS*/
.process-header-image{display:block;margin-bottom:15%;}
section#becoming .eight{width:60%;} 
section#becoming .four{width:40%;} 
section#becoming span.icon-butterfly{display:block;text-align:center;}
section#becoming span.icon-repeatIcon2{float:left;line-height:0.5em;margin:0 0.2em 0.3em 0;}
.process-defined h4{font-size: 0.8em;}
section#becoming .process-defined .eight{width:100%;}
section#becoming .process-defined .four{width:100%;}
section#becoming .process-defined .gutter{margin-left:0;}
section#process .col{margin-bottom:5%;}
section#becoming .col{margin-bottom:0;}
section#process .col:nth-of-type(2n+1){clear: left;}
section#process .six{width:90%;}
.process-summary{position:relative;}
.process-summary:before{content:"";width: 0px;
height: 0px;
border-style: solid;
border-width: 50px 50px 0 50px;
border-color: #ffffff transparent transparent transparent;
position:absolute; top:0; left:50%;margin-right:-50%;}
.process-defined{background-color:transparent;}


/*WORK*/

#work h3{text-align:left;}
.button-absolute{position:absolute;bottom:60px;right:0;}
#work .explore span {position:absolute; bottom:100px; right:4px;}
.project-number{ margin-bottom:-150px; margin-left:5%;}
#work .counter{left:auto; right:95px;font-size:1em;}
#work .counter span{font-size:1em;}
#work .row .row.shortest ul{margin-top:10;}
.project-title{margin: 15px 0 -115px 0;}
.button-absolute{margin-top:0;}
#work .row.projects{margin: -20px auto 10% auto;padding-top: 10%;}
#work .explore span {text-transform:uppercase;font-size:3em;font-weight:bold;letter-spacing:0;color:#f1f1f1;display:block;}
#work .counter{top: -100px;}


/*CONTACT*/
.contact-title-phone,
.contact-title-email{margin:0;line-height:1.5em;}
.phone,
a.email,
a.resume{font-size:1.5em;font-weight:bold;color:#000;}
a.email,
a.resume{font-weight:normal;text-decoration:underline;}
.contact-title-phone,
.phone{margin-left:50%;}
.contact-title-email,
a.email{margin-left:25%;}
  }




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


@media screen and (min-width: 48em) { /* 768px */
    


p {font-size: 1.4em;line-height: 1.6em;}
p.annotate{top: 180px;}
h2.icon-ribbon{margin-bottom:10%;}

/*LOGO*/
.logo{width:280px; height:37px;}
.logo span.Becoming,
.logo span.Design{letter-spacing:3.5px;font-size:1em;position:absolute;}
.logo span.Becoming{left:23px;}
.logo span.Design{right:19px;}
.logo span.icon-butterfly{display:inline-block;color:#ef5b11;font-size:1.7em;position:absolute;top:5px;left:140px;}

/*FEATURE*/
.feature-wrap{padding:31% 0 20% 0;}
.feature-wrap:after{
  font-size: 850px;
  margin: -375px 0 0 -345px;}
h1{background-color:#fff;position: relative;z-index: 3;border-top: 1px dotted #ccc;border-bottom: 1px dotted #ccc;width:100%;margin:0 auto;}
h1 span.process-title{font-size:1.1em;line-height:1.6em;padding:0.4em 0 0.5em;}

/*ABOUT*/

.about-text p{font-size:60px;line-height:60px;}
blockquote{font-size:2em;line-height:1.3em;}
img.profile-pic{width:190px;}

/*PROCESS*/
.process-defined h4{font-size: 1.2em;}
.process-summary{
   background: url(../img/burst.jpg); 
  background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 padding:8% 6%;
}
.process-wrap{width:100%;background:#fff;position:relative;margin:0 auto;}
.process-quote blockquote{font-size: 1.5em;line-height: 1.5em;}

.icon-plan,
.icon-create,
.icon-build,
.icon-revise{float:left;line-height:0.5em;margin-right:3%;display:inline-block;}
section#process .process-wrap p{margin-left:120px;}

    }

/*WORK*/

.project-number {margin-bottom: -165px;}
#work .explore span {bottom: 90px;}

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


@media screen and (min-width: 53.125em) { /* 850px */

/*FEATURE*/
.feature-wrap{padding:25% 0 20% 0;}
.feature-wrap:after{
  font-size: 950px;
  margin: -445px 0 0 -385px;}
    


/*PROCESS*/
section#becoming .eight{width:66%;} 
section#becoming .four{width:34%;} 

}


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


@media screen and (min-width: 64em) { /* 1024px */
    
video#video_background { display: block; }
#video_background { position: fixed; left: 0; top:50px;z-index: -100;background: url(../img/becoming-design-butterfly.jpg)no-repeat; }

/*SHOW/HIDE BUTTERFLY*/
section#feature, section#contact,section#process,section#about{margin-left:350px;}
section#work{padding-left:350px;position:relative;}
    

.logo{margin-left:27%;}


/*FEATURE*/
.feature-wrap{padding:20% 0 30% 0;}
.feature-wrap:after{font-size: 750px;margin: -400px 0 0 -310px;} 

/*PROCESS*/
.process-summary{ padding:15% 12%;}
section#becoming .process-defined .eight{width:62%;}
section#becoming .process-defined .four{width:34%;}
section#becoming .process-defined .gutter{margin-left:4%;}
.process-quote, .process-defined {padding: 4%;}
section#becoming .process-defined .process-title {font-size:2em;}
section#becoming span.icon-repeatIcon2{line-height:0.9em;}



.footer {padding-left:350px;}

}



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

@media screen and (min-width: 78.125em) { /* 1250px */
section#becoming span.icon-repeatIcon2{line-height:0.4em;}
h2.icon-ribbon{margin-bottom:5%;}
p.annotate{top: 215px;}
.row {margin: 15% auto 15% auto;}
.process-summary{ padding:10% 8%;}
 section#becoming .process-defined .process-title {font-size:2.5em;}
.feature-wrap{padding:16% 0 35% 0;}
.feature-wrap:after{font-size: 950px;margin: -550px 0 0 -390px;} 

/*WORK*/

.project-number {font-size: 10em;
margin-bottom: -150px;
background: #fff;
line-height: 1.2em;
margin-left: auto;
margin-right: auto;
text-align:center;}
.project-title{ margin: 15px 0 -65px 0; }  
.project ul li {margin: 5% 0 0 0;padding-bottom: 5%;}
}




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


@media screen and (min-width: 90em) { /* 1440px */

/*ABOUT*/
.about-image{display:block;width:700px;}
.about-text p{display:none;}

.feature-wrap{padding:10% 0 20% 0;}
.feature-wrap:after{font-size: 1050px;margin: -575px 0 0 -445px;}
a.button-black.h1.resume,
img.profile-pic{width:220px;margin-bottom:0;}
#about h3{text-align:left;}
.gutter{margin-left:4%;}
.margin-top{margin-top:8%;}
section#process .six{width:47%;}
h1 span.portfolio-title{margin-bottom:-28px;}
h1 {padding: 3% 0 0 0;}
section#becoming .process-defined .process-title {font-size:3em;}
}


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


@media screen and (min-width: 103.75em) { /* 1660px */
    
.feature-wrap{padding:15% 0 20% 0;}
.feature-wrap:after{
  font-size: 1250px;
margin: -645px 0 0 -530px;}
.logo{margin-left:30%;}
.project ul li {margin: 3% 0 0 0;padding-bottom: 3%;}

}


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


@media screen and (min-width: 115.625em) { /* 1850px */



}

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


@media screen and (min-width: 120em) { /* 1920px */
.row {margin: 10% auto 10% auto;}
.process-summary{ padding:8%;}

.feature-wrap{padding:16% 0 20% 0;}
.feature-wrap:after{margin: -645px 0 0 -525px;}
}


@media screen and (min-width: 131.25em) { /* 2100px */


.feature-wrap:after{margin: -700px 0 0 -525px;}
.feature-wrap{padding:12% 0 20% 0;}
}


@media screen and (min-width: 134.375em) { /* 2150px */





}


/* iPads 1 & 2 (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { 
video#video_background {display: none;}
section#feature, section#contact,section#process{margin-left:0;}
section#work, section#about{padding-left:0;}
h1{width:70%;}
.feature-wrap{padding:10% 0 20% 0;}
.feature-wrap:after{font-size: 700px;margin: -390px 0 0 -290px;}
    }


/* Retina iPads 3 & 4 (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 
video#video_background {display: none;}
section#feature, section#contact,section#process,section#about{margin-left:0;}
section#work, section#about{padding-left:0;}
h1{width:70%;}
.feature-wrap{padding:10% 0 20% 0;}
.feature-wrap:after{font-size: 700px;margin: -390px 0 0 -290px;}
}

/* iPhone 2G-4S in landscape ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
h1 span.process-title {font-size: 0.8em;}
.feature-wrap{padding:0 0 20% 0;}
.feature-wrap:after{font-size: 400px;margin: -250px 0 0 -150px;}
}

/* iPhone 5 in landscape ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */}