/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
  body {font-family: 'Source Sans Pro', sans-serif;font-weight:700;-moz-osx-font-smoothing: grayscale;}
img {width:100%;height:auto;}
.container960 {
	width: 95%;
	max-width: 960px;
	margin: 0 auto;
	font-weight: bold;
}
section .container960 {padding-top:60px;}
header h1 {padding:50px 0px 0px 0px;margin:0;float:left;-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
header h1 span {}
header h1 img {max-width:292px;-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
header {border-bottom:1px solid #8a8a8a;height:140px;background-color: rgba(255,255,255, 0.9); /* Black w/opacity */position:fixed;top:0;width:100%;-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
header.shrink {height:80px;z-index:99;}
header.shrink h1 {padding-top:20px;}
header.shrink h1 img {max-width:200px;}
header span.menuOpener {font-size:30px;color:#717271;-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
.menuHolder {float:right;padding-top:40px;}
header.shrink .menuHolder {padding-top:15px;}
a.langSwitch {font-size:30px;font-weight:300;color:#717271;text-decoration:none;text-transform:uppercase;padding-right:30px;-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
a.langSwitch:hover {color:#d1303a;}
/* ----------------- NAVI --------------------- */
 /* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 991; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(255,255,255); /* Black fallback color */
    background-color: rgba(255,255,255, 1.0); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 0; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: left; /* Centered text/links */
    margin-top: 7px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 50px;
    color: #717271;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
	text-transform:uppercase;
	
}
form .field label {font-size:16px;font-weight:300;color:#717271;display:block;}
form .field input, form .field textarea{width:95%;border:1px solid #717271;font-size:16px;font-weight:300;color:black;padding:5px;border-radius:5px;margin-bottom:15px;}
form .field button {color:white;background:#d1303a;border:0;border-radius:5px;}
.overlay nav img {max-width:652px;padding-top:100px;}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color:#d1303a;
}
.formHolder {padding-top:230px;}
/* Position the close button (top right corner) */
.overlay .closebtn {
    position:absolute;top:0;right:0;font-size:40px;text-transform:uppercase;color:#717271;text-align:right;padding:0px 0px;text-align:right;
}
.overlay .closebtn .fa-times {font-size:40px;}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 0px;
        right: 0px;
    }
}
.naviLogoHolder {display:block;float:left;max-width:430px;width:50%;text-align:right;}
.naviLogoHolder img {padding-left:0px;padding-top:160px;}

nav ul {list-style-type:none;padding:15px 0px 0px 140px;margin:0;font-weight:300;}
nav ul li a {color:#717271;font-size:50px;padding-bottom:0;margin-bottom:0;line-height:50px;}


/* OVERLAY end */
.abstand50 {width:100%;height:50px;}
.abstand60 {padding-top:40px;}
.col70  {display:block;float:left;width:70%;}
.col30  {display:block;float:left;width:30%;}
.col40  {display:block;float:left;width:40%;}
.col60 {display:block;float:left;width:60%;background-color: rgba(255,255,255, 0.9);}
.col65 {display:block;float:left;width:65%;}
.col90 {width:90%;display:block;float:left;}
.col50 {display:block;width:50%;float:left;}

.lastCol {float:right;}
h2 {font-size:60px;color:#717271;font-weight:300;text-transform:uppercase;line-height:60px;}
h2.red {color:#d1303a;padding:20px 0 30px 0;}
h3 {font-weight:700;color:#2a4d8b;font-size:16px;} 
h4 {font-size:30px;font-weight:300;color:#717271;line-height:30px;}
h5 {color:#d23b44;font-size:30px;font-weight:400;text-transform:uppercase;padding-top:70px;}
p {font-size:16px;font-weight:300;color:#717271;}
p a {font-size:16px;font-weight:300;color:#717271;text-decoration:none;}
p strong {font-weight:700;}
section {border-bottom:0px solid #717271;padding-bottom:70px;}
section#startseite {background:url(../img/bg-wuerfel.jpg) no-repeat right bottom;padding-top:180px;}
/*section#profil {background:url(../img/profil-bg.jpg) no-repeat right center;}
section#leistungen {background:url(../img/leistungen-bg.jpg) no-repeat left center; background-size:contain;}*/
.rightAlign {text-align:right;}

.parallax {position:relative;background-attachment:fixed;height:400px;background-position:center center;background-size:cover;}
.parallax.profilpara {background-image:url(../img/img-1.jpg);}
.parallax.leistungpara{background-image:url(../img/img-2.jpg);}
.parallax.netzwerkpara{background-image:url(../img/img-6.jpg);}
.parallax.referenzenpara{background-image:url(../img/img-3.jpg);}
.parallax.kontaktpara {background-image:url(../img/img-4.jpg);}
.parallax.impressumpara{background-image:url(../img/img-5.jpg);}
.gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:120px;
    background: none;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
  background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
 .sectionNameHolder {position:relative;height: 22px;}
 .sectionNameHolder::after {
    background:#717271;
    bottom: 0;
    content: "";
    height: 22px;
    position: absolute;
    right: 100%;
    width: 9600px;

}
p.abstandLinks {padding-left:140px;}
p.strongerFont {font-weight:700;}
.sectionNameHolder h5 {background:#d1303a;color:white;text-transform:uppercase;font-size:15px;display:table; padding:0px 5px;border-left:1px solid white;margin:1px 0px 2px 0px;line-height:22px;}
ul.tabs {
	margin: 30px auto 0 auto;
	padding: 0;
	
	list-style: none;
	height: 45px;
	border-bottom: 0px solid #333;
	width: auto;
	text-align:center;
}

ul.tabs li {
	display:inline-block;
	margin: 0;
	cursor: pointer;
	padding: 0px 10px;
	height: 45px;
	line-height: 31px;
	border-top: 0px solid #333;
	border-left: 0px solid #333;
	border-bottom: 0px solid #333;
	background-color: #fff;
text-transform:uppercase;
	
	position: relative;
	font-weight:400;color:#d23b44;
}
.separator {
	display:inline-block;
    content: " ";width:5px;

    word-spacing: 2em;
   
}
.separator img {position:relative;top:-2px;}
.tab_last { border-right: 0px solid #333; }

ul.tabs li:hover {
	background-color: #fff;
	color:#d23b44;
	border-bottom: 0px solid #fff;background-image:url(../img/tabItem.gif);background-repeat:no-repeat;background-size:auto;background-position:bottom center;
}

ul.tabs li.active {
	background-color: #fff;
	color:#d23b44;
	border-bottom: 0px solid #fff;
	
	background-image:url(../img/tabItem.gif);background-repeat:no-repeat;background-size:auto;background-position:bottom center;
}

.tab_container {
	border:0px solid #333;
	border-top: none;
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
	overflow: auto;
}
.tab_container h6 {font-weight:300;color:#d1303a;text-transform:uppercase;font-size:30px;margin:0;padding:20px 0 20px 0;}
.tab_container p {border-left:10px solid #d1303a;padding-left:30px;}

.tab_content {
	padding: 20px;
	display: none;
}

.tab_drawer_heading { display: none; }

@media screen and (max-width: 780px) {
	.overlay a {font-size: 20px;line-height:25px;}
	.formHolder {padding-top:20px;}
	.parallax {background-attachment:scroll;}
	.tabs {
		display: none;
	}
	.tab_drawer_heading {
		background-color: #fff;
		color:#d23b44;
		border-top: 1px solid #CCC;
		margin: 0;
		padding: 5px 20px 5px 5px;
		display: block;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.d_active {
		background-color: #fff;
		color:#d23b44;
	}
	a.langSwitch {font-size:15px;font-weight:300;color:#717271;text-decoration:none;text-transform:uppercase;padding-right:15px;-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
a.langSwitch:hover {color:#d1303a;}
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
@media (max-width: 768px) {
	.abstand60 {padding-top:0;}
	h2 {font-size:40px;color:#717271;font-weight:300;text-transform:uppercase;line-height:60px;padding-bottom:30px;}
h2.red {color:#d1303a;line-height:inherit;padding-bottom:10px;margin:0;}
p.abstandLinks {padding-left:0px;}
p {padding:10px 0;}
.col70  {display:block;float:none;width:100%;}
.col30  {display:block;float:none;width:100%;}
.col40  {display:block;float:none;width:100%;}
.col60 {display:block;float:none;width:100%;background-color:transparent;}
.col65 {display:block;float:none;width:100%;}
.col90 {display:block;float:none;width:100%;}
.col50 {display:block;float:none;width:100%;}
section .container960{padding:0px;width:95%;background:transparent;}
section#startseite .container960{background-color: rgba(255,255,255, 0.9);padding:0px 20px;width:95%;}
.rightAlign {text-align:left;}
.lastCol {float:none;}
section {height:auto;min-height:100%;background-size:cover!important;}
h5 {padding-top:0!important;margin:0;}
h4 {margin-top:0;}
.switchOnMobile {display:flex;
    flex-direction: column-reverse;	}
.sectionNameHolder h5 {

    padding: 0px 5px;
   
}
}
@media (max-width: 680px) {
header h1 img {
    max-width: 180px;
    transition: all 0.4s ease-in-out 0s;
}
.tab_container h6 {font-weight:300;color:#d1303a;text-transform:uppercase;font-size:20px;margin:0;padding:20px 0 20px 0;}
.tab_container p {border-left:1px solid #d1303a;padding-left:10px;}
.tab_content {
	padding: 20px 0px;
	display: none;
}
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}