:root {
	--font-primary: 'Montserrat', sans-serif;
	--color-outdoor: rgba(50,99,50,1);
}

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

.text-outdoor { color: var(--color-outdoor); }

header {
	background: rgba(255,255,255,1);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,237,227,1) 100%);
}

main {
	padding-bottom: 0 !important;
}

.box { aspect-ratio: 1/1; }

.box-logo {
	padding: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
	color: white;
	aspect-ratio: 1/1;
}
.box-logo img { transition: all 0.2s ease-in; }
.box-logo:hover img { scale: 1.1; }
.box-logo button {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-right: auto!important;
	margin-left: auto!important;
	background-color: black;
	border-color: white;
	border-style: solid;
	border-width: 1px;
	color: white;
}

.box-bird {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
	color: gray;
	aspect-ratio: 1/1;
}

#bloque-martin_logan .box-img-1 {
	background-image: url("/microsites/outdoor/background-martin_logan-1.jpg");
	background-size: cover;
	background-position: center;
}
#bloque-martin_logan .box-img-2 {
	background-image: url("/microsites/outdoor/background-martin_logan-2.jpg");
	background-size: cover;
	background-position: center;
	aspect-ratio: 2/1;
}
#bloque-martin_logan .box-img-3 {
	background-image: url("/microsites/outdoor/background-martin_logan-3.jpg");
	background-size: cover;
	background-position: center;
}

#bloque-focal .box-img-1 {
	background-image: url("/microsites/outdoor/background-focal-1.jpg");
	background-size: cover;
	background-position: center;
}
#bloque-focal .box-img-2 {
	background-image: url("/microsites/outdoor/background-focal-2.jpg");
	background-size: cover;
	background-position: center;
	aspect-ratio: 2/1;
}
#bloque-focal .box-img-3 {
	background-image: url("/microsites/outdoor/background-focal-3.jpg");
	background-size: cover;
	background-position: center;
}

#bloque-klipsch .box-img-1 {
	background-image: url("/microsites/outdoor/background-klipsch-1-1.jpg");
	background-size: cover;
	background-position: center;
}
#bloque-klipsch .box-img-2 {
	background-image: url("/microsites/outdoor/background-klipsch-2-1.jpg");
	background-size: cover;
	background-position: center;
	aspect-ratio: 2/1;
}
#bloque-klipsch .box-img-3 {
	background-image: url("/microsites/outdoor/background-klipsch-3-1.jpg");
	background-size: cover;
	background-position: center;
	aspect-ratio: 1/1;
}
#bloque-klipsch .box-img-4 {
	background-image: url("/microsites/outdoor/background-klipsch-4.jpg");
	background-size: cover;
	background-position: center;
	aspect-ratio: 1/1;
}

#bloque-sonus_faber .box-img-1 {
	background-image: url("/microsites/outdoor/background-sonus_faber-1.jpg");
	background-size: cover;
	background-position: center;
}
#bloque-sonus_faber .box-img-2 {
	background-image: url("/microsites/outdoor/background-sonus_faber-2.jpg");
	background-size: cover;
	background-position: center;
	aspect-ratio: 2/1;
}
#bloque-sonus_faber .box-img-3 {
	background-image: url("/microsites/outdoor/background-sonus_faber-3.jpg");
	background-size: cover;
	background-position: center;
}

#bloque-1 {
	position: relative;
	height: 50vh;
	min-height: 450px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("/microsites/outdoor/background-1.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-position-y: 55%;
}
#bloque-1::before {
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.75);
}
#bloque-1 p {
	position: relative;
	color: white;
	font-size: 2.5rem;
	line-height: 1.2;
	text-align: center;
}

#bloque-2 {
	position: relative;
	min-height: 450px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("/microsites/outdoor/background-2.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-position-y: 55%;
}
#bloque-2::before {
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.50);
}
#bloque-2 p {
	position: relative;
	color: white;
}

#bloque-3 {
	position: relative;
	min-height: 450px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("/microsites/outdoor/background-3.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-position-y: 55%;
}
#bloque-3::before {
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.75);
}
#bloque-3 p {
	position: relative;
	text-align: center;
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: white;
}

#bloque-4 {
	position: relative;
	min-height: 450px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("/microsites/outdoor/background-4.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-position-y: 55%;
}
#bloque-4::before {
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.4);
}
#bloque-4 p {
	position: relative;
	color: white;
}

#bloque-5 {
	position: relative;
	height: 50vh;
	min-height: 450px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("/microsites/outdoor/background-5.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-position-y: 55%;
}
#bloque-5::before {
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.4);
}
#bloque-5 p {
	position: relative;
	font-size: 2.5rem;
	line-height: 1.2;
	font-weight: 800;
	color: white;
}
#bloque-5 img {
	width: 75%;
	position: relative;
}

footer {
	background: rgba(255,237,227,1);
}
footer p {
	font-size: 3rem;
	font-weight: 800;
}
footer #contacto {
	font-size: 1.25rem;
	font-weight: 800;
}
footer #contacto img {
	height: 1.75rem;
	width: 1.75rem;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#bloque-1 p {
		font-size: 4rem;
	}
	#bloque-martin_logan {
		background-image: url("/microsites/outdoor/background-martin_logan.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
	#bloque-focal {
		background-image: url("/microsites/outdoor/background-focal.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
	#bloque-klipsch {
		background-image: url("/microsites/outdoor/background-klipsch.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
	#bloque-sonus_faber {
		background-image: url("/microsites/outdoor/background-sonus_faber.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
	.box-logo button {
		margin-top: 1rem!important;
		font-size: 0.7rem;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#bloque-3 p {
		font-size: 3rem;
	}
	#bloque-5 p {
		font-size: 3rem;
	}
	.box-logo button {
		margin-top: 1.5rem!important;
		font-size: 1rem;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#bloque-3 {
		height: 50vh;
	}
	#bloque-3 p {
		font-size: 4rem;
	}
	#bloque-4 {
		height: 50vh;
	}
	#bloque-5 p {
		font-size: 4rem;
	}
	#bloque-5 img {
		width: 50%;
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	#bloque-2 {
		height: 50vh;
	}
	#bloque-5 img {
		width: 60%;
	}
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {  }

/* hero scroll-down link */
.scroll-down {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 5%;
	display: block;
	width: 45px;
	height: 45px;
	border: 2px solid var(--color-outdoor);
	background-size: 14px auto;
	border-radius: 50%;
	z-index: 2;
	-webkit-animation: bounce 2s infinite 2s;
	animation: bounce 2s infinite 2s;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
}
.scroll-down:before {
	position: absolute;
	top: calc(50% - 8px);
	left: calc(50% - 6px);
	transform: rotate(-45deg);
	display: block;
	width: 12px;
	height: 12px;
	content: "";
	border: 2px solid var(--color-outdoor);
	border-width: 0px 0 2px 2px;
}
@keyframes bounce {
	0%,
	100%,
	20%,
	50%,
	80% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		transform: translateY(-10px);
	}
	60% {
		-webkit-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}