/* Friederike Hartung */
/* 2014 (c) Roman Fischer | portfolio.romanfischer.de */


body, html{
	width:100%;
	height:100%;
	padding:0;
	margin:0;

	font-family: 'Helvetica Neue', Helvetica, Verdana, Arial;
	font-weight:200;
	color:#fff2e5;
	overflow-x:hidden;

}

h1{

}

h2{

}

p{

}

a, a:visited{

	outline:none;
	text-decoration: none;
	color:#fff2e5;
}



#app{
	/*position:relative;
	width:100%;
	height:100%;
	min-width:1024px;*/
}


#bg, #bgblur{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:cover;
}


#bg, #bgblur, #bgpainting{

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;

}

#bgpainting{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-size:cover;

	display:none;

    /*background-size: 110%;
    background-position: -10px -10px;
    background-repeat:no-repeat;
    background-attachment:fixed;*/

    background-attachment:fixed;


	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;

    border:15px solid #282828;

    background-color:#222;

    cursor:none;

}

/*

#bg.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}*/

#bgblur{
	display:none;
	/*opacity:0;*/
}


#wrapper{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/*min-height:580px;*/
	/*float:left;*/
}

#header{
	display:table;
	width:100%;
	height:20%;
	min-height:120px;
	/*margin-left:6%;*/
	/*background:rgba(0,255,0,0.2);*/

	float:left;
}

#header-cell{
	display:table-cell;
	vertical-align: middle;
}


#header #logo{
	display:block;
	height:auto;
	margin-bottom:1.4%;
	margin-left:6%;
	position: relative;
}

#header #logo h1, #header #logo h2{
	color:#fff2e5;
	font-size:1.7em;
	font-weight:400;
	/*letter-spacing:0.08em;*/
	letter-spacing:0.19em;
	display:inline-block;
	height:auto;
	white-space: nowrap;
}

#header #logo h1{
	cursor:pointer;
	width:28.2%;
	width:36%;
	min-width: 350px;
}

#header #logo h2{
	display:none;
}

#painting-title{
	display:inline-block;
	vertical-align: top;
	position: relative;
	left:10%;
}

#header #menu{
	display:inline-block;
	height:auto;
	min-width:200px;
	white-space:nowrap;
	margin-left:6%;
}

#header #menu a{
	/*display:inline-block;*/
	text-transform: uppercase;
	margin-right:14%;
	font-size:0.9em;
	/*letter-spacing:0.08em;*/
	letter-spacing:0.2em;
	height:auto;
	padding-bottom:2px;
}

#header #menu a:last-child{
	margin-right:inherit;
}



.selected{
	border-bottom:1px solid #fff2e5;
}

.fullscreen{
	display:none;
}


#content{
	display:none;
	width:100%;
	height:60%;

	float:left;

}

#galerie{
	display:table;
	width:100%;
	height:100%;
}


.content-row{
	display:table-row;
	width:100%;
	height:100%;
}

.content-cell{
	display:table-cell;
	vertical-align: middle;
	text-align:right;
	position:relative;
	width:7.5%;
}

.content-cell.right{
	text-align:left;
}

.content-cell-inbetween{
	display:table-cell;
	vertical-align: middle;
	text-align:center;
	position: relative;
	/*background:#222;*/
	/*width:25%;*/
	width:28.5%;
}

.content-cell-middle{
	display:table-cell;
	vertical-align: middle;
	text-align:center;
	position: relative;
	width:28%;
}



#painting-info{
	text-align:left;
	width:70%;
	margin-left:26%;
	height:auto;

}

#painting-info h2{
	font-weight:400;
}

.technique, .size{
	display: block;
}

#painting-info h2, .technique, .size{
	margin-bottom:2%;
	letter-spacing: 0.1em;
}


#paintings{
	display: inline-block;
	width:100%;
	height:auto;
	white-space:nowrap;
	overflow: hidden;
	position: relative;

}

.imagehelper{
	width:100%;
	height:auto;
}

#mainImage{
	position:absolute;
	top:0;
	left:0;
	
	max-height:100%;
	overflow:hidden;

	width:100%;
	height:100%;

	cursor:pointer;

}

#mainImage img{
	display:inline-block;
	width:98%;
	height:auto;

	position:absolute;
	top:50%;
	left:50%;

	border:4px solid #fff2e5;
	-moz-border-radius: 4px;
	border-radius: 4px;


	-moz-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);


}

/*
#mainImage .horizontal{
	width:100%;
	height:auto;
}*/

.vertical{
	height:98% !important;
	width:auto !important;
}



#btn-left, #btn-right{
	display:inline-block;
	width:20%;
	min-width:14px;
	height:auto;
	cursor:pointer;
	opacity:0.8;
	filter:alpha(opacity=80);

    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

}

#btn-left:hover, #btn-right:hover{
	opacity:1;
	filter:alpha(opacity=100);
}

.btn-selected{
	opacity:1 !important;
	filter:alpha(opacity=100) !important;	
}

.deactivated{
	opacity:0.2 !important;
	filter:alpha(opacity=20) !important;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

}


.smallImage{
	display:inline-block;
	width:50%;
	height:auto;
	position:relative;
}

#leftfix{
	display:none;
}

#imgLeft, #imgRight{
	position: absolute;
	top:50%;
	left:50%;
	width:100%;
	height:auto;
	opacity:0;
	filter:alpha(opacity=0);

	-moz-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);


}


#imgLeft{
	/*display:none;*/
}

#imgMain{

}



#mainImageLeft{
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	cursor:pointer;
}

#mainImageRight{
	position:absolute;
	top:0;
	left:50%;
	width:50%;
	height:100%;
	cursor:pointer;
}


#imgRight{

}

#divLeft{

}

#divLeft, #divRight{
	position:absolute;
	display:inline-block;
	left:0;
	top:0;
	width:auto;
	height:auto;
	/*background:rgba(255,0,0,0.2);*/

	border:4px solid #fff2e5;
	-moz-border-radius: 4px;
	border-radius: 4px;

	display:none;

	z-index:1;

}

#divRight{
	opacity:0;
}

#divLeft img, #divRight img{
	height:auto;
}


#paginator{
	float:left;
	display:block;
	width:100%;
	text-align: center;
	height:auto;
	margin-top:1%;
}

#paginator-inside{
	position:relative;
	display:inline-block;
	width:28%;
	height:auto;
	/*letter-spacing:0.08em;*/
	letter-spacing:0.1em;
}

#btn-fullscreen{
	width:4%;
	cursor: pointer;
	position:absolute;
	top:0;
	right:0;
	opacity:0.8;
	filter:alpha(opacity=80);

	-moz-transform:translateY(-20%); /* Firefox 3.6 Firefox 4 */
	-webkit-transform:translateY(-20%); /* Safari */
	-o-transform:translateY(-20%); /* Opera */
	-ms-transform:translateY(-20%); /* IE9 */
	transform:translateY(-20%); /* W3C */


}

#btn-fullscreen img{
	width:100%;
	height:auto;
	border:none;
}

#btn-fullscreen:hover{
	opacity:1;
	filter: alpha(opacity=100);
}

.cursor-fullscreen{
	cursor:crosshair;
}

#btn-back img{
	width:4%;
	margin-right:2%;

	-moz-transform:translateY(17%); /* Firefox 3.6 Firefox 4 */
	-webkit-transform:translateY(17%); /* Safari */
	-o-transform:translateY(17%); /* Opera */
	-ms-transform:translateY(17%); /* IE9 */
	transform:translateY(17%); /* W3C */

}



#thumbnails{
	position:fixed;
	left:0;
	bottom:-12%;
	background:#282828;
	background-image:url(../img/thumbnails-bg.png);
	background-repeat:repeat-x;

	display:table;
	width:100%;
	height:12%;
	min-height:90px;
	text-align: center;

	z-index: 2;

	display:none;

}

#thumbnails-inside{
	display:inline-block;
	vertical-align: middle;
	margin-top:1%;
	width:80%;
	height:auto;
	overflow: hidden;

}


#thumbnail-container{
	display:inline-block;
	white-space:nowrap;
	width:auto;
	height:auto;

}

#btn-thumbnail-left, #btn-thumbnail-right{
	display:inline-block;
	vertical-align: middle;
	width:12px;
	margin-top:1%;
	cursor:pointer;

	display:none;

	opacity:0.8;
	filter:alpha(opacity=80);

}

#btn-thumbnail-left:hover, #btn-thumbnail-right:hover{
	opacity:1;
	filter:alpha(opacity=100);
}

#btn-thumbnail-left{
	margin-right:5px;
}

#btn-thumbnail-right{
	margin-left:5px;
}


.thumbnail{
	display:inline-block;
	width:24px;
	height:24px;
	opacity:0.4;
	cursor: pointer;
	vertical-align: top;

	border:3px solid #fff2e5;

	-moz-border-radius: 4px;
	border-radius: 4px;

}

.thumbnail img{
	width:100%;
	height:100%;
}

.thumbnail.active{
	opacity:1;

}






/* main */

#main{
	position:absolute;
	top:20%;
	left:0;
	bottom:0;
	width:100%;
	height:auto;
	display:none;

	
}

#main, #content, #thumbnails{
	min-width:1024px;

}

.main-inside{
	display:block;
	width:100%;
	background:#282828;
	background-image:url(../img/thumbnails-bg.png);
	background-repeat:repeat-x;

	height:auto;
	position:relative;
}

#main #photo{
	position:absolute;
	/*width:15.6%;*/
	width:11%;
	height:auto;
	top:0;
	left:50%;
	margin-left:-6%;
	background:#282828;
	/*border-radius: 50%;*/
	overflow:hidden;
	/*border:4px solid #282828;*/

	margin-top:3.4%;

	/*
	-moz-transform:translateY(-18%);
	-webkit-transform:translateY(-18%);
	-o-transform:translateY(-18%);
	-ms-transform:translateY(-18%);
	transform:translateY(-18%);
	*/



}

#main #photo img{
	width:100%;
	height:auto;
}

#main-table{
	display:table;
	width:100%;
}

.main-row{
	display:table-row;
	width:100%;
}

.first-row .main-cell{
	padding-top:3.4%;
}

.last-row .main-cell, #impressum .first-row .main-cell{
	padding-bottom:6%;
}



.main-cell-empty{
	display:table-cell;
	width:5.4%;
}

.main-cell{
	display:table-cell;
	width:39.2%;

	position:relative;
}



#main h2, #buy h2{
	font-size: 0.9em;
	/*letter-spacing: 0.08em;*/
	letter-spacing: 0.1em;
	font-weight:600;
	text-transform: uppercase;
	margin-bottom:4%;
}

#main p, #buy p{
	font-size:0.9em;
	letter-spacing:0.08em;
	line-height:1.8em;
	width:80%;
}

#main a, #main a:visited, #buy a, #buy a:visited{
	font-size:0.9em;
	letter-spacing:0.08em;
	line-height:1.8em;
	font-weight:600;	
}


#biografie .right h2{
	/*margin-left:18.2%;*/
	margin-left:16%;
}

/*
#biografie .right p{
	white-space:nowrap;
}
*/

#biografie p{
	white-space:nowrap;

	/*
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;*/

}

.emptyspace1{
	display:inline-block;
	width:20%;
}

.emptyspace2{
	display:inline-block;
	/*width:17%;*/
	width:20%;
}







.table{
	display:table;
	width:100%;
}

.table-row{
	display:table-row;
	width:100%;
}

.table-cell{
	display:table-cell;
	vertical-align: top;
}

.table-cell.left{
	width:20%;
}



#buy .table-cell, #biografie .table-cell{
	font-size:0.9em;
	letter-spacing:0.08em;
	line-height:1.8em;
}







/* Kontaktformular */

#kontakt-content{
	position:absolute;
	top:0;
	left:0;
	width:100%;

}


.form-message{
	display:inline-block;
	width:63.6% !important;
	height:auto;
	margin-left:10%;
	padding:0.4% 1.2% 0.4% 1.2%;
	background:#222;
	margin-bottom:1.8%;
	margin-top: 1.8%;
	color:#bb7435;
	border:1px solid #bb7435;

	padding:0 1.2% 0 1.2%;
	white-space:inherit !important;

	display:none;

}

#biografie .form-message{
	margin-top:-0.4%;
	margin-bottom: 1.2%;
}

.kontakt-message-fix{
	margin-bottom:4.8% !important;
}

.kontakt-message-fix2{
	margin-bottom:42.4% !important;
}



#kontaktformular{
	display:inline-block;
	vertical-align: top;
	width:63.6%;
	margin-left:10%;

}

#kontaktformular form{
	width:100%;
	margin-left:9.5%;
}

label, input[type=text], textarea, input[type=submit]{
	font-size:0.9em;
	letter-spacing:0.08em;
	line-height:1.8em;
	font-family: 'Helvetica Neue', Helvetica, Verdana, Arial;
	color:#fff2e5;
}


label{
	display:block;
	width:100%;
	height:auto;
	margin-bottom:2%;
	font-weight:600;
}

input[type=text]{
	display:block;
	width:100%;
	height:auto;
	border:none;
	background:#242424;
	padding:2%;
}

textarea{
	display:block;
	width:100%;
	height:60px;
	border:none;
	background:#242424;
	resize:none;
	padding:2%;
}



/*
input[type=submit]{
	display:inline-block;
	float:right;
	border:none;
	background:none;
	padding:2%;
	margin-right:-4%;
	font-weight:600;
	cursor:pointer;
}*/




#btn-send{
	/*margin-right:24%;*/
	margin-right:18%;
	cursor: pointer;
	float:right;
}






/* Footer */


#footer{
	position:fixed;
	left:0;
	bottom:0;
	background:#282828;
	display:table;
	width:100%;
	height:4%;
	min-height:40px;
	text-align: right;

	z-index:2;
}

#footer-cell{
	display:table-cell;
	vertical-align: middle;
}



.heightfix{
	position:relative !important;
	top:inherit !important;
	bottom:inherit !important;
	float:left !important;
}





#btn-impressum{
	margin-right:6%;
	text-transform: uppercase;
	color:#7e7974;
	font-weight:400;
	letter-spacing:0.1em;
	font-size:0.85em;
	padding-bottom: 2px;
}

.impressum-selected{
	border-bottom:1px solid #7e7974;
}




#social{
	position:absolute;
	top:0;
	right:6%;
	width:68px;
	white-space: nowrap;

}

.addthis_default_style .at300b, .addthis_default_style .at300bo, .addthis_default_style .at300m{
	padding:0 !important;

}







#preloading {
	position:absolute;
	top:0;
	left:-100px;
	width:100px;
	height:auto;
}

#preloading img{
	width:100%;
	height:auto;
}







#blender{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/blender-dark.png);
}



.available{
	display:inline-block;
	padding:4%;
	background:#20812d;
	font-size:0.9em;
	letter-spacing:0.2em;
	margin-top:4%;
	cursor:pointer;

	transition-duration: 0.3s;

	-moz-border-radius: 4px;
	border-radius: 4px;

	text-transform: uppercase;

}

.available.not{
	background:#c9350a;

	transition-duration: 0.3s;

	cursor:default;
}



#buy{
	position:absolute;
	top:0;
	left:-100%;
	width:30%;
	min-width:340px;
	height:100%;
	background:#282828;
	background-image:url(../img/thumbnails-bg-vertical.png);
	background-repeat:repeat-y;
	background-position: right top;

	display:none;
}

#buy-inside{
	display:block;
	padding:10%;
}

#buy h2{
	display:inline-block;
	width:97%;
}

#btn-close{
	display:inline-block;
	width:3%;
	vertical-align: top;
	opacity:0.4;
	filter:alpha(opacity=40);
}

#btn-close:hover{
	opacity:0.6;
	filter:alpha(opacity=60);
	cursor:pointer;
}


#buy-info{
	display:block;
	width:100%;
	height:auto;
	margin:4% 0 4% 0;
}

#buy p{
	width:100%;
}

.buy-left, .buy-right{
	display:inline-block;
	vertical-align: top;
	width:50%;
	height:auto;
}

.buy-left{
	width:30%;
}

.buy-right{
	width:70%;
}

#buy .table{
	display:table;
	width:90%;
	margin-left:10%;
	vertical-align: top;
}

#buy .table-cell.left {
    width: 40%;
}



#buy-thumbnail{
	display:inline-block;
	vertical-align: top;
	border:4px solid #fff2e5;
	width:100%;
	height:auto;

	-moz-border-radius: 4px;
	border-radius: 4px;
}

#buy-thumbnail img{
	width:100%;
	height:auto;
	vertical-align: top;
}

#buy form{
	display:block;
	width:100%;
	margin:4% 0 0 0;

}

#buy input[type=text]{
	display:inline-block;
	vertical-align: top;
	width:70%;
}

#buy input[type=submit]{
	display:inline-block;
	vertical-align: top;
	background:none;
	color:#fff2e5;
	padding:2% 0 2% 2%;
	font-weight:600;
	font-size:0.9em;
	/*letter-spacing:0.08em;*/
	letter-spacing:0.1em;
	border:none;
	cursor: pointer;
}

#buy .form-message{
	margin-left:inherit;
	opacity:0;
	width:96% !important;
	display:none;
}





/* Preloader */

#preloader{
	position:absolute;
	width:32px;
	height:32px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

#preloader-small{
	position:absolute;
	top:0;
	left:0;
	width:6%;
	height:auto;
	overflow:hidden;

	-moz-transform:translateY(-30%); /* Firefox 3.6 Firefox 4 */
	-webkit-transform:translateY(-30%); /* Safari */
	-o-transform:translateY(-30%); /* Opera */
	-ms-transform:translateY(-30%); /* IE9 */
	transform:translateY(-30%); /* W3C */


	display:none;
}

#preloader-small img{
	width:100%;
	height:auto;
}


.floatingCirclesG{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-moz-transform:scale(0.6);
	-webkit-transform:scale(0.6);
	-ms-transform:scale(0.6);
	-o-transform:scale(0.6);
	transform:scale(0.6);
}

.f_circleG{
	position:absolute;
	background-color:#c5baae;
	height:18%;
	width:18%;
	-moz-border-radius:50%;
	-moz-animation-name:f_fadeG;
	-moz-animation-duration:1.04s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:linear;
	-webkit-border-radius:50%;
	-webkit-animation-name:f_fadeG;
	-webkit-animation-duration:1.04s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:linear;
	-ms-border-radius:50%;
	-ms-animation-name:f_fadeG;
	-ms-animation-duration:1.04s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:linear;
	-o-border-radius:50%;
	-o-animation-name:f_fadeG;
	-o-animation-duration:1.04s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:linear;
	border-radius:50%;
	animation-name:f_fadeG;
	animation-duration:1.04s;
	animation-iteration-count:infinite;
	animation-direction:linear;
}

.frotateG_01{
	left:0;
	top:41%;
	-moz-animation-delay:0.39s;
	-webkit-animation-delay:0.39s;
	-ms-animation-delay:0.39s;
	-o-animation-delay:0.39s;
	animation-delay:0.39s;
}

.frotateG_02{
	left:12%;
	top:12%;
	-moz-animation-delay:0.52s;
	-webkit-animation-delay:0.52s;
	-ms-animation-delay:0.52s;
	-o-animation-delay:0.52s;
	animation-delay:0.52s;
}

.frotateG_03{
	left:41%;
	top:0;
	-moz-animation-delay:0.65s;
	-webkit-animation-delay:0.65s;
	-ms-animation-delay:0.65s;
	-o-animation-delay:0.65s;
	animation-delay:0.65s;
}

.frotateG_04{
	right:12%;
	top:12%;
	-moz-animation-delay:0.78s;
	-webkit-animation-delay:0.78s;
	-ms-animation-delay:0.78s;
	-o-animation-delay:0.78s;
	animation-delay:0.78s;
}

.frotateG_05{
	right:0;
	top:41%;
	-moz-animation-delay:0.91s;
	-webkit-animation-delay:0.91s;
	-ms-animation-delay:0.91s;
	-o-animation-delay:0.91s;
	animation-delay:0.91s;
}

.frotateG_06{
	right:12%;
	bottom:12%;
	-moz-animation-delay:1.04s;
	-webkit-animation-delay:1.04s;
	-ms-animation-delay:1.04s;
	-o-animation-delay:1.04s;
	animation-delay:1.04s;
}

.frotateG_07{
	left:41%;
	bottom:0;
	-moz-animation-delay:1.17s;
	-webkit-animation-delay:1.17s;
	-ms-animation-delay:1.17s;
	-o-animation-delay:1.17s;
	animation-delay:1.17s;
}

.frotateG_08{
	left:12%;
	bottom:12%;
	-moz-animation-delay:1.3s;
	-webkit-animation-delay:1.3s;
	-ms-animation-delay:1.3s;
	-o-animation-delay:1.3s;
	animation-delay:1.3s;
}

@-moz-keyframes f_fadeG{
0%{
background-color:#908579}

100%{
background-color:#c5baae}

}

@-webkit-keyframes f_fadeG{
0%{
background-color:#908579}

100%{
background-color:#c5baae}

}

@-ms-keyframes f_fadeG{
0%{
background-color:#908579}

100%{
background-color:#c5baae}

}

@-o-keyframes f_fadeG{
0%{
background-color:#908579}

100%{
background-color:#c5baae}

}

@keyframes f_fadeG{
0%{
background-color:#908579}

100%{
background-color:#c5baae}

}







/*
@media only screen and (max-height: 1024px){
	
	#main, #content, #thumbnails{
		min-width:inherit;

	}

}*/