@charset "UTF-8";

/* CSS Document Browser-Clear von Eric Meyer */
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, th {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;}
:focus {outline: 0;}
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a {text-decoration: none; color: #000; font-weight: normal;}
input, textarea, button {border: 0;}
/* //CSS Document Browser-Clear von Eric Meyer */

/* Fontface */
@font-face {
    font-family: 'cabinregular';
    src: url('./fonts/cabin/cabin-regular-webfont.eot');
    src: url('./fonts/cabin/cabin-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/cabin/cabin-regular-webfont.woff') format('woff'),
         url('./fonts/cabin/cabin-regular-webfont.ttf') format('truetype'),
         url('./fonts/cabin/cabin-regular-webfont.svg#cabinregular') format('svg');
    font-weight: normal; font-style: normal;}
	
@font-face {
    font-family: 'cabinitalic';
    src: url('./fonts/cabin/cabin-italic-webfont.eot');
    src: url('./fonts/cabin/cabin-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/cabin/cabin-italic-webfont.woff') format('woff'),
         url('./fonts/cabin/cabin-italic-webfont.ttf') format('truetype'),
         url('./fonts/cabin/cabin-italic-webfont.svg#cabinitalic') format('svg');
    font-weight: normal; font-style: normal;}
	
@font-face {
    font-family: 'cabinmedium';
    src: url('./fonts/cabin/cabin-medium-webfont.eot');
    src: url('./fonts/cabin/cabin-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/cabin/cabin-medium-webfont.woff') format('woff'),
         url('./fonts/cabin/cabin-medium-webfont.ttf') format('truetype'),
         url('./fonts/cabin/cabin-medium-webfont.svg#cabinmedium') format('svg');
    font-weight: normal; font-style: normal;}
	
@font-face {
    font-family: 'cabinmedium_italic';
    src: url('./fonts/cabin/cabin-mediumitalic-webfont.eot');
    src: url('./fonts/cabin/cabin-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/cabin/cabin-mediumitalic-webfont.woff') format('woff'),
         url('./fonts/cabin/cabin-mediumitalic-webfont.ttf') format('truetype'),
         url('./fonts/cabin/cabin-mediumitalic-webfont.svg#cabinmedium_italic') format('svg');
    font-weight: normal; font-style: normal;}
	
@font-face {
    font-family: 'cabinsemibold';
    src: url('./fonts/cabin/cabin-semibold-webfont.eot');
    src: url('./fonts/cabin/cabin-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/cabin/cabin-semibold-webfont.woff') format('woff'),
         url('./fonts/cabin/cabin-semibold-webfont.ttf') format('truetype'),
         url('./fonts/cabin/cabin-semibold-webfont.svg#cabinsemibold') format('svg');
    font-weight: normal; font-style: normal;}
	
@font-face {
    font-family: 'cabinsemibold_italic';
    src: url('./fonts/cabin/cabin-semibolditalic-webfont.eot');
    src: url('./fonts/cabin/cabin-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/cabin/cabin-semibolditalic-webfont.woff') format('woff'),
         url('./fonts/cabin/cabin-semibolditalic-webfont.ttf') format('truetype'),
         url('./fonts/cabin/cabin-semibolditalic-webfont.svg#cabinsemibold_italic') format('svg');
    font-weight: normal; font-style: normal;}
	
@font-face {
    font-family: 'cabinbold';
    src: url('./fonts/cabin/cabin-bold-webfont.eot');
    src: url('./fonts/cabin/cabin-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/cabin/cabin-bold-webfont.woff') format('woff'),
         url('./fonts/cabin/cabin-bold-webfont.ttf') format('truetype'),
         url('./fonts/cabin/cabin-bold-webfont.svg#cabinbold') format('svg');
    font-weight: normal; font-style: normal;}

@font-face {
    font-family: 'cabinbold_italic';
    src: url('./fonts/cabin/cabin-bolditalic-webfont.eot');
    src: url('./fonts/cabin/cabin-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/cabin/cabin-bolditalic-webfont.woff') format('woff'),
         url('./fonts/cabin/cabin-bolditalic-webfont.ttf') format('truetype'),
         url('./fonts/cabin/cabin-bolditalic-webfont.svg#cabinbold_italic') format('svg');
    font-weight: normal; font-style: normal;}
	
@font-face {
    font-family: 'kreonlight';
    src: url('./fonts/kreon/kreon-light-webfont.eot');
    src: url('./fonts/kreon/kreon-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/kreon/kreon-light-webfont.woff') format('woff'),
         url('./fonts/kreon/kreon-light-webfont.ttf') format('truetype'),
         url('./fonts/kreon/kreon-light-webfont.svg#kreonlight') format('svg');
    font-weight: normal; font-style: normal;}
/* //Fontface */

/* Layout */
html,body {height: 100%; margin: 0; padding: 0;}
#p0l, #p0r {width: 35px; height: 35px; position: absolute; top: 20px; z-index: 2; overflow: hidden;}
#p0l {left: 20px;}
#p0r {right: 20px;}
#p0l:hover, #p0r:hover {width: 35%; height: auto; border: solid 1px #dddddd; background-color: #f2f2f2;}
#p0l p, #p0r form {opacity: 0; filter: alpha(opacity=0);}
#p0l:hover > p, #p0r:hover > form {
	opacity: 0.99;
	filter: alpha(opacity=99);
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;}
#p0l:hover > #info {background-image: url(pics/info_hover.png);}
#p0r:hover > #mail {background-image: url(pics/mail_hover.png);}
#p1 {min-height: 100%; position: relative;}
#p2 {width: 86%; margin: 0 auto; padding: 32px 0 80px 0;}
#p3 {min-height: 100%; position: relative;}
.floatstop {clear: both;}
/* //Layout */

/* Navi */
#navi {width: 100%;}
#navi ul {width: 80%; margin: 0 auto;}
#navi li {width: 19.5%; float: left;}
#navi li {
	position: relative;
	border-top: solid 1px #dddddd;
	border-right: solid 1px #dddddd;
	color: #393939;
	text-align: center;
	font-family: 'cabinsemibold';
	font-size:16px;
	line-height: 38px;
	letter-spacing: 2px;
	text-transform: uppercase;}
#navi li+li+li+li+li {border-right: none;}
#navi li:hover {
	color: #f2f2f2;
	background-color: #393939;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;}
#navi li p {
	width: 90%;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 5%;
	position: absolute;
	bottom: 10px;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0;
	filter: alpha(opacity=0);}
#navi li:hover > p {
	bottom: 35px;
	color: #999999;
	opacity: 0.99;
	filter: alpha(opacity=99);
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;}
#navi_mobile {width: 100%; display: none;}
#navi_mobile ul {width: 80%; margin: 0 auto;}
#navi_mobile li {width: 100%;}
#navi_mobile li {
	border-top: solid 1px #dddddd;
	color: #393939;
	text-align: center;
	font-family: 'cabinsemibold';
	font-size:16px;
	line-height: 38px;
	letter-spacing: 2px;
	text-transform: uppercase;}
#navi_mobile ul ul {width: 100%; opacity: 0; filter: alpha(opacity=0);}
#navi_mobile ul ul li {margin-bottom: 3px; border: solid 1px #dddddd; background-color: #f2f2f2;}
#navi_mobile ul li {cursor: pointer;}
#navi_mobile ul li:hover {
	color: #f2f2f2;
	background-color: #393939;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;}
#navi_mobile ul:hover > ul {
	opacity: 0.99;
	filter: alpha(opacity=99);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;}
#footer {width: 100%; position: fixed; bottom: 0; left: 0;}
#footer_contact {
	padding: 17px 0 20px 0;
	border-top: solid 1px #dddddd;
	color: #999999;
	text-align: center;
	font-family: 'cabinregular';
	font-size: 12px;
	line-height: 19px;}
#footer_contact a {color: #999999; font-family: 'cabinitalic';}
#footer_contact a:hover {color: #4f4f4f;}
/* //Navi */

/* Style */
body {background-color: #f2f2f2;}
.content {padding: 40px;}
.copy {color: #4f4f4f; font-family: 'cabinregular'; font-size: 14px; line-height: 21px;}
.copy p {padding-bottom: 21px;}
.copy strong {font-family: 'cabinbold';}
.copy em {font-family: 'cabinitalic';}
.copy a {font-family: 'cabinitalic';}
.copy a:hover {color: #999999;}
.copy_extra {color: #999999; font-family: 'cabinitalic'; font-size: 14px; line-height: 21px;}
.copy_extra strong {font-family: 'cabinbold_italic';}
.copy_extra a {color: #999999;}
.copy_extra a:hover {color: #4f4f4f;}
.headline {color: #393939; font-family: 'cabinbold'; font-size: 28px; line-height: 38px; letter-spacing: 4px; padding-bottom: 20px;}
.uppercase {text-transform: uppercase;}
/* //Style */

/* Content */
#logo {
	width: 180px;
	height: 130px;
	margin-top: -155px;
	margin-left: -65px;
	position: absolute;
	top: 50%;
	left: 50%;}
#info {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 9px;
	left: 9px;
	background-image: url(pics/info.png);
	cursor: pointer;}
.info_detail_header {display: none;}
.info_detail_header a {color: ;}
.info_detail_footer {}
#mail {
	width: 24px;
	height: 16px;
	position: absolute;
	top: 10px;
	right: 6px;
	border: solid 2px #f2f2f2;
	background-image: url(pics/mail.png);
	background-color: #f2f2f2;
	cursor: pointer;}
img {max-width: 100% !important; height: auto;}
#p2 ul li {width: 60%; margin-left: 40%; margin-bottom: 25px;}
#p2 ul li+li {width: 50%; margin: 0; float: left;}
#p2 ul li+li+li {width: 25%; margin-left: 30px; clear: right;}
#p2 ul li+li+li+li {width: 50%; margin: 0; margin-top: 25px; margin-left: 20%;}
/* //Content */

/* Forms */
#contactform {margin: 40px; color: #4f4f4f;}
#contactform label {display: none;}
#contactform input, textarea, button {
	margin-bottom: 21px;
	font-family: 'cabinregular';
	font-size: 14px;
	background-color: transparent;
	}
#contactform input {
	width: 95%;
	height: 28px;
	padding-left: 5%;
	border-bottom: solid 1px #dddddd;
	}
#contactform textarea {
	width: 90%;
	padding: 5%;
	border: solid 1px #dddddd;
	resize: none;
	}
#contactform button {
	width: 100%;
	margin: 0;
	padding: 10px;
	border: solid 1px #dddddd;
	text-transform: uppercase;
	resize: none;
	cursor: pointer;
	}
#contactform button:hover {
	color: #f2f2f2;
	background-color: #393939;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}
/* //Forms */

@media only screen and (max-width: 959px) {
#p0l:hover, #p0r:hover {width: 40%;}
#navi ul {width: 90%;}
}

@media only screen and (max-width: 767px) {
#p0l:hover, #p0r:hover {width: 55%;}
#navi li {font-size:14px; letter-spacing: 1px;}
#navi li p {display: none;}
}

@media only screen and (max-width: 559px) {
#p0l, #p0r {top: 8px;}
#p0l {left: 2%;}
#p0r {right: 2%;}
#p0l:hover, #p0r:hover {width: 96%;}
#p2 {width: 92%; padding-top: 20px;}
#navi {display: none;}
#navi_mobile {display: block;}
.info_detail_header {display: block;}
.info_detail_footer {display: none;}
}