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

@import url(style-font.css);


/***********************
		-	BASICS 	-
***********************/




html {
	font-size: 100%;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	color: #333;
}
* {
	margin: 0;
	padding: 0;
	font-family: 'Avenir-Ultralight', sans-serif;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent; /* for remove highlight */
	-moz-tap-highlight-color: transparent;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: white;
}
video {
	width: 100%
}

/*'Petit Formal Script', cursive;*/
/***********************
		-	                             ramzen theme  
***********************/



.centerme {
	margin-left: auto;
	margin-right: auto;
}
img {
	width: 100%;
}

.tile-wave {
	background-image:url(../images/tilewave.jpg);
	background-repeat: repeat;
}
.dark-degra {
	background: rgb(0,0,0);
background: -moz-linear-gradient(top,  rgb(0,0,0) 0%, rgb(102,102,102) 100%);
background: -webkit-linear-gradient(top,  rgb(0,0,0) 0%,rgb(102,102,102) 100%);
background: linear-gradient(to bottom,  rgb(0,0,0) 0%,rgb(102,102,102) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#666666',GradientType=0 );

}
.full-degra {
	background: rgb(0,0,0);
background: -moz-linear-gradient(top,  rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background: -webkit-linear-gradient(top,  rgb(0,0,0) 0%,rgb(255,255,255) 100%);
background: linear-gradient(to bottom,  rgb(0,0,0) 0%,rgb(255,255,255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

}
.backlogo {
	background: white;
	}


/*******************************
	-	                                          Textos -
********************************/
h1 {
	font-size: 3rem;
	line-height: 3rem;
}
h2 {
	font-size: 2.5rem;
	line-height: 2.5rem;
}
h3 {
	font-size: 2.0rem;
	line-height: 2.0rem;
}
h4 {
	font-size: 1.5rem;
	line-height: 1.5rem;
}
h5 {
	font-size: 1.2rem;
	line-height: 1.2rem;
}
p {
	font-size: 1rem;
	line-height: 1.4rem;
	letter-spacing: 1px;
}

/******************************
	-	                                       HEADER -
******************************/
#marca {
	width:100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center; 
	
	
	/*background:rgba(220,11,14,1.00);*/
}


.leyenda {
	height: auto;
	text-transform: uppercase;
	letter-spacing: 8px;
}
header {
	
    z-index: 1;
	width: 90%;
	max-width: 500px;
	    background: white;
    border: 2px solid black;
		
}


.fadein {
	-webkit-animation-name: fadein; /* Safari 4.0 - 8.0 */
  	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	-webkit-animation-timing-function: ease-out;
	
  	animation-name: fadein;
  	animation-duration: 1s;
	animation-timing-function: ease-out;
	
}
.ani-dur-1 {
  	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  	animation-duration: 1s;	
}
.ani-dur-2 {
  	-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  	animation-duration: 2s;	
}
.ani-dur-4 {
  	-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  	animation-duration: 4s;	
}



@-webkit-keyframes fadein { 
	0% { 
		opacity:0;
		transform: translate(0px, 10px)
	} 
	75% { 
		opacity:1;
	} 
	100% { 
		transform: translate(0px, 0px);
	} 
}
@keyframes fadein { 
0% { 
		opacity:0;
		transform: translate(0px, 10px)
	} 
	75% { 
		opacity:1;
	} 
	100% { 
		transform: translate(0px, 0px);
	} 
}






/* Extra small devices (portrait phones, less than 576px)*/
/* No media query for `xs` since this is the default in Bootstrap*/

/* Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }*/

/* Large devices (desktops, 992px and up)*/
@media (max-width: 992px) {}

/* Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {
	
	header h3 { font-size: 1.2rem; }

}

/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {}