@charset "utf-8";
/* CSS Document */


/* ---------------------------
# ROOT
----------------------------*/
:root {

	/* colores base */
	--fff-rgb          : 255 255 255;
	--f5f-rgb          : 245 245 245;
	--bbb-rgb          : 187 187 187;
	--eee-rgb          : 238 238 238;
	--ddd-rgb          : 221 221 221;
	--ccc-rgb          : 204 204 204;
	--999-rgb          : 153 153 153;
	--666-rgb          : 102 102 102;
	--333-rgb          : 51 51 51;
	--222-rgb          : 34 34 34;
	--111-rgb          : 17 17 17;
	--000-rgb          : 2 3 4;

	--fff              : rgb(var(--fff-rgb));
	--f5f              : rgb(var(--f5f-rgb));
	--bbb              : rgb(var(--bbb-rgb));
	--eee              : rgb(var(--eee-rgb));
	--ddd              : rgb(var(--ddd-rgb));
	--ccc              : rgb(var(--ccc-rgb));
	--999              : rgb(var(--999-rgb));
	--666              : rgb(var(--666-rgb));
	--333              : rgb(var(--333-rgb));
	--222              : rgb(var(--222-rgb));
	--111              : rgb(var(--111-rgb));
	--000              : rgb(var(--000-rgb));
	--placeholder      : rgb(var(--666));

	--color-cygnus-hash: #003F55; 
	--color-cygnus-rgb : 0 63 85;
	--cygnus           : rgb(var(--color-cygnus-rgb));

	--color-1          : var(--cygnus);
	--color-2          : #289BA7;
	--color-3          : #E76162;
	--color-4          : #666666;


	/* form */
	--msj-ok-tx        : #00ad17;
	--msj-ok-bg        : #e5ffe8;
	--msj-error-tx     : #c40000;
	--msj-error-bg     : #ffe5e5;
	--msj-info-tx      : #a39200;
	--msj-info-bg      : #fffbdb;

	/* font base */
	--font-awesone     : "Font Awesome 6 Free";
	--font-material    : "Material Symbols Outlined";
	
	/* font web */
	--font-1           : 'Lato', sans-serif;
	--font-ico         : 'icomoon' !important;
	--font             : var(--font-1);


	/* size */
	--size             : 1rem; /* 16px */
	--size-1           : 3.4rem; /* 60px */
	--size-2           : 2.8rem; /* 34px */
	--size-3           : 2.3rem; /* 30px */
	--size-4           : 1.9rem; /* 26px */
	--size-5           : 1.45rem; /* 22px */
	--size-6           : 1.25rem; /* 18px */

	--display          : 1.35;

	--display-1        : calc(var(--size-1) * var(--display)); /* 74px */
	--display-2        : calc(var(--size-2) * var(--display)); /* 67px */
	--display-3        : calc(var(--size-3) * var(--display)); /* 54px */
	--display-4        : calc(var(--size-4) * var(--display)); /* 44px */
	--display-5        : calc(var(--size-5) * var(--display)); /* 34px */
	--display-6        : calc(var(--size-6) * var(--display)); /* 28px */

	--line-height      : 1.5;
	--line-height-tit  : 1.15;

	/* container */
	--container-full   : 100%;
	--container-gr     : 1500px;
	--container-md     : 1300px;
	--container-ch     : 1140px;
	--padding-container: 60px;

	/* header */
	--h-header         : 85px;
	--h-header-scroll  : 60px;

	/* logo */
	--w-logo           : 269px;
	--w-logo-scroll    : 190px;

	/* gap */
	--gap              : 30px;

	/* radius */
	--radius           : 0;

	/* ratio */
	--ratio            : 60%;

	/* efectos */
	--transition       : all .3s ease-in;
	--opacity          : 0;

} 

*, 
:before,
:after{
	margin                  : 0;
	padding                 : 0; 
	box-sizing              : border-box;
	position                : relative;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust   : none;
	-ms-text-size-adjust    : none; 
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust   : 100%; 
	-ms-text-size-adjust    : 100%;

	will-change             : auto;
}




/* ---------------------------
#BODY - HTML
----------------------------*/
html {
	scroll-behavior: none !important;
}

body {
	font-size       : var(--size);
	color           : var(--333);
	background-color: var(--fff);
}





/* ---------------------------
#CONT
----------------------------*/
#cont {
	transition: all .5s ease;
}

.cont,
.cont-mini,
.cont-mini-2{
	padding: 0 15px
}
.container--ful {
	max-width: var(--container-full);
}
.cont,
.container--gr {
	max-width: var(--container-gr)
}
.cont-mini,
.container--md {
    max-width: var(--container-md);
}
.cont-mini-2,
.conainer--ch {
    max-width: var(--container-ch);
}






/* ---------------------------
#TEXTO'S
----------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font);
	margin     : 0;
	line-height: normal;
}
h1 {
	font-size: var(--size-1);
}
h2 {
	font-size: var(--size-2);
}
h3 {
	font-size: var(--size-3);
}
h4 {
	font-size: var(--size-4);
}
h5 {
	font-size: var(--size-5);
}
h6 {
	font-size: var(--size-6);
}
p{
	line-height: 1.5;
}

a{
	cursor: pointer;
	text-decoration: none;
    color: #333
}
a:link{}
a:hover{}
a:visited{}






/* ---------------------------
#ICONOS
----------------------------*/
.material-symbols-outlined {
	opacity   : 0;
	transition: all .5s ease;
}

/* servicios */
.ico-medida:before{
	background-image: url(../img/servicios/medida.svg);
}
.ico-ads:before{
	background-image: url(../img/servicios/ads.svg);
}
.ico-grafico:before{
	background-image: url(../img/servicios/grafico.svg);
}
.ico-web:before{
	background-image: url(../img/servicios/web.svg);
}
.ico-e-commerce:before{
	background-image: url(../img/servicios/e-commerce.svg);
}
.ico-hosting:before{
	background-image: url(../img/servicios/hosting.svg);
}
.ico-dominio:before{
	background-image: url(../img/servicios/dominio.svg);
}

.ico-ssl:before{
	background-image: url(../img/servicios/ssl.svg);
}

.ico-mantenimiento:before{
	background-image: url(../img/servicios/mantenimiento.svg);
}
.ico-seo:before{
	background-image: url(../img/servicios/seo.svg);
}
.ico-wordpress:before{
	background-image: url(../img/servicios/wordpress.svg);
}
.ico-ia:before{
	background-image: url(../img/servicios/ia.svg);
	background-size: contain !important
}







/* address */
.ico-ubicacion:before{
	background-image: url(../img/ico-ubicacion.png);
}
.ico-tel:before{
	background-image: url(../img/ico-tel.png);
}
.ico-correo:before{
	background-image: url(../img/ico-correo.png);
}






/* ---------------------------
#BOTONES
----------------------------*/
.btn-scroll{
	width            : 60px;
	height           : 60px;
	padding          : 5px;
	position         : absolute;
	margin           : auto;
	display          : flex;
	align-items      : center;
	justify-content  : center;
	z-index          : 997;
	background-repeat: no-repeat;
	cursor           : pointer;
	transition       : all .5s ease;
}




/* ---------------------------
#ADDRESS
----------------------------*/
address{
	margin-top     : 60px;
	display        : flex;
	align-items    : center;
	justify-content: space-between;
}

	address > div {
		width: auto;
	}


	/* icos */
	address i:before{
		position           : relative;
		left               : 0;
		top                : 0;
		width              : 50px;
		height             : 40px;
		background-size    : auto !important;
		background-position: left !important
	}

	/* textos */
	address h6,
	address span,
	address a {
		padding-left: 0;
		width       : 100%;
		float       : left
	}


	address h6 {
		color           : var(--color-2);
		margin-bottom   : 6px;
		font-size       : var(--size);
	}
	
	address a,
	address span {
		color          : var(--color-4);
		text-decoration: none;
		font-size: var(--size-6);
	}

	address a:hover{
		text-decoration: none;
		color          : var(--color-2);
	}


	/* box */
	.box--address {
		width                : 100%;
		float                : left;
		margin-bottom        : 40px;
		display              : grid;
		grid-template-columns: 70px 1fr;
		grid-column-gap      : 20px;
	}

	.box--address {
		grid-template-columns: 35px 1fr;
		grid-column-gap      : 15px;
		margin-bottom        : 0;
		align-items          : center;
	}

		.box--address i + div  {
			width: 100%;
		}

		/* ico */
		.box--address i {
			width: 100%;
			float: left;
		}

		.box--address i:before {
			content        : '';
			width          : 100%;
			left           : 0;
			top            : 0;
			background-size: auto !important;
			display        : flex;
		}


		/* textos */
		.box--address h4,
		.box--address p {
			width       : 100%;
			float       : left;
		}

		.box--address h4 {
			color    : var(--color-1);
			font-size: var(--size-5)
		}


		.box--address p {
			color: var(--color-4);
		}






/* ---------------------------
# EFECTOS
----------------------------*/
.transition{
	transition: all 1.8s ease;
}
.efecto{
	opacity  : 0;
	transform: translateY(100px);
}




/* ---------------------------
#HEADER
----------------------------*/

/* HEADER PRINCIPAL */
#header {
	height          : var(--h-header);
	z-index         : 999;
	background-color: transparent;
	padding         : 20px 0;
	position        : fixed;
	will-change     : auto;
	transition      : height .2s ease;
}
	#header .cont {
		display: flex;
		height : 100%;
	}

		#header .d--grid {
			width                : 100%;
			float                : left;
			padding-top          : 0;
			padding-bottom       : 0;
			height               : 100%;
			line-height          : 0;
			display              : grid;
			grid-template-columns: var(--w-logo) 1fr;
			column-gap           : var(--gap);
			align-items          : center;
			justify-content      : space-between;

			transition           : all .25s ease-in;
		}

		#header .d--grid .col--left,
		#header .d--grid .col--right {
			width     : 100%;
			height    : 100%;
			float     : left;
			transition: height .2s ease;

		}

		#header .d--grid .col--left {
			display        : flex;
			align-items    : center;
			justify-content: flex-start;
		}

		#header .col--right {
			display              : grid;
			grid-template-columns: 1fr 70px;
			column-gap           : calc(var(--gap) * 2);
			align-items          : center;
			justify-content      : end;
		}







    /* SCROLL */
    .scroll--down #header {
		background-color: rgba(var(--color-cygnus-rgb) / .9);
		height          : var(--h-header-scroll);
		padding         : 0 10px;
    }

    	.scroll--down #header .d--grid {
    		grid-template-columns: var(--w-logo-scroll) 1fr;
    	}
    
    .scroll--down #header .menu li a{
		color  : var(--fff);
    }
    .scroll--down #header .menu li a:hover,
    .scroll--down #header .menu li a.active {
    	opacity:.7
    }





/* ---------------------------
# LOGO
----------------------------*/
#logo {
	width      : 100%;
	float      : left;
	margin     : 0;
	padding    : 0;
	line-height: 0;
	transition : all .3s ease;
}

	#logo a {
		width     : 100%;
		float     : left;
		margin    : 0;
		transition: all .3s ease;
	}

	#logo img {
		width     : 100%;
		margin    : 0;
		max-height: inherit;
		transition: all .3s ease;
	}

	#logo span {
		display: none
	}





/* ---------------------------
# BACKGROUND
----------------------------*/
.bg {
	position         : fixed;
	background-repeat: no-repeat;
	background-size  : contain;
	top              : 0;
	height           : 100%;

	opacity          : 1;
	z-index          : 0;
}

.bg.left{
	width              : 17%;
	left               : 0;
	background-image   : url(../img/fondo-lineas-left.png);
	background-position: left top;
}
.bg.right{
	width              : 17%;
	right              : 0;
	background-image   : url(../img/fondo-lineas-right.png);
	background-position: right bottom
}

   


/* ---------------------------
#CABEZALES
----------------------------*/
header.cabezal{
	text-align   : center;
	margin-bottom: 90px
}

	header.cabezal h3 {
		font-weight   : 300;
		font-size     : var(--size-2);
		text-transform: uppercase;
		line-height   : 1.15;
		padding-bottom: 30px;
	}

	header.cabezal h3:after {
		content : '';
		width   : 50px;
		height  : 2px;
		position: absolute;
		left    : 0;
		right   : 0;
		bottom  : 0;
		margin  : auto;
		
	}

	header.cabezal h4 {
		margin-top : 30px;
		font-size  : var(--size-6);
		text-align : center;
		font-weight: 300;
		line-height: 1.6;
	}

	/* quienes somos */
	.quienes-somos header.cabezal h3{
		color: var(--color-2)
	}
	.quienes-somos header.cabezal h3:after{
		background-color: var(--color-1)
	}

	/* servicios */
	.servicios header.cabezal h3,
	.contacto header.cabezal h3{
		color: var(--color-3)
	}
	.servicios header.cabezal h3:after,
	.contacto header.cabezal h3:after{
		background-color: var(--color-2)
	}

	/* portfolio */
	.portfolio header.cabezal h3{
		color: var(--color-1)
	}
	.portfolio header.cabezal h3:after{
		background-color: var(--color-2)
	}
 




/* ---------------------------
#TITULOS
----------------------------*/
header.tit{}







/* ---------------------------
#MENÚ
----------------------------*/

/* MAIN MENÚ */
.main-menu {
	z-index  : 998;
	float    : right;
	width    : auto;
	max-width: 100%;
	top      : auto;
	right    : 0;
}

	.menu {
		height      : 100%;
		display     : block;
		width       : auto;
		float       : right;
		margin      : 0;
		right       : 0;
	} 

		.menu li {
			width        : auto;
			float        : left;
			margin-bottom: 0;
			padding      : 0;
			margin       : 0;
			list-style   : none;
			position     : initial
		}
		.menu li:last-child {
			padding-right: 0
		}

		.menu li a {
			width          : auto;
			float          : left;
			font-size      : .85rem;
			font-weight    : 400;
			text-decoration: none;
			padding        : 15px 20px;
			cursor         : pointer; 
			text-align     : center;
			text-transform : uppercase;
			color          : var(--fff);
		} 



		.menu li a:hover,
		.menu li a.activo {
			color: var(--color-3);
		}
		.menu li a.activo {
			font-weight: bold;
		}


        /* btns */
        #flag {
            display: none;
        }

        .btn-menu {
			display : none;
			margin  : 0;
			width   : 25px;
			height  : 30px;
			cursor  : pointer;
			z-index : 99999999999999999999;
        }

        .btn-menu span {
			position  : absolute;
			top       : 0;
			right     : 0;
			bottom    : 0;
			left      : 0;
			width     : 100%;
			height    : 1px;
			margin    : auto;
			transition: background 0s .25s;
			background: var(--fff);
        }

        .btn-menu span:before,
        .btn-menu span:after {
			position           : absolute;
			width              : inherit;
			height             : inherit;
			content            : '';
			transition-delay   : .25s, 0s;
			transition-duration: .25s, .25s;
			background         : var(--fff);
        }
        .btn-menu span:before {
			top                : -8px;
			transition-property: top, -webkit-transform;
			transition-property: top, transform;
        }
        .btn-menu span:after {
			bottom             : -8px;
			transition-property: bottom, -webkit-transform;
			transition-property: bottom, transform;
        }
        .visible--menu #flag + span {
            background: none;
        } 
        .visible--menu #flag + span:before {
			top              : 0;
			-webkit-transform: rotate(45deg);
			transform        : rotate(45deg);
        }
        .visible--menu #flag + span:after {
			bottom           : 0;
			-webkit-transform: rotate(-45deg);
			transform        : rotate(-45deg);
        }
        .visible--menu #flag + span:before,
        .visible--menu #flag + span:after {
            transition-delay: 0s, .25s;
        }


        .btn-cerrar-menu{
			width  : 2rem;
			height : 2rem;
			display: none
        }

	



/* ---------------------------
#IDIOMA
----------------------------*/
.nav--idioma {
	width: auto;
	float: right;
	display: flex;
	align-items: center;
}

	.nav--idioma * {
		color          : var(--fff);
		font-size      : .85rem;
		text-decoration: none !Important;
	}

	.nav--idioma .sep {
		padding: 0 10px;
	}

	.nav--idioma .activo {
		font-weight: bold;
	}






/* ---------------------------
#MAIN
----------------------------*/
#main{}








/* ---------------------------
#ARTICLE
----------------------------*/
article h2,
article h3,
article h4,
article h5,
article h6{
	margin-bottom:0;
	text-align:left;
}

article h1 strong,
article h2 strong,
article h3 strong,
article h4 strong,
article h5 strong,
article h6 strong{
	font-weight:600
}

article p{
	width: 100%;
	float: left;
	margin-bottom: 15px
}

article p + h1,
article p + h2,
article p + h3,
article p + h4,
article p + h5,
article p + h6{
	margin-top:20px
}

article .copete p{
	font-weight: 600
}

article ul{
	width:100%;
	float:left;
	margin-bottom:20px;
	padding-left:18px;
}

article ul li{
	color      :#666;
	font-size  : var(--size);
	width      : 100%;
	float      : left;
	line-height: 1.5;
	list-style : inherit !important
}

article a{
	text-decoration: underline
}
article a:hover{
	text-decoration: none
}


	/* quienes somos */
	.quienes-somos article p{
		font-size  : var(--size-5);
		color      : var(--color-1);
		font-weight: 300
	}








/* ---------------------------
#CONTENIDO
----------------------------*/
.contenido {
	padding: 100px 0;
}





/* ---------------------------
#PORTADA
----------------------------*/
.portada{
	position : relative;
	top      : 0;
	left     : 0;
	z-index  : 1;
	/*z-index: -11 */
}

.portada:before{
	content         : '';
	position        : absolute;
	background-color: var(--cygnus);
	width           : 100%;
	height          : 100%;
	visibility      : hidden;
}

	/* textos */
	.portada .tx{
		position       : absolute;
		top            : 0;
		bottom         : 0;
		right          : 0;
		left           : 0;
		width          : 100%;
		max-width      : var(--container-ch);
		padding        : 0 30px;
		text-align     : center;
		display        : flex;
		align-items    : center;
		justify-content: center;
		z-index        : 901;
		margin         : auto;
	}

	.portada .tx h2,
	.portada .tx h2 span {
		color      : var(--fff);
		font-weight: 300;
		font-size  : var(--size-2);
	}

	#titulo span {
		opacity   : 0;
		transition: opacity 0.5s ease-in-out;
	}

	#titulo span.visible {
	    opacity: 1;
	}

	/* canvas */
	.portada #animation_container,
	.portada #animation_container canvas {
		width     : 100% !important;
		height    : 100vh !important;
		object-fit: cover;
	}

	.portada #animation_container {
		position        : absolute; 
		display         : block; 
		background-color:rgba(0, 52, 74, 1.00);
	}

	#dom_overlay_container {
		pointer-events: none; 
		overflow      : hidden; 
		width         : 100% !important; 
		height        : 100vh !important; 
		position      : absolute; 
		left          : 0px; 
		top           : 0px; 
		display       : block;
	}

	/* particle js */
	#particles-js {
		width     : 100%;
		height    : 100%;
		position  : absolute;
		top       : 0;
		left      : 0;
		transition: all 2s ease;
		opacity   : .3 !important;

		display: none !important;
	}

	/* btn */
	.portada .btn-scroll {
		right : 0;
		left  : 0;
		bottom: 10%;
	}
	.portada .btn-scroll span {
		color      : var(--fff);
		font-size  : 3.8rem;
		font-weight: 100;
	}


 


/* ---------------------------
#QUIENES SOMOS
----------------------------*/
.quienes-somos {
	/*background-color: var(--fff);*/
	margin-top      : 0;

	/*min-height      : 100vh;*/

	/*z-index: 10;*/
}

	/* btn */
	.quienes-somos .btn-scroll {
		right : 0;
		left  : 0;
		bottom: 20%;
	}
	.quienes-somos .btn-scroll span {
		color      : var(--color-1);
		font-size  : 3.8rem;
		font-weight: 100;
	}




/* ---------------------------
#SERVICIOS
----------------------------*/
.servicios {
	background-color: var(--fff);
}

	.servicios .d--grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

		/* col */
		.servicios .d--grid .cols-4 {
			width: 100% !important;
			height: 100%;
		}

		/* box */
		.box--servicios {
			width                : 100%;
			float                : left;
			margin-bottom        : 40px;
			display              : grid;
			grid-template-columns: 65px 1fr;
			grid-column-gap      : 20px;
		}

			.box--servicios i + div {
				width: 100%;
			}
			

			/* ico */
			.box--servicios i {
				width           : 100%;
				height          : 65px;
				/*border-radius   : 50%;*/
				overflow        : header;
				/*background-color: var(--color-1);*/
				float           : left;
			}
			.box--servicios i:before {
				content        : '';
				width          : 100%;
				left           : 0;
				top            : 0;
				background-size: auto !important;
				display        : flex;
				/*transform      : scale(.75);*/
			}
			.box--servicios i:before {
				height: 65px;
			}

			/* fix iconos */
			.box--servicios .ico-ia:before,
			.box--servicios .ico-dominio:before {
				/*background-size: contain !important;*/
			}

			/* textos */
			.box--servicios h4,
			.box--servicios p {
				width       : 100%;
				float       : left;
			}

			.box--servicios h4 {
				color        : var(--color-1);
				font-size    : var(--size-5);
				margin-bottom: 10px;
				line-height  : 1;
			}

			.box--servicios p {
				color           : var(--color-4);
				background-color: rgba(255, 255, 255, 1);
			}






/* ---------------------------
#PORTFOLIO
----------------------------*/
.portfolio {
	background-color: var(--fff);
	padding-bottom  : 0;
	display         : flex;
	min-height      : 100vh;
}
	
	/* content */
	.portfolio .content {
		padding-bottom  : 60px;
		background-color: var(--fff);
		z-index         : 10;
	}

	/* cols */
	.portfolio .content [class*=cols-] {
		padding         : 0;
		background-color: var(--fff);
	}

	/* box */
	.box--portfolio {
		background-color: var(--fff);
		z-index         : 900;
	}

		/* img */
		.box--portfolio .ratio-custom {
			padding-top: 66%;
			display    : flex;
			line-height: 0;
			height     : 0;
			transition : all 1s ease;
		}

			.box--portfolio .ratio-custom img {
				object-fit: contain;
				transform : scale(.9);
				transition: all .3s ease;
			}
			
		/* tx */
		.box--portfolio .hover {
			position       : absolute;
			top            : 0;
			left           : 0;
			width          : 100%;
			height         : 100%;
			display        : flex;
			align-items    : center;
			justify-content: center;
			border-radius  : 5px;
			z-index        : 9;
			transition     : all .6s ease;
			opacity        : 0;
		}
		
		
		.box--portfolio .hover h4 {
			color      : var(--fff);
			font-weight: 300;
			font-size  : var(--size-5);
			z-index    : 500;
		}
		.box--portfolio .hover span {
			position   : absolute;
			right      : 0;
			bottom     : 30%;
			left       : 0;
			margin     : auto;
			width      : 30px;
			height     : 30px;
			font-size  : 30px;
			font-weight: 100 !Important;
			color      : var(--fff);
			z-index    : 501;
			transition : all 1s ease;
		}

		/* bg */
		.box--portfolio .bg {
			position        : absolute;
			top             : 0;
			left            : 0;
			width           : 100%;
			height          : 100%;
			background-color: var(--color-1);
			z-index         : 1;
			transition      : all .6s ease;
			opacity         : 0;
			mix-blend-mode  : multiply;
		}
		.box--portfolio a:hover .hover {
			opacity: 1;
		}
		.box--portfolio a:hover .bg {
			opacity: .98;
		}
		.box--portfolio a:hover img {
			filter   : grayscale(100%);
			transform: scale(.98);
		}




 
/* ---------------------------
#CLIENTES
----------------------------*/
.clientes {
	padding         : 120px 0;
	background-color: var(--f5f);

	/*background-color: var(--cygnus);*/
}

	/* Cabezal */
	.clientes header.cabezal h3 {
		font-size: var(--size-3);
	}


	/* Slide */
	.clientes .swiper-slide {
		width: auto !important;
	}

		.clientes .swiper-wrapper {
			padding-bottom: 60px;
		}

		.clientes .swiper-slide img {
			opacity  : .75 !important;
			width    : 100%;
			float    : left;
			filter   : grayscale(100%);
			height   : 45px !important;
			width    : auto;
			transform: translateX(2px);
		}

		.clientes .swiper-slide:hover img,
		.clientes .swiper-slide img:hover {
			filter: grayscale(100%) !Important;
		}

		.clientes .swiper-pagination {
			width     : 100%;
			text-align: center;
			position  : relative;
		}

		.clientes .swiper-pagination-bullet-active {
			background-color: var(--color-1) !Important;
		}





/* ---------------------------
#CONTACTO
----------------------------*/

.contacto {
	background-color: var(--fff);
	z-index: 500;
}
 


/* ---------------------------
# FOOTER
----------------------------*/

#footer{
	background-color: var(--fff);
	padding         : 90px 0;
	z-index         : 600;
}







/* ---------------------------
# FORM'S
----------------------------*/

	/* FORM CONTACTO */
    form input,
    form button,
    form textarea{
		border          :none;
		background-color: #f5f5f5;
		padding         : 14px 16px;
		margin-bottom   : 12px;
		font-size       : .95rem;
		color           : var(--cygnus);
    }

    form textarea{
    	height: 113px
    }

    form button[type="submit"]{
		width           : 100%;
		float           : left;
		color           :#fff;
		background-color: var(--color-2);
		border-color    : var(--color-2);
		font-weight     : 400;
		text-transform  : uppercase;
		cursor          : pointer;
		transition      : all .4s ease;
    }
	form button[type="submit"]:hover{
		background-color: var(--color-3);
		border-color    : var(--color-3);
    }


	/* tx */
	form h6{
		width         : 100%;
		float         : left;
		text-align    : center;
		color         : var(--color-2);
		margin-bottom : 30px;
		text-transform: uppercase;
		font-weight   : 300;
	}
		
	/* placeholder */
	form input::-webkit-input-placeholder {
		color      : var(--cygnus);
		font-weight: 300;
		font-size  : .9rem;
	}
	form input::-moz-placeholder {
		color      : var(--cygnus);
		font-weight: 300;
		font-size  : .9rem;
	}
	form input:-ms-input-placeholder {
		color      : var(--cygnus);
		font-weight: 300;
		font-size  : .9rem;
	}
	form input:-moz-placeholder {
		color      : var(--cygnus);
		font-weight: 300;
		font-size  : .9rem;
	}
	form textarea::-webkit-input-placeholder {
		color      : var(--cygnus);
		font-weight: 300;
		font-size  : .9rem;
	}
	form textarea::-moz-placeholder {
		color      : var(--cygnus);
		font-weight: 300;
		font-size  : .9rem;
	}
	form textarea:-ms-input-placeholder {
		color      : var(--cygnus);
		font-weight: 300;
		font-size  : .9rem;
	}
	form textarea:-moz-placeholder {
		color      : var(--cygnus);
		font-weight: 300;
		font-size  : .9rem;
	}


	/* msj */
	.msj-ok,
	.msj-error,
	.msj-enviando {
		width          : 100%;
		float          : left;
		padding        : 10px 15px;
		margin         : 10px 0 20px 0;
		display        : flex;
		align-items    : center;
		justify-content: center;
		font-weight    : 400;

		transition     : all .2s ease;
	}

	.msj-ok,
	.msj-enviando {
		background-color: var(--msj-ok-bg);
		color           : var(--msj-ok-tx);
		border          : 1px solid var(--msj-ok-tx);
	}
	.msj-error {
		background-color: var(--msj-error-bg);
		color           : var(--msj-error-tx);
		border          : 1px solid var(--msj-error-tx);
	}

	.msj-enviando:before,
	.msj-ok:before,
	.msj-error:before {
		content          : '';
		background-size  : contain;
		background-repeat: no-repeat;
		float            : left;
		margin-right     : 10px;
		width            : 25px;
		height           : 25px;

		transform        : translateY(1px);
	}

	.msj-enviando:before{
		border             : 2px solid #FFF;
		border-bottom-color: var(--msj-ok-tx);
		border-radius      : 50%;
		display            : inline-block;
		box-sizing         : border-box;
		animation          : rotation 1s linear infinite;
	}
	@keyframes rotation {
	    0% {
	        transform: rotate(0deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
    } 

    .msj-ok:before{
	    background-image: url(../img/ico-ok.svg) ;
	}
	.msj-error:before{
	    background-image: url(../img/warning.svg) ;
	}




.back-to-top {
	position        : fixed;
	right           : 20px;
	bottom          : 20px;
	background-color: var(--cygnus);
	color           : #fff;
	padding         : 5px;
	width           : 40px;
	height          : 40px;
	border-radius   : 50%;
	text-decoration : none;
	z-index         : 1000;
	opacity         : 0;
	visibility      : height;
	display         : flex;
	align-items     : center;
	justify-content : center;
	transition      : all .4s ease-in;
}
.back-to-top.visible {
	opacity   : 1;
	visibility: visible;
}

.back-to-top:hover {
	background-color: var(--color-3);
}