html {-ms-touch-action:manipulation; touch-action:manipulation;} /* killing 300ms touch delay in IE: For lightbox */

/*****************/
/* Image Gallery */
/*****************/

body {overflow:hidden; background:#2a282b;}
ul, li {margin:0; padding:0;}
ul {width:100%;}

.column-left {position:fixed; width:300px; height:100%; height:100vh; top:0; left:0;}
#gallery-box {position:absolute; top:1.5em; left:300px; max-width:1500px; min-width:320px; width:calc(100% - 300px); height:calc(100% - 1.5em);
              margin:0; font:400 1em/1.25em 'Open Sans', sans-serif; overflow:hidden; overflow-y:auto; padding-left:2em;}

/* Tabs for the image gallery - checkbox hack */

input.tab {position:absolute; left:-9999px; opacity:0;}
input.tab + label {position:relative; left:0; top:0; margin:1.5em 2em 0 0; padding:0.5em 0; color:#b5b5b5; cursor:pointer; display:inline-block; text-align:center;
	-webkit-transition:color 0.3s; transition:color 0.3s; font-size:1.125em;}
input.tab + label:before {content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:#d94f5c;
	-webkit-transform:scale3d(0, 1, 1); -webkit-transition:-webkit-transform 0.1s;
	        transform:scale3d(0, 1, 1);         transition:-webkit-transform 0.1s; transition:transform 0.1s; transition: transform 0.1s, -webkit-transform 0.1s;
	}
input.tab:hover + label {color:#fff;}
input.tab:checked + label, 
input.tab:checked:hover + label {color:#d94f5c;}
input.tab:checked + label:before,
input.tab:checked:hover + label:before {
	-webkit-transform:scale3d(1, 1, 1); -webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration:0.3s;
	        transform:scale3d(1, 1, 1);         transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);         transition-duration:0.3s;
	 }

input#tab1:checked ~ div#t1 .masonry, input#tab2:checked ~ div#t2 .masonry, input#tab3:checked ~ div#t3 .masonry, 
input#tab4:checked ~ div#t4 .masonry, input#tab5:checked ~ div#t5 .masonry, input#tab6:checked ~ div#t6 .masonry, 
input#tab1:checked ~ div#t1 .room, input#tab2:checked ~ div#t2 .room, input#tab3:checked ~ div#t3 .room, 
input#tab4:checked ~ div#t4 .room, input#tab5:checked ~ div#t5 .room, input#tab6:checked ~ div#t6 .room {opacity:1; z-index:50;}

.tabc {max-width:1500px; min-width:320px; width:100%; position:relative; top:40px; left:0;}
.tabc .room,
.tabc .masonry {position:absolute; z-index:0; opacity:0;}
.tabc .masonry {top:60px; left:0; width:100%; padding:0; padding-right:1em; -webkit-transition:opacity 1s; transition:opacity 1s;}
.tabc .room {top:0; display:inline-block; color:#d94f5c; font:600 1.8125em 'Open Sans', sans-serif; -webkit-transition:opacity .5s; transition:opacity .5s;}

.tabc .masonry a.gr {display:inline-block; max-width:15.6%; margin:0 .5% .5% 0; overflow:hidden;
	/* Black&white filter, by Kurt Elster: https://ethercycle.com/blog/305 */
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
   -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); -webkit-filter: gray; filter: gray;
   }
.tabc .masonry a.gr:hover {-webkit-filter:none; -moz-filter:none; -ms-filter:none; filter:none;}
.tabc .masonry img {width:100%; border:0; margin:0; padding:0; outline:0; transition: transform .3s;}
.tabc .masonry img:hover {transform: scale(1.15);}

@media screen and (max-width: 1500px) {.tabc .masonry a.gr {max-width:18.8%;}}
@media screen and (max-width: 1280px) {.tabc .masonry a.gr {max-width:23.7%;}}
@media screen and (max-width: 1000px) {.tabc .masonry a.gr {max-width:32.0%;}}
@media screen and (max-width:  840px) {.tabc .masonry a.gr {max-width:48.0%;}}
@media screen and (max-width:  760px) {.tabc .masonry a.gr {max-width:32.0%;}}
@media screen and (max-width:  520px) {.tabc .masonry a.gr {max-width:48.0%;}}

@media screen and (max-width: 760px) {
   .tabc .masonry {padding:0 20px 20px 0;}
	.column-left {float:none; width:100%; height:6em;}
	#gallery-box {width:100%; top:6em; left:0; height:calc(100% - 6em);}
}
@media screen and (max-width: 420px) {
   input.tab + label {margin:1.5em 1em 0 0;}
}
@media screen and (max-width: 320px) {
	.column-left {height:120px;}
	#gallery-box {top:120px;}
}

/* Image Lightbox by Osvaldas Valutis https://osvaldas.info/image-lightbox-responsive-touch-friendly */

#imagelightbox	{cursor:pointer; position:fixed; z-index:10000; -ms-touch-action:none; touch-action:none;}

/* Activity indicator */

#imagelightbox-loading {width:2.5em; height:2.5em; background-color:#444; background-color:rgba(0,0,0,.5); border-radius:50%;
	position:fixed; z-index:10003; top:50%; left:50%; padding:0.625em; margin: -1.25em 0 0 -1.25em;
	-webkit-box-shadow:0 0 2.5em rgba(0,0,0,.75 ); box-shadow:0 0 2.5em rgba(0,0,0,.75 );
   }
#imagelightbox-loading div {width:1.25em; height:1.25em; background-color:#fff; border-radius:50%;
	-webkit-animation:imagelightbox-loading .5s ease infinite; animation:imagelightbox-loading .5s ease infinite;
	}
@-webkit-keyframes imagelightbox-loading {
		from {opacity:.5; -webkit-transform:scale(.75);}
		50%  {opacity: 1; -webkit-transform:scale(1);}
		to	  {opacity:.5; -webkit-transform:scale(.75);}
   }
@keyframes imagelightbox-loading {
		from {opacity:.5; transform:scale(.75);}
		50%  {opacity: 1; transform:scale(1);}
		to   {opacity:.5; transform:scale(.75);}
   }

/* Overlay */

#imagelightbox-overlay {background-color:#333; background-color:rgba(0,0,0,.7 ); position:fixed; z-index:9998; top:0; right:0; bottom:0; left:0;}

/* Close button */

#imagelightbox-close {width:2.5em; height:2.5em; text-align:left; background-color:#666; border-radius:50%; position:fixed; z-index:10002; top:2.5em; right:2.5em; border:0;
   -webkit-transition:color .3s ease; transition:color .3s ease; outline:0;}
#imagelightbox-close:hover,  #imagelightbox-close:focus {background-color:#111;}
#imagelightbox-close:before, #imagelightbox-close:after {width:2px; background-color:#fff; content:''; position:absolute; top:20%; bottom:20%; left:50%; margin-left:-1px;}
#imagelightbox-close:before {-webkit-transform:rotate( 45deg); -ms-transform:rotate( 45deg); transform:rotate( 45deg);}
#imagelightbox-close:after  {-webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}