/*
Theme Name: CREAVAC
Version: 0.0.1
Author: Andreas Hecht, bochmann.
Author URI: http://www.bochmann.de/
Description: Custom CREAVAC theme
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: creavac
*/

@import url('css/normalize.min.css');
@font-face {font-family: 'EngineerBold';src: url('fonts/357AFF_0_0.eot');src: url('fonts/357AFF_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/357AFF_0_0.woff2') format('woff2'),url('fonts/357AFF_0_0.woff') format('woff'),url('fonts/357AFF_0_0.ttf') format('truetype'),url('fonts/357AFF_0_0.svg#wf') format('svg');}
@font-face {font-family: 'Engineer';src: url('fonts/357AFF_1_0.eot');src: url('fonts/357AFF_1_0.eot?#iefix') format('embedded-opentype'),url('fonts/357AFF_1_0.woff2') format('woff2'),url('fonts/357AFF_1_0.woff') format('woff'),url('fonts/357AFF_1_0.ttf') format('truetype'),url('fonts/357AFF_1_0.svg#wf') format('svg');}
@font-face {font-family: 'EngineerBlack';src: url('fonts/357AFF_2_0.eot');src: url('fonts/357AFF_2_0.eot?#iefix') format('embedded-opentype'),url('fonts/357AFF_2_0.woff2') format('woff2'),url('fonts/357AFF_2_0.woff') format('woff'),url('fonts/357AFF_2_0.ttf') format('truetype'),url('fonts/357AFF_2_0.svg#wf') format('svg');}
@font-face {font-family: 'EngineerHeavy';src: url('fonts/357AFF_3_0.eot');src: url('fonts/357AFF_3_0.eot?#iefix') format('embedded-opentype'),url('fonts/357AFF_3_0.woff2') format('woff2'),url('fonts/357AFF_3_0.woff') format('woff'),url('fonts/357AFF_3_0.ttf') format('truetype'),url('fonts/357AFF_3_0.svg#wf') format('svg');}

body { position:relative; font-family: 'Engineer'; color: #212121; background-color: #ffffff; max-width:80em; min-width:320px; margin:0 auto; padding:0 .5em; padding-top:calc(60px + 2em); box-sizing:border-box;  }
main, header, footer, nav, aside, section { display:block; margin:0; padding:0; }
h1 { font-family: 'EngineerBlack'; font-weight:normal; color: #bd3821; text-transform: uppercase; font-size:2em; line-height: normal!important; }
h2 { color: #001057; text-transform: uppercase; }
a { color: #bd3821; }
nav ul, nav li { display:block; position:relative; margin:0; padding:0; list-style:none; }
nav a { position:relative; display:block; white-space:nowrap; text-decoration:none; }

/* Header + Main Navigation */
header { position:fixed; top:0; width:calc(100% - 1em); max-width:calc(80em - 1em); box-sizing:border-box; background-color:#fff; z-index:500; }
header img.logo { float:left; height:60px; width:auto; margin:1em; }

/* Main menu */
nav.main-menu { position:relative; float:right; margin-right:1.33em; }
nav.main-menu > a, nav.language-selector { float:right; }
nav.main-menu > a {
    display:none;
    float:right;
    width:calc(60px + 2em)!important;
    height:calc(60px + 2em)!important;
    line-height:calc(60px + 2em)!important;
    background-color:#e6e6e6;
    color:#666;
    box-sizing:border-box;
    overflow:hidden;
    text-align:center;
    cursor:pointer;
}
nav.main-menu > a > span {
    font-size:55px;
    line-height:60px;
    font-weight:bold;
    vertical-align:top;
}
nav.main-menu li { background-color:#fff; }
nav.main-menu li > a { color:#666; line-height:90px; padding:0 1em; vertical-align:center; }

nav.main-menu a:hover, nav.main-menu li.current-menu-item > a, nav.main-menu li.current-page-ancestor > a { color:#bd3821; }
/* 1st level */
nav.main-menu > ul { height:calc(60px + 2em); }
nav.main-menu > ul > li { float:left; }
/* 2nd and deeper levels */
nav.main-menu li > ul { position:absolute; top:100%; transform-origin:0 0; max-height:0; overflow:hidden; transition:max-height .65s ease-out; webkit-transition:all 0.4s ease-out; }
nav.main-menu li > ul > li { width:100%; padding:0.5em; border-bottom:1px solid #c1c1c1; background:#fff url(img/arrow_nav.png) 10px center/6px no-repeat; }
nav.main-menu li > ul > li > a { line-height:normal; width:100%; text-transform:uppercase; color:#bd3821; }
nav.main-menu li:hover > ul, nav.main-menu li > ul:hover { display:block; max-height:500px; transition:max-height 0.65 ease-in; }

/* Language selector */
nav.language-selector { float:right; position:relative; background:#e6e6e6 url(img/langselect_globe.png) center 15px/35% no-repeat; width:calc(60px + 2em); height:calc(60px + 2em); box-sizing:border-box; }
nav.language-selector > ul { position:absolute; bottom:6px; background:#e6e6e6 url(img/langselect_button.png) 95% 2px/20px no-repeat; }
nav.language-selector li > ul { position:absolute; top:100%; background-color:#e6e6e6; display:none; }
nav.language-selector ul { width:100%; }
nav.language-selector ul li { margin:0; padding:0; display:block; text-align:left; }
nav.language-selector ul:hover li ul.sub-menu { display:block; }
nav.language-selector a, nav.language-selector a:hover, nav.language-selector a:active { color:#666; display:block; box-sizing:border-box; width:100%; padding:0.1em 0.6em; }
nav.language-selector ul.sub-menu a:hover { background-color:#d0d0d0; }

/* Content */
main { position:relative; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; line-height:150% }
section > div > :first-child { margin-top:0; }
.bgnd-ltblue { background-color:#0e4194; }
.bgnd-dkblue { background-color:#032950; }
.hide{ display: none!important; }

/* Content elements */
a.link-button {
    display:inline-block;
    background-color:#4d4d4d;
    margin:0.66em 0;
    padding:0.66em;
    border:3px solid #fff;
    text-transform:uppercase;
    color:#fff;
    font-size:1.1em;
    text-decoration:none;
}
a.link-button:hover {
    border-color:#be3721;
    cursor:pointer;
}
a.link-file {
    display:block;
    color:#303030;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    min-height:32px;
    line-height:32px;
    padding-left:40px;
    margin:.66em 0;
    background:transparent url(img/icons/unknown.png) left center/32px no-repeat;
}
a.link-file:hover { color:#be3721; }

/*a.link-file[href$=".pdf"],
a.link-file[href$=".PDF"] { background-image:url(img/icons/pdf.png); }*/
a.link-file {background-image:url(img/icons/pdf.png);}

/* Content blocks */

ul.subnav { margin:.66em 0; padding:0; list-style:none; }
ul.subnav li { background:#fff url(img/arrow_nav.png) 0px center/8px no-repeat; border-bottom:1px solid #c1c1c1; padding:0.66em 0 0.6em 20px; }
ul.subnav li a { display:block; color:#bd3821; text-transform:uppercase; text-decoration:none; font-size:1.2em; }

section.two-blocks-home { clear:both; }
section.two-blocks-home > div {
    width:50%;
    position:relative;
    float:left;
    text-align:center;
    color:#fff;
    background-position: center center;
    background-size:cover;
}
section.two-blocks-home > div:before { content:""; display:block; padding-top:100%; }
section.two-blocks-home > div > div { position:absolute; top:0; left:0; right:0; bottom:0; padding:30% 1em 0 1em; }
section.two-blocks-home > div.coating { background-image:url(img/home_beschichtung.jpg); }
section.two-blocks-home > div.engineering { background-image:url(img/home_anlagenbau.jpg); }
section.two-blocks-home h1 { color:#fff; }
section.two-blocks-home a.link-button { background-color:transparent; }

section.header-img-description {
    position: absolute;
    box-sizing:border-box;
    top: 2em;
    left: 2em;
    max-height:calc(300px - 4em);
    width:45%;
    padding:1em;
    background-color:rgba(14, 65, 148, 0.9);
    color:#fff;
    overflow:hidden;
}
section.header-img-description h1 {
    color:#fff;
    margin:0;
    margin-bottom:.33em;
}
main.no-header-img div.header-img-description { display:none; }
/*section.page-image { height:300px; background-size:cover; clear:both; overflow:hidden; }*/

section.col-2 > div { box-sizing:border-box; width:49.7%; float:left; }
section.col-2 > div:nth-child(1) { padding-right:1.66em; }
section.col-3 > div { box-sizing:border-box; width:24.8%; float:left; padding-right:1.66em; }
section.col-3 > div:nth-child(2) { width:50%; }
section.col-3 > div:nth-child(3) { padding-right:0; }
section.col-autoflow { column-count:2; column-gap:1.66em; margin:1.33em 0; text-align:justify; }
section.col-autoflow > :first-child { margin-top:0; }
section.col-autoflow p { margin:0; }

/* image map (corporation) */
#creavac-citymap { background-color:#e6e6e6; padding:0.66em 0; }
#creavac-citymap .map-img { width:70%; float:left; }
#creavac-citymap .map-img img { max-width:100%; height:auto; }
#creavac-citymap .map-text { width:29.9%; float:right; box-sizing:border-box; padding:0 1em; }
#creavac-citymap .map-caption { position:relative; clear:both; text-align:center; top:-1.33em; }
#creavac-citymap .map-caption h1, #creavac-citymap .map-caption p { margin:0; }
#creavac-citymap .map-caption h1 { color:#0e4194; }

/* Footer + Meta Navigation */
footer { background: #0e4194 url(img/molecule.png) center top/contain no-repeat;  color:#ffffff; clear:both; }
footer section { float:left; width:50%; padding:2em 1em; box-sizing:border-box; }
footer h2 { color:#fff; margin-top:0; }
footer section.meta-nav { background-color:rgba(0,0,0,0.3); position:relative; }
footer section.meta-nav a.to-top {
    display:block;
    position:absolute;
    width:32px; height:32px;
    right:5px;
    top:50%;
    color:transparent;
    background:#bd3821 url('img/icons/2top.png') center center/cover no-repeat;
    line-height:32px;
    text-align:center;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
}
nav.meta-menu { margin-top:1.33em; }
nav.meta-menu li { position:static; display:block; padding:0; }

/* Widgets */
.widget, .widget div { padding:.001em 0 /* solid transparent; */ }
/* Slider */
div.fixed-height div, div.fixed-height ul { height:100%; }
div.fixed-height ul li { display:block; position:absolute; width:100%; height:100%!important; background-size:cover; }
div.fixed-height ul li img { display:none !important; }
div.fixed-height ol.sow-slider-pagination { display:block !important; text-align:center; }

/* Slider Startseite */
li.sow-slider-image .panel-grid-cell { background-color:rgba(14, 65, 148, 0.7); padding:0 1em !important; }
li.sow-slider-image .panel-grid-cell-empty { background-color:transparent; }
body.home .so-widget-sow-layout-slider ol { display:block !important; text-align:center; }

/* Customer slider */
#customers-slider p { margin:0; padding:0.33em 0.66em; }

/* Nav Menü */
div.widget_nav_menu ul { margin:.66em 0; padding:0; list-style:none; }
div.widget_nav_menu ul li { background:#fff url(img/arrow_nav.png) 0px center/8px no-repeat; border-bottom:1px solid #c1c1c1; padding:0.66em 0 0.6em 20px; }
div.widget_nav_menu ul li a { display:block; color:#bd3821; text-transform:uppercase; text-decoration:none; font-size:1.2em; }
/*
div.menu-uebersichtsmenue-startseite-container, div.menu-uebersichtsmenue-anlagenbau-container, div.menu-uebersichtsmenue-startseite-englisch-container,
div.menu-ubersichtsmenu-anlagenbau-englisch-container { column-count:3; column-gap:1.66em; margin:1.33em 0; }
div.menu-uebersichtsmenue-startseite-container ul, div.menu-uebersichtsmenue-anlagenbau-container ul, div.menu-ubersichtsmenu-anlagenbau-englisch-container ul,
div.menu-uebersichtsmenue-startseite-englisch-container ul { margin:0 !important; }
*/
div.col-autoflow { column-count:3; column-gap:1.66em; margin:1.33em 0; }
div.col-autoflow ul { margin:0 !important; }

@media only screen and (max-width:1024px) {
    body { padding-top:calc(50px + 1em); }
    header img.logo { float:left; height:50px; width:auto; margin:0.5em; }
    nav.main-menu { float:right; margin-right:0; }
    nav.main-menu > ul { display:none; position:absolute; top:100%; width:300px; right:calc(-60px - 2em); line-height:initial; }
    nav.main-menu > ul > li { float:none; /* box-shadow: -3px 3px 3px 0 rgba(0,0,0,0.1); */ }
    nav#nav-main:not(:target) > a:first-of-type,
    nav#nav-main:target > a:last-of-type { display: block; }
    nav#nav-main:target > ul { display:block; }
    nav.main-menu li > a { line-height:2.33em; }
    nav.main-menu > a { width:calc(50px + 1em)!important; height:calc(50px + 1em)!important; line-height:calc(50px + 1em)!important; }
    nav.main-menu > ul > li { display:block; position:static; }
    nav.main-menu li > ul { position:static; }
    nav.main-menu li > ul > li { background-color:#e6e6e6; }
    nav.language-selector { width:calc(50px + 1em); height:calc(50px + 1em); box-sizing:border-box; padding-top:.5em; background-position:center 10px; }
    nav.language-selector > ul { background-image:none; }
    section.two-blocks-home { display:block; margin:0; }
    section.two-blocks-home > div { display:block; }
    section.two-blocks-home > div > div { padding:10% 1em 0 1em; }
    section.col-3 > div:nth-child(1) { width:33% }
    section.col-3 > div:nth-child(2) { width:66% }
    section.col-3 > div:nth-child(3) { float:none; width:100% }
    section.col-autoflow { column-count:2; }
/*
    div.menu-uebersichtsmenue-startseite-container,
    div.menu-uebersichtsmenue-startseite-englisch-container,div.menu-uebersichtsmenue-anlagenbau-container, div.menu-ubersichtsmenu-anlagenbau-englisch-container {column-count:2;}
*/
    div.col-autoflow {column-count:2;}
    section.header-img-description { top:1em; left:1em; max-height:calc(300px - 2em); min-width:400px; padding:.33em; }
	#creavac-citymap .map-img { width:100%; float:none; }
	#creavac-citymap .map-text { width:100%; float:none; }
	#creavac-citymap .map-caption { display:none; }
}

@media only screen and (max-width:640px) {
	header { width:100%; }
    section.col-2 > div { float:none; width:100% !important; }
    section.col-3 > div { float:none; width:100% !important; }
    section.col-autoflow { column-count:1; }
    section.two-blocks-home > div { width:100%; }
    section.two-blocks-home > div:before { content:""; display:none; padding-top:0; }
    section.two-blocks-home > div > div { position:relative; padding:.66em; }
/*
    div.menu-uebersichtsmenue-startseite-container,
    div.menu-uebersichtsmenue-startseite-englisch-container,div.menu-uebersichtsmenue-anlagenbau-container, div.menu-ubersichtsmenu-anlagenbau-englisch-container { column-count:1;}
*/
    div.col-autoflow { column-count:1; }
    section.header-img-description { min-width:calc(100% - 2em); }
    #creavac-citymap { display:none; }
    footer section.meta-nav { display:none; }
    footer section { float:none; width:100%; padding:.66em; }
}