body{
	color: black;
  font-size: 14px;
padding: 0px;
  margin: 0;
  background-position: fixed;
  text-decoration: none;
  font-family: 'Francois One', sans-serif;
}
h1{
color: black;
font-size: 30px;
text-align: center;
font-family: 'Francois One', sans-serif;
}
#menupeque{
display: none;
}
.fichacache {
display: none;
}
.redes {
margin-top: 10%;
  margin-bottom: 14%;
}
.colores {
display: block;
  width: 25%;
  margin-top: 13%;
  margin-left: 45%;
}
#nosotros {
margin-right: 10%;
margin-left: 10%;
text-align: justify;
}

#myBtn1 {
  margin-top:0;
  position: absolute;
  margin-bottom: 5%;
  padding-top: 0%;
}
#myBtn2 {
  margin-top: 0;
  position: absolute;
  margin-bottom: 5%;
  padding-top: 0%;

}

.textoinicio{

text-align: center;
margin-left: 20%;
margin-right: 20%;
margin-top: 8%;
padding-bottom: 5%;
position: inherit;

}

.text2{
text-align: justify;
background-color: white;
padding: 50px;
margin: 0 20% 0 20%;
position: inherit;

}

.texto10{
margin-top: 10%;
margin-right: 12%;
margin-left: 12%;
margin-bottom: 14%;
text-align: justify;
}

.cabecera{
background-image:	url("");
background-color: #fefefe;
width: 100%; 
left: 0; 
top: 0; 
position: block;
overflow-x: 5;
text-decoration: none;
}

#contact {
padding-left: 2%;
background-color: transparent;
width: 640px;


}

h3{
text-align:justify;
margin: 40px 350px 40px 350px;
  text-decoration: none;
  
}




.menu{
max-width:100%;
margin-top: 50px;
margin-right: 30px;
color: black;
text-decoration: none;
}
.cormail{
text-decoration: none;
color: black;
}
.cormail:hover{
color: grey;
}


.col-container {
display: table; /* Make the container element behave like a table */
width: cover; /* Set full-width to expand the whole page */
}

.col {
display: table-cell; /* Make elements inside the container behave like table cells */
background-color: transparent;
width: auto;
text-align: center;

}

.ficha1{
  display: block;
  position: relative;
  margin-left: 45%;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: lightsteelblue;
 margin-bottom: 5%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.ficha4{
  display: block;
  position: relative;
  margin-left: 45%;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: lightsteelblue;

}

#gat1 {
  position: inherit;
  padding-left: 20%;
  max-width: 80%;
  max-height: auto;
  margin-bottom: 5%;
}
#gat2 {
  position: inherit;
  padding-left: 20%;
  max-width: 80%;
  max-height: auto;
  margin-bottom: 5%;
}

#gat3 {
  position: inherit;
  margin-bottom: 5%;

  padding-left: 20%;
  max-width: 80%;
  max-height: auto;
}

.ficha1:hover{
background-color: ghostwhite;

}


.img2{
margin-left: 0%;
margin-top: 30px;
margin-bottom: 30px;
width: 80%;
height: auto;

}



#piea2{
background-color: transparent;
width: 50%;
height: auto;
padding-left: 0%;
margin-right: 10%;
text-align: center;
margin-top: 5%;
}

.tex1{
position: absolute;
background-color: transparent;
text-align: center;
margin-left: 15%;
margin-right: 10%;
margin-top: 0;
margin-bottom: 10%;
color: #098b9a ;
font-size: 47pt;

}
.tepo1{
color: #4c4c4c;
position: absolute;
margin-top: 20%;
margin-left: 5%;
font-size: 25.5pt;
}


.img4{


margin-bottom: 30px;
max-width: 60%;
height: auto;
max-height: 100%;
margin-left: 10%;

}
.gateras {
margin-top: 0%;
display: none;
}
.img5{



  margin-bottom: 30px;
  max-width: 60%;
  height: auto;
  max-height: 100%;
  margin-left: 0%;

}
#piea4{
background-color: white;
width: 60%;
height: 200px;
margin-left: 40%;
margin-right: 20%;
text-align: center;	
}
.img4 {
margin-left: 10%;
margin-right: 20%;
margin-top: 30px;
margin-bottom: 100px;
width: 70%;
height: auto;

}
.piea5{
margin-left: 0%;
margin-top: 30px;
margin-bottom: 30px;
width: 80%;
height: auto;
}
.piea50{
  margin-left: 0%;
  margin-top: 5%;
  margin-bottom: 30px;
  width: 50%;
  height: auto;
}
#piea6{
background-color: white;
width: 60%;
height: 200px;
margin-left: 40%;
margin-right: 20%;
text-align: center;	
}
.img6{
margin-left: 10%;
margin-right: 20%;
margin-top: 30px;
margin-bottom: 100px;
width: 70%;
height: auto;

}
#piea7{
background-color: transparent;
width: 50%;
height: 200px;
left: 0;
padding: 0 50px 0 100px;
position: inherit;
}
.img7{
margin-left: 30px;
margin-top: 0%;
margin-bottom: 30px;
width: 100%;
height: auto;

}
#piea8{
background-color: white;
width: 80%;
height: 200px;
margin-left: 40%;
margin-right: 20%;
text-align: center;	
}
.img8{
margin-left: 10%;
margin-right: 20%;
margin-top: 30px;
margin-bottom: 40%;
width: 100%;
height: auto;

}
.text3{
margin-top: -30px;
margin-left: 12%;
text-align: justify;
}
.menua{
	 margin-right: 30px;
text-decoration: none;
	margin-top: 20px;
color: black;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;


  }
.menua:hover, .menub:hover, .menuc:hover, .menud:hover, .cabecera:hover {
color: grey;


}
  .menub{
	margin-right: 30px;
	text-decoration:none;
	margin-top: 20px;
	  color: black;
	  -webkit-transition-duration: 0.4s; /* Safari */
	  transition-duration: 0.4s;
  }
  .menuc{
	margin-right: 30px;
	text-decoration:none;
	margin-top: 20px;
	  color: black;
	  -webkit-transition-duration: 0.4s; /* Safari */
	  transition-duration: 0.4s;
}
.menud{
	margin-right: 10px;
	text-decoration:none;
	margin-top: 20px;
color: black;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.menu0{
  width: 100px;
  height: auto;
  position: inherit;
  margin-left: 45%;
  margin-right: auto;
  margin-top: 5%;
  background-color: white;
}

.menu1{
width: 50px;
height: auto;
position: inherit;
margin-left: 40%;
margin-top: 6%;
background-color: white;
}
.menu2{
margin-top: 6%;
width: 50px;
height: auto;
position: static;
margin-left: 10%;
background-color: white;
}

.menu4{
  width: 80px;
  height: auto;
  position: inherit;
  margin-left: 46%;
  margin-right: auto;
  margin-top: 5%;
  background-color: white;

}

#a{
  margin-top: 10%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 130px;
  width:140px;
  max-width:100%;
  margin-bottom: 4%;
}
  .img1{
	imge-align: center;
  }
.img-caption {
width: 1280px;
max-width:100%;
height: auto;
max-height: 100%;
margin: none;
position: inherit;


}

.i22{
padding-top: 8%;
position: inherit;
}

.video{
width:100%;
margin-top: 5%;
margin-bottom: 0px;
}


.textofoot{
width: 200px;
height: 0;

margin-top: 10%;
text-align: justify;
}



#submit{
  cursor: pointer;
}

.logpab{
  padding-left: 20px;
}
.powered{
  text-decoration: none;
  color: blue;
  padding-bottom: 100px;
  margin-bottom: 150px;
  margin-left: 20px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;

}
powered:hover{
text-decoration: none;


}
.fin{
  height: 30px;
}

.ficha{
  text-decoration: none;
  text-align: center;
  color: black;
  position: static;
  background-color: none;
  margin-right: 50%;
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  text-align: left;

}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.nshlogo{
  margin-top: 4%;
}
.pie{
  margin-right: 23%;
  margin-left: auto;
}
.textopie{
margin-left: 70%;
position: absolute;
font-size: 7px;
}
#producto{
margin-right: 2%;
margin-left: 2%;
text-align: center;
}



#piea21{
  background-color: transparent;
  width: 100%;
  height: auto;
  padding-left: 0%;
  margin-right: 20%;
  text-align: center;
  margin-top: 5%;
}

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin-top: 0;

}

/* Next & previous buttons */
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 55px;
  margin-top: -20px;
  margin-right: 4%;
  color: lightskyblue;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;



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


}

  /* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

/* On hover, add a black background color with a little bit see-through */
.next:hover {
color: white;
  background-color: cadetblue;

}
.prev:hover{
  background-color: #fefefe;
}

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

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.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{
  background-color: white;
  border: 1px yellow;
}
.dot:hover{
  background-color: white;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

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



@media screen and (min-width: 600px) {

.gateras{
	display: inherit;
}
.gateras2{
	display: none;
}
.ficha1{
	display: block;
	position: relative;
	margin-left: 45%;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	background-color: lightsteelblue;
}
.ficha1:hover{
	background-color: ghostwhite;

}
#piea21{
	display: none;
}
#piea2{
	visibility: inherit;

}
.pie{
  margin-left: 22%;
}
#a{
	margin-left: 4%;
	max-width:100%;
	margin-bottom: 10px;
	width:140px;
	margin-top: -4%;
}
#gat1{
	height: auto;
	width: 100%;
	margin-left: 0%;
}
#gat2{
	height: auto;
	width: 100%;
	margin-left: 0%;
}
#gat3{
	height: auto;
	width: 100%;
	margin-left: 0%;
}

.colores {
	display: block;
	width: 30%;
	margin-top:6%;
	margin-left: 35%;
}
.gateras {
	margin-top: 0%;
}
.fichacache {
	display: inherit;
	margin-top: 2%;
	margin-left: 3%;
}
.menu{
	display: inherit;
}
.menush{
	display: none;
}

  /* Make the image fully responsive */
  .carousel-inner img {
    width: 50%;
    height: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
  }
  .bicicleta{
    margin-top: 10%;
  }
  .bici1{
    margin-left: 6%;
  }
  .bici2{
    margin-left: 6%;
  }
}

@media screen and (max-width: 600px) {
  #piea2{
	  display: none;
  }
.pie{
  margin-left: 0;
}
  .img2{
	  margin-left: 0%;
	  margin-top: 30px;
	  margin-bottom: 30px;
	  width: 96%;
	  height: auto;
  }
  .colores {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  width: 60%;

  }
  .slideshow-container, .dot{
	  display: none;
  }
.menu{
display: inherit;
font-size: 10px;
}
  #menupeque{
	  display: none;
  }
  #gat3{
    margin-top: 16%;
  }
  .piea50{
    margin-left: 0%;
    margin-top: 5%;
    margin-bottom: 30px;
    width: 80%;
    height: auto;
  }
  .bici1{
    margin-left: 6%;
  }
  .bici2{
    margin-left: 6%;
  }
  .bicicleta{
    padding-bottom: 5%;
  }
}