/* FONTS */

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/tajawal-v3-latin-300.eot'); 
  src: local('Tajawal Light'), local('Tajawal-Light'),
       url('webfonts/tajawal-v3-latin-300.eot?#iefix') format('embedded-opentype'), 
       url('webfonts/tajawal-v3-latin-300.woff2') format('woff2'), 
       url('webfonts/tajawal-v3-latin-300.woff') format('woff'), 
       url('webfonts/tajawal-v3-latin-300.ttf') format('truetype'), 
       url('webfonts/tajawal-v3-latin-300.svg#Tajawal') format('svg');
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/tajawal-v3-latin-regular.eot');
  src: local('Tajawal'), local('Tajawal-Regular'),
       url('webfonts/tajawal-v3-latin-regular.eot?#iefix') format('embedded-opentype'), 
       url('webfonts/tajawal-v3-latin-regular.woff2') format('woff2'),
       url('webfonts/tajawal-v3-latin-regular.woff') format('woff'),
       url('webfonts/tajawal-v3-latin-regular.ttf') format('truetype'), 
       url('webfonts/tajawal-v3-latin-regular.svg#Tajawal') format('svg');
}



/* ALLGEMEINE STILE */

html{height: 100%;}
body {min-height: 100%; position:relative; margin:0px; padding:0px; background:#fff; font-family: 'Tajawal', Arial, Helvetica, sans-serif; font-weight:400; font-size:14px; color:#999; text-align:left;}
h1 {display:inline; font-weight:bold; font-size:inherit;}
h2 {display:inline; font-size:inherit; font-weight:inherit;}
li {list-style: none; display:inline;}
ul {margin:0px; padding:0px;}
strong {font-weight:inherit;}

a {outline:none;}
a:link {outline:none;}
a img {border : 0 none; outline:none;}

a:link {text-decoration: none; color:inherit;}
a:hover {color:#f44b4d;}
a:active {text-decoration: none; color:inherit;}
a:visited {text-decoration: none; color:inherit;}

.bold {font-weight:bold;}
.nowrap {white-space:nowrap; color:inherit;}
.schatten {-webkit-box-shadow: 0px 1px 7px #000; -moz-box-shadow: 0px 1px 7px #000; box-shadow: 0px 1px 7px #000;}
.markup {color:#f44b4d;}


/* HEADER */

#header {position:fixed; width:100%; height:91px; min-width:300px; background: url(nav/Header_BG_01.png) repeat-x #fff; z-index:100; }
#logo {position:absolute; width:267px; height:145px; z-index:50; top:51px; left: 20px;}
#logo_small {position:absolute; width:267px; height:145px; z-index:50; top:55px; left: 20px;}



/* NAVIGATION */	

@media screen and (max-width: 777px) {

	.desktop {display:none !important; visibility:hidden !important;}
	#icon_menu_mobile{ height:30px; width:30px; z-index:1003; position:absolute; right:30px; top:30px; cursor:pointer; background:url(nav/icon_menu_mobile.png) no-repeat center center;}	
	#navigation {height:100%; width:100%; display:block; position:absolute; float:right; right:0px; top:0px; /*background:url(nav/icon_menu_mobile.png) no-repeat center right 20px;*/ z-index:1001;}
	#navigation img {width:100px; height:auto;}
	#navigation ul {display:none; width:100%; padding-top:31%; padding-bottom:100%; height:auto; margin-top:91px; background:#fff;}
	#navigation :hover ul {display:block; width:100%; position:absolute; margin-top:91px; top:0px; right:0px;}
	#navigation li:first-child {display:block; margin-top:-94px; width:100%; background:#ccc; text-align:center;}
	#navigation li a:link {display:block; width:100%; padding:4% 0px; margin:3px 0px; text-align:center; background:#fff; opacity:1.0; font-size:1.4em; color:#666; font-weight:300; text-decoration:none;}
	#navigation li a:hover {background: #ffffff; color:#f44b4d; opacity:1.0;}
	#navigation li a:active {}
	#navigation li a:visited {}
}

@media screen and (min-width: 778px) {
	
	.mobile {display:none !important; visibility:hidden !important;}
	#navigation {height:100%; position:absolute; top:43%; right:50px; text-align:right;}
	#navigation li {display:inline; margin:0px 6px;}
	#navigation li a:link {font-size:16px; color:#777; font-weight:300; text-decoration:none;}
	#navigation li a:hover {color:#f44b4d;}
	#navigation li a:active {}
	#navigation li a:visited {}
}

@media screen and (max-width:1200px) {
	
	#logo_small {display:none;}
	#logo_small_line {position:absolute; height:91px; width:auto; z-index:1002; top:0px; left: 0px;}
	#logo_small_line img {height:100%; width:auto;}

}

@media screen and (min-width:1201px) {

	#logo_small {position:absolute; width:267px; height:145px; z-index:50; top:55px; left: 20px;}
	#logo_small_line {display:none;}

}

.navslide{position:relative; width:36px; height:29px; margin:0px auto 0px auto; display:none;}
#nav_back, #nav_forw {width:18px; height:29px;}
#nav_back a {display:block; position:relative; width:18px; height:29px; background: url(nav/button_nav_back_a_01.png) no-repeat top left;}
#nav_back a:hover {display:block; position:relative; width:18px; height:29px; background: url(nav/button_nav_back_b_01.png) no-repeat top left;}
#nav_forw a {display:block; position:relative; width:18px; height:29px; background: url(nav/button_nav_forw_a_01.png) no-repeat top left;}
#nav_forw a:hover {display:block; position:relative; width:18px; height:29px; background: url(nav/button_nav_forw_b_01.png) no-repeat top left;}



/* CONTENT */

#content {position:absolute; width:100%; min-width:200px; height:100%; min-height:400px; z-index:10;}
.inner{position:relative; margin:-59px auto 0px auto; height:auto; top:40%;}
.inner p{margin-bottom:0px;}
.inner img {width:75%; height:75%;}

	#one {position:relative; width:100%; height:100%; margin:0px auto 0px auto;}
	#one .pic{position:relative; max-width:500px; max-height:500px; margin:0px auto 0px auto; text-align:center;}
	#one .navslide{}
	#one .navslide li{}
	
	#two {position:relative; width:100%; height:100%; margin:1000px auto 0px auto;}
	#two .pic{position:relative; max-width:500px; max-height:500px; margin:0px auto 0px auto; text-align:center;}
	#two .text{position:absolute; top:20px; left:350px; font-size:14px; width:320px; height:auto; margin:0px 0px 0px 0px;}
	#two .navslide{position:absolute; top:130px; left:600px; width:100px}
	#two .navslide li{display:inline; margin-right: 20px; float:left;}



/* IMPRESSUM */

#Copyright {padding:10px 0px; width:100%; height:auto; position:absolute; top:100%;}
#Copyright div {margin-left:20px;}
#Copyright .hilite {color:#666;}

#ol_impressum, #ol_rservice {display:none; position:fixed; width:100%; min-height:100%; z-index:1000; background:#ffffff;}
#ol_impressum iframe,#ol_rservice iframe {position:absolute; width:100%; height:100%; overflow-y:scroll;  margin:0% auto 0% auto;}

.ol_impressum_close {width:85px; height:85px; position:absolute; top:10px; right:40px; cursor:pointer; z-index:100;}
.ol_impressum_close img {width:100%; height:100%;}

@media screen and (max-width:600px){

	.ol_impressum_close {width:40px; height:40px;}	
	.ol_impressum_close img {width:100%; height:100%;}
	
}

@media screen and (min-width:400px) and (max-height:600px)and (max-width:770px){
	
	#Copyright {display:none; }
	.inner img {width:50%; height:50%;}
	#navigation {z-index:1000;}
	#navigation ul {display:none; width:100%; padding-top:7%; padding-bottom:0%; height:auto; margin-top:91px; background:#fff;}
	#navigation li a:link {display:block; width:100%; padding:1% 0px; margin:3px 0px; text-align:center; background:#fff; opacity:1.0; font-size:1.4em; color:#666; font-weight:300; text-decoration:none;}
	#navigation li a:hover {color:#f44b4d;}
}