* { padding: 0px; margin: 0px; border: 0px;}
img {
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

@font-face { font-family: 'Raleway';
             src:url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');}

body {
	background-color: #FFFFFF;
	background-image:url(images/wrap_hint.jpg);
	background-repeat:repeat-y;

	font-family: 'Raleway', sans-serif;
	line-height:26px;
	color: #666;
	text-decoration: none;
	font-size: 18px;	
	overflow-x:hidden;
	
    
	
}

a { 
  border: 0px;
  padding: 0px; 
  margin: 0px;
  text-decoration: none;
  outline: none;
}

#content li { 
  
  margin-left:20px;
  list-style:square; 
  color: #009;
  line-height:1.0em;


 }

a:link {color: #900;}
a:visited {color: #900;}
a:hover { color: #666;}
a:focus { color: #666; }
a:active { color: #666; }

#nav a:link { color: #fff;}
#nav a:visited { color:#fff;}
#nav a:hover { color: #fff;}
#nav a:focus { color: #fff;}
#nav a:active { color: #fff;}



h1  {
  text-decoration: none;
  color: #00796A;
  font-family: 'Raleway', sans-serif;
  font-size: 1.9em;
  line-height:1.4em;
  font-weight:300 ;
  text-align:left;
  padding-top:20px;
  padding-bottom:20px;
  margin:0px;
  
}

@media screen and (max-width: 600px) {
	
h1  {
  
  font-size: 1.5em;
  line-height:1.5em;
}
	h5  {
  
  font-size: 1.5em;
  line-height:1.5em;
}
body {
	line-height:1.4em;
	font-size:1em;
}
	}

h2  {
  text-decoration: none;
  color: #222e5f;
  font-family: 'Raleway', sans-serif;
  font-size: 1.3em;
  font-weight: 400;
  line-height: normal;
    padding-top:20px;

}

h3  {
  text-decoration: none;
  color: #666;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
  line-height: normal;

}

h4  {
  text-decoration: none;
  color: #222e5f;
  font-family: 'Raleway', sans-serif;
  font-size: 1.3em;
  font-weight: 400;
  line-height: normal;
    padding-top:20px;

}

h5  {
  color: #333333;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
  line-height: normal;
}





#logo {
	
    height: 100px;
	width:100%;
	max-width:1000px;
	background-color:#FFF;
	margin:0 auto 0 auto;
	
}

#termin {
	background-color:#fff;
    right: 0px;
	top:150px;
	position:absolute;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	box-shadow: 5px 5px 5px 5px #000; 
	z-index: 5000;
}
@media only screen and ( max-width: 600px ) 
		{
#termin {
	width:100px;
	
}}

#booking {
	background-color:#fff;
    right: 0px;
	top:270px;
	position:absolute;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	box-shadow: 5px 5px 5px 5px #000; 
	z-index: 5000;
}
@media only screen and ( max-width: 600px ) 
		{
#booking {
	width:100px;
	top:240px;
}}

#navwrap
	{
	border-top: 1px solid #00a18c;
	border-bottom: 4px solid #00796A;
	background-color: #00a18c;
	width: 100%;
	font-size: 1.0em;
	height: 1.8em;
	z-index:20;
	}
	#nav
	{

	border-bottom: 4px solid #00796A;
	background-color: #00a18c;
	widh:100%;
	max-width:1000px;
	height: 1.8em;
	margin:0 auto 0 auto;
	z-index:20;
	}
	#nav ul { list-style: none;
		
			width: 100%; /* 1000 */
			font-family: 'Open Sans', sans-serif;
			position: absolute;
			
		
		}

			#nav > a
			{
				display: none;
			}

			#nav li
			{
				position: relative;
				
				
			}
				#nav li a
				{
				padding:0px 15px 0px 15px;
				color: #fff;
				display: block;
				}
				#nav li a:active
				{
				background-color: #00a18c;
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
			
				border-top-color: #000;
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#nav > ul
			{
				width:100%;
				height: 1.8em; /* 60 */
								
			}
				#nav > ul > li
				{
					width:auto;
					height: 100%;
					float: left;
				}
					#nav > ul > li > a
					{
						height: 100%;
						font-size: 0.9em;
						line-height: 1.8em; 
						text-align: center;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: 0px solid #fff;
						}
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
						border-bottom: 4px solid #00796A;
						color: #000 !important;
						background-color: #91FFF1;
						
						}


				/* second level */

				#nav li ul
				{
					width:200px;
					color:#fff!important;
					background-color: #00a18c;
					text-align: center;
					display: none;
					position: absolute;
					top: 100%;
					z-index: 100;
				}
					#nav li:hover ul
					{
						
						display: block;
						left: 0;
						right: 0;
					}
						#nav li:not( :first-child ):hover ul
						{
							
							left: -1px;
						}
						#nav li ul a
						{
							color:#fff !important;
							font-size: 0.9em;
							border-top: 1px solid #060;
							padding: 0.3em; 
						}
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
							color: #000 !important;
							background-color: #00D5BA;
							}
							#nav li:not( :last-child )  > ul
						{
						border-bottom-left-radius:10px;
						border-bottom-right-radius:10px;
						}
						#nav li:not( :last-child )  > :hover a
						{
						border-bottom-left-radius:10px;
						border-bottom-right-radius:10px;
						}
						

		
			
						
		@media only screen and ( max-width: 1050px ) 
		{
			html
			{
				font-size: 100%; 
			}
			

			#nav
			{
				height:2.0em;
				padding-left:0px !important;
				position: relative;
				top: auto;
				left: auto;
				border-bottom: 4px solid #060;
			}
				#nav > a
				{
					height:1.8em;
       			 }
       				 #nav:not( :target ) > a:first-of-type,
       				 #nav:target > a:last-of-type
       					 {
							
							color:#fff;
							background-color:#00a18c;
							text-align:center;
							padding-top:10px;
         				   	display: block;
							border-bottom:2px solid #000;
       					
				
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						
						top: 35%;
						left: 25%;
						right: 25%;
						
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				width: 100% !important;
				background-color: #00a18c;
				height: auto;
				font-size:1.0em;
				line-height:0.6em;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					
					width: 100%;
					float: none;
				}
					#nav > ul > li > a
					{	
						width: 100% !important;
						height: 2.3em !important;
						line-height:2.3em !important;
						text-align: center;
						padding: 0 0;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px solid #060;
						}
						
						#nav > ul > :last-child > a
						{
							border-right: none;
							border-bottom:3px solid #666;
						}


				/* second level */

				#nav li ul {
				width: 100% !important;
				background-color: #008070;
				position: static;
				height: auto;
				line-height: 2.3em;
				text-align: center;
				padding: 0;
				border-bottom: 1px solid #999;
				}
				#nav li ul a{	
					width: 100% !important;
	
					position: static;
					height:auto;
					line-height: 2.3em;
					text-align: center;
					padding: 0 0;
					
				}
				
		}


#header {
	margin:0 auto 0 auto;
	width: 100%;
	max-width: 1000px;
	
	
	
}
#headerwrapper {
	background-color: #00a18c;
	width: 100%;
	border-bottom: 5px solid #00796A;
	
}

#wrapper {
	width:100%;
}


#content {
	
	background-color:white;
	width:90%;
	max-width:1060px;
	color:#666;
	min-height:300px;
	padding:0px 20px 0px 20px;
	padding-bottom:100px;
	margin:0 auto 0 auto;
	z-index:10;
}




#footer {
	
	background-color:#333;
	width:100%;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	min-height:380px;
	text-align:center; 
	float:left;
	}

.colorbox {
	background-color: #00a08b;
	color:white;
	border-radius:10px;
	padding:20px;
	}
	.colorbox a:link {color: #AFDCD7;}
	.colorbox a:visited {color: #AFDCD7;}
	.colorbox a:hover {color: #FFF;}
	.colorbox a:focus {color: #AFDCD7; }
	.colorbox a:active {color: #AFDCD7;}


/* ============ Das Kontaktformular */
form #kontaktformular{
	color: #666;  
	font-family:Arial, Helvetica, sans-serif;
	width:400px;
	max-width:98%;

}
form #terminformular{
	color: #666;  
	font-family:Arial, Helvetica, sans-serif;
	max-width:98%;

}


input#absendertermin, #nachrichttermin, #nametermin, #teltermin, #betrefftermin, #angebote {
	
	  width:300px;
	max-width:98%;
  min-height: 25px;
  font-size:13px;
  border: 1px solid #fff;
  
}

input#firma {
  width:0px;
	max-width:0%;
  min-height: 0px;
  font-size:0px;
  border: 0px solid #fff;
  
  
}

label {
  display: block;
  cursor: pointer;
}
input#absender, textarea, #name, #firma, #anschrift, #tel, #nachricht, #vorname, #nachname, #geburtsdatum, #ausweistyp, #ausweisnummer, #strasse, #plz, #ort, #land, #telefon, #email, #hochschule, #immatrikulationsnummer, #reisebeginn, #reiseende, #reisedauer, #wunschfluglinie, #abflughafen, #ziel, #reiseart, #preis, #verpflegung, #hotelkategorie, #zimmer, #erwachsene, #kinder, #anmerkungen, #name, #alter_kinder {
  width:400px;
	max-width:98%;
  min-height: 30px;
  font-size:16px;
  border: 2px solid #dddddd;
  
  
}




input#absender:focus, #name:focus, #firma:focus, #anschrift:focus, #tel:focus, #nachricht:focus, textarea:focus, #vorname:focus, #nachname:focus, #geburtsdatum:focus, #ausweistyp:focus, #ausweisnummer:focus, #strasse:focus, #plz:focus, #ort:focus, #land:focus, #telefon:focus, #email:focus, #hochschule:focus, #immatrikulationsnummer:focus, #reisebeginn:focus, #reiseende:focus, #reisedauer:focus, #wunschfluglinie:focus, #abflughafen:focus, #ziel:focus, #reiseart:focus, #preis:focus, #verpflegung:focus, #hotelkategorie:focus, #zimmer:focus, #erwachsene:focus, #kinder:focus, #anmerkungen:focus, #name:focus, #alter_kinder:focus {
  background-color:#F0F0F0;
  color:#666666;
  
}

.button {
  background-color: #00a08b;
  color:white;
  border-radius:10px;
  font-family: Verdana, Arial;
  font-size:large;
  border:none;
  cursor: pointer;
  padding: 10px;
}


/* ====================== */

select, option, textarea, input
{
font-size: 11px;
font-family: Geneva,Verdana,Arial;
color: #666;
background-color: #ffffff;
border:1px solid silver;

}

/* ===========BUTTONS=========== */

.btn {
  
  border-radius: 0px;
  padding: 0px 4px 4px 4px;
  text-decoration: none;
}

.btnhover, .btn:hover, .btnhover a:link, .btnhover a:visited {
  border-top:2px silver solid;
  color:#9C0 !important; 
  text-decoration: none;
}


#bcom {

	height: 1200px;
    width: 100%;
}
@media screen and (max-width: 600px) {
#bcom {
	height: 0px;
    width: 0%;
	position: absolute;
	top: 5000px;
	visibility: hidden;
}
}
.one {

	width:49%;
	padding-right:1%;
	text-align:justify;
	margin-bottom:10px;
	float:left;
}

#logoimg{
		width:350px;
		}


.homebox {
	

	margin-right:20px;
	float:left;
	}

		
@media screen and (max-width: 600px) {
.one {
	width:99% !important; 
	padding-right:0px;
	padding-left:0px;
	margin-bottom:10px;
  }
  
  #logoimg{
		width:330px;
		}
		
.homebox {
	
	margin-right:10px;
	}		
}	

.swap1 {
width:150px; 
position:absolute;	
	} 
.swap2 {
width:150px;
	}
	
.swapMe img { 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
} 
.swap1, .swapMe:hover .swap2 { 
-webkit-opacity: 1; 
-moz-opacity: 1; 
opacity: 1; 

} 
.swapMe:hover .swap1, .swap2 { 
-webkit-opacity: 0; 
-moz-opacity: 0; 
opacity: 0; 
}
		
	
	#sunnycars{
		width:100%; min-height:520px;
		}
	@media screen and (max-width: 1100px) {
		#sunnycars{
		width:100%; min-height:950px;
		}
	}
	
	
	
/* ===========REISEERFAHRUNGEN=========== */
	
.profilbild	{
	width:80px;
	border-radius:48px;
	border:7px solid #00a08b;
	}
	
	
.reiseerfahrung{
	width: 40%;
	max-width:500px;
	min-height:1050px;
	
	text-align:center;
	padding: 20px;
	margin: 10px;
	border:1px solid #666;

	float: left;
	
	}
	@media screen and (max-width: 800px) {
		.reiseerfahrung {
	width:88% !important; 
	margin:0px 0px 10px 0px;
	}
	div.reiseerfahrung {display: inline-block;}
	
	}



.aldianabox	{
	border-radius:5px;
	border:1px solid #737373;
	padding: 20px;
	margin:10px;
	width:400px;
	max-width:90%;
	float:left;
	}