*{ margin: 0; padding: 0; outline: 0; }
.clear{clear: both}




body {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal; 
	color: #4b515d;	
	/*background-image: url('img/clean_textile.png'); z-index: 100;*/
	/*background:  url('../img/clean_textile.png') repeat;*/
}

a {color: #028079; text-decoration: underline; /*font-weight: lighter;*/  padding-bottom: 2px; cursor:pointer; }

a:hover {color: #06615A; text-decoration: underline; padding-bottom: 2px;
}

a img:hover{
	opacity: 0.7;
	filter: alpha(opacity=70);
}
a:active {color: #06615A; text-decoration: none; padding-bottom: 2px; position: relative; top: 1px;}
a.current { color: #028079;}

li.active>a{
	color: #06615A;
}





/*---------- fonts ----------------*/

p {
	line-height:1.58em;
	/*padding-top: 12px;*/
	padding-bottom: 12px;
	font-weight:300;
	font-size: 2rem;
	letter-spacing: .006rem;	
	font-family: 'Assistant', sans-serif;
	margin: 0px;
	color: #000;
}

li.size a{
	font-size:.8rem;
	letter-spacing: .06rem;	
	color: #4b515d;
	
}

.size{
	font-size:.8rem;	
}



h1 a{
	font-weight:500;
}
h1 {
	font-style: normal;
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: 500;
	//font-size: 2.4rem; /* font size for mobile mgk */
	line-height: 1.3;
	letter-spacing: .08rem;
	text-transform: none;
	line-height: 1.2em;
	text-align: left;
	color: #000000;
}

h1.subhead{
	font-style: normal;
	font-family: "Helvetica Neue", "Helvetica", Helvetica, sans-serif;
	font-weight: 200;
	font-size: 2.8rem; /* font size for mobile mgk */
	line-height: 1.3;
	letter-spacing: .01rem;
	text-transform: none;
	line-height: 1.3em;
	text-align: left;
	
}


h2 {
	color: #000;
	font-weight: 80;
	font-size: 2.2rem;
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", sans-serif;
	/*line-height: 1.2em;*/
	/*letter-spacing: 0.1em;*/
	letter-spacing: .01rem;
	line-height: 1.4em;
	text-align: left;	
	padding-bottom: 5px;
	/*padding-top:  5px;*/
}
h3 {
	font-weight:500;
	font-size: 1.em;
	letter-spacing: .07rem;
	line-height: 3rem;
	color: #000000;
}


.heading {
	font-weight:400;
	line-height: 3rem;
	font-size: 1.65rem;
	padding-top: 20px;
	color: #000;
	
}
h4{
	//font-size: 1.1rem;
	font-weight: 400;
	font-size: 1.8rem;
	letter-spacing: 0rem;
	color:#000000;
	line-height: 2.5rem;

}
h5{
	padding:0;
	overflow:visible;
	font-weight:500;
	font-size: 2rem;
	line-height: 2.2rem;
	color: #000000;
}
h6{
	padding: 0;
	margin: 0;
	color: #a9a9a9;
	font-weight: 400;
	font-size: 1rem;
	font-style: italic;
}

h7{
	padding: 0;
	margin: 0;
	color: #5a5a5a;
	font-weight: 400;
	font-size: 1.5rem;

}
h8 {
	font-size: 1.5rem;
	padding: 0;
	line-height: 0;
}

.bold{
	font-weight: 500;
	padding-top: 10px;
}

ul {
	list-style-type: disc;
	padding-top: 12px;
	padding-bottom: 12px;
	line-height:1.6em;
	/*padding-top: 12px;*/
	font-weight:300;
	font-size: 1.85rem;
	letter-spacing: .006rem;	
	font-family: 'Assistant', sans-serif;
	margin: 0px;
	color: #000;

}

li{
	line-height: 2.5rem;
	color: #000;
	margin-left: 50px;
	line-height:1.6em;
	
}


nav ul{
	/*border-bottom: 1px solid #000;*/
	text-align: left;
}

.inline-list-custom, .title-name, .title-name li {
	list-style-type: none;
	margin-left: 0;
}


nav a{
	color: #000000;	
}
nav a:hover{
	color: #7ea9bf;
}

.col-sm-2 {
	margin-right: 12%;
	float: right;
}

.col-sm-9{
	margin: 0 auto;
	float: right;
	margin-right: 12%;
}

.col-sm-3 {	
	margin: 0 auto;
	margin-right: 12%;
}

.credit h4 {
	font-size: 1.6rem;
	line-height: 2.2rem;
	text-indent: 5%;
}


.quote {
	background-color: #F1E6FD;
	margin-top: 4%;
	margin-bottom: 4%;
	margin-left: 5%;
	margin-right: 12%;
	padding-left: 20px;
	padding-top: 2px;
	padding-bottom: 20px;
}

.quote p {
	padding-bottom: 0;
	padding-top: 20px;
	padding-right: 4px;
}

.quote h3{
	font-weight: 400;
	letter-spacing: .008rem;
	font-size: 2.5rem;
	margin-bottom: 4%;
}

.quote h6 {
	font-size: 1.4rem;
	font-style: normal;
	color: #000;
}
/*
nav ul.inline-list-custom li {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 2.0rem;
  line-height: 2;
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
  margin-right: 2em;
  text-align: left;
  color: #000;
  padding-bottom: 0;
  float: right;
}
*/
ul.inline-list-custom li a {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 2.0rem;
  line-height: 2;
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
  margin-right: 2em;
  text-align: left;
  color: #000;
  padding-bottom: 0;
  padding-top: 3.8rem;
  float: right;
  text-decoration: none;

}

ul.inline-list-about li {
	list-style-type: none;
	float: left;
	margin-left: 0;
	margin-right: 8%;
}

ul.inline-list-custom-categories{
	/*border-bottom: 1px solid #000;*/
}
ul.inline-list-custom-categories li {
	 display: inline-block;
	 margin-right: 2rem;

}

ul.inline-list-custom li a:hover {
	color: #06615A;
	text-decoration: none;
}

.title-name {
	float: left;
	color: #000;
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

.title-name a {
	color: #000;
	text-decoration: none;
	letter-spacing: 0rem;
	font-weight: 300;
}
.title-name a:hover {
	color: #06615A;
	text-decoration: none;
}

.logo{
	width: 40%;
	float: left;
}


.container-1{
	margin-left: 2%;
	margin-right: 2%;
}



/* ---- Hover on Project Image ---- */


a.caption {
    display: none;
    position: absolute;
    color: #fff;
    font-weight: 500;
    font-size: 1.6rem;
    top: 0;
    line-height: 1.6rem;
    font-family:  'Assistant', sans-serif;
}

.custom{
	font-size:  1.3rem;
	
}
.project_media {
    position: relative;
}

.project_media .caption {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
	  padding-left: 8%;
	  padding-right: 8%;
	  padding-top: 10%;
    text-decoration: none;
    text-align: left;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}

.project_media .dark {
    display: none;
    background: #333;
    opacity: 30%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.project_media:hover .caption {
    display: block;
    opacity: 1;
}


.project_media:hover img {
   opacity: 10%;
   filter: blur(5px);
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: url(blur.svg#blur);
      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');   
   
}

.full{
    background: url('../img/background_SF.png');
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
    height: 1250px;
    background-size: 2048x 1600px;
}


.pads{


}

#indexcopy{
  /* float: right; */
    font-size: 2.4em;
	line-height: 1.3em;
    margin: 0;
	letter-spacing: 0;
	padding:100px 0 30px 0;
    text-align: center;
}

#indexcopy h2 {
    text-align: center;
}

#indexcopy h1 {
    text-align: center;
}

.intro{
    float: left;
	border-bottom: 1px solid #000;
	padding: 0;
    width: 100%;
    position: relative; /*-- new to fix mobile links not working - */
    z-index: 1;
    
}

#intro h1 li{
    color: #000000;
    font-size: 2.2rem;
    font-family: sans-serif;
    font-weight: 100;

}

#intro h1 a{
    font-weight: 200;
}
section#intro-nav {
	padding:0px 0px 20px 0px;
	line-height: 320%;

}

#end {
	
	background-color: #eee;
	border: 1px solid #333;
}


#introcopy {
	text-align: left;
    font-size: 2.4em;
	line-height: 1.3em;
	letter-spacing: 0;
	padding:30px 0 30px 0;
/*	border-bottom: 1px solid #b8ccd6; */
    float: right;
    width: 100%;
	
}

.center {
    text-align: center;
    width: 75%;
    float: right;
    padding: 0px;

  
}

#introcopy h1{
    text-align: left;
	padding-bottom: 8px;

}

.col-sm-8{
    z-index: 1; /*-- new to fix mobile links not working - */
    position: relative; /*-- new to fix mobile links not working - */
}



/*-------------------Grid----------------------------*/

.half{
	width: 75%;
	//border-bottom: 1px solid #e6e6e6;
}
section#col{
	padding:30px 0px 20px 0px;
	float: left;
}


.linebottom {
	/*border-bottom: 1px solid #b8ccd6;*/
	float: left;
	padding: 20px 0px 20px 0px;
    z-index: 1; /*-- new to fix mobile links not working - */
    position: relative; /*-- new to fix mobile links not working - */    
}

.lineend{
	padding: 20px 0px 20px 0px;
	float: left;
}
.col{
	width: 90%;
	float: left;

}
.col-sm-6{
	padding-top: 30px;
}

.col-sm-9{
	padding-top: 30px;
}

.col-sm-12{
	padding-top: 30px;
}



.col-md-1{
	width: 55%;
	float: left;
	padding-top: 60px;
	margin-bottom: 10px;
	overflow:visible;
}

.col-md-2{
	width: 35%;
	float:right;
	padding-top: 60px;
	margin-bottom: 50px;
}

.col-md-3{
	width: 50%;
	float: left;
	/*margin-bottom: 50px;*/
	
}
.col-md-4{
	width: 46%;
	float:right;
	/*margin-bottom: 50px;*/
	}

.image_thumb{
	height: 100%;
	padding-bottom: 60px;
	float: left;
	padding-top: 10px;

}

.image-1{
	overflow: hidden;
	//float: left;
	border: 1px solid #e6e6e6;
}
.image-2{
	overflow: hidden;
	float: right;
	border: 1px solid #e6e6e6;
}
.details{
	width: 75%;
	
}



.caption-lt{
	float: left;	
	padding-top: 5px;
	padding-bottom: 20px;
}

.caption-rt {
	float: right;
	width: 48%;
}
.caption-fl{
	padding-top: 5px;
}
/*-------------------button -------------------------*/



.align_right {
	padding-top: 10px;
	float: right;
	
}

.align_left {
	padding-top: 10px;
	float: left;
}
.myButton a{
/*	background-color:#3da9d1;
	background-position:center;
	background-repeat:no-repeat;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
*/
	display:inline-block;
	cursor:pointer;
	color: #ffffff;
	background: #028079;
	font-family:arial;
	font-size:15px;
	padding:8px 16px 8px 16px;
	text-decoration:none;
/*	text-shadow:0px 1px 0px #3d768a;
    */
}

.myButton-weird a {
	padding: 0;
	display:inline-block;
	cursor:pointer;
	color: #ffffff;
	background: #028079;
	font-family:arial;
	font-size:15px;
	padding-left: 16px;
	padding-right: 16px;
	text-decoration:none;
}


.myButton a:hover {
	color: #ffffff;
	background: #06615A;
}
/*
.myButton a:active {
	position:relative;
	top:1px;
	background-color:#3da9d1;
}
*/

a.myButton.icon{
	width: 15%;
}

a.myButton.icon span {
	padding-left: 40px;
	background: url('../img/projects/Placed/pdf_logo.svg') no-repeat 0 -4px;
}



/*---------------------- work --------------------------*/

#work {
	position: relative;
	/*position: absolute;*/
}

.block {
	display: block;
	float: left;
	width: 100%;
}

.rows {
	width: 100%;
	height: 100%;
	float: left;
}

.rowcolumn {
	float: left;
	text-align: center;
	padding-bottom: 20px;
	
}
.rowcolumn2 {
	float: left;
	text-align: center;
	/*margin-left: 7px;*/
	margin-right: 7px;
	padding-bottom: 25px;
	padding-right: 0px;
}
/*
.caption {
	position: relative;
	font-size: 1em;
	padding-top: 5px;
}
*/
.subcaption{
	color:  #aaa;
	font-size: .8em;
}


/*------------------------------Blog ---------------------------*/

#blog {
	
}


.line{  /*--this is important that keeps the footer down -- */
	padding-top: 1px;
	/*border-top: 1px solid #b8ccd6;*/
}


/*------------------------------Contact form ------------------*/

#contact {
	position: relative;
	/*position: absolute;*/
}



#form {
/*	width: 90%;*/
}

#page-wrap {
	min-height: 500px;
	padding-top: 20px;
	height: auto !important;
	height: 500px;
/*	width: 100%;*/
/*	border-top: 1px solid #b8ccd6;*/
}

#contact-area {
/*	width: 600px;*/
	width: 80%;
	margin-top: 25px;
	margin-right: 0;
}

#contact-area input, #contact-area textarea {
	padding: 9px;
	width: 80%;
	font-family: Helvetica, sans-serif;
	font-size: .8em;
	margin: 0px 0px 5px 0px;
	border: 1px solid #b8ccd6;
}

#contact-area textarea {
	height: 90px;
	
	
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 1px solid #7ea9bf;
}
.btn{
	width: 70%;
	/*float: right;*/
}

#contact-area input.submit-button {
	/*width: 15%;*/
	height: 40px;
	color:  #000;
	background: #b8ccd6;
	border: 1px solid #fff;
	cursor: pointer;
	-webkit-border-radius: 5px;
	
}
#contact-area input[type=submit]:hover{
	background: #ddd;
	cursor: pointer;
}

label {
	float: left;
	text-align: left;
	margin-right: 15px;
	width: 20%;
	padding-top: 5px;
	font-size: 1em;
}

.resume {	

}

.resumeContainer {
	border: 1px solid #333;
}





/*---------------------- projects --------------------------*/

.featured {
	position:relative;
	padding-bottom: 10px;
}
.projects {
	/*padding-bottom: 30px;*/
	/*padding-top: 30px;*/
	

}

p.small{
	font-size:1em;
	font-weight:300;
}
.project-img video{
	max-width: 100%;
	height: auto;
	/*padding-top: 20px;*/
	border: 1px solid #e6e6e6;
	
}
.project-img img {
	max-width: 100%;
	/*height: auto;*/
	/*margin-top: 20px;*/
	border: 1px solid #e6e6e6;
	
}

.project-slide img {
	max-width: 100%;
	height: auto;
	/*margin-top: 20px;*/
	border: 1px solid #eee;
}

ul.details {
	padding-bottom: 50px;
	padding-top:30px;
}
.lined-list li {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  list-style-type: none;
  border-bottom: 1px solid #b8ccd6;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  margin-left: 0;
  
}



.tiny{font-size: 16px;margin-bottom: 19px;color: #a4a4a4;}

section{background: url('img/clean_textile.png'); z-index: 100;
}

.label{font-size:250%;padding: 25px 0 0px 0;}

img {
	max-width: 100%;
	cursor:pointer;
}


.sub {display: block; display: inline;}



#port img {padding-bottom: 40px;}

.contactcopy {font-size: 150%;padding-bottom:40px;}
.drop {padding-top: 15px;}
#follow{padding-bottom: 100px;}
#follow ul li{list-style: none; display:inline; margin-right:30px;font-size: 150%}

#empty{background:none;}

.foot {
	border-top: 1px solid #000000;
	font-weight: 300;
	list-style-type: none;
}

.foot li {
	list-style-type: none;
	margin: 0;

}
.end {
	padding-top: 20px;
	border-top: 1px solid #000000;
	font-weight: 300;
}

footer {
	padding-top: 20px;
	clear: both; /*this is important and keeps the footer down*/
}




/*
#footer{background:url('images/foots.png') no-repeat center top; height: 900px; position: fixed; z-index: -99; background-size: cover; height: 100%; width: 100%; left: 0; top: 0; color:  #f5f5f5;}
.footercontent {font-family:"lobster"; color: #f0625b;position:absolute; top:40%; left:100px;margin: 0px auto;font-size:650%; text-align: center;}
*/


/* ======== slider ============*/

#slider{
	border-right: 1px solid #eee;
}

.swipe {
	overflow: hidden;
	position: relative;
	/*max-width: 600px;*/
	width: 100%;
	/*height: 350px;*/
	/*margin: 100px auto 0;*/
}
.swipe-wrap {
	overflow: hidden;
	position: relative;
}
.swipe-wrap > div {
	float: left;
	width: 100%;
	position: relative;
}
.swipe .nav {
	position: absolute;
	width: 35px;
	height: 38px;
	z-index: 10;
	text-align: center;
	line-height: 40px;
	display: inline-block;
	color: #fff;
	top: 45%;
	cursor: pointer;
	/*background: url('img/logo.png');
	z-index: 100;*/
	background-color: #eee;
	border: 1px solid #ddd;
	
}

.swipe .nav:hover {
	opacity:0.7;
	filter:alpha(opacity=40); /* For IE8 and earlier */
 
}
.swipe .nav.next {
	right: 0;
	-webkit-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
	font-size: 12px;
	color: #444;
	
}
.swipe .nav.prev {
	-webkit-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	font-size: 12px;
	color: #444;
	
}

/* ------------- media queries ---------------*/

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}





/* ------------- for phones and handhelds ----*/


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

*/

.col-sm-8 {
    position: relative; /*-- new to fix mobile links not working - */
    z-index: 1;
}
   
.intro{
    position: relative; /*-- new to fix mobile links not working - */
    z-index: 1; 
}

.rowcolumn {
	width: 30.33333%;
	padding-right: 18px;
  
}
.rowcolumn2 {
	width: 30.33333%;
}

#contact-area input.submit-button {
	width: 30%;
}

@media all and (max-width: 639px) {
.resume {	
	text-align: center;
	float: none;
}