@charset "utf-8";

* {
	margin: 0;
	padding:0;
	-webkit-box-sizing:border-box;
    -moz-box-sizing:   border-box;
    box-sizing:        border-box;
}
html {
	--blanco: #ffffff;
	--azul: #115e67;
	--gris: #768692;
	--verde: #a4d65e;
	--marino: #425563;
}

body {
	font-family: 'Lato';
	color: var(--marino);
	background:#fff;
	line-height:1.3;
	overflow-x:hidden !important;
}

h1, h2, h3 {
	font-family: 'Altivo Bold';
	font-weight: normal;
}
a {
    text-decoration:none;
}
a:active {
	outline: none;
    border: none;
}
button {
	font-size: 1em;
	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 {
	font-size:1em;
}

h1 {
	font-size: 2.7em;
}

/* --------------------------- FULLPAGE --------------------------- */

#superContainer {
    height: 100%;
    position: relative;
	
	/* Touch detection for Windows 8 */
	-ms-touch-action: none; 
}
.section {
    position: relative;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:   border-box;
    box-sizing:        border-box;
}
.slide {
    float: none;
}
.slide, .slidesContainer {
    height: 100% !important;
    display: block;
}
.slides {
    height: 100%;
    overflow: hidden !important;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.section.table, .slide.table {
    display: table;
    width: 100%;
}
.tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.slidesContainer {
    float: left;
    position: relative;
}
.controlArrow {
    position: absolute;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
	opacity:0.5;
	transition:0.5s;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
}
.controlArrow:hover {
	opacity:1;
}
.controlArrow.prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.controlArrow.next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.scrollable {
    overflow: scroll;
}
.easing {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}
#fullpage {
	overflow:hidden;
}
#fullPage-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#fullPage-nav.right {
    right: 17px;
}
#fullPage-nav.left {
    left: 17px;
}
.fullPage-slidesNav {
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.fullPage-slidesNav.bottom {
    bottom: 17px;
}
.fullPage-slidesNav.top {
    top: 17px;
}
#fullPage-nav ul,
.fullPage-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fullPage-nav li,
.fullPage-slidesNav li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.fullPage-slidesNav li {
    display: inline-block;
}
#fullPage-nav li a,
.fullPage-slidesNav li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fullPage-nav li .active span,
.fullPage-slidesNav .active span {
    background: #333;
}
#fullPage-nav span,
.fullPage-slidesNav span {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}

/* --------------------------- body --------------------------- */
header {
	width: 100vw;
	position: fixed;
	top: 0;
	left:0;
	transition: all 0.6s ease-in-out;
	z-index: 99;
}
header .inter {
	width: calc(100% - 60px);
	max-width: 1500px;
	margin: 30px auto;
	display: table;
}
header .inter div {
	display: table-cell;
	vertical-align: middle;
	transition: all 0.6s ease-in-out;
}
header .inter div:nth-child(1) {
	width: 25%;
}
header .inter div:nth-child(1) img {
	width: calc(100% - 30px);
	transition: all 0.6s ease-in-out;
}
header .inter div:nth-child(2) {
	padding: 0 0 0 30px;
}
header .inter div:nth-child(2) a {
	color: var(--blanco);
	margin: 0 30px 0 0;
	position: relative;
	transition: all 0.3s ease-in-out;
}
header .inter div:nth-child(2) a:after {
	content: '';
	width: 0;
	height:1px;
	background: var(--verde);
	position: absolute;
	left: 50%;
	bottom:-4px;
	transform: translateX(-50%);
	transition: all 0.3s ease-in-out;
	z-index: 1;
}
header .inter div:nth-child(2) a.active:after,
header .inter div:nth-child(2) a:hover:after {
	width: 100% !important;
}
header .inter div:nth-child(2) a:hover {
	color: var(--azul) !important;
}
header .inter div:nth-child(3) {
	text-align: right;
}
/* active */
header.active {
	background: var(--blanco);
}
header.active .inter {
	margin: 18px auto;
}
header.active .inter div:nth-child(1) img {
	width: calc(100% - 90px);
}
header.active .inter div:nth-child(2) {
	padding: 0;
}
header.active .inter div:nth-child(2) a {
	color: var(--marino);
	margin: 0 30px 0 0;
}
header.active .inter div:nth-child(3) .btn {
	color: var(--marino);
	border-color: var(--marino);
}
header.active .inter div:nth-child(3) a.active .btn,
header .inter div:nth-child(3) .btn:hover {
	background: var(--verde);
}
header .inter div:nth-child(3) .btn-menu {
	display: none;
}

#openmenu {
	width: 100vw;
	height:100vh;
	background: var(--marino);
	position: fixed;
	top: 0;
	left:100%;
	transition: all ease-in-out 0.9s;
	z-index: 93;
}
#openmenu.active {
	left: 0;
}
#openmenu div {
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-48%);
}
#openmenu div a {
	font-family: 'Altivo Bold';
	font-size: 1.2em;
	display: block;
	color: var(--blanco);
	margin: 0 0 9px;
}
#openmenu div a.active {
	color: var(--verde) !important;
}

#openmenu div div {
	margin: 75px 0 0;
	position: relative;
	display: block;
}
#openmenu div div a {
	font-size: 0.9em;
	display: inline-block !important;
	margin: 0 30px 0 0;
}

.b-marino {
	background: var(--marino);
	color: var(--blanco);
}

.link {
	font-family: 'Bold Thin';
	color: var(--marino);
	position: relative;
}
.link:after {
	content: '';
	width: 100%;
	height:1px;
	background: var(--marino);
	position: absolute;
	left:  0;
	bottom:-3px;
	transition: all 0.3s ease-in-out;
}
.link:hover:after {
	background: var(--verde);
}

#portada {
	width: 100vw;
	height:100vh;
	position: relative;
	overflow: hidden;
	background: var(--gris);
}
#portada:after {
	content: '';
	width: 100%;
	height:120px;
	position: absolute;
	top: 0;
	left:0;
	background: rgba(0,0,0,0.3);
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	z-index: 6;
}
#portada video {
	width: 120%;
	position: absolute;
	top: -30px;
	left:-10%;
	animation-duration: 0.6s;
	animation-delay: 3.3s;
	z-index:3;
}
#portada svg {
	width: 120%;
	position: absolute;
	top: -30px;
	left:-10%;
	z-index: 0;
}
#portada svg .st0 {
	fill: none;
	stroke: var(--blanco);
	stroke-linejoin: bevel;
	stroke-miterlimit: 10;
}
#portada svg #building,
#portada svg #roads {
	animation-delay: 0s;
}
#portada svg #roads .st0 {
	opacity: 0.3;
}
#portada .center-box {
	width: calc(100% - 60px);
	max-width: 375px;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
	animation-duration: 0.9s;
	animation-delay: 3.6s;
	z-index: 3;
}
#portada .center-box h1 {
	color: var(--blanco);
}
#portada .center-box h2 {
	font-family: 'Bold Regular';
	color: var(--verde);
}
#portada .inter {
	width: calc(100% - 60px);
	max-width: 1500px;
	position: absolute;
	left:  50%;
	bottom:0;
	transform: translateX(-50%);
	z-index: 3;
}
#portada .inter #barra {
	width: 50%;
	display: table;
	position: relative;
	z-index: 6;
}
#portada .inter #barra .redes,
#portada .inter #barra .scroll {
	width: 50%;
	display: table-cell;
	padding: 24px 0;
	position: relative;
}
#portada .inter #barra .redes {
	background: var(--marino);
}
#portada .inter #barra .redes:before {
	content: '';
	width: 50vw;
	height:100%;
	position: absolute;
	top: 0;
	left:0;
	background: var(--marino);
	transform: translateX(-99%);
	z-index: -1;
}
#portada .inter #barra .redes a {
	color: var(--blanco);
	margin: 0 30px 0 0;
}
#portada .inter #barra .redes a:hover {
	color: var(--verde);
}
#portada .inter #barra .scroll {
	overflow: hidden;
	animation-duration: 1.5s;
	animation-delay: 5.4s;
	z-index: -1;
}
#portada .inter #barra .scroll button {
	width: 100%;
	font-size: 1.2em;
	background: none;
	color: var(--blanco);
}
#portada .inter #barra .scroll button:after {
	content: '';
	width: 100%;
	height:100%;
	background: var(--verde);
	position: absolute;
	top: 0;
	left:0;
	opacity: 0.6;
	z-index: -1;
}
#portada .inter #barra .scroll button span {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	letter-spacing: 2px;
}
.btn-bolsa {
	position: absolute;
	right: 0;
	bottom:0;
	text-align: center;
}
.btn-bolsa button {
	font-family: 'Bold Regular';
	color: var(--blanco);
	background: none;
	padding: 0 0 24px;
}
.btn-bolsa span {
	font-size: 2.1em;
	color: var(--verde);
	display: block;
}

/* porta-des */
.porta-des {
	width: calc(100% - 60px);
	max-width: 1500px;
	margin: 30px auto;
	display: block;
	position: relative;
}
.porta-des .info,
.porta-des .fotos {
	display: inline-block;
	vertical-align: top;
}
.porta-des .info {
	width: calc(25% + 30px);
	animation-duration: 1.2s;
}
.porta-des .info h2 {
	margin: 60px 0;
}
.porta-des .info h2.tit {
	font-size: 2.1em;
	margin: 15px 0 30px;
}
.porta-des .info h3 {
	font-family: 'Bold Regular';
	margin: 0 0 30px;
}
.porta-des .info p {
	margin: 0 0 30px;
}
.porta-des .info p span {
	display: block;
}
.porta-des .info p a {
	color: var(--marino);
	display: block;
}
.porta-des .info p a:hover {
	color: var(--azul);
}
.porta-des .fotos {
	width: calc(75% - 90px);
	text-align: right;
	margin: 0 0 0 45px;
}
.porta-des .fotos img {
	width: calc(50% - 45px);
	display: inline-block;
	margin: 0 0 0 42px;
}
.porta-des .info ul {
	list-style: none;
}
.porta-des .info ul li {
	position: relative;
}
.porta-des .info ul li p {
	padding: 0 0 0 45px;
}
.porta-des .info ul li span {
	font-size: 1.8em;
	color: var(--verde);
	position: absolute;
	top: 50%;
	left:0;
	transform: translateY(-50%);
}
.porta-des .info button.btn {
	margin: 30px 0 0;
}
.porta-des .info button.btn:hover {
	background: var(--verde);
}

/* timeline */
#timeline {
	width: 100%;
	position: relative;
	margin: 0 0 60px;
}
#timeline .inter {
	width: calc(100% - 60px);
	max-width: 1500px;
	margin: 0 auto;
}

#frase {
	width: 100%;
	background: var(--gris);
	padding:60px 0;
	margin: 0 0 30px;
	text-align: center;
}
#frase h2 {
	width: 50%;
	max-width: 750px;
	font-family: 'Bold Thin';
	color: var(--blanco);
	margin: 0 auto;
	text-transform: uppercase;
}

#alerta {
	width: 100%;
	background: var(--verde);
	padding:120px 0 60px;
	margin: 0 0 30px;
	text-align: center;
}
#alerta h2 {
	width: 50%;
	max-width: 750px;
	font-family: 'Altivo Bold';
	color: var(--blanco);
	margin: 0 auto;
	text-transform: uppercase;
}

#map {
	width: calc(75% - 90px);
	height:0;
	display: inline-block;
	vertical-align: top;
	margin: 0 0 30px 45px;
	padding:0 0 50%;
	position: relative;
	animation-duration: 0.9s;
}
.content-map h2 {
	color: var(--marino);
}
.content-map p {
	max-width: 150px;
	color: var(--marino);
	font-size: 0.9em;
	margin: 12px 0;
}
.content-map a {
	font-family: 'Bold Thin';
	color: var(--verde);
	text-decoration: underline;
}

#puntos {
	display: inline-block;
	vertical-align: top;
	width: calc(75% - 90px);
	margin: 0 0 0 45px;
	position: relative;
	overflow: hidden;
}
#puntos img {
	width: 100%;
}
#puntos #barra-btns {
	width: 90px;
	height:calc(100% - 4px);
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left:0;
	animation-duration: 0.9s;
	animation-delay: 0.9s;
}
#puntos #barra-btns div {
	width: 100%;
	height:20% !important;
	position: relative;
	cursor: pointer;
}
#puntos #barra-btns div:after {
	content: '';
	width: 100%;
	height:100%;
	background: var(--gris);
	position: absolute;
	top: 0;
	left:0;
	transition: all 0.6s ease-in-out;
	opacity: 0.6;
	z-index: 0;
}
#puntos #barra-btns div:hover:after {
	opacity: 0.9;
}
#puntos #barra-btns div:before {
	content: '';
	width: 100%;
	height:1px;
	background: var(--gris);
	position: absolute;
	left:  0;
	bottom:-1px;
	z-index: 1;
}
#puntos #barra-btns div:last-child:before {
	display: none;
}
#puntos #barra-btns div span {
	font-size: 2.1em;
	color: var(--verde);
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: 3;
}

#puntos .texto {
	width: calc(100% - 90px);
	height:calc(100% - 4px);
	position: absolute;
	top: 0;
	left:100%;
	transition: all 0.6s ease-in-out;
	z-index: 0;
}
#puntos .texto.active {
	left: 90px;
}
#puntos .texto:after {
	content: '';
	width: 100%;
	height:100%;
	background: var(--gris);
	position: absolute;
	top: 0;
	left:0;
	opacity: 0.9;
	z-index: 0;
}
#puntos .texto p {
	width: 50%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	color: var(--blanco);
	z-index: 3;
}

.barra {
	width: 100%;
	background: var(--gris);
	color: var(--blanco);
	text-align: center;
	padding: 30px 0;
}
.barra h2 {
	color: var(--verde);
}
#ventajas {
	width: calc(100% - 60px);
	max-width: 1500px;
	margin: 0 auto;
	display: table;
}
#ventajas div {
	width: 25%;
	text-align: center;
	display: table-cell;
	vertical-align: top;
	padding: 30px;
	animation-duration: 0.9s;
}
#ventajas div:nth-child(1) {
	animation-delay: 0.3s;
}
#ventajas div:nth-child(2) {
	animation-delay: 0.9s;
}
#ventajas div:nth-child(3) {
	animation-delay: 1.5s;
}
#ventajas div:nth-child(4) {
	animation-delay: 2.1s;
}
#ventajas div span {
	font-size: 2.1em;
	color: var(--marino);
	display: block;
}
#ventajas div h3 {
	color: var(--blanco);
}
#ventajas div h3::first-line {
	font-family: 'Bold Thin';
}

#glass {
	width: 100%;
	position: relative;
	overflow: hidden;
}
#glass:after {
	content: '';
	width: 100%;
	height:100%;
	background: var(--marino);
	position: absolute;
	top: 0;
	left:0;
	opacity: 0.42;
	z-index: 0;
}
#glass img {
	width: 120%;
	position: absolute;
	top: 0;
	left:-10%;
	z-index: 0;
}
#glass div {
	width: calc(100% - 60px);
	max-width: 1500px;
	height:75vh;
	text-align: center;
	position: relative;
	margin: 0 auto;
	border-left: solid 1px var(--gris);
	border-right:solid 1px var(--gris);
	z-index: 3;
}
#glass div:after {
	content: '';
	width: 1px;
	height:100%;
	position: absolute;
	top: 0;
	left:50%;
	transform: translateX(-50%);
	background: var(--gris);
	z-index: 0;
}
#glass div:before {
	content: '';
	width: 50%;
	height:100%;
	position: absolute;
	top: 0;
	left:50%;
	transform: translateX(-50%);
	border-left: solid 1px var(--gris);
	border-right:solid 1px var(--gris);
	z-index: 0;
}
#glass div blockquote {
	width: 50%;
	font-size: 1.5em;
	color: var(--blanco);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	animation-duration: 0.9s;
	z-index: 6;
}

/* section */
.section .intro2 {
	width: calc(100% - 60px);
	max-width: 1500px;
	margin: 60px auto;
}
.section .intro2 h2 {
	margin: 90px 0 60px;
}
.section .intro2 p {
	padding: 0 50% 0 0;
}

/* porta-proyectos */
#porta-proyectos {
	width: 100vw;
	display: table;
	overflow: hidden;
}
#porta-proyectos .proyecto-box {
	width: 25%;
	height:0;
	padding: 0 0 60vh;
	display: table-cell;
	position: relative;
	overflow: hidden;
	animation-duration: 1.2s;
}
#porta-proyectos .proyecto-box:nth-child(1) {
	animation-delay: 0.6s;
}
#porta-proyectos .proyecto-box:nth-child(2) {
	animation-delay: 1.2s;
}
#porta-proyectos .proyecto-box:nth-child(3) {
	animation-delay: 1.8s;
}
#porta-proyectos .proyecto-box:nth-child(4) {
	animation-delay: 2.4s;
}
#porta-proyectos .proyecto-box:after {
	content: '';
	width: 100%;
	height:100%;
	position: absolute;
	top: 0;
	left:0;
	/*background: var(--marino);*/
	opacity: 0.6;
	pointer-events: none;
	z-index: 1;
}
#porta-proyectos .proyecto-box h2 {
	width: 50%;
	position: absolute;
	top: 30px;
	left:30px;
	pointer-events: none;
	z-index: 3;
}
#porta-proyectos .proyecto-box span {
	font-family: 'Bold Regular';
	font-size: 0.9em;
	color: var(--gris);
	position: absolute;
	top: 50%;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	z-index: 3;
}
#porta-proyectos .proyecto-box a.link {
	position: absolute;
	right: 30px;
	bottom:30px;
	color: var(--verde);
	z-index: 3;
}
#porta-proyectos .proyecto-box a.link:after {
	background: var(--verde);
}
#porta-proyectos .proyecto-box img {
	width: 100%;
	height:100%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	transition: all 0.9s ease-in-out;
	z-index: 0;
}
#porta-proyectos .proyecto-box:hover img {
	transform: translate(-50%,-50%) scale(1.2);
}

/* bk-marino */
#box-proyectos {
	padding: 120px 0 0;
	background: var(--marino);
}
#box-proyectos #porta-proyectos {
	margin: 0 0 0px;
}
#box-proyectos #porta-proyectos .proyecto-box {
	padding: 0 0 42vh;
}
/* section-proyecto*/
#section-proyecto {
	padding: 120px 0 0;
	background: var(--marino);
}
#section-proyecto #porta-proyectos .proyecto-box {
	padding: 0 0 30vh;
}
#section-proyecto #porta-proyectos .proyecto-box img {
	width: 100%;
	height:auto;
}


/* btn */
.btn {
	padding: 9px 12px;
	border: solid 1px var(--blanco);
	color: var(--blanco);
	background: none;
}
.center {
	width: 100%;
	text-align: center;
}
.center .btn {
	margin: 30px auto;
}
.center .btn:hover {
	background: var(--verde);
}

/* imagen */
#imagen {
	display: inline-block;
	vertical-align: top;
	width: calc(75% - 90px);
	margin: 0 0 0 45px;
	position: relative;
	overflow: hidden;
}
#imagen img {
	width: 100%;
}

.redes a {
	color: var(--marino);
	margin: 0 9px 0 0;
}
.redes a:hover {
	color: var(--azul);
}

/* porta-form */
#porta-form {
	width: 100vw;
	padding: 60px 0;
	position: relative;
	background: var(--marino);
	overflow: hidden;
}
#porta-form:after {
	content: '';
	width: 100%;
	height:100%;
	background: var(--gris);
	position: absolute;
	top: 0;
	left:0;
	opacity: 0.9;
	z-index: 1;
}
#porta-form .caja {
	width: calc(100% - 60px);
	max-width: 750px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
}
#porta-form .caja2 {
	margin: 30px auto 0;
	padding:30px 0 0;
	border-top: solid 1px var(--blanco);
}
#porta-form .caja h2 {
	width: 100%;
	color: var(--blanco);
	text-align: center;
	margin: 0 0 30px;
}
#porta-form .caja p {
	margin: 0 0 30px;
}
.salto {
	width: 100%;
	display: block;
}
#porta-form form input,
#porta-form form textarea,
#porta-form form label {
	width: calc(50% - 18px);
	font-family: 'Bold Regular';
	font-size: 1em;
	color: var(--blanco);
	display: inline-block;
	vertical-align: top;
	padding: 6px 0;
	background: none;
	border: none;
	border-bottom: solid 1px var(--marino);
	transition: all 0.6s ease-in-out;
	margin: 0 0 12px;
}
#porta-form form label {
	border-bottom: none;
}
#porta-form form label span {
	font-size: 1.2em;
	color: var(--verde);
	margin: 0 9px 0 0;
}
::placeholder {
	color: var(--blanco);
    opacity: 0.5;
}
:-ms-input-placeholder {
	color: var(--blanco);
	opacity: 0.5;
}
::-ms-input-placeholder {
	color: var(--blanco);
	opacity: 0.5;
}
#porta-form form input:nth-child(2n),
#porta-form form textarea:nth-child(2n) {
	margin: 0 0 9px 15px;
}
#porta-form form input:focus,
#porta-form form textarea:focus {
	border-bottom-color: var(--verde);
}
#porta-form form textarea {
	resize: none;
	height: 30px;
}
#porta-form form textarea:focus {
	height: 90px;
}
#porta-form .caja .btn {
	margin: 30px auto 0;
}
#porta-form img {
	width: 100%;
	position: absolute;
	top: 60%;
	left:0;
	z-index: 0;
}

#porta-lines {
	width: 25vw;
	height:50%;
	position: absolute;
	top:  0;
	right:0;
	z-index: 0;
}
#porta-lines svg {
	width: 100%;
	fill: var(--verde);
}

/* slider */
.porta-slide {
	width: calc(100% - 60px);
	max-width: 1500px;
	margin: 30px auto 60px;
	position: relative;
}
#owl {
	width: 100%;
	max-width: 100vw;
	height: auto;
	margin: 0;
	position: relative;
	display: block;
	overflow: hidden;
}
#owl div {
	float: left;
}
#owl .item {
	width: 100%;
	position: relative;
	margin: 0 auto;
	padding:0;
}
#owl .item img {
	width: 100%;
	position: relative;
	display: block;
	margin: 0 auto;
}
.prev,
.next {	
	font-size: 24px;
	position: absolute;
	top: 50%;
	cursor: pointer;
	transform: translateY(-50%);
	z-index: 9;
}
.prev {
	left: 15px;
}
.next {
	right:15px;
}
/* */
.custom-control {
	text-align:center;
	position:relative;
	margin: -30px auto 30px;
	transform: translateY(-100%);
}
.custom-control button {
	width: 15px !important;
	height:15px !important;
	margin: 0 12px;
	padding:0;
	background: none;
	border-radius: 50% !important;
	transition: all ease-in-out 0.3s;
	border: solid 1px var(--blanco);
	position: relative;
	vertical-align: middle;
	opacity: 0.8;
}
.custom-control button:hover,
.custom-control button.active {
	background: var(--verde);
	opacity: 1;
}
.custom-control span {
	position: relative;
	vertical-align: middle;
}

/* mini-slider */
.mini-owl-btns {
	width: 100%;
	text-align: right;
}
.mini-owl-btns .btn:hover,
.mini-owl-btns .btn:active {
	border: solid 1px var(--verde);
}

#mini-owl {
	width: 100%;
	max-width: calc(100vw - 90px);
	height: auto;
	margin: 30px auto;
	position: relative;
	display: block;
	overflow: hidden;
}
#mini-owl div {
	float: left;
}
#mini-owl .item {
	width: 100%;
	position: relative;
	margin: 0 auto;
	padding: 0 18px 0 0;
}
#mini-owl .item img {
	width: calc(100% - 60px);
	position: relative;
	display: block;
	margin: 0 auto;
}
#barra .intro {
	position: relative;
}
#alianzas {
	width: 30px;
	height:30px;
	display: block;
	position: absolute;
	transform: translateY(-120px);
	pointer-events: none;
}

.time {
	border-top: solid 6px var(--verde);
	cursor: grab;
}
.time div {
	width: 100%;
	height:48px;
	display: block;
	position: relative;
	margin: 30px 0;
}
.time div:after {
	content: '';
	width: 48px;
	height:48px;
	border: solid 1px var(--verde);
	position: absolute;
	top: 0;
	left:0;
}
.time div:before {
	content: '';
	width: 1px;
	height:30px;
	background: var(--verde);
	position: absolute;
	top: -30px;
	left:24px;
}
.time div span {
	font-size: 1.8em;
	color: var(--blanco);
	position: absolute;
	top: 50%;
	left:24px;
	transform: translate(-50%,-50%);
}
.time .fecha {
	font-family: 'Bold Thin';
}
.time .fecha b {
	font-family: 'Altivo Bold';
}
.time p {
	width: calc(100% - 15px);
}

/* porta-videos */
#porta-videos {
	width: calc(100% - 60px);
	max-width: 1500px;
	margin: 30px auto;
}
#porta-videos .video {
	width: calc(50% - 18px);
	height: 0;
	display: inline-block;
	margin: 0 0 24px;
	vertical-align: top;
	position: relative;
    padding-bottom: 27.9%;/*56.25%;  16:9 */
}
#porta-videos .video:nth-child(2n) {
	margin: 0 0 24px 15px;
}
#porta-videos .video iframe {
	position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height:100%;
}

/* control */
#control {
	width: calc(100% - 60px);
	margin: 30px auto 15px;
	position: relative;
	animation-duration: 0.9s;
	animation-delay: 0.6s;
}
#control select {
	padding: 15px 9px;
}
#control option {
	padding: 15px 9px;
}

/* notas */
#notas {
	width: calc(100% - 60px);
	max-width: 1500px;
	margin: 30px auto;
	position: relative;
}
#notas .nota {
	width: calc(25% - 16px);
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin: 0 15px 48px 0;
	animation-duration: 0.9s;
}
#notas .nota:nth-child(4n) {
	margin: 0 0 48px 0;
}
#notas .nota img {
	width: 100%;
}
#notas .nota .titulo {
	width: 100%;
	display: table;
	margin: 15px 0;
}
#notas .nota .titulo div {
	display: table-cell;
}
#notas .nota .titulo div:first-child {
	background: var(--verde);
	padding: 12px 9px;
	text-align: center;
}
#notas .nota .titulo div:first-child h3 {
	font-family: 'Bold Thin';
	font-size: 0.9em;
}
#notas .nota .titulo div:first-child h3 b {
	font-family: 'Altivo Bold';
}
#notas .nota .titulo div:last-child {
	padding: 0 0 0 15px;
}
#notas .nota .titulo div:last-child h2 {
	font-size: 1.2em;
}
#notas .nota p {
	margin: 0 0 15px;
}
#notas .nota .link {
	color: var(--blanco);
}
#notas .nota .link:after {
	background: var(--blanco);
}
#notas .nota .link:hover:after {
	background: var(--verde);
}

/* footer */
footer {
	width: 100%;
	position: relative;
}
footer .inter {
	width: calc(100% - 60px);
	max-width: 1500px;
	display: table;
	margin: 30px auto;
}
footer .inter div {
	width: 33.3%;
	display: table-cell;
	vertical-align: top;
}
footer .inter div a {
	color: var(--verde);
}
footer .inter div:nth-child(1) span {
	font-size: 3em;
}
footer .inter div:nth-child(2) {
	text-align: center;
}
footer .inter div:nth-child(3) {
	text-align: right;
}

@media screen and (max-width:666px) {
	p {
	    font-size:0.9em;
    }
	h1 {
	    font-size: 2.1em;
    }
	
    header .inter {
	    width: calc(100% - 30px);
    }
    header .inter div:nth-child(1) {
	    width: 50%;
    }
    header .inter div:nth-child(2) {
		display: none;
    }
    header.active .inter div:nth-child(1) img {
	    width: calc(100% - 30px);
    }
	header .inter div:nth-child(3) .btn-menu {
	    display: block;
    }
	header .inter div:nth-child(3) .btn-contacto {
	    display: none;
    }
	
    #portada video {
	    width: 240%;
	    top: 99px;
	    left:-60%;
    }
    #portada svg {
	    width: 240%;
	    top: 99px;
	    left:-60%;
    }
    #portada .inter {
	    width: calc(100% - 30px);
    }
    #portada .inter #barra {
	    width: 100%;
    }
    #portada .inter #barra .redes a {
	    margin: 0 24px 0 0;
    }
	#portada .inter #barra .scroll button:after {
	    opacity: 1;
    }
    .btn-bolsa {
		display: none;
    }
	
	.porta-des {
	    width: calc(100% -30px);
	    margin: 30px 15px;
    }
    .porta-des .info,
    .porta-des .fotos {
	    display: block;
    }
    .porta-des .info {
	    width: calc(100vw - 30px);
    }
    .porta-des .info h2 {
	    margin: 30px 0 48px;
    }
    .porta-des .fotos {
	    width: calc(100vw - 30px);
	    text-align: left;
	    margin: 90px 0 0;
    }
    .porta-des .fotos img {
	    width: calc(50% - 21px);
	    margin: 0 0 0 18px;
    }
    .porta-des .info button.btn {
	    margin: 15px 0 0;
    }
	
	#timeline {
	    margin: 0 0 48px;
    }
    #timeline .inter {
	    width: calc(100% - 30px);
    }

    #frase h2 {
	    width: 100%;
    }

    #map {
	    width: 100%;
		min-width: calc(100vw - 30px);
	    margin: 0 0 30px;
	    padding:0 0 150%;
    }
	
	#puntos {
		width: calc(100vw - 30px);
	    margin: 30px 0 0;
    }
    #puntos #barra-btns {
	    width: 60px;
    }
    #puntos #barra-btns div span {
	    font-size: 1.5em;
    }

    #puntos .texto {
	    width: calc(100% - 60px);
    }
    #puntos .texto.active {
	    left: 60px;
    }
    #puntos .texto p {
	    width: 75%;
    }

    .barra h2 {
		font-size: 1.2em;
		padding: 0 12px;
    }
	#ventajas {
	    width: calc(100% - 30px);
		text-align: center;
	    display: block;
    }
    #ventajas div {
	    width: calc(50% - 3px);
	    display: inline-block;
	    padding: 24px 12px;
    }
    #ventajas div h3 {
		font-size: 0.9em;
    }
	
    #glass img {
	    width: 260%;
	    left:-80%;
    }
    #glass div {
	    width: calc(100% - 30px);
	    height:39vh;
    }
    #glass div blockquote {
	    width: 100%;
	    font-size: 1.2em;
    }
	
	.section .intro2 {
	    width: calc(100% - 30px);
	    margin: 48px auto;
    }
    .section .intro2 h2 {
	    margin: 90px 0 48px;
    }
    .section .intro2 p {
	    padding: 0;
    }
	
	#porta-proyectos {
		display: block;
    }
    #porta-proyectos .proyecto-box {
	    width: 100%;
	    padding: 0 0 30vh;
	    display: block;
    }
    #porta-proyectos .proyecto-box:nth-child(1),
	#porta-proyectos .proyecto-box:nth-child(2),
	#porta-proyectos .proyecto-box:nth-child(3),
	#porta-proyectos .proyecto-box:nth-child(4) {
	    animation-delay: 0.6s;
    }
    #porta-proyectos .proyecto-box h2 {
	    top: 24px;
	    left:24px;
    }
    #porta-proyectos .proyecto-box a.link {
	    right: 24px;
	    bottom:24px;
    }
    #porta-proyectos .proyecto-box img {
	    width: 100%;
	    height:auto;
    }

    #box-proyectos {
	    padding: 99px 0 0;
    }
    #box-proyectos #porta-proyectos {
	    margin: 0;
    }
    #box-proyectos #porta-proyectos .proyecto-box {
	    padding: 0 0 30vh;
    }
	#section-proyecto {
	    padding: 99px 0 0;
    }
    #section-proyecto #porta-proyectos .proyecto-box {
	    padding: 0 0 30vh;
    }
	.empty-box {
		display: none;
		padding: 0 !important;
		background: red;
	}
	
	#imagen {
	    display: block;
	    width: calc(100vw - 60px);
	    margin: 0;
    }

    #porta-form {
	    padding: 48px 0;
    }
	#porta-form:after {
		opacity: 1;
    }
    #porta-form .caja {
	    width: calc(100% - 30px);
    }
    #porta-form form input,
    #porta-form form textarea {
	    width: calc(50% - 15px);
	    font-size: 0.9em;
	    margin: 0 0 15px;
    }
    #porta-form .caja .btn {
	    margin: 24px auto 0;
    }
    #porta-form img {
		display: none;
    }

    #porta-lines {
	    width: 33.3vw;
    }
	
	.porta-slide {
	    width: calc(100% - 30px);
	    margin: 30px auto 48px;
    }
#owl {
	width: 100%;
	max-width: 100vw;
	height: auto;
	margin: 0;
	position: relative;
	display: block;
	overflow: hidden;
}
#owl div {
	float: left;
}
#owl .item {
	width: 100%;
	position: relative;
	margin: 0 auto;
	padding:0;
}
#owl .item img {
	width: 100%;
	position: relative;
	display: block;
	margin: 0 auto;
}
    .prev,
    .next {	
	    font-size: 21px;
    }
    .prev {
	    left: 12px;
    }
    .next {
	    right:12px;
    }
    .custom-control {
	    margin: -15px auto 15px;
	    transform: translateY(-90%);
    }
    .custom-control button {
	    width: 12px !important;
	    height:12px !important;
	    margin: 0 9px;
    }
	
    .mini-owl-btns {
		margin: 15px 0 0;
    }

    #mini-owl {
	    max-width: calc(100vw - 30px);
	    margin: 24px auto;
    }
    #mini-owl .item img {
	    width: calc(100% - 30px);
    }
	
    .time p {
	    width: 100%;
    }
	
	#porta-videos {
	    width: calc(100% - 30px);
    }
    #porta-videos .video {
	    width: 100%;
        padding-bottom: 56.25%;
    }
    #porta-videos .video:nth-child(2n) {
	    margin: 0 0 24px;
    }

    #control {
	    width: calc(100% - 30px);
	    margin: 15px auto;
    }
	
	#notas {
	    width: calc(100% - 30px);
    }
    #notas .nota {
	    width: calc(50% - 18px);
	    margin: 0 30px 48px 0;
    }
    #notas .nota:nth-child(2n),
	#notas .nota:nth-child(4n) {
	    margin: 0 0 48px 0;
    }
    #notas .nota .titulo {
	    display: block;
	    margin: 0 0 15px;
    }
    #notas .nota .titulo div {
		width: 100%;
	    display: block;
    }
    #notas .nota .titulo div:first-child {
	    padding: 9px 0;
    }
	#notas .nota .titulo div:last-child {
	    padding: 12px 0 0;
    }
    #notas .nota p {
		font-size: 0.7em;
    }
	
	footer {
	width: 100%;
	position: relative;
    }
    footer .inter {
	    width: calc(100% - 30px);
	max-width: 1500px;
	display: table;
	margin: 30px auto;
    }
    footer .inter div {
	    width: auto;
    }
    footer .inter div p,
	footer .inter div a {
		font-size: 0.7em;
    }
	footer .inter div p a {
		font-size: 1em;
	}
    footer .inter div:nth-child(2) {
		text-align: right
    }
	
}