/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */
/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	/*-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;*/
	/*border:  5px solid #fff;*/
	/*left: -5px;*/
	background: #fff;
	
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
/*	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;*************************************/            
}

.bx-wrapper .bx-next { 
	/*right: 10px;
	background: url(images/navRightB.png) no-repeat 0 0;*/
	/* the following was moved from .bx-controls-direction a */
	/*position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 75px;
	height: 75px;
	text-indent: -9999px;
	z-index: 9999;         */
	/*background-color: red;*/
}

.bx-wrapper .bx-next { 
background: url(images/arrow4.svg) no-repeat;
background-position: 95% 50%;
background-size: 60px 60px;
/* the following was moved from .bx-controls-direction a */
	position: absolute;
	
	width: 100%;
	height: 100%;
	z-index: 9999;
	border:none;
	opacity: 0;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	/*background-position: -43px 0;*/
	opacity: 0;
}

.bx-wrapper .bx-controls-direction a {
	/*position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
	background-color: red;*/
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}


/*************************/

.project{
	width: 100%; 
	position: relative; 
	padding:0px; 
	margin: 0px;
}



/* Project images */
.did1 {
	background:url(images/did_teaser.jpg) no-repeat center center;
}

.did3 {

	background:url(images/did_idmockup.jpg) no-repeat center center;
}
.did4 {

	background:url(images/did_book_cover.jpg) no-repeat center center;
}
.did5  {

	background:url(images/did_book_spreads.jpg) no-repeat center center;
}
.did6  {

	background:url(images/did_site.jpg) no-repeat center center;
}



.ed0 {
	background:url(images/ed_book3_o.jpg) no-repeat center center;
}
.ed1 {
	background:url(images/ed_book1.jpg) no-repeat center center;
}
.ed2 {

	background:url(images/ed_book2.jpg) no-repeat center center;
}
.ed3 {

	background:url(images/ed_book0.jpg) no-repeat center center;
}




.tc1 {
	background:url(images/tc100_blank.jpg) no-repeat center center;
}
.tc2 {
	background:url(images/tc100_home.jpg) no-repeat center center;

}
.tc3 {
	background:url(images/tc100_nickcups.jpg) no-repeat center center;

}
.tc4 {
	background:url(images/tc100_buy.jpg) no-repeat center center;

}
.sb1 {
	background:url(images/sb_1.jpg) no-repeat center center;
}
.sb2 {
	background:url(images/sb_2.jpg) no-repeat center center;

}
.sb3 {
	background:url(images/oc_someone.jpg) no-repeat center center;

}
.sb4 {
	background:url(images/oc_zoom.jpg) no-repeat center center;

}


.ttg1 {
	background:url(images/ttg_2.jpg) no-repeat center center;
}
.ttg2 {
	background:url(images/ttg_4.jpg) no-repeat center center;
}
.ttg3 {

	background:url(images/ttg_3.jpg) no-repeat center center;
}
.ttg4 {

	background:url(images/ttg_1.jpg) no-repeat center center;
}
.lol1	{
	background:url(images/lol_logo.jpg) no-repeat center center;
}
.lol2	{
	background:url(images/lol_1.jpg) no-repeat center center;
}
.lol3	{
	background:url(images/lol_banner.jpg) no-repeat center center;
}

.rt1	{
	background:url(images/rt1.jpg) no-repeat center center;
}
.rt2	{
	background:url(images/rt2.jpg) no-repeat center center;
}
.rt3	{
	background:url(images/rt3.jpg) no-repeat center center;
}
.rt4	{
	background:url(images/rt4.jpg) no-repeat center center;
}
.rt5	{
	background:url(images/rt5.jpg) no-repeat center center;
}
.rt6	{
	background:url(images/rt6.jpg) no-repeat center center;
}
.rt7	{
	background:url(images/rt7.jpg) no-repeat center center;
}
.tbw1	{
	background:url(images/tbw1.jpg) no-repeat center center;
}
.tbw2	{
	background:url(images/tbw2.jpg) no-repeat center center;
}
.tbw3	{
	background:url(images/tbw3.jpg) no-repeat center center;
}
.fkt1	{
	background:url(images/fkt1.jpg) no-repeat center center;
}
.fkt2	{
	background:url(images/fkt2.jpg) no-repeat center center;
}
.mar1	{
	background:url(images/mar1.jpg) no-repeat center center;
}
.mar2	{
	background:url(images/mar2.jpg) no-repeat center center;
}
.obere1	{
	background:url(images/obere1.jpg) no-repeat center center;
}
.obere2	{
	background:url(images/obere2.jpg) no-repeat center center;
}
.swt1	{
	background:url(images/swt1.jpg) no-repeat center center;
}
.swt2	{
	background:url(images/swt2.jpg) no-repeat center center;
}
.swt3	{
	background:url(images/swt3.jpg) no-repeat center center;
}
.boxr1	{
	background:url(images/boxr1.jpg) no-repeat center center;
}


/* Bounding box for project slider*/
.slidercontainer {width: 100%; height: 100%; background-color: #fff; position: relative;float: left; z-index: 999}
.slider {margin: auto;}
.bx-wrapper {z-index: 999}

.aspect {
	height: 600px; //important for framing, 
	width:1100px; 
	float: none; 
	list-style: none; 
	padding:0px; 
	margin:0px; 
	background-size: cover;  //important for framing
	margin: 20px;
}
.project_title {
	font-weight: bold;
		margin: 10px;

}.project_desc {
	margin: 10px;
}


.welcome_wrapper {
	z-index: 1000;
		width: 100%;
/*	background-color: black;
*/	position: relative;
	float: left;
		padding-bottom: 80px;

}

.welcome {
	padding-top: 50px;
	padding-bottom: 80px;
/*	background-color: #000;
*/	position: relative;
	width: 100%;
	margin: 0px;
	z-index: 1000;
	color:#000;
	//*font-size:  8vw;
*//

}
.dot {

	width: 40%;
	height: 40%;
	background: url(images/dot.svg) no-repeat center center;
	position: absolute;
bottom: 40px;	
right:40px;
	z-index: 999999;
		-webkit-transition: height 2s; /* Safari */

    transition: height 2s;

}
.dot:hover {
height: 100%}


.footer {
	background: url(images/isaac_roethe3.jpg) bottom right;
	background-size: 870px 580px;
	background-repeat: no-repeat;
	position: relative;
	float: left;
	height: 500px;
	width: 100%;
	z-index:1;		
}



a, .contact p, .cv p a {
	color: #222; /*same color*/
	line-height: 1.4em;
	text-decoration: none;
}

a {
	border-bottom: solid 1px #03E4F9;
	/*border-bottom: solid 1px #06A36A;*/
	/*border-bottom: solid 1px #E6BC01*/
}

a:hover, .footer a {
	border-bottom: solid 3px #03E4F9;
}
.cv p a, .contact p a, .contact p, h1 a {
	color: #000
}
.footer a {
	border-bottom: solid 3px #ccc;
}
.footer a:hover {
	border-bottom: solid 3px ;
}
.contactend .contact a {

		border-bottom: solid 1px #888;

}


body {
	margin: 0px; 
	padding:0px; 
	line-height: 1.4;
	/*font-family: 'Open Sans', helvetica, sans; */
	font-family: 'IBM Plex Sans', helvetica, sans; 
	webkit-font-smoothing: antialiased;
	background-color: white;
	font-weight: 300;

}
.primaryitalic {
	/*font-style: italic;*/
}
.secondarytext {
	/*font-family: 'Noto Serif', serif;*/
	font-weight: 700;
	font-style: normal;
	color:#000;

	/*color: #3DE1FD;*/
}
/*.me {
	background: url(images/isaac_roethe3.jpg) bottom right;
	background-size: 870px 580px;
	background-repeat: no-repeat;
	width: 100%;
	height: 500px;
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 1;
}
*/



.bx-wrapper {margin-bottom: 0px; margin-top: 0px;}

.bx-controls {position:absolute; width:100%; height:100%; top: 0px}

.name {width:20%; 
	position:relative; 
	float:left; 
	color: #000;
	font-weight: 800;
}
.about {
	width:50%; 
	position:relative; 
	float:left; 
	padding:0 0 .3em 0; 
	z-index:2;
}

.message{
	color: #aaa;
}

p, h1 {
	font-size: 1em; 
	line-height: 1.4em;
	padding: 0px; 
	margin: 0px;
}
.follow {
	margin-top: 1.2em;
}
h1, h1 a {font-weight: 800;}

.contact_footer {
	background: none; 
	padding: 0px; 
	margin:0px; 
	z-index:998;
}

.about_footer {
	position:relative;
	float: left; 
	/*bottom:40%; */
	background: none; 
	width:100%; 
	z-index:998; 
	margin-top:200px;
}
.name_footer {z-index: 999}

/* to change for different resolutions
*/




/* widen .about width */
@media only screen and (max-width : 4000px) {
	.welcome {
		/*background-*/
		max-width: 900px;
		margin: auto;
	}
	.name {
		padding-left:15%; 
		width:20%; 
	}
	.contact {
		padding-left: 35%;
		width: 30%;
		margin-top: 30px;
		position: relative;
		float: left;
	}
	.contact_footer {
		padding: 0;
		margin:0;
		width:60%;
		
	}
	.about {
		padding-left:0%;
		width:50%; 
		padding-top: 0px;
	}
	.cv {
		padding-left:0%;
		padding-top: 30px;
		position: relative;
		float: left;
	}
}
@media only screen and (min-width : 1300px) {
	.welcome {
		max-width: 1100px;
	}
	.contact {
		padding-left: 20%;
	}
	.name {
		padding-left: 0;
	}
	body, p, h1, a {
		font-size: 1.2em !important; 
		line-height: 1.4em;
		padding: 0px; 
		margin: 0px;
	}
}


@media only screen and (min-width : 1100px) {
	.aspect {
		height: 600px;
	}
	.slider {
		width: 1100px;
	}
	.dot {
		right: 0px;
	}
}

@media only screen and (max-width : 1040px) {
	.name_footer {
		width: 85%; 
		
		margin-bottom: 30px;
	}
	.contact_footer {
		background: none;
		padding: 0 0 0 15%;
	}
}

@media only screen and (max-width : 900px) {
	.aspect {
		height:500px;
	}
}

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

	.name {
		padding-left:10%; 
		width:25%; 
	}
	.name_footer {
		width: 85%;
	}
	.contact {
		padding-left: 35%;
		width: 30%;
		margin-top: 30px;
		position: relative;
		float: left;
	}
	.contact_footer {
		background: none;
		padding-left: 10%;
		margin-top: 0px;
		width:60%;
	}
	.about {
		padding-left:0%;
		width:50%; 
		padding-top: 0px;
	}
	.cv {
		padding-left:0%;
		padding-top: 30px;
		position: relative;
		float: left;
	}
	
}


@media only screen and (max-width : 770px) {
	.footer {
	background: url(images/isaac_roethe3.jpg) bottom right;
	background-repeat: no-repeat;
	background-size: 750px 500px;
	}
}
@media only screen and (max-width : 700px) {
	.footer {
			background-repeat: no-repeat;
			background-size: 600px 400px;
	}
	.aspect {
		height:400px;
	}

}
@media only screen and (max-width : 640px) {
	.footer {
			background-repeat: no-repeat;

	background-size: 450px 300px;
	}
}
/* widen .about width */
@media only screen and (max-width : 650px) {
	.welcome {
		/*background-*/
		display: inline-block;
	}
	.name {
		padding-left:15%; 
		width:20%; 
	}
	.name_footer {
		width: 85%;
	}
	.contact {
		padding-left: 15%;
		width: 40%;
		margin-top: 30px;
		position: relative;
		float: left;
	}
	.contact_footer {
		margin: 0;
		width: 60%;
	}
	.about {
		padding-left:15%;
		width:60%; 
		padding-top: 50px;
	}
	.about_project {
	padding-top: 0px; 
	}
	.cv {
		padding-left:0%;
		width:40%; 
		padding-top: 30px;
		position: relative;
		float: left;
	}
}
@media only screen and (max-width : 550px) {
	.about_footer {
		margin-top: 80px;
	}
}

/* iPhone vertical zone */
@media only screen and (max-width : 430px) {
	body, p, h1 {
		font-size: .95em;
	}
	.welcome {
		/*background-*/
		display: inline-block;
	}
	.name {
		padding-left:10%; /**/
		width:90%; 
	}
	.contact {
		padding-left: 10%; /**/
		width: 90%; /**/
		margin-top: 30px;
		position: relative;
		float: left;
	}
	.about {
		padding-left:10%;  /**/
		width:75%; 
		padding-top: 50px;
		position: relative;
	}
	.about_project {
	padding-top: 0px; 
	}
	.about_footer {
		margin-top: 40px;
	}

	.cv {
		padding-left:10%; /**/
		width:40%; 
		padding-top: 30px;
		position: relative;
		float: left;
	}
	.contact_footer {
		padding-left: 10%;
		margin: 0;
	}
	.aspect {
		height:300px;
	}
}
/* reduce margin left!!!!!!!!! */
@media only screen and (max-width : 360px) {
	.name, .contact, .contact_footer, .about, .cv {
		padding-left:6%; /**/
	}
}

@media 
(-webkit-min-device-pixel-ratio: 2) {
	body, p, h1, a {
		font-size: 1em; 
		line-height: 1.5em;
		padding: 0px; 
		margin: 0px;
	}
	.contact a, .cv a {
		line-height: 1.4em;
	}
}

.contact_footer a {
	color: black;
}

.welcome, .welcome-wrapper {

	z-index: 999;
}

.name_project {
	height: 1px;
}


/*
.welcome_wrapper, .welcome, .name, .about {
	background-color: white;
	color:black;
}
.slidercontainer {
	background-color: #777;
}*/










/* macbook ----------- 
@media only screen and (min-width : 1020px) {
	.name {
		padding-left: 0:;
		margin-left:20%; 
		width:20%;
	}
	.about {
		padding-left: 0:;
		margin-left:0%; 
		width:40%;
	}
	.aspect {
		height: 500px;
	}
	.slider {
		width:50%;
	}
}
@media only screen and (min-width : 1260px) {
.aspect {height: 600px;}
.slider {width:750px;}
}

*/



/*iPhone portrait 
@media only screen and (max-width : 400px) {
.name {margin-left:5%; width:25%;}
.about {margin-left:5%; width:55%;}
}*/