/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 3rem;
  color: #5a5a5a;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  background: #cbbba1
}

.main_desktop{

}

@media (min-width: 768px){
  .main_desktop{
    display: block;
  }
}

.main_mobile{
  display: none;
}

@media (min-width: 768px){
  .main_mobile{
    display: none;
  }
}

/*Header and Logo*/

/*Logo always on top right position*/
.logoTopRight{
  position: fixed;
  right: 0;
  top: 0;
  z-index: 3000;
  font-size: 2rem;
  width: 65%;
}

.logoTopRight img {
  margin-top: 1.5rem;
float: right;
width: 15rem;
}

@media (min-width: 768px){
  .logoTopRight{
    width: initial;
  }
  .logoTopRight img{
    width: 100%;
  }
}


@media (min-width: 992px){
  .logoTopRight img{
    padding-right: 1rem;
  }
}

.logoTopRightDesktop{
  display: none;
}

@media (min-width: 1141px){
  .logoTopRight{
    display: none;
  }

  .logoTopRightDesktop{
    display: inline-block;
    width: 15rem;
    float: right;
    margin-top: -.5rem;
  }
}





main{
  margin-top: 5rem;
}

@media (min-width: 1141px){
  main{
    margin-top: 2rem;
  }
}

/*navigation*/
/*mobile navi left sidebar*/
.navigation{
  position: fixed;
  width: 20rem;
  /* background: lightgrey; */
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform ease-in-out .5s;
  transition: -webkit-transform ease-in-out .5s;
  transition: transform ease-in-out .5s;
  transition: transform ease-in-out .5s,-webkit-transform ease-in-out .5s;
}

.navigation ul{
  list-style: none;
  margin: 0;
  padding: 1rem;
}

.navigation ul li a{
      color: #798188;
}

.visiblemenu{
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.navigationSub{
  top: 2rem;
}

.navigationSub ul{
  padding: .3rem 0 0 0!important;
}

.navigationSub ul li a{
  font-size: .9rem!important;
}

@media (min-width: 1141px){
  .navigation{
    position: fixed;
        width: 88%;
    z-index: 2999;
      margin-top: -2.5rem;
    height: 7rem;
    /* background: lightgrey; */
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: -webkit-transform ease-in-out .5s;
    transition: -webkit-transform ease-in-out .5s;
    transition: transform ease-in-out .5s;
    transition: transform ease-in-out .5s,-webkit-transform ease-in-out .5s;
  }

  .navigation ul{
    margin-top: 2rem;
    height: 0;
        padding: 1rem 0 0 0;
  }

  .navigation ul li{
    float: left;
    margin-right: 1rem;
  }

  .navigation ul li a{
    font-size: 1rem;
  }

  .navigationSub{
    position: absolute;
    height: 0;
  }
}

/*main wrapper, content only*/
.mainwrapper{
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform .5s ease-in-out;
  transition: -webkit-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
  transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out;
}

.mainwrappervisible{
  -webkit-transform: translateX(20rem);
  transform: translateX(20rem);
}

/*css for container transition on mobile menu open*/
.container{
  margin: 0;
}

@media (min-width: 768px) {
  .container{
    /* margin-left: calc(50% - 356px); */
  }
}

@media (min-width: 1141px) {
  .container{
    margin-left: auto;
    margin-right: auto;
  }
}
.container{
  -webkit-transition: -webkit-margin .5s ease-in-out;
  transition: -webkit-margin .5s ease-in-out;
  transition: margin-left .5s ease-in-out;
  transition: margin-left .5s ease-in-out,-webkit-transform .5s ease-in-out;
}

.containerWhenMenuVisible{
  /* width: 100%!important; */
  margin-left: 0;
}

@media (min-width: 1141px){
  .mainwrapper{
    margin-top: 5rem;
  }
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}



/* BEN */


#kontaktdesktop .col-12 p{
  font-size: 3.2vh;
    line-height: 2.7vh;
}

.pretext{
  position: absolute;
  text-align: right;
  width: 65vh;
  height: 20rem;
  padding-top: 9rem;
}

p{
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 5vh;
  line-height: 1.3rem;
  color: black;
}
/* @media (min-width: 1200px){
  .pretext{
    width: 379px;
  }
} */
.backpic{
  max-height: 413.5px;
  position: absolute;
}
@media (min-width: 1920px){
  .backpic{
    max-height: 723.625px;
  }
}


.veil{
    position: absolute;
    z-index: 10000;
}

/* body::-webkit-scrollbar {
  display: none;
} */

.picpopup{
  position: fixed;
  z-index: 1000000;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: -100vh;
  text-align: center;
}

.picpopup img{
  max-width: 80%;
  max-height: 70vh;
  margin: auto;
  margin-top: 15vh;
}

.popvisible{
  /* width: 100%!important; */
  top: 0;
  /* max-height: 90vh!important; */
}

.popupunclicker{
  position: fixed;
  width: 0;
  height: 0;
  z-index: 1000001;
  /* -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease; */
}

.pretextimg{
  opacity: 1;
}



/* @media (min-width: 1200px){
  p{
    font-size: 1.8rem;
  }
} */

.benjau{
  font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size: 9.7vh;
margin-top: 15vh;
color: black;
}

/* @media (min-width: 768px){
  .benjau{
    font-size: 6rem;
    margin-top: 5.5rem;
  }
}

@media (min-width: 1200px){
  .benjau{
    font-size: 6rem;
    margin-top: 7rem;
  }
} */

#loadingscreen{
  height: 100vh;
  width: 100%;
  color: #5a5a5a;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  background: #cbbba1;
  left: 0;
  z-index: 100000000;
}

.lst{
  font-size: 1.6rem;
  margin-top: 3rem;
}

@media(min-width: 768px){
  .lst{
    font-size: 4.5rem;
    margin-top: 4rem;
  }
}

#actionbar{
  top: 29vh;
  min-height: 40rem;
  -webkit-transition: margin .2s ease-out;
 -moz-transition: margin .2s ease-out;
 -o-transition: margin .2s ease-out;
 transition: margin .2s ease-out;
}



/* @media (min-width: 768px){
  #actionbar{
    top: 15rem;
  }
} */


/*mobile version*/

.mobile_pretext p{
  font-family: 'Quicksand', sans-serif;
font-weight: 400;
font-size: 1.8rem;
line-height: 1.9rem;
color: black;
}

.mobile_piccontainer img{
  width: 100%;
}

.m_veil, .m_topveil{
  position: absolute;
}

.mobile_picture_row{
  margin-top: 1rem;
}

.desktopversion{
  display: none;
}

.mobileversion{
  display: initial;
}

@media (min-width: 769px){
  .mobileversion{
    display: none;
  }
  .desktopversion{
    display: initial;
    /* width: 100%; */
  }
}


.constructionmobile{
  display: none;
  
}