/*
Theme Name: HiObT
Theme URI: xxx
Author: Fabio Schartmüller
Author URI: xxx
Description: HiOb is a clean minimal and responsive WordPress theme for HimmelAT.
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hiob
Domain Path: /languages/
Tags: blog, news, e-commerce


This theme is licensed under MIT-License.

*/

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

 .navbar-main {
   border-bottom: 1px solid #DADADA;
   min-height: 4rem;
   max-height: 4rem;
 }

 main {
   margin-top: 4rem;
 }

 .entry-content {
   padding: 2em 0 2em 0;
 }

 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   color: 0;
 }

 .site-nav ul {
   list-style-type: none;
 }

 .site-nav li:before {
   display: inline-block;
 	width: 0;
 	height: 0;
 	border-top: solid transparent;
 	border-bottom: solid transparent;
 	border-left: solid #f00;
 	border-width:	5px;
 	margin-right:	5px;
   content: '';
 }

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border: none;
  z-index: 10000;
}

.container-filter-overlay {
  background-color: #000;
  opacity: .3;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.jumbotron-content {
  z-index: 1000;
}

.jumbotron-content h1, .lead {
  font-weight: bold;
}

.quick-home-nav ul {
  list-style: none;
}

.quick-home-nav ul li{
  float: left;
}

.content-section {
  margin-top: 2em;
}

.hiob-timeline-date {
  margin-bottom: 96px;
  position: relative;
  text-align: center;
}

.hiob-timeline-date::before {
  content: '';
  position: absolute;
  width: 100%;
  min-width: 100%;
  height: 12px;
  bottom: -48px;
  left: 0px;
  background-color: var(--primary);
}

.hiob-timeline-date::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  bottom: -64px;
  left: 50%;
  margin-left: -24px;
  border-radius: 50%;
  background-color: var(--light);
  border: 4px solid var(--primary);
}

.hiob-timeline-content {
  padding: 1em 0;
  position: relative;
}

.hiob-timeline-content::after {
  position: absolute;
  content: '';

  width: 0;
  height: 0;

  top: -24px;
  left: 50%;
  margin-left: -24px;
  border-style: solid;
  border-width:  0 24px 24px 24px;
  border-color: transparent transparent var(--primary) transparent;
}

.hiob-layered-img-box {
  position: relative;
  margin-left: 2em;
  margin-bottom: 2em;
}

.hiob-layered-img-front {
  width: 100%;
}

.hiob-layered-img-back {
  position: absolute;
  bottom: -2em;
  left: -2em;
  width: 50%;
}

.container {
    padding: 0 2em;
}

.order-sm-first {
  -ms-flex-order: initial;
  order: initial;
}

.order-sm-last {
  -ms-flex-order: initial;
  order: initial;
}

@media (max-width: 575.98px) {
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }

  .order-sm-last {
    -ms-flex-order: 13;
    order: 13;
  }
}

.hiob-press-cite cite {
  font-size: 1.5em;
}

.hiob-swps-header {
  position: relative;
  font-weight: 400;
  margin-bottom: 1em;
}

.hiob-spws-decorate-right::after {
  position: absolute;
  content: '';
  bottom: -0.6em;
  right: 0;
  height: .2em;
  width: 96px;
  background: var(--primary);
}

.hiob-swps-decorate-left::after {
  position: absolute;
  content: '';
  bottom: -0.6em;
  left: 0;
  height: .2em;
  width: 96px;
  background: var(--primary);
}

.footer h4 {
  color: var(--dark);
}

.footer {
  background: var(--primary);
  padding: 2em 0;
}

.footer a {
  color: var(--light);
}

.hiob-social-icon {
  padding: .2em;
}

.hiob-social-icon:hover {
  color: var(--dark);
  text-decoration: none;
}


.hiob-press-cite h3::after {
  font-family: FontAwesome;
   content: "\f1ea";
   display: inline-block;
   padding-left: 3px;
   vertical-align: middle;
   font-weight: 900;
   text-align: right;
}

.hiob-tv-cite h3::after {
  font-family: FontAwesome;
   content: "\f26c";
   display: inline-block;
   padding-left: 3px;
   vertical-align: middle;
   font-weight: 900;
   text-align: right;
}

.quick-spg-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;

  background: var(--primary);

  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.quick-spg-nav .nav-link {
  color: var(--light);
}

.quick-spg-nav .nav-link:hover {
  color: var(--dark);
}

.quick-spg-nav .nav-link {
  padding: 1em;
}

.hiob-outstanding-heading {
  position: relative;
}

.hiob-outstanding-heading-subtitle {
  position: relative;
  margin-bottom: 1em;
}

.hiob-caret-head-decorator::after {
  position: absolute;
  content: '';
  bottom: -2.2em;
  left: 50%;
  margin-right: -.05em;


  width: .1em;
  height: 2em;
  background: var(--primary);
}

.hiob-big-cite-content {
  font-size: 1.5rem;
}

#quick-home-nav {
  background-color: var(--primary);
}



/*---------------------Tile surfaces-----------------*/

.tiled-surface {

}

#front-overview .row {
  font-weight: 400;
}

.main-tile {
  overflow: hidden;
  height: 40vh;
  position: relative;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: flex-start;

  padding: 1em;
}

.main-tile .tile-bg {
  position: absolute;

  left: .2em;
  right: .2em;
  top: .2em;
  bottom: .2em;

  z-index: 1;
}

.main-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s opacity;
}

.main-tile:hover .tile-bg {
  opacity: .5;
}

.main-tile .expandable {
  display: none;
  transition: .5s display;
}

.main-tile:hover .expandable {
  display: block;
}

.tile-content {
  z-index: 2;

  padding: 1rem;

  background: rgba(255,255,255,.8);
  color: black;
}

.tile-content .title {
  font-weight: 400;
  font-size: 1.2rem;
}

.tile-content .subtitle {
  font-weight: 200;
  font-size: 1rem;
  margin: .5em 0;
}

@media (min-width: 768px) {
  .main-tile {
    height: 30vh;
  }
}

/*---------------------Main Slider-----------------------------*/

#main-slider .content {
  position: absolute;

  left: 20%;
  right: 20%;
  bottom: 5rem;

  padding: 1rem;

  background: rgba(255,255,255,.6);

  color: black;
  text-align: center;
}

#main-slider .slide-title {
  font-weight: 600;

  font-size: 1.5rem;
}

#main-slider .slide-subtitle {
  font-weight: 400;

  font-size: 1.25rem;
}

#main-slider {
  padding: 0 !important;
}

#main-slider .carousel-inner {
  height: 50vh;
  max-height: 50vh;
}

#main-slider .carousel-item {
  height: 100%;
  max-height: 100%;
}

#main-slider img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}