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

body {
	background-color: white;
	color: black;	
	font-family: 'Rubik', sans-serif;
	font-weight: 300;
	letter-spacing: 0.05vw;
/* responsive */
	margin: 15vh 0 0 0;
	font-size: 1.3vw;
	line-height: 1.5vw;
}

strong {
	font-weight: 500;
}

header {
	display: block;
	position: fixed;
	background-color: white;
	width: 100%;
	top: 0;
	left: 0;
/* responsive */
}

header .logo, .logo:hover {
/* responsive */
	width: auto;
	height: 4.5vw;
	margin: -0.5vw 0 0 -0.5vw;
}
header a.clear {
	background-color: white;
}

header .icoM {
/* responsive */
	display: none;
}

header .icoT {
/* responsive */
	display: none;
}

nav {
/* responsive */
	float: right;
	margin-top: 0.5vw;
}

nav a {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	color: #00274C;
/* responsive */	
	font-size: 85%;
	margin: 0.25vw;
	padding: 0.25vw;
}

nav a.selected {
	font-weight: 500;
/* responsive */
	border-bottom: solid 0.1vw #ff6713;
}

nav a:hover {
/* responsive */
	border-bottom: solid 0.1vw black;
	background-color: white;
	color: #ff6713;
}

nav img {
/* responsive */
	display: none;
}

.divbloque {
  height: 100px;
  width: 100px;
  position: sticky; /* Posicionamos el elemento con el valor sticky */
   /* Indicamos el umbral de desplazamiento con el cual el elemento pasará de comportarse 
   como position: relative a position: fixed, es decir, cuando el elemento tome el valor de
   top: 0 con respecto a la pantalla del navegador, este cambiará su comportamiento.*/
   top: 0; 
  }

.divbloque2 {  
 
  text-align: center;
  background-color: #FF6713;
  display:block;
  margin:auto; 
  	
  }

.divbloque3 {  
  height: 100px;
  width: 100px;	

  }  

.divbloquenaranja {
  background-color: #FF6713;
  }

 .divbloque4 { 
 
width: 100%;
height: 1000px;
text-align: center;
margin:0 auto;
background-color: #FF6713;
 
  }

.colocoimagen { 
	
	padding: 5px;
	margin: 3px 3px;  
   	display: inline-block; 	
  }


.full {
	background: no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
/* responsive */
	margin: auto 0 auto 0;
	min-height: 20vw;
}

.full h1 {
	color: black;
	font-weight: 500;
	text-align: center;
	margin-top: 2vw;
/* responsive */	
	font-size: 250%;
	line-height: 125%;	
}

.full .s4 {
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
/* responsive */
	display: inline-block;
	width: 12vw;
	margin: 1vw;	
}

.full .s4 img {
	display: block;
/* responsive */
	margin: 0.5vw 3vw 0.5vw 3vw;
	width: 6vw;
	height: auto;
}

.full .s4 .tag {
	display: block;
	color: white;
	font-weight: 400;
	padding: 0.5vw;
	border-radius: 0.25vw;
/* responsive */	
	font-size: 0.75vw;
}

.cyellow {
	background-color: orange;
	width: 100%;
}

.cred {
	background-color: red;
	width: 100%;
}

.corange {
	background-color: #FF6713;
	width: 100%;
}


main {
	overflow: auto;
	display: block;
/* responsive */	
	font-size: 85%;
	width: 60vw;
	margin: 0 20vw 0 20vw;
	padding: 2vw 0 2vw 0;
	min-height: 75vh;
}

main aside {
/* responsive */
	float: left;
	width: 17.5vw;
	min-height: 25vw;
	border-right: solid 0.1vw #ff6713;	
	font-size: 85%;
}

main aside a {
	text-decoration: none;
/* responsive */
	display: block;
	border-bottom: solid 0.1vw #ff6713;
	color: black;
	padding: 0.5vw;
}

main aside a.selected, a:hover {
	background-color: #ff6713;
	color: white;
}

main article {
	text-align: justify;
/* responsive */	
	float: right;
	width: 40vw;
}

main article a {
	color: #ff6713;
}

main article a:hover {
	background-color: white;
	color: #ff6713;
}

main article h1 {
	color: #ff6713;
	font-weight: 400;
/* responsive */
	font-size: 135%;
	line-height: 150%;
	margin: 2vw 0 2vw 0;
}

main article img {
/* responsive */
	width: 40vw;
	height: auto;
	margin-bottom: 1vw;
}

main article ul {
	list-style-position: outside;	
/* responsive */	
    padding: 0 1.25vw 0 1.25vw;
}

footer {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	display: block;
	background-color: black;
	width: 100%;
	color: white;
	font-size: 75%;
	line-height: 150%;
}

footer a {
	color: white;
}

.c {
	display: block;
/* responsive */
	width: 60vw;
	margin: 0 20vw 0 20vw;
	padding: 2vw 0 2vw 0;
}

.Map {
	border: none;
	display: block;
/* responsive */
	width: 40vw;
	height: 30vw;
}



@media only screen and (max-width: 767px) {
/* for cellphone: */
	
body {
/* responsive */
	margin: 15vw 0 0 0;
	font-size: 3.5vw;
	line-height: 5vw;
}

header .logo, .logo:hover {
/* responsive */
	width: auto;
	height: 12vw;
}

header .icoM {
/* responsive */
	display: block;
    content: url("../img/ico/ico_menu.svg");
	cursor: pointer;
	width: 8vw;
	height: auto;
	float: right;
	margin: 2vw 5vw 0 0;
}

header .icoT {
/* responsive */
    content: url("../img/ico/ico_close.svg");
	background-color: #FFFFFF;
	border-radius: 1vw;
}

nav {
/* responsive */
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	z-index: 100;
	visibility: hidden;
	font-size: 75%;
	border-top: none;
}

nav a {
/* responsive */	
	display: inline-block;
	margin: 0;
	padding: 0;
	background-color: #ff6713;
	border: none;
	color: white;
	width: 20vw;
	text-align: center;
}

nav a.selected {
/* responsive */
	background-color: #ff6713;
	border: none;
	font-weight: 400;
}

nav a:hover {
/* responsive */
	border: none;
	background-color: #ff6713;
	color: white;
}

nav img {
/* responsive */
	display: block;
	height: auto;
	width: 8vw;
	margin: 2.5vw auto 2.5vw auto;
}

.full {
/* responsive */
	margin: 0;
	min-height: 35vh;
}

.full h1 {
/* responsive */	
	font-size: 200%;
	line-height: 110%;
	margin-top: 10vw;
}

.full .s4 {
/* responsive */
	display: block;
	width: 50vw;
	margin: 5vw auto 5vw auto;
}

.full .s4 img {
/* responsive */
	margin: 0 auto 2vh auto;
	width: 24vw;
	height: auto;
}

.full .s4 .tag {
/* responsive */
	font-size: 2.75vw;
}	
	
main {
/* responsive */	
	font-size: 85%;
	width: 90vw;
	margin: 0 auto 0 auto;
	padding: 5vw 0 5vw 0;
	min-height: 75vh;
}

main aside {
/* responsive */
	width: 90vw;
	display: block;
	min-height: 0vw;
	border-right: none;
	border-bottom: solid 0.3vw #00274C;
	margin-top: 5vw;
}

main aside a {
/* responsive */
	display: inline-block;
	color: black;
	padding: 2vw;
	border-bottom: none;
}

main article {
/* responsive */	
	padding-top: 5vw;
	display: block;
	width: 90vw;
}

main article h1 {
/* responsive */
	font-size: 135%;
	line-height: 150%;
	margin: 2vw 0 2vw 0;
}

main article img {
/* responsive */
	display: block;
	width: 90vw;
	height: auto;
	margin-bottom: 5vw;
}

main article ul {
/* responsive */	
    padding: 0 5vw 0 5vw;
}

.c {
/* responsive */
	width: 90vw;
	margin: 0 auto 0 auto;
	padding: 5vw 0 5vw 0;
}

.Map {
/* responsive */
	width: 90vw;
	height: 50vw;
}

.divbloque4 { 
 /*reponsive */

width: 100%;
height: 2500px;
text-align: center;
margin:0 auto;
background-color: #FF6713;
 
  }


}	

#effect-hover .imgen {
    width: 100%;
    height: auto;
    background-size: cover;
    margin: 20px auto;
    position: relative;
}

#effect-hover #efecto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
  background-color: rgba(166, 255, 77, 0.8);
  opacity: 0;
  transition: opacity 2s;
}

#effect-hover .imgen:hover #efecto {
  opacity: 1;
}

#effect-hover h2 {
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  font-size: 25px;
  transition-duration: 2s;
  margin: 0px;
}

#effect-hover .imgen:hover h2 {
  top: 50px;
}

#effect-hover p {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 25px;
  transition-duration: 2s;
  margin: 0px;
}

#effect-hover .imgen:hover p {
  bottom: 50px;
}

.caja_txt {
	width: 300px;
   border-radius: 5px;
   background-color: #36ed7b;
   font-family: arial;
   color: #5d5f5e;
 }

 .btn {
 	color: #FF6713; 	
 	border: 2px solid #FF6713;
 	border-radius: 6px;
 	
      color: #FF6713;
      padding: 16px 32px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
      text-decoration: none;
      text-transform: uppercase;
}



.btn:hover {
      background-color: #FF6713;
      color: white;
 }