* Global styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
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, font, 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{
	margin:0;
	padding:0;
	border:none;
	outline:0;
}
html,body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	font-family:"Century Gothic", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:15px;
	
}
:focus{
	outline:none;
}
hr{
	border:1px solid #000;
}
table{
	font-size:15px;
	border-collapse:collapse;
	border-spacing:0;
}
a{
	color:#1d1d1e;
}
a:hover{
	color:#1d1d1e;
	text-decoration:none;
}
p{
	margin-bottom:10px;
}
ul,ol{
	/*margin:5px 0 10px 25px;*/
}
/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

#wrap {min-height: 100%; margin:0 auto;}

#main {overflow:auto;
	padding-bottom: 100px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -100px; /* negative value of footer height */
	height: 100px;
	clear:both;
	
	} 
/* ---------------------- */
#container{
	position:relative;
	width:1000px;
	margin:0 auto;
	min-height:100%;
}
#header{
	position:relative;
	height:310px;
	float:left;
	width:1000px;
}
#header #logo {
	position:relative;
	float:left;
	width:422px;
}
#header #slideshow {
	position:relative;
	float:right;
	width:565px;
}

#menu{
	position:relative;
	float:left;
	height:60px;
	margin-top:20px;
	margin-left:0px;
}
#menu #nav{
	position:relative;
	list-style:none;
	margin:0px 0 0 0px;
	float:left;
	font-size:13px;
	text-transform:uppercase;	
	margin-left:0;
	padding-left:0;
}
#menu #nav li{
	position:relative;
	float:left;
}
#menu #nav a{
	padding:5px 6px;
	display:block;
	color:#fff;
	text-decoration:none;
}
#menu #nav a:hover, #menu #nav a.selected{
	color:#fff;
	background-color:#a81d68;
}
#content{
	padding:20px 20px 10px;
	width:960px;
	height:auto;
	position:relative;
	float:left;
	text-align:justify;
	background-image:url(images/content_bg.png);
	background-repeat:repeat;
	background-position:top left;
	color:#262728;
	margin-bottom:25px;
	
}
#content h1{
	font-size:30px;
	margin-bottom:10px;
	color:#a81d68;
	font-weight:bold;
	text-transform:uppercase;
	margin-top:0;
	width:955px;
	border-bottom: 1px dotted #a81d68;
	height:45px;
}
#content h2{
	font-size:20px;
	margin-bottom:10px;
	color:#a81d68;
}
#content a{
	color:#1d1d1e;
}
#footer{
	position:relative;
	width:100%;
	height:100px;
	color:#fff;
	float:left;
	background-color:#a81d68;/*
	background-image:url(images/footer_bg.png);
	background-repeat:repeat;*/
}
#footer #tabel {
	position:relative;
	float:left;
	width:500px;
}
#footer #datum {
	
	margin-left:10px;
	margin-top:-5px;
}
#footer #facebook {
	
}
#footer #copy {
	position:relative;
	float:right;
	margin-top:75px;
	margin-right:10px;
}


/* nivo slider */
.theme-default #slider {
    margin:0px auto 0 auto;
    width:555px; /* Make sure your images are the same size */
    height:251px; /* Make sure your images are the same size */
}
.clear {
	clear:both;
}


#toggle {display:none;}

/* RESPONSIVE */

@media only screen and (max-width: 1200px){
}
@media only screen and (max-width: 1024px){
    #container { width:98%;}
    #toggle {display:block;}
    #menu{display:none;}
    #header { margin-top:60px; width:100%;}
    .overlay-content ul { margin-top:-10px;}
    .overlay-content ul li a { font-size:16px; padding: 0;}
    .overlay-content ul li { list-style:none; padding:0; line-height:23px;}
    .overlay .overlay-content > div {margin: 0 auto 10px!important;}
    .overlay-content ul#nav { margin-left:0px!important; padding-left:0px;}
    #footer #tabel { width:100%!important;}
    #main { width:100%!important;}
}
@media only screen and (max-width: 1000px){
    #logo img{width:340px; height:auto;}
    #logo div{margin-left:10px!important;}
    #header #logo { width:350px;}
}
@media only screen and (max-width: 900px){
    #logo img{width:300px; height:auto;}
    #header #logo { width:310px;}
    #slideshow #slider {width: 419px!important;}
    #header #slideshow {width: 419px!important;}
    #content h1 { width:100%; height:auto;}
    #content { width:95%;}
}
@media only screen and (max-width: 800px){
     #content h1 {height:auto; font-size:27px!important;}
     #content table img { width:350px; height:auto;}
     #content table { width:95%;}
     #footer #copy { margin-top:0px!important; float:left!important;}
}
@media only screen and (max-width: 750px){
    #logo img{width:300px; height:auto; margin:0 auto!important;}
    #header #logo { width:100%; text-align: center; margin:0 auto 25px!important;}
    #header #logo #datum { margin:0 auto!important; width:100%!important; text-align:center; }
    #slideshow #slider {width: 90%!important;}
    #header #slideshow {width: 90%!important;}
    #header  { height:auto; margin-bottom:35px;}
    #content table img { width:280px; height:auto;}
    #footer #copy { margin-right:0px!important;}
      
}
@media only screen and (max-width: 700px){
    #content { width:93%;}
    #content h1 {font-size:24px!important;}
    #content img { width:250px!important;}
}
@media only screen and (max-width: 650px){
    #header #slideshow { float:left; width:100%!important;}
    #footer table { width:100%;}
    #footer #copy { position:relative; float:left; width:100%; margin-top:10px;}
    #footer { height:auto!important;}
    #footer #datum { margin-left:0!important; font-size:10px;}
    #content table img { width:250px!important; height:auto;}
    #content .rommel{ margin-left:0!important; width:100%;}
    #content .kinder { display:none;}
    #content .bart img { width:100px!important; height:auto;}   
    }
@media only screen and (max-width: 550px){
    #content h1 {text-align:left!important;}
    #content table img { width:240px !important; height:auto;}
}
@media only screen and (max-width: 500px){
   #content { width:91%!important;} 
   body{font-size:13px!important;}
   #content table img { width:200px !important; height:auto;}
   video { width:400px; height:225px;}
}
@media only screen and (max-width: 450px){
    #content { width:88%!important;}
    #content table img { width:180px!important; height:auto;}
    #content .rommel input, #content .rommel textarea { width: 127px!important;}
}
@media only screen and (max-width: 375px){
    video { width:300px; height:170px;}
    #slideshow { display:none;}
    #footer #facebook { display:none!important;}
    #footer {width:100%!important;}
    #footer #copy { margin-right:10px!imporant;}
    #logo img{width:250px; height:auto; margin:0 auto!important;}
    #header #logo { width:100%; text-align: center; margin:0 auto 25px!important;}
    #header #logo #datum { margin:0 auto!important; width:100%!important; text-align:center; }
    #content table img { width:140px!important; height:auto;}
    #footer #datum { width:300px!important;}
}
@media only screen and (max-width: 320px){
    video { width:280px; height:165px;}
    #content { width:85%!important;}
    #content img, #content div { width:80%; height:auto; float:left!important; margin-bottom:15px;}
    #content table img { width:120px!important; height:auto;}
    
}