* { box-sizing: border-box; }

header, main, nav, footer, figure, figcaption, aside, section, article { display: block; }


body { 
    
      font-family: Arial, Helvetica, sans-serif;
  	  background-color: #FFFFFF}

  #wrapper { width: 80%;
           margin-left: auto;
		   margin-right: auto;
		   background-color: #EADDCA;
		   min-width: 900px;
		   max-width: 1000px;
		   box-shadow: 4px 4px 4px #133926;
		   background-image: linear-gradient(to bottom, #FFFFFF, #ffb6c1); 
		   border: 1.5px solid #029240;
		}

header { background-color: #FF8C69;
       color: #FFFFFF;
	   text-align: center;
	   height: 175px; 
	  padding-top: 30px;
	  padding-left: 3em;}


h1 {margin-bottom: 0; 
	margin-top: 0;
	font-family: Georgia, "Brush Script", serif;
	letter-spacing: 0.25em;
	font-size: 3em;

} 

nav {font-weight: bold;
	 font-size: 120%;
	 padding: 1.5em;
	 float: left;
	 width: 16px;
}

nav a { text-decoration: none; }
nav a:link { color: #003300; }
nav a:visited { color: #7A7A52; }
nav a:hover { color: #FFFFFF; }
nav ul {  list-style-type: none;
        margin: 0;
		padding-left: 0;
		font-size: 1.2em;
}


main { background-color: #FBCEB1;
	  padding: 1px 20px 20px 30px;
	  margin-left: 200px;
      display: block;
}


h2 { color: #EADDCA;
	font-family: Georgia, "Times New Roman", serif;}
{box-sizing:border-box}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: inline;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

h3 { color: #EADDCA;
	font-family: Georgia, "Times New Roman", serif;}




dt { color: #ffb6c1; }

.barn {color: #ffb6c3; 
		font-weight: bold;}	   

main ul { 
    list-style-image: url(marker.gif);} 

#contact { font-size: 90%; }


footer { font-size: 75%;
       font-style: italic;
	   text-align: center;
	   font-family: Georgia, 'Times New Roman', serif; 
	   padding: 20px;
	   margin-left: 190px;
	   background-color: #FFFFFF;
}



#picturas { background-image: url(La literatura.png);
           height: 300px;
           margin-left: 190px;
		   background-repeat: no-repeat;
		   background-size: 100% 100%;
}


#contact { font-size: 90%; }
#mobile { display: none; }
#desktop { display: inline; }

table { border: 1px solid #003300;
      width: 80%;
	  border-spacing: 0;
	  border-collapse: collapse;
}

td, th { padding: 5px;
       border: 1px solid #3399CC;}

  td { text-align: center; }

  tr:nth-of-type(odd) { background-color: #ecf9ec; }


label { float: left; display: block; text-align: right; width: 125px; padding-right: 2em; }
input, textarea { display: block; margin-bottom: 20px; }
input[type="submit"] { margin-left: 135px; }


@media only screen and (max-width: 64em) {

	body { margin: 0;
	      background-color: #FFFFFF; }
	#wrapper { min-width: 0;
	           width: auto;
			   box-shadow: none; 
			   border: none; }
   header { padding-top: 0.5em; 
          padding-bottom: 0.5em; 
		  padding-left: 0;
          height: auto;	}
	h1 { letter-spacing: 0.1em; }
	main { margin-left: 0; }
	nav { float: none;
	     width: auto;
		 text-align: center;
		 padding: 0.5em; }
	nav li { display: inline;
	      padding: 0.25em 0.75em; }
    
	footer { margin-left: 0; }	
}

@media only screen and (max-width: 37.5em) {
	main { padding: 0.1em 1em; 
		   font-size: 90%; }
	h1 { font-size: 2em;}
   	nav { padding: 0; }
	nav li { display: block; margin: 0; border: solid 2px #330000; }
	nav a { display: block; }
	#homehero, #yurthero, #trailhero { background-image: none; height: 0; }
	#mobile { display: inline; }
	#desktop { display: none; }

}