@import url(normalize.css);
@import url(all.min.css);
@import url(lightbox.min.css);
@import url(flickity.min.css);


/*Allgemeine Formatierungen*/
* {
  box-sizing: border-box;
}

/*für alle aktivierten Elemente(Anker) und beim Setzten des Cursors in die Eingabefelder, die Outline verwerfen/ausblenden */
*:active,*:focus{
  outline:none;
  outline:0;
}


body {
  margin:0;
  color: #e2a349;
  background: #fff2e0;
  -webkit-font-smoothing: antialiased;
  /*font-family: 'Georgia', sans-serif;*/
font-family: 'Arial', Helvetica, sans-serif;
}

a {
  text-decoration: none;
  
}
section a{
  color: #e2a349;
  text-decoration: underline;
  font-weight: bold;

}

h1 {
  font-size: 30px;
  line-height: 1.8em;
  text-transform: uppercase;

}

p {
  font-family: 'Georgia', sans-serif;
  margin-bottom: 20px;
  font-size: 1em;
  line-height: 2em; 
}

figure{
  margin:0;
}

ul,ol{
  padding:0;
  margin:0;
  list-style-type:none;
}


.innerbox{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 2%;
  position: relative;  
}

section .innerbox{
  padding: 50px 2%;
}




/* Gestaltungsraster /////////////////////// */
.row{
overflow: hidden;
}

.halbe{
  width:47%;         /* 100% -6%(Zwischenabstand)=94 / 2(Spalten)= 47*/
  margin-right:6%;
  float:left;
}
.drittel{
  width:29.333%;      /* 100% -12%(2x6 2Zwischenabstände)=88 / 3(Spalten)= 29.333*/
  margin-right:6%;
  float:left;
}

.zweidrittel{
  width:64.666%;  /* 2x drittel(29.333)=58.666  + 6(Zwischenabstand) = 64.666*/
  margin-right:6%;
  float:left;
}


.halbe:last-child,
.drittel:last-child,
.zweidrittel:last-child{
margin-right:0;
}

.gepaeck{
  /*border:1px solid #000;    fuer Liste der mitzunehmenden Sachen*/
  height: 1.5em;
 
}


/*header + nav ////////////////*/
/*Header-Status von Anfang an, bevor man mit der mouse nach unten scroll*/
.main_h {
  position: fixed;
  top: 0px;
  left:0;

  max-height: 70px;
  overflow: hidden;

  z-index: 999;
  width: 100%;

  padding-top: 17px;
  padding-bottom: 6px;
  
  background: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}


/*Beim scrollen mit der Mouse wird ab einer scroll-höhe von 100px dynamisch über das script.js zu der vorhandenen .main_h-klasse die sticky-klasse ergäntzt. Diese sorgt für das Positionieren des Headers(sticky/fixieren/...)*/
.sticky {
  background-color: rgba(220, 234, 247, 0.9);
  border-bottom: 1px solid gainsboro;

}

/*Nur in der mobilen Ansicht erscheint der toggle(Hamburger-Icon-Menu). Wenn man anklickt wird das navigation-menu auf/zu geklappt */
.open-nav {
  max-height: 400px !important;
  background-color: rgba(255, 255, 255, 0.93);
  border-bottom: 1px solid gainsboro;
}
/*Versuch Schrift im Toggle Menü schwarz umstellen///////////////////////////////////////////////////////////////////////////////////////////*/



.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.logo-gross img{
width: 150px;
}


.logo {
  float: left;
}


/*navigation ///*/
nav {
  float: right; 
}

nav ul {
  text-align: right;
  margin-top:15px;
}

nav ul li {
  display: inline-block;
  margin-left: 35px;

}

nav ul li:first-child {
  margin-left: 0;
}
 nav ul li a {
  color: #000;
  text-transform: uppercase;  
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  display: inline-block;
}

/*Schrift in Navigationsleiste wird weiss///////////////////////// */
.in-fortaleza nav ul li a {
  color: #fff; 
}

#aktiv{
  color: #e2a349;
  border-bottom: 2px solid #e2a349;
  /*font-size: 2em;*/
}



/* navigation anpassen beim scrollen nach unten*/
.sticky nav ul li a, .open-nav nav ul li a{
  color: #000;
  /*font-size: 20px;  */
  ;
}


/* 
mobile-toggle
Generieren und Positionieren des Hamburger-Icons in der mobilen Ansicht
*/
.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
}

.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #ECBE7C;
  display: block;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -ms-border-radius: 1000px;
  -o-border-radius: 1000px;
}


/* Hero-Großbild-Bereich //////////*/
.hero {
  position: relative;
  background: url(../bilder/fortaleza-high/fortaleza_buggy_001.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #fff;
  min-height: 500px;
  height:100vh;
  letter-spacing: 3px;
}

.vor-der-reise .hero {
  position: relative;
  background: url(../bilder/fortaleza-high/flecheiras_05.JPG) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #fff;
  min-height: 500px;
  height:100vh;
  letter-spacing: 3px;
}

.in-fortaleza .hero {
  position: relative;
  background: url(../bilder/fortaleza-high/fortaleza-beiramar-nachts.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #fff;
  min-height: 500px;
  height:100vh;
  letter-spacing: 3px;
}

.kontakt .hero {
  position: relative;
  background:url(../bilder/fortaleza-high/briefkasten_01.JPG) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #fff;
  min-height: 500px;
  height:100vh;
  letter-spacing: 3px;
}


.impressum .hero {
  position: relative;
  background: #CEDAE6 url(../bilder/fortaleza-high/logo-neu_3-kontakt-hero.jpg) no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  text-align: center;
  color: #fff;
  min-height: 500px;
  height:100vh;
  letter-spacing: 3px;
}

.herobox{
  position:absolute;
  left:50%;
  top:40%;
  transform: translate(-50%,-55%);
  margin:0;
  -webkit-transform: translate(-50%,-55%);
  -moz-transform: translate(-50%,-55%);
  -ms-transform: translate(-50%,-55%);
  -o-transform: translate(-50%,-55%);

}

.hero h1 {

  color:#333;
  background:rgba(255, 255, 255, 0.8);
  padding:10px;
  
}



.hero h1 span#name {
font-size:1.35em;
/*font-weight:900;*/
display:block;
}

.hero h1 span#claim {
  font-family: 'Georgia', sans-serif;
  font-size:0.80em;
  color:#e2a349;
  display:block;
  line-height:1.2;
  margin-top:5px;
}


.mouse {
  display:block;
  width: 26px;
  height: 46px;
  border: 2px solid #e2a349;
  border-radius: 13px;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  -o-border-radius: 13px;
  position:absolute;
  left:50%;
  bottom:40px;
  transform: translateX(-50%);
  /*transform: translate(-50%,0);*/
}


.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  border-radius: 4px;
  background: #e2a349;
  border: 1px solid transparent;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}



/* Animation der Mouse*/
@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
}
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
}

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

/*Section - Formatierung*/

section h2{
  text-align: center;
  text-transform: capitalize;
  text-transform: uppercase;
  color:#e2a349;
  letter-spacing: 2px;
}

section h3{
font-weight: 300;
text-transform: capitalize;
padding: 5px;
letter-spacing: 2px;
}
section h4{
border-top: 1px solid #e2a349;
padding-top: 10px;
  }

/* Anfang Polaroid-Effekt///////////////////////////////////////////////  */

img.polaroid{
  width: 90%;
  border: 1px solid #ccc;
  padding: 3% 3% 30% 3%;
  margin: 30px 0;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;


}


/* Ende Polaroid-Effekt///////////////////////////////////////////////  */


/* buttons ////////*/
.button{
display:inline-block;
background: #393939;
color: #fff;
display: inline-block;
padding: 0.625em 1.8em;
margin-top: 1.5em;
text-transform: uppercase;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.button:hover{
  background: #f90 !important;
  color:#fff !important;
  }










/*Social ///////////////////////////*/

ul.social li{
display:inline-block;
}

ul.social li a{
  color:rgba(255, 255, 255, 0.5);
  font-size:1.5em;
  margin:0 0.3em;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  }

ul.social li a:hover{
    color:rgba(255, 255, 255, 1);
   }

/*contact ///////////////////////*/
#kontaktformular input[type="text"],
#kontaktformular input[type="email"],
#kontaktformular textarea{
border:1px solid #eee;
background:#f9f9f9;
  padding:0.625em;
}

/*Pseudo-Element :focus, beim Setzen des Cursors in die Eingabefelder wird eine Orientierungsrahmen angezeigt*/
#kontaktformular input[type="text"]:focus,
#kontaktformular input[type="email"]:focus,
#kontaktformular textarea:focus{
  background:#fff;
  border:1px solid #f90;
}


#kontaktformular textarea{
width:100%;
height:250px;/*15.6em*/
  }
  
  #kontaktformular input[type="submit"]{
border:0;
  }



/*scroll-to-top*/

/* scroll-to-top-button////////////////*/
#scroll-to-top{
  display:none;
  position:fixed;
  right:20px;
  bottom:20px;
  background:#e2a349;
  color:#fff;
  font-size:3em;
  padding:2px 10px;
  /*scrolltotop-buttonvonanfanganverstecken*/-webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  border:1px solid #fff;

}


#scroll-to-top:hover{
   background:#000;
 
}



/*Footer - Formatierung*/
footer{
  background:#222;
}
footer .innerbox{
  padding: 30px 2%;
  overflow: hidden;
  }
 
footer #rechtliches{
float:left;
margin-top:15px;
}

footer #rechtliches li{
display:inline;
  }

footer #rechtliches li a{
  color:rgba(255,255,255,0.7);
    font-size:1em;
    margin:0;
    margin-right:20px;
    /*margin:0 20px 0 0*/
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }

   footer #rechtliches li a:hover{
     color:rgba(255,255,255,1);
    }
    

footer .social{ 
  float:right;
  margin:0;
}

footer .social li a{
  font-size:2.5em;
  /*margin:0 0 0 0.25em;*/
  margin:0;
  margin-left:20px;
 }



/*  CSS-Weichen/Breakpoints/Mediaqueries //////////////////*/
@media only screen and (max-width: 1300px) {

        /* Hero-Großbild-Bereich //////////*/
        .hero {
          background: url(../bilder/fortaleza-high/fortaleza_buggy_001.jpg) no-repeat center center scroll;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          background-size: cover;
        }

}/*ende Breakpoint bis 1400*/



/*  CSS-Weichen/Breakpoints/Mediaqueries //////////////////*/
@media only screen and (max-width: 1200px) {


}/*ende Breakpoint bis 1200*/


/*  CSS-Weichen/Breakpoints/Mediaqueries //////////////////*/
@media only screen and (max-width: 1000px) {

        
}/*ende Breakpoint bis 1000*/




/*  CSS-Weichen/Breakpoints/Mediaqueries //////////////////*/
@media only screen and (max-width: 866px) {

      
      
      
      nav ul li {
        margin-left: 20px;
        font-size:0.9em;
      }

      /*lightbox-pfeile prev/next innerhalb der lightbox ständig sichtbar anzeigen*/


              .lb-nav a.lb-next{
                  filter:alpha(Opacity=100);
                  opacity:1
              }

              .lb-nav a.lb-prev{
                filter:alpha(Opacity=100);
                opacity:1              ;
                -webkit-filter:alpha(Opacity=100);
}        

}/*ende Breakpoint bis 866px*/


/*CSS-Weichen/Breakpoints/Mediaqueries //////////////////*/
@media only screen and (max-width: 850px) {
     
          .hero h1 {
            font-size:1em;
          }
                
        

              /*header*/
          .main_h {
            padding-top: 25px;
          }

          .logo {
            float: none;
          }
          /*nav*/
          nav {
            width: 100%;
          }

          nav ul {
            padding-top: 10px;
            margin-bottom: 22px;
            float: left;
            text-align: center;
            width: 100%;
          }

          nav ul li {
            width: 100%;
            padding: 7px 0;
            margin: 0;

          }

          .mobile-toggle {
            display: block;
           
                      
            /*toggle wird in der mobilen Ansicht durch display:block wieder sichtbar gamacht. Wurde in der Desktop-Ansicht erst positioniert und auch gleich ausgeblendet*/
          }
           

          /*CSS-Raster anpassen*/
          .halbe,.drittel,.zweidrittel{
            width:100%;
            float:none;
            margin-right:0;
          }

         
        .overlay{
          left:50%;
          opacity:1;
         }
    
         /*schnellkontakt */ 
         #schnellkontakt{
           text-align: center;
         }

         /*work /////*/


         /* testimonial-Anpassungen von der flickyity.min.css für kleine Geräte*/

         .testimonial {
          padding: 0 80px;
        }

        /*contact */
        #kontaktformular input[type="text"]{
        margin-bottom:20px;
        }
        #kontaktformular {
        text-align: center;
        }
  

       /*footer   ///////////////////////////*/
footer{
  background:#222;
  text-align: center;
  font-size:0.9em;
}


footer ul li a{
  display:block;
  padding:0.625em;
  color:rgba(255, 255, 255, 0.5);
}

footer ul li a:hover{
  color:rgba(255, 255, 255, 0.9);
  }
      
      
}/*ende Breakpoint bis 766px*/




/*CSS-Weichen/Breakpoints/Mediaqueries //////////////////*/
@media only screen and (max-width: 600px) {
        .hero h1 {
          font-size:0.9em;
        }
            
          ul.teamliste > li{
            width:65%;
          }
          .overlay{
            left:0;
            top:80%;
          }

          .overlay p{
            display:none;
          }
}/*ende Breakpoint bis 480px*/