@charset "UTF-8";
/* CSS Document */

body {
	  width: 100%;
       margin: 0;
       padding: 0;
       font-size: .8em;
	   line-height: 1.125em;
	   font-family: 'Josefin Sans', sans-serif;
	   color:#000;
	   background-color:#FFF;
    }
	
	a img {
		border:0;
	}
	
	a {
		text-decoration:none;
		color:#000;
	}
	
	a:hover {
	color:#F7BE11;

	}
	
	a:visited {
		color:#000;
	}
	
    #wrap {
       overflow: hidden;
       margin: 0 auto;
	   padding:0;
    }	
	
	img {
		padding:0;
		margin:0;
	}
	
	h1, h2, h3, h4 {
		font-weight:400;
		margin:0;
		padding:0;
	}
	
	
	input {
    vertical-align: middle;
    
}
		

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

TOP NAV

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

.primary-nav {
 position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color:#FFF;
}

.primary-nav ul {
		  text-align:center;
		  padding:0;
		}
  
  .primary-nav li {
	font-size:16px;
	letter-spacing:.02em;
    display: inline-block;
	text-transform:uppercase;
  }
  .primary-nav a {
    display: inline-block;
    padding: .18em 1.8em;
	color:#000;
  }
 	
	.primary-nav a:visited {
		color:#000;
	}
	
	.primary-nav a:hover {
	color:#F7BE11;
	}
  
 /* SITE BRANDING */

#TM_logoW {
	position: absolute;
	left:10%;
	top:40%;
	width:100%;
	z-index:50;
	}
	
#TM_logoM {
			display:none;
		}
	
#TM_logoW img {
	float:left;
	width:80%;
	height:auto;
	}
	
.callbacks_nav {
  			display:none;
  			}


/* ABOUT */
#about {
	width:100%;
	padding:14% 0 5% 0;
}

#about p {
	max-width:1250px;
	padding:0 25% 25px 25%;
	margin: 0 auto;
	text-align:center;
	font-size:18px;
	line-height:30px;
}

/* CONTACT */
#contact {
	width:100%;
	padding:130px 0 130px 0;
	margin:0 auto;
	background-color:#FFF;
	color:#000;
	}


#contact p {
	text-align:center;
	font-size:18px;
	letter-spacing:.05em;
	line-height:40px;
}

#contact a {
	color:#000;
}

#contact a:hover {
	text-decoration:underline;
	color:#F7BE11;
}



	
/* Home Work boxes */

	.homeROsNew:hover img {
		opacity:.4;
		-webkit-transition: all ease 0.7s;
		-moz-transition: all ease 0.7s;
		-o-transition: all ease 0.7s;
		-ms-transition: all ease 0.7s ;
		transition: all ease 0.5s ;
	}


	.boxFrame {
		position:relative;
		border: 3px solid #FFF;
		padding-top:35px;
	}
	
    .box {
       float: left;
       position: relative;
       width: 25%;
	   padding-bottom: 25%;
	   font-size:2em;
	   line-height:1em;
    }
	
	.boxBG {
       position: absolute;
       left: 4px;
       right: 4px;
       top: 4px;
       bottom: 4px;
       overflow: hidden;
	   background-color:#000;
    }
	
	
    .boxInner {
       position: absolute;
       overflow: hidden;
    }
	
	
    .boxInner img {
       width: 100%;	   
    }
	
    .boxInner .titleBox {
       position: absolute;
       top: 46%;
	   width:100%;
       padding: 0;
       text-align: center; 
	   text-transform:uppercase;
	   letter-spacing: 0.04em;
	   font-size: 16px;
    }
	
	 .boxInner .titleBox2L {
       position: absolute;
       top: 44%;
	   width:100%;
       color: #FFF;
       padding: 0;
       text-align: center; 
	   text-transform:uppercase;
	   letter-spacing: 0.04em;
	   font-size: 16px;
	   line-height:20px;
    }
		
	.boxInner .titleBox, .boxInner .titleBox2L a {
		color:#FFF;
	}
	
	.boxInner .titleBox a:hover, .boxInner .titleBox2L a:hover {
		color:#FFF;
	}
	
	.boxInner .titleBox a:visited, .boxInner .titleBox2L a:visited {
		color:#FFF;
	}
	
	
	
    body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
       margin-bottom: 0;
    }
	
/* Work pages */	

	.topBar {
	 position: fixed;
	  z-index: 200;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height:40px;
	  text-align:right;
	  background-image:url(../images/transparent_bgL.png);
	}

	.close {
		float:right;
		padding:10px 20px 0 0;
		font-size:15px;
		letter-spacing:.08em;
	}
	
	.close a {
		color:#FFF;
	}
	
	
	.close img {
		padding:0 0 0 10px;
	}
	
	.arrow_navL {
	  position: fixed;
	  -webkit-tap-highlight-color: rgba(0,0,0,0);
	  top: 52%;
	  left: 0;
	  opacity: 0.7;
	  z-index: 600;
	  text-decoration: none;
	  height: 70px;
	  width: 40px;
	  background: transparent url("../images/arrowsL.png") no-repeat left top;
	  margin-top: -45px;
 	 }
	 
	 .arrow_navR {
	  position: fixed;
	  -webkit-tap-highlight-color: rgba(0,0,0,0);
	  top: 52%;
	  right: 0;
	  opacity: 0.7;
	  z-index: 600;
	  text-decoration: none;
	  height: 70px;
	  width: 40px;
	  background: transparent url("../images/arrowsL.png") no-repeat right top;
	  margin-top: -45px;
 	 }
	 
	 .arrow_nav a {
	  display:block;
 	 }
	
    .Pbox {
       float: left;
       position: relative;
       width: 100%;
    }
	
    .PboxInner {
       margin:1em auto;
	   max-width:1000px;
	   overflow: hidden;
	   text-align:center;
	   padding:0px 15px 45px 15px;
    }
	
	 .PboxInnerT {
       margin:0px auto;
	   max-width:1000px;
	   overflow: hidden;
	   text-align:center;
	   padding:0px 0px 30px 0px;
    }
	
	.PboxInner .topBrder {
	   border-top:1px solid #666;
	   padding-top:5px;
	   margin-top:20px;
    }
	
	.PboxInner .introTxt  {
	   padding:0 0 15px 0;
    }
	
	.PboxInner .introTxt h1 {
	   font-size:34px;
	   text-transform:uppercase;
	   line-height:34px;
	   padding-top:75px;
	   padding-bottom:30px;
    }
	
	.PboxInner .introTxt h2 {
	   font-size:24px;
	   line-height:30px;
	   padding-bottom:0;
    }
		
	.PboxInnerBlk .introTxt img {
       max-width: 100%;
	   margin-bottom:30px;
    }
	
	.projectImgBox {
		float: left;
		position: relative;
  		width: 100%;  
		text-align:center;
	}
	
	.projectImgBox img {
		max-width: 100%;
	}

	.videoBox {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 5px;
		height: 0;
	}
	.videoBox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	
    @media only screen and (max-width : 400px) and (min-width : 100px) {
       /* Tablet view: 2 tiles */
	   
	   /* TOP NAV */
	   		
		.primary-nav li {
			font-size:16px;
  		}
		
		  .primary-nav a {
			padding: .2em .8em;
		  }
		  
		  .primary-nav a:hover {
			color:#000;
	}
		  
		  
		  /* SITE BRANDING */

		#TM_logoM {
			position: absolute;
			left:8%;
			top:28%;
			width:100%;
			z-index:50;
			}
			
		#TM_logoW {
			display:none;
		}
		
		#TM_logoM {
			display:block;
		}
			
		#TM_logoM img {
		float:left;
		width:85%;
		height:auto;
		}   
	   
	   /* About */
	   #about {
		padding:70px 0 30px 0;
		}
		
		#about p {
			padding:15px 25px;
			margin: 0 auto;
			text-align:center;
		}
		
		/* CONTACT */
		#contact {
			padding:75px 0 50px 0;
		}
		
		
		#contact p {
			padding:0 20px;
		}
		
		#contact p img {
			width:50%;
			height:auto;
		}
	  
	   /* Home Work Boxes */
	   .homeROsNew:hover img {
		opacity:1;
	}
	   
	   .box {
          width: 50%;
          padding-bottom: 50%;
       }
	   
	   .boxInner .titleBox {
		   top: 43%;
	   		font-size:15px;
    	}
		
		.boxInner .titleBox2L {
			 top: 39%;
	   		font-size:15px;
    	}
		
		
		
	  /* Work pages */
	  .arrow_navL {
	  position: relative;
	  float:left;
	  top: 170px;
	  left: 0;
	  margin-top: 0;
 	 }
	 
	 .arrow_navR {
	  position: relative;
	  float:right;
	  top: 170px;
	  right: 0;
	  margin-top: 0px;
 	 }
	  
    }