@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600');
/*@import url('https://fonts.googleapis.com/css?family=Manuale:500|Montserrat');*/
/*@import url('https://fonts.googleapis.com/css?family=Kavoon');*/ 

body{
	margin:0;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.5em;
	font-size: 14px;
	font-weight: 400;
}

@media only screen and (min-width : 480px) { body{ font-size:16px; } }
@media only screen and (min-width : 720px) { body{ font-size:18px; } }
/*@media only screen and (min-width : 1080px) { body{ font-size:20px; } }*/

h1,h2{
	font-size: 3em;
	max-width: 12em;
	line-height: 1.2em;
}
h1{
	font-size: 4em;
}

p,h1,h2,h3,h4,h5{
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5{
	font-weight: 500;
}

h1,h2,h3,h4,h5{
	max-width: 20em;
	margin-bottom: 0.25em;
}
p{
	max-width: 36em;
	/*color:#888;*/
}

h2,h1{
	/*font-family: 'Manuale', serif;*/
	/*font-family: 'Kavoon', cursive;*/
	font-weight: 600;
}
/*
	padding (20)30,50,70
*/





.descr{
	font-weight: 300;
}




.frederick{
	font-size: 14px; 
}

@media only screen and (min-width : 480px) { }
@media only screen and (min-width : 720px) { }
@media only screen and (min-width : 1080px) {}
@media only screen and (min-width : 1440px) {}


@media only screen and (min-width : 480px) { .frederick p{ font-size: 16px; } }
@media only screen and (min-width : 720px) { .frederick p{ font-size: 18px; } }

.frederick h1{ font-size: 2em;  }
@media only screen and (min-width : 720px) { .frederick h1{ font-size: 5vw; } }
@media only screen and (min-width : 1440px) {  .frederick h1{ font-size:4em; } }

.frederick h2{ font-size: 1.5em;  }
@media only screen and (min-width : 720px) { .frederick h2{ font-size: 3.5vw; } }
@media only screen and (min-width : 1440px) {  .frederick h2{ font-size:3em; } }
/*@media only screen and (min-width : 480px) { .frederick h2{ font-size: 16px; } }*/
/*@media only screen and (min-width : 720px) { .frederick h2{ font-size: 18px; } }*/

/*@media only screen and (min-width : 1080px) { body{ font-size:20px; } }*/
/*@media only screen and (min-width : 1440px) { body{ font-size:20px; } }*/



.daddy{
	background-position: center center;
	background-size: cover;
	background-color: #DDD;
	min-height: 500px;
}
@media only screen and (min-width : 480px) { .daddy{ min-height: 500px; } }
@media only screen and (min-width : 720px) { .daddy{ min-height: 700px; } }
@media only screen and (min-width : 1080px) { .daddy{ min-height: 850px; } }



.cousin{
	max-width: 1430px;
	box-sizing: border-box;
	padding: 20px;
	margin: 0 auto;
	/*background-color: #DFFBE4;*/
}
@media only screen and (min-width : 480px) { .cousin{ padding: 30px; } }
@media only screen and (min-width : 720px) { .cousin{ padding: 50px; } }
@media only screen and (min-width : 1080px) { .cousin{ padding: 70px; } }
.cousin p{ max-width: 30em; }




.thetwins:after { content:" "; display:table; clear:both; }
.thetwins{
	max-width: 1430px;
	box-sizing: border-box;
	padding: 20px;
	margin: 0 auto;
	/*background-color: #EEE;*/
}
.thetwins .barry,
.thetwins .larry{
	box-sizing: border-box;
	float: right;
	width: 100%;
}
/*.thetwins .larry{ width: 60%; padding-top: 140px; }*/
/*.thetwins .barry{ width: 40%; }*/
.thetwins img{ width: 100%; display: block; }
.thetwins .barry{ padding-right: 20px; }
.thetwins .barry img{ width: 150%; left: -50%; position: relative; }
@media only screen and (min-width : 480px) { .thetwins .barry, .thetwins .larry{ width: 50%; } }

@media only screen and (min-width : 480px) { .thetwins{ padding: 30px; } .thetwins .barry{ padding-right: 30px; } }
@media only screen and (min-width : 720px) { .thetwins{ padding: 50px; }  .thetwins .barry{ padding-right: 50px; }}
@media only screen and (min-width : 1080px) { .thetwins{ padding: 70px; } .thetwins .barry{ padding-right: 70px; } }






.aunti{
	max-width: 1430px;
	box-sizing: border-box;
	padding: 20px;
	margin: 0 auto;
	/*background-color: #DFFBE4;*/
}
@media only screen and (min-width : 480px) { .aunti{ padding: 30px; } }
@media only screen and (min-width : 720px) { .aunti{ padding: 50px; } }
@media only screen and (min-width : 1080px) { .aunti{ padding: 70px; } }
.aunti p{ max-width: 30em; margin: 0 auto; text-align: center; }


.mamma{
	/*outline: 1px solid orange;*/
	/*background-color: orange;*/
}
.mamma .paper{
	/*outline: 1px solid blue;*/
	/*background-color: yellow;*/
	max-width: 1430px;
	box-sizing: border-box;
	padding: 0 20px;
	margin: 0 auto;
	position: relative;
}
@media only screen and (min-width : 480px) { .mamma .paper{ padding: 0 30px; } }
@media only screen and (min-width : 720px) { .mamma .paper{ padding: 0 50px; } }
@media only screen and (min-width : 1080px) { .mamma .paper{ padding: 0 70px; } }
.mamma img{ width: 100%; display: block; }



.unclebob{ 
	/*box-sizing: border-box;*/
	/*padding: 20px;*/
	position: relative;
	background-color: red;
	overflow: hidden;
 }
.unclebob img{
	position: relative;
	/*width: 50%;*/
	width: 100%;
	/*z-index: 1;*/
}
.unclebob:after {
/*	content: "";
	position: absolute;
	bottom: 0;
	left: -50vw;
	right: -50vw;
	padding-bottom: 27.90698%;
	width: 200vw;
	background: red;*/
}


a.daslogo{
	font-size: 19px;
	display: block;
	width: 8em;
	height: 1em;
	background-image: url('/grid/assets/gfx/das.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	text-indent: -100%;
	margin-top: 30px;
}


.goliath{

}
.goliath img,
.goliath video{ width: 100%; display: block; }



/* grandma holds images with backgroudn blocks */
.grandma{ position: relative; }
.grandma img{ width: 100%; display: block; }
.grandma::before{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	background-color: white;
	height: 30%;
	width:100%;
}



.jenny{
	/*outline: 1px solid blue;*/
	/*background-color: yellow;*/
	max-width: 1430px;
	box-sizing: border-box;
	padding: 0 20px;
	margin: 0 auto;
	position: relative;
}
@media only screen and (min-width : 480px) { .jenny{ padding: 0 30px; } }
@media only screen and (min-width : 720px) { .jenny{ padding: 0 50px; } }
@media only screen and (min-width : 1080px) { .jenny{ padding: 0 70px; } }
.jenny img{ width: 100%; display: block; }


.jenn{ padding-top: 20px; }
@media only screen and (min-width : 480px) { .jenn{ padding-top: 30px; } }
@media only screen and (min-width : 720px) { .jenn{ padding-top: 50px; } }
@media only screen and (min-width : 1080px) { .jenn{ padding-top: 70px; } }

.jenny-top{
	box-sizing: border-box;
	padding-top: 20px;
}
@media only screen and (min-width : 480px) { .jenny-top{ padding-top: 30px; } }
@media only screen and (min-width : 720px) { .jenny-top{ padding-top: 50px; } }
@media only screen and (min-width : 1080px) { .jenny-top{ padding-top: 70px; } }



.penny{ padding: 50px 0 }
@media only screen and (min-width : 720px) { .penny{ padding: 100px 0 } }
@media only screen and (min-width : 1080px) { .penny{ padding: 160px 0 } }

.penni{ padding-top: 50px }
@media only screen and (min-width : 720px) { .penni{ padding-top: 160px } }


@media only screen and (min-width : 720px) { .freya{ margin-left: 33%;} }
@media only screen and (min-width : 1080px) { .freya{ margin-left: 50%; } }


@media only screen and (min-width : 720px) { .freya_rev{ margin-right: 33%;} }
@media only screen and (min-width : 1080px) { .freya_rev{ margin-right: 50%; } }



.ricky{
	max-width: 500px;
	margin:0 auto;
}
.ricky iframe,
.ricky video{
	width:100%;
	display: block;
}


.garry{
	max-width: 900px;
	margin: 0 auto;
}


.ben{ }
@media only screen and (min-width : 720px) { .ben{ margin-left: 50%; } }



hr.robbert{
	margin: 70px 0;
	border:none;
	border-top:2px solid #EEE;
}



.josh:after { content:" "; display:table; clear:both; }
.josh{

}
.josh .child,
.josh .child2{ float: left; }
.josh .child{ width: 40%; }
.josh .child2{ width: 60%; }
.josh .child2{
	box-sizing: border-box;
	padding-left: 70px;
	padding-top: 70px;
}





.bgpattern-seigaiha{
	background-color:silver;
background-image: 
radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 0    150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 50%  100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
radial-gradient(circle at 0    50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px;
}
.bgpattern-starrynight{
	background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}



.jkl234f234{
	max-width: 1200px; 
	margin: 0 auto;
	outline: 1px solid red;

}
.jkl234f234 img{ width: 100%; }








	.enya{
		/*background-color: orange;*/
		box-sizing: border-box;
		overflow: hidden;
		/*padding: 20px;*/
	}
	.enya:after { content:" "; display:table; clear:both; }
	.enya img{ width: 100%; display: block; margin-bottom: 20px; }
	.enya .left,
	.enya .right{ width: 50%; float: left; box-sizing: border-box; }

	.enya .left{ width: 40%; padding-right: 10px; }
	.enya .right{ width: 60%; padding-left: 10px; }



	.enya .left{ padding-top: 10%; }
	@media only screen and (min-width : 480px) { 
		.enya .left{ padding-right: 15px; }
		.enya .right{ padding-left: 15px; }
		.enya img{ margin-bottom: 30px; }
	}
	/*@media only screen and (min-width : 720px) { .enya .left, .enya .right{ width: 50%; }  }*/
	@media only screen and (min-width : 720px) { 
		.enya .left{ padding-right: 25px; }
		.enya .right{ padding-left: 25px; }
		.enya img{ margin-bottom: 50px; }
	}
	@media only screen and (min-width : 1080px) { 
		.enya .left{ padding-right: 35px; }
		.enya .right{ padding-left: 35px; }
		.enya img{ margin-bottom: 70px; }
	}

	.shapiro{
		box-sizing: border-box;
		margin-right: -20px;
	}
	@media only screen and (min-width : 480px) { .shapiro{ margin-right: -30px; } }
	@media only screen and (min-width : 720px) { .shapiro{ margin-right: -50px; } }
	@media only screen and (min-width : 1080px) { .shapiro{ margin-right: -70px; } }
	






	
.paper,
.bigpaper,
.maxpaper{
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}
.bigpaper{ max-width: 1600px; }
@media only screen and (min-width : 1440px) {
		.paper,
	.maxpaper{
		/*padding-left: 70px;*/
		/*padding-right: 70px;*/
	}
}



	.toby:after { content:" "; display:table; clear:both; }
	.toby img{
		width: 100%;
		display: block;
	}
	.toby .tob-40{ float: left; width: 40%; }
	.toby .tob-50{ float: left; width: 50%; }
	.toby .tob-60{ float: left; width: 60%; }

	@media only screen and (max-width : 720px) {
		.toby.collapsable .tob-40,
		.toby.collapsable .tob-50,
		.toby.collapsable .tob-60{
			width: 100%;
		}
	}


/**
 * ----------------------------------------------------------
 *	SPCR
 	Spacing rules
 		480, 720, 1080, 1280, 1440
 		20,30,50,70
 * ----------------------------------------------------------
 */
.gttr_l, .gttr_r, .gttr_t, .gttr_b,.gttr_lr, .gttr_tb, .gttr_lrtb{ box-sizing: border-box; }
.gttr_l{ 	padding-left: 20px; }
.gttr_r{ 	padding-right: 20px; }
.gttr_t{ 	padding-top: 20px; }
.gttr_b{ 	padding-bottom: 20px; }
.gttr_lr{ 	padding-left: 20px; padding-right: 20px; }
.gttr_tb{ 	padding-top: 20px; padding-bottom: 20px; }
.gttr_lrtb{ padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; }
@media only screen and (min-width : 480px) { 
.gttr_l{ 	padding-left: 30px; }
.gttr_r{ 	padding-right: 30px; }
.gttr_t{ 	padding-top: 30px; }
.gttr_b{ 	padding-bottom: 30px; }
.gttr_lr{ 	padding-left: 30px; padding-right: 30px; }
.gttr_tb{ 	padding-top: 30px; padding-bottom: 30px; }
.gttr_lrtb{ padding-left: 30px; padding-right: 30px; padding-top: 30px; padding-bottom: 30px; }
}
@media only screen and (min-width : 720px) { 
.gttr_l{ 	padding-left: 50px; }
.gttr_r{ 	padding-right: 50px; }
.gttr_t{ 	padding-top: 50px; }
.gttr_b{ 	padding-bottom: 50px; }
.gttr_lr{ 	padding-left: 50px; padding-right: 50px; }
.gttr_tb{ 	padding-top: 50px; padding-bottom: 50px; }
.gttr_lrtb{ padding-left: 50px; padding-right: 50px; padding-top: 50px; padding-bottom: 50px; }
}
@media only screen and (min-width : 1080px) { 
.gttr_l{ 	padding-left: 70px; }
.gttr_r{ 	padding-right: 70px; }
.gttr_t{ 	padding-top: 70px; }
.gttr_b{ 	padding-bottom: 70px; }
.gttr_lr{ 	padding-left: 70px; padding-right: 70px; }
.gttr_tb{ 	padding-top: 70px; padding-bottom: 70px; }
.gttr_lrtb{ padding-left: 70px; padding-right: 70px; padding-top: 70px; padding-bottom: 70px; }
}



/*	.gttr_lr{ box-sizing: border-box; padding-right: 20px; padding-left: 20px; }
	@media only screen and (min-width : 480px) { 	.gttr_lr{ padding-right: 30px; padding-left: 30px; } }
	@media only screen and (min-width : 720px) { 	.gttr_lr{ padding-right: 50px; padding-left: 50px; } }
	@media only screen and (min-width : 1080px) { 	.gttr_lr{ padding-right: 70px; padding-left: 70px; } }
	.gttr_t{ box-sizing: border-box; padding-top: 20px; }
	@media only screen and (min-width : 480px) { 	.gttr_t{ padding-top: 30px; } }
	@media only screen and (min-width : 720px) { 	.gttr_t{ padding-top: 50px; } }
	@media only screen and (min-width : 1080px) { 	.gttr_t{ padding-top: 70px; } }
	.gttr_r{ box-sizing: border-box; padding-right: 20px; }
	@media only screen and (min-width : 480px) { 	.gttr_r{ padding-right: 30px; } }
	@media only screen and (min-width : 720px) { 	.gttr_r{ padding-right: 50px; } }
	@media only screen and (min-width : 1080px) { 	.gttr_r{ padding-right: 70px; } }
	.gttr_l{ box-sizing: border-box; padding-left: 20px; }
	@media only screen and (min-width : 480px) { 	.gttr_l{ padding-left: 30px; } }
	@media only screen and (min-width : 720px) { 	.gttr_l{ padding-left: 50px; } }
	@media only screen and (min-width : 1080px) { 	.gttr_l{ padding-left: 70px; } }
	.gttr_b{ box-sizing: border-box; padding-bottom: 20px; }
	@media only screen and (min-width : 480px) { 	.gttr_b{ padding-bottom: 30px; } }
	@media only screen and (min-width : 720px) { 	.gttr_b{ padding-bottom: 50px; } }
	@media only screen and (min-width : 1080px) { 	.gttr_b{ padding-bottom: 70px; } }
	.gttr_tb{}
	.gttr_tlr{}*/



	.counter_r{
		box-sizing: border-box;
		margin-right: -20px;
	}
	@media only screen and (min-width : 480px) { 	.counter_r{ margin-right: -30px; } }
	@media only screen and (min-width : 720px) { 	.counter_r{ margin-right: -50px; } }
	@media only screen and (min-width : 1080px) { 	.counter_r{ margin-right: -70px; } }
	.counter_l{
		box-sizing: border-box;
		margin-left: -20px;
	}
	@media only screen and (min-width : 480px) { 	.counter_l{ margin-left: -30px; } }
	@media only screen and (min-width : 720px) { 	.counter_l{ margin-left: -50px; } }
	@media only screen and (min-width : 1080px) { 	.counter_l{ margin-left: -70px; } }

	video.block,
	img.block{ display: block; width: 100%; }

	video.tinyblock,
	img.tinyblock{ display: block; width: 100%; max-width: 500px; margin: 0 auto; }



	
	img.thumbelina{ 
		/*outline: 1px solid blue;*/
		display: block;
		margin: 0 auto;
		max-width: 150px;
	}
	@media only screen and (min-width : 480px) {  img.thumbelina{ max-width: 200px; } }
	@media only screen and (min-width : 720px) {  img.thumbelina{ max-width: 240px; } }


	.seprator{
		max-width: 1440px;
		margin: 0 auto;
		padding-bottom: 50px;
		position: relative;
	}
	@media only screen and (min-width : 720px) { .seprator{  padding-bottom: 100px;  } }
	@media only screen and (min-width : 1080px) { .seprator{ padding-bottom: 120px;  } }
	.seprator::before{
		content: "";
		display: block;
		border-top: 1px solid #BBB;
		margin: 0 10%;
	}
	.seprator.flat{
		padding-bottom: 0;
	}


	.papersize{
		box-sizing: border-box;
		max-width: 1440px;
		margin: 0 auto;
	}

	.typespace{ 
		box-sizing: border-box; 
		padding: 50px 0; 
		/*outline: 1px solid gold;*/
	}
	@media only screen and (min-width : 480px) { .typespace{ padding: 50px 0; } }
	@media only screen and (min-width : 720px) { .typespace{ padding: 100px 0; } }
	@media only screen and (min-width : 1080px) { .typespace{ padding: 120px 0; } }
	@media only screen and (min-width : 1280px) { .typespace{ padding: 160px 0; } }

	.big_generic_title{
		/*background-color: red;*/
		padding: 0 20px;
	}
	.big_generic_title h2{ margin:0;padding: 0; font-size: 28px; max-width: 15em; }
	@media only screen and (min-width : 480px) { .big_generic_title{ padding: 0 30px; }  }
	@media only screen and (min-width : 720px) { .big_generic_title{ padding: 0 50px; } .big_generic_title h2{ font-size: 5vw; } }
	@media only screen and (min-width : 1080px) { .big_generic_title{ padding: 0 70px; }   }
	@media only screen and (min-width : 1280px) { 										.big_generic_title h2{ font-size: 65px; }  }

	.just_saying_medium{
		font-size: 18px;
		text-align: center;
		max-width: 40em;
	}




	.just_saying_large{
		font-size: 18px;
		line-height: 1.6em;
		font-weight: 600;
		box-sizing: border-box;
		max-width: 26em; }
	.just_saying_large .extra{
		font-size: 0.8em;
		font-weight: 400;
		max-width: 25em;
		line-height: 1.55em;
		/*margin-top: 1em;*/
	}
	@media only screen and (min-width : 480px) { .just_saying_large{  } }
	@media only screen and (min-width : 720px) { .just_saying_large{ font-size: 2.5vw;  } }
	@media only screen and (min-width : 720px) { .just_saying_large.right{ margin-left: 30%; } }
	@media only screen and (min-width : 1080px) { .just_saying_large{ font-size: 30px; } }







	.djm_thumbs{}
	.djm_thumbs:after { content:" "; display:table; clear:both; }
	.djm_thumb{
		float: left;
		width: 100%;
		box-sizing: border-box;
		transition: transform 120ms cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.djm_thumb a{
		font-weight: 600;
		text-decoration: none;
		color:black;
	}
	.djm_thumb .cover{
		height: 0;
		padding-bottom: 100%;
		background-color: #eee;
		background-position: center center;
		background-size: cover;
		/*border-radius: 0.2em;*/
		/*position: relative;*/
	}
	.djm_thumb:hover{
		/*background-size: 120%;*/
		/*background-size: 105%;*/
		/*padding-bottom: 80%;*/
		/*margin: -5px;*/
		/*transform: scale(1.02);*/
		/*transform: translateY(-1px) scale(1.02);*/
		transform: scale(1.03);
		/*transform: translateY(-5%);*/
	}
	.djm_thumb .title{
		margin-top: 1em;
		text-overflow: ellipsis;
		  white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
	}
@media only screen and (min-width : 720px) {	.djm_thumb{ width: 50%; } }
@media only screen and (min-width : 1080px) {  .djm_thumb{ width: 33.33%; } }
/*@media only screen and (min-width : 1280px) {  .djm_thumb{ width: 25%; } }*/
/*@media only screen and (min-width : 1600px) {	.djm_thumb{ width: 20%; } }*/
/*@media only screen and (min-width : 2000px) {	.djm_thumb{ width: 16.66%; } }*/







/**
 * ----------------------------------------------------------
 *	Audiosampler
 * ----------------------------------------------------------
 */
.audiosample{
	outline: none;
	width: 100px;
	height: 100px;
	background-color: transparent;
	border:4px solid black;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
		text-indent: 200%;
		white-space: nowrap;
		overflow: hidden;
	background-image: url('/djamika/assets/gfx/ui/audio_hud.svg');
	background-size: 100%;
}
.audiosample.is_playing{
	background-position: 0 100%;
}
.audiosample.is_loading{
	background-image: url('/djamika/assets/gfx/ui/audio_hud_loading.svg');
	background-position: 0 0%;
	background-size: 100%;	
	animation: audioLoadingSpinner 1.5s linear infinite;
}
@keyframes audioLoadingSpinner {
  0%   {   transform: rotate(0deg)	 }
  100% {    transform: rotate(360deg)}
}

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






	.footer{
		padding-bottom: 200px;
	}

	a.link{
		color:black;
		text-decoration: none;
		border-bottom: 0.11em solid black;
	}






/**
 * ----------------------------------------------------------
 *	below is stuff that should be generic
 * ----------------------------------------------------------
 */


/* global stuff*/
*{ box-sizing: border-box; }




/* the paper */
.paper,
.smallpaper,
.bigpaper,
.maxpaper{
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}
.bigpaper{ max-width: 1600px; }
.smallpaper{ max-width: 1280px; }




/* for doodle wallpapers */
.wallpaper{
/*background: #17181A;*/
/*position: absolute;*/
/*z-index: 10;*/
height: 100%;
width: 100%;
left: 0;
top: 0;
overflow: hidden
}
.wallpaper iframe{
	background: transparent;
	/*position: absolute;*/
	/*position: fixed;*/
	z-index: 1;
	border: 0;
	/*height: 100%;*/
	/*width: 100%;*/
	/*left: 0;*/
	/*top: 0*/
	height: 100vh;
	width:100%;
	/*height: 100%;*/
	display: block;
	/*width: 100%;*/
	border: none;
}


/**
 * ----------------------------------------------------------
 *	
 * ----------------------------------------------------------
 */
div.testblock{
	display: block;
	width: 200px;
	height: 200px;
	background-color: skyblue;
}


/**
 * ----------------------------------------------------------
 *	sauce animations
 * ----------------------------------------------------------
 */


@keyframes sauce_welcome {
  0% { transform: translateY(1em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1 }
}


.sauce_welcome{
	animation: sauce_welcome 2s cubic-bezier(0,.62,.02,1) both;

}





/**
 * ----------------------------------------------------------
 *	rediscovery of the type stuff
 * ----------------------------------------------------------
 */
 /*basic helpers*/
.textright{ text-align: right; }
.textcenter{ text-align: center; }
.textleft{ text-align: left; }

@media only screen and (min-width : 720px) { .flyright{ margin-left: 30%; } }

.max30{ max-width: 30em; }
.max26{ max-width: 26em; }
.max40{ max-width: 40em; }

.typestory{ max-width: 26em; }

/* type0-3 */
.type0 a,.type1 a,.type2 a,.type3 a{
	text-decoration: none;
	color:black;
}
/*.type0,.type1,.type2,.type3{ color: red; }*/
.type0{ font-weight: 500; color:rgba(0,0,0,0.3); }
.type1{ font-weight: 500; } /* or 400/500 ? */
.type2,.type3{ font-weight: 600; }

.type0{ font-size: 10px; line-height: 1.6em; }
.type1{ font-size: 16px; line-height: 1.6em;  } /*max-width: 30em;*/
.type2{ font-size: 18px; line-height: 1.6em;  } /*max-width: 26em;*/
.type3{ font-size: 28px; line-height: 1.2em;  } /*max-width: 26em;*/
@media only screen and (min-width : 720px) { 
	.type0{ font-size: 12px  }
	.type1{ font-size: 2.2vw;  } 
	.type2{ font-size: 2.5vw;  } 
	.type3{ font-size: 5vw;  }  }
@media only screen and (min-width : 1080px) { 
	.type1{ font-size: 23.7px;  }
	.type2{ font-size: 26.9px; } }
@media only screen and (min-width : 1280px) { 
	.type3{ font-size: 65px; } }


/**
 * ----------------------------------------------------------
 *	dasmenu > dasmenutoggler
 * ----------------------------------------------------------
 */
.dasmenutoggler{ position: fixed; width: 100%; z-index: 99; }
.dasmenutoggler .area{ position: relative; }
.dasmenutoggler .toggler{ position: absolute; z-index: 99; right: 0; top:0; } 
.dasmenutoggler .toggler button{
	border:none;
	background-color: transparent;
	display: block; margin:0; padding:0;
	box-sizing: border-box; 
	cursor: pointer;
	/* extra pressing space around button*/
	padding: 20px;
	margin-right: -20px;
	margin-top: -20px;
	border-radius: 50%;
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* disable ios highlight */
	-webkit-user-select:none; /* disable ios magnifier*/
	outline: none;
}
.dasmenutoggler .toggler button span{
	overflow: hidden;
	display: block; margin:0;
	position: relative;
	width: 20px;
	height: 20px;
	padding: 0;
	text-indent: 100%;
}
.dasmenutoggler .toggler button span::before,
.dasmenutoggler .toggler button span::after{ 
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	width: 20px;
	height: 3px;
	background: black;
	transition: transform 0.2s cubic-bezier(.09,.2,.14,1);
}
.dasmenutoggler .toggler button span::after{ transform: rotate(0deg) translateY(3px) scaleX(1) translateX(0px) }
.dasmenutoggler .toggler button span::before{ transform: rotate(0deg) translateY(11px) scaleX(0.8) translateX(2px) }
.dasmenu-open .dasmenutoggler .toggler button span::after{ transform: rotate(45deg) translateY(5px) translateX(5px);}
.dasmenu-open .dasmenutoggler .toggler button span::before{ transform: rotate(-45deg) translateY(5px) translateX(-5px);}

/**
 * ----------------------------------------------------------
 *	dasmenu > lists
 * ----------------------------------------------------------
 */
 .dasmenucontent a{ display: inline; line-height: auto; }
 .djm_menu_list a{ display: block; }

/**
 * ----------------------------------------------------------
 *	responsive hiders and showers ( needs some work )
 * ----------------------------------------------------------
 */
.whenbig{ display: none; }
@media only screen and (min-width : 720px) { .whenbig{ display: block; } }






/**
 * ----------------------------------------------------------
 *	dasvideo
 * ----------------------------------------------------------
 */
.videocontainer {
	position:relative;
	padding-bottom:56.25%; /* 9:16 - 9/16 */
	height:0;
	overflow:hidden;
}
.videocontainer iframe, 
.videocontainer object, 
.videocontainer embed,
.videocontainer video {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.videoposter{
	padding-bottom:56.25%; /* 9/16 */
	background-size: cover;
	background-position: center center;
	position: relative;
	cursor: pointer;
}
.videoposter:before{
	content: "";
	display: block;
	background-image: url('/djathijs/s/ui/video_play.svg');
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
    top: 50%;
    left: 50%;
    width: 120px; height: 120px; margin: -60px 0 0 -60px;  
    border-radius: 50%;
	transition: transform 0.1s ease-out;
    background-size:40%;
}
@media only screen and (min-width : 480px) { .videoposter:before{ background-size: 60%; } }
@media only screen and (min-width : 720px) { .videoposter:before{ background-size: 80%; } }
.videoposter:hover:before{ transform: scale(1.05); }
.videoposter.played:before{ animation: playbutton_bye 0.5s ease-out both; }
@keyframes playbutton_bye {
  0% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(2); opacity: 0 }
}




/**
 * ----------------------------------------------------------
 *	djacubes in menu
 * ----------------------------------------------------------
 */
/*.djacubes{ outline: 1px solid red; }*/
.djacubes:after { content:" "; display:table; clear:both; }
.djacubes ul{ margin: 0; padding: 0; }
.djacubes{ margin: 0 -20px -20px 0; }
@media only screen and (min-width : 480px) { .djacubes{ margin: 0 -30px -30px 0; } }
.djacubes ul li{ list-style: none; float: left;}
.djacubes ul li{ padding: 0 20px 20px 0; }
@media only screen and (min-width : 480px) { .djacubes ul li{ padding: 0 30px 30px 0; } }
.djacubes ul li a{
	width: 100%;
	display: block;
	border-radius: 10px; /* 15% */
	background-color: #EEE;
	height: 0px;
	padding-bottom: 100%;
	text-indent: -9999px; /* sends the text off-screen */
	white-space: nowrap; /* because only the first line is indented */
	background-size: 103%;
	background-position: center center;
	background-repeat: no-repeat;
	outline: none;  /* prevents dotted line when link is active */
}