/*
 Theme Name: LemkeMetallSpritzerei Theme
 Description: Theme LemkeMetallSpritzerei
 Author: 17media | Jurij Töpfer
 Author URI: http: //www.17media.de
 Template: cornerstone
 Text Domain: lemkemetallspritzerei
 Version: 1.0
 */

@import url(../cornerstone/style.css);
/*@import url(http://fonts.googleapis.com/css?family=Fira+Sans:400,500);*/
@import url(https://code.cdn.mozilla.net/fonts/fira.css);

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.widget_nav_menu ul, .widget_recent_entries ul, .clearing-thumbs {
	list-style: none
}

.top-bar .title-area .name a {
	font-size: 1.0625em;
	font-weight: bold;
	color: #e0e0e0;
	display: block;
	padding: 0 15px;
	line-height: 45px;
}

#content .sticky {
	position: static;
}

.orbit-container {
	background: transparent;
}

.entry-content ul:not([class*="block-grid-"]):not(.clearing-thumbs), .widget_archive ul {
	margin-left: 2em;
}

/* ############ 17MEDIA STYLES ############ */
html {
	overflow-y: scroll;
}

body {
	background: #c6c9cb;
	font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
}

body.page-template-lms-page-php {
	background: #c6c9cb url('images/bg-test-small.jpg') center 150px no-repeat;
}

h1, h2, h3, h4, h5 {
	font-weight: 400;
	font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
}

#toogle-container {
	position: relative;
	background: #22406c;
	display: none;
}

#toogle-container-trigger {
	position: relative;
	width: 100%;
	z-index: 9999;
}

#header-container {
	position: relative;
	background: #e0e0e0;
	height: 156px;
}

#menu-container {
	position: relative;
	background: #22406c;
	background: rgba(34, 64, 108, 0.94);
	height: 64px;
}

#content-container {
	position: relative;
	overflow: hidden;
	padding-top: 260px;
}

#content-container.page {
	background: #e0e0e0;
	margin-top: 260px;
	padding-top: 90px;
}

#content-container.standort, #content-container.contact {
    margin-top: 390px;
}

#line-container {
	position: relative;
	background: #22406c;
	height: 40px;
	margin-top: 135px;
}

#slogan-container {
	position: relative;
	background: #22406c;
	background: rgba(34, 64, 108, 0.94);
	margin-top: 65px;
	padding: 32px 0;
}

#footer-container {
	position: relative;
	background: #e0e0e0;
	padding-top: 55px;
}

#content-container > .row, #header-container > .row, #menu-container > .row, #slogan-container > .row, #footer-container > .row, #toogle-container > .row, #toogle-container-trigger > .row  {
	max-width: 1030px;
	position: relative;
}

.columns.no-padding {
	padding: 0px !important;
}

/* TEXT AND CONTENT STYLES ON PAGES */
#content-container.page h1 {
	color: #2d2d2d;
    font-size: 2.75rem;
    font-weight: 500 !important;
    text-transform: uppercase;
    margin-bottom: 0px;
}

#content-container.page h2 {
    font-size: 1.75rem;
    margin-bottom: 45px;
}

#content-container.page h3 {
	color: #22406c;
    font-size: 1.35rem;
    margin-top: 30px;
}

#content-container.page a {
	color: #22406c;
	white-space: nowrap;
	border-bottom: 1px solid #b9c4d4;
	transition: all 0.25s ease 0s;
}

#content-container.page a:hover {
	border-bottom: 1px solid #22406c;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    background: #22406c;
    color: #e0e0e0;
    font-size: 0.9rem;
    font-style: italic;
    padding: 2px 10px;
    text-align: right;
}


/* Toogle Container */
#toogle-container-trigger-btn {
  background: #22406c;
  color: #e0e0e0;
  display: block;
  font-size: 17px;
  height: 40px;
  position: absolute;
  right: 5%;
  text-transform: uppercase;
  top: -3px;
  transform: rotate(353deg) skew(-7deg);
  width: 31px;
  outline: none !important;
}

#toogle-container-trigger-btn span {
  background: transparent url('images/pin.png') no-repeat 8px 10px;
  display: block;
  width: 31px;
  height: 40px;
  transform: rotate(7deg) skew(7deg);
}


#toogle-container .standort-box {
	color: #e0e0e0;
    margin: 0;
    padding-top: 17px;
    text-align: center;
    font-size: 0.94rem;
    line-height: 1.2;
}

#toogle-container .standort-box.col-left {
    padding-right: 90px;
}

#toogle-container .standort-box.col-right {
    padding-left: 5px;
}

#toogle-container .standort-box span.line {
	border-right: 1px solid #e0e0e0;
	display: inline-block;
	height: 25px;
	margin-top: 10px;
	position: relative;
	width: 5px;
}

#toogle-container .standort-box span.uppercase {
	font-size: 1rem;
    text-transform: uppercase;
    white-space: nowrap
}

#toogle-container .standort-box span.gap {
	display: inline-block;
	margin-top: 8px;
	width: 0px;
}

#toogle-container .standort-box a {
	color: #e0e0e0;
	border: none;
	text-decoration: none;
	outline: none !important;
	transition: all 0.25s ease 0s;
}


#toogle-container .standort-box a:hover {
	color: #e0e0e0;
	border: none;
	text-decoration: none;
	outline: none !important;
	opacity: 0.75;
}

#toogle-container .standort-box a.action-btn {
	display: inline-block;
    margin: 17px 0 3px;
}

/* HEAD NAV */
#head-language {
    color: #4b4b4b;
    font-size: 0.8125rem;
  	padding: 14px 12px 0;
    text-align: right;
}

#head-language a {
	display: inline-block;
	margin-top: 7px;
}

#head-nav {
    border-left: 1px solid #888888;
    color: #4b4b4b;
    font-size: 0.8125rem;
    padding: 10px 12px 0 12px;
}

#head-nav a {
	color: #4b4b4b;
    display: inline-block;
    margin-top: 2px;
    position: relative;
    top: 2px;
}

#head-nav a:hover {
	color: #5a5a5a;
}

#site_name {
	color: #22406c;
    line-height: 1.25;
    padding: 20px 0;
    text-align: center;
}

/* LOGO */
#logo1 {
	
}

#logo2 {
	float: right;
}


/* SLOGAN CONTAINER */
#slogan-container h1 {
	text-align: center;
	color: #e0e0e0;
	font-size: 3.3rem;
}

#slogan-container h1:after {
	background-color: #e0e0e0;
    content: "";
    display: block;
    height: 1px;
    margin: 0 auto 30px;
    width: 420px;
}

#slogan-container p {
	text-align: center;
	color: #e0e0e0;
	line-height: 1.3;
	font-size: 1.4rem;
}

/* SCRIBBLES HOME */
#content-container.home {
    background: url('images/tz2.png') no-repeat scroll 10% 70px transparent;
}

#content-container.home #slogan-container {
    background: url('images/tz1.png') no-repeat scroll 80% 96px rgba(34, 64, 108, 0.94);
}


/* LINK BOX HOME */
a.link-box {
	display: block;
	border-bottom: 7px solid #22406c;
	opacity: 1;
	transition: all 0.25s ease 0s;
}

a.link-box:hover {
	opacity: 0.9;
}

a.link-box span {
	display: inline-block;
	background: #22406c;
	background: rgba(34, 64, 108, 1.0);
	color: #e0e0e0;
	padding: 8px 15px 7px;
	text-transform: uppercase;
	font-size: 1.25rem;
}

a.link-box img {
	display: block;
}

a.link-box.col-left {
	margin-right: 25px;
}

a.link-box.col-right {
	margin-left: 25px;
}

/* MAINMENU DEPTH-1 */
.top-bar {
	background: none repeat scroll 0 0 transparent;
	height: 40px;
	line-height: 40px;
	margin-bottom: 0;
	margin-top: 24px;
	overflow: visible;
	position: relative;
}

.top-bar-section ul {
    background: none repeat scroll 0 0 transparent;
    display: block;
	border-right: 1px solid #6a7d98;
    font-size: 1.25rem;
    height: auto;
    margin: 0;
    width: 100%;
}

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
	border-bottom: medium none;
	border-right: 1px solid #6a7d98;
	border-top: medium none;
	clear: none;
	height: 40px;
	width: 0;
}

.top-bar-section ul li {
	float: left;
	position: relative;
}

.top-bar-section > ul > li.active:after {
	background: transparent url("images/active-marker.png") no-repeat center -5px;
    content: "";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    top: -24px;
    width: 100%;
}

.top-bar-section li a:not(.button) {
	background: transparent;
	line-height: 40px;
	padding: 0 15px;
	width: 247px;
}

.top-bar-section ul li > a {
	background: transparent !important;
	color: #e0e0e0;
	display: block;
	font-weight: 400;
	font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
	padding: 0 15px;
	text-align: center;
	width: 100%;
	text-transform: uppercase;
}

.top-bar-section li a:hover:not(.button) {
	background: transparent;
}

.top-bar-section ul li > a span {
	position: relative;
    top: -10px;
}

.top-bar-section .has-dropdown > a:after {
	display: none;
}

.top-bar-section .has-dropdown > a {
	padding-right: 15px !important;
}

.top-bar-section ul li:hover > a {
	background: transparent;
	color: #e0e0e0;
}

/* MAINMENU DEPTH-2 */

.top-bar-section .dropdown {
	background: transparent url('images/dropdown-bg.png') repeat-x top left;
	position: absolute;
	border: medium none;
	left: -1;
	min-width: 100%;
	min-height: 197px;
	width: 499px;
	top: auto;
	padding: 45px 0 20px;
}

.top-bar-section .dropdown li {
	width: 50%;
}

.top-bar-section .dropdown-small .dropdown {
	width: 250px;
}

.top-bar-section .dropdown-small .dropdown li {
	width: 100%;
}


.top-bar-section .dropdown li a {
	background: transparent;
	color: #2d2d2d;
	line-height: 1;
	padding: 7px 15px 8px 35px;
	text-align: left;
	white-space: nowrap;
	font-size: 1.12rem !important;
}

.top-bar-section .dropdown li > a span {
	position: relative;
    top: 0px;
}

.top-bar-section .dropdown li:hover a, .top-bar-section .dropdown li.active a  {
	background: transparent !important;
	color: #22406c;
}


/* MAINMENU DEPTH-3 */

.top-bar-section .dropdown li .dropdown {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	left: 0;
	min-width: inherit;
	min-height: inherit;
	padding: 0 0 0 35px;
	position: relative;
	top: 0;
	width: auto;
	display: block;
}

.top-bar-section .dropdown li .dropdown:after {
	content: "";
    display: block;
	background: #898989;
	height: 82px;
    left: 35px;
    position: absolute;
    top: 5px;
    width: 1px;
}

.top-bar-section .dropdown li .dropdown li {
	width: auto;
}


.top-bar-section .dropdown li .dropdown li a {
	background: transparent;
	color: #2d2d2d;
	line-height: 1;
	padding: 5px 15px 3.5px;
	text-align: left;
	white-space: nowrap;
	font-size: 0.94rem !important;
}

.top-bar-section .dropdown li .dropdown li > a span {
	position: relative;
    top: 0px;
}


.top-bar-section .dropdown li .dropdown li:hover a, .top-bar-section .dropdown li .dropdown li.active a {
	background: transparent !important;
	color: #22406c;
}



/* FOOTER-BOX */
.footer-box {
	border-left: 1px solid #898989;
	padding: 0 20px 30px 20px;
}

.footer-box.col-right {
	margin-left: 25px;
}

.footer-box h3 {
	color: #22406c;
	font-size: 1.15rem;
	text-transform: uppercase;
	position: relative;
	top: -5px;
	margin-top: 0;
}

.footer-box p {
	color: #2d2d2d;
	line-height: 1.3;
	font-size: 0.94rem;
}

#footer-box-divider1 {
    padding: 0 7px 0 15px;
}

#footer-box-divider2 {
    padding: 0 7px;
}

/* SIDEBAR CONTACT */
#content-container.page .sidebar {
	margin-top: 85px;
	padding-left: 45px;
}

#content-container.page .standort-box {
    border-top: 7px solid #d9d9d9;
    font-size: 0.94rem;
    line-height: 1.2;
    margin: 0;
    padding: 35px 0px 45px;
    text-align: right;
}

#content-container.page .standort-box span.uppercase {
	color: #22406c;
    text-transform: uppercase;
}

#content-container.page .standort-box span.gap {
	display: inline-block;
	margin-bottom: 12px;
}

#content-container.page .standort-box .action-btn {
	position: relative;
    top: 7px;
    width: 0;
}

/* GOOGLE MAPS FULLSCREEN STYLE */
#maps_canvas_wrapper {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 860px;
}

#map_canvas {
	width: 100%;
	height: 100%;
	position: "absolute";
	top: 0px;
	left: 0px;
	overflow: "hidden";
}


/* FORM FORM */

#f_error, #f_success {
	display: none;
}

input, textarea {
	font-size: 1rem !important;
	font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
	box-shadow: none !important;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
	height: 2.813rem !important;
	margin: 0 0 1.25rem;
}

textarea {
	height: 240px !important;
	padding-top: 11px !important;
}

span.required {
	color: #985a44;
	font-weight: 700;
}

.error input, input.error, .error textarea, textarea.error, .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus {
  border-color: #985a44 !important;
  border-left: 7px solid #985a44;
  margin-bottom: 16px;
}

.action-btn {
	background-color: #2e4c6f;
	border: medium none !important;
	box-shadow: none;
	color: #e0e0e0 !important;
	border-radius: 0;
	font-size: 0.94rem;
	padding: 6px 12px;
	text-transform: uppercase;
	opacity: 1;
	transition: all 0.25s ease 0s;
}

.action-btn:hover, .action-btn:active, .action-btn:focus {
	opacity: 0.9;
	color: #e0e0e0 !important;
	border: none !important;
}


#submit-btn {
	display: inline-block;
	margin-top: 36px;
	padding: 10px 15px;
	font-size: 1rem;
}



/* SHIFTER NAVBUTTON */
#nav-button {
	display: none;
}


/* 
 * Shifter v3.0.2 - 2014-01-20 
 * A jQuery plugin for simple slide-out mobile navigation. Part of the Formstone Library. 
 * http://formstone.it/shifter/ 
 * 
 * Copyright 2014 Ben Plum; MIT Licensed 
 */ 


.shifter-open {
	overflow: hidden !important;
}
.shifter-open .shifter-page * {
	pointer-events: none !important;
}

.shifter .shifter-navigation {
	display: none;
	opacity: 0;
}
.shifter .shifter-handle {
	display: none;
}

.shifter-active .shifter-page {
	box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15);
	display: block;
	left: 0;
	min-height: 100%;
	overflow: hidden;
	position: relative;
	top: 0;
	z-index: 1;
	-webkit-transform: translate3D(0px, 0px, 0px);
	-moz-transform: translate3D(0px, 0px, 0px);
	-ms-transform: translate3D(0px, 0px, 0px);
	-o-transform: translate3D(0px, 0px, 0px);
	transform: translate3D(0px, 0px, 0px);
}
.shifter-active .shifter-navigation {
	background: #22406c;
	visibility: hidden;
	display: block;
	height: 100%;
	opacity: 1;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 270px;
	z-index: 0;
	overflow-y: scroll;
}

#sidebar-nav {
	color: #7a8fae;
	list-style-type: none;
	padding: 20px 0px 20px;
}

#sidebar-nav > li > a {
	font-size: 1.2rem;
}

#sidebar-nav > li {
	margin-top: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #365078;
}

#sidebar-nav li a {
	color: #7a8fae;
	text-transform: uppercase;
}

#sidebar-nav li.current_page_item > a {
	color: #e0e0e0;
}

#sidebar-nav .children {
	list-style-type: square !important;
}

.shifter-active .shifter-page, .shifter-active .shifter-navigation {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.2s ease !important;
	-moz-transition: -moz-transform 0.2s ease !important;
	-ms-transition: -ms-transform 0.2s ease !important;
	-o-transition: -o-transform 0.2s ease !important;
	transition: transform 0.2s ease !important;
}
.shifter-active .shifter-handle {
	background: url(https://lemkemetallspritzerei.de/wp-content/themes/lemkemetallspritzerei/jquery.fs.shifter-icon.png) no-repeat center center;
	cursor: pointer;
	content: '';
	display: block;
	float: right;
	height: 30px;
	width: 30px;
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/* Right / Default */
.shifter-active .shifter-navigation {
	right: 0;
	-webkit-transform: translate3D(0px, 0px, 0px);
	-moz-transform: translate3D(0px, 0px, 0px);
	-ms-transform: translate3D(0px, 0px, 0px);
	-o-transform: translate3D(0px, 0px, 0px);
	transform: translate3D(0px, 0px, 0px);
}

.shifter-open .shifter-page {
	-webkit-transform: translate3D(-270px, 0px, 0px);
	-moz-transform: translate3D(-270px, 0px, 0px);
	-ms-transform: translate3D(-270px, 0px, 0px);
	-o-transform: translate3D(-270px, 0px, 0px);
	transform: translate3D(-270px, 0px, 0px);
}

/* Left */
.shifter-active.shifter-left .shifter-navigation {
	left: 0;
	-webkit-transform: translate3D(0px, 0px, 0px);
	-moz-transform: translate3D(0px, 0px, 0px);
	-ms-transform: translate3D(0px, 0px, 0px);
	-o-transform: translate3D(0px, 0px, 0px);
	transform: translate3D(0px, 0px, 0px);
}

.shifter-active.shifter-left.shifter-open .shifter-page {
	-webkit-transform: translate3D(270px, 0px, 0px);
	-moz-transform: translate3D(270px, 0px, 0px);
	-ms-transform: translate3D(270px, 0px, 0px);
	-o-transform: translate3D(270px, 0px, 0px);
	transform: translate3D(270px, 0px, 0px);
}

/* Open */
.shifter-open .shifter-navigation {
	pointer-events: all;
	visibility: visible;
	z-index: 100\9; /* IE 9- */
	-webkit-transform: translate3D(0px, 0px, 0px);
	-moz-transform: translate3D(0px, 0px, 0px);
	-ms-transform: translate3D(0px, 0px, 0px);
	-o-transform: translate3D(0px, 0px, 0px);
	transform: translate3D(0px, 0px, 0px);
}

/* IE 10 ONLY */
@media screen and (-ms-high-contrast: active) , (-ms-high-contrast: none) {
	/* Right / Default */
	.shifter-active .shifter-navigation {
		right: 0;
		-webkit-transform: translate3D(270px, 0px, 0px);
		-moz-transform: translate3D(270px, 0px, 0px);
		-ms-transform: translate3D(270px, 0px, 0px);
		-o-transform: translate3D(270px, 0px, 0px);
		transform: translate3D(270px, 0px, 0px);
	}

	/* Left */
	.shifter-active.shifter-left .shifter-navigation {
		left: 0;
		-webkit-transform: translate3D(-270px, 0px, 0px);
		-moz-transform: translate3D(-270px, 0px, 0px);
		-ms-transform: translate3D(-270px, 0px, 0px);
		-o-transform: translate3D(-270px, 0px, 0px);
		transform: translate3D(-270px, 0px, 0px);
	}

	/* Open */
	.shifter-open .shifter-navigation {
		pointer-events: all;
		-webkit-transform: translate3D(0px, 0px, 0px);
		-moz-transform: translate3D(0px, 0px, 0px);
		-ms-transform: translate3D(0px, 0px, 0px);
		-o-transform: translate3D(0px, 0px, 0px);
		transform: translate3D(0px, 0px, 0px);
	}
}

/*###################### MEDIA QUERIES ############################*/
/* Used to alter styles for screens max 1024px wide. */
@media only screen and (max-width: 1024px) {
	
	
	#content-container {
   		overflow: visible;
   	}
	
	.top-bar {
		display: none;
	}
	
	#nav-button {
		display: block;
		float: right;
	}
	
	#nav-button a {
	    color: #e0e0e0;
	    display: block;
	    font-size: 1.15rem;
	    padding: 23px 0;
	    text-transform: uppercase;
	}
	
	#toogle-container-trigger {
		display: none;
	}
	
}

/* Used to alter styles for screens max 768px wide. This is where the grid changes. */
@media only screen and (max-width: 768px) {
	#header-container {
		height: auto;
	}
}

/* Used to alter styles for screens max 480px wide. This is where the grid changes. */
@media only screen and (max-width: 640px) {
	
	body.page-template-lms-page-php {
		background: none !important;
	}
	
	#maps_canvas_wrapper {
		display: none !important;
	}
	
	#menu-container {
    	background: rgba(34, 64, 108, 1);
    }
	
	#content-container.page {
		margin-top: 0;
		padding-top: 70px;
	}
	
	#content-container.page .sidebar {
	    margin-top: 1.25rem;
	    padding-left: 0.9375rem;
	}
	
	#content-container.page h1 {
	    font-size: 1.75rem;
	}
	
	#content-container.page h2 {
	    font-size: 1.45rem;
	    margin-bottom: 35px;
	}
	
	#line-container {
    	margin-top: 75px;
    }
	
	.footer-box.col-right {
	    margin-left: 0;
	    margin-top: 25px;
	}
	
	#content-container.page .standort-box {
	    text-align: left;
	}
	
	#submit-btn {
		margin-top: 0;
	    margin-bottom: 36px;
	}
	
	a.link-box.col-left {
		margin-right: 0px;
		margin-bottom: 35px;
		max-width: 460px;
	}
	
	a.link-box.col-right {
		margin-left: 0px;
		margin-bottom: 35px;
		max-width: 460px;
	}
	
	#content-container.home {
	    padding-top: 100px !important;
    }
    
	#slogan-container h1 {
	    font-size: 2.2rem;
	}
    
    #slogan-container h1:after {
	    width: 60%;
	}
	
	#slogan-container p {
	    font-size: 1.2rem;
	}
	
}