/* kapsure */


.gallery {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
	white-space: nowrap;
	text-align: left;
	height: calc(90vh - 82px);
}

.work-img {
	height: 100%;
	margin: 0 8px 0 0;
}

.logo {
	width: 30%;
	max-width: 158px;
}

/*styling open close button*/
.button {
	display: inline;
	position: absolute;
	left: 6px;
	top: 12px;
}
.button a {
	text-decoration:none;
}
.btn-open:after {
	content: url(https://kapsure.com/images/logos/icon.png);
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;

}
.btn-open:hover:after {

}
.btn-close:after {
 	color: #333;
	content:"x";
	font-family: 'Helvetica', sans-serif;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;

}
.btn-close:hover:after {
	
}

#work {
	position: relative;
	top: -12px;
}

#credit {
	font-size: 16px;
	padding: 10 0 0 0;
	width: 82%;
	float: none;
	position: relative;
	bottom: 5px;
	text-align: center;
}

#homebutton {
    padding: 10 0 0 0;
    width: 40px;
    position: relative;
    bottom: 32px;
	float: right;
}

#gridbutton {
    padding: 10 0 0 0;
    width: 25px;
    position: relative;
    bottom: 32px;
	float: right;
}



body { font-family: 'Catamaran', sans-serif; color: #000; background-color: #fff; }


h1 { font-weight: normal; font-size: 30px;
	margin: 7px 0 -4px 3px;
	bottom: 24px;
}

#header {
	border-bottom: 0px solid #666;
	padding-top: 8px;
	padding-bottom: 12px;
}


#wrap { max-width: 96%; background-color: #fff; background-position: 0 100px; position: absolute; left: 0; width: 100%; height: 100%; float: none; clear: none;
	margin: auto;
	right: 0;
}
/*previous-next project links*/
#footer-left,
#footer-left a:link,
#footer-left a:hover,
#footer-left a:visited {
	color: #000;
	text-align: center;
	font-size: 16px;
	text-decoration: none;
	position: relative;
	float: left;
	bottom: 16px;
	visibility: hidden;
}

#footer-right,
#footer-right a:link,
#footer-right a:hover,
#footer-right a:visited {
	color: #000;
	text-align: center;
	font-size: 16px;
	text-decoration: none;
	position: relative;
	float: right;
	bottom: 16px;
	visibility: hidden;
}



/*//////////////////////////////////////////////////////////////////// 
// Media Queries
////////////////////////////////////////////////////////////////////*/


/* Firefox Hacks */

@-moz-document url-prefix() { 

#gallery {
	float: none;
	position: relative;
	top: -2px;
	padding-bottom: 20px;
}

#thumbnails {
	float: none;
	position: relative;
	top: 0 px;
}

 }
 
 /* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
	
#wrap { max-width:96%;}

}
 
  

/* iPad in Portrait and Landscape */

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

body { background-color: #fff; }

#wrap { max-width:96%;
	}
		
}


/* iPad Landscape */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
#work {
	position: relative;
	top: -12px;
}


h1 { font-weight: normal; font-size: 30px;
	margin: 9px 0 0 7px;
}

.thumbnail {
	text-shadow: green 0 0 0;
	border: 1px solid #f6f6f6;
	max-width: 125px;
	max-height: 125px;
}



/* iPad Portrait */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
{	
body { background-color: #fff; }	
}

/*layouts smaller than 600px, iPhone and mobiles*/
@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {

body { background-color: #fff; }	
}


#footer-left {visibility: hidden

}
#footer-right {visibility: hidden

}
	
/* ----------- iPhone 6 ----------- */

/* 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) { 
	  
	  .gallery {
		  height: calc(90vh - 200px);
		  visibility: hidden;
		  
	  }

}

/* 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 Landscape */
@media screen and (max-width: 480px) and (orientation: landscape) {





#header {
	border-bottom: 0px solid #666;
	padding-top: -10px;
	padding-bottom: 0px;
}

h1 { margin: 0 0 0px 30px;
}

}

/* iPhone Portrait */
@media screen and (max-width: 480px) and (orientation: portrait) {
	

#work {
	position: relative;
	top: -12px;
	height: 60%;
}
	
#footer-left {visibility: hidden

}
#footer-right {visibility: hidden

}




}