/* CSS Document 
* Visitenkarte 
* author: florian schmalzl 
*/

body { margin: 0; padding: 0; text-align: center; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 90%; background: url(../images/body.png) top left repeat;}

.alert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; padding: 8px 35px 8px 14px; margin-top: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border: 1px solid #d6e9c6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; max-width: 780px; margin-left: auto; margin-right: auto;}
.alert .close { position: relative; top: -2px; right: -21px; line-height: 20px;}
.close:hover, .close:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40);}
button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none;}
.close { float: right; font-size: 20px; font-weight: bold; line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20);}

/* =========================  grid =========================  */ 
.col-full { width: 100%; margin: 1.5% 0;}
.col-ttc { width: 65.85744680851%; margin: 1.5% 0;}
.col-otc { width: 31.714893617021%; margin: 1.5% 0;}
.col-ofc { width: 23.179255319148%; margin: 1.5% 0;}
.col-ohc {width: 48.786170212699%; margin: 1.5% 0;}
.col-ttc, .col-otc, .col-ofc, .col-ohc { margin-right: 2.427659574468%; display: inline; float: left;}

.cr { margin-right: 0 !important;}
.ct { margin-top: 0 !important;}
.cb { margin-bottom: 0 !important;}
.mr { margin-right: 25px;}

.clearfix:before,  
.clearfix:after {content: " "; display: table; }  
.clearfix:after {clear: both; }  
.clearfix {*zoom: 1;}  
.clear { clear: both;}

/* =========================  font =========================  */ 
h1, h2, h3, h4, h5, ul, form { margin: 0; padding: 0;}
img { border: none;}
.clear { clear: both;}

h1 { font-family: 'Syncopate', sans-serif; font-size: 3em; line-height: 1em; padding: 0 0 10px 0; margin: 0 0 10px 0; font-weight: normal; border-bottom: 2px solid #fff;}
h2 { font-size: 1.35em; line-height: 1.6em; padding: 2px 0; font-weight: normal;}
h3 { font-size: 1.25em; line-height: 1.8em; margin: 20px 0 20px 0;}
p {line-height: 1.7em; margin: 10px 0; padding: 0; }
a { text-decoration: none; font-weight: 600; }
a:hover {text-decoration: underline;  }
ul { margin: 15px 0; padding: 0;}
li { line-height: 1.5em; margin: 10px 0 25px 0; padding: 0; list-style-type: none;}
li i { margin-right: 7px;}

#farbenlogo { background-color: transparent; position: fixed; width: 500px; height: 290px; left: 0px; z-index: -1; bottom: 0px; margin: 0;}
#imgerror { float: right; padding: 1px; max-width: 550px; height: auto;}
#vcard .nextpage { font-size: 40px; margin: 15px 0 15px 0; width: 40px; float: right; text-align: right; cursor: pointer; display: block;}
#vcard .back { font-size: 40px; margin: 15px 0 15px 0; width: 40px; float: left; cursor: pointer; display: block;}
#vcard { margin: 120px auto 50px auto; max-width: 760px; border: 12px solid #fff; padding: 15px 35px 0px 35px; text-align: left; position: relative; border-radius: 6px; box-shadow: 0 0 5px #bbb;
background: #ffffff;
background: -moz-linear-gradient(45deg, #ffffff 0%, #ffffff 55%, #f2f2f2 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#ffffff), color-stop(55%,#ffffff), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(45deg, #ffffff 0%,#ffffff 55%,#f2f2f2 100%);
background: -o-linear-gradient(45deg, #ffffff 0%,#ffffff 55%,#f2f2f2 100%);
background: -ms-linear-gradient(45deg, #ffffff 0%,#ffffff 55%,#f2f2f2 100%);
background: linear-gradient(45deg, #ffffff 0%,#ffffff 55%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 );}
#imgvcard { float: right; margin: 5px 0 0 30px; padding: 1px; /* background: #fff; border: 3px solid #f2f2f2; */ max-width: 35%; height: auto; display: block;}
#vcard .headlines { margin:0; padding:20px 0 0 0;}
#vcard .content { }
#vcard .contact { font-size:1em;}
#vcard fieldset { margin:0 25px 0 0; padding:0; border:none;}
#vcard label { width:100%; display:block; margin:3px 0; font-size:.8em;}
#vcard input { width:100%; margin:0 0 5px 0; border:1px solid #e4e4e4; font-size:.8em; padding:5px; border-radius:3px;}
#vcard textarea { width:100%; margin:0 0 5px 0; padding:5px; border:1px solid #e4e4e4; border-radius:3px;}
#vcard input.submit { margin:4px 10px 0 0; border:none; width:auto; padding:7px 15px; cursor:pointer;}

.mail-sent { position: absolute; z-index: 100; top: 5%; left: 5%; background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 90px 65px; opacity: .95;}
.close-form { text-align: center; border: 1px solid #ccc; font-weight: bold; font-size: 30px; line-height: 1.5em; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 1.55em; height: 1.5em; position: absolute; top: 5px; right: 5px; cursor: pointer; background: #f6f6f6;}


@media screen and (max-width: 800px)  {
.wrapper { padding: 0 50px !important;}
#vcard { max-width: 650px; padding: 15px 25px 0px 25px;}
.col-ohc {width: 100% !important; margin: 2.5% 0; display: block !important; margin-right: 0 !important; float: none !important;}
#imgvcard { float: none !important; margin: 15px 0 !important; max-width: 95% !important;}
}

@media screen and (max-width: 768px)  {
#vcard { max-width: 680px; padding: 15px 25px 0px 25px;}
}

@media screen and (max-width: 600px)  {
h1 { font-size: 2em !important;}
#farbenlogo { background-color: transparent; position: fixed; width: 250px; height: 145px; left: 0px; z-index: -1; bottom: 0px; margin: 0;}
#vcard { margin: 50px auto; max-width: 560px; padding: 15px 15px 0px 15px;}
#imgerror { float: right; padding: 1px; max-width: 275px; height: auto;}
}

@media screen and (max-width: 480px)  {
.wrapper { padding: 0 10px !important;}	
h1 { font-size: 1.5em !important;}
#farbenlogo { background-color: transparent; position: fixed; width: 167px; height: 97px; left: 0px; z-index: -1; bottom: 0px; margin: 0;}
#vcard { margin: 30px auto; max-width: 420px; padding: 5px 15px 0px 15px; border: 5px solid #fff !important;}	
#vcard fieldset { margin: 20px 25px 0 0; padding: 0; border: none;}
#imgvcard { float: right; margin: 15px 0 !important; max-width: 45% !important;}
#imgerror { float: right; padding: 1px; max-width: 275px; height: auto;}
}

@media screen and (max-width: 320px)  {
#farbenlogo { background-color: transparent; position: fixed; width: 111px; height: 65px; left: 0px; z-index: -1; bottom: 0px; margin: 0;}
#vcard { margin: 15px auto; max-width: 280px; padding: 5px 10px 0px 10px;}	
#imgvcard { width: 35%; height: auto;}
#imgerror { float: right; padding: 1px; max-width: 150px; height: auto;}
}