/* --------------------------------------------------
DO ------------------------------------- GENERAL ---
---------------------------------------------------*/

html, body {

	background-color:var(--color-white);

	color: var(--color-neutro-darker);

	font-weight:normal;

	}


:root {

	--font-main:'Montserrat', sans-serif;

	--font-second:'Montserrat', sans-serif;

	}


/* --------------------------------------------------
DO -------------------------------------- COLORS ---
---------------------------------------------------*/

:root {

	--color-main-darker:#0d122d;
	--color-main-dark:#222e6b;
	--color-main:#3E51B8;
	--color-main-soft:#7a89d3;
	--color-main-softer:#dce0f2;

	--color-second-darker:#0c333f;
	--color-second-dark:#1a6882;
	--color-second:#32b5e4;
	--color-second-soft:#84cfe8;
	--color-second-softer:#deeff4;


	--color-neutro-darker:#17191a;
	--color-neutro-dark:#343638;
	--color-neutro:#62686d;
	--color-neutro-soft:#75797C;
	--color-neutro-softer:#E6EAEF;

	--color-ok:#55b88b;
	--color-ok-softer:#a9dac4;
	--color-warning:#edbc2a;
	--color-warning-softer:#f9f8ea;
	--color-caution:#fc6161;
	--color-caution-softer:#f2c9c9;

	}

/* --------------------------------------------------
DO ------------------------------------- HEADER ---
---------------------------------------------------*/

/* General
------------------------------*/
header  {
	background-color:var(--color-white);
	border-bottom:1px solid var(--color-neutro-softer);
	}


/* Fonts
------------------------------*/
header nav {
	font-size:1rem;
	font-weight:bold;
	font-family:var(--font-main);
	text-transform:none;
	}


/* Separator
------------------------------*/
header nav > ul > li[data-element='separator']{
	background-color:var(--color-neutro-soft);
	height:16px;
	}


/* Buttons
------------------------------*/
header nav > ul > li > *:not(ul, .button),
ul.menu-dropdown > li > *:not(ul) {
	color:var(--color-neutro-darker);
	}


/* Buttons + icons
------------------------------*/
header nav > ul > li > *:not( .button ) .svg-icon,
ul.menu-dropdown > li > * .svg-icon,
ul.menu-dropdown li[data-seccion='back'] > label .svg-icon{
	fill:var(--color-main);
	}


/* Hover
------------------------------*/
header nav > ul > li > a:not( .button ):hover,
ul.menu-dropdown > li > a:hover {
	color:var(--color-second);
	}

header nav > ul > li > a:not( .button ):hover > .svg-icon,
ul.menu-dropdown > li > a:hover > .svg-icon{
	fill:var(--color-second);
	}



/* Botones activos
------------------------------*/
body#inicio header nav ul li[data-seccion='inicio'] a, 
body#inicio header nav ul li[data-seccion='inicio'] a:hover,
body.servicios header nav ul li[data-seccion='servicios'] a, 
body.servicios header nav ul li[data-seccion='servicios'] a:hover,
body.empresa header nav ul li[data-seccion='empresa'] a, 
body.empresa header nav ul li[data-seccion='empresa'] a:hover,
body.blog header nav ul li[data-seccion='blog'] a, 
body.blog header nav ul li[data-seccion='blog'] a:hover,
body.contacto header nav ul li[data-seccion='contacto'] a, 
body.contacto header nav ul li[data-seccion='contacto'] a:hover  {
	background-color:transparent;
	color:var(--color-main); 
	}

/* --------------------------------------------------
DO -------------------------------- NAV MOVIL 620 ---
---------------------------------------------------*/

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

	
	/*  Color de fondo 
	------------------------------*/
	header nav,
	ul.menu-dropdown  {
		background-color:var(--color-black);
		}



	/* Borde o linea de botones
	------------------------------*/
	header nav > ul li,
	ul.menu-dropdown li{
		border-bottom:1px solid var(--color-white-30);
		}



	/* Diseno de Botones
	------------------------------*/
	header nav > ul > li > *:not(ul),
	header nav > ul > li > *:not(ul):hover,
	ul.menu-dropdown li > *,
	ul.menu-dropdown li > *:hover {
		background-color:transparent!important;
		color:var(--color-white-80)!important;
		font-size:1.2rem!important;
		height:42px!important;
		line-height:42px!important;
		padding:8px 0px!important;
		}


	/* Icon botones
	------------------------------*/
	header nav > ul > li > *:not(ul) .svg-icon,
	ul.menu-dropdown li[data-seccion='back'] > label .svg-icon {
		fill:var(--color-white-80)!important;
		height:26px;
		margin-left:-4px;
		width:26px;
		}


	body#inicio header nav ul li[data-seccion='inicio'] a, 
	body#inicio header nav ul li[data-seccion='inicio'] a:hover,
	body.servicios header nav ul li[data-seccion='servicios'] a, 
	body.servicios header nav ul li[data-seccion='servicios'] a:hover,
	body.empresa header nav ul li[data-seccion='empresa'] a, 
	body.empresa header nav ul li[data-seccion='empresa'] a:hover,
	body.blog header nav ul li[data-seccion='blog'] a, 
	body.blog header nav ul li[data-seccion='blog'] a:hover,
	body.contacto header nav ul li[data-seccion='contacto'] a, 
	body.contacto header nav ul li[data-seccion='contacto'] a:hover  {
	background-color:inherit;
	color:inherit; 
	}


}


/* --------------------------------------------------
DO -------------------------------------- TITLES ---
---------------------------------------------------*/

/* Default 
------------------------------*/
* .title {
	color:inherit;
	font-size:1em;
	}

* .subtitle {
	color:inherit;
	font-size:0.8em;
	text-transform:uppercase;
	}


/* Default 
------------------------------*/
.the-title {
	color:var(--color-main-darker);
	font-size:2rem;
	font-weight:var(--fw-bolder);
	}
	@media only screen and (max-width:2200px) {
	.the-title {
	font-size:2rem;
	}}
	@media only screen and (max-width:1600px) {
	.the-title {
	font-size:1.8rem;
	}}

/* titles
------------------------------*/
.title-1 {
	color:inherit;
	font-size:1.2em;
	width:100%;
	}

.title-2 {
	color:inherit;
	font-size:1.2em;
	}

.subtitle-1 {
	color:inherit;
	font-size:1em;
	}

.subtitle-2 {
	color:inherit;
	font-size:1em;
	}



/* --------------------------------------------------
DO ------------------------------------- BUTTONS ---
---------------------------------------------------*/
.button,
.button + label,
ul.add-button li > a,
ul.add-button li > span,
ul.add-button li > input[type=submit] + label,
ul.add-button li > input[type=button] + label,
ul.add-button li > input[type=file] + label,
ul.add-button li > input[type=checkbox] + label,
ul.add-button li > input[type=radio] + label,
ul.add-button li > button,
.tag,
ul.add-tag li > *:not(a, p, input, button) {
	background-color:var(--color-black);
	color:var(--color-white-70);
	border-radius:4px;
	}


/* Icons
------------------------------*/
.button .svg-icon,
.button + label .svg-icon,
ul.add-button li > * > .svg-icon,
ul.add-button .svg-icon,
.tag .svg-icon,
ul.add-tag li > *:not(a, p, input, button) .svg-icon{
	fill:var(--color-white-70);
	}


/* Hover
------------------------------*/
.button:hover,
.button + label:hover,
ul.add-button li > a:hover,
ul.add-button li > span:hover,
ul.add-button li > input[type=submit] + label:hover,
ul.add-button li > input[type=button] + label:hover,
ul.add-button li > input[type=file] + label:hover,
ul.add-button li > input[type=checkbox] + label:hover,
ul.add-button li > input[type=radio] + label:hover,
ul.add-button li > button:hover {
	background-color:var(--color-black);
	color:var(--color-white);
	text-decoration:none;
	}

.button:hover .svg-icon,
.button + label:hover .svg-icon,
ul.add-button :hover .svg-icon {
	fill:var(--color-white);
	}


/* Checked (if checbox - radio)
------------------------------*/
ul.add-button li > input[type=checkbox]:checked + label,
ul.add-button li > input[type=radio]:checked + label{
	background-color:var(--color-black);
	color:var(--color-white);
	}
ul.add-button li > input[type=checkbox]:checked + label .svg-icon,
ul.add-button li > input[type=radio]:checked + label .svg-icon{
	fill:var(--color-white);
	}



/* + Outline
------------------------------*/
.button.outline,
.button.outline + label,
ul.add-button.outline li > a,
ul.add-button.outline li > span,
ul.add-button.outline li > input[type=submit] + label,
ul.add-button.outline li > input[type=button] + label,
ul.add-button.outline li > input[type=file] + label,
ul.add-button.outline li > input[type=checkbox] + label,
ul.add-button.outline li > input[type=radio] + label,
ul.add-button.outline li > button,
.tag.outline,
ul.add-tag.outline li > *:not(a, p, input, button)  {
	background-color:transparent;
	border:1px solid var(--color-black);
	color:var(--color-black);
	}

.button.outline .svg-icon,
.button.outline + label .svg-icon,
ul.add-button.outline  li > * .svg-icon,
.tag.outline .svg-icon,
ul.add-tag.outline .svg-icon {
	fill:var(--color-black);
	}

.button.outline:hover .svg-icon,
.button.outline + label:hover .svg-icon,
ul.add-button.outline li > *:hover .svg-icon {
	fill:var(--color-white);
	}


.button.outline:hover,
.button.outline + label:hover,
ul.add-button.outline li > a:hover,
ul.add-button.outline li > span:hover,
ul.add-button.outline li > input[type=submit] + label:hover,
ul.add-button.outline li > input[type=button] + label:hover,
ul.add-button.outline li > input[type=file] + label:hover,
ul.add-button.outline li > input[type=checkbox] + label:hover,
ul.add-button.outline li > input[type=radio] + label:hover,
ul.add-button.outline li > button:hover {
	border:1px solid transparent;
	background-color:var(--color-black);
	color:var(--color-white);
	}

/* Checked (if checbox - radio)
------------------------------*/
ul.add-button.outline li > input[type=checkbox]:checked + label,
ul.add-button.outline li > input[type=radio]:checked + label{
	border:1px solid transparent;
	background-color:var(--color-black);
	color:var(--color-white);
	}

ul.add-button.outline li > input[type=checkbox]:checked + label .svg-icon,
ul.add-button.outline li > input[type=radio]:checked + label .svg-icon{
	fill:var(--color-white);
	}




/* --------------------------------------------------
DO ----------------------- BUTTON PERSONALIZADOS ---
---------------------------------------------------*/

/* Button movil
------------------------------*/
.button.btn-movil,
.button.btn-movil + label,
ul.add-button.btn-movil li > a,
ul.add-button.btn-movil li > span,
ul.add-button.btn-movil li > input[type=checkbox] + label,
ul.add-button.btn-movil li > input[type=radio] + label{
	background-color:var(--color-black)!important;
	}



/* Close menu movil
------------------------------*/
.button.btn-close-menu-movil,
.button.btn-close-menu-movil + label,
ul.add-button.btn-close-menu-movil li > a,
ul.add-button.btn-close-menu-movil li > span,
ul.add-button.btn-close-menu-movil li > input[type=checkbox] + label,
ul.add-button.btn-close-menu-movil li > input[type=radio] + label{
	border:1px solid red!important;
	background-color:var(--color-black)!important;
	}


/* Whatsapp
------------------------------*/
.btn-whatsapp,
.add-button .btn-whatsapp,
.button.btn-whatsapp {
	background:var(--color-whatsapp)!important;
	}


/* Facebook
------------------------------*/
.btn-facebook,
.add-button .btn-facebook{
	background-color:var(--color-facebook)!important;
	}

/* Instagram
------------------------------*/
.btn-instagram,
.add-button .btn-instagram{
	background-color:var(--color-instagram)!important;
	}

/* Youtube
------------------------------*/
.btn-youtube,
.add-button .btn-youtube{
	background-color:var(--color-youtube)!important;
	}


/* Linkedin
------------------------------*/
.btn-linkedin,
.add-button .btn-linkedin{
	background-color:var(--color-linkedin)!important;
	}


/* X
------------------------------*/
.btn-x,
.add-button .btn-x{
	background-color:var(--color-x)!important;
	}




/* Delete
------------------------------*/
.button.btn-delete,
.button.btn-delete + label,
ul.add-button.btn-delete li > a,
ul.add-button.btn-delete li > span,
ul.add-button.btn-delete li > button,
ul.add-button.btn-delete li > input[type=submit] + label,
ul.add-button.btn-delete li > input[type=button] + label{
	background-color:var(--color-warning)!important;
	}


/* Ok
------------------------------*/
.button.btn-ok,
.button.btn-ok + label,
ul.add-button.btn-ok li > a,
ul.add-button.btn-ok li > span,
ul.add-button.btn-ok li > button,
ul.add-button.btn-ok li > input[type=submit] + label,
ul.add-button.btn-ok li > input[type=button] + label{
	background:var(--color-ok-softer)!important;
	color:var(--color-ok)!important;
	}


/* Warning
------------------------------*/
.button.btn-warning,
.button.btn-warning + label,
ul.add-button.btn-warning li > a,
ul.add-button.btn-warning li > span,
ul.add-button.btn-warning li > button,
ul.add-button.btn-warning li > input[type=submit] + label,
ul.add-button.btn-warning li > input[type=button] + label{
	background:var(--color-warning-softer)!important;
	color:var(--color-warning)!important;
	}


/* Caution
------------------------------*/
.button.btn-caution,
.button.btn-caution + label,
ul.add-button.btn-caution li > a,
ul.add-button.btn-caution li > span,
ul.add-button.btn-caution li > button,
ul.add-button.btn-caution li > input[type=submit] + label,
ul.add-button.btn-caution li > input[type=button] + label{
	background:var(--color-caution-softer)!important;
	color:var(--color-caution)!important;
	}



/* Close
------------------------------*/
.button.btn-close,
.button.btn-close + label,
ul.add-button.btn-close li > a,
ul.add-button.btn-close li > span,
ul.add-button.btn-close li > input[type=checkbox] + label,
ul.add-button.btn-close li > input[type=radio] + label{
	background-color:var(--color-black)!important;
	}




/* --------------------------------------------------
DO ----------------------------------- BANNER BOX ---
---------------------------------------------------*/
.banner-box  .title{
	font-size:1.6rem;
	color:var(--color-white);
	order:2;
	}

.banner-box  .subtitle{
	font-size:0.8rem;
	color:var(--color-black);
	order:2;
	}

.banner-box > p{
	color:var(--color-white-60);
	font-size:1rem;
	font-weight:var(--fw-normal);
	order:3;
	}

.banner-box .button{
	order:4;
	}


/*                                       
-------------------------------------  MOVIL 620 ---
--------------------------------------------------*/

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

	.movil-block .banner-box{
	background-color:var(--color-main);
	}


	.banner-box .title{
	color: var(--color-white-80);
	font-size:1.4em;
	}

	.banner-box .subtitle{
	color: var(--color-second-soft);
	font-size:1.2em;
	}

	.banner-box p{
	color: var(--color-white-60);
	font-size:1em;
	}


}




/* --------------------------------------------------
DO --------------------------------- BANNER MAIN ---
---------------------------------------------------*/

/* Background color
------------------------------*/
*[data-element='banner-main'] {
	background-color:var(--color-main-soft);
	}

/* Background inside element
------------------------------*/
*[data-element='banner-main'] .inside{
	background-color:var(--color-black);
	}

/* Background Panelz element
------------------------------*/
*[data-element='banner-main'] .panel-1{
	background-color:var(--color-main);
	}

*[data-element='banner-main'] .panel-2{
	background-color:var(--color-white);
	}



/* --------------------------------------------------
DO --------------------------------- PANELS ALL ---
---------------------------------------------------*/
*[data-element='panel'] {
	background-color:var(--color-neutro-softer);
	}

*[data-element='panel'] > .inside {
	background-color:var(--color-white);
	}


*[data-element='panel'] .col-img {
	background-color:var(--color-neutro-soft);
	}




/* --------------------------------------------------
DO ---------------------------------------- FOOTER---
---------------------------------------------------*/
footer{
	background-color:var(--color-neutro-darker);
	color:var(--color-white-50);
	}

/* Title
------------------------------*/
footer .title {
	color:var(--color-main);
	font-family:var(--font-main);
	font-size:1em;
	font-weight:bold;
	text-align:left;
	text-transform:uppercase;
	width:100%;
	}