html {font-family: 'Exo 2', sans-serif; font-size: 16px; line-height: 22px;}
@media screen and (max-width : 680px){ html {font-size: 12px; line-height: 18px;} }
body {margin: 0px; color: #7c6a89; background: #FFF;}
* {margin: 0; padding: 0;}
.clear {clear: both;}
.tac {text-align: center;}
.dp-b {display: block;}
img {border: 0px;}

@media screen and (max-width : 680px){ .novis680 {display: none;} }

/*!
*  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:'FontAwesome';src:url('/fonts/fontawesome-webfont.eot?v=4.4.0');src:url('/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),url('/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),url('/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),url('/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');font-weight:normal !important;font-style:normal}





/***TOPSCROLLLINK***/
#top {position: absolute; top: 0;}
a[href="#top"]:before {font-family: FontAwesome; content: "\f0d8"; position: relative; font-size: 50px; line-height: 30px;}
a[href="#top"] {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: rgba(0,0,0,0.3); color: #FFF; font-size: 20px; width: 70px; height: 50px; line-height: 20px; position: fixed; right: 10px; bottom: 10px; text-align: center; text-decoration: none; z-index: 1010; transition: background 0.3s;}
a[href="#top"]:hover {background: rgba(0,0,0,0.5); color: #FFF}
a[href="#top"]:after {content: "NACH OBEN"; font-size: 10px;}
@media screen and (max-width : 680px){
	a[href="#top"] {position: fixed; right: 5px; bottom: 5px; width: 50px; height: 35px;}
	a[href="#top"]:before {font-size: 35px; line-height: 10px;}
	a[href="#top"]:after {content: "NACH OBEN"; font-size: 7px; line-height: 12px;}
}
/**********/



.wrap {width: 100%; margin: 0 auto; max-width: 1200px;}


a {text-decoration: none; color: #a14ade; transition: color 0.3s;}
a:hover {color: #FFF;}


p {padding: 10px;}




.title1 {display: block; font-size: 38px; line-height: 50px; padding: 10px; margin-top: 20px; font-weight: 700; text-align: center; color: #9b5fc5; font-family: 'Merienda', 'Saira', sans-serif;}
@media screen and (max-width : 680px){ .title1 {font-size: 22px; line-height: 30px;} }




/**** NAVIGATION ****/
nav {height: 120px; background: #FFF;}
nav .wrap {display: flex;}

#mobnav {display: none;}
@media screen and (min-width : 680px){
	nav ul {list-style-type: none; display: flex; justify-content: flex-end;}
	nav ul li {display: block; margin: 0 5px;}
	nav ul li a {display: block; font-size: 16px; line-height: 24px; padding: 48px 13px 10px 13px; text-transform: uppercase; color: #333; text-shadow: 1px 1px 0 rgba(0,0,0, 0.0); font-weight: 400; transition: color 0.4s, background 0.4s;}
	nav ul li:hover a {background: #a14ade; color: #FFF;}

	nav #logo {width: 250px; height: 100px; background: url(/img/logo.png); margin-right: 100px; margin-top: 10px;}
}

@media screen and (max-width : 680px){
	nav {height: 70px; background: #FFF;}

	nav ul {display: none; position: absolute; top: 70px; width: 100%; z-index: 20;}
	nav ul li a {display: block; font-size: 16px; line-height: 24px; padding: 13px; text-transform: uppercase; color: #FFF; font-weight: 400; background: #a14ade; border-bottom: 1px solid rgba(0,0,0, 0.15);}

	nav #mobnavlabel {float: right; width: 30px; height: 30px; margin: 20px; text-align: center; transition: background 0.4s;}
	nav #mobnavlabel:before {font-family: FontAwesome; content: "\f0c9"; font-size: 28px; font-weight: lighter; line-height: 30px; color: #333; transition: color 0.4s;}

	#mobnav:checked ~ .wrap ul {display: block;}
	#mobnav:checked ~ #mobnavlabel {color: #FFF;}

	nav #logo {width: 250px; height: 70px; background: url(/img/logo.png) center; margin: auto; position: absolute; z-index: 10; top: 0px; left: 0px;}
}
/***********/






/**** HEADER ****/
#headend {width: 100%; height: 0px; padding-bottom: 4%; background: url(/img/bghead.png); background-size: 100% 100%; position: absolute; top: 120px; z-index: 100;}
@media screen and (max-width : 550px){ #headend {top: 70px;} }

#headend2 {width: 100%; height: 0px; padding-bottom: 4%; background: url(/img/bghead2.png); background-size: 100% 100%; -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%)}

#headend3 {width: 100%; height: 0px; padding-bottom: 4%; background: url(/img/headend3.png); margin-bottom: -4%; background-size: 100% 100%; -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%)}


header {width: 100%; height: 0px; padding-bottom: 30%; background: url(/img/header.jpg) center bottom; background-size: cover; text-align: center; position: relative;}
header div {position: absolute; z-index: 10; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-shadow: 1px 1px 0 rgba(0,0,0, 0.4);}
header h1 {color: #FFF; display: block; max-width: 1200px; margin: auto; font-size: 180%; line-height: 180%;}
header p {max-width: 1200px; margin: auto; color: #FFF; font-size: 120%; line-height: 120%;}



@media screen and (max-width : 1300px){
	header h1 {max-width: 1500px; font-size: 140%; line-height: 140%;}
	header p {max-width: 1500px; font-size: 100%; line-height: 120%;}
	header div {width: 100%;}
}
@media screen and (max-width : 550px){
	header {width: 100%; height: 220px; padding-bottom: 0%;}
	header h1 {font-size: 120%; line-height: 120%;}
}
/***********/







/**** BOXEN ****/
.bg1 {background: #212121; padding: 20px 0; color: #AAA; text-shadow: 1px 1px 0 rgba(0,0,0, 0.2);
background: #212121;
background: -moz-linear-gradient(top,  #212121 0%, #2b2b2b 50%, #212121 99%);
background: -webkit-linear-gradient(top,  #212121 0%,#2b2b2b 50%,#212121 99%);
background: linear-gradient(to bottom,  #212121 0%,#2b2b2b 50%,#212121 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#212121',GradientType=0 );
background-size: 100% 100%;
}
.bg1 .title1 {color: #FFF;}
.bg1start1 {width: 100%; height: 0px; padding-bottom: 11.889%; background: url(/img/bg1start1.png); background-size: 100%;}
.bg1start2 {width: 100%; height: 0px; padding-bottom: 11.889%; background: url(/img/bg1start2.png); background-size: 100%;}
.bg1end1 {width: 100%; height: 0px; padding-bottom: 11.889%; background: url(/img/bg1end1.png); background-size: 100%;}
.bg1end2 {width: 100%; height: 0px; padding-bottom: 11.889%; background: url(/img/bg1end2.png); background-size: 100%;}


.bg2 {background: #a14ade; padding: 20px 0; color: rgba(255,255,255, 0.7); text-shadow: 1px 1px 0 rgba(0,0,0, 0.2);
background: #a14ade;
background: -moz-linear-gradient(top,  #a14ade 0%, #c156ff 50%, #a14ade 99%);
background: -webkit-linear-gradient(top,  #a14ade 0%,#c156ff 50%,#a14ade 99%);
background: linear-gradient(to bottom,  #a14ade 0%,#c156ff 50%,#a14ade 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a14ade', endColorstr='#a14ade',GradientType=0 );
}
.bg2 .title1 {color: #FFF;}
.bg2start2 {width: 100%; height: 0px; padding-bottom: 11.889%; background: url(/img/bg2start2.png); background-size: 100% 100%;}
.bg2end1 {width: 100%; height: 0px; padding-bottom: 11.889%; background: url(/img/bg2end1.png); background-size: 100%;}
.bg2end2 {width: 100%; height: 0px; padding-bottom: 11.889%; background: url(/img/bg2end2.png); background-size: 100%;}
/***********/





/*** BILDER ***/
.picleft {display: block; float: left; margin-right: 2%; margin-left: 1%;}
.picright {display: block; float: right; margin-left: 2%; margin-right: 1%;}
.picfull {display: block; width: calc(100% - 20px); margin: 10px auto;}
.picborder {box-shadow: 0 0 10px rgba(0,0,0, 0.15); width: calc(100% - 20px); padding: 0px; background: rgba(255,255,255, 0.1);}

.pw20 {width: 20%;}
.pw25 {width: 25%;}
.pw30 {width: 30%;}
.pw35 {width: 35%;}
.pw40 {width: 40%;}

.mw200 {max-width: 200px;}
.mw250 {max-width: 250px;}
.mw300 {max-width: 300px;}
.mw350 {max-width: 350px;}
.mw400 {max-width: 400px;}
.mw450 {max-width: 450px;}
.mw500 {max-width: 500px;}
.mw550 {max-width: 550px;}
.mw600 {max-width: 600px;}
.mw650 {max-width: 650px;}
.mw700 {max-width: 700px;}
.mw750 {max-width: 750px;}
.mw800 {max-width: 800px;}
.mw850 {max-width: 850px;}
.mw900 {max-width: 900px;}
.mw950 {max-width: 950px;}
.mw1000 {max-width: 1000px;}

.mt1 {margin-top: 1%;}
.mt5 {margin-top: 5% !important;}

@media screen and (max-width : 480px){
	.mobfull {display: block; float: none !important; width: calc(100% - 40px) !important; margin: 10px auto !important; padding: 10px !important;}
}
/***********/






/**** LISTEN ****/
.list1 {margin: 2% 3%; padding: 0;}
.list1 li {background: url(/img/arrow1.png) no-repeat left center; list-style-type: none; margin: 10px 0; padding-left: 25px;}
.list1 .sub1 {margin: 5px 0; padding-left: 25px; margin-left: 20px;}

.bg1 .list1 li {background: url(/img/arrow1b.png) no-repeat left center;}
.bg2 .list1 li {background: url(/img/arrow1.png) no-repeat left center;}
/*********/








/**** BUTTONS ****/
.buttonwrap {margin: 10px 0; text-align: center;}

.button1 {display: inline-block; margin: 5px; padding: 13px; text-align: center; text-decoration: none;}

.buttoncol1 {color: #a14ade !important; text-shadow: 1px 1px 1px rgba(0,0,0, 0.1); font-weight: 500; font-size: 16px; line-height: 20px; text-transform: uppercase; border-radius: 0px; background: #FFF; transition: all 0.4s;}
.buttoncol1:hover {color: #FFF !important; text-shadow: 1px 1px 1px rgba(0,0,0, 0.2); background: #212121;}

.buttoncol2 {color: #FFF !important; text-shadow: 1px 1px 1px rgba(0,0,0, 0.1); font-weight: 500; font-size: 16px; line-height: 20px; text-transform: uppercase; border-radius: 0px; background: #a14ade; transition: all 0.4s;}
.buttoncol2:hover {color: #a14ade !important; text-shadow: 1px 1px 1px rgba(0,0,0, 0.2); background: #FFF;}

.buttoncol3 {color: #FFF !important; text-shadow: 1px 1px 1px rgba(0,0,0, 0.1); font-weight: 500; font-size: 16px; line-height: 20px; text-transform: uppercase; border-radius: 0px; background: #212121; transition: all 0.4s;}
.buttoncol3:hover {color: #FFF !important; text-shadow: 1px 1px 1px rgba(0,0,0, 0.2); background: #a14ade;}
/***********/






/**** YOUTUBEVIDEO ****/
.ytvideocontainer {width: 560px; height: 355px; padding: 10px; background: rgba(0,0,0, 0.1); box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 5px rgba(0,0,0, 0.2), 0 0 0 1px #FFF; display: block; margin: 1% auto;}
.ytvideo {display: block; width: 560px; height: 355px; margin: auto;}

@media screen and (max-width : 920px){ .ytvideo {width: 450px; height: 253px;} .ytvideocontainer {width: 450px; height: 253px;} }
@media screen and (max-width : 800px){ .ytvideo {width: 370px; height: 208px;} .ytvideocontainer {width: 370px; height: 208px; padding: 5px;} }
@media screen and (max-width : 680px){ .ytvideo {width: 550px; height: 309px;} .ytvideocontainer {width: 550px; height: 309px; padding: 10px;} }
@media screen and (max-width : 600px){ .ytvideo {width: 450px; height: 253px;} .ytvideocontainer {width: 450px; height: 253px;} }
@media screen and (max-width : 500px){ .ytvideo {width: 370px; height: 208px;} .ytvideocontainer {width: 370px; height: 208px; padding: 5px;} }
@media screen and (max-width : 400px){ .ytvideo {width: 280px; height: 158px;} .ytvideocontainer {width: 280px; height: 158px; padding: 5px;} }
/***********/












/**** MAGAZIN BOX ****/
.magazin {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.magazin > a {width: calc(33.3333% - 20px); margin: 10px; position: relative; background: #000; overflow: hidden; transition: all 0.5s;}
.magazin > a:hover {opacity: 1;}
.magazin > a > img {display: block; width: 100%; transition: all 0.5s;}
.magazin > a:hover > img {}
.magazin > a > strong {display: flex; width: calc(100% - 20px); height: calc(100% - 20px); padding: 10px; position: absolute; z-index: 10; align-items: center; justify-content: center; text-align: center !important; color: #FFF; text-shadow: 0 0 2px rgba(0,0,0, 0.3); font-weight: 300; font-size: 120%; line-height: 150%; transition: all 0.5s;}
.magazin > a:hover > strong {filter: blur(0px);}

@media screen and (min-width : 681px){
	.magazin > a {opacity: 0.5; box-shadow: 0 50px 30px rgba(0,0,0, 0.3);}
	.magazin > a:hover {box-shadow: 0 0 10px rgba(0,0,0, 0.3);}
	.magazin > a > strong {filter: blur(15px);}
	.magazin > a:nth-of-type(1) {transform: scale(.5, .5) translate(100%, 7%) skew(0deg, -5deg);}
	.magazin > a:nth-of-type(2) {transform: scale(.5, .5) translate(0%, 0);}
	.magazin > a:nth-of-type(3) {transform: scale(.5, .5) translate(-100%, 7%) skew(0deg, 5deg);}
	.magazin > a:nth-of-type(1):hover {transform: scale(1, 1) translate(50%, 0); position: relative; z-index: 10;}
	.magazin > a:nth-of-type(2):hover {transform: scale(1, 1) translate(0%, 0); position: relative; z-index: 10;}
	.magazin > a:nth-of-type(3):hover {transform: scale(1, 1) translate(-50%, 0); position: relative; z-index: 10;}
}

@media screen and (max-width : 680px){
	.magazin > a {width: calc(50% - 20px);}
}
@media screen and (max-width : 480px){
	.magazin > a {width: calc(100% - 20px);}
}

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







.fazit {background: #FFF; padding: 10px; margin: 30px 10px; box-shadow: 0 0 10px rgba(0,0,0, 0.1);}












/**** FOOTER ****/
footer {width: calc(100% - 40px); border-top: 1px solid rgba(0,0,0, 0.15); margin: 80px auto 0 auto; padding: 10px; text-align: center;}
footer a {opacity: 0.7;}
/***********/