html{margin: 0;}

body{
	background: #f1f1f1;
	
	color: #ccc;
	font-family: 'Oswald', sans-serif;
	padding: 0px 0px 0px 0px;
	font-size: 18px;
	overflow-x: hidden;
}
@media(max-width:768px){body{margin: 0px 0px 0px 0px;}}
@media(min-width:769px){body{margin: 0px 0px 0px 0px;}}









/*CENTER*/

@media(min-width:100px)	{.mycenter{text-align: center; margin: 0px auto 0px auto;}}
@media(min-width:500px)	{.mycenter{text-align: center; margin: 30px auto 0px auto;}}
@media(min-width:100px)	{.copyright{font-size: 12px;}}
@media(min-width:500px)	{.copyright{font-size: 14px;}}


.linkmobile{display: block;}
.linkdesktop{display: none;}


.imgfull{width: 100%;}

a:hover{text-decoration: none;}


/* ====================================================================================================================== */
/* Footer */
/* ====================================================================================================================== */


	#footer{
		background: #eb79ce;
		border-top: 10px solid #fff;
		text-align: center;
		padding: 20px 0px 40px 0px;
		margin-top: 0px;
		color: #fff;
	}
	#footer a {color: #fff;}

/* ====================================================================================================================== */
/* Controller Mobile */
/* ====================================================================================================================== */
	@media(max-width:768px){.mobile_navi{display: block;}}
	@media(min-width:769px){.mobile_navi{display: none;}}
	
	/* @media(max-width:768px){.desktop{display: none;}} */
	/* @media(min-width:769px){.desktop{display: block;}} */
	@media(max-width:767px){.mobilepad{display: block;}}
	@media(min-width:768px){.mobilepad{display: none;}}


	@media(min-width:300px){.desktop{display: none;}}
	@media(min-width:992px){.desktop{display: block;}}
	
	@media(min-width:300px){.mobile{display: block;}}
	@media(min-width:992px){.mobile{display: none;}}


/* ====================================================================================================================== */
/* Logo */
/* ====================================================================================================================== */

.topcolor{ text-align: center;}
/* @media(min-width:100px)	{.topcolor{height: 40px;}} */
/* @media(min-width:500px)	{.topcolor{height: 60px;}} */


.topcolor img{width: 100%;}



@media(min-width:100px)	{.logo{width: 100px; padding: 20px 10px 5px 10px; z-index: 1;}}
@media(min-width:768px)	{.logo{width: auto; padding: 20px;z-index: 1;}}

/* ====================================================================================================================== */
/* NAVBAR */
/* ====================================================================================================================== */

.navbarsandy{ background: #000;}

.navbarsandy h1{
	/* margin: 20px 0px; */
	margin: 16px 0px 20px 0px;
	color: #fff;
}

@media(max-width:767px)	{.navbarsandy h1{font-size:22px; font-weight: 300;}}


.socials{
	border: 0px solid red;
	text-align: right;
	padding: 15px 0px 0px 0px;
}
.socials i {font-size: 30px; margin: 10px; color: #fff;}
@media(max-width:767px)	{.socials i {font-size: 20px; margin: 5px; color: #fff;}}


/* ====================================================================================================================== */
/* WELCOME */
/* ====================================================================================================================== */

#welcome{
	background: #fae8f6;
	/* background-image: url(../img/bg.jpg); */
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 100%;
	padding: 30px 0px;
	}
@media(max-width:767px)	{
	#welcome{
		padding: 20px 0px 5px 0px;
	}
}	
	
	
	
	
#welcome img{width: 100%;}
	
#welcome .mainimg{
	margin-bottom: 20px;
}



/* ====================================================================================================================== */
/* BIOBOX */
/* ====================================================================================================================== */


.biobox{
	padding: 0px 0px 20px 0px;
	line-height: 36px;
}
@media(max-width:767px)	{
	.biobox{
		padding: 20px 0px 20px 0px;
		line-height: 36px;
	}
}


.bioboxtitle{
	/* background: #000; */
	background-color: rgba(0, 0, 0, 0.8); 
	border-bottom: 4px solid #d34996;
}
.bioboxtitle h2{
	margin: 0px;
	padding: 10px 10px;
	color: #fff;
	font-weight: 300;
}

.bioboxtext{
	background: #fff;
	color: #000;
	padding: 0px 0px 8px 0px;
}
@media(max-width:767px)	{
	.bioboxtext{
		font-size: 15px;
	}
}



.bioone{font-weight: 600;}
.biotwo{font-weight: 300;}





/**/

.infobox{
	background-color: rgba(0, 0, 0, 0.8); 
	padding: 10px 10px;
	color:#fff;
}
.infobox h3{
	color:#d34996;
}
.infobox p{
	font-weight: 300;
}


.infoboxtwo{
	background:#fff;
	padding: 10px 10px 0px 10px;
	color: #000;
	margin: 20px 0px;
}

.infoboxtwo img{margin: 5px 0px;}


/* ====================================================================================================================== */
/* Aboutme */
/* ====================================================================================================================== */


	
#aboutme{
	background: #331f33;
	padding: 50px 0px 50px 0px;
}

@media(max-width:767px)	{
	#aboutme{
		background: #331f33;
		padding: 20px 0px 20px 0px;
	}	
}





#aboutme h2{
	background: #d34996;
	color: #fff;
	padding: 20px;
	margin: 10px 0px 10px 0px;
}

#aboutme img{width: 100%;}

#aboutme h3{
	color: #fff;
}

#aboutme p{
	color: #fff;
	font-weight: 300;
	font-size: 22px;
	line-height: 40px;
	padding: 20px 0px;
}
@media(max-width:767px)	{
	#aboutme p{
		font-size: 18px;
		line-height: 30px;
	}	
}




/**/

.addonimg{
	margin: 20px 0px;
}









/* ====================================================================================================================== */
/* TYPO H1 */
/* ====================================================================================================================== */

.headlineh1{color: #000;  font-weight: 200; }	
@media(min-width:100px) {.headlineh1{font-size: 12px; margin-top: 0px; padding: 10px 0px 0px 0px;text-align: center; letter-spacing:0px;}} 
@media(min-width:500px)	{.headlineh1{font-size: 16px; margin-top: 5px; padding: 10px 0px; text-align: center; letter-spacing:5px;}} 
@media(min-width:768px)	{.headlineh1{font-size: 16px; margin-top: 12px; padding: 10px 0px 0px 30px; text-align: center; letter-spacing:5px;}} 
@media(min-width:992px)	{.headlineh1{font-size: 16px; margin-top: 12px; padding: 10px 0px 0px 0px; text-align: center; letter-spacing:5px;}} 	






/* TYPO H2 */	

.headlineh2{
	margin: 0px 0px 0px 0px; 
	padding-bottom: 0px;
	color: #fc5a58; 
	font-size: 44px;  
	font-weight: 600;
	text-align: center;
	}		








/*LANGER NAME*/
@media(min-width:100px) {.headlineh2{border-bottom: 0px dashed #fff; padding-bottom: 0px; font-size: 30px;}} 
@media(min-width:500px) {.headlineh2{border-bottom: 0px dashed #fff; padding-bottom: 0px; font-size: 30px;}} 
@media(min-width:768px)	{.headlineh2{border-bottom: 0px dashed #fff; padding-bottom: 20px; font-size: 50px; }}
@media(min-width:992px)	{.headlineh2{border-bottom: 0px dashed #fff; padding-bottom: 20px; font-size: 52px; }} 
@media(min-width:1200px){.headlineh2{border-bottom: 0px dashed #fff; padding-bottom: 5px; font-size: 60px; }} 





/* TYPO H3 */	

.headlineh3{color: #333; font-size: 30px;  font-weight: 600; text-align: center;}		


@media(min-width:100px) {.headlineh3{padding-bottom: 20px; font-size: 20px; margin-left: 0px; margin-top: 0px;}} 
@media(min-width:500px) {.headlineh3{padding-bottom: 20px; font-size: 20px; margin-left: 0px; margin-top: 0px;}} 
@media(min-width:768px)	{.headlineh3{padding-bottom: 20px; font-size: 20px; margin-left: 0px; margin-top: 0px;}} 
@media(min-width:992px)	{.headlineh3{padding-bottom: 20px; font-size: 26px; margin-left: 0px;}} 
@media(min-width:1200px){.headlineh3{padding-bottom: 20px; font-size: 36px; margin-left: 0px;}} 









/*******************************************************************************************************************************************************************/
/* BTN */
/*******************************************************************************************************************************************************************/
	
	@media(min-width:300px){	
		.btnblockone{padding: 0px 0px;}
		.btnblocktwo{padding: 10px 0px;}	
	}	
	@media(min-width:768px){	
		.btnblockone{padding: 30px 0px;}
		.btnblocktwo{padding: 20px 0px;}	
	}	

	
	
	.mybtn{
		background:#33cc00;
		color: #fff;
		margin: 20px auto;
		padding: 5px 120px;
		text-decoration: none;

	}
	@media(min-width:100px){.mybtn{width: 100%; display: block;}}
	@media(min-width:768px){.mybtn{width: 400px; display: inline;}}
	
	.mybtn:hover{
		background:#006600;
		color: #fff;
		padding: 5px 120px;
		
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		text-decoration: none;
	}	

	@media(min-width:100px){.mybtn{padding: 20px 30px; font-size: 18px;}}
	@media(min-width:500px){.mybtn{padding: 10px 80px; font-size: 32px;}}
	
	@media(min-width:100px){.mybtn:hover{padding: 10px 30px; font-size: 18px;}}
	@media(min-width:500px){.mybtn:hover{padding: 10px 80px; font-size: 32px;}}	
	


	
	/*second / HP LINK */

	@media(min-width:100px){.mybtnhp{color: #333;margin: 0px auto; padding: 0px 20px; display: block;}}
	@media(min-width:768px){.mybtnhp{color: #333;margin: 0px auto; padding: 0px 20px; display: inline;}}
	
	


/*MODAL*/
	#myModalLabel{color: #000;}
	
	#myModal p{padding: 5px 0px 5px; color: #000; font-size: 12px; }
	
	
	
	
	@media(min-width:100px) {#myModal input {width: 100%;}}
	@media(min-width:768px) {#myModal input {width: 59%;}}
	
	@media(min-width:100px) {#myModal .mysendbutton {background: #33cc00; margin-top: 10px; width: 100%; padding: 20px 10px;}}
	@media(min-width:768px) {#myModal .mysendbutton {background: #33cc00; margin-top: 0px; width: 40%;  padding: 7px 10px;}}
	
	

	
	@media(min-width:100px) {.modal-dialog {margin: 30px auto 30px auto;}}
	@media(min-width:768px) {.modal-dialog {margin: 100px auto 30px auto;}}
	
	/*Modal Content*/
	
	.modal-clubx{
		background: #966e57;
		margin-bottom: 20px;
	}
	.modal-clubx h4 {color: #fff;}
	.modal-kost{font-size: 30px;}
	.nopaddingright{padding-right: 0px;}
	.modalline {border-top: 2px solid #ccac8e;}

	/*btnmitglied*/
	.btnmitglied{color: #000; padding-bottom:10px; font-size: 14px;}
	

	
	
	.smalllinktext{font-size:14px; color:#ccc;}
	
	
	
	





	
	
.border20{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}
	
	
#
	

.white{background: #fff; padding: 20px 0px;}
.grey{background: #fff;}


.fullsizeimg{background: #78b8d2;}
.cyan{background: #78b8d2; margin-top: 30px;}
.shaddow{background: url(../img/shaddow.jpg) repeat-x; height: 20px;  margin-bottom: 20px;}





@media(min-width:992px){
#exampleInputAmount{width: 300px;}
}
@media(min-width:1100px){
#exampleInputAmount{width: 350px;}
}




/* ====================================================================================================================== */
/* Classes for images  */
/* ====================================================================================================================== */
	.fullimg{width: 100%;}
	.refimg{border: 1px solid #ccc;}


	@media(max-width:768px){.floatingimage{width: 100%;}}
	@media(min-width:769px){.floatingimage{float:left; width: 300px; margin: 5px 20px 20px 0px;}}
	
	.imgtitle{text-align: left; width: 100%; font-size: 14px;}
	
	
	
	


/* ==================================================================================================================== */
/* CONTAINER */
/* ==================================================================================================================== */
	.container{border: 0px solid red;}

	@media (min-width: 768px) {
	  .container {
		width: 90%;
	  }
	}
	@media (min-width: 992px) {
	  .container {
	   width: 90%;
	  }
	}
	@media (min-width: 1200px) {
	  .container {
		width: 1100px;
	  }
	}
	@media (min-width: 1600px) {
	  .container {
		width: 1280px;
	  }
	}
	
	
	
	

/* ==================================================================================================================== */
/* content */
/* ==================================================================================================================== */

	.thecontent{border: 1px solid #ccc; padding: 20px; text-align: justify; margin-bottom: 20px;box-shadow: 2px 2px 2px #ccc; background:#fff;}

/* 	@media (min-width: 100px){.thecontent{border: 1px solid #ccc; padding-left: 20px;}}
	@media (min-width: 992px){.thecontent{border: 1px solid #ccc; padding-left: 20px;}} */


.thecontent:hover{border: 1px solid #8bb125;}


	.thecontent img:hover{
	 -webkit-transform:scale(1.1); /* Safari and Chrome */
		-moz-transform:scale(1.1); /* Firefox */
		-ms-transform:scale(1.1); /* IE 9 */
		-o-transform:scale(1.1); /* Opera */
		 transform:scale(1.1);
	}
	.thecontent img{
	 -webkit-transition: all 1s ease; /* Safari and Chrome */
		-moz-transition: all 1s ease; /* Firefox */
		-ms-transition: all 1s ease; /* IE 9 */
		-o-transition: all 1s ease; /* Opera */
		transition: all 1s ease;
	}


/* ==================================================================================================================== */
/* TYPO */
/* ==================================================================================================================== */





/* ==================================================================================================================== */
/* INDEX */
/* ==================================================================================================================== */
	
	/* H1 Class */
	.titlepage{ padding-right: 0px; font-family: 'Titillium Web', sans-serif!important; margin-top: 0px;}

	@media (min-width: 100px) {.titlepage {font-size: 18px; font-weight: normal; border-bottom: 0px solid #626262; margin-bottom: 20px; margin-top: 0px; text-align: center;}}
	@media (min-width: 768px) {.titlepage {font-size: 18px; font-weight: normal; border-bottom: 0px solid #626262; margin-bottom: 20px;margin-top: 0px; text-align: center;}}
	@media (min-width: 992px) {.titlepage {font-size: 18px; font-weight: normal; border-bottom: 0px solid #626262; margin-bottom: 20px; margin-top: 0px;text-align: center;}}
	@media (min-width: 1500px){.titlepage {font-size: 24px; font-weight: normal; border-bottom: 0px solid #626262;}}

	
	
	@media (min-width: 100px) {.price {font-size: 16px; font-weight: normal; border-bottom: 0px solid #626262; margin-bottom: 20px; margin-top: 0px; text-align: center;}}
	@media (min-width: 768px) {.price {font-size: 16px; font-weight: normal; border-bottom: 0px solid #626262; margin-bottom: 20px;margin-top: 0px; text-align: center;}}
	@media (min-width: 992px) {.price {font-size: 16px; font-weight: normal; border-bottom: 0px solid #626262; margin-bottom: 20px; margin-top: 0px;text-align: center;}}
	@media (min-width: 1500px){.price {font-size: 20px; font-weight: normal; border-bottom: 0px solid #626262;}}
	
	
	
	.textcolorwhite{color: #fff!important;}
	.textcolorgrey{color: #ccc!important;}

	/* BTN */
	.mygreen{background: #8bb125; color: #fff; font-size: 22px; font-family: 'Titillium Web', sans-serif!important;}
	.mygreen:hover{background: #78b8d2; color: #fff; font-family: 'Titillium Web', sans-serif!important;}
	
	@media (min-width: 300px) {.mygreen{font-size: 22px;}}
	@media (min-width: 768px) {.mygreen{font-size: 10px;}}
	@media (min-width: 992px) {.mygreen{font-size: 18px;}}

/* ==================================================================================================================== */
/* DEFAULT CLASS */
/* ==================================================================================================================== */

	.nopadding{padding: 0px;}
	.my_padding_trbl_10 {padding: 10px;}
	.my_padding_trbl_15 {padding: 15px;}
	.clear{clear:both;}



	.textcenter{text-align: center;}

	.implink{color: #999;}
	.implink:hover{color: #999;}

	.h1title{font-size: 22px; margin-top: 50px;}
	.smalltext{font-size: 12px;}