/* /*
 * DanTheMan
 * http://www.dantheman.ch
 * Copyright 2014
 *
 */

/*** COLORS ***
 * #2a2345	dark blue
 * #241F38	darker blue
 **/

 
 /*** FONTS ***/
@import url(http://fonts.googleapis.com/css?family=Oswald|Gentium+Book+Basic:400italic,400);

/*** RESET ***/
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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
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; }
	
/*** BASICS ***/

html {height:100%;}
body {
	position:relative;
	height: 100%;
	font:28px/150% 'Gentium Book Basic', serif;
	color:white;
	background:#ffffff;}
a {	color:#000000;
	font-weight:bold;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	-webkit-transition: color 0.3s, background 0.3s;  
	-moz-transition: color 0.3s, background 0.3s;  
	-o-transition: color 0.3s, background 0.3s;  
	-ms-transition: color 0.3s, background 0.3s;  
	transition: color 0.3s, background 0.3s;
}
a:hover,a:active {border-color:#ffffff;}
a:active, a:focus {outline:none;}

.imglink {display:block; line-height:0; border:0;}

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	font-size: 0;
}

hr {width:250px; height:1px; background:white; border:none; margin:50px auto;}

img {max-width:100%; height:auto; object-fit:contain;}

em {font-style:italic;}
strong {font-weight:600;}
p {margin:0 0 1em;}
	
blockquote, q {
	position:relative;
	font-size:1.5em;
	line-height:1.2em;}
blockquote::before, q::before {
	content:'«';
	position:absolute;
	top:0; left:-50px;
	font-size:300px;
	color:rgba(255,0,138,0.1);
	margin-right:-1em;}
blockquote p, q p {display: inline;}
	

/*** LAYOUT ***/

body {height:100%; overflow:hidden;}

#overlay {position:absolute; height:100%; width:100%; top:0; left:0; background:#ffffff;}

#header {
	position:relative; 
	top:0; left:0;
	width:100%; min-height:100%;
	height: 100vh;
	background-color: white;
	/* background:url(img/bild_gross.jpg) center center no-repeat; 
	background-size:cover; */
	transition:0s linear;
	-moz-transform:translate3d(0, 0, 0);
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0); /* Force hardware acceleration */ }

/*#logo { 
	width:320px;
  height:320px;
	background:url(img/logo_footer.png) center center no-repeat;
	background-size:contain;}*/
	
#content {
	position: relative;
	margin: auto;
	padding: 2em; text-align:center;
	height: 65vh;
	min-height: 350px;
	max-width: 900px; 
	margin: 0 auto;
	top: 15vh;
}	

h1#masthead {
	font-family:'Oswald', sans-serif;
	font-weight:normal;
	font-size:1em; 
	line-height:1em; 
	margin:0 auto 1em;
	text-align:center;
	text-transform:uppercase;}
h2#copy-title {font-size:2.5em; line-height:1em; text-align:center; text-transform:uppercase; margin:0.3em auto;}
p#copy span {
	font-style:italic;
	padding:0.15em; 
	background:rgba(0,0,0,0.2);}
p#credentials {font-size:0.5em; margin:1em auto;}
span#werte {text-decoration:underline; background:transparent!important;}

@media only screen and (max-width: 1024px) {
  #header { background-image:url(img/bild_1024.jpg); }
  #content { min-height: 250px };
}


#footer {
	position: absolute;
	bottom: 2em;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	gap: 35px;
}

.icon {
	transform: scale(1);
	border: none;
	-webkit-transition:  all ease .3s; 
	-moz-transition:  all ease .3s;  
	-o-transition:  all ease .3s; 
	-ms-transition:  all ease .3s;  
	transition:  all ease .3s;
	width: 60px;
	height: 60px;
}
.icon:hover {
	transform: scale(1.2);
	border: none;
}

.icon img {
	width: 100%;
}


/*Logo SVG*/
.cls-1, .cls-2, .cls-3 {
  stroke-width: 0px;
}

.cls-2 {
  fill: #141412;
}

.cls-3 {
  fill: #fff;
}

/*Fade in*/
@-webkit-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

#dantheman,
#s, #i, #n, #c, #e, #id1, #id9, #id7, #id77 {
	opacity: 0;
  -webkit-animation: fadein 1s ease-in forwards;
  -moz-animation: fadein 1s ease-in forwards;
  animation: fadein 1s ease-in forwards;
}

#s {
	-webkit-animation-delay: 1s; 
	-moz-animation-delay: 1s; 
	animation-delay: 1s; 
}
#i {
	-webkit-animation-delay: 1.3s; 
	-moz-animation-delay: 1.3s; 
	animation-delay: 1.3s; 
}
#n {
	-webkit-animation-delay: 1.6s; 
	-moz-animation-delay: 1.6s; 
	animation-delay: 1.6s; 
}
#c {
	-webkit-animation-delay: 1.9s; 
	-moz-animation-delay: 1.9s; 
	animation-delay: 1.9s; 
}
#e {
	-webkit-animation-delay: 2.2s; 
	-moz-animation-delay: 2.2s; 
	animation-delay: 2.2s; 
}
#id1 {
	-webkit-animation-delay: 2.5s; 
	-moz-animation-delay: 2.5s; 
	animation-delay: 2.5s; 
}
#id9 {
	-webkit-animation-delay: 2.8s; 
	-moz-animation-delay: 2.8s; 
	animation-delay: 2.8s; 
}
#id7 {
	-webkit-animation-delay: 3.1s; 
	-moz-animation-delay: 3.1s; 
	animation-delay: 3.1s; 
}
#id77 {
	-webkit-animation-delay: 3.4s; 
	-moz-animation-delay: 3.4s; 
	animation-delay: 3.4s; 
}


/*Fade in since */
@-webkit-keyframes fadeinSince {
    0% { 
    	opacity: 0; 
    	-webkit-transform: scale(1.0);
    	-moz-transform: scale(1.0);
    	transform: scale(1.0); 
    }
    50% { 
    	opacity: .5; 
    	-webkit-transform: scale(1.5);
    	-moz-transform: scale(1.5);
    	transform: scale(1.5); 
    }
    100% { 
    	opacity: 1; 
    	-webkit-transform: scale(1.0);
    	-moz-transform: scale(1.0);
    	transform: scale(1.0); 
    }
}

@-moz-keyframes fadeinSince {
    0% { 
    	opacity: 0; 
    	-webkit-transform: scale(1.0);
    	-moz-transform: scale(1.0);
    	transform: scale(1.0); 
    }
    50% { 
    	opacity: .5; 
    	-webkit-transform: scale(1.5);
    	-moz-transform: scale(1.5);
    	transform: scale(1.5); 
    }
    100% { 
    	opacity: 1; 
    	-webkit-transform: scale(1.0);
    	-moz-transform: scale(1.0);
    	transform: scale(1.0); 
    }
}