@charset "UTF-8";
/* CSS Document */
/* Aquí comienzan mis stilos para computador */
nav {position: fixed;
top:0;
left:0;
background-color:#8149A6;
width: 100%;
height: 40px;
padding: 10px;
z-index: 20;}
nav a{text-decoration: none;
color:#FFFFFF;
font-size:1.2em;
margin-left:70px;
font-family: 'Roboto Slab', serif;}
#menu {width:900px;
margin:0 auto;}
#titulo {position: absolute;
top: 80%;
left: 17%;
z-index: 20;}
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

footer {width: 100%;
height: 12%;
background-color:#8149A6;}
footer h3 {color: aliceblue;
text-align: center;
margin-top: 0px;
font-size:2em;
font-family: 'Roboto Slab', serif;}

.texto h3 {font-family: 'Roboto Slab', serif;
color: #583172;
font-size: 1.6em;
text-align:center;
margin-top: -2%;
margin-bottom: 3%}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image: url("img/2918752.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("img/2918830.jpg");
  min-height: 100%;

}

.bgimg-3 {
  background-image: url("img/876.jpg");
  min-height: 100%;
}

.bgimg-4 {
  background-image: url("img/2918892.jpg");
  min-height: 100%;
}

.bgimg-5 {
  background-image: url("img/trofeo.jpg");
    min-height: 100%;}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border1 {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 3em;
  letter-spacing: 5px;
  text-transform: uppercase;
  position: absolute;
  margin-top: -9.3%;
  margin-left: -46.5%;
}

.caption span.border2 {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 2em;
  letter-spacing: 5px;
  position: absolute;
  margin-top: -1.2%;
  margin-left: -38.5%;
}

.caption span.border3 {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 3em;
  letter-spacing: 5px;
  text-transform: uppercase;
  position: absolute;
  margin-top: 5.2%;
  margin-left: -42.5%;
}


.texto {
  color: #777;
  font-size: 1.5em;
  background-color:white;
  text-align:left;
  margin-left: 20%;
  padding: 50px 0px;
  margin-right: 20%
}

.container {width: 100%;
max-width: 650px;
margin: 0 auto;}

/* Aquí terminan mis estilos para computador */

/* Turn off parallax scrolling for tablets and phones */

/* PARA CELULARES */
@media only screen and (max-width: 600px){ 

footer {width: 100%;
height: 12%;
background-color:#8149A6;}
footer h3 {color: aliceblue;
text-align: center;
margin-top: 0px;
font-size:1.5em;
font-family: 'Roboto Slab', serif;}

.texto h3 {font-family: 'Roboto Slab', serif;
color: #583172;
font-size: 1.6em;
text-align:center;
margin-top: -7%;
margin-bottom: 3%}

#menu{display: none;}
nav {display: none; opacity: 0}
	
.texto {
  color: #777;
  font-size: 1.3em;
  background-color:white;
  text-align:left;
  margin-left: 2%;
  padding: 50px 0px;
  margin-right: 2%
}

#bgimg-5no{display: none;}

.caption span.border1 {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 2.15em;
  letter-spacing: 5px;
  text-transform: uppercase;
  position: absolute;
  margin-top: -9.3%;
  margin-left: -46.5%;
}

.caption span.border2 {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 1.2em;
  letter-spacing: 5px;
  position: absolute;
  margin-top: 23%;
  margin-left: -24%;
}

.caption span.border3 {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 2.15em;
  letter-spacing: 5px;
  text-transform: uppercase;
  position: absolute;
  margin-top:39%;
  margin-left: -36%;
}
	
}