/*
Theme Name: Web-Visitenkarte-Grill
Description: Responsives Theme für Web-Visitenkarten
Author: sb | brings-online.com
Author URI: http://brings-online.com

*/

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, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border: 0;	font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline; font-style:normal;}

html { height: 100%;}

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

body {background:#fff; color:#0A2438; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 1.5em; text-rendering: optimizeLegibility; border-top:5px solid #43647D;}

#background { background:#E7ECF0; width:100%; height:40%; position:absolute; top:35%; left:0; z-index:0;}
#page {max-width:840px; margin:1.5% auto; padding:0px 20px; text-align:left; position:relative; z-index:100;  }


/* =========================  font =========================  */ 

a { text-decoration:none;}
a {color:#C70808;}
p {font-size:.855em; margin:0; padding:6px 0 10px 0; }
p a:hover {text-decoration:underline;}
ul li { font-size:.855em;}
h1, h2, h3, h4 { font-family: 'PT Sans Narrow', sans-serif; line-height:1.6em;}
h1 {font-size:1.7em; color:#0A2438;}
h2 {font-size:1.4em;}
h3 {font-size:1.1em; line-height:1.3em; }
h4 {font-size:1.1em; line-height:1.3em;}
h5 {font-size:1em; font-weight:bold;}
strong {font-weight:bold;}
em {font-style:italic;}

h1.logotitle { font-size:1.8em; line-height:1.1em; margin:0; padding:0;}
h1.logotitle a { color:#4f4f4f;}
h2.logosubtitle {font-size:.9em; line-height:1.2em; margin-left:2px;}

blockquote { padding:0; margin:15px 30px 25px 30px; font-style: italic;}
blockquote p { padding:0; margin:0; line-height:1.7em; font-style: italic;}
blockquote a {font-style: italic;}



/* =========================  grid =========================  */ 

.col-840 { width:100%; margin:2% 0;}

.col-left {float:left; width:42.5%;  margin:2% 5% 1% 0; }
.col-right {float:left; width:52.5%;  margin:2% 0 1% 0; }

.fr {margin-right:0 !important;}


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

/* ============================= structure =================== */

.bottomline { text-align:center; font-size:.7555em; background:#43647D; color:#edefe8; padding:5px 0;}
.leftcolumn { background:#43647D; border-radius:1px;}
.rightcolumn { background:#F3F5F7; border-radius:1px;}
.columncontent {padding:10px 15px; box-sizing:content-box;}




/* ============================= topmenu =================== */

.nav {width:100%; font-size: .85em; text-transform:uppercase; list-style: none; *zoom: 1; border-bottom:1px solid #fff; position:relative;}
.nav:before,
.nav:after {content: " "; display: table; }
.nav:after {clear: both;}
.nav li a {padding:8px 10px; color:#E7ECF0; display:inline-block;  }
.nav li a:hover {color:#fff; }
.nav li {float: left; display:inline-block; position: relative; margin-top:1px; padding:0;  border-left:1px solid #5D819C;  }

.nav li:first-child { border-left:none;}
.nav li.current-menu-item > a, .nav li.current-menu-parent > a, .nav li.current_page_parent > a { color:#fff;}

.nav li ul {position:absolute; z-index:999; left:0; top:0; margin:0; padding:0 0 3px 0; display: block; visibility: hidden; white-space:nowrap; text-transform: none;  min-width:130px;  width:auto;
 background:#5D819C; list-style:none; border-radius:0 0 3px 3px;}
.nav li ul li { display: list-item; float: none; padding:0; margin:0; border-right:none; font-size:1em; border-bottom:1px solid #849FB4;  }
.nav li ul li a {padding:5px 10px;}

.pagemenu-second .nav {border-bottom:1px solid #5D819C !important; border-top:1px solid #E7ECF0; }

.nav li ul li:last-child {border-bottom:none;}


/* ============================= leftcolumn =================== */


.address {color:#f6f6f6; margin:0 ; padding:0;}
.address p {color:#f6f6f6; font-size:.8555em; line-height:1.4em;}
.phone {font-size:1.5em; font-family: 'PT Sans Narrow', sans-serif;}
.phone a, .address a {color:#f6f6f6;}

.frontimage { max-width:360px; margin:2px; padding:0;}
.frontimage img { width:100%; height:auto; display:block;}

.slideshow {padding:0; margin:0; position:relative; width:100%; overflow:hidden;  }
.slideshow div {padding:0; margin:0;}
.slideshow img {width:100%; height:auto;  margin:0; padding:0; display:block;}
.pager-bullets { text-align:center;}
.pager-bullets span { font-size:2em; color:#5D819C; display:inline-block; margin:0 2px 0 0; cursor:pointer; }
.pager-bullets .cycle-pager-active {color:#FBF8F5;}

.smicons {margin:25px 0 10px 0;}
.smicons span { background:#5D819C; width:40px; height:33px; padding-top:7px; display:inline-block; border-radius:40px; margin:5px 2px 0 0; text-align:center;}
.sidebarbox .smicons img { width:24px; height:24px; border:none; background:none;}
.smicons span:hover {background:#18364D; }
.smicons a:hover {background:none; border:none; text-decoration:none; }

/* ============================= rightcolumn =================== */


.columncontent ul { list-style:none; margin:5px 0 5px 5px; padding:10px 0;}
.columncontent ul li { line-height:1.5em; margin:4px 0; }
.columncontent ul li:before {content: "\00BB \0020"; color:#5D819C; font-size:16px; padding-right:4px;}
		
hr {border:none; border-top:2px solid #5D819C; margin:7px 0;}		

table { width:100%; background:none; margin:5px 0 25px 0; border-collapse:collapse; padding:0; border:1px solid #fff;  border-radius:2px;  -moz-border-radius:2px; -webkit-border-radius:2px; box-sizing:border-box;}
table td { color:#777; border-bottom:1px solid #fff; font-size:.8222em; border-left:1px solid #fff; padding:6px; margin:0;}
table td:last-child { border-right:none;}
table td:first-child { border-left:none;}
table th {padding:6px; font-size:.9855em; line-height:24px;  font-weight:normal; text-align:left; }
table tr:last-child td { border-bottom:none;}
table tr:nth-child(even) { background:#fff;}

img.alignleft {float:left; margin:5px 25px 10px 0; width:auto; height:auto; }
img.alignright {float:right; margin:5px 0 10px 25px; width:auto; height:auto;}
img.alignnone {margin:0; padding:0; height:auto;}


/* ===================  Contactform  ======================== */

.contactform { margin:10px 0 35px 0; padding:0;  }
.contactform label { font-size:.7em; display:block; margin:7px 0 0 0;}
.contactform input {width:97%; border:1px solid #E7ECF0; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:4px 3px; margin:0 0 10px 0; font-family:Verdana, Arial, sans-serif; font-size:.8em; box-sizing:border-box;}
.contactform select {width:100%; border:1px solid #E7ECF0; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:4px 3px; margin:0 0 10px 0; box-sizing:border-box;}
.contactform textarea { width:97%; border:1px solid #E7ECF0; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:4px 3px; font-size:.9em; box-sizing:border-box;}
.contactform input:focus, .contactform textarea:focus { border:1px solid #999;}
.contactform button {background:#E7ECF0; cursor:pointer; color:#C70808; margin-top:15px; border:none; font-size:.8em;  padding:6px 10px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
.contactform button:hover {background:#C70808; color:#fff; }

.contactForm .error { position:relative;}
.contactform .error {display:block; color:#c00;}


/* ===================  Google Map  ======================== */

.map { width:100%; margin:15px 0; border:2px solid #fff; box-sizing:border-box; border-radius:3px; overflow:hidden;}
.map iframe {width:100%; height:auto }
.map small { font-size:.7em; padding-left:5px;}




/* ===================  max 800px  ======================== */

@media screen and (max-width: 800px) { 
.col-left {float:left; width:42%;  margin:2% 4% 1% 0; }
.col-right {float:left; width:54%;  margin:2% 0 1% 0; }
}



/* ===================  max 600px  ======================== */

@media screen and (max-width: 600px) { 
#background {display:none;}
#page {padding:0px 10px;}
h1 {font-size:1.6em; line-height:1.3em;}
h2 {font-size:1.3em; }
h3 {font-size:1em; font-weight:bold; }
p {font-size:.8em; line-height: 1.6em;}
.phone {font-size:1.1em;}
.col-left {float:left; width:32%;  margin:2% 2% 1% 0; }
.col-right {float:left; width:64%;  margin:2% 0 1% 0; }
.nav li {float:none !important; display:block; width:100%; border-right:none; font-weight:bold; border-bottom:1px solid #EDEFE8;}
.nav li ul {margin:-2px 0 0 1px; min-width:200px; }
.nav li a {padding:4px 0 4px 10px; display:block;}
}


/* ===================  max 480px  ======================== */

@media screen and (max-width: 480px) { 
#background {display:none;}
h1 {font-size:1.5em; line-height:1.3em;}
p {font-size:.7755em; }
ul li { font-size:.755em;}
.col-left {width:100%; float:none; }
.col-right { width:100%; float:none;}
.nav li ul {margin:-2px 0 0 1px; min-width:200px; }
}


/* ===================  max 320px  ======================== */

@media screen and (max-width: 320px) { 
#page {padding:0px 10px;}
#background {display:none;}
h1 {font-size:1.5em; line-height:1.3em;}
p {font-size:.7755em; }
ul li { font-size:.755em;}
.col-left {width:100%; float:none; }
.col-right { width:100%; float:none;}
}