/* 	
================================================================
Theme Name: 
Author: Tom Merrell Studio
Author URI: http://www.tommerrell.com
================================================================  
*/




/* 	
================================================================
DEFAULTS AND RESETS
================================================================  
*/



body, html{
  padding:0;margin:0;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

*{
	-webkit-transform: none;  
	webkit-backface-visibility: hidden; 
}

/* remove list styles*/
ul{list-style-type:none;margin:0;padding:0;}



/* Remove default fieldset styles.*/

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* Allow only vertical resizing of textareas.*/

textarea {
    resize: vertical;
}

/* Browser Upgrade*/

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* clearfix */
.cf:before, .cf:after{content: " ";display: table;}
.cf:after {content: " ";visibility: hidden;display: block;height: 0;clear: both;}
.cf {*zoom: 1;}


/* remove paragraph margins */
p{padding:0;margin:0;}


/* break long links over lines */
a {word-wrap: break-word;}


/*Background Sizing*/
.cover{-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover; background-repeat:no-repeat;background-position:center;}
.contain{-webkit-background-size: contain;-moz-background-size: contain;-o-background-size: contain;background-size:contain; background-repeat:no-repeat;background-position:center;}

.bk-top{background-position:top;}
.bk-right{background-position:right;}
.bk-bottom{background-position:bottom;}
.bk-left{background-position:left;}


/*Vertical Centring*/
.table{display:table;height:100%;}
.table-cell{display:table-cell;vertical-align:middle;}

/*Alignments*/
.center{text-align:center;}
.left{text-align:left}
.right{text-align:right}

/*Float*/
.float-right{float:right!important;}
.float-left{float:left!important;}

/*Reset Headings*/
h1, h2, h3, h4, h5, h6{
	font-size:1em;
	margin:0;
	padding:0 0 .5em;
	font-weight: normal;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    margin: 1em 0;
    padding: 0;
}


/* 	
================================================================
TYPOGRAPHY
================================================================  
*/

@font-face {
  font-family: 'icons';
  src: url("webfonts/icons-v1-webfont.eot");
  src: url("webfonts/icons-v1-webfont.eot?#iefix") format("embedded-opentype"), url("webfonts/icons-v1-webfont.woff") format("woff"), url("webfonts/icons-v1-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; 
}


.icons{
	font-family: 'icons', sans-serif;
}

.ppp{
font-family: 'Neue Haas Unica Pro Bold';
font-family: 'Neue Haas Unica Pro Medium';
font-family: 'Neue Haas Unica Pro';
font-family: 'Neue Haas Unica Pro Ultra Light';
}

body{
  	font-size:19px;
	font-family: helvetica, arial ,sans-serif;
 	line-height:1.4;
	letter-spacing:1px;
}



a, a:link, a:visited{
	text-decoration:none;
	color:#000;
}

a, a:hover, a:active{
	color:rgb(150,150,150);
}


/* 	
================================================================
GRID
================================================================  
*/

.m-1-col, .m-2-col, .m-3-col, .m-4-col, .m-5-col, .m-6-col, .m-7-col, .m-8-col, .m-9-col, .m-10-col, .m-11-col, .m-12-col {
	float: left;
	margin:0;
	padding-left:7.5px;
	padding-right:7.5px;
}

.m-full-width{
	padding:0;
	float:left;
	width:100%;
	margin:0;
}

.m-hide{ display:none;}

.m-1-col { width: 8.333%; }
.m-2-col { width: 16.666%; }
.m-3-col { width: 25%; }
.m-4-col { width: 33.333%; }
.m-5-col { width: 41.666%; }
.m-6-col { width: 50%; }
.m-7-col { width: 58.333%; }
.m-8-col { width: 66.666%; }
.m-9-col { width: 75%; }
.m-10-col { width: 83.333%; }
.m-11-col { width: 91.666%; }
.m-12-col{ width: 100%; }




/* 	
================================================================
LOADING
================================================================  
*/




.no-js .main-loader{
	display:none;
}


@-webkit-keyframes spinning {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinning {
    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes spinning {
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}


.spinning{
    animation: 1.3s spinning infinite cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-animation: 1.3s spinning infinite cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-animation: 1.3s spinning infinite cubic-bezier(0.645, 0.045, 0.355, 1);
    -ms-animation: 1.3s spinning infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loading-inner{
 
}

.main-loader{
	width:100%;
	height:100%;
	position:fixed;
	top:0; left:0;
	background:#fff;
	z-index:3000;
}

#main-loader .loading-inner{

}


#loader{
	width:100%;
	height:100%;
	position:fixed;
	top:0; left:0;
	opacity:1;
	z-index:20000;
	display:none;
/*	mix-blend-mode:multiply;*/
 }


 .loading-inner{
	/*border-radius:50%;*/
	position:absolute;
	bottom:20px;left:50%;
	width:30px;height:30px;
	margin-left: -15px;
	opacity:.75;
	background-image:url('img/loader-v4.png');
}

#loader .notice{
background:#ccc;
position:fixed;
bottom:0;left:0;
padding:20px 0 20px;
width:100%;
}


/* 	
================================================================
LAYOUT
================================================================  
*/

.site-wrapper{
	display: inline-block;
	padding-top:42px;/*header*/
	width:100%;
	height:100%;
	position:fixed;
}
	
.side-scroll{
	height: 100%;
	white-space: nowrap;
	overflow-x:scroll;
	overflow-y:hidden;
}

.vertical-scroll{
	width: 100%;
	white-space: normal;
	overflow-y:visible;
	overflow-x:hidden;
}

/* 	
================================================================
HEADER
================================================================  
*/

.header{
	position:fixed;
	top:0;
	left:0;
	padding:20px;
	width:100%;
	height:auto;
	z-index:5000;
	background:rgba(255,255,255,.8);
}

.title{
	font-weight:normal;
	margin:0;
	float:left;
 	padding:0;
	max-width:220px;
}

.menu-button{
	float:right;
	text-align:right;
	cursor:pointer;
}
 

.desktop-menu{display:none;}


/* 	
================================================================
INDEX PAGE
================================================================  
*/

.index{
	width:100%;
	padding:100px 20px 250px;
	/*background:rgba(250,150,150,.2);*/
}


.index-group{
	width:auto;
 	margin-right:20px;
	margin-top:40px;
	float:left;
	/*filter:grayscale(100%);*/
	opacity:.8;
	font-size:0;
	cursor:pointer;
	-webkit-transition: all .2s ease-in-out;
	  -o-transition: all .2s ease-in-out;
	     transition: all .2s ease-in-out;
 }

a.index-group:hover{
	opacity:1;
		filter:grayscale(00%);
	-webkit-transition: all .2s ease-in-out;
	  -o-transition: all .2s ease-in-out;
	     transition: all .2s ease-in-out;
}


.index-group img {
	display:inline!important;
	float:none!important;
	padding:0!important;
	margin-right:5px;
	margin-bottom:5px;
	width:auto;
	height:100px;
}

/* Varying heights on index page

.index-group .six{max-height:100px;}
.index-group .five{max-height:80px;}
.index-group .four{max-height:80px;}
.index-group .three{max-height:80px;}
.index-group .two{max-height:90px;}

*/

/****Next Posts Link****/

.next-posts-link{
	display:block;
	width:100%;
	text-align:center;
	float:left;
	margin-top:100px;	
}

.next-posts-link a{
	width:27px;height:27px;
	display:block;
	margin:0 auto 0;
	background-image:url('img/plus-v1.png');
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size:contain; 
	background-repeat:no-repeat;
	background-position:center;
}

.next-posts-link a:hover{
	opacity:.3;
}

.hidden-load{
	opacity:0;
	-webkit-transition: all .2s ease-in-out;
	  -o-transition: all .2s ease-in-out;
	     transition: all .2s ease-in-out;
}

.new-content{
	-webkit-transition: all .2s ease-in-out;
	  -o-transition: all .2s ease-in-out;
	     transition: all .2s ease-in-out;
}

 /****Loading containers for index page****/

#load{
	width:100%;
	height:100%;
}

.project-page-overlay{
	position:fixed;
	width:100%;
	height:100%;
	background:#fff;
	top:0;left:0;
	z-index:8000;
	display:none;
	padding:63px 0px 63px;/*header*/
}

.project-page-inner{
	position:relative;
	height:100%;
	width:100%;
	top:0;left:0;
}

.single-project-wrapper{
	position:fixed;
	width:100%;
	height:100%;
	background:#fff;
	top:0;left:0;
	z-index:30;
	padding:63px 0px 63px;/*header*/
}



/* 	
================================================================
IMAGE SLIDESHOW
================================================================  
*/

.carousel{
	width:100%;
	height:100%;
	position:absolute;
	top:0;left:0;
	padding-top:10px;
	padding-bottom:10px;
}

.flickity-viewport, .flickity-slider{
 	width:100%;
	height:100%;
}



/*Vertical Alignments*/

.slide .space{	height:100%;display:inline-block;width:0px;background:green;}
.align-top *{ vertical-align:middle;}
.align-middle *{ vertical-align:middle;}
.align-bottom *{ vertical-align:middle;}/*default*/




/*Slide Containers*/

.full-width-outer{
	width:100%;
	height:100%;
	text-align:center;
}

.pair-slide-outer{
	width:49%;
	height:100%;
	display:inline-block;
	padding:0 5px 0;
}

.slide-inner{
	width:100%;
	height:100%;	 
}


.slide{
	font-size:0;
	height:100%;
	padding:0 5px 0px;
	background:#fff;	
}

.slide img{
	max-height:100%;
	max-width:99%;
	height: auto;
	width:auto;
	display:inline-block;
	float:none!important;
	padding:0!important;
}


/*Slide Alignments*/
.pair-slide-outer:nth-of-type(odd){text-align:right;}
.pair-slide-outer:nth-of-type(even){text-align:left;}

.js .carousel .slide {
    opacity: 0;
}
.js .flickity-slider .slide, .carousel .slide:first-child {
   opacity: 1;
}

.touch .next-button, .previous-button{
	display:none;
}

.next-button, .next-close-button{
	position:fixed;
	width:50%;
	height:100%;
	top:0;right:0;
	cursor:url(img/r-arr-v3.png),auto;;
	z-index:2000;
}

.next-close-button{
	cursor:url(img/r-arr-v3.png),auto;;
}

.close-button{
	cursor:pointer;
}

.prev-button{
	position:fixed;
	width:50%;
	height:100%;
	top:0;left:0;
	cursor:url(img/l-arr-v3.png),auto;;
	z-index:2000;
}

.flickity-prev-next-button{
	 display:none;
}

.is-selected:last-child{
 /*background-color:red;*/
}

.next-page{display:none;}

.close-button-outer{
	position:fixed;
	top:0;right:0;
	padding:15px;
	width:50px;height:50px;
	z-index:30000;
}

.close-button-inner{
	width:100%;height:100%;
	display:block;
	background-image:url('img/close.png');
}




/* 	
================================================================
INFORMATION PAGE
================================================================  
*/


.contact-section{
	width:100%;
	padding:20px; 
	padding-top:100px;
}




.contact-title{
	font-weight:normal;
	margin:0;
	float:left;
 	padding:0;
}


.contact-section p{
	margin:0 0 1em;
}
 







/* 	
================================================================
LARGE PHONES
================================================================  
*/

@media only screen and (min-width: 450px) {


/* 	
================================================================
GRID
================================================================  
*/

.lm-1-col, .lm-2-col, .lm-3-col, .lm-4-col, .lm-5-col, .lm-6-col, .lm-7-col, .lm-8-col, .lm-9-col, .lm-10-col, .lm-11-col, .lm-12-col {
	float: left;
	margin:0;
	padding-left:7.5px;
	padding-right:7.5px;
}


.lm-show{display:block;}
.lm-hide{ display:none;}
.lm-full-width{
	width:100%;
	padding-left:0;padding-right:0;
}

.lm-1-col { width: 8.333%; }
.lm-2-col { width: 16.666%; }
.lm-3-col { width: 25%; }
.lm-4-col { width: 24.999%; }
.lm-5-col { width: 41.666%; }
.lm-6-col { width: 50%; }
.lm-7-col { width: 58.333%; }
.lm-8-col { width: 66.666%; }
.lm-9-col { width: 75%; }
.lm-10-col { width: 83.333%; }
.lm-11-col { width: 91.666%; }
.lm-12-col{ width: 100%; }




}/*END LARGE PHONE*/


/* 	
================================================================
MINI TABLET
================================================================  
*/

@media only screen and (min-width: 600px) {


.mt-1-col, .mt-2-col, .mt-3-col, .mt-4-col, .mt-5-col, .mt-6-col, .mt-7-col, .mt-8-col, .mt-9-col, .mt-10-col, .mt-11-col, .mt-12-col {
	float: left;
	margin:0;
	padding-left:2.5px;
	padding-right:2.5px;
	display:block;
}



.mt-1-col { width: 8.333%; }
.mt-2-col { width: 16.666%; }
.mt-3-col { width: 25%; }
.mt-4-col { width: 33.333%; }
.mt-5-col { width: 41.666%; }
.mt-6-col { width: 50%; }
.mt-7-col { width: 58.333%; }
.mt-8-col { width: 66.666%; }
.mt-9-col { width: 75%; }
.mt-10-col { width: 83.333%; }
.mt-11-col { width: 91.666%; }
.mt-12-col{ width: 100%; }




/* 	
================================================================
HEADER
================================================================  
*/

.header, .contact-section{
	padding:20px;
}

.site-wrapper{
	padding-top:63px;/*header*/
}

.contact-section{
	padding-top:150px;
}

.contact-title{
	max-width:220px;
}

.menu-button{
	display:none;
}
 

.desktop-menu{display:block;}

.desktop-menu li{display:inline;padding-right:40px;}



/* 	
================================================================
SLIDES
================================================================  
*/

/*** Image Heights & Alignments***/

.slide img.one{max-height:16.666%;}

.slide img.two{max-height:33.3333%;}

.slide img.three{max-height:50%;}

.slide img.four{max-height:66.666%;}

.slide img.five{max-height:83.333%;}

.slide img.six{max-height:100%;}



/*Vertical Alignments*/

.slide .space{	height:100%;display:inline-block;width:0px;background:green;}
.align-top *{ vertical-align:top;}
.align-middle *{ vertical-align:middle;}
.align-bottom *{ vertical-align:bottom;}/*default*/



/* 	
================================================================
INDEX PAGE
================================================================  
*/


.index-group{
 	margin-right:40px;
	margin-top:100px;
 }


}/*END MINI TABLET*/


/* 	
================================================================
TABLET
================================================================  
*/

@media only screen and (min-width: 650px) {



/* 	
================================================================
GRID
================================================================  
*/

.t-1-col, .t-2-col, .t-3-col, .t-4-col, .t-5-col, .t-6-col, .t-7-col, .t-8-col, .t-9-col, .t-10-col, .t-11-col, .t-12-col {
	float: left;
	margin:0;
	padding-left:2.5px;
	padding-right:2.5px;
}
.m-hide{display:block;}
.t-hide{ display:none;}

.t-full-width{
	width:100%;
	padding-left:0;padding-right:0;
}

.t-1-col { width: 8.333%; }
.t-2-col { width: 16.666%; }
.t-3-col { width: 25%; }
.t-4-col { width: 33.333%; }
.t-5-col { width: 41.666%; }
.t-6-col { width: 50%; }
.t-7-col { width: 58.333%; }
.t-8-col { width: 66.666%; }
.t-9-col { width: 75%; }
.t-10-col { width: 83.333%; }
.t-11-col { width: 91.666%; }
.t-12-col{ width: 100%; }










}/*END TABLET*/





/* 	
================================================================
DESKTOP
================================================================  
*/

@media only screen and (min-width: 950px) {




/* 	
================================================================
GRID
================================================================  
*/

.m-hide{
	display:block;
}

.t-hide{
	display:block;
}

.d-hide{
	display:none;
}
.d-1-col, .d-2-col, .d-3-col, .d-4-col, .d-5-col, .d-6-col, .d-7-col, .d-8-col, .d-9-col, .d-10-col, .d-11-col, .d-12-col {
	float: left;
	margin:0;
	padding-left:2.5px;
	padding-right:2.5px;
}

.d-hide{ display:none;}

.d-1-col { width: 8.333%; }
.d-2-col { width: 16.666%; }
.d-3-col { width: 25%; }
.d-4-col { width: 33.333%; }
.d-5-col { width: 41.666%; }
.d-6-col { width: 50%; }
.d-7-col { width: 58.333%; }
.d-8-col { width: 66.666%; }
.d-9-col { width: 75%; }
.d-10-col { width: 83.333%; }
.d-11-col { width: 91.666%; }
.d-12-col{ width: 100%; }


 

/* 	
================================================================
SLIDE PADDING
================================================================  
*/

.slide{
	padding:0 65px 0px;
}



 
}/*END DESKTOP*/





/* 	
================================================================
MEDIUM DESKTOP
================================================================  
*/

@media only screen and (min-width: 1200px) {






/* 	
================================================================
GRID
================================================================  
*/

 
.md-1-col, .md-2-col, .md-3-col, .md-4-col, .md-5-col, .md-6-col, .md-7-col, .md-8-col, .md-9-col, .md-10-col, .md-11-col, .md-12-col {
	float: left;
	margin:0;
	padding-left:7.5px;
	padding-right:7.5px;
}

.md-1-col { width: 8.333%; }
.md-2-col { width: 16.666%; }
.md-3-col { width: 25%; }
.md-4-col { width: 33.333%; }
.md-5-col { width: 41.666%; }
.md-6-col { width: 50%; }
.md-7-col { width: 58.333%; }
.md-8-col { width: 66.666%; }
.md-9-col { width: 75%; }
.md-10-col { width: 83.333%; }
.md-11-col { width: 91.666%; }
.md-12-col{ width: 100%; }




 
}/*END MED DESKTOP*/





/* 	
================================================================
LARGE DESKTOP
================================================================  
*/

@media only screen and (min-width: 1500px) and (min-height: 950px) {








 
}/*END MED DESKTOP*/



/* 	
================================================================
PORTRAIT
================================================================  
*/

 
@media screen and (max-aspect-ratio: 6/7){




}/*END PORTRAIT*/


/* 	
================================================================
MOBILE LANDSCAPE HEIGHT
================================================================  
*/

@media only screen and (max-height: 500px) {



/* 	
================================================================
SLIDE SHOW PADDING
================================================================  
*/

.slide{
	padding:0 10px 0px;
}

.project-page-overlay{
	padding:10px;
}




 
}/*END MOBILE LANDSCAPE HEIGHT*/