* {

	font-family: 'Abel', sans-serif;

	font-size: 18px;

}

body {

	margin: 0;

}

div.modal-blur.opened {
	filter:blur(2px);
}
:root {

	--gray-light: #dbdbdb;

	--gray-medium: #a2a2a2;

	--blue-light: #005abc;

	--blue-dark: #032e5d;

	--blue-active: #7ca3cd;

	--green: #84b784;

	--green-light: #009d38;

	--green-dark: #0b5d28;

	--green-valid: #18c418;

	--red: #FF0000;

	--red-invalid: #ffeaea;

	box-sizing: border-box;

}



h1 {

	font-size: 1em;

}



h2 {

	font-size: 1.4em;

}



p {

	line-height: 1.3em;

}



a,

a:hover,

a:visited {

	text-decoration: none;

	color: inherit;

}



a.button {

	display: inline-block;

	padding: 10px 20px;

	color: white;

	background-color: var(--green-light);

	border-radius: 10px;

	transition: background-color 0.25s ease;

}



a.button:hover {

	background-color: var(--green-dark);

}



.wrapper {

	position: relative;

	width: 1000px;

	margin: 0px auto;

}



.flex-1col {

	display: flex;

	justify-content: space-around;

	flex-wrap: wrap;

}



.grid-2col {

	display: grid;

	grid-template-columns: repeat(2, 1fr);

	grid-column-gap: 10%;

	align-items: center;

}



/* ------- Media Queries ------- */



@media screen and (max-width: 1000px) {

	.wrapper {

		width: 85%;

	}

}



@media screen and (max-width: 768px) {

	* {

		font-size: 16px;

	}

}



@media screen and (max-width: 500px) {

	h2 {

		font-size: 1.2em;

	}



	.wrapper {

		width: 95%;

	}



	div#fp-nav {

		display: none;

	}



	section.wrapper.home {

		padding-top: 90px;

	}

	section.wrapper.como-hacemos {

    	padding-top: 30px;

	}

	section.wrapper.soluciones {

		padding-top: 80px;

	}



	section.wrapper.soluciones h2 {

		margin-bottom: 5px;

	}



	section.wrapper.logos {

		padding-top: 30px;

	}

	section.wrapper.contacto {

		padding-top: 30px;

	}

}



/**************************************

		HEADER

**************************************/



header {

	position: fixed;

	height: 80px;

	width: 100%;

	background-color: white;

	border-bottom: 1px solid var(--gray-light);

	z-index: 1000;

}



header > div.wrapper {

	display: flex;

	justify-content: space-between;

}



.header-logo {

	display: flex;

	justify-content: center;

	align-items: center;

	height: 80px;

	transition: 0.5s ease;

}



.header-logo img {

	height: 70%;

	object-fit: cover;

}



.main-nav {

	overflow: hidden;

	transition: .5s ease;

}



.main-nav ul {

    list-style: none;

    display: flex;

    align-items: center;

    height: 100%;

    margin: 0;

    padding: 0;

}



.main-nav ul li {

    font-size: 0.9em;

	display: inline-block;

	height: 100%;

	text-align: center;

}



.main-nav ul a {

    display: flex;

    height: 100%;

    padding: 0 21px;

    align-items: center;

	transition: 0.25s ease;

}



@media screen and (min-width: 1000px) {

	.main-nav ul a:hover {

		color: white;

		background-color: var(--blue-light);

	}

}



.main-nav ul a.active-link {

	background-color: var(--blue-active);

	color: white;

}



/* ----- HEADER MEDIA QUERIES ----- */



@media screen and (max-width: 768px) {

	.header-logo {

		margin-left: 10px;

	}



	.main-nav ul li a {

		font-size: 0.7em;

	} 



	.header-logo img {

		height: 40%;

	}	

}



@media screen and (max-width: 500px) {

	header {

		height: auto;

	}



	header > div.wrapper {

		flex-wrap: wrap;

		width: 100%;

	}



	.header-logo {

		width: 100%;

		height: 40px;

		margin: 10px 0;

	}



	.header-logo img {

	    height: 100%;

	}



	.main-nav {

		display: inline-block;

		width: 100%;

	}



	.main-nav ul {

		justify-content: space-evenly;

	}



	.main-nav ul li {

		padding: 5px 0;

		flex-grow: 1;

	}



	.main-nav ul a {

		padding: 0;

		justify-content: center;

	}



	.main-nav ul li a {

	    font-size: 0.9em;

	}

}







/**************************************

		HOME

**************************************/

section.home p,

section.home h1 {

	color: white;

	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1),

	1px 1px 5px rgba(0, 0, 0, 0.72);

}



section.home div {

	text-align: center;

}



p.title {

	font-size:2.5em;

	font-weight:bold;

}



section.home p:not(.title) {

	font-size:1.7em;

}



a.button.home {

	font-size: 1.35em;

}



img.svg-icon {

    width: 65px;

    display: block;

    margin-bottom: 5px;

}



/**************************************

		VIDEO Or IMAGE BACK

**************************************/



video {

	position: fixed;

	z-index: -1;

}



@media (min-aspect-ratio: 16/9) {

	video {

		width: 100%;

		height: auto;

	}

}



@media (max-aspect-ratio: 16/9) {

	video {

		width: auto;

		height: 100%;

	}

}



div.background {

	position: absolute;

	top: 0;

	width: 100vw;

	height: 100vh;

	background: url(../img/backs/home.jpg) no-repeat center center;

	background-size: cover;

	z-index: -100;

	/* background-attachment: fixed; */



}



div.opacity-screen.black {

	background-color: black;

}



div.opacity-screen.white {

	background-color: white;

}



div.opacity-screen {

	opacity: 0.5;

	position: absolute;

	top: 0;

	width: 100vw;

	height: 100vh;

	z-index: -10;

}



/* ----- HOME MEDIA QUERIES----- */

@media screen and (max-width: 500px) {

	p.title {

	    font-size: 1.8em;

	    width: 300px;

	    margin: 0 auto;

	}



	section.home p:not(.title) {

	    font-size: 1.1em;

	}

}



/**************************************

		SERVICIOS

**************************************/





div.background.como-hacemos {

	background: url(../img/backs/como.jpg) no-repeat center center;

	background-size: cover;

	/* background-attachment: fixed; */

}



div.servicios div.opacity-screen.white {

	opacity: 0.9;

}



.servicios-seccion h2 {

	font-size: 1.5em;

}



.servicios {

	display: grid;

	grid-template-columns: 1fr;

}



.servicio-unit {

	display:flex;

	align-items: center;

	margin: 20px 0;

}



.servicio-icon {

    display: grid;

    grid-template-rows: repeat(5,1fr);

    grid-row-gap: 2px;

    margin-right: 19px;

}



.led-light {

	height:8px;

	width:25px;

	opacity: 0.1;

	background-color: green;

}



.led-light-red {

	background-color: #990303;

}



.led-light-yellow {

	background-color: #987105;

}



.led-on {

	opacity: 1;

}



.glow-green {

	background-color: #08de08;

	-webkit-box-shadow:0px 0px 1px 0px rgba(8,222,8,0.9);

	-moz-box-shadow: 0px 0px 1px 0px rgba(8,222,8,0.9);

	box-shadow: 0px 0px 1px 0px rgba(8,222,8,0.9);

}



.glow-yellow {

	background-color: #f5af00;

	-webkit-box-shadow:0px 0px 1px 0px rgba(245,222,8,0.9);

	-moz-box-shadow: 0px 0px 1px 0px rgba(245,222,8,0.9);

	box-shadow: 0px 0px 1px 0px rgba(245,222,8,0.9);

}



.glow-red {

	background-color: #ff1100;

	-webkit-box-shadow:0px 0px 1px 0px rgba(255,17,0,0.9);

	-moz-box-shadow: 0px 0px 1px 0px rgba(255,17,0,0.9);

	box-shadow: 0px 0px 1px 0px rgba(255,17,0,0.9);

}



.servicio-desc strong {

	font-size: 1em;

}



.servicio-desc p {

	font-size: 1.35em;

	line-height: 1.25em;

	margin: 0;

}



/* ----- SERVICIOS MEDIA QUERIES ----- */



@media screen and (max-width: 500px) {

	.servicios-seccion {

		width: 95%;

	}



	.servicios-seccion h2 {

	    font-size: 1.5em;

	    text-align: center;

	}



	.servicio-icon {

		margin-right: 10px;

	}



	.led-light {

	    height: 3px;

	    width: 16px;

	}



	.servicio-unit {

		margin: 6px 0;

	}



	.servicio-desc p {

		font-size: 1.2em;

	}



	.servicio-desc strong {

		font-size: 1em;

	}

}



/**************************************

		SOLUCIONES

**************************************/



section.wrapper.soluciones {

	text-align: center;

	color: white;

}





div.soluciones div.opacity-screen.white {

	opacity: 0.05;

}



div.background.soluciones {

	background: url(../img/backs/soluciones.jpg) no-repeat right center;

	background-size: cover;

	/* background-attachment: fixed; */

}



.soluciones-grid {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	text-align: left;

	width: 75%;

	margin: 0 7% 0 18%;

}



.solucion-item {

    margin: 0;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    font-size: 1.1em;

}



.solucion-item::before {

	content: '';

    width: 30px;

    height: 20px;

    display: inline-block;

    background: url(../img/check.svg) no-repeat center center;

    background-size: contain;

}



/* ----- SWIPER CONTAINER ----- */

.swiper-container {

    margin-top: 20px;

    width: 100%;

    height: 300px;

}



.swiper-slide {

	background-position: center;

    background-size: cover;

    width: 300px;

    height: 300px;

}



/* ----- SOLUCIONES MEDIA QUERIES ----- */



@media screen and (max-width: 768px) {

	.solucion-item {

		font-size: 0.8em;

		margin-bottom: 8px;

	}



	.swiper-container {

	    height: 200px;

	}



	.swiper-slide {

	    width: 200px;

	    height: 200px;

	}

}



@media screen and (max-width:500px) {

	.soluciones-grid {

	    grid-template-columns: repeat(3, 1fr);

	    width: 90%;

	    margin: 0 5%;

	}



	.solucion-item {

	    margin-bottom: 0px;

	}



	.solucion-item::before {

	    width: 14px;

	}



	.swiper-container {

	    height: 150px;

	}



	.swiper-slide {

	    width: 150px;

	    height: 150px;

	}

}



@media screen and (max-width: 400px) {

	.swiper-container {

	    height: 130px;

	}



	.swiper-slide {

	    width: 130px;

	    height: 130px;

	}

}



/**************************************

		MARCAS

**************************************/



section.logos {

	margin-top: 50px;

}



div.background.marcas {

	background: url(../img/backs/marcas.jpg) no-repeat center center;

	background-size: cover;

	/* background-attachment: fixed; */

}



div.marcas div.opacity-screen {

    opacity: 0.98;

}



section.logos div {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 20%;

	margin: 0 2%;

}



section.logos .behringer {

	width: 115px;

}



section.logos .cervin {

	width: 170px;

}



@media screen and (max-width: 768px) {

	section.logos div img {

		width: 95%;

	}



	section.logos .behringer {

		width: 80%;

	}



	section.logos .cervin {

		width: 110%;

	}

}



@media screen and (max-width: 500px) {

	section.logos div {

		width: 30%;

		margin: 0;

	}



	section.logos div img {

		width: 75%;

	    height: 63px;

	    object-fit: contain;

	}



	section.logos .behringer {

		width: 50%;

	}



	section.logos .cervin {

		width: 70%;

	}

}



/**************************************

		CONTACTO

**************************************/

div.section.contacto {

	overflow: hidden;

	color: white;

}



section.wrapper.contacto {

    margin-top: 150px;

}



div.section.contacto > .fp-tableCell {

	vertical-align: top;

}



div.background.contacto {

	background: url(../img/backs/contacto.jpg) no-repeat center center;

	background-size: cover;

	/* background-attachment: fixed; */

}

div.contacto div.opacity-screen.black {

	opacity: 0.65;

}



.text-center {

	text-align: center;

}



form {

	display: grid;

	grid-template-columns: repeat(2, 1fr);

	width: 100%;



}



div.form {

	position: relative;

	display: grid;

	grid-template-columns: 1fr 4fr;

	align-items: center;

}



div.form-mandatory {

	display: none;

}



.notificacion.show {

    position: absolute;

    right: 28px;

    background: var(--red);

    padding: 0 10px 5px 10px;

    z-index: 1;

    top: -12px;

    border-radius: 5px 5px;

}



.notificacion:after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 0;

    border: 12px solid transparent;

    border-top-color: var(--red);

    border-bottom: 0;

    border-left: 0;

    margin-left: 41.5px;

    margin-bottom: -8px;

}



.notificacion.hidden {

	display:none;

}



label {

	text-align: right;

}



input {

    height: 33px;

    margin: 10px 20px;

    border-radius: 5px;

    border: 1px solid var(--gray-medium);

    padding: 2px 10px;

}



div.form.message {

	grid-column: span 2;

	grid-template-columns: 1fr 9fr;

}



/* HIDE ARROWS */

	/* Chrome, Safari, Edge, Opera */

	input::-webkit-outer-spin-button,

	input::-webkit-inner-spin-button {

	  -webkit-appearance: none;

	  margin: 0;

	}



	/* Firefox */

	input[type=number] {

	  -moz-appearance: textfield;

	}



textarea {

	resize: none;

	height: 100px;

	margin: 10px 20px;

	padding: 2px 10px;

	border-radius: 5px;

	border: 1px solid var(--gray-medium);

}



input:focus,

textarea:focus {

	outline-color: var(--blue-active);

}



input.valid,

textarea.valid {

	box-shadow: inset 0px 0px 0px 2px var(--green-valid);

}



input.invalid,

textarea.invalid {

	box-shadow: inset 0px 0px 0px 2px var(--red);

	background-color: var(--red-invalid);

}



.btn-enviar {

    grid-column: span 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

}



input.button.enviar {

	height: 45px;

    width: 140px;

    background-color: var(--green-light);

    color: white;

    border: none;

    transition: background-color 0.25s ease;

    cursor: pointer;

}





input.button.enviar:hover {

	background-color: var(--green-dark);

}



input.button.enviar:disabled {

	background-color: #c7d4ca;

}

div.telefonos-contacto {

	margin-top: 30px;

	width: 60%;

    margin-left: 20%;

    grid-column-gap: 30px;

}



div.phone-icon {

	justify-self: end;

	width: 100px;

}



div.phone-icon img {

	width: 100%;

}



div.telefonos {

	display: grid;

	grid-template-columns: 1fr;

	text-align: left;

}



div.telefonos a {

	display: inline-block;

	margin: 10px 0;

	font-size: 1.2em;

}



@media screen and (max-width: 600px) {

	section.wrapper.contacto {

		margin-top: 100px;

		transition: 0.25s ease;

	}



	section.wrapper.contacto h2 {

		margin-bottom: 5px;

	}



	form {

		display: grid;

		grid-template-columns: 1fr 1fr;

		width: 100%;

	}



	div.form {

		grid-template-columns: 1fr;

	}



	label {

		display: none;

	}



	input {

		width: 82%;

	    height: 20px;

	    margin: 5px 5px;

	}	



	div.form.message {

		grid-column: span 2;

		grid-template-columns: 1fr;

	}



	textarea {

		height: 50px;

		margin: 5px 5px;

	}





	.notificacion.show {

		right: 3px;

		top: -23px;

		z-index: 1000;

	}



	.notificacion.show.telefono {

		top: -45px;

	}



	input.button.enviar {

    	height: 30px;

    }



	div.telefonos-contacto {

		width: 100%;

    	margin-left: 0; 

    	grid-template-columns: 1fr 1fr;

    	grid-column-gap: 10px;

    	margin-top: 5px;

	}



	div.telefonos a {

		font-size: 0.8em;

		margin: 3px 0;

	}



	div.phone-icon {

	    max-height: 50px;

	    width: 50px;

	    object-fit: cover;



	}



	div.phone-icon img {

	    width: 80%;

	}

}



/**************************************

		404 & TY PAGE

**************************************/



.one-pager.error404,

.one-pager.gracias {

	display: grid;

	justify-content: center;

	align-items: center;

	width: 100vw;

	height: 100vh;

}



.one-pager.gracias {

	color: white;

	text-shadow: 0px 0px 5px rgba(0, 0, 0, 1),

		0px 0px 10px rgba(0, 0, 0, 0.5);

}



.columna-derecha.error404 {

    text-align: center;

}



.error404 h2 {

	font-size: 3em;

}



.error404 p {

	font-size: 1.3em;

}



.error404 span {

	font-size: 1.1em;

	font-weight: bold;

}



@media screen and (max-width: 500px) {

	.one-pager .grid-2col {

		grid-template-columns: 1fr;

		justify-content: center;

	}





	.one-pager .columna-izquierda,

	.one-pager .columna-derecha {

		text-align: center;

	}

	.one-pager .columna-izquierda {

		order: 2;

	}



	.one-pager .columna-derecha {

		order: 1;

	}



	.one-pager .columna-derecha h2 {

		margin-bottom: 10px;

	}



	.one-pager .columna-derecha p {

		margin-top: 0;

	}



	.one-pager .columna-izquierda img{

		width: 40%;

		margin-top: 30px;

	}

}

.img-modal {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1200;
	transition: 0.25s ease;
	opacity: 1;
}

.img-modal.hidden {
	visibility: hidden;
	opacity: 0; /* Necesario para animar */
}

.img-modal .cover-background {
	width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-modal .full-image {
    background-color: transparent;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-modal {
	color: white;
	position: fixed;
	top: 5px;
	right: 45px;
}


.img-modal .full-image p.modal-image-container {
	display: flex;
	justify-content: center;
	align-items: center;;
}

@media (min-aspect-ratio: 16/9) {

	.img-modal .full-image p.modal-image-container {

		width: auto;

		height: 76vh;

	}

}



@media (max-aspect-ratio: 16/9) {

	.img-modal .full-image p.modal-image-container {

		width: 85vw;

		height: 80vh;

	}

}

.img-modal .full-image img {
    height: 100%;
    object-fit: contain;
    width: 100%;
    display: block;
}

.img-modal .full-image p.modal-image-container:after {
    content: "\2716\205F Cerrar";
    font-size: 18px;
    color: #FFF;
    text-align: center;
    position: absolute;
    bottom: 30px;
    border: 2px solid;
    padding: 2px 20px;
    border-radius: 8px;
}