/*
=====================================================================
*   Kreative v1.0 Layout Stylesheet
*   url: styleshout.com
*   09-26-2013
=====================================================================
   TOC:
   a. Common Styles
   b. Header Styles
   c. Intro Section
   d. Services
   e. Postfolio
   f. Journal
   g. About
   h. Map
   i. Contact
   j. Blog Post
   k. Blog Entries
   l. Footer Styles
   m. Media Queries
===================================================================== */

/* ================================================================== */
/* a. Common Styles
/* ================================================================== */

.section-head h2 { font: 36px/42px montserrat-bold, sans-serif; }
.desc { font: 12px/24px opensans-regular, sans-serif; }
.intro { font: 15px/30px opensans-light, sans-serif; }

/* Left clearing for flexible columns - columns that changes width in
different screen sizes. Makes columns with different heights align
properly.
--------------------------------------------------------------------- */
.first { clear: left; }   /* first column in default screen */
.m-first { clear: none; } /* first column in medium size screens */

/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { 
	outline: none; }
.slides, .flex-control-nav,
.flex-direction-nav { 
	margin: 0; 
	padding: 0; 
	list-style: none; }
.slides li { 
	margin: 0; }

/* Necessary Styles */
.flexslider {
   position: relative;
   zoom: 1;
   margin: 0;
   padding: 0; }
.flexslider .slides { 
	zoom: 1; }
.flexslider .slides > li { 
	position: relative; }

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { 
	display: none; 
	-webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { 
	zoom: 1; 
	position: relative; }

/* Clearfix for .slides */
.slides:before,
.slides:after {
    content: " ";
    display: table; }
.slides:after {
    clear: both; }

/* ================================================================== *
/* b. Header Styles
/* ================================================================== */

header {
   height: 42px;
   width: 100%;
   z-index: 99999;
   background: url(../bilder/k-opacity-70.png);
   position: fixed;
   top: 0;
   left: 0; }
header.static {
   background: #6a6a6a;
   position: static; }

/* header logo */
header .logo {
   position: relative;
   height: 42px;
   width: 220px;
   float: left; }
header .logo a {
   display: block;
   padding: 0;
   margin: 0;
   height: 20px;
   width: 200px;
   line-height: 20px;
   position: absolute;
   left: 0px;
   top: 17px; }

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none; }

/* nav-wrap */
#nav-wrap {
	position: relative;
   font: 15px montserrat, sans-serif; /*opensans-regular, sans-serif;*/
   float: left; }

/* hide toggle button */
#nav-wrap > a { 
	display: none; }

ul#nav {
   min-height: 42px;
   width: auto;

   /* left align the menu */
   text-align: left; }
ul#nav li {
	position: relative;
	list-style: none;
   height: 42px;

   display: inline-block; }
ul#nav > li.active a {
   background: #b50c31;
   color: #fff !important; }

/* Links */
ul#nav li a {
   display: block;
   padding: 0 14px;
   line-height: 42px;
	text-decoration: none;
   text-align: left;
   color: #fff;
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out; }

ul#nav li a:active { 
	background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.active a { 
	color: #b50c31; }

/* ================================================================== */
/* Home
/* ================================================================== */

#home {
   background: #ffffff url(../bilder/intro2-f4.jpg) no-repeat center;
   overflow: hidden; }

/* FlexSlider Intro Slider Styles */
.slides {
   max-height: 660px;
   overflow: hidden; }
.slider-text {
   color: #eeeeee;
   text-align: center;
   width: 85%;
   margin: 156px auto 66px auto; }
.slider-text h2 {
   font: 56px/78px montserrat-regular, Sans-serif;
   color: #fff;
   text-shadow: 0px 1px 5px rgba(50, 50, 50, .5);
   padding: 0;
   margin: 0; }
.slider-text h2 span,
.slider-text a { color: #b50c31; }

.slider-text p {
   font: 17px/36px opensans-light, sans-serif;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .3);
   padding: 0;
   margin: 18px 10% 0; }

/* Direction Navigation
--------------------------------------------------------------- */
.flex-direction-nav a {
   display: block;
	width: 40px;
	height: 66px;
	margin: 0;
	background-color: #2D3339;
	cursor: pointer;
	z-index: 99999;
	opacity: 0;
   position: absolute;
	top: 50%;
   font: 0/0 a;
   text-shadow: none;
   color: transparent;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; }

.flex-direction-nav a:hover { 
	background-color: #b50c31; }

.flex-direction-nav .flex-next {
	right: 0px;
	background: #2D3339 url(../bilder/direction-nav-right.png) no-repeat 53% 50%;
	position: absolute; }
.flex-direction-nav .flex-prev {
	left: 0px;
	background: #2D3339 url(../bilder/direction-nav-left.png) no-repeat 47% 50%;
	position: absolute; }
.flexslider:hover .flex-next,
.flexslider:hover .flex-prev { 
	opacity: 1; }
.flex-direction-nav .flex-disabled {
   opacity: .3 !important;
   filter: alpha(opacity=30);
   cursor: default; }

/* ================================================================== */
/* e. Portfolio
/* ================================================================== */

#portfolio {
   background: #ffffff;
   padding-top: 72px;
   padding-bottom: 42px; }
#portfolio .section-head h2 {
	color: #a30000; } /* #b50c31;*/ 
#portfolio .section-head p.desc,
#portfolio .section-head .intro {
	color: #ffffff; }

/* Portfolio Content */
#portfolio-wrapper-messe1,
#portfolio-wrapper-messe2,
#portfolio-wrapper-messe3,
#portfolio-wrapper-grafik1,
#portfolio-wrapper-grafik2,
#portfolio-wrapper-grafik3,
#portfolio-wrapper-vis1,
#portfolio-wrapper-vis2,
#portfolio-wrapper-vis3,
#portfolio-wrapper-werkzeug1,
#portfolio-wrapper-werkzeug2,
#portfolio-wrapper-werkzeug3,
#portfolio-wrapper-werkzeug4 {
	margin-top: 6px; }
#portfolio-wrapper-messe1 .col,
#portfolio-wrapper-messe2 .col,
#portfolio-wrapper-messe3 .col,
#portfolio-wrapper-grafik1 .col,
#portfolio-wrapper-grafik2 .col,
#portfolio-wrapper-grafik3 .col,
#portfolio-wrapper-vis1 .col,
#portfolio-wrapper-vis2 .col,
#portfolio-wrapper-vis3 .col,
#portfolio-wrapper-werkzeug1 .col,
#portfolio-wrapper-werkzeug2 .col,
#portfolio-wrapper-werkzeug3 .col,
#portfolio-wrapper-werkzeug4 .col {
   width: 33%; /*25%;*/
   margin-bottom: 36px; }
.portfolio-item .item-wrap {
	border-radius: px;
	border: 1px solid silver;
   background: #5b5b5b;    /*Box-Beschreibung*/
   overflow: hidden;
   -webkit-box-shadow: 7px 7px 7px rgba(80, 80, 80, 0.8);
   -moz-box-shadow:    7px 7px 10px rgba(80, 80, 80, 0.8);
   box-shadow:         7px 7px 7px rgba(80, 80, 80, 0.8);
   -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; }
.portfolio-item .item-wrap a {
	display: block; }
.portfolio-item .portfolio-item-meta { 
/*	padding: 0px 0; }*/
	padding-top: 0px;          /*genaue Positionierung des Beschreibungstextets*/
   padding-bottom: 9px; }         /*genaue Positionierung des Beschreibungstextets*/
.portfolio-item .portfolio-item-meta h5 a {
	font: 15px/30px opensans-regular, sans-serif;
 /*  font: 12px/24px montserrat-bold, sans-serif;*/
   color: #ffffff;
   margin-left: 7%; }

/* on hover */
.portfolio-item:hover .item-wrap {
	background-color: #b50c31; }
.portfolio-item:hover h5 a {
	color: #ffffff !important; }

/* ================================================================== */
/* Messe
/* ================================================================== */

#messe {
   background: #ffffff;
   background-size: cover;
   padding-top: 48px;
   padding-bottom: 20px;
   color: #7fe6ed ; }
#messe a, #messe a:visited  { 
	color: #ffffff; }
#messe a:hover, #werkzeuge a:focus { 
	color: #e80000; }
#messe .section-head h2 { 
	color: #b50c31; }
#messe .section-head p.desc,
#messe .section-head .intro { 
	color: #000000 ;
   margin-top: 12px;}   /*Abstand für Fließtext nach unten*/
.messe-wrapper { 
	margin-top: 42px; }
.messe-wrapper .col {
   width: 33.33333%;
   margin-bottom: 30px; }
.messe-wrapper h2 {
   font: 12px/24px montserrat-bold, sans-serif;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #C4C4C4;
   margin-bottom: 18px; }
.messe-wrapper p {
   font-size: 12px;
   line-height: 30px; }
#messe .messe-wrapper i { 
	margin-right: 10px; }

/* ================================================================== */
/* Grafik
/* ================================================================== */

#grafik {
   background: #e5e5e5;
   background-size: cover;
   padding-top: 48px;
   padding-bottom: 20px;
   color: #4E565F; }
#grafik a, #grafik a:visited  { 
	color: #ffffff; }
#grafik a:hover, #werkzeuge a:focus { 
	color: #b50c31; }
#grafik .section-head h2 {
	color: #b50c31; }
#grafik .section-head p.desc,
#grafik .section-head .intro { 
	color: #000000;
   margin-top: 12px;}   /*Abstand für Fließtext nach unten*/
.grafik-wrapper { 
	margin-top: 42px; }
.grafik-wrapper .col {
   width: 33.33333%;
   margin-bottom: 30px; }
.grafik-wrapper h2 {
   font: 16px/24px montserrat-bold, sans-serif;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #C4C4C4;
   margin-bottom: 18px; }
.grafik-wrapper p {
   font-size: 16px;
   line-height: 30px; }
#grafik .grafik-wrapper i { 
	margin-right: 10px; }

/* ================================================================== */
/* Visualisierung
/* ================================================================== */

#visualisierung {
   background: #ffffff;
   background-size: cover;
   padding-top: 48px;
   padding-bottom: 20px;
   color: #7fe6ed; }
#visualisierung a, #visualisierung a:visited  { 
	color: #ffffff; }
#visualisierung a:hover, #werkzeuge a:focus { 
	color: #b50c31; }
#visualisierung .section-head h2 {
	color: #b50c31; }
#visualisierung .section-head p.desc,
#visualisierung .section-head .intro { 
	color: #000000;
   margin-top: 12px;}   /*Abstand für Fließtext nach unten*/
.visualisierung-wrapper { 
	margin-top: 42px; }
.visualisierung-wrapper .col {
   width: 33.33333%;
   margin-bottom: 30px; }
.visualisierung-wrapper h2 {
   font: 16px/24px montserrat-bold, sans-serif;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #C4C4C4;
   margin-bottom: 18px; }
.visualisierung-wrapper p {
   font-size: 16px;
   line-height: 30px; }
#visualisierung .visualisierung-wrapper i { 
	margin-right: 10px; }

/* ================================================================== */
/* Werkzeuge
/* ================================================================== */

#werkzeuge {
   background: #e5e5e5;
   background-size: cover;
   padding-top: 48px;
   padding-bottom: 20px;
   color: #4E565F; }
#werkzeuge a, #werkzeuge a:visited  { 
	color: #ffffff; }
#werkzeuge a:hover, #werkzeuge a:focus { 
	color: #b50c31; }
#werkzeuge .section-head h2 {
	color: #b50c31; }
#werkzeuge .section-head p.desc,
#werkzeuge .section-head .intro { 
	color: #000000;
   margin-top: 12px;}   /*Abstand für Fließtext nach unten*/
.werkzeuge-wrapper { 
	margin-top: 42px; }
.werkzeuge-wrapper .col {
   width: 33.33333%;
   margin-bottom: 30px; }
.werkzeuge-wrapper h2 {
   font: 16px/24px montserrat-bold, sans-serif;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #C4C4C4;
   margin-bottom: 18px; }
.werkzeuge-wrapper p {
   font-size: 16px;
   line-height: 30px; }
#werkzeuge .werkzeuge-wrapper i { 
	margin-right: 10px; }

/* ================================================================== */
/* Karte
/* ================================================================== */

#map {
   display: block;
	height: 486px;
   width: 100%;
   background-color: #ffffff; }
#map img { max-width:inherit !important; }
#map .map-error {
  text-align: center;
  padding-top: 48px;
  color: #C0B491;
  font-size: 14px;}

/* ================================================================== */
/* Kontakt
/* ================================================================== */

#kontakt {
   background-color: #ffffff;
   background-size: cover;
   padding-top: 20px;
   padding-bottom: 0px;
   color: #b2b2b2; }
#kontakt a, #kontakt a:visited  { 
	color: #b2b2b2; }
#kontakt a:hover, #contact a:focus { 
	color: #b50c31; }
#kontakt .section-head { 
	margin-bottom: 0px; }
#kontakt .section-head h2 {
	color: #b50c31; }
#kontakt .section-head p.desc,
#kontakt .intro { 
	color: #000000;
   margin-top: 12px;}   /*Abstand für Fließtext nach unten*/
#kontakt p {  }

/* contact form */
#kontakt form { 
	margin-bottom: 30px; }

#kontakt label {
   font: 15px/24px opensans-semibold, sans-serif;
   margin: 12px 0;
   color: #b50c31;
	display: inline-block;
	float: left;
   width: 22%; }
#kontakt input,
#kontakt textarea,
#kontakt select {
   padding: 18px 20px;
	color: #eee;
	background: #3F464B;
	margin-bottom: 42px;
	border: 0;
	outline: none;
   font-size: 15px;
   line-height: 24px;
   width: 66%; }
#kontakt input:focus,
#kontakt textarea:focus,
#kontakt select:focus {
	color: #b50c31;
	background-color: #b50c31;}

#kontakt span.required {
	color: #b50c31;
	font-size: 13px; }

#image-loader {
   display: none;
   position: relative;
   left: 18px;
   top: 12px; }

/* contact sidebar */
#kontakt aside h3 {
   font: 21px/30px montserrat-bold, sans-serif;
   margin-bottom: 18px;
   color: #b50c31; }

/* ================================================================== */
/* l. footer
/* ================================================================== */

footer {
   height: 42px;
   background: #6a6a6a;
/*   margin-top: 30px;
   margin-bottom: 30px; */
   color: #ffffff;
   font-size: 14px; }
footer a, footer a:visited { 
	color: #b50c31; }
footer a:hover, footer a:focus { 
	color: #878787; }

/* copyright */
footer .copyright {
    margin: 0;
    padding: 0; }
footer .copyright li {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 42px; }
.ie footer .copyright li {
   display: inline; }

footer .copyright li:before {
    content: "|";
    padding-left: 10px;
    padding-right: 10px;
    color: #b50c31; }
footer .copyright  li:first-child:before {
    display: none; }

/* social links */
footer .social-links {
   margin: 0;
   padding: 0;
   font-size: 18px;
   margin-top: -3px;
   float: right; }
footer .social-links li {
    display: inline-block;
    margin: 0;
    padding: 0;
    margin-left: 24px; }
footer .social-links li:first-child { 
	margin-left: 0; }

/* ================================================================== */
/* m. Media Queries
/* ================================================================== */


/* small screens
--------------------------------------------------------------------- */
@media only screen and (max-width: 836px) {

   /* adjust sections padding top */
   #messe, #grafik,
   #visualisierung, #werkzeuge { 
   	padding-top: 120px; }

   /* adjust font size */
   .intro, .testimonies .client-cite { 
   	font-size: 18px; }

   /* intro section
   -------------------------------------------------------------------- */
   .slider-text h2 { font: 48px/66px montserrat-regular, Sans-serif; }

   /* services section
   -------------------------------------------------------------------- */
   #services .section-head .col { width: 100%; }
   #services .services-wrapper { margin-top: 12px; }
   #services .services-wrapper .col { width: 50%; }
   #services .services-wrapper .col { margin-bottom: 0; }

   /* portfolio section
   -------------------------------------------------------------------- */
   #portfolio #portfolio-wrapper { margin-top: 12px; }
   #portfolio #portfolio-wrapper .col { width: 33.33333%; }

   /* journal section
   -------------------------------------------------------------------- */
   #journal .blog-entries { margin-top: 30px; }

   /* about section
   -------------------------------------------------------------------- */
   #about .process-wrap .col { width: 50%; }

   /* about section
   -------------------------------------------------------------------- */
   #about .section-head .col { width: 100%; }

   /* contact section
   ----------------------------------------------------------------------- */
   #contact label { width: 25%; }
   #contact button.submit { margin-left: 25%; }
   #contact input,
	#contact textarea,
	#contact select { width: 70%; }
   #message-warning, #message-success { width: 95%; }

   /* left clearing */
   .first { clear: none; }
   .m-first { clear: left; } }

/* mobile wide
---------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

   /* center align some text */
   .section-head, .intro, #about h3,
   #journal .entry-header {
      text-align: center; }

   /* mobile navigation
   -------------------------------------------------------------------- */

   header.mobile { height: 66px; }
   header.mobile .logo a { top: 22px; }

   .mobile #nav-wrap {
      position: absolute;
      top: 0;
      right: 20px;
      width: auto;
      margin: 0; }
   .mobile #nav-wrap > a {
	   width: 48px;
		height: 48px;
		text-align: left;
		background-color: #b50c31;
		position: relative;
      border: none;
      float: right;
      font: 0/0 a;
      text-shadow: none;
      color: transparent; }

	.mobile #nav-wrap > a:before,
   .mobile #nav-wrap > a:after {
	   position: absolute;
		border: 2px solid #fff;
		top: 35%;
		left: 25%;
		right: 25%;
		content: ''; }
   .mobile #nav-wrap > a:after { top: 60%; }

   /* toggle buttons */
	.mobile #nav-wrap:not( :target ) > a:first-of-type,
	.mobile #nav-wrap:target > a:last-of-type  {
	   display: block; }

   /* hide menu panel */
   .mobile #nav-wrap ul#nav {
      height: auto;
		display: none;
      clear: both; }
   .mobile #nav-wrap ul#nav li {
      display: block;
      width: 100%;
      height: 100%;
      text-align: left; }
   .mobile #nav-wrap ul#nav > li.active a {
      color: #b50c31 !important;
      background: none; }

   /* display menu panels */
	.mobile #nav-wrap:target > ul#nav	{
	   display: block;
      padding: 12px 25px 24px 25px;
      background: #4c4e5a;
      margin: 0;
      clear: both; }
   .mobile #nav-wrap ul#nav li { border-bottom: 1px dotted #595B6A; }
   .mobile #nav-wrap ul#nav li a {
      margin: 0;
      padding: 0;
      font-size: 13px;
      margin: 10px 0;
      line-height: 14px;
      border: none; }

    /* intro section
   -------------------------------------------------------------------- */
   .slider-text { margin-top: 120px; margin-bottom: 48px; }
   .slider-text h2 { font: 43px/54px montserrat-regular, sans-serif; }
   .slider-text p {
      font: 14px/30px opensans-regular, sans-serif;
      margin-top: 30px; }
   .slides {
      overflow: hidden;
      min-height: 300px; }

   /* portfolio section
   --------------------------------------------------------------------- */
    .reveal-modal {
   	margin-left: -42%;
		width: 84%; }

   /* journal section
   --------------------------------------------------------------------- */
   #journal .entry-header .author-image {
      display: none; }
   #journal .entry-header .entry-title {
      padding-left: 20px;
      margin-bottom: 18px; }
   #journal .entry .post-content {
      padding-left: 20px;
      margin-top: 6px; }
   #journal .entry .post-meta time,
   #journal .entry .post-meta .dauthor {
      display: inline; }
   #journal .entry .post-meta .dauthor:before {
      content: "/";
      padding-left: 5px;
      padding-right: 5px; }

   /* about section
   ----------------------------------------------------------------------- */
   .testimonials {
      text-align: center; }
   .testimonials .client-author .name {
      position: static; }
   .testimonials .client-author span {
      display: inline; }
   .testimonials .client-author span:before {
      content: "/";
      padding-left: 5px;
      padding-right: 5px; }

   /* contact section
   ----------------------------------------------------------------------- */
   #contact label {
      display: block;
      float: none;
      width: auto; }
   #contact input,
	#contact textarea,
	#contact select {
      width: 100%;
      margin-bottom: 30px; }
   #contact button.submit {
      margin-left: 0; }
   #message-warning,
   #message-success {
      width: 100%; }

   /* journal bottom nav */
   .journal-bottom-nav {
      margin-left: 0;
      text-align: center; }

   /* footer
   ------------------------------------------------------------------------ */
   footer .copyright li:before { content: none; }
   footer .copyright li { margin-right: 10px; }
   footer .copyright, footer .social-links {
      text-align: center;
      float: none; }
   footer .social-links { margin-top: 12px; } }

/* mobile narrow
  -------------------------------------------------------------------------- */

@media only screen and (max-width: 460px) {

   /* intro section
   ------------------------------------------------------------------------- */
   .slider-text { margin-top: 108px; margin-bottom: 36px; }
   .slider-text h2 { font: 32px/42px montserrat-regular, sans-serif; }
   .slider-text p {
      font: 12px/24px opensans-regular, sans-serif;
      margin-top: 24px; }

    /* journal section
   ------------------------------------------------------------------------- */
   #journal .entry-title h3 {
     font-size: 28px;
     line-height: 36px; } }