/*
Theme Name: Claudia Hansen Photography
Author: Johannes Felscher
Version: 1.0
*/

@import url(https://fonts.googleapis.com/css?family=Syncopate:400,700);


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}




* {
	outline: 0;

	-webkit-tap-highlight-color: rgba(0,0,0,0);

	-webkit-overflow-scrolling: touch;

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

	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}


body, html {
	width:100%;
	height: 100%;



	padding:0;
	margin:0;

	font-family: Syncopate, Helvetica, sans-serif;
	font-weight: 400;
	font-size:12px;

	text-transform: uppercase;

	overflow-y: hidden;
	overflow-x: visible;

	overflow: hidden;

}

body {
	max-width: 1440px;
	margin: 0 auto;

	min-height: 450px;

	background-color: #fff;

	-webkit-transition: background 1s; 
	-moz-transition: background 1s; 
	-o-transition: background 1s; 
	-ms-transition: background 1s; 
	transition: background 1s; /* custom */

}


/*HEADERS*/
h1 {
	color: #ccc;
	
	text-align: center;
	display: block;
	margin:0 auto;
	font-weight: 400;
	/*background: #fff;*/
}
	h1 span {
		-webkit-transition: color 2s;
		-moz-transition: color 2s;
		-o-transition: color 2s;
		-ms-transition: color 2s;
		transition: color 2s;
	}

	h1 span.mainTitle {
		font-size: 56px;
		display: block;
		font-weight: 700;
	}

	h1 span.subtitle {
		font-weight: 400;
		font-size: 18px;
		color:#aaa;
	}


	.photography h1 span {
		color: #dca320;
	}
	.music h1 span {
		color: #006695;
	}
	.writings h1 span {
		color: #489b2b;
	}


span.divider {
	padding-left: 1px;
}


header {
	height: 60%;
	/*background: #f90;*/
	position: relative;
	z-index: 20;
}
	header > div {
		position: absolute;
		top:50%;
		left:0;
		right: 0;
		text-align: center;
		margin-top: -40px;
	}

a.studioLink {
	position: absolute;
	top:10px;
	right: 10px;
	color: #ccc;
	font-weight:400;
}
	a.studioLink span {
		/*color: #aaa;*/
	}

	div.main {
		height: 40%;
		position: relative;
		white-space: nowrap;
		font-size: 0;
	}
		div.main > a {
			width: 32.67%;
			top: 0%;
			height: 100%;
			display: inline-block;
			vertical-align: top;
			position: relative;
			overflow: visible;

			-webkit-transition: all .6s cubic-bezier(0.000, 1, 0.180, 1), background; /* older webkit */
			-webkit-transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), background; 
			-moz-transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), background; 
			-o-transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), background; 
			-ms-transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), background; 
			transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), background; /* custom */

		}

			div.main > a.photography {
				margin-right: .5%;
				border-radius: 0 20px 0 0;
			}

			div.main > a.music {
				border-radius: 20px 20px 0 0;
				margin: 0 .5% 0 .5%;
			}

			div.main > a.writings {
				border-radius: 20px 0 0 0;
				margin-left: .5%
			}

			div.main > a.notHovered {
				width: 24%;
			}

			div.main > a.hovered {
				top:-30%;
				height: 130%;
				width: 50%;
				cursor: pointer;
			}

			div.main > a.clicked {
				background: none !important;
			}

			div.main div.label {
				position: absolute;
				top:-20px;
				left:0;
				text-align: center;
				width: 100%;
				font-size: 16px;
				z-index: 10;
				font-weight: 700;
			}
				div.main a.hovered div.label {
					font-size: 24px;
					top:-30px;
				}

				div.main a div.label.superLabel {
					position: fixed;
					top:30%;
					left:0;

					z-index: 100;

					color: #fff;

					font-size: 64px;
					line-height: 64px;

					margin-top: -32px;

				}

			div.main > a > div.circle {
				background: #fff;
				width:250px;
				height: 250px;
				position: relative;
				top:50%;
				left:;
				border-radius: 50%;
				margin: -125px auto 0 auto;
				overflow: hidden;
				text-align: center;
				border:5px solid;

				-webkit-box-sizing: content-box;
				-moz-box-sizing: content-box;
				-ms-box-sizing: content-box;
				-o-box-sizing: content-box;
				box-sizing: content-box;

				/*-webkit-transition: all .6s cubic-bezier(0.000, 1, 0.180, 1); /* older webkit */*/
				-webkit-transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), left 0, top 0, margin 0; 
				-moz-transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), left 0, top 0, margin 0; 
				-o-transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), left 0, top 0, margin 0; 
				-ms-transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), left 0, top 0, margin 0; 
				transition: all .6s cubic-bezier(0.000, 1.595, 0.180, 1.650), left 0, top 0, margin 0; /* custom */

			}
				div.main > a.hovered:not(.clicked) > div.circle {
					-webkit-transform:scale(1.25);
					-moz-transform:scale(1.25);
					-o-transform:scale(1.25);
					-ms-transform:scale(1.25);
					transform:scale(1.25);
				}

				div.main a.clicked div.circle {
					position: fixed;
					top:60%;
					left:50%;

					margin-left: -125px;
				}

				div.main a.photography div.circle {
					border-color: #f4e3bc;
				}

				div.main a.music div.circle {
					border-color: #b2d1df;
				}

				div.main a.writings div.circle {
					border-color: #c8e1bf;
				}

			div.main a.photography {
				background: #dca320;
				color: #dca320;
				/*width: 31.33%;*/
				/*margin-right: 2%;*/
				position: relative;
			}
				div.main div.circle img {
					width: 160px;
					display: inline-block;
					margin-top: 120px;
					z-index: 0;

				}

					div.main a.music div.circle img {
						width: 120px;
						margin-top: 90px;
					}

					div.main a.writings div.circle img {
						width: 100px;
						margin-top: 145px;
					}

				div.main a.hovered img {
					-webkit-transform: scale(1.4);
					-moz-transform: scale(1.4);
					-o-transform: scale(1.4);
					-ms-transform: scale(1.4);
					transform: scale(1.4);
				}

					div.main a.photography.hovered div.circle img {
						margin-top: 60px !important
					}
					div.main a.music.hovered div.circle img {
						margin-top: 60px !important
					}
					div.main a.writings.hovered div.circle img {
						margin-top: 120px !important
					}

			div.main a.music {
				background: #006695;
				color: #006695;
			}

			div.main a.writings {
				background: #489b2b;
				color: #489b2b;
				/*width: 31.33%;*/
				/*margin-left: 2%;*/
			}


@media screen and (min-width: 1441px) {

	div.main > a.photography {
		border-radius: 20px 20px 0 0;
	}

	div.main > a.music {
		border-radius: 20px 20px 0 0;
	}

	div.main > a.writings {
		border-radius: 20px 20px 0 0;
	}

}



@media screen and (max-width: 1140px) {


	div.main > div.photography > div.circle > img {
		width: 120px;
		margin-top: 100px;
	}

	div.main > div.music > div.circle > img {
		width: 100px;
		margin-top: 60px;
	}

	div.main > div.writings > div.circle > img {
		width: 100px;
		margin-top: 95px;
	}
}

@media screen and (max-width: 1140px), (max-height: 600px) {

	body {
		overflow-y: auto;
	}

	div.main > a > div.circle {
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-o-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
	}
}









@media screen and (max-width: 800px)  {

	header {
		height: 25%;
	}


	a.studioLink {
		display: block;
		width: 100%;
		text-align: center;
	}

	h1 {
		margin-top: 15px;
	}

	h1 span.mainTitle {
		font-size: 32px;
	}
	h1 span.subtitle {
		font-size: 12px;
	}

	div.main {
		height: 75%;
		position: relative;
		white-space: normal;
		overflow: hidden;
	}
	div.main > a {
		width: 100%;
		display: inline-block;
		width: 100%;
		margin:0;
		height: 33.5%;
		top:0;
		white-space: normal;
		margin:0 !important;
		border-radius: 0 !important;
	}
	div.main a div.label {
		top:50%;
		color: #fff;
		right: 10px;
		left:auto;
		text-align: right;
	}
		div.main a div.label.superLabel {
			font-size: 24px;
			position: fixed;
			top: 40%;
			left:0;
			/*padding-right: 10px;*/
			margin-top: -25px;
			text-align: center;
			/*padding-left: 140px*/
		}

	div.main a div.circle {
		left: -40px;
		margin-left: 0;

		-webkit-transform: scale(0.4);
		-moz-transform: scale(0.4);
		-o-transform: scale(0.4);
		-ms-transform: scale(0.4);
		transform: scale(0.4);
	}

		div.main a.clicked {
			position: fixed;
			left:0;
			top:10%;
			margin-top: -125px;
		}

}



@media screen and (max-width: 420px) {

	div.main {
		height: 80%;
	}

	h1 {
		margin-top: 20px;
	}

	h1 span.mainTitle {
		font-size: 20px;
	}

	header {
		height: 20%;
	}

	div.main a div.label {
		font-size: 12px;
	}

	div.main a div.circle {

		left:-70px;

		-webkit-transform: scale(0.35);
		-moz-transform: scale(0.35);
		-o-transform: scale(0.35);
		-ms-transform: scale(0.35);
		transform: scale(0.35);
	}

	div.main a div.label.superLabel {
		font-size: 16px;
		padding-left: 120px
	}
		div.main a.clicked div.label {
			padding-left: 0;
		}


	a.studioLink {
		top:3px;
		font-size: 9px;
	}
}