/*
 * CemeCon 30 years
 *
 *
 */

/**
 * Include local fonts
 */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url(../fonts/sourcesanspro-light.woff2) format('woff2'),
       url(../fonts/sourcesanspro-light.woff) format('woff');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url(../fonts/sourcesanspro-regular.woff2) format('woff2'),
       url(../fonts/sourcesanspro-regular.woff) format('woff');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url(../fonts/sourcesanspro-bold.woff2) format('woff2'),
       url(../fonts/sourcesanspro-bold.woff) format('woff');
}

/*
 * General, layout
 */

body {
  font-family: "Source Sans Pro";
  font-size: 16px;
  line-height: 1.5;
}

.region {
  padding: 22px 0 42px;
}

.region-md {
  padding: 31px;
}

.region-lg {
  padding: 55px 0;
}

.col-s-6 {
  width: 50%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

p {
  margin-bottom: 20px;
}

.dropdown-menu {
  background: none;
  border: none;
  box-shadow: none;
  font-size: 16px;

  min-width: 0;
  background: rgba(255,255,255,.3);
  border-radius: 5px;
  padding: 0;
  margin-left: -5px;
  margin-top: -30px;
  padding-top: 35px;
  padding-left: 5px;
  width: 100%;
  box-sizing: content-box;
  padding-right: 5px;
  padding-bottom: 5px;
  z-index: 0;
}

.dropdown.open a,
.dropdown-menu > li > a,
.dropdown-menu > li > a:hover {
  padding-left: 0;
  /*padding-right: 0;*/
  background: none;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.list-inline .dropdown-menu > li {
  padding-left: 5px;
}

.mr-sm {
  margin-right: 20px;
}

.text-snap-top {
  margin-top: 7px;
}

.mb-sm {
  margin-bottom: 20px;
}

.mb-md {
  margin-bottom: 30px;
}

.mt-lg {
  margin-top: 45px;
}

.mb-lg-1 {
  margin-bottom: 51px;
}

#top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10;
}

#brand-landing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 644px;
  width: 100%;
  z-index: 0;
  background: url(../images/cemecon-30-background-clipped-blank.png) no-repeat bottom center;
  background-size: cover;
}

.cemecon30 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#brand-landing-secondary {
  height: 444px;
  width: 100%;
  z-index: 0;
  background: url(../images/cemecon-30-background-blank.jpg) no-repeat center;
  background-size: cover;
  position: relative;
}

/*
 * Typography and coloring
 */

.dropdown:after,
a.external:after {
  background-image: url(../images/sprites.png);
  background-size: 100px auto;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .dropdown:after,
  a.external:after {
    background-image: url(../images/sprites_2x.png);
  }
}

h2, .h2 {
  font-size: 30px;
  line-height: 36px;
  font-weight: normal;
  margin-bottom: 20px;
  margin-top: 30px;
  color: #0064b0;
}

ol, ul {
  margin-bottom: 0;
}

nav .list-inline > li {
  margin-left: 18px;
}

.text-primary {
  color: #0064b0;
}

.text-highlight-primary {
  color: #85caff;
}

.text-white,
.text-white a,
.text-white .h2,
.text-white h2 {
  color: #FFF;
}

.bg-primary {
  background-color: #0064b0;
}

.bg-secondary {
  background-color: #3a5d77;
}

#header a,
#header a:active,
#header a:focus {
  color: #3a5d77;
}

#footer {
  color: #afb6bf;
}

#footer a,
#footer a:active,
#footer a:focus {
  color: #FFF;
  font-weight: 600;
}

.columns-half {
  column-count: 2;
  column-gap: 30px;
}

a:hover {
  text-decoration: none;
  opacity: .85;
}

a.external:after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 4px 0 -4px 8px;
  background-position: -36px 0;
}

.bg-secondary a.external:after {
  background-position: 0 0;
}

.dropdown:after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 4px 0 -4px 8px;
  background-position: -18px 0;
  transition: all 300ms;

  z-index: -1;
}

.dropdown.open:after {
  transform: rotateZ(180deg);
}

a.custom-dropdown-toggle {
  padding-right: 30px;
  margin-right: -28px;
  position: relative;
}

/*
 * Emotional
 */

#emotional {
  margin-top: 382px;
}

#emotional .item {
  padding-top: 520px;
  padding-bottom: 35px;
}

/*#emotional .item .col-md-6 {
  background: rgba(0, 100, 176, 0.7);
}*/

#emotional h1,
#emotional .h1,
#emotional h2,
#emotional .h2,
#emotional h3,
#emotional .h3 {
  font-weight: lighter;
}

#slide-30-years-innovation {
  background: url(../images/slide-30-jahre-innovationen.jpg) no-repeat bottom center;
  background-size: cover;
}

/*
 * Responsive styles
 */

@media (min-width: 1601px) {
  #brand-landing {
    background: url(../images/cemecon-30-background-clipped-blank-lg.png) no-repeat bottom center;
    background-size: cover;
  }
}

@media (max-width: 1199px) {
  .mb-lg-1 {
    margin-bottom: 20px;
  }
}

@media (max-width: 991px) {
  #emotional .item p {
    text-shadow: 0 0 9px #222;
    text-shadow: 0 0 9px rgba(0, 0, 0, .8);
  }
}

@media (max-width: 829px) {
  .cemecon30 {
    max-width: 60%;
  }
}

@media (max-width: 767px) {
  .xs-mb-xs {
    margin-bottom: 10px;
  }

  .xs-mb-sm {
    margin-bottom: 20px;
  }

  .mt-lg {
    margin-top: 30px;
  }
}

@media (max-width: 640px) {
  .cemecon30 {
    max-width: 80%;
  }

  #brand-landing {
    height: 544px;
  }

  #emotional {
    margin-top: 282px;
  }

  .region-lg {
    padding: 15px 0 25px;
  }

  .text-snap-top {
    margin-top: 0;
  }
}

@media (max-width: 579px) {
  .col-s-6 {
    width: auto;
    float: none;
  }
}

@media (max-width: 559px) {
  .col-nano-4 {
    width: 33.3333%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    min-height: 1px;
    position: relative;
  }

  .col-nano-6 {
    width: 50%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    min-height: 1px;
    position: relative;
  }

  .col-nano-8 {
    width: 66.6666%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    min-height: 1px;
    position: relative;
  }

  .col-nano-12 {
    width: 100%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    min-height: 1px;
    position: relative;
  }
}

@media (max-width: 499px) {
  .columns-half {
    column-count: 1;
    column-gap: 0;
  }

  h2, .h2 {
    font-size: 25px;
    line-height: 32px;
  }

  #brand-landing {
    height: 454px;
  }

  #emotional {
    margin-top: 202px;
  }

  #brand-landing-secondary {
    height: 304px;
  }
}

@media (max-width: 414px) {
  .dropdown:after {
    margin-left: 2px;
  }

  nav .list-inline > li {
    margin-left: 4px;
  }

  #brand-landing {
    height: 364px;
  }

  #emotional {
    margin-top: 22px;
  }
}

@media (max-width: 370px) {
  #top-bar,
  .dropdown-menu {
    font-size: 14px;
  }

  .mt-lg {
    margin-top: 25px;
  }
}