video {
	outline: none;
	filter: brightness(0.64);
}

img.poster {
	filter: brightness(0.64);
}

.cvc {
	display: table-cell;
	vertical-align: middle;
}

.cv {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: block;
}

.ch {
	display: table;
	margin: auto;
}

.clear::after {
	display: block;
	content: "";
	clear: both;
}

.nr {
	white-space: nowrap;
}

img {
	display: block;

	&.full {
		display: block;
		width: 100%;
		height: auto;
	}
}

.cover {
	position: absolute;
	left: 0vw;
	top: 0vw;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image {
	position: relative;

	img {
		user-select: none;
	}
}

@media (max-width: 1000px) {
	.desktop {
		display: none !important;
	}
}

@media (min-width: 1001px) {
	.mobile {
		display: none !important;
	}
}

.contain {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	padding: 0 1em;
}

@media (min-width: 1001px) {
	html {
		font-size: 1vw;

		#scale2 {
			width: 10px;
			display: none;
		}
	}
}

@media (max-width: 1000px) {
	html {
		font-size: 3.84vw;

		#scale2 {
			width: 38.4px;
			display: none;
		}
	}
}

/* The size scale2() (includes/html.php) gives .scaled, set here too so it is
   right from the first paint. The script only applies it once the page has
   been read (its first run comes before .scaled exists), and until then the
   page showed at the inherited size -- a flash of the wrong layout on phones. */
@media (min-width: 1001px) {
	.scaled {font-size: 1vw;}
}
@media (max-width: 1000px) {
	.scaled {font-size: 3.84vw;}
}

html {
	::selection {
		background: #1a38a0;
		color: white;
	}

	body {
		font-family: 'Montserrat', sans-serif;
		color: #333333;

		@media (min-width: 1001px) {
			font-size: 1vw;
		}

		@media (max-width: 1000px) {
			font-size: 1vw;
		}
	}
}

.header-space {
	height: 6vw;
}


.intro {
	height: calc(100vh - 7vw - 1.5em);
	min-height: 30em;
	max-height: 60em;
	background: #777;
	margin: 0 1.5em 1.5em 1.5em;
	margin-top: 5em;
	position: relative;

	/* Phones: the page already starts below the fixed header (the h-15vw
	   spacer in layout.php), so this top margin was a white gap between
	   the menu and the video. */
	@media (orientation: portrait) {
		margin-top: 0;
	}

	.text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		@media (min-width: 1001px) {
			width: 50%;
		}

		@media (max-width: 1000px) {
			width: 90%;
		}

		.title {
			text-align: center;
			font-weight: bold;
			color: white;
			margin-bottom: 1em;
			font-size: 2.3em;
		}

		.medium {
			text-align: center;
			font-weight: bold;
			color: white;
			font-size: 1.8em;
		}

		.normal {
			text-align: center;
			font-weight: 600;
			color: white;
			font-size: 1.5em;
		}
	}
}

/* Slider */
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-touch-callout: none;
	user-select: none;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.slick-list {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0;
	padding: 0;

	&:focus {
		outline: none;
	}

	&.dragging {
		cursor: pointer;
		cursor: hand;
	}
}

.slick-slider {
	.slick-track,
	.slick-list {
		transform: translate3d(0, 0, 0);
	}
}

.slick-track {
	position: relative;
	left: 0;
	top: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;

	&:before, &:after {
		content: "";
		display: table;
	}

	&:after {
		clear: both;
	}

	.slick-loading & {
		visibility: hidden;
	}
}

.slick-slide {
	float: left;
	height: 100%;
	min-height: 1px;
	display: none;

	[dir="rtl"] & {
		float: right;
	}

	img {
		display: block;
	}

	&.slick-loading img {
		display: none;
	}

	&.dragging img {
		pointer-events: none;
	}

	.slick-initialized & {
		display: block;
	}

	.slick-loading & {
		visibility: hidden;
	}

	.slick-vertical & {
		display: block;
		height: auto;
		border: 1px solid transparent;
	}
}

.slick-arrow.slick-hidden {
	display: none;
}

.slider {
	.slide {
		position: relative;

		img.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.slick-arrow {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 1.5em;
		height: 1.5em;
		font-size: 0;
		z-index: 1;
		outline: none;
		transition: all 0.3s;

		&.slick-prev {
			left: 1em;
			background: url(../img/layout/prev.png) center/cover;
		}

		&.slick-next {
			right: 1em;
			background: url(../img/layout/next.png) center/cover;
		}
	}

	.slick-dots {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 2em;
		display: flex;

		button {
			width: 1em;
			height: 1em;
			position: relative;
			margin: 0.5em;
			border-radius: 50%;
			border: 1px solid white;
			background: transparent;
			font-size: 0;
			transition: all 0.3s;
			outline: none;

			&:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 200%;
				height: 200%;
			}
		}

		.slick-active button {
			background: white;
		}
	}
}

@media (min-width: 1001px) {
	.slick-dots {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		right: 5%;
	}
}

@media (max-width: 1000px) {
	.slick-dots {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 2em;
		display: flex;
	}
}

.slick-dots {
	button {
		width: 1em;
		height: 1em;
		position: relative;
		margin: 0.5em;
		border-radius: 50%;
		border: 1px solid white;
		background: transparent;
		color: transparent;
		transition: all 0.3s;
		outline: none;

		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 200%;
			height: 200%;
		}
	}

	.slick-active button {
		background: white;
	}
}

#page-home {
	.first-slider, .first-slider .slide {
		height: calc(100vh - 7em - 1.5em);
		min-height: 30em;
		max-height: 60em;

		video, img.cover {
			filter: brightness(0.64);
		}
	}

	.first-slider .img-fundacion {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 20em;
		filter: invert(100%);
		max-width: 100%;
	}

	.slogan-slider,
	.slogan-slider .slide {
		height: 35em;
	}

	.slogan-slider .slide {
		position: relative;
		.text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			color: white;

			@media (min-width: 1001px) {
				width: 60%;
				line-height: 1.8;
				font-size: 2em;
			}

			@media (max-width: 1000px) {
				width: 90%;
				line-height: 1.3;
				font-size: 1.5em;
			}

			.title {
				text-align: center;
				font-weight: bold;
				color: white;
				margin-bottom: 1em;
				font-size: 120%;
			}
		}
	}

	.white-sec {
		margin: 5em 0 10em;

		.contain {
			width: 60em;
		}

		.white-first {
			font-weight: 300;
			margin-bottom: 4em;
			font-size: 1.3em;

			span {
				font-weight: normal;
			}
		}

		.compania {
			border-top: 0.3em solid #F0C44A;

			&:last-child {
				border-bottom: 0.3em solid #F0C44A;
			}

			.head {
				cursor: pointer;
				user-select: none;
				padding: 1.5em 0;
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: bold;
					color: #132974;
					transition: all 0.3s;

					@media (min-width: 1001px) {
						font-size: 2.3em;
					}

					@media (max-width: 1000px) {
						font-size: 1.8em;
					}
				}

				.arrows {
					margin-right: 1em;
					position: relative;

					@media (min-width: 1001px) {
						width: 2.3em;
						height: 2.3em;
					}

					@media (max-width: 1000px) {
						width: 1.8em;
						height: 1.8em;
					}

					.up {
						opacity: 0;
						pointer-events: none;
						transition: all 0.5s;
					}

					.down {
						opacity: 1;
						transition: all 0.5s;
						pointer-events: auto;
					}
				}
			}

			&.active {
				.name {
					color: #F9C320;
				}

				.head .arrows {
					.up {
						opacity: 1;
						transition: all 0.5s;
						pointer-events: auto;
					}

					.down {
						opacity: 0;
						pointer-events: none;
						transition: all 0.5s;
					}
				}
			}

			.body {
				padding: 1.5em 0 2.5em;
				display: none;

				.cols {
					@media (min-width: 1001px) {
						display: flex;
					}

					.image {
						position: relative;

						@media (min-width: 1001px) {
							width: 54%;
							height: 25em;
						}

						@media (max-width: 1000px) {
							height: 15em;
						}
					}

					.text {
						background: #132974;
						display: flex;
						flex-direction: column;
						justify-content: center;

						@media (min-width: 1001px) {
							width: 46%;
							padding: 0 2em 0 4.5em;
						}

						@media (max-width: 1000px) {
							padding: 2em;
						}

						.title {
							font-weight: 600;
							color: white;
							margin-bottom: 1em;
							font-size: 1.5em;
						}

						.desc {
							color: white;
							margin-bottom: 2em;
							font-size: 0.7em;
						}

						.mas {
							align-self: start;
							background: #f8c220;
							font-weight: 600;
							color: white;
							padding: 0.8em 1.6em;
							border-radius: 1.6em;
							font-size: 0.7em;
						}
					}
				}
			}
		}
	}

	.eventos {
		position: relative;
		background: #777;

		@media (min-width: 1001px) {
			height: 40em;
		}

		@media (max-width: 1000px) {
			height: 200vw;
		}

		.fg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;

			.contain {
				width: 80em;

				.cols {
					.text {
						line-height: 1.6;

						@media (min-width: 1001px) {
							margin-right: 7em;
							/* width: 30em; */
						}

						@media (max-width: 1000px) {
							margin-bottom: 5em;
						}

						.title {
							font-weight: bold;
							color: white;
							margin-bottom: 1.5em;
							font-size: 1.3em;
						}

						.desc {
							font-weight: 300;
							color: white;
							margin-bottom: 1.5em;
							font-size: 1em;
						}

						.mas {
							border: 1px solid white;
							font-weight: 600;
							color: white;
							padding: 0.8em 2.3em;
							border-radius: 1.6em;
							font-size: 0.7em;
						}
					}

					.logos img {
						@media (min-width: 1001px) {
							width: 20em;
						}

						@media (max-width: 1000px) {
							width: 80%;
							margin: auto;
						}
					}
				}
			}
		}
	}

}

.white-common {
	@media (min-width: 1001px) {
		margin: 7em 0;
	}

	@media (max-width: 1000px) {
		margin: 3em 0;
	}

	.contain {
		width: 64em;
	}

	.title {
		text-align: center;
		font-weight: bold;
		color: #132974;
		margin-bottom: 2em;
		font-size: 2.3em;
	}

	.normal {
		text-align: center;
		font-weight: 100;
		margin-bottom: 4em;
		line-height: 1.4;
		font-size: 1.3em;

		span {
			font-weight: normal;
		}
	}
}

.logo-menu {
	margin-bottom: 3vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	div {
		@media (max-width: 1000px) {
			width: 50%;

			&.big {
				width: 100%;
			}
		}

		@media (min-width: 1001px) {
			width: 25%;

			&.big {
				width: 50%;
			}
		}
	}

	&.clickable img {
		cursor: pointer;
	}

	img {
		border: 1px solid #C9C9C9;
		width: 100%;
		filter: grayscale(100%);
	}

	.active img {
		filter: none;
	}
}

.image-text-cols {
	max-width: 91em;
	margin-bottom: 6em;
	border-radius: 2em;
	overflow: hidden;
	min-height: 30em;

	@media (min-width: 1001px) {
		display: flex;
		margin-left: auto;
		margin-right: auto;
	}

	.image {
		@media (min-width: 1001px) {
			width: 50%;
		}

		@media (max-width: 1000px) {
			height: 25em;
		}
	}

	.text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #132974;
		color: white;

		@media (min-width: 1001px) {
			width: 50%;
			padding: 4em;
		}

		@media (max-width: 1000px) {
			padding: 3em 2em;
		}

		p {
			margin-bottom: 1em;
		}

		.title {
			font-weight: 600;
			color: white;
			font-size: 1.8em;
		}

		.normal {
			font-weight: 300;
			color: white;
			line-height: 1.3;
			font-size: 0.95em;
		}

		.ilink {
			margin-top: 2em;
			padding: 0.7em 4em;
			text-align: center;
			font-weight: bold;
			border: 1px solid white;
			border-radius: 3em;
			display: table;
			margin-left: auto;
			margin-right: auto;
			font-size: 1.1em;
		}
	}
}

.cont-list {
	padding: 0 1em;
}

.cont-item {
	display: none;

	&.active {
		display: block;
	}
}

.lone-cont .cont-item {
	display: block;
}

#contacto {
	.main.contain {
		width: 90vw;
	}

	.blue-sec {
		@media (min-width: 1001px) {
			margin: 5vw 0;
			border-radius: 0.8vw;
			padding-top: 3vw;
			background: #132974;
			position: relative;
		}

		@media (max-width: 1000px) {
			margin: 0 0 5vw 0;
		}

		.map {
			background: #f2f2f2;
			position: relative;
			height: 28vw;
		}

		.address {
			color: white;

			@media (max-width: 1000px) {
				background: #132974;
				border-radius: 0.8vw;
				padding: 2vw;
			}

			@media (min-width: 1001px) {
				padding: 4vw 0 4vw 10vw;
				font-size: 1vw;
			}

			@media (max-width: 1000px) {
				font-size: 1vw;
			}

			span {
				font-weight: 600;
			}
		}

		form.common {
			@media (min-width: 1001px) {
				position: absolute;
				top: -2vw;
				right: 6vw;
				width: 30vw;
			}
		}
	}
}

form.common {
	border-radius: 0.8vw;
	margin-bottom: 1vw;
	background: #f6f5f2;

	@media (min-width: 1001px) {
		padding: 4vw;
	}

	@media (max-width: 1000px) {
		padding: 2vw;
	}

	.form-title {
		text-align: center;
		font-weight: 600;
		margin-bottom: 1.5vw;
		font-size: 1.4vw;
	}

	label {
		padding-left: 0.8vw;
		color: #707070;
		margin-bottom: 0.3vw;
		display: block;
		font-size: 1vw;
	}

	input, textarea {
		margin-bottom: 1vw;
		border: 1px solid #B5B5B5;
		border-radius: 0.5vw;
		background: transparent;
		width: 100%;
		font-size: 0.7vw;
	}

	input {
		height: 2.7vw;
		padding: 0 0.8vw;
	}

	textarea {
		height: 7vw;
		padding: 0.5vw 0.8vw;
		resize: none;
	}

	button {
		margin-top: 1vw;
		display: table;
		margin-left: auto;
		margin-right: auto;
		background: #132974;
		font-weight: 300;
		color: white;
		padding: 0.6em 1.5em;
		border-radius: 0.7em;
		font-size: 0.8vw;
	}
}

#page-almacenamiento {
	form {
		margin-top: 10vw;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 50vw;

		@media (min-width: 1001px) {
			.cols {
				display: flex;
				justify-content: space-between;

				.col {
					width: 45%;
				}
			}
		}
	}

	.img-gnn {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 15vw;
		margin-bottom: 8vw;
	}
}

#page-grupo-canels {
	.normal-text {
		margin: 5em 0;
		text-align: center;
		font-weight: 300;
		font-size: 1.3em;

		.contain {
			@media (min-width: 1001px){
				width: 60vw;
			}
		}

		span {
			font-weight: 600;
		}

		p {
			margin-bottom: 1.5em;
		}
	}

	.big-text {
		text-align: center;
		font-weight: 600;
		margin-bottom: 4em;
		font-size: 1.8em;
	}

	.contain.gl {
		width: 70em;
	}

	.group-list {
		@media (min-width: 1001px) {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.group-item {
			border-radius: 2em;
			overflow: hidden;
			margin-bottom: 3em;
			background: #132974;

			@media (min-width: 1001px) {
				width: 21em;
			}

			.image {
				position: relative;
				height: 10em;
			}

			.blue {
				padding: 2em 1em;

				.title {
					text-align: center;
					font-weight: 600;
					color: white;
					font-size: 1.1em;
				}

				.desc {
					text-align: center;
					color: white;
					line-height: 2;
					margin-bottom: 1em;
					font-size: 0.8em;
				}

				.more {
					font-weight: 600;
					color: white;
					display: table;
					margin-left: auto;
					margin-right: auto;
					border: 1px solid white;
					padding: 0.8em 2em;
					border-radius: 1.6em;
					font-size: 0.7em;
				}
			}
		}
	}

	.img-plant {
		margin-bottom: 3em;
	}

	.planeta-title {
		text-align: center;
		font-weight: bold;
		color: #132974;
		font-size: 175%;
	}

	.planeta-subtitle {
		text-align: center;
		font-weight: 600;
		font-size: 150%;
	}
}

#page-inmobiliaria {
	.img-ci {
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 3em;

		@media (min-width: 1001px) {
			width: 20em;
		}

		@media (max-width: 1000px) {
			width: 80%;
		}
	}

	.normal-text {
		margin: 5em 0;
		text-align: center;
		font-weight: 300;
		p {font-size: 1.3em;}

		.contain {
			width: 60em;
		}

		span {
			font-weight: 600;
		}

		p {
			margin-bottom: 1.5em;
		}
	}

	p.blue-title {
		text-align: center;
	    font-weight: bold;
	    color: #132974;
	    margin-bottom: 2em;
	    font-size: 2.3em !important;
	}

	.tabs {
		margin: 6em 0;
		border-radius: 3em;
		overflow: hidden;

		@media (min-width: 1001px) {
			display: flex;
			margin-left: auto;
			margin-right: auto;
			width: 75em;
		}

		.image {
			min-height: 35em;
			position: relative;

			@media (min-width: 1001px) {
				width: 40em;
			}
		}

		.blue {
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: #132974;
			padding: 3em;

			@media (min-width: 1001px) {
				width: 35em;
			}

			p {
				font-weight: 300;
				color: white;
				margin-bottom: 1em;
				font-size: 1em;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.title {
				font-weight: 600;
				font-size: 2em;
			}
		}
	}
}

#confiteria {
	.big-p {
		padding: 0 1vw;
		text-align: center;
		font-weight: 600;
		font-size: 1.8vw;
	}

	.marcas-p {
		padding: 0 1vw;
		text-align: center;
		font-weight: 600;
		color: #132974;
		font-size: 2vw;
	}

	.space {
		height: 7vw;
	}

	.image-text-cols {
		max-width: 75em;
	}

	img.usa {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 25vw;
	}

	.white-common {
		margin-bottom: 1vw;
	}

	.logo-sec {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 75vw;
		margin-bottom: 6vw;
	}
}

#page-servicios-aereos .img-sag {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 15em;
	margin-bottom: 3em;
}

#page-fundacion-canels .img-fundacion {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 15em;
	margin-bottom: 3em;
}

#patrocinios .img-timeline {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	margin-bottom: 6vw;
}