@charset "utf-8";

* {
	margin: 0;
	padding:0;
	-webkit-box-sizing:border-box;
    -moz-box-sizing:   border-box;
    box-sizing:        border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding: 150px 0 0;
	--negro: #606060;
	--negro2: #000000;
	--marino: #2B2B2B;
	--negroRGB: 0,0,0;
	--blanco: #FFFFFF;
	--gris: #EFEFEF;
	--gris2: #D1D1D1;
	--rojo: #C82026;
	--azul: #289999;
	--rojoRGB: 200,32,38;
	--amarillo: #EFB511;
}

body {
	font-family: 'Gotham';
	font-weight: lighter;
	color: var(--negro);
	background: var(--blanco);
	line-height:1.5;
	overflow-x:hidden !important;
}

h1, h2 {
	line-height:1;
	font-family: 'Gotham Black';
	font-weight: normal;
	margin: 0 auto;
}
h3 {
	font-weight: normal;
}
a {
	font-size: 0.9em;
    text-decoration:none;
	color: var(--negro);
	cursor: pointer;
}
a:active {
	outline: none;
    border: none;
}
button {
	font-family: 'Poppins';
	font-size: 1.2em;
	border-radius: 0 !important;
	cursor: pointer !important;
	border: none;
	transition: all 0.6s ease-in-out;
}
button:active {
    outline: none;
    border: none;
}
button:hover {
	cursor:pointer;
}
button:focus,
input:focus,
textarea:focus {
	outline:none;
}
p, ul {
	font-size:1em;
}

h1 {
	font-size: 4.2em;
}

img {
	align-self: center;
}

input,
select,
textarea {
	font-family: 'Gotham';
}

/* --------------------------- body --------------------------- */

header {
	width: 100vw;
	position: fixed;
	top: 0;
	background: none;
	padding: 24px 0;
	opacity: 1;
	transition: all 0.6s ease-in-out;
	z-index: 999;
}
header::after {
	content: '';
	width: 100%;
	height:100%;
	background: var(--negro);
	position: absolute;
	top: 0;
	left:0;
	opacity: 0.9;
	background-blend-mode: multiply;
	z-index: -1;
}
header .inter {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
header .inter div img {
	width: auto;
	height: 60px;
	transition: all 0.6s ease-in-out;
}
header .inter div:last-child {
	padding: 0 0 6px;
}
header .inter div a {
	font-size: 0.7em;
	color: var(--blanco);
	text-transform: uppercase;
	margin: 0 21px 0 0;
	position: relative;
	opacity: 0.9;
}
header .inter div a.btn-menu {
	display: none;
}
header .inter div:last-child a.active {
	opacity: 1;
}
header .inter div:last-child a::after {
	content: '';
	width: 0;
	height: 2px;
	background: var(--rojo);
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	transition: all 0.6s ease-in-out;
}
header .inter div:last-child a:hover::after,
header .inter div:last-child a.active::after {
	width: 100%;
}
header .inter div a:last-child {
	margin: 0;
}
header .inter div a:last-child::after {
	display: none;
}
header .inter div a button {
	color: var(--blanco);
	background: none;
	padding: 4px 18px;
	border: solid var(--blanco) 1px;
	border-radius: 50px !important;
}
header .inter div a button:hover {
	background: var(--blanco);
	color: var(--negro);
}
/* active */
header.active {
	padding: 15px 0;
}
header.active .inter div img {
	height: 48px;
}

/* nav */
#openmenu {
	width: 100vw;
	height:100vh;
	position: fixed;
	top: 0;
	left:102%;
	background: var(--gris);
	transition: all 0.9s ease-in-out;
	z-index: 69;
}
#openmenu.active {
	left: 0;
}
#openmenu .inter {
	width: 100%;
	max-width: 1200px;
	position: absolute;
	top: 58%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
	z-index: 3;
}
#openmenu .inter div:first-child a {
	font-family: 'Gotham Black';
	font-size: 1.5em;
	display: block;
	position: relative;
	margin: 0 0 9px;
}
#openmenu .inter div:first-child a:after {
	content: '';
	width: 0;
	height:2px;
	background: var(--rojo);
	position: absolute;
	left: 50%;
	bottom:-3px;
	transform: translateX(-50%);
	transition: all 0.6s ease-in-out;
}
#openmenu .inter div:first-child a:hover:after,
#openmenu .inter div:first-child a.active:after {
	width: 120px;
}
#openmenu .inter div:last-child {
	margin: 30px 0 0;
}
#openmenu .inter div:last-child a {
	display: inline-block;
	margin: 0 9px;
}
#openmenu .inter div:last-child a button {
	color: var(--azul);
	background: none;
}

/* cortina */
#cortina {
	width: 100vw;
	height:100vh;
	position: fixed;
	top: 0;
	left:0;
	background: var(--negro);
	animation: gone 0.9s;
	opacity: 0;
	pointer-events: none !important;
	z-index: 666;
}
@-webkit-keyframes gone {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-moz-keyframes gone {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes gone {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.wrapper {
	width: calc(100% - 60px);
    /*height: 100%;*/
	text-align: center;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
	padding:90px 0 0;
}
.wrapper-inner {
  max-width: 1200px;
  margin: 0 auto;
}

h1 span, p span, li span {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
h1 span > span, p span > span, li span > span {
  display: block;
  animation: slideUp 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
  transform: translate3d(0, 100%, 0);
}

img.total {
	width: 100%;
	transition-delay: 1.2s !important;
}

/* slide */
#slider {
	width: 100%;
	position: relative;
	margin: 0 auto;
	border-bottom: solid 6px var(--rojo);
	background: var(--negro);
}
#slider .owl-carousel {
	width: 100%;
	max-width: 100vw;
	height:auto;
	margin: 0;
	overflow: hidden;
	position:relative;
	display:block;
}
#owl {
	animation-duration: 1.2s;
}
.owl-carousel div {
	float:left;
}
.owl-carousel .item {
	width: 100%;
	position: relative;
}
.owl-carousel div img.imagen {
	width: 100%;
	margin: -6px 0;
	animation-duration: 0.9s;
	animation-delay: 0.9s;
}
.owl-carousel .box {
	width: calc(100% - 60px);
	max-width: 1200px;
	height: 100vh;
	padding: 180px 0 42px 60px;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	color: var(--blanco);
	z-index:9;
}
.owl-carousel .box .descripcion {
	width: calc(50% - 60px);
	background: none;
}
.owl-carousel .box .descripcion h1 {
	margin: 0 0 30px;
}
.owl-carousel .box .descripcion button {
	font-size: 1em;
	color: var(--blanco);
	background: var(--rojo);
	margin: 60px 0 0;
	padding:6px 30px;
	border-radius: 50px !important;
}
.owl-carousel .box .descripcion button:hover {
	background: var(--blanco);
	color: var(--negro);
}

.owl-carousel .box .caja {
	width: 37.5%;
	position: absolute;
	left:  62.5%;
	bottom:18px;
	display: flex;
	align-items: center;
}
.owl-carousel .box .caja .num {
	font-family: 'Poppins Bold';
	font-size: 2.4em;
	padding: 0 30px;
}
.owl-carousel .box .caja div p:last-child {
	font-size: 0.9em;
}

.porta-nav {
	width: calc(100% - 60px);
	max-width: 1200px;
	position: absolute;
	left: 50%;
	bottom:42px;
	transform: translateX(-50%);
	padding: 0 0 0 50%;
	z-index: 12;
}
.porta-nav::after {
	content: '';
	width: 6px;
	height:100%;
	position: absolute;
	top:  0;
	left: calc(62.5% - 6px);
	background: var(--rojo);
	opacity: 0.7;
}
.prev,
.next {	
	font-size: 2.4vw;
	cursor: pointer;
	opacity: 0.5;
	color: var(--blanco);
	display: inline-block;
	margin: 0 21px 0 0;
	z-index: 9;
}
.prev:hover,
.next:hover {
	opacity: 1;
}
/* */
.custom-control {
	width: calc(100% - 60px);
	max-width: 1200px;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	pointer-events: none;
	z-index:9;
}
.custom-control button {
	width: 18px !important;
	height:18px !important;
	margin: 15px 0;
	padding:0;
	background: none;
	display: block;
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
	transition: all ease-in-out 0.3s;
	border: none;
	position: relative;
	pointer-events: all;
}
.custom-control button::before {
	content: '';
	width: 8px;
	height:8px;
	background: var(--blanco);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	transition: all ease-in-out 0.3s;
	opacity: 0;
	z-index: 3;
}
.custom-control button::after {
	content: '';
	width: 18px;
	height:18px;
	background: var(--gris2);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	opacity: 0.3;
	z-index: 3;
}
.custom-control button:hover::before,
.custom-control button.active::before {
	opacity: 1;
}
.custom-control button:hover::after,
.custom-control button.active::after {
	width: 22px;
	height:22px;
}

.texto-gris {
	width: 100%;
	background: var(--gris);
	margin: 0;
	padding: 60px 0;
}
.texto-gris .inter {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 0 auto;
}
.texto-gris .inter .box {
	display: inline-block;
	animation-duration: 1.2s;
	animation-delay: 0.6s;
}
.texto-gris .inter .box:nth-child(1) {
	width: 62.5%;
}
.texto-gris .inter .box:nth-child(2) {
	font-family: 'Anko';
	width: 36%;
	padding: 0 30px;
	text-align: center;
}
.texto-gris .inter .box:nth-child(2) h3 {
	color: var(--rojo);
}
.texto-gris .inter .box h2 {
	color: var(--azul);
	margin: 0 0 18px;
}
.texto-gris .inter .box:nth-child(3) {
	width: 100%;
	margin: 45px 0 0;
}

#barra-contacto {
	padding: 140px 0 42px;
}
#barra-contacto .inter .box:nth-child(2) h3 {
	margin: 15px auto;
}
#barra-contacto .inter .box:nth-child(2) h3 a {
	color: var(--rojo);
}
#barra-contacto .inter button {
	font-size: 1em;
	color: var(--blanco);
	background: var(--rojo);
	margin: 15px 0 0;
	padding:6px 30px;
	border-radius: 50px !important;
}

.barra-gris {
	width: 100%;
	background: var(--gris);
	margin: 0;
	padding: 180px 0 0;
	position: relative;
}
.barra-gris .inter {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 0 auto;
}
.barra-gris .inter .box {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.barra-gris .inter .box h1 {
	width: 300px;
	margin: 0 0 24px;
	color: var(--blanco);
	text-shadow: 3px 3px 3px var(--negro);
}

#tiempo {
	width: 100%;
	position: relative;
}
#tiempo::after {
	content: '';
	width: 100vw;
	height:60px;
	background: var(--gris2);
	position: absolute;
	left: 0;
	bottom:-60px;
	z-index: -1;
}
#tiempo .linea {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 0 auto;
}
#tiempo .especial {
	margin: -90vh auto 60px;
}
#tiempo .linea .box {
	width: 100%;
	margin: 45px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	animation-duration: 1.2s;
}
#tiempo .linea .box div {
	width: 50%;
	position: relative;
}
#tiempo .linea .box .imagen {
	position: relative;
	text-align: right;
}
#tiempo .linea .box .imagen::after {
	content: '';
	width: 60%;
	height:0;
	padding: 0 0 60%;
	border: solid 1px var(--negro);
	position: absolute;
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
	top: -10px;
	right:39px;
	pointer-events: none;
}
#tiempo .linea .box .imagen img {
	width: calc(60% - 18px);
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
	margin: 0 48px;
}
#tiempo .linea .box .texto {
	padding:0 60px 0 0;
}
#tiempo .linea .box .texto h2 {
	font-family: 'Bebas';
	font-size: 2.4em;
	color: var(--azul);
}
#tiempo .linea .box .texto h3 {
	font-family: 'Anko';
	margin: 9px 0;
	position: relative;
}
#tiempo .linea .box .texto h3::after,
#tiempo .linea .box .texto h3::before {
	content: '';
	width: 9px;
	height:9px;
	position: absolute;
	top: 8px;
	background: var(--rojo);
	-webkit-border-radius: 50%;
	border-radius: 50%;
	z-index: 3;
}
#tiempo .linea .box .texto h3::after {
	left:-15px;
}
#tiempo .linea .box .texto h3::before {
	right:-15px;
	display: none;
}
/* second */
#tiempo .linea .box:nth-child(2n) .imagen {
	text-align: left;
	order: 2;
}
#tiempo .linea .box:nth-child(2n) .imagen::after {
	right:0;
	left: 38px;
}
#tiempo .linea .box:nth-child(2n) .texto {
	padding:0 0 0 60px;
	text-align: right;
}
#tiempo .linea .box:nth-child(2n) .texto h3::after {
	display: none;
}
#tiempo .linea .box:nth-child(2n) .texto h3::before {
	display: block;
}

#tiempo .linea .cole .imagen:hover::after {
	border-color: var(--azul);
}
#tiempo .linea .box button {
	font-size: 1em;
	color: var(--blanco);
	background: var(--rojo);
	margin: 15px 0 0;
	padding:6px 30px;
	border-radius: 50px !important;
}
#tiempo .linea .box .porta-stars {
	width: 100%;
	display: flex;
}
#tiempo .linea .box .porta-stars span {
	font-size: 1.8em;
	color: var(--negro);
	animation-duration: 1.8s;
}
#tiempo .linea .box .porta-stars span:nth-child(1) {
	animation-delay: 0.6s;
}
#tiempo .linea .box .porta-stars span:nth-child(2) {
	animation-delay: 0.9s;
}
#tiempo .linea .box .porta-stars span:nth-child(3) {
	animation-delay: 1.2s;
}
#tiempo .linea .box .porta-stars span:nth-child(4) {
	animation-delay: 1.5s;
}
#tiempo .linea .box .porta-stars span:nth-child(5) {
	animation-delay: 1.8s;
}
#tiempo .linea .box:nth-child(2n) .porta-stars {
	flex-direction: row-reverse;
}
#tiempo .linea .box .porta-stars span.win {
	color: var(--amarillo);
}
#tiempo .linea .box .porta-sellos {
	width: 100%;
	display: flex;
	margin: 15px 0;
	overflow: hidden;
}
#tiempo .linea .box .porta-sellos span {
	font-size: 1.8em;
	color: var(--azul);
	margin: 0 15px 0 0;
	animation-delay: 1.5s;
	animation-duration: 1.2s;
}
#tiempo .linea .box:nth-child(2n) .porta-sellos {
	justify-content: flex-end;
}
#tiempo .linea .box:nth-child(2n) .porta-sellos span:last-child {
	margin: 0;
}

#piramide {
	width: 100vw;
	height:100vh;
	background: var(--gris2);
	clip-path: polygon(0 0,0% 100%,100% 100%);
	position: sticky;
	top: 0;
	z-index: -1;
}

.porta-form {
	width: 100%;
	position: relative;
	background: var(--negro);
	color: var(--blanco);
	overflow: hidden;
}
.porta-form img {
	width: 100%;
	position: absolute;
	z-index: 1;
}
.porta-form .box {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 90px 0;
	display: flex;
	justify-content: flex-end;
}
.porta-form .box .tit {
	padding: 30px 30px 15px;
	background: none;
	top: 0;
}
.porta-form .box form {
	width: 37.5%;
	background: rgba(var(--negroRGB),0.7);
	text-align: left;
	animation-duration: 1.2s;
	z-index: 3;
}
.porta-form .box form p.alerta {
	color: var(--rojo);
	margin: -6px 30px 6px;
	animation-delay: 0.9s;
}
.porta-form .box form label {
	font-size: 0.7em;
	display: block;
	padding: 6px 30px;
	text-transform: uppercase;
}
.porta-form .box form input,
.porta-form .box form textarea {
	width: calc(100% - 60px);
	padding: 9px;
	margin: 0 30px 18px;
	background: var(--negro);
	color: var(--blanco);
	border: solid 1px transparent;
	transition: all 0.3s ease-in-out;
}
.porta-form .box form input:focus,
.porta-form .box form textarea:focus {
	border-color: var(--blanco);
}
.porta-form .box form textarea {
	min-height: 90px;
	resize: none;
}
.porta-form .box form button {
	font-size: 0.9em;
	color: var(--blanco);
	background: var(--azul);
	margin: 0 30px 24px;
	padding:6px 30px;
	border-radius: 50px !important;
	float: right;
}
.porta-form .box form button:hover {
	background: var(--blanco);
	color: var(--negro);
}
.porta-form .box form button:hover {
	color: var(--negro);
}
.porta-form .box form button.btn::after {
	width: 0;
	height:100%;
}
.porta-form .box form button.btn:hover::after {
	width: 100%;
}

#top {
	width: 100%;
	padding: 60px 0;
	text-align: center;
	background: var(--marino);
	overflow: hidden;
	z-index: 6;
}
#top p {
	width: 100%;
	color: var(--azul);
	text-transform: uppercase;
	position: relative;
}
#top p::after {
	content: '';
	width: 90px;
	height:1px;
	background: var(--blanco);
	position: absolute;
	left: 50%;
	bottom:-3px;
	transform: translateX(-50%);
}

.ranking {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 45px auto 0;
	display: flex;
}
.ranking .elemento {
	width: 20%;
	position: relative;
	text-align: center;
	animation-duration: 1.5s;
}
.ranking .elemento:nth-child(1) {
	animation-delay: 0.3s;
}
.ranking .elemento:nth-child(2) {
	animation-delay: 0.9s;
}
.ranking .elemento:nth-child(3) {
	animation-delay: 1.5s;
}
.ranking .elemento:nth-child(4) {
	animation-delay: 2.1s;
}
.ranking .elemento:nth-child(5) {
	animation-delay: 2.7s;
}
.ranking .elemento .imagen {
	width: calc(60% - 12px);
	margin: 0 auto;
}
.ranking .elemento .imagen::after {
	content: '';
	width: 60%;
	height:0;
	padding:0 0 60%;
	position: absolute;
	left: 50%;
	transform: translate(-50%,-8px);
	border: solid 2px var(--blanco);
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
	opacity: 0.7;
	transition: all 0.3s ease-in-out;
	z-index: 3;
}
.ranking .elemento:hover .imagen::after {
	opacity: 1;
}
.ranking .elemento .imagen img {
	width: 100%;
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
}
.ranking .elemento div:last-child {
	position: absolute;
	padding:6px 30px;
	color: var(--blanco);
	background: var(--azul);
	transition: all 0.6s ease-in-out;
	left: 50%;
	bottom:60px;
	transform: translate(-50%,0);
	opacity: 0;
	z-index: 9;
}
.ranking .elemento:hover div:last-child {
	transform: translate(-50%,69px);
	opacity: 1;
}

.consejo {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 45px auto 0;
	display: flex;
	flex-wrap: wrap;
}
.consejo .elemento {
	width: 25%;
	position: relative;
	text-align: center;
	animation-duration: 1.5s;
	margin: 0 0 15px;
	padding:0 48px;
}
.consejo .elemento::after {
	content: '';
	width: 6px;
	height:100%;
	background: var(--rojo);
	position: absolute;
	top: 0;
	left:-3px;
	opacity: 0.3;
	z-index: 3;
}
.consejo .elemento:first-child::after {
	display: none;
}
.consejo .elemento span {
	color: var(--blanco);
}
.consejo .elemento span.icon {
	font-size: 2.4em;
}
.consejo .elemento span.rango {
	color: var(--rojo);
	text-transform: uppercase;
	display: block;
}
.consejo .elemento small {
	display: block;
	color: var(--gris2);
	margin: 15px auto 0;
}
.consejo .elemento:nth-child(1n) {
	animation-delay: 0.3s;
}
.consejo .elemento:nth-child(2n) {
	animation-delay: 0.9s;
}
.consejo .elemento:nth-child(3n) {
	animation-delay: 1.5s;
}
.consejo .elemento:nth-child(4n) {
	animation-delay: 2.1s;
}
/*.consejo .elemento:nth-child(5n) {
	animation-delay: 2.7s;
}
.consejo .elemento:nth-child(6n) {
	animation-delay: 3.3s;
}*/

#servicios {
	width: calc(100% - 60px);
	max-width: 1200px;
	text-align: center;
	margin: -90vh auto 60px;
	animation-delay: 1.2s;
}
#servicios button {
	font-size: 0.9em;
	color: var(--azul);
	background: var(--blanco);
	margin: 0 12px 12px;
	padding:6px 30px;
	border-radius: 50px !important;
	border: solid 1px var(--azul);
	opacity: 0.6;
}
#servicios button.selected {
	opacity: 1;
	color: var(--blanco);
	background: var(--azul);
}
#servicios button:hover {
	opacity: 1;
}

.indice {
	width: 100%;
	text-align: center;
	margin: 48px 0;
}
.indice button {
	font-size: 1.3em;
	background: none;
	margin: 0 12px;
	opacity: 0.5;
}
.indice button.selected {
	color: var(--azul);
	opacity: 1;
}
.indice button:hover {
	opacity: 1;
}

.porta-servicios a {
	color: var(--marino);
	margin: 0 9px 6px 0;
	opacity: 0.6;
}
.porta-servicios a:hover {
	opacity: 1;
}

#formulario {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 30px auto;
}
#formulario p.alerta {
	color: var(--rojo);
	animation-delay: 1.2s;
}
#formulario .datos {
	width: 100%;
	margin: 0 0 30px;;
	display: flex;
	flex-wrap: wrap;
}
#formulario .datos h2 {
	width: 100%;
	margin: 12px 0;
}
#formulario .datos .cajas {
	display: flex;
	border: solid var(--gris2) 1px;
}
#formulario .datos .cajas div {
	margin: 6px;
}
#formulario .datos .cajas div label,
#formulario .datos .cajas div input,
#formulario .datos .cajas div select {
	width: 100%;
	background: none;
}
#formulario .datos .cajas div label {
	font-size: 0.9em;
	color: var(--azul);
	padding: 3px 0 6px 3px;
}
#formulario .datos .cajas div input,
#formulario .datos .cajas div select {
	font-size: 1.2em;
	border: none;
	padding: 0 0 3px 3px;
	opacity: 0.8;
	transition: all 0.6s ease-in-out;
}
#formulario .datos .cajas div input:active,
#formulario .datos .cajas div select:active {
	opacity: 1
}
#formulario .datos .line1 {
	width: 25%;
}
#formulario .datos .line2 {
	width: 50%;
}
#formulario .datos .line3 {
	width: 75%;
}
#formulario .datos .line4 {
	width: 100%;
}
#formulario .datos .cont1 div {
	width: 100%;
}
#formulario .datos .cont2 div {
	width: 50%;
}
#formulario .datos .cont3 div {
	width: 33.3%;
}
.porta-enviar {
	width: 100%;
	text-align: right;
}
.porta-enviar button {
	padding: 6px 30px;
	color: var(--blanco);
	background: var(--azul);
}

.porta-servis {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	border: solid 1px var(--gris2);
}
.porta-servis .box {
	width: 25%;
	padding: 9px 12px 12px;
}
.porta-servis .grande {
	width: 100%;
	padding: 9px 12px;
}
.porta-servis .grande label {
	font-size: 0.9em;
	color: var(--azul);
}

.colegiado {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 150px auto 0;
	display: flex;
}
.colegiado .barra-info {
	width: 31%;
}
.colegiado .barra-info .logo {
	width: 100%;
	position: relative;
}
.colegiado .barra-info .logo::after {
	content: '';
	width: 100%;
	height: 0;
	padding: 0 0 100%;
	border: solid var(--negro) 1px;
	position: absolute;
	top: 0;
	left:0;
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
	pointer-events: none;
}
.colegiado .barra-info .logo:hover::after {
	border-color: var(--azul);
}
.colegiado .barra-info .logo img {
	width: calc(100% - 30px);
	margin: 16px;
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
	transition: all 0.3s ease-in-out;
}
.colegiado .barra-info .logo:hover img {
	opacity: 0.8;
}
.colegiado .barra-info .info {
	border-left: solid var(--negro) 1px;
	padding: 30px;
}
.colegiado .barra-info .info h1 {
	font-size: 1.8em;
	color: var(--azul);
}
.colegiado .barra-info .info .calif {
	width: 100%;
	padding:15px 0;
}
.colegiado .barra-info .info .calif star {
	font-size: 1.5em;
	animation-duration: 1.8em;
}
.colegiado .barra-info .info .calif star:nth-child(1) {
	animation-delay: 0.6s;
}
.colegiado .barra-info .info .calif star:nth-child(2) {
	animation-delay: 0.9s;
}
.colegiado .barra-info .info .calif star:nth-child(3) {
	animation-delay: 1.2s;
}
.colegiado .barra-info .info .calif star:nth-child(4) {
	animation-delay: 1.5s;
}
.colegiado .barra-info .info .calif star:nth-child(5) {
	animation-delay: 1.8s;
}
.colegiado .barra-info .info .calif star.win {
	color: var(--amarillo);
}
.colegiado .barra-info .info button {
	font-size: 1em;
	color: var(--blanco);
	background: var(--rojo);
	margin: 15px 0 0;
	padding:6px 30px;
	border-radius: 50px !important;
}
.colegiado .barra-info .info .box {
	margin: 30px 0;
}
.colegiado .barra-info .info .box p span {
	color: var(--azul);
	margin: 0 15px 0 0;
}
.colegiado .barra-info .info .redes button {
	width: 45px;
	height:45px;
	margin: 0 12px 0 0;
	padding:0;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	position: relative;
	background: var(--azul);
}
.colegiado .barra-info .info .redes button span {
	font-size: 1.2em;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
}
.colegiado .barra-info .info form {
	width: 100%;
	margin: 30px 0;
	padding:30px 0;
	background: var(--gris);
	position: relative;
	animation-duration: 1.2s;
	z-index: 3;
}
.colegiado .barra-info .info form::after {
	content: '';
	width: calc(100% + 90px);
	height:100%;
	background: var(--gris);
	position: absolute;
	top: 0;
	left:-30px;
	z-index: -1;
}
.colegiado .barra-info .info form h2 {
	margin: 0 0 24px;
}
.colegiado .barra-info .info form p.alerta {
	color: var(--rojo);
	margin: 0 0 12px;
	animation-delay: 1.2s;
}
.colegiado .barra-info .info form label,
.colegiado .barra-info .info form input,
.colegiado .barra-info .info form textarea {
	width: 100%;
}
.colegiado .barra-info .info form input,
.colegiado .barra-info .info form textarea {
	width: calc(100% + 30px);
	padding: 12px;
	border: none;
	margin: 3px 0 12px;
}
.colegiado .barra-info .info form textarea {
	min-height: 60px;
	resize: none;
}
.colegiado .barra-info .info form button {
	background: var(--azul);
}

.colegiado .barra-texto {
	width: 69%;
	margin: 0 0 0 30px;
	padding:30px 0 30px 30px;
	border-left: solid var(--negro) 1px;
}
.colegiado .barra-texto h2 {
	font-size: 1.8em;
	margin: 0 0 24px;
	position: relative;
}
.colegiado .barra-texto h2::after {
	content: '';
	width: 18px;
	height:18px;
	background: var(--negro);
	position: absolute;
	top: 3px;
	left:-39px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	z-index: 6;
}
.colegiado .barra-texto h3 {
	font-family: 'Anko';
	color: var(--azul);
}
.colegiado .barra-texto p {
	margin: 0 0 45px;
}
.colegiado .barra-texto .porta-sellos {
	width: 100%;
	display: flex;
}
.colegiado .barra-texto .porta-sellos .sello {
	width: 20%;
	margin: 15px 18px 45px;
	padding:0;
	text-align: center;
	overflow: hidden;
}
.colegiado .barra-texto .porta-sellos .sello * {
	animation-duration: 1.5s;
	animation-delay: 0.9s;
}
.colegiado .barra-texto .porta-sellos .sello span {
	font-size: 3em;
	color: var(--gris2);
}
.colegiado .barra-texto .porta-sellos .sello span.active {
	color: var(--azul);
}
.colegiado .barra-texto .porta-sellos .sello p {
	margin: 0;
}
.colegiado .barra-texto .completo {
	width: 100%;
	display: flex;
	align-items: flex-start;
	margin: 15px 0;
}
.colegiado .barra-texto .completo img {
	width: 50%;
	vertical-align: top;
}
.colegiado .barra-texto .completo p {
	width: 50%;
	padding:0 0 0 30px;
	vertical-align: top;
}

.colegiado .porta-otros {
	width: 100%;
	display: flex;
}
.colegiado .porta-otros .otro {
	width: 120px;
	position: relative;
	margin: 0 18px 18px 0;
}
.colegiado .porta-otros .otro::after {
	content: '';
	width: 100%;
	height:0;
	padding:0 0 100%;
	border: solid var(--negro) 1px;
	position: absolute;
	top: 0;
	left:0;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	pointer-events: none;
}
.colegiado .porta-otros .otro:hover::after {
	border-color: var(--azul);
}
.colegiado .porta-otros .otro img {
	width: calc(100% - 12px);
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin: 7px;
}

.colegiado .porta-proyectos {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.colegiado .porta-proyectos .proyecto {
	width: calc(25% - 12px);
	position: relative;
	margin: 0 0 30px;
	animation-duration: 1.2s;
	animation-delay: 0.9s;
}
.colegiado .porta-proyectos .proyecto img {
	width: 100%;
}
.colegiado .porta-proyectos .proyecto h3 {
	font-family: 'Bebas';
	color: var(--azul);
}

.form-buscar {
	width: 100%;
	position: relative;
	display: block;
	background: var(--azul);
	padding: 42px 0;
	text-align: center;
}
.form-buscar form {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.form-buscar form * {
	font-size: 1.2em;
	vertical-align: bottom;
	color: var(--blanco);
}
.form-buscar form label {
	padding: 0 15px 0 0;
}
.form-buscar form input {
	font-family: 'Anko';
	font-size: 1.2em;
	background: none;
	border: none;
	padding: 0 0 9px;
	border-bottom: solid 1px var(--blanco);
}
.form-buscar form button {
	font-size: 0.9em;
	color: var(--blanco);
	background: var(--negro);
	margin: 0 12px 12px;
	padding:6px 30px;
	border-radius: 50px !important;
	border: solid 1px var(--azul);
}
/* autocomplete */
.autocomplete-items {
    position: absolute;
    border: none;
    background: rgba(0,0,0,0.6);
    z-index: 99;
    top: 100%;
    left: 0;
    right:0;
	transform: translateY(-48px);
}
.autocomplete-items div {
	font-family: 'Anko';
	font-size: 0.9em;
    padding: 9px;
    cursor: pointer;
    background-color: none;
    display: block;
}
.autocomplete-items div strong {
	font-size: 1em;
	color: var(--amarillo);
}
.autocomplete-items div:hover {
    background-color: var(--negro); 
}
.autocomplete-active {
    background-color: var(--negro) !important;
}

footer {
	width: 100%;
	color: var(--blanco);
	background: var(--negro);
	padding: 30px 0;
	border-top: solid 6px var(--rojo);
}
footer .inter {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
footer .inter img {
	width: 90px;
}
footer .inter .caja .redes {
	display: inline-block;
	vertical-align: middle;
	padding:0 0 0 15px;
	margin: 0 0 0 15px;
	border-left: solid 1px var(--blanco);
}
footer .inter .caja .redes button {
	width: 33px;
	height:33px;
	margin: 6px 18px 6px 0;
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
	position: relative;
}
footer .inter .caja .redes button span {
	/*margin: -6px auto 0;*/
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
}
footer .inter .caja:last-child {
	text-align: right;
}
footer .inter .caja:last-child p {
	font-size: 0.7em;
}

@media screen and (max-width:666px) {
	
	p, ul {
		font-size:0.9em;
	}
	h1 {
		font-size: 2.4em;
	}
	
	header .inter {
		width: calc(100% - 48px);
	}
	header .inter div img {
		height: 54px;
	}
	header .inter div a {
		font-size: 0.6em;
	}
	header .inter div a.btn-menu {
		display: inline-block;
	}
	header .inter div:last-child a:not(.btn-menu) {
		display: none;
	}
	header .inter div:last-child a:last-child {
		display: inline-block;
	}
	header.active {
		padding: 15px 0;
	}
	header.active .inter div img {
		height: 45px;
	}
	
	.wrapper {
		width: calc(100% - 48px);
	padding:90px 0 0;
	}
	
	.owl-carousel div img.imagen {
		margin: 120px 0 -6px;
	}
	.owl-carousel .box {
		width: calc(100% - 36px);
		padding: 210px 0 42px 60px;
		position:relative;
	}
	.owl-carousel .box .descripcion {
		width: 100%;
	}
	.owl-carousel .box .caja {
		display: none;
	}
	.porta-nav {
		display: none;
	}
	
	.texto-gris {
		padding: 54px 0;
	}
	.texto-gris .inter {
		width: calc(100% - 48px);
	}
	.texto-gris .inter .box:nth-child(1),
	.texto-gris .inter .box:nth-child(2) {
		width: 100%;
	}
	.texto-gris .inter .box:nth-child(2) {
		padding:30px 0 0;
	}

	.barra-gris .inter {
		width: calc(100% - 48px);
	}
	.barra-gris .inter img {
		display: none;
	}
	
	#tiempo .linea {
		width: calc(100% - 48px);
	}
	#tiempo .linea .box {
		flex-wrap: wrap;
	}
	#tiempo .linea .box div {
		width: 100%;
	}
	#tiempo .linea .box .imagen {
		text-align: left;
		margin: 12px 0;
	}
	#tiempo .linea .box .imagen::after {
		right:0;
		left: 0;
	}
	#tiempo .linea .box .imagen img {
		margin: 0 9px;
	}
	#tiempo .linea .box .texto {
		padding:0 60px 0 0;
	}
	#tiempo .linea .box .texto h2 {
		font-size: 2.1em;
	}
	#tiempo .linea .box:nth-child(2n) .imagen {
		text-align: right;
		order: 1;
	}
	#tiempo .linea .box:nth-child(2n) .imagen::after {
		left: auto;
		right:0;
	}
	#tiempo .linea .box:nth-child(2n) .texto {
		padding:0 0 0 48px;
		order: 2;
	}
	
	.porta-form img {
		width: auto;
		height:120%;
		left: -240px;
	}
	.porta-form .box {
		width: calc(100% - 48px);
		padding: 30px 0;
	}
	.porta-form .box .tit {
	    padding: 24px 24px 12px;
	}
	.porta-form .box form {
		width: 100%;
	}
	.porta-form .box form label {
		padding: 6px 21px;
	}
	.porta-form .box form input,
	.porta-form .box form textarea {
		width: calc(100% - 48px);
		margin: 0 21px 18px;
	}
	.porta-form .box form button {
		margin: 0 21px 24px;
	}
	
	#top {
		padding: 48px 0;
	}
	.ranking {
		width: calc(100% - 48px);
		margin: 42px auto 0;
		flex-wrap: wrap;
	}
	.ranking .elemento {
		width: 33%;
	}
	.ranking .elemento div:last-child {
		font-size: 0.6em;
		padding:3px 18px;
		transform: translate(-50%,69px);
		opacity: 1;
	}

	.consejo {
		width: calc(100% - 48px);
		margin: 42px auto 0;
		flex-wrap: wrap;
	}
	.consejo .elemento {
		width: 100%;
		padding:0 48px 18px;
	}
	.consejo .elemento::after {
		display: none;
	}
	
	#servicios {
		width: calc(100% - 48px);
	}
	#servicios button {
		margin: 0 5px 12px;
	}
	
	#formulario {
		width: calc(100% - 48px);
	}
	#formulario .datos .cajas {
		flex-wrap: wrap;
	}
	#formulario .datos .line1,
	#formulario .datos .line2,
	#formulario .datos .line3,
	#formulario .datos .line4 {
		width: 100%;
	}
	#formulario .datos .cont1 div,
	#formulario .datos .cont2 div,
	#formulario .datos .cont3 div {
		width: 100%;
	}
	porta-enviar button {
		font-size: 0.9em;
	}
	.porta-servis .box {
		width: 100%;
	}

    .colegiado {
		width: calc(100% - 48px);
		margin: 129px auto 0;
		flex-wrap: wrap;
	}
	.colegiado .barra-info {
		width: 100%;
	}
	.colegiado .barra-info .logo {
		width: 72%;
		margin: 0 auto;
	}
	.colegiado .barra-info .info {
		padding: 30px 24px;
	}
	.colegiado .barra-info .info .calif {
		padding:12px 0;
	}
	.colegiado .barra-info .info form::after {
		width: calc(100% + 48px);
		left:-24px;
	}
	.colegiado .barra-info .info form input,
	.colegiado .barra-info .info form textarea {
	    width: 100%;
	}
	.colegiado .barra-info .info form textarea {
		min-height: 69px;
	}

	.colegiado .barra-texto {
		width: 100%;
		margin: 0;
		padding:0 0 30px 24px;
	}
	.colegiado .barra-texto h2::after {
		width: 15px;
		height:15px;
		left:-33px;
	}
	.colegiado .barra-texto p {
		margin: 0 0 42px;
	}
	.colegiado .barra-texto .porta-sellos {
		flex-wrap: wrap;
	}
	.colegiado .barra-texto .porta-sellos .sello {
		width: 33%;
		margin: 12px 12px 30px;
	}
	.colegiado .barra-texto .porta-sellos .sello span {
		font-size: 2.1em;
	}
	.colegiado .barra-texto .completo {
		margin: 18px 0;
		flex-wrap: wrap;
	}
	.colegiado .barra-texto .completo img {
		width: 100%;
	}
	.colegiado .barra-texto .completo p {
		width: 100%;
		padding:24px 0 0;
	}
	
	.colegiado .porta-otros {
		flex-wrap: wrap;
	}
	.colegiado .porta-otros .otro {
		width: 72px;
	}
	
	.colegiado .porta-proyectos .proyecto {
		width: calc(50% - 12px);
	}
	
	.form-buscar form {
		width: calc(100% - 48px);
		flex-wrap: wrap;
	}
	.form-buscar form button {
		display: block;
		margin: 9px auto 0;
	}
	.autocomplete-items {
		transform: translateY(-42px);
	}
	
	footer .inter {
		width: calc(100% - 48px);
	}
	footer .inter img {
		width: 75px;
	}
	footer .inter .caja .redes {
		padding:0 0 0 24px;
		margin: 18px 0 0 0;
	}
}