/* FONTS */

@font-face {
    font-family: 'Fira Sans';
    src: url('../font/FiraSans-Thin.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}


@font-face {
    font-family: 'Fira Sans';
    src: url('../font/FiraSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'Fira Sans';
    src: url('../font/FiraSans-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'Fira Sans';
    src: url('../font/FiraSans-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* COLORS  */

.primary{
  color: #DFEEE2 !important;
}

.bg-primary{
  background-color: #DFEEE2 !important;
}

.secondary{
  color: #133f71 !important;
}

.light-grey{
  color: #aaa;
}

.light-blue{
  color: cadetblue;
}

.bg-light-blue{
    background-color: cadetblue;
    opacity: 0.8;
}
.white{
  color: #fff;
}

.bg-light-white{
  background-color: rgba(255, 255, 255, 0.8);
}
.highlighted{
  color: #800040;
}

/* MAIN CSS */
html {
  height: 100%;
  box-sizing: border-box;
}

section{
  position: relative;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: 'Fira Sans', sans-serif !important;
  font-size: 80%;
}

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

a{
  color: cadetblue;
}

.brand{
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #333;
}


.scroll-down:hover{
  font-weight: 400;
  transition: 0.4s;
}

.scroll-down:hover i{
  color: #333;
  margin-bottom: 6px;
  transition: 0.25s;
}


.scroll-down{
  position: absolute;
  bottom: 96px;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  text-align: center;
  transition: 0.4s;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

h5{
  font-size: 14px;
}
.box{
  opacity: 1;
  position: absolute;
}
.cv-box{
  position: relative;
  top: 24px;
}
.hypno-box{
  position: absolute;
  right: 24px;
  top: 0px;
}
.cv-content{
  font-size: 14px;
}
.profile-container-mobile{
  height: 40vh;
  width: 100%;
  position: relative;
}
.profile-container{
  height: 60vh;
  width: 100%;
  right: 0px;
  top: 5%;
  z-index: 0;
}
.img-container{
  height: 40vh;
  width: 100%;
  right: 0px;
  top: 15%;
  z-index: -1;
}
.profile-img{
  height: 100%;
  width: 100%;
  background-image: url(../../assets/images/bn_1.jpg);
  background-size: cover;
  background-position: center;
  border: 10px solid white;
}
.psycho-img{
  height: 100%;
  width: 100%;
  background-image: url(../../assets/images/psycho.jpg);
  background-size: cover;
  background-position: center;
  border: 10px solid white;
}
.hypno-img{
  height: 100%;
  width: 100%;
  background-image: url(../../assets/images/hypnose.jpg);
  background-size: cover;
  background-position: center;
  border: 10px solid white;
}
.homoe-img{
  height: 100%;
  width: 100%;
  background-image: url(../../assets/images/homoe.jpg);
  background-size: cover;
  background-position: center;
  border: 10px solid white;
}
.lipoweg-container{
  position: relative;
  height: 160px;
  width: auto;
  margin-top: 8px;
}
.lipoweg-img{
  height: 100%;
  width: 100%;
  background-image: url(../../assets/images/lipoweg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}
.map-container{
  position: relative;
  height: 480px;
  width: 100%;
  width: auto;
}
.map-img{
  height: 100%;
  width: 100%;
  background-image: url(../../assets/images/karte.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.quote-container{
  background-color: white;
  padding: 24px;
  border-radius: 2px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.quote-topic{
  font-weight: 300;
}
.quote-text{
  font-weight: 300;
  font-size: 14px;
  margin-bottom: 0;
  color: black;
}
.shadow-deep{
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

.shadow-low{
  box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#headline.brand{
  font-size: 32px;
  line-height: 36px;
  font-weight: 600;
  color: white;
  text-shadow: 3px 3px 10px rgba(0,0,0,0.2);
  z-index: 1;
}
.navbar-collapse{
  padding-top: 24px;
}

.nav-link{
  font-size: 16px;
}
.box-padding{
  padding: 16px;
}
.navbar-logo{
  background-image: url(../images/navbar-logo.png);
  background-size: cover;
  height: 40px;
  width: 120px;
}

.table td, .table th {
  padding: 8px;
  vertical-align: top;
}
.table-striped tbody tr:nth-of-type(2n+1),
.table-striped tbody tr:nth-of-type(2n+2) {
    background-color: #f8f9fa;
}
.table-bordered {
    border: none;
}
.table-bordered td, .table-bordered th {
    border: none;
    border: 1px solid #dee2e6;
  }
tbody{
  font-size: 70%;
}
.mt-5{
  margin-top: 2.2rem !important;
}
.mt-lg-5{
  margin-top: 2.2rem !important;
}
/*Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #headline.brand{
    font-size: 48px;
    line-height: 56px;
  }
 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  body{
    font-size: 90%;
  }
  .quote-text{
    font-size: 16px;
    color: black;
  }
  .box-padding{
    padding: 32px;
  }
  tbody{
    font-size: 80%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body{
    font-size: 100%;
  }
  tbody{
    font-size: 100%;
  }
  .brand{
    margin-bottom: 0px;
  }
  #headline {
    width: 100%;
    position: relative;
  }
  #headline.brand{
    font-size: 68px;
    line-height: 72px;
    width: 160%;
    margin-top: 2.5rem !important;
  }
  .cv-box{
    position: absolute;
    right: 24px;
  }
  .navbar-collapse{
    padding-top: 0px;
  }
  .box-padding{
    padding: 40px;
  }
  .navbar-logo{
    margin-right: 16px;
  }
  .mt-lg-5{
    margin-top: 0 !important;
  }
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #headline.brand{
    font-size: 74px;
    line-height: 80px;
  }
}

/* LAYOUT */
.mt-10{
  margin-top: 10%;
}

section{
  min-height: 100%;
  padding-top: 64px;
}

section.home{
  padding-top: 0px;
}

@media (min-width: 768px){
  section.home{
    min-height: 100vh;
    padding-top: 64px;
  }
}


.va-baseline{
  vertical-align: baseline;
}

.m-w-100{
  min-width: 100px;
}



.bg-logo{
  background-image: url(../images/navbar-logo.png);
  background-size: cover;
  height: 100px;
  width: 300px;
  position: fixed;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -50px;
  z-index: -1000;
}

/* FOOTER */

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
}