@charset "UTF-8";
/* CSS Document */

body
html {
  width:100%;
  height: 100%;
  background-color:#FFF;
}
html {
  scroll-behavior: smooth;
}

.container {
  width: auto;
  max-width: 100VH;
  padding: 0 15px;
  vertical-align: middle;
  }

p {

  font-family: 'Economica', sans-serif;
  font-size:18px;
  color:#000;

}

h1, h2 {
	font-family: 'Economica', sans-serif;
	color: #000;
	text-align: left;
}

.titulos {
	font-family: 'Economica', sans-serif;
	color: #000;
	text-align: left;
	font-size:48px;
}

.footer {
  background-color: transparent;
  font-family: 'Economica', sans-serif;
  font-size:10px;
  text-align:center;

  left: 0;
  bottom: 0;
  width: 100%;
  color:#FFF;
}

a {

  font-family: 'Economica', sans-serif;
  font-size:18px;
  color:#FFF;

}
a:hover {

  font-family: 'Economica', sans-serif;
  font-size:18px;
  color:#FFF;
  text-decoration:line-through;

}

a.contacto {

  font-family: 'Economica', sans-serif;
  font-size:18px;
  color:#000;
  text-decoration: underline;
  font-weight: bold;

}

.navbar{
  background-color: #000;
  font-family: 'Economica', sans-serif;
}

.imagenhome {
  background: url(images/home.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height:100vh;
  width:100%;  
}
	
.imagenbio {
	  /* Full height */
  height: 100vh; 

}

.imagencredits {
  background: url(images/credits-image_02.png) center repeat;
  display:block;
  margin-left:auto;
  margin-right:auto;
  background-repeat:repeat-y; 
  /* Full height */
  height: 100vh;

}



.imagenlisten {



}

.imagencontact {
 background: url(images/contact-image_03.png) no-repeat;
 background-position: left 350px top 50px;
 height:100vh;
  width:100%;  

  /* Full height */
  height: 100vh; 


}

  .fondo{  
  	position:relative;
	background-color:#FFF;
    width: 100%;
	height:100vh;
}

.c{
  margin-left:auto;
  margin-right:auto;
  position:relative;
  background:transparent;
  max-height:1845px;  /*height to show an exact number of spans  - in this case span is 45px (40 height plus 5 margin as margins collapse) and we are showing 5 spans to start */
  
  width:315px;
  height:1845px;
  overflow:hidden;
  overflow-y:auto;
}
.card-home{
  position:absolute;
  top:0;
  animation: scroll 60s linear 1s infinite;
}
span {
  font-family: 'Economica', sans-serif;
  min-width:290px;
  min-height:40px;
  display:block;
  color:white;
  margin:5px;
  background:transparent;
}
@keyframes scroll {
	100% { top: -1845px; }  /* top is the number of spans (in this case 8) multiplied by span height (45px as described above)*/
}

.form-control{
	background-color:#FFF;
	font-family: 'Economica', sans-serif;
	border-radius:0px;	
	border-color:#000;
	border-top:hidden;
	border-left:hidden;
	border-right:hidden;
	}
.boton_send {
	background-color:#000000;
	color:#FFF;
	font-family: 'Economica', sans-serif;
	border-radius:0px;
	float:right;
	
	}	
	
	.boton_send:hover {
	background-color:#FFF;
	color:#000;
	font-family: 'Economica', sans-serif;
	border-radius:0px;
	border-color:#000;
	
	}
.map {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
}