/* site styles */

@import url("//hello.myfonts.net/count/2fe747");

  
@font-face {font-family: 'Neue Haas';src: url('2FE747_0_0.eot');src: url('2FE747_0_0.eot?#iefix') format('embedded-opentype'),url('2FE747_0_0.woff2') format('woff2'),url('2FE747_0_0.woff') format('woff'),url('2FE747_0_0.ttf') format('truetype');}
 

body, body * {
    margin: 0;
    padding: 0;
    font-family:"Neue Haas"; 
    font-weight:600; 
    font-style:normal;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
    font-weight: normal;
}

body {
	padding-bottom: 100px;
}

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

a:hover, a:active {
	color: #1E90FF;
}

#loader {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url("/img/loading.gif");
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;
}

.home.is-loading #loader {
    display: block;
}

#header {
	text-align: center;
	padding: 20px 0;
	margin: 40px 0;
}

#header p, #header.toggled h1  {
	display: none;
}
#header.toggled p, #header h1 {
	display: block;
}

#content {
    opacity: 0;
    text-align: center;
}
.showing-images .images { display: inline-block; }
.project {
    margin: 0 0 60px;
    display: inline-block;
	padding: 30px;
	vertical-align: top;
}

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}

.swipe:hover {
  cursor:url("/img/right.png"), auto;
}

.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  position: relative;
  width: 100%;
}

.swipe-wrap > div img{
  display: block;
}

.counter {
	list-style: none;
	margin-top: 6px;
}

.counter li {
	margin: 0;
	display: inline;
	padding: 2px;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 1px;
}

.counter li:hover {
	cursor: pointer;
	color: #1E90FF;
}

.counter li.on {
	color: #1E90FF;
}

/* media queries */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

	body {
		width: 100%;
		max-width: 100%;
	}
	
	.swipe {
		width: 320px!important;
	}

    .swipe img {
    	width: 320px;
    	height: auto;
    }
    
    .project {
    	padding: 30px 0;
    }
    
    .project.w_600 {
    	margin-top: 40px;
    }
    
    .project.w_700 {
    	margin-top: 40px;
    }
    
    .project.w_900 {
    	margin-top: 40px;
    }
    
    #content {
        margin-top: -40px;
    }
    
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

	body {
		width: 100%;
		max-width: 100%;
	}
	
	.swipe {
		width: 320px!important;
	}

    .swipe img {
    	width: 320px;
    	height: auto;
    }
    
    .project {
    	padding: 30px 0;
    	margin-bottom: 40px;
    }
    

}

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

	
	.swipe {
		width: 700px!important;
	}

    .swipe img {
    	width: 700px;
    	height: auto;
    }
    
    .project {
    	margin-bottom: 40px;
    }

}

/* utility */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}