/* CSS Document 
* Max - Visitenkarte 
* author: sabine brings 
* website: http://brings-online.com/templates/ 
*/

body {  margin:0; padding:0; text-align:center; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:90%; }
body {-webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-attachment: fixed;}
body { background-image:url(../images/bg.jpg);}

/* =========================  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 15px 0; font-weight:normal; border-bottom:1px dotted #ccc;}
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;}


#vcard .nextpage {font-size:40px; margin:25px 0 25px 0;  width:40px; float:right; text-align:right; cursor:pointer; display:block;}
#vcard .back {font-size:40px; margin:25px 0 25px 0;  width:40px; float:left; cursor:pointer; display:block;}


#vcard { margin:120px auto; max-width:760px; padding:10px 35px 0px 35px; text-align:left; position:relative; border:1px solid #fff;
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 );}


#vcard img { float:right; margin:15px 0 0 30px; padding:1px; 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;}





/* =========================  socia media icons =========================  */ 

.social-media {margin:15px 0 0 0; padding:20px 0 0 0; }
.social-media div { transition: background 0.5s ease; width:22px; height:20px; padding:8px 8px 8px 6px; margin:0 6px 0 0; text-align:center; border-radius:4px; float:left; display:inline-block;}
.social-media div a { border-bottom:none;}
.social-media div [class^="icon-"]:before, .social-media div [class*=" icon-"]:before {color:#fff; float: none !important; margin:0; font-size:24px; line-height:24px; text-shadow:none !important;}



.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;}
#vcard img { float:none !important; margin:15px 0 !important; max-width:95% !important; }
}
	
	
@media screen and (max-width: 600px)  {

#vcard { margin:60px auto;}
#vcard {max-width:560px; padding:15px 15px 0px 15px;}	
	
}
	
@media screen and (max-width: 480px)  {

.wrapper { padding:0 10px !important;}	
#vcard { margin:30px auto;}
#vcard {max-width:420px; padding:5px 15px 0px 15px;}	
#vcard img { float:none !important; margin:15px 0 !important; max-width:95% !important; }
#vcard fieldset { margin:20px 25px 0 0; padding:0; border:none;}


.
}	

@media screen and (max-width: 320px)  {
h1 { font-size:2.2em;}	
#vcard { margin:15px auto;}
#vcard {max-width:280px; padding:5px 10px 0px 10px;}	
}