/*
Theme Name: Optocraft
Author: Johannes Stadler
Description:  optocraft theme (bootstrap 4)
Version: 1.0.0
*/

/*
Farben:
grau (hell)       e7eaed
grau (dunkel)     666666

blau (hell)       dce6f2
blau (dunkel)     034990

orange            f39100
*/

:root {
  --color-1: #dce6f2;
  --color-2: #f39100;
  --color-3: #e7eaed;
  --color-4: #034990;
  --color-font: #333333;
}

/* var(--color-bg) */

/* ********************** Allgemein ********************** */

.fixed-top {top: 0;}



@font-face {
  font-family: "SansLight";
  src: url("inc/assets/fonts/TheSans_B2_300_.eot");
  src: url("inc/assets/fonts/TheSans_B2_300_.eot?#iefix") format("embedded-opentype"),
  url("inc/assets/fonts/TheSans_B2_300_.woff") format("woff"),
  url("inc/assets/fonts/TheSans_B2_300_.svg#TheSans_B2_300_") format("svg");
  font-weight: normal;
  font-style: normal;
}


/* latin-ext */
/*
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(inc/assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*/
/* latin */
/*
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(inc/assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/
h1 {font-size: 2rem;}
.box-content h1 {margin-top: 40px;}
.job_offer h1 {text-align: center;}

h2 {margin-top: 30px; font-size: 1.5rem;}
.job_offer h2 {color: var(--color-4);}
h3 {margin-top: 20px; font-size: 1.25rem;}
h4 {margin-top: 15px; font-size: 1.125rem;}

.bg-grey, .bg-gray {background-color: var(--color-3);}
.bg-orange {background-color: var(--color-2);}
.bg-blue {background-color: var(--color-1);}


body {
  font-family: SansLight, sans-serif;
  color: var(--color-font);
  font-size: 16px;
}

a, a:hover {color: var(--color-font); font-weight: bold;}
a.more:before {content: '>> ';}
a.more:after {content: '';}

h2 > a, h2 > a:hover {font-weight: normal!important; color:var(--color-font)!important;}
.content-area a, .content-area a:hover {color: var(--color-2); font-weight: normal; text-decoration: underline;}

.site { margin: 150px 0 20px 0;}

.row-full{ width: 100vw; position: relative; margin-left: -50vw; left: 50%; }

.anchor {scroll-margin-top: 4em;}

.btn-primary, .btn-primary:focus, .btn-primary:active {background-color: var(--color-4); padding: 5px 25px; font-weight: bold;}
.btn-primary:hover {background-color: var(--color-2);}
.btn-optocraft { color: #fff; background-color: var(--color-2); border-color: var(--color-2);}
.btn-optocraft:hover { color: #fff; background-color: #BE7100FF; border-color: #BE7100FF;}


/* ********************** Header / Navigation ********************** */

.site-header {background-color: #fff;}
.header-top .fas, .header-top .far {padding-top: 2px; font-size: 16px;}

.btn-contact-header { color: #212529; background-color: #ffc107; border-color: #ffc107; font-weight: bold; }

.btn-contact-header:hover { color: #ffc107; text-decoration: none; border-color: #ffc107; background-color: transparent; }

#widget-header-top-right {float: right;}
#widget-header-top-right .wpml-ls-legacy-list-horizontal {border: none; padding: 0;}

#main-nav {width:100%; font-size: 1.25rem; padding: 10px 0 0 0; background-color: var(--color-1); margin-top: 10px;}
#main-nav .navbar-nav > li.nav-item {margin: 0 10px;}
#main-nav .navbar-nav > li.nav-item > .dropdown-menu {margin-top: -5px;}
#main-nav .navbar-nav > li.nav-item > .dropdown-menu > li.nav-item {line-height: 2.2;}
#main-nav .navbar-nav > li.nav-item > .dropdown-menu > li.nav-item > .dropdown-menu > li.nav-item {line-height: 2.5;}
#main-nav .navbar-nav > li.nav-item > .dropdown-menu > li.nav-item > .dropdown-menu {border: none; margin: 0 0 0 30px; padding:0; font-size: 0.875rem;}

.main-image ol.carousel-indicators { top: 145px;}
.main-image ol.carousel-indicators li {width: 80px; height: 6px; background-color: var(--color-2);}

.carousel-control-next-icon, .carousel-control-prev-icon {width: 40px; height: 40px;}

.navbar-brand .img-logo {
  width: 314px;
  height: 34px;
}

/* ********************** Content ********************** */

.breadcrumb {margin: 10px 0 5px 0; padding: 10px; font-size: 0.875rem;}

.content-main { position: relative; background: #fff; overflow: hidden; z-index:20; }

.content-main:before {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  z-index: -1;
  opacity: 0.1;
  background-image: url('images/bg-blue.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: contain;
}

figcaption {margin: -5px 0 15px 0; font-size: 0.8125rem; font-style: italic;}

.box-contact-fixed, .box-career-fixed { display: none;}
.box-contact-fixed a, .box-career-fixed a { color: #fff; }

.box-default {}
.box-default .card .title{ font-weight: bold; font-size: 1rem; margin-bottom: 10px;}

.box-info {padding: 10px;}

.main-image {position: relative; width:100%; text-align:center;}
.main-image .box-overlay{
  position: relative;
  /*background-color: rgba(255, 255, 255, 0.7);*/
  background-color: rgba(255, 255, 255, 0);
  text-align:left;
  margin-top: 20px;
  min-height: 80px;
}
.main-image .box-overlay .headline, .main-image .box-overlay h1 {font-size: 1.25rem;}
.main-image .box-overlay .text {font-size: 1rem;}

.card { margin: 10px 0;}
.card-header {}
.card-header.bg-orange {font-size: 1.25rem; font-weight: bold; color: #fff;}
.card .card-image {position:relative;}
.card .card-image .overlay{position: absolute; bottom: 10px; width: 100%; background-color:rgba(255, 255, 255, 0.9); padding: 4px 15px; font-weight: bold; color: #000;}
.card .card-image .overlay a, .card .card-image .overlay a:hover { color: #000; font-weight: bold; text-decoration: none;}
.card .card-text .title a { color: var(--color-font); font-weight: bold; text-decoration: none;}

.card .card-text .headline {font-size: 1rem; font-weight: bold;}

.card-body {padding: 1.25rem 1.25rem 0.25rem 1.25rem;}
.card-body ul {margin: 0; columns: 1!important; -webkit-columns: 1!important; -moz-columns: 1!important; padding:5px 10px 5px 20px!important;}
.card .card-body .card-text, .card .card-body .card-text-2 {font-size: 0.875rem;}
.card .card-body .card-text h3, .card .card-body .card-text-2 h3 {font-size: 1.125rem;}
.card .card-footer {text-align:center; font-size: 0.75rem; padding: 5px 0;}

.card .card-body .card-text h3 a {color: var(--color-font); text-decoration: none;}


.card .link { margin: 0 20px 10px 0; text-align: right;}
.card .link .icon-link {border: 2px solid #00000008; padding: 5px 8px; font-size: 20px;}
.card .link a {color: var(--color-font);}

#card-events .card-text, #card-news .card-text {min-height: 120px;}

.card-event .card-text .date {font-size: 1rem; text-decoration: underline;}


/* Startseite */

.carousel-nav-icon {font-size: 2rem; color: #fff; padding: 10px; background-color: #7f7f7f;}



/* Produktübersicht */
.productdetail-benefits{ padding: 20px 10px 2px 10px;}
.productdetail-benefits ul{}
.productdetail-benefits ul li {margin-bottom: 10px;}
.productdetail-benefits ul li .fa-li {}

.productdetail-benefits .fa-check-square {font-size: 1.25rem;}

.box-download .title, .box-news .title {font-size: 1.25rem; font-weight:bold; margin-bottom: 15px;}

.content-area-product .box-download {margin-top: 40px; padding: 10px; background-color: var(--color-3);}
.content-area .box-download {padding: 10px; background-color: var(--color-3);}

.box-contact {padding: 10px; background-color: var(--color-3);}

.box-form-workshop{padding: 10px; background-color: var(--color-3);}
.box-form-workshop label{ font-size: 0.875rem; font-weight: bold;}

/* Produktdetail */

#tab-product-detail-content {margin: 20px 0; min-height: 400px;}

.tab-overview ul.is-style-list-two-columns { columns: 2; -webkit-columns: 2; -moz-columns: 2; padding: 10px 40px; }

.tab-application table{ font-size: 0.875rem; }
.tab-application table tr td {padding: 10px 5px;}
.tab-application table tr td strong {color: var(--color-2);}
.tab-data .box-download{background-color: var(--color-3);}
.nav-tabs .nav-link {color: var(--color-font); text-decoration: none;}
.nav-tabs .nav-link:hover {color: var(--color-font); text-decoration: underline;}
.nav-tabs .nav-link.active {font-weight: bold;}

.reference blockquote { font-size: 1rem; line-height: 1.4; position: relative; margin: 0 30px; padding: 0 1.5rem; }
.reference blockquote:before,.reference blockquote:after { position: absolute; color: #f1efe6; font-size: 4rem; width: 3rem; height: 3rem; }
.reference blockquote:before { content: '“'; left: -30px; top: -2rem; }
.reference blockquote:after { content: '”'; right: -50px; bottom: 0; }
.reference cite { line-height: 1.5; text-align: left; }

/* Kontakt */
.box-map {background-image: url('images/world.jpg');  background-repeat: no-repeat;   background-position: center; min-height: 700px;}

.box-contact-map { background-color: rgba(255, 255, 255, .7); padding: 15px; font-size: 0.875rem; border: 1px solid #034990;}
.box-contact-map .image img{ margin: 0 0 5px 5px; float:right; max-width: 100px;}
.box-contact-map .title {font-size: 1rem; font-weight: bold; margin-bottom: 10px;}

.slider-references {padding: 20px; background-color: var(--color-2); color: #fff; min-height: 300px;}
.slider-references .carousel-indicators { top: 0; bottom: unset;}

.box-contactform { background-color: var(--color-3); padding: 20px;}
.box-contactform label {width: 100%; font-size: 0.875rem; font-weight: bold; margin-top: 10px;}
.box-contactform .required-field {color: red;}
.box-contactform .wpcf7-checkbox label {font-size: 1.0rem; font-weight: normal;}
.box-contactform textarea {height: 120px;}
.box-contactform input[type=checkbox] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
  padding: 10px;
  margin-right: 10px;
}
.box-contactform .wpcf7-not-valid {border: 1px solid red;}

.wpcf7 form .wpcf7-response-output {margin: 20px 0 20px 0;}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { border: 2px solid var(--color-2);}

.wpcf7 form.invalid .wpcf7-response-output:before, .wpcf7 form.unaccepted .wpcf7-response-output:before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f071"; font-size: 1.5rem; margin-right: 20px; color: var(--color-2);}

.wpcf7 form.sent .wpcf7-response-output:before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f058"; font-size: 1.5rem; margin-right: 20px; color: green;}

/*
wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control-sm form-control
wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control-sm form-control wpcf7-not-valid
 */

/* Stellenangebote */
.job_offer li {margin-bottom: 8px;}
.job_offer .intro-header {text-align:center; margin: 25px 0 0 0;}

/* Workshop */
.sidebar-workshop {margin-top: 30px;}

/* WP Elemente */

.wp-block-table td {padding: 6px 5px;}

/* Newsletter abmelden */
#message-unsubscribe {height: 200px;}


/* Konfigurator */
.btn-preset {font-size: 1rem;}
.box-konfigurator {}
.box-konfigurator .image-konfigurator { position: relative; }
.box-konfigurator .dropdown-konfigurator select {font-size: 13px;}
.box-konfigurator .dropdown-konfigurator .input-group-text {font-size: 13px;}
.box-konfigurator .dropdown-konfigurator .input-group-prepend {float:left;}
.box-konfigurator .btn-group label {font-size: 13px;}

.box-konfigurator .box-setting { position:relative; }

.box-konfigurator .dropdown-konfigurator .lbl-buttongroup { text-align: left; font-size: 14px; font-weight: bold; margin-bottom: 0; }


/* ********************** Footer ********************** */

footer {background-color: var(--color-3); font-size: 0.875rem; margin-top: 50px;}
footer .head , footer .head a{ font-size: 1.25rem; font-weight: normal;}
footer .site-info {font-size: 1rem;}

/* ****************** Media Queries ****************** */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* Header */
  .main-image ol.carousel-indicators { top: 190px;}
  .navbar-brand .img-logo {
    width: 224px;
    height: 24px;
  }


  /* Content */
  .site { margin: 140px 0 20px 0;}
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px)
{
  /* Header */
  .main-image ol.carousel-indicators { bottom: 0; top: unset;}
  .navbar-brand .img-logo {
    width: 314px;
    height: 34px;
  }

  /*.main-image .box-overlay{position: absolute; top: 30%; left: 80px; max-width: 300px; background-color: rgba(255, 255, 255, 0); padding: 30px; text-align:left; min-width: 300px;}*/
  .main-image .box-overlay .headline, .main-image .box-overlay h1 {font-size: 1.75rem;}
  .main-image .box-overlay .text {font-size: 1rem;}
  .main-image .box-overlay{ position: absolute; top: 20%; left: 0; max-width: 320px; padding: 10px; min-width: 300px;}

  /* Content */
  .site { margin: 140px 0 20px 0;}
  .site-content {min-height: 400px;}

  .sidebar-workshop {margin-top: 60px;}

  .box-konfigurator .box-setting { position:absolute; }
  .box-konfigurator #box-setting-1 { top: 0px; left: 0; }
  .box-konfigurator #box-setting-2 { top: 60px; left: 0; }
  .box-konfigurator #box-setting-3 { top: 120px; left: 0; }
  .box-konfigurator #box-setting-4 { top: 180px; left: 0; }
  .box-konfigurator #box-setting-5 { top: 240px; left: 0; }
  .box-konfigurator #box-setting-6 { top: 0; right: 0; }
  .box-konfigurator #box-setting-7 { top: 60px; right: 0; }
  .box-konfigurator #box-setting-8 { top: 420px; left: 0; }
  .box-konfigurator #box-setting-9 { top: 150px; right: 0; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Header */
  .dropdown:hover .dropdown-menu { display: inline-block;}
  #main-nav {width:auto; background-color: transparent; margin-top: 0;}
  .dropdown-menu li > .dropdown-menu {display: none!important;}
  .dropdown-menu li.menu-item-has-children:hover > .dropdown-menu {display: inline-block!important;}
  .dropdown .dropdown-menu {width:340px;}
  /*.dropdown-menu li > .dropdown-menu { margin: -40px 0 0 -199px!important; border: 1px dashed red!important;}*/
  #main-nav .navbar-nav > li.nav-item > .dropdown-menu > li.nav-item > .dropdown-menu {border: 1px solid #00000026; margin: -80px 30px 50px 339px; padding:0; font-size: 0.875rem;}
  .main-image .box-overlay{ top: 40%; left: 20px; max-width: 500px; min-width: 300px;}
  .navbar-brand .img-logo {
    width: 268px;
    height: 29px;
  }

  /* Content */
  .site {margin: 160px 0 20px 0;}
  .content-main:before { top: 0; }

  .productdetail-benefits ul{columns: 2; -webkit-columns: 2; -moz-columns: 2; margin-right: 2.5em;}

  .sidebar-workshop {margin-top: 80px;}

  #message-unsubscribe {height: 100px;}

  .col-services{border-right: 2px solid #dee2e6;}

  /*.box-konfigurator #box-setting-8 { top: 160px; right: 0; }*/

  .box-konfigurator .box-setting { position:absolute; }
  .box-konfigurator #box-setting-1 { top: 20px; left: 10px; }
  .box-konfigurator #box-setting-2 { top: 100px; left: 10px; }
  .box-konfigurator #box-setting-3 { top: 180px; left: 10px; }
  .box-konfigurator #box-setting-4 { top: 260px; left: 10px; }
  .box-konfigurator #box-setting-5 { top: 340px; left: 10px; }
  .box-konfigurator #box-setting-6 { top: 0; left: 600px; }
  .box-konfigurator #box-setting-7 { top: 80px; left: 600px; }
  .box-konfigurator #box-setting-8 { top: 160px; left: 600px; }
  .box-konfigurator #box-setting-9 { top: 260px; left: 600px; }

  .btn-preset {font-size: 0.75rem;}

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1280px;
  }

  /* Header */
  .navbar-brand .img-logo {
    width: 338px;
    height: 60px;
  }

  /* Content */
  .content-main:before {
    left: 50%;
    margin-left: -640px;
  }

  .box-contact-fixed, .box-career-fixed { display: block; position: fixed; right: 0; width: 100px; text-align: center; background-color: var(--color-2); z-index:100;}
  .box-contact-fixed {top: 300px;}
  .box-career-fixed {top:420px;}

  .site {margin: 140px 0 20px 0;}

  .btn-preset {font-size: 1rem;}
  .box-konfigurator .box-setting { position:absolute; }
  .box-konfigurator #box-setting-1 { top: 20px; left: 10px; }
  .box-konfigurator #box-setting-2 { top: 100px; left: 10px; }
  .box-konfigurator #box-setting-3 { top: 180px; left: 10px; }
  .box-konfigurator #box-setting-4 { top: 260px; left: 10px; }
  .box-konfigurator #box-setting-5 { top: 340px; left: 10px; }
  .box-konfigurator #box-setting-6 { top: 0; left: 800px; }
  .box-konfigurator #box-setting-7 { top: 80px; left: 800px; }
  .box-konfigurator #box-setting-8 { top: 160px; left: 800px; }
  .box-konfigurator #box-setting-9 { top: 260px; left: 800px; max-width: 250px;}
}