* { margin :0; padding: 0px;}

body{ color: white; font-family: 'dosis';}

nav { position: absolute;  margin: 2em 1em; }
nav li {display: inline-block; }
nav a {color: white; padding: 0.5em; text-decoration: none; font-size: 1.2em; font-family: 'dosis'}
nav a:hover { text-decoration: underline; }

.buttom1  {
  position: absolute;
  top: 1em;
  left: 2em;
  color: white;

  -moz-box-sizing: border-box;

       box-sizing: border-box;
}
 .buttom1:visited  {color: white;}

#showcase {

background-image: url(../image/bike-colca-geyser/geyser-pinchollo.jpg);
height: 100vh;
background-size: cover;
background-position: center;
display: -moz-box;
display: flex;
-moz-box-orient: vertical;
-moz-box-direction: normal;
     flex-direction: column;
-moz-box-pack: center;
     justify-content: center;

     align-items: center;
padding-bottom: 0 20px;
text-align: center;

}

.article-1 { background-color: rgba(); height: 400px; width: 100%; text-shadow: 1px 1px 1px #000;}
#showcase h1{
font-size: 4em; padding: 0 0.5em;

}
#showcase p{font-size: 1.6em; font-family: 'nunito'; padding: 0.5em;  width: 80%; margin: 0 auto;}


#showcase .buttom { text-decoration: none; border: 1px solid white; margin: 1em; font-size: 1.5em;
 color: white; padding: 0.5em;  }

#showcase .buttom:hover { background-color: rgba(0,0,0,.5);  transition: 1.5s; }


main { display: flex;  flex-direction: column; max-width: 100%; justify-content: center; align-items: center; margin-top: 0em; color: black; 
  background-color:#fff; padding-bottom: 20em;}

main li {color: black;  padding:1em; }

.contenido-tour { display: flex; width: 80%; background-color: #fff; ;margin-top: 4em; padding: 2em 3.5em;
  border: 1px solid grey; border-radius: 5px 10px; }

.contenido-tour details {font-size: 1em;  background-color:  }


.contenido-tour table,td{border: 1px solid grey; border-collapse: collapse;}

.contenido-tour .body-text {background-color:#fff; padding: 2em 1.8em; color:black; }

.table-itinerary td { border: hidden; }

.contenido-tour .body-text b {color: #000; font-weight: bold;}

.contenido-tour details summary{ background-color: unset; font-size: 1.5em; font-weight: normal; cursor: pointer; padding: 0.3em; }

.contenido-tour summary:hover {background-color:rgba(0,0,0,0.1); transition: 1.5s; text-decoration: underline;}



.day-text { font-size: 2em; font-weight: bolder; }

.text-big { font-size: 1.5em; text-decoration:none; }

.day-text-red { color: red; font-size: 2em; font-weight: bolder; }

.day-text-black{ color:#000; font-size: 1.5em; font-weight: bolder;text-align: left; 
 

} 


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}





td {padding: 0.3em;}

.contenido-tour p { font-size: 1.3em; text-align: justify; padding: 0.3em 0em; letter-spacing: 0.15em; line-height: 1.4em; }

.contenido-tour li { display: block; padding: 0 }

.contenido-tour a {color: #;  font-size: 1.1em; text-decoration: underline;}

.contenido-tour a:hover { color: #;  transition: 0.6s; transition-timing-function: ease-out;}

.contenido-tour h1 { font-size: 2.5em; text-align: center; }

.img-container-head { display: flex; flex: 0 1 auto;  background-color: #fff; padding: 0.5em 0.5em 0.5em 0.5em; border-radius: 8px 5px; border: 0.5px solid grey;}

.img-head { flex: 0 1 25%; padding: 0.5em; }
.img-head img {max-width: 100%; }

.img-container { display: flex; flex: 0 1 auto;  padding: 0.5em 0.5em 1em 0.5em; border-radius: 8px 5px;}
.img-itinerary { flex: 0 1 33%; padding: 1em;}
.img-itinerary img {max-width: 100%; border-radius: 0px;}

.img-itinerary figcaption {color: #575757; font-weight: bold;}







.contact-button {  margin-top: 2em;
    background-color: ;
    width: 20   0px;
    border:1px solid black;
    display:inline-block;
    cursor:pointer;
   width: 200px;
    padding:6px 35px;
    text-decoration:none;
      transition: all 0.3s ease 0s;

     }
 .contenido-tour .contact-button:hover { background-color: #000; color: white; box-shadow: 0 8px 6px -6px black; border:1px solid black; }     
.butoon { display: flex; }
   .button a { text-decoration: none;  color:#000;  font-size:1.2em; text-align: center;}

#photos {text-align: left; padding: 0em; color: black; font-size: 1.5em }

#footer {display: flex; flex-direction: column; justify-content: center;align-items: center; height: 5em; background-color:rgba(0, 0, 0, 0.9);text-align: center; }

#footer p { color: white; }
/*END GALLERY*/
/* buttom TOP*/
.toTop {
  display: none;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
    color: #000;
    border: 1px solid #000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: fixed;
    right: 30px;
    bottom: 80px; 
    
   
    text-align: center;
    text-decoration: none;
    z-index: 1;

}
/*PHOTOS*/

#titlephotos { display: block; margin: 0 auto; text-align: center;  }

#titlephotos h3 { font-size: 4em; font-weight: bold; text-align: center; margin-top: 2em; }

#titlephotos h4 { font-size: 2em; }

#titlephotos p { text-align: center; }

#photos { margin: 10vw; display: flex;flex-wrap: wrap; text-align: center; }

#photos h3 { font-size: 4em; text-align: center; padding: 1em }

#photos div{flex: auto; width: 400px; margin: 2vw;}

#photos div figcaption { text-align: center; padding-top: 0.5em; font-size: 1.2em }

#photos div img {  max-width: 100%; height: auto; border-radius: 3px; }
/*END PHOTOS*/



 
@media only screen and (max-width: 1000px) {

    #showcase {background-image: url(../image/bike-colca-geyser/bike-colca-1000.jpg);}


.article-1 {  height: 260px;  }

.article-1  h1 { margin-top: 1em; }

    #showcase h1{font-size: 2em; padding: 0 0.5em;}

    #showcase .buttom { text-decoration: none; border: 1px solid grey; margin: 0em; font-size: 1em;
 color: white; padding: 0.2em;  }


 main { display: unset;  flex-direction: column; max-width: 100%; justify-content: unset; align-items: center; margin-top: 0em; color: black; 
  background-color:#fff; padding-bottom: 20em;}

    #showcase p{font-size: 1em;}
  section { padding: 1em 0em;}
  .section1 {padding: 1em 0em}

  .morning { width: 80%; margin: 2em 0em; }

  .section1 p {font-size: 1.2em; text-align: justify;}
.section1 a {font-size: 1.2em; margin-top: -2em;}
 .section1 h2 {padding-top: 1.5em;}
 .day-text { font-size: 1.5em; }
 #title  div  {display: flex; max-width: 90%;}


 #title h3 {font-size: 1em;}

.text-big {font-size: 1.3em; color:blue; font-weight: bold; padding-right: 1em; font-weight: bolder; text-decoration:none;}





.img-container-head { display: flex; flex: 0 1 100%; flex-wrap: wrap; justify-content: space-between; background-color: #fff; padding: 0.5em 0.5em 3em 0.5em; border: unset;  }

.img-head { flex: 0 1 45%; padding: 0.5em; }
.img-head img {max-width: 100%; }


.contenido-tour a {width: unset;}

.contenido-tour { display: flex; width: unset;  background-color: white;  flex-direction: column; justify-content: center;  margin-top: 3em; 
  border: none; border-radius: 5px 10px; padding: 0; }

  .contenido-tour h2 { padding: 0em 0.5em; }
  .contenido-tour p {  }

  .contenido-tour table { margin: 1em; }
  .img-container {display: none;}

   .video-container { margin: 1em; }

   .button { text-align: center; }

.contenido-tour details summary { font-size: 1.2em;}

}

@media only screen and (max-width: 600px) {
      #showcase {background-image: url(../image/bike-colca-geyser/bike-colca-600.jpg);}
     

.article-1 {  height: 350px;  }

.article-1  h1 { margin-top: 1.5em; }

.img-container-head { display: none;}


#titlephotos h3 {font-size: 1.5em}

.contenido-tour { display: block;   }


.contenido-tour table {  }

.contenido-tour .table-itinerary  { margin-left:-1em;}


#photos { margin: 1vw; display: flex;flex-wrap: wrap; text-align: center; }
.contenido-tour p { font-size: 1em; text-align: justify; padding: 0.3em 0.7em; letter-spacing: 0.1em; line-height: 1.4em; }


#photos div figcaption {  padding-top: 0.2em; font-size: 0.8em; margin-bottom: 1em;}



}