/************************* LOWER RESOLUTION SCREENS AND LAPTOPS *************************/
@media only screen 
and (max-width : 1200px) {

/********* LAYOUT STYLES **********/

.row{ max-width: 62.5em; }


/********* PAGE ELEMENTS **********/

.hover-box{ height: 380px; }


/** Icons **/

.icon-small{ font-size: 28px; }

/** Action Blocks **/

.action-block{ padding: 99px 44px; }

}

/************************* SMARTPHONES *************************/
@media only screen 
and (min-width : 320px) 
and (max-width : 600px) {

/********* LAYOUT STYLES **********/
.stream li {
background-color: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
font-size: 11px;
padding: 5px 0 15px 0;
float:left !important;
width: 140px !important;
position: relative;
margin: 2px 22px 12px 4px;
font-family: Arial, sans-serif;
line-height: 1.35em;
}

.stream li.dcsns-facebook .section-text img {
margin: 5px 7px 5px 0;
border: 1px solid #ddd;
padding: 1px;
background: #fff;
}

.stream li.dcsns-facebook .section-intro, .filter .f-facebook a:hover {
background-color: #333;
display: none;
}

.stream li .inner {
overflow: hidden;
padding: 0 10px;
}

.stream li.dcsns-instagram .section-thumb img {
margin: 0 7px 10px 0;
float: left;
border: 1px solid #ddd;
padding: 1px;
background: #fff;
max-width: 120px;
}

.stream li .icon {
display: none;
}

.stream li.dcsns-instagram .section-intro, .filter .f-instagram a:hover {
background-color: #413A33;
display: none;
}

.stream li.dcsns-instagram {
padding-bottom: 10px;
}


.copy-text2 p {
font-size: 12px;
font-family: "Montserrat",'Lato','Roboto',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
color: #666;
font-weight: 400;
margin-top: 10px;
text-align: left;
}

.copy-text2 p a {
color: #666;
margin-left: 0px;
}

.section-large{ padding-top: 121px; padding-bottom: 121px; }
.no-pad-right{ padding-right: 0.9375em; }
.border-box{ margin-bottom: 44px; }
.work-masonry-item{ margin-bottom: 15px; }
.hover-box{ width: 100%; height: 350px; }
.offix .medium-3{ width: 100%; }
.border-box .medium-3{ margin-bottom: 44px; }
.team-member{ margin-bottom: 44px; }
.panel{ padding: 22px; }

.hero-slider .slides .background-dark h1 span {
display: block;
clear: both;
float: left;
border-bottom: 1px solid #FFF;
line-height: initial !important;
}

.logo2{ width: 200px; background-repeat: no-repeat; height: 50px; margin-top: 12px; background: url('../img/branding/logo-dark.png'); background-size: contain !important; background-repeat-y: none !important; }
.nav-panel-dark .logo2, .nav-top-dark .logo2, .nav-transparent .logo2{ background: url('../img/branding/logo-light.png'); background-repeat: no-repeat;}


.strap {
color: #B2D235 !important;
text-align: left;
font-family: "museo",serif;
z-index: 10;
font-weight: 400;
clear: both;
font-size: 13px !important;
display: block;
letter-spacing: 0.04em;
margin-top: 50px;
}

section {
padding: 25px 10px;
padding-bottom: 88px;
overflow: hidden;
position: relative;
}




/********* TYPOGRAPHY STYLES **********/

.size-display{ font-size: 1.9rem !important; }

header.header-small .size-display {
text-transform: none;
font-weight: 600;
padding-top: 87px;
text-align: left;
padding-left: 10px;
}

header {
background: #353535;
background-size: cover !important;
position: relative;
height: 160px;
/* border-bottom: 3px solid #B2D235; */
}

/********* NAVIGATION STYLES **********/
nav{ top: 0px !important; max-height: 89px; overflow: hidden; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; }
.nav-panel-dark, .nav-panel-light{ top: 0px; }
.nav-panel-dark .row, .nav-panel-light .row{ border-radius: 0px; }

.nav-transparent{ padding-top: 9px; position: fixed; }

.logo{ margin: 12px 0px 0px 0px !important; padding-left: 0px;	 }

.nav-main ul li{ border-bottom: 1px dotted #777;
line-height: 5px;
padding-left: 5px;
width: 100%;
display: inline-block; }

.sticky-nav_white.nav-main ul li{ border-bottom: 1px dotted #ccc;}

.nav-main ul li a{ padding: 11px 0px; }
.nav-main .text-right{ text-align: left !important; }

.subnav{ position: relative; top: 0px !important; left: 0px !important; padding: 11px; }

.mobile-toggle{ display: block; }

.sticky-nav_white.open-nav {
background: #fff !important;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
padding-bottom:20px;}

.open-nav{ max-height: 700px !important; background: rgba(0,0,0,0.7) !important; padding-bottom:20px;}

.active {
border-bottom: none;
}

.negative .mobile-toggle {
position: absolute;
color: #aaa;
top: 31px;
right: 30px;
cursor: pointer;
font-size: 26px;
display: none;
}



.logo{ margin:12px 0px 22px 10px !important; padding-left: 0px;	 }

.nav-main ul li{ float: none; margin-right: 0px; }
.nav-main ul li a{ padding: 11px 0px; }
.nav-main .text-right{ text-align: left !important; }

.subnav{ position: relative; top: 0px !important; left: 0px !important; padding: 11px; }

.mobile-toggle{ display: block; }
.open-nav{ max-height: 600px !important; }

/********* SLIDER & DIVIDER & HEADER STYLES **********/

.background-pan{ background-position: 50% 50% !important; -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }

.image-slideshow{ margin-bottom: 44px; }

.hero-slider .slides li{ padding: 180px 0px !important; }

.flex-direction-nav{ display: none !important; }

/********* BLOG STYLES **********/

aside .widget{ display: none; }

.post-comment img{ display: none; }
.post-comment.indent{ width: 100%; }
.form-comments input[type="text"]{ width: 100%; margin: 0px 0px 22px 0px !important; }



form{ margin-top: 44px; }

	.iso{
    max-width: 95%;
    float: left;
    margin: 10px 0 20px;
}

.about_divider{}

.clients_title{
    /* text-align: center; */
    margin: 20px 0 20px;
    padding: 0;
    color: #B2D235;
    font-size: 14px;
}

.clients_grid{
    margin: 0px 0 20px;
}

.cl{
    max-width: 22%;
    margin: 0 2.16% 20px;
}


}


@media only screen 
and (min-width : 601px) 
and (max-width : 767px) {
	
	.iso{
    max-width: 170px;
    float: left;
    margin: 20px 0 40px;
}

.about_divider{}

.clients_title{
    /* text-align: center; */
    margin: 30px 0 40px;
    padding: 0;
    color: #B2D235;
    font-size: 1.2rem;
}

.clients_grid{
    margin: 10px 0 70px;
}

.cl{
    max-width: 12%;
    margin: 0 2.16% 20px;
}

	.work-masonry-container .medium-4{ width:50%;}
	.hero-slider .slides .background-dark h1 span {
display: block;
clear: both;
float: left;
border-bottom: 1px solid #FFF;
line-height: 57px;
}

.hero-slider .slides .background-dark h1 span {
display: block;
clear: both;
float: left;
border-bottom: 1px solid #FFF;
line-height: 55px;
}

header.header-small .size-display {
font-size: 48px;
text-transform: none;
font-weight: 600;
padding-top: 109px;
text-align: left;
/* border-bottom: 1px solid #fff; */
}

header {
background: #353535;
background-size: cover !important;
position: relative;
height: 210px;
/* border-bottom: 3px solid #B2D235; */
}

#content3 {
border-top: 2px solid #B2D235;
padding-bottom: 280px;
padding-top: 30px;
}

.strap {
color: #B2D235 !important;
text-align: left;
font-family: "museo",serif;
z-index: 10;
font-weight: 400;
clear: both;
display: block;
letter-spacing: 0.04em;
margin-top: 65px;
}
	.logo2{ width: 150px; background-repeat: no-repeat; height: 50px; margin-top: 3px; background: url('../img/branding/logo-dark.png'); background-size: contain !important; background-repeat-y: none !important; margin-bottom:10px; }
.nav-panel-dark .logo2, .nav-top-dark .logo2, .nav-transparent .logo2{ background: url('../img/branding/logo-light.png'); background-repeat: no-repeat; margin-bottom:10px; margin-left:15px;}

.name {
font-family: "proxima-nova", sans-serif;
letter-spacing: 0.02em;
color: #444;
margin-bottom: 0;
margin-top:25px;
}

p:last-child {
margin-bottom: 25px;
}

	.nav-panel-dark .logo, .nav-top-dark .logo, .nav-transparent .logo {
background: url('../img/branding/logo-light.png');
background-repeat: no-repeat;
margin-bottom: 10px;
margin-left: 15px;
}

.nav-main ul li a {
padding: 22px 0 5px 0;
display: inline-block;
font-size: 12px;
font-family: "proxima-nova", sans-serif;
text-transform: none;
transition: all .3s;
letter-spacing: 0.06em;
font-weight: 600;
-moz-transition: all .3s;
-webkit-transition: all .3s;
color: #fff;
}


	.nav-main .column, .nav-main .columns {
position: relative;
padding-left: 0 !important;
padding-right: 0 !important;
float: left;
width: initial;
}

.nav-main ul li {
float: left;
list-style: none;
padding: 0 7px;
}

.nav-main ul {
font-family: 'Montserrat', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
font-size: 11px;
letter-spacing: 1px;
margin-right: 15px;
}

.logo {
width: 150px;
background-repeat: no-repeat;
height: 50px;
margin-top: 3px;
background: url('../img/branding/logo-dark.png');
background-size: contain !important;
background-repeat-y: none !important;
margin-bottom: 10px;
margin-left: 15px;
}

.sticky-nav_white a{ color:#555 !important;}

section {
padding-top: 20px;
padding-bottom: 88px;
overflow: hidden;
position: relative;
}


.copy-text2 p {
font-size: 12px;
font-family: "Montserrat",'Lato','Roboto',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
color: #666;
font-weight: 400;
margin-top: 10px;
text-align: left;
}

.copy-text2 p a {
color: #666;
margin-left: 0px;
}

	}
/************************* PORTRAIT TABLETS *************************/

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

	.iso{
    max-width: 50%;
    float: right;
    margin: 20px 0 40px;
}

.about_divider{}

.clients_title{
    /* text-align: center; */
    margin: 30px 0 40px;
    padding: 0;
    color: #B2D235;
    font-size: 1.2rem;
}

.clients_grid{
    margin: 10px 0 70px;
}

.cl{
    max-width: 12%;
    margin: 0 2.16% 20px;
}

.flex-direction-nav{ display: none !important; }

/********* NAVIGATION STYLES **********/

nav{ top: 0px !important; max-height: 89px; overflow: hidden; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; }
.nav-panel-dark, .nav-panel-light{ top: 0px; }
.nav-panel-dark .row, .nav-panel-light .row{ border-radius: 0px; }

.nav-transparent{ background: rgba(255,255,255,0.4); padding-top: 9px; }

.logo{ margin: 22px 0px 22px 0px !important; padding-left: 0px; clear: both !important; display: block; }

.nav-main{ float: none !important; clear: both !important; display: block; }
.nav-main ul{ float: none; clear: both; display: block; width: 100% !important; }
.nav-main .medium-9{ width: 100%; }
.nav-main ul li{ float: none; margin-right: 0px; }
.nav-main ul li a{ padding: 11px 0px; }
.nav-main .text-right{ text-align: left !important; }

.subnav{ position: relative; top: 0px !important; left: 0px !important; padding: 11px; }

.mobile-toggle{ display: block; }
.open-nav{ max-height: 600px !important; }
		
}



@media only screen {

#heads .columns{ padding: 5px 5px;}
#heads{ padding:0 10px;}

.imageHolder { 
  position: relative; 
  width: 100%; 
	cursor: pointer; cursor: hand;
} 

.imageHolder .caption {
  position: absolute;
  width: 100%;
  height: 65px;
  bottom: 0px;
  left: 0px;
  color: #ffffff;
  background:rgba(0,0,0,0.8);
  text-align:center;
  font-weight:bold;
  opacity: 0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
	cursor: pointer; cursor: hand;
}

.imageHolder:hover .caption{opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out; cursor: pointer; cursor: hand;} 

.caption h1{
	font-family: "proxima-nova", sans-serif;
    letter-spacing: 0.04em;
    color: #fff;
	font-size: 15px;
	margin-top: 10px;
	padding: 0;
}

.caption h2{    color: #B2D235 !important;
    text-align: center;
    font-family: "museo",serif;
    z-index: 10;
    font-weight: 600;
    letter-spacing: 0.04em;
font-size: 12px;
padding: 0;}
	} /* Define mobile styles */

@media only screen and (min-width: 40.063em) {

	.iso{
    max-width: 100%;
    float: left;
    margin: 30px 0 0px;
}

.about_divider{
    margin-top:  40px !important;
}

.clients_title{
    /* text-align: center; */
    margin: 20px 0 20px;
    padding: 0;
    color: #B2D235;
    font-size: 1.0rem;
}

.clients_grid{
    margin: 10px 0 70px;
}

.cl{
    max-width: 11%;
    margin: 0 2.16% 20px;
}

	
#heads .columns{ padding: 5px 5px;}
#heads{ padding:0 10px;}

.imageHolder { 
  position: relative; 
  width: 100%; 
	cursor: pointer; cursor: hand;
} 

.imageHolder .caption {
  position: absolute;
  width: 100%;
  height: 55px;
  bottom: 0px;
  left: 0px;
  color: #ffffff;
  background:rgba(0,0,0,0.8);
  text-align:center;
  font-weight:bold;
  opacity: 0;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  cursor: pointer;
  cursor: hand;
}

.imageHolder:hover .caption{opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out; cursor: pointer; cursor: hand;} 

.caption h1{
	font-family: "proxima-nova", sans-serif;
	letter-spacing: 0.04em;
	color: #fff;
	font-size: 13px;
	margin-top: 10px;
	padding: 0;
}

.caption h2{
    color: #B2D235 !important;
    text-align: center;
    font-family: "museo",serif;
    z-index: 10;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 11px;
    padding: 0;
    }
	
} /* min-width 641px, medium screens */

@media only screen and (min-width: 64.063em) {

	.iso{
    max-width: 100%;
    float: left;
    margin: 30px 0 0px;
}

.about_divider{
    margin-top: 50px !important;
}

.clients_title{
    /* text-align: center; */
    margin: 30px 0 40px;
    padding: 0;
    color: #B2D235;
    font-size: 1.2rem;
}

.clients_grid{
    margin: 10px 0 70px;
}

.cl{
    max-width: 11.8%;
    margin: 0 2.16% 20px;
}

	
#heads .columns{ padding: 5px 5px;}
#heads{ padding:0 10px;}

.imageHolder { 
  position: relative; 
  width: 100%; 
	cursor: pointer; cursor: hand;
} 

.imageHolder .caption {
  position: absolute;
  width: 100%;
  height: 65px;
  bottom: 0px;
  left: 0px;
  color: #ffffff;
  background:rgba(0,0,0,0.8);
  text-align:center;
  font-weight:bold;
  opacity: 0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
	cursor: pointer; cursor: hand;
}

.imageHolder:hover .caption{opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out; cursor: pointer; cursor: hand;} 

.caption h1{
	font-family: "proxima-nova", sans-serif;
    letter-spacing: 0.04em;
    color: #fff;
	font-size: 15px;
	margin-top: 10px;
	padding: 0;
}

.caption h2{    color: #B2D235 !important;
    text-align: center;
    font-family: "museo",serif;
    z-index: 10;
    font-weight: 600;
    letter-spacing: 0.04em;
font-size: 12px;
padding: 0;}
	} /* min-width 1025px, large screens */