/*
	Theme Name: NORD-SUED-BAU
	Theme URI: https://www.comtecda.de
	Description: NORD-SUED-BAU - Neuruppin
	Version: 1.0.0
	Author: Thomas Pietsch (www.comtecda.de)
	Author URI: www.comtecda.de
	Tags: Nord-Sued-Bau, comtecda, Generic, Template, HTML5, CSS3
*/

/*------------------------------------*\
/* corporate colors */

/*  red: #e30617
/* blue: #00267f

\*------------------------------------*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/
@font-face { font-family: 'inter'; src: url('fonts/inter.ttf')}

/* global box-sizing */
*,
*:after,
*:before {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
-	webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	scroll-behavior: smooth;
	height: 100%;
}
body {
	font: 17px 'inter', Arial, sans-serif;
	font-weight: 300;
	color: #444444;
	background: #eeeeee;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
ul, ol{ padding:0; margin:0;}
a{text-decoration:none;}

/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/
article ul, ol, p, h1, h2, h3, h4, h5, h6, pre, blockquote{ margin: 0; padding: 0 0 20px 0; color: #444444; }
article h1, h2, h3, h4, h5, h6{ margin: 5px 0; font-family: 'inter', Arial, sans-serif; color:#444444;}

article h1{ font-size: 75px; }
article h2{ font-size: 45px; }
article h3{ font-size: 30px; }
article h4{ font-size: 30px; }
article h5{ font-size: 25px; }
article h6{ font-size: 20px; }

article p{
	font-size: 17px;
	line-height: 25px;
}

article ul{
	list-style-type: disc;
	margin-left: 30px;
	line-height: 25px;
}
article ol{
	margin-left: 30px;
	line-height: 20px;
}

article p a{ 
	font-weight: bold;
	color: #444444;
	padding: 3px 5px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
article p a:hover{ 
	background: #00267f;
	color: #ffffff;
	border-radius: 3px;
}

article pre{
	font: 17px 'Ubuntu Mono';
	font-weight: 300;
}

article blockquote {
	font-family: 'inter', serif;
	margin: 0 60px 0 60px;
	position: relative;
	text-align: justify; 
}
article blockquote p{
	font: 17px 'inter', serif;
	font-weight: 300;
	font-style: italic;
}
article blockquote:before {
	display: block;
	content: "\201C";
	font-size: 60px;
	position: absolute;
	left: -30px;
	top: -15px;
}
article blockquote:after {
	display: block;
	content: "\201d";
	font-size: 60px;
	position: absolute;
	right: -30px;
	bottom: 0px;
}

/*------------------------------------*\
    ARROW
\*------------------------------------*/
.arrow{
	background-image:url('img/arrow_up.png');
	position:fixed;
	bottom:10px;
	left:10px;
	min-width:50px;
	min-height:50px;
	width:50px;
	height:50px;
	border-radius:3px;
	opacity: 0.8; 
	transition: all .25s ease-in;
	z-index: 2000;
}
.arrow:hover{
	height: 60px;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/
.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text, .gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}

/*------------------------------------*\
    PRINT
\*------------------------------------*/
@media print {
	* {
		/*background:transparent !important;*/
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p{ font-size:12px; }
	h1,h2,h3,h4,h5,h6{ font-size:20px; font-weight:none; }
	.footer{ font-size:12px; }
}


/* header */
.header_top{
	font: 20px 'inter', Arial, sans-serif;
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
	color: #ffffff;
	background: #000000;
	display: flex;
}
.header_top_left{
	height: 50px;
	width: 50%;
	line-height: 50px;
	padding-left:16.6%;
}
.header_top_right{
	height: 50px;
	width: 50%;
	line-height: 50px;
}
.header_top_right img{
	width: auto;
	height: 35px;
	vertical-align: top;
	margin-top: 7px;
}

.header_main{
	width: 100%;
	height: 100px;
	display: flex;
}
.header_main_left{
	width: 30%;
	height: 110px;
	line-height: 110px;
	text-align: right;
	background-color: #ffffff;
}
.header_main_left img{
	height: 60px;
	width: 364px;
	padding-right: 150px;
	vertical-align: middle;
}
.header_main_right{
	width: 70%;
	height: 100px;
	line-height: 100px;
	background-color: #e30617;
}
.header_main_left:before { 
	content: "";
	width: 110px;
	height: 110px;
	background: #ffffff;
	position: absolute;
	top: 0px;
	left: calc(30% - 55px);
	z-index: 0;
	-webkit-transform: skewX(-45deg);
	transform: skewX(-45deg);
}
/* menu */
.sticky {
  position: sticky;
  position: -webkit-sticky;
  color: #ffffff;
  background: #000000;
  width: 100%;
  height: 100px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:1000;
}

/* Navigation */
nav{ display: table-cell !important;text-align: right; }
nav ul { list-style: none; margin: 0 0 0 100px; }
nav li { float: left; margin: 0px 25px 0px 25px; }
nav li a{ color: #ffffff; font: 20px 'inter', Arial, sans-serif; text-decoration: none;}
nav li a:hover{ text-decoration: underline; }

/* page wrapper */
.page-wrapper{
	background: #eeeeee;
	margin: 0;
	padding: 0;
	z-index: 1;
}

/* footer */
.footer{
	width: 100%;
	height: 100px;
	line-height: 50px;
	text-align:center;
	background: #000000;
	color: #ffffff;
	padding: 0;
	margin: 0;
	z-index: 1000;
}
.footer a{
	text-decoration: none;
	color: #ffffff;
}


/* CHANGE COMPOSER THINGS */
.vc_column-inner{
	margin:0 !important;
	padding:0 !important;
}
.vc_row {
    margin: 0 !important;
	padding: 0 !important;
}
.wpb_content_element{
	margin: 0 !important;
}
.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-heading {
  border-color: #ffffff !important;
  background-color: transparent !important;
}
.vc_tta.vc_tta-shape-rounded .vc_tta-panel-heading {
  border-radius: 0 !important;
}
/* contact form */
input{
	width:100%;
	height:30px;
	border: 1px solid #b2b2b2;
}

input.wpcf7-submit{
	height: 50px;
	width: 100px;
	float:right;
	line-height: 50px;
	color: #ffffff;
	background: #00267f;
	border-radius: 5px;
	border: 1px solid #000000;
}
textarea{
	width: 100%;
	border: 1px solid #b2b2b2;
}

/* round border image */
.round img{ border-radius: 20px; }

/* justify */
.justify{text-align:justify;}

/* text shadow */
.shadow{ text-shadow: 0 0 10px #000000, 0 0 7px #000000, 0 0 5px #000000, 0 0 3px #000000, 0 0 1px #000000;}

/* disable hamburger menu on not responsive layouts */
@media screen and (min-width: 1281px) {
	nav a#nav-m, nav a.close { display: none; }
}

/* RESPONSIVE */
@media screen and (max-width:1024px){
	/* header */
	.header_top{
		display: flex;
	}
	.header_top_left{
		display: none;
	}
	.header_top_right{
		width: 100%;
		font-size: 15px;
		text-align:center;
	}
	#social{
		display:none;
	}
	.header_main{
		display: flex;
		background: #ffffff;
	}
	.header_main_left{
		height: 100px;
		line-height: 100px;	
		width: calc(100% - 50px);
		text-align: left;
		background: #ffffff;
	}
	.header_main_left img{
		padding: 0 0 0 20px;
		height: 60px;
		width: auto;
	}
	.header_main_right{
		height: 100px;
		width: 50px;
		background: #ffffff;
	}
	.header_main_left:before { 
		display: none;
	}

	/* page wrapper */
	.page-wrapper{ margin-top: 10px; padding: 0 !important;}
	
	.wpb_content_element{ padding: 0 10px!important; }	
	
	/* footer */
	.footer{ height: 70px; padding: 0; clear: both; font-size:13px; line-height: 35px;}
	/* article */
	article h1{ font-size: 30px; }
	article h2{ font-size: 25px; }
	article h3{ font-size: 20px; }
	article h4{ font-size: 20px; }
	article h5{ font-size: 20px; }
	article h6{ font-size: 20px; }


	/* navigation */
	nav ul {
		top: 0px;
		position: absolute;
		color: #000000;
		background: #ffffff;
		width: 100%;
		height: 100vh;
		left: -100%;

		list-style-type:none;
		margin: 0;
		padding: 0;

		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	nav ul li{ clear: both; display: block; text-align: center; color: #333333; line-height: 50px; font-weight: bold; padding: 6px 15px; margin: 0; width:100%; border-bottom: 1px solid #333333; }
	nav li a { background: transparent; color: #333333;}

	/*----- Hamburger-Icon -----*/
	nav a#nav-m img, nav a.close img { position:absolute; top: 13px; right: 10px; width: 40px; height: auto; z-index:2000; }
	nav > .close, nav a#nav-m:target { display: none; }
	nav a:target ~ ul, nav a:target ~ .close { display: inline-block; }
	nav a:target ~ .close { margin-left: -40px; z-index:2000; }
	nav a:target ~ ul { left: 0; }
	/*--------------------------*/
}