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

/* For desktop, laptop: */

body {
	margin:0;
	padding:0;
}

.projects-color {
	background-color:#ffffff;
}

.info-color {
	background-color:#771322;
}

.contact-color {
	background-color:#dba0f9;
}

/* Estilos de enlaces */

a:link, a:visited{
	color:#000;
	text-decoration:none;
}

a:hover{
	color:#969696;
	text-decoration:none;
}

.info-color a:link, .info-color a:visited{
	color:#a9dcf4;
	text-decoration:none;
}

.info-color a:hover{
	color:#6a9eb2;
	text-decoration:none;
}

.contact-color a:link, .contact-color a:visited{
	color:#ff0013;
	text-decoration:none;
}

.contact-color a:hover{
	color:#c1212d;
	text-decoration:none;
}


/* Estilo cabecera*/

header {
	margin:0;
	padding: 30px 4%;
	width:92%;
	height:80px;
	position:fixed;
	background-color:inherit;
}

div#tope{
	height:160px;
	width:100%;
	}
	
div#logo {
	margin: 0;
	padding:0;
    width:33.33%;
	height:80px;
	float:left;
}

div#logo a{
    margin:0;
	padding:0;
    font-size:2em;
    font-family: 'Merriweather Sans', sans-serif;
}

nav {
 	margin:0;
	padding:0;
    width:66.66%;
	height:40px;
    font-family: 'Merriweather Sans', sans-serif;
	float:right;
}

nav a {
    margin:0 0 0 25px;
    padding: 0;
    float: right;
    text-align: right;
    font-size: 2em;
}

.topnav {
    display: none;
}

/* Estilo columnas */

section#columnas {
	margin: 0;
	padding:0 2% 2% 2%;
	width:96%;
	overflow:auto;
}

section#columnas div{
	margin:2%;
	padding:0;
	width:46%;
    float:left;
}

section#columnas div img{
	margin:0 0 25px 0;
	padding:0;
	width:100%;
}

section#columnas div a{
	margin: 0;
	padding: 0;
	width:100%;
	font-family: 'Merriweather Sans', sans-serif;
	font-size:2em;
}

section#columnas div p{
	margin: 0;
	padding: 0;
	font-family: 'Merriweather Sans', sans-serif;
	font-size:1.5em;
}

/* Primeras imagenes columnas sin margin-top */

section#columnas div.no-margin-top {
	margin-top:0;
}

section#columnas div.no-margin-top-2 {
	margin-top:0;
}

/* Estilo imagen pequeña */

section.small-image {
	margin: 0;
	padding: 2% 2% 0 2%;
	width:96%;
	overflow:auto;
}

section.small-image img{
	margin:0;
	padding: 2% 2% 0 2%;
	width:46%;
	float:left;
}

/* Estilo imagen grande */

section.large-image {
	margin: 0;
	padding: 4% 4% 0 4%;
	width:92%;
}

section.large-image img{
	margin:0;
	padding:0;
	width:100%;
}

/* Primera imagen sin padding-top */

.no-padding-top {
	padding-top: 0 !important;
}

/* Estilo video */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Estilo texto */

section.texto {
	margin: 0;
	padding: 30px 4%;
	width: 92%;
}

section.texto p, h1{
    font-family: 'Merriweather Sans', sans-serif;
	font-size:2em;
	font-weight:300;
}

.info-color section.texto p,.info-color section.texto h1{
    color:#a9dcf4;
}

.contact-color section.texto p,.contact-color section.texto h1{
    color:#ff0013;
}

/* Estilo footer*/

footer {
	margin: 0;
	padding: 30px 4%;
	width:92%;
}

footer p{
	font-family: 'Merriweather Sans', sans-serif;
	font-size:1em;
}

.info-color footer p{
    color:#a9dcf4;
}

.contact-color footer p{
    color:#ff0013;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
body {
  -ms-overflow-style: none;
}


@media only screen and (min-width: 481px) and (max-width: 875px) {
    /* For tablet, ipad */

/* Estilo cabecera tablet, ipad */


header {
	display: none;
}

div#tope {
	display:none;
}

/* Menu tablet, ipad */

.topnav {
    display: block;
	overflow: hidden;
    position: relative;
}

.topnav #myLinks {
  display: none;
  text-align: right;
}

.topnav #myLinks a {
  padding: 2% 4% !important;
}

.topnav a {
  color:#000;
  padding: 4%;
  text-decoration: none;
  font-size: 1.5em;
  font-family: 'Merriweather Sans', sans-serif;
  display: block;
}

.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  color:#969696;
}

.contact-color a:hover {
  color:#c1212d !important;
}

.info-color a:hover {
  color:#6a9eb2 !important;
}

/* Estilo columnas tablet, ipad */	

section#columnas {
	padding: 0 2% 2% 2%;
	width:96%;
}

section#columnas div{
	margin: 2%;
	width: 96%;
}

section#columnas div img{
	margin: 0 0 20px 0;
}

section#columnas div a{
	font-size:1.5em;
}
	
section#columnas div p{
	font-size:1em;
}

/* Segunda imagen columnas con margin-top */

section#columnas div.no-margin-top-2 {
	margin-top: 2% !important;
}

/* Estilo imagen pequeña tablet, ipad */

section.small-image {
	margin: 0;
	padding: 4% 4% 0 4%;
	width:92%;
	overflow:auto;
}

section.small-image img{
	margin:0;
	padding: 0 0 4% 0;
	width:100%;
	float:left;
}

section.small-image .no-phone {
	display:none;
}

/* Estilo imagen grande tablet, ipad */

section.large-image {
	padding: 4% 4% 0 4%;
	width:92%;
}

/* Estilo texto tablet, ipad */

section.texto {
	padding: 20px 4%;
	width:92%;
}

section.texto p, h1{
	font-size:1.2em;
}

/* Estilo footer tablet, ipad */

footer {
	padding: 20px 4%;
	width:92%;
}
	
}

	
@media only screen and (max-width: 480px) {
    /* For mobile phones: */

/* Estilo cabecera movil */
	
header {
	display: none;
}

div#tope {
	display:none;
}

/* Menu movil */

.topnav {
    display: block;
	overflow: hidden;
    position: relative;
}

.topnav #myLinks {
  display: none;
  text-align: right;
}

.topnav #myLinks a {
  padding: 10px 8% !important;
}

.topnav a {
  color:#000;
  padding: 8%;
  text-decoration: none;
  font-size: 1.5em;
  font-family: 'Merriweather Sans', sans-serif;
  display: block;
}

.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  color:#969696;
}

.contact-color a:hover {
  color:#c1212d !important;
}

.info-color a:hover {
  color:#6a9eb2 !important;
}

/* Estilo columnas movil */	

section#columnas {
	padding: 0 4% 4% 4%;
	width:92%;
}

section#columnas div{
	margin:4%;
	width:92%;
}

section#columnas div img{
	margin: 0 0 10px 0;
}

section#columnas div a{
	font-size:1.5em;
}
	
section#columnas div p{
	font-size:1em;
}

/* Segunda imagen columnas con margin-top */

section#columnas div.no-margin-top-2 {
	margin-top: 4% !important;
}

/* Estilo imagen pequeña movil */

section.small-image {
	margin: 0;
	padding: 8% 8% 0 8%;
	width:84%;
	overflow:auto;
}

section.small-image img{
	margin:0;
	padding: 0 0 8% 0;
	width:100%;
	float:left;
}

section.small-image .no-phone {
	display:none;
}

/* Estilo imagen grande movil */

section.large-image {
	padding: 8% 8% 0 8%;
	width:84%;
}

/* Estilo texto movil */

section.texto {
	padding: 10px 8%;
	width:84%;
}

section.texto p, h1{
	font-size:1.2em;
}

/* Estilo footer movil */

footer {
	padding: 10px 8%;
	width:84%;
}

}