* {font-family: 'Open Sans Condensed', sans-serif;font-size:1.05em}
body {background-color:#87bc36;margin-top:0}
p {margin:0 0 20px; color:#000}
.btn {background-color:rgb(226,38,11); border-radius:0; border-color:#e2260b}
a {color:rgb(226,38,11);}
.btn:hover {background-color:rgba(226,38,11,0.8);}
a:hover {color:rgba(226,38,11,0.8);}
.form-control:focus {border-color:#e2260b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(226,38,11,.6)}
.form-control, .alert {border-radius:0}
.form-group, .alert {max-width:80%}
input {margin-bottom:10px;}
.well {border-radius:0px;box-shadow:1px 1px 2px 2px rgba(0,0,0,.5);-webkit-box-shadow:1px 1px 2px 2px rgba(0,0,0,.5);background-color:rgba(255,255,255,0.6);margin:30px auto 20px auto;padding: 60px 19px;max-width:500px; min-height:500px} /* background-color:rgba(200,200,200,0.3) vorher */
label {color:#000}
.h1, .h2, .h3, h1, h2, h3 {margin-bottom:20px;}
#navbar {border-color:transparent;}
.navbar-fixed-top {background-color:rgba(255,255,255,0.4);}
.navbar-inverse .navbar-nav > li > a {color:#000; font-size:1em;}
.navbar-inverse .navbar-nav > li > a:hover {color:grey; }
.navbar-inverse .navbar-toggle .icon-bar {background-color:#000}
.container-fluid > .navbar-header, .container > .navbar-header img {display:none;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background-color:rgba(255,255,255,0.4)}
footer a, footer a:hover {color:#fff}
footer .glyphicon-menu-up {top:3px;}
.toTop:hover {text-decoration:none;}
.btn-primary:hover {border-color:#e2260b}
ol {margin-top:10px}
ol li {color:#000}
.small {color:#000}
.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {background-color:rgba(226,38,11,0.8);}
select {color:#000;margin-bottom:10px;}


/*CSS STARTSEITE */
#page-wrapper { background: url("../../images/hintergundvogelsberg.jpg") no-repeat ; background-color:#dae3a0;font-size:1em; color:#fff; padding:50px 0 30px 0}
#logoroehn { width: 200px; margin:20px auto}
#ueberschrift {width:505px; margin:0 auto; text-transform:uppercase; font-family: 'Amatic SC', cursive; font-size:2.4em; color:#000373; text-align:center; padding:5px}
.codeForm {width:80%}
.codeForm label {color:#000;}
.codeForm .form-group {display:flex;}
.codeForm input {height:50px;margin-bottom:0}
.cc_container .cc_message {color:#fff;}

.content 	{ width:500px; margin:2% auto}
.content center img {max-width:90%}
#eingabebox { padding:5%; background-color:#f3f3f3; display:flex; justify-content:flex-start; position:relative}
#eingabebox img { position:absolute}
#codebox 	{ width:60%; background-color:#fff; color:#939090; padding:10px; text-transform:uppercase; }
#okbutton { width:5%; background-color:#CC0509; color:#fff; padding:2px 10px; text-transform:uppercase; 
			font-family: 'Amatic SC', cursive; font-size:2em;}

#beschreibung { padding:5%; background-color:#fff; color:#000; }
.anleitung, .gewinne {display:flex; justify-content:space-around; margin:20px auto; height:auto;color:#000}
.gewinne img {margin:10px;width:calc(100% - 20px);}
.anleitungspunkte {  width:150px; }
.anleitungspunkte img { width:100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; background-color:#FFFFFF; }

.gedreht { 	color:#fff; background-color:#E10508; padding: 5px 5px; margin-left:2px; margin-right:2px; margin-top:-30px; margin-bottom:10px; 		
			text-align:center;  font-family: 'Amatic SC', cursive; font-size:1.2em; z-index:1000; 	-moz-transform: rotate(-5deg);
    		-webkit-transform: rotate(-5deg);
   			-o-transform: rotate(-5deg);
    		transform: rotate(-5deg);}
			
.content ul {list-style-type:inherit; text-align:left;  color:#000000; margin:5% }
.content ul li:before { content: "\2714" " ";}
.content li { list-style-type:none}



h1 { color:#000; display:inline; font-size:2.2em;font-family: 'Amatic SC'}
h2 { color:#000; font-family: 'Amatic SC', cursive; display:inline; font-size:5em; font-weight:normal; vertical-align: 30%;}
h3 { background-color:#E10508; font-family: 'Amatic SC', cursive; font-size:2.2em; color:#FFFFFF; text-align:center}
h4 {text-align:center;font-size:2em;}

.home p {text-align:center; color:#000000; padding:5% 2%}

.linie { border-bottom:dotted; size:1; width:100%}
#fuß { width:100%; height:30px; background-color:#87bc36}
.codeUebersicht h1,h2,h3 {font-size:2.5em}

.big-width {max-width:800px;text-align:left}
.big-width p, h1,h2,h4 {text-align:left;}
#info h3{font-size:2em;padding:10px}



@media (min-width:2000px){
#page-wrapper {background-size:cover}
.bigSized {background-size:cover !important}
body {background-size: 100% 100%;}
}

@media (min-width:768px) and (max-width:1199px){
	body {padding-top:0px !important;}	
	
}
@media (max-width:767px) {
	body {padding-top:0px !important;}
	#page-wrapper { background: url("../../images/hintergundvogelsberg-2.jpg") no-repeat ;background-color:#dae3a0;}
	.navbar-inverse .navbar-toggle .icon-bar {background-color:#000}
	.navbar-inverse .navbar-toggle {border-color:#000}
	.navbar-inverse .navbar-nav > li > a {color:#000;}
	.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {background-color:#87bc36}
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {color:#000}
	.form-group, .alert {max-width:100%;}
	.codeForm {width:70%}
	.navbar-inverse .navbar-collapse {background-color:rgba(255,255,255,0.6)}
}


@media 	(max-width:1170px) 	
{
	#container { width:100%; }
}

@media 	(max-width:500px) 	{
	#info h3{font-size:1.5em;}
	#logoroehn { width:40%; }
	#logoroehn img { width:100%}
	#ueberschrift { width:90%}
	#ueberschrift img { width:100%}
	.content { width:100%}
	.anleitung {flex-wrap:wrap;}
	.anleitungspunkte { }
	#codebox { width:80%; }
	#okbutton { width:10%;}
	#eingabebox img { display:none}
	.codeForm {width:100%}
}

@media 	(max-width:400) 	
{
	.anleitungspunkte img {  }
	#codebox { width:40%;  }

}