@charset "UTF-8";
/* styling */
/* 	

	CSS-Variablen & Mixin
*/
/* Farben */
/* Based on bootstrap-grid and mobile first */
/* typo */
h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0;
}

/* Media Queries */
/*
 *
 * INSTRUCTIONS
 *
 * Copy the Legal Disclaimer and the @font-faces statements to your regular CSS file.
 * The font file(s) should be placed relative to the regular CSS file.
 *
 */
/*
 * Legal Disclaimer for Web licence
 *
 * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
 *
 * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
 * 
 * It is strictly prohibited to rename the font and to download or use these fonts in any other media. 
 * 
 * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
 *
 * horgenlabs.com (monthly pageviews: <50K)
 *
 */
/* complete */
@font-face {
  font-family: "BrownLLWeb-Light";
  src: url("Fonts/BrownLLWeb-Light.woff") format("woff");
}
@font-face {
  font-family: "BrownLLWeb-Light";
  src: url("Fonts/BrownLLWeb-Light.woff2") format("woff2");
}
/* subset */
@font-face {
  font-family: "BrownLLSub-Light";
  src: url("Fonts/BrownLLSub-Light.woff") format("woff");
}
@font-face {
  font-family: "BrownLLSub-Light";
  src: url("Fonts/BrownLLSub-Light.woff2") format("woff2");
}
/* 	
	Basic-Style
*/
/* html is set to 62.5% so that all REM measurements are based on 10px sizing - so 1.5 rem = 15px; */
html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "BrownLLWeb-Light";
  font-weight: 300;
  font-style: normal;
}

a {
  text-decoration: none;
  color: #0000b3;
}

a:hover {
  text-decoration: underline;
  color: #ea5297;
}

.img-fluid {
  width: auto;
  max-width: 100%;
  height: auto;
}

.align-right {
  text-align: right;
}

ul {
  padding: 0;
  margin: 0 0 40px 1.25rem;
}

li {
  padding: 5px 0;
  font-size: 1.37rem;
  line-height: 1.325em;
  color: #7B7373;
}

main {
  padding-top: 110px;
  padding-bottom: 50px;
}
@media (min-width: 1239px) {
  main {
    padding-top: 120px;
  }
}

.bg_sand {
  background-color: #f9f6f1;
}

.bg_antrazit {
  background-color: #3c3c3b;
}

.bg_weiss {
  background-color: #FFFFFF;
}

.bg_antrazit main {
  padding-bottom: 20px !important;
}

.bg_antrazit .xperto_text a {
  color: #ea5297;
}

.bg_antrazit .xperto_text a:hover {
  color: #FFFFFF;
}

/* 	
*/
/* Navigation */
.headerWrap {
  background-color: #FFFFFF;
  padding: 20px 0 0 0;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
}

.navWrap {
  max-width: 1239px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}

.logoLarge {
  position: absolute;
  top: 8px;
  width: 220px;
  z-index: 101;
}
@media (min-width: 720px) {
  .logoLarge {
    width: 240px;
  }
}

.logoSmall {
  position: absolute;
  top: 8px;
  width: 40px;
  display: none;
}

.logoSmall img {
  display: none;
}
@media (min-width: 720px) {
  .logoSmall img {
    display: block;
  }
}

header {
  padding: 1px 0 48px 0;
}
@media (min-width: 720px) {
  header {
    padding: 40px 0 15px 0;
  }
}

.headerSmall {
  padding: 0 0 16px 0;
}

.nav {
  text-align: right;
  max-width: 1239px;
  margin: 0 0 0 auto;
}

nav {
  display: none;
}
@media (min-width: 720px) {
  nav {
    display: block;
  }
}

nav ul {
  padding: 32px 0 0 0;
  margin: 0;
  list-style: none;
}

nav li {
  padding: 0 12px;
  display: inline-block;
  font-size: 1.125rem;
  line-height: 1.125rem;
  color: #7B7373;
}

nav li a {
  font-size: 1.125rem;
  line-height: 1.125rem;
  color: #7B7373;
  text-transform: uppercase;
}

nav li a:hover,
nav li a.active {
  color: #ea5297;
  text-decoration: none;
}

/* FOOTER */
#xperto_navigation_footer ul {
  padding: 0;
  margin: 0;
}

#xperto_navigation_footer li {
  list-style: none;
  font-size: 0.8em;
}

#xperto_navigation_footer li a {
  color: #b2b2b2;
}

#xperto_navigation_footer li a:hover {
  color: #ea5297;
  text-decoration: none;
}

/* Hamburger
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#nav-burger {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 10px 15px 0 auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  background: url("/assets/img/hl_logo_small.svg") no-repeat;
  background-size: 40px;
}
@media (min-width: 720px) {
  #nav-burger {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  #nav-burger {
    margin-right: 0;
  }
}
#nav-burger.open {
  background: url("/assets/img/hl_burger_close.svg") no-repeat;
  background-size: 40px;
}

/* Mob Nav 
 ______________ */
nav.nav-mob {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  background-color: #3c3c3b;
  width: 100%;
  height: 100vh;
  z-index: 100;
}

nav.nav-mob ul {
  margin-top: 80px;
}

nav.nav-mob li {
  display: block;
  text-align: left;
  padding: 10px 20px;
  color: #FFFFFF;
  font-size: 2rem;
}

nav.nav-mob li a {
  color: #FFFFFF;
  font-size: 2rem;
}

nav.nav-mob li a.active,
nav.nav-mob li a:hover {
  color: #ea5297;
}

#nav-mob {
  display: none;
}

.nav-mob-open {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  background-color: #60696e;
  width: 100%;
  height: 100vh;
  z-index: 1000;
}

.nav-mob-open ul {
  list-style: none;
  padding: 20px 0 0 0;
  margin: 20px;
}

.nav-mob-open ul li {
  padding: 0 0 20px 0;
  text-align: center;
}

.nav-mob-open ul li a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1.8rem;
  text-align: center;
}

/* 	
	Basic-Style
*/
#xperto_content {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

h1 {
  font-size: 2rem;
  line-height: 2.75rem;
  font-weight: 300;
  text-transform: uppercase;
  padding-bottom: 20px;
  padding-top: 50px;
  color: #7B7373;
}

h2 {
  font-size: 1.37rem;
  line-height: 1.625rem;
  font-weight: 300;
  text-transform: uppercase;
  padding-bottom: 10px;
  padding-top: 50px;
  color: #7B7373;
}

p {
  font-size: 1.37rem;
  line-height: 1.325em;
  padding-bottom: 15px;
  color: #7B7373;
}

strong {
  font-weight: 800;
}

#xperto_gallerie {
  padding-bottom: 50px;
}

body.bg_antrazit #xperto_content,
body.bg_antrazit #xperto_content h1,
body.bg_antrazit #xperto_content p {
  color: #FFFFFF !important;
}

.xp_button {
  padding: 25px 0;
}

.xp_button a {
  background-color: #0000b3;
  color: #FFFFFF;
  padding: 10px 30px;
  text-decoration: none;
  line-height: 2rem;
}

.xp_button a:hover {
  background-color: #ea5297;
  color: #191919;
}

/* iFrame response etc. */
.responsive-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* Formular */
textarea,
input[type=text],
input[type=button],
input[type=submit],
input[type=email],
input[type=tel],
input[type=number],
.input-radio-checkbox {
  /* this is a class */
  -webkit-appearance: none;
  border-radius: 0;
}

#xp_modul_form {
  padding-top: 50px;
}

textarea:focus, input:focus {
  outline: none;
}

.xp_submit {
  background-color: #0000b3;
  color: #FFFFFF;
  padding: 10px 30px;
  text-decoration: none;
  border: none;
  margin-top: 30px;
}

.xp_submit:hover {
  background-color: #ea5297;
  color: #191919;
  cursor: pointer;
}

#xp_modul_form label {
  color: #7B7373;
  width: 100px;
  display: inline-block;
}

.xp_form_error {
  color: #ea5297;
  margin: 30px 0 10px 0;
}

.xp_form_input {
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #7B7373;
  padding: 10px;
  margin: 0 0 20px 10px;
  font-family: "BrownLLWeb-Light";
  font-weight: 300;
  color: #7B7373;
  width: 80%;
  font-size: 18px;
}

.xp_form_input_error {
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #ea5297;
  padding: 10px;
  margin: 0 0 20px 10px;
  font-family: "BrownLLWeb-Light";
  font-weight: 300;
  color: #3c3c3b;
  width: 80%;
  font-size: 18px;
}

.xp_label_textfeld {
  margin-top: 20px;
  vertical-align: top;
}

.xp_form_textfeld {
  background-color: transparent;
  border: 1px solid #7B7373;
  padding: 10px;
  margin: 20px 0 20px 10px;
  font-family: "BrownLLWeb-Light";
  font-weight: 300;
  color: #7B7373;
  width: 80%;
  min-height: 130px;
  font-size: 18px;
}

.xp_form_textfeld_error {
  background-color: transparent;
  border: 1px solid #ea5297;
  padding: 10px;
  margin: 20px 0 20px 10px;
  font-family: "BrownLLWeb-Light";
  font-weight: 300;
  color: #3c3c3b;
  width: 80%;
  min-height: 130px;
  font-size: 18px;
}

.xp_ok {
  padding: 50px 0;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* 	
*/
/* Footer */
footer {
  background-color: #3c3c3b;
  color: #FFFFFF;
  padding: 16px 0 4px 0;
  margin-top: 0px;
  font-size: 0.8em;
}

.footerWrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

footer a {
  color: #FFFFFF;
}

footer a:hover {
  color: #ea5297;
  text-decoration: none;
}

.footerGrid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 15px;
  max-width: 100%;
}
@media (min-width: 720px) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }
}

.ct_footer__nav {
  text-align: left;
  padding-top: 20px;
}
@media (min-width: 720px) {
  .ct_footer__nav {
    text-align: right;
    padding-top: 0;
  }
}

.ct_footer__legal {
  padding: 20px 0;
  color: #b2b2b2;
  font-size: 0.8em;
}

.linkedin {
  padding-top: 10px;
}

/*# sourceMappingURL=styles.css.map */