/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	color: #c0c0c0;
	font-size: 1em;
	line-height: 1.4;
	height: 100%;
	min-height: 100%;
	/* added 2018-04-09 
    background-color: #222;
    background: url(../img/DSC00961_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    min-height: 100%;*/
}


/*
 *  full screen backgroud
 */

body.responsive-image {
	background-color: #222;
	/* background: url(../img/DSC00961_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    min-height: 100%;
    background-attachment: fixed;
    background-image: url(../img/DSC00961_bg.jpg);
    background-image: url(../img/GHK_2018_07_28_DSC05551_untitled_6_09-43_Panorama1-Edit_09-43.jpg);*/
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
	width: 100%;
	min-height: 100%;
}

body.responsive-image.randbg.bg1 {
	background-image: url(../img/DSC00961_bg.jpg);
}

body.responsive-image.randbg.bg2 {
	background-image: url(../img/GHK_2018_07_28_DSC05551_untitled_6_09-43_Panorama1-Edit_09-43.jpg);
}


/* Retina display */


/*
@media screen and (min-width: 1024px) {
    /* .responsive-image {
        background-image: url('../img/DSC00961_bg.jpg');*/


/*
.responsive-image {
    background-image: url('../img/GHK_2018_07_28_DSC05551_untitled_6_09-43 Panorama1-Edit_09-43.jpg');
}
*/


}
*/
/* Desktop
@media screen and (min-wiui: url('../img/DSC00961_bg.jpg');
    }
} */

/* Tablet */

/*
@media screen and (min-width: 760px) and (max-width: 980px) {
    /*.responsive-image {
        background-image: url('../img/DSC00961_bg.jpg');*/

/*
.responsive-image {
    background-image: url('../img/GHK_2018_07_28_DSC05551_untitled_6_09-43 Panorama1-Edit_09-43.jpg');
}

}
*/

/* Mobile HD */

/*
@media screen and (min-width: 350px) and (max-width: 760px) {
    /*.responsive-image {
        background-image: url('../img/DSC00961_bg.jpg');*/

/*
.responsive-image {
    background-image: url('../img/GHK_2018_07_28_DSC05551_untitled_6_09-43 Panorama1-Edit_09-43.jpg');
}
*/

/*    .mobilke_hd {
transform:scale(.75);
-webkit-transform:scale(.750);
}*/

}
*/
/* Mobile LD */

/*
@media screen and (max-width: 350px) {
    .responsive-image {
        background-image: url('../img/DSC00961_bg.jpg');
    }
}
*/

/*.nav {
    position: fixed;
    left: 15%;
    top: 15%;
    width: 150px;
}*/
.nav {
	position: fixed;
	left: 5%;
	top: 15%;
}
object {
	width: 100%;
	display: block;
	height: auto;
	position: relative;
	padding-top: 0%;
}
.logo {
	position: fixed;
	right: 3%;
	top: 5%;
	z-index: 905;
}

/* link svg */
a.svg {
	position: relative;
	display: inline-block;
	width: 25%;
}
a.svg:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
object {
	width: 100%;
}

/* end */
.gallery_logo {
	position: fixed;
	right: 25px;
	top: .5%;
	z-index: 905;
}
.site-logo {
	width: 70px;
	height: auto;
	z-index: 910;
	/* display: block;
  float: right;*/
}
.site-logo object {
	width: 100%;
}
@media (min-width: 480px) {
	.site-logo {
		width: 85px;
	}
}
@media (min-width: 600px) {
	.site-logo {
		width: 95px;
	}
}

/*95*/
@media (min-width: 1140px) {
	.site-logo {
		width: 100px;
	}
}
@media (min-width: 1920px) {
	.site-logo {
		width: 120px;
	}
}
.gallery_site-logo {
	width: 105px;
	height: auto;
	z-index: 910;
}
.gallery_site-logo object {
	width: 100%;
}

/* make keyframes that tell the start state and the end state of our object */

/* note : this is causing navigation styling to disappear when window minimized < 1140px */

/*@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */

}

/*to { opacity:1; } }*/

/*@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */

}

/*to { opacity:1; } }
/*@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */

}

/*to { opacity:1; } }*/
.fade-in {
	opacity:0;
	/* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;
	/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration:1.5s;
	-moz-animation-duration:1.5s;
	animation-duration:1.5s;
}
.fade-in .one {
	-webkit-animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
	animation-delay: 0.1s;
}
.ghost-button {
	letter-spacing: 1px;
	color: #c0c0c0;
	background:;
	box-shadow: 0 0 0 1px #c0c0c0;
	border-radius: 2px;
	font-size: 12px;
	padding: 2px 6px;
	font-weight: normal;
	margin: 6px 6px;
	margin-right: 12px;
	display: inline-block;
	text-decoration: none;
	font-family: 'Open Sans',
	sans-serif;
	/*width: 150px;*/
	/*-webkit-transition: color 300ms, background 500ms, border-color 700ms; box-shadow: 700ms;
                transition: color 300ms, background 500ms, border-color 700ms; box-shadow: 700ms; */
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
.ghost-button {
	width: 110px;
}
@media (min-width: 480px) {
	.ghost-button {
		width: 115px;
		letter-spacing: 1px;
		padding: 2px 10px
	}
}
@media (min-width: 600px) {
	.ghost-button {
		width: 120px;
		letter-spacing: 1px;
		padding: 3px 15px
	}
}

/*120*/
@media (min-width: 1140px) {
	.ghost-button {
		width: 130px;
		letter-spacing: 2px;
		padding: 4px 20px
	}
}
@media (min-width: 1920px) {
	.ghost-button {
		width: 170px;
		letter-spacing: 3px;
		padding: 6px 30px
	}
}

/* em version */

/*.ghost-button {
 letter-spacing: .135em;    
 color: #c0c0c0;
 background: ;
 box-shadow: 0 0 0 .0625em #c0c0c0;
 border-radius: .125em;
 font-size: .75em;
 padding: .4em 1.875em;
 font-weight: normal;
 margin: .375em .375em;
 margin-right: .75em;
 display: inline-block;
 text-decoration: none;
 font-family: 'Open Sans', sans-serif;
  width: 75%;*/

/*-webkit-transition: color 300ms, background 500ms, border-color 700ms; box-shadow: 700ms;
                transition: color 300ms, background 500ms, border-color 700ms; box-shadow: 700ms; */

/*  -webkit-transition: all 200ms ease-out ;
    transition: all 200ms ease-out ;   
}*/
.ghost-button:hover,
.ghost-button:active {
	color:#fff;
	box-shadow: 0 0 0 .125em #fff;
	background:;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
.textcontainer {
	position: fixed;
	margin: 30px 10px 35px 0px;
	padding-left: 10px;
	right: 3%;
	bottom: 5%;
	font-size: .9em;
	text-align: left;
	letter-spacing: 6px;
	width: 250px;
	background: rgba(0, 0, 0, 0.2);
	border-radius:5px;
	color: #ffffff;
	z-index: -1;
}
div.container_center {
	height: 10em;
	padding: 50px 50px;
	position: relative;
	text-align:center;
	background: rgba(0, 0, 0, 0.2);
	border-radius:5px;
	color: #ffffff;
	width: 650px;
	z-index: 990;
}

/* 1 */
div.container_center p,
h2 {
	margin: 0;
	position: absolute;
	/* 2 */
	top: 30%;
	left: 50%;
	margin-right: -125px;
	/* 3 */
	transform: translate(-50, -50%)/* 4 */
	font-size: .9em;
	text-align: left;
	letter-spacing: 6px;
	z-index: 990;
}
summary::-webkit-details-marker {
	display: none
}
summary:after {
	position: fixed;
	right: 1%;
	bottom: 10%;
	border-radius: 5px;
	content: '\24D8';
	color: #fff;
	float: right;
	font-size: 1.6em;
	font-weight: bold;
	margin: 0px 10px 0 0;
	padding: 0;
	text-align: center;
	width: 20px;
	cursor: pointer;
}
details[open] summary:after {
	content: 'x';
	cursor: pointer;
}

/*
 * A better looking default horizontal rule
 */
div.footer,
div.footer_home {
	position: absolute;
	height 15px;
	padding-top:15px;
	padding-bottom:0px;
	bottom: 0px;
	width: 100%;
	font-size: .68em;
	text-align: center;
	color: #707070;
	z-index: 910;
}
div.footer_home {
	color: #d0d0d0;
}
div.footer.background {
	background-color: #222222;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
#juicebox-container {
	/* width:100%;
    height:100%;*/
	margin: 0px auto;
	background-color: #222222;
}
#juicebox-container-full {
	/* width:100%;
    height:100%;*/
	margin:0px auto;
	background-color: #222222;
	position: block;
	/*
	position: absolute;
	top: 0px;
	left: 0px;*/
}
#juicebox-container-center {
	/* width:100%;
    height:100%;*/
	margin: 0px auto;
	background-color: #222222;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
	resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */
.hidden {
	display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
	content: " ";
	/* 1 */
	display: table;
	/* 2 */
}
.clearfix:after {
	clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/*@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */

}
*/ @media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
	/* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
	*,
	*:before,
	*:after,
	*:first-letter,
	*:first-line {
		background: transparent !important;
		color: #000 !important;
		/* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
		box-shadow: none !important;
		text-shadow: none !important;
	}
	a,
	a:visited {
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	/*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
	a[href^="#"]:after,
	a[href^="javascript:"]:after {
		content: "";
	}
	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	/*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
	thead {
		display: table-header-group;
	}
	tr,
	img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}
	h2,
	h3 {
		page-break-after: avoid;
	}
}