/* @override http://osthood.de/themes/OHD_public/style.css */


/*
	OHD Theme 2.0
*/


/*	RESET
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}
img,
object,
embed {max-width: 100%;height:auto;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

input, select {vertical-align: middle;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
input:focus, textarea:focus, select:focus { outline: none;}

input { /* remove top input shadow */
-webkit-appearance: none;
-moz-appearance: none;
}

table {font-size: inherit; font: 100%;}

a:hover, a:active {outline: none;}
small {font-size: 85%;}
strong, th {font-weight: bold;}
td, td img {vertical-align: top;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0; border-radius: 0; font-family: 'Alegreya Sans', Arial;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; height: 0px; overflow: hidden;}
.clr:after { content: ""; display: table; clear: both;}
.cf:after {	content: ""; display: table; clear: both; }

/* prevent flickering on touch */
* {
	-webkit-tap-highlight-color:transparent;
}

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


/* -------------------------------------------------------------------------------*/



html, body {
	height: 100%;
	font-family: Arial, Verdana, sans-serif;
	font-size: 16px;
}

body {
	height: 100%;
	line-height: 155%;
	background: #212121;
	color: #FFF;
}



a {
	position: relative;
	color: #66BBDD;
	text-decoration: none;
}

a, input {
	transition: all 250ms ease-in-out;
}

a:visited {
	color: #66BBDD;
}

a:active {
	color: #66BBDD;
}

a:hover {
	color: #FFF;
}

img {
    transition: all 0.3s ease-in-out;
}



/* -------------------------------------------------------------------------------*/


.page-wrap {
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	overflow: hidden;


	AUS-background: rgba(0,0,0, .7); /*image overlay*/
}

-.page-bg {
	background: RED;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;

	background: url(images/bg_head.jpg) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
}


.container,
.container-fluid {
	position: relative;
	max-width: 1200px; /*1140*/
	margin: 0 auto;
	padding: 0 30px;
}

.container:before,
.container:after {
	content: "";
	display: table;
	clear: both;
}


.container-fluid {
	max-width: none;
	width: 100%;
	padding: 0;
}



/* ---------------- */




#header {
	display: flex;
	justify-content: center;
	align-items: center;

	text-align: center;
}

#header h1 {
	display: none;
}

#header .logo {
	padding: 3rem 0 2rem 0;
	width: 150px;
	max-width: 30vw;
	height: auto;
}

#header .logo img {
	height: auto;
}

#main {
	max-width: 980px;
	margin: 0 auto;

	padding: 2rem 0;
}


/* Index Page */

.gallery-title {
	text-align: center;
	padding: 0 0 2rem 0;
	color: #FFF;
}

.gallery-title span {
	font-weight: normal;
	opacity: .5;
}

.index-page .gallery-title {
	display: none;
}


.albums {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	background-color: transparent;

	margin-right: -10px;
	margin-left: -10px;
}


.album {
	position: relative;

	AUS_display: flex;

  flex: 0 1 auto;
	justify-content: center;
	align-items: center;


	width: 33.333%;
	padding: 0 10px;
	margin-bottom: 20px;
}


.inner {
	position: relative;
	overflow: hidden;
}

AUS.album:first-child {
	width: 100%;
	border: 2px solid red;
}


.album-title {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	pointer-events: none;

	background: rgba(0,0,0, .25); /*overlay*/
}

.album-title a {

	font-size: 1.2rem;
	display: inline-block;
	line-height: 1;
	padding: 6px 0;
	color: #FFF;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0,0,0, 0.9);
	background: transparent;

	border-bottom: 2px solid rgba(255,255,255, .0);
}

.album:hover .album-title a {
	border-color: rgba(255,255,255, 1);
	margin-bottom: 10px;

}


.album-thumb {
	width: 100%;
	height: 100%;
	background: #555;
	overflow: hidden;

	box-shadow: 0 16px 22px -18px rgba(1,1,1, .5);

}

.album-thumb img {
	display: block;
	width: 100%;
}

.album-thumb :hover img {
	transform: scale(1.1);

	/*
 -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

	*/
}



/* Album Page */


.gallery-title {

}


.gallery-images {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.gallery-image {
	position: relative;

    flex:1 1 auto;
	justify-content: center;
	align-items: center;


	width: 33.333%;
	padding: 0 10px;
	margin-bottom: 20px;

	overflow: hidden;
}


.gallery-image-thumb {
	width: 100%;
}

.gallery-image-thumb img {
	display: block;
	width: 100%;
}

.gallery-image-thumb:hover img {
	transform: scale(1.1);

	/*
 -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

	*/
}



/* Image Page */

.image-page .page-wrap {
	padding-top: 3rem;
}

.image-page #header {
	display: none;
}

.image-page #header .logo {
	max-width: 60px;
}

.single-image {
	margin: 0 0 3rem 0;
}

.single-image img {
	display: block;
	margin: 0 auto;
}



.img-nav {
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	text-transform: uppercase;

	margin: 0 auto;
	margin-bottom: 2rem;
	max-width: 400px;
}


.imgprevious,
.imgnext {
	flex: 1;
	padding: 1px;
}

.img-nav a {
	padding: 1rem 0;
	display: block;
	background: rgba(255,255,255, .15);
	text-align: center;
}

.img-nav a:hover {
	background: rgba(255,255,255, .1);
}

/* --- */



.pagelist {
	display: flex;
	justify-content: center;
	padding: 2rem 0;
	text-transform: uppercase;
}

.pagelist li {
	font-size: 0.85rem;
	font-weight: bold;
	white-space: nowrap;
	padding: 0 1rem;
}

.pagelist li.current a {
	color: #FFF;
}


#enableSorting {
	font-size: 0.9rem;
	text-align: center;
}


#albumTitleEditable:hover,
#imageTitleEditable:hover {
	color: #333;
	padding: 5px;
	border-radius: 3px;
}



/* FOOTER */

#footer {
	padding: 2rem 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
}


#footer a {
	color: #666;
}

.footer-login {
	color: ;
}

#footer .footer-login a {
	display: inline-block;
	margin:  0 0 1rem 0;
	background: #00D936;
	padding: 5px 20px;
	border-radius: 5px;
}

#footer .footer-login a:hover {
	background-color: #FFF;
}






/* @group ANIMATIONS */


/* ANIMATIONS
---------------------------------------------------------------------------------*/

/*  https://github.com/daneden/animate.css */


.animated {
  -webkit-animation-duration: 1s;
  		  animation-duration: 1s;

  -webkit-animation-fill-mode: both;
  		  animation-fill-mode: both;

  -webkit-animation-timing-function: ease-in-out;
 		  animation-timing-function: ease-in-out;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

}


@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}



@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}


@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

/* @end */



/* Media Queries

---------------------------------------------------------------------------------*/


@media screen and (max-width: 1158px) {
body:after {
	content: "<1158";
	position: fixed;
	top: 0;
	line-height: 1;
	padding: 5px;
	font-size: 12px;
	background: lawngreen;
	z-index: 1000;
	opacity: .8;
	color: #000;

	display: none; /* AN/AUS*/
}


}



@media screen and (max-width: 782px) {
body:after {
	content: "<782";
	background: TAN;
}

html, body {
	font-size: 13px;
}

.album {
	width: 49%;
}


.gallery-image {
	width: 49%;
}


}

@media screen and (max-width: 500px) {
body:after {
	content: "<500";
	background: GREEN;
}

.container {
	padding: 0 10px;
}


.albums,
.galler-images {
	margin-right: -5px;
	margin-left: -5px;
}

.album,
.gallery-image {
	padding: 0 5px;
	margin-bottom: 10px;
}

.album:first-child {
	width: 100%;
}




}