/* Add here all your CSS customizations */

/* By AGRA 23-08-2021
************************************/

:root{
	--azul: #2dade4;
	--verde: #92c01f;
	--rojo: #ae191a;
	--gris: #9d9d9c;
	--negro: #000000;
	--blanco: #ffffff;
	--spartan: 'Spartan', sans-serif;
	--robotoMedium: 'Roboto-Medium';
	--robotoRegular: 'Roboto-Regular';
	--helveticaNeue: 'Helvetica-Neue';
}

@font-face{
	font-family: 'Roboto-Regular';
	src: url(../archivos/fonts/Roboto-Regular.ttf);
}
@font-face{
	font-family: 'Roboto-Medium';
	src: url(../archivos/fonts/Roboto-Medium.ttf);
}
@font-face{
	font-family: 'Helvetica-Neue';
	src: url(../archivos/fonts/helvetica-neue-lt-std-55-roman.otf);
}
@font-face{
	font-family: 'Spartan';
	src: url(../archivos/fonts/Spartan-VariableFont_wght.ttf);
}

/*CSS Global Class*/
body{
	font-family: var(--robotoRegular);
}
.btnAzul{
	background: var(--azul);
	border: 1px solid var(--azul);
	font-weight: 600;
	color: #fff;
	font-size: 20px;
	font-family: var(--spartan);
}
.btnAzul:hover{
	color: #fff;
}
.btn-transparent{
	background: transparent;
	border: 1px solid #fff;
	font-weight: 600;
	color: #fff;
	font-size: 18px;
	font-family: var(--spartan);
	transition: .5s ease-in-out;
}
.btn-transparent:hover{
	color: #fff;
}
.header-top .header-top-button-make-as-appoitment a{
	font-size: 15px;
}
.grayColor{
	color: var(--gris);
}
.blueColor{
	color: var(--azul);
}
.fontSpartan{
	font-family: var(--spartan);
}
.fontSpartanSemiBold{
	font-family: var(--spartanSemiBold);
}

/*header
***************************/
.gradientHeader{
	position: relative;
}
.gradientHeader:before{
	content: "";
    position: absolute;
    top: 0;
    width: 100vw;
    left: 0;
    background: linear-gradient(90deg, #fff 50%, #2dade480 100%);
    height: 100%;
}
#header .header-logo{
	margin: .5rem 0;
}
#header .header-logo img{
	width: 100px;
	height: auto;
}
#header .header-nav-top .nav > li > span a.grayColor:hover{
	color: var(--azul);
}
.header-top-socials li a{
	color: var(--verde);
}
.header-top-socials li a:hover{
	color: var(--azul);
}
#header .header-nav.header-nav-links nav > ul:not(:hover) > li > a.active{
	color: var(--verde);
}
#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a, #header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a{
	color: var(--gris);
	font-family: var(--spartan);
	font-weight: 600;
	font-size: 16px!important;
	letter-spacing: 0px;
}
#header .header-nav.header-nav-links nav > ul li:hover > a{
	color: var(--verde);
}

/*Banner
***************************/
#slideHome .title{
	white-space: pre-line;
	font-size: 55px;
	font-family: var(--spartan);
	font-weight: 700;
	color: var(--azul);
	line-height: normal;
}
#slideHome .subtitle{
	color: var(--verde);
	font-family: var(--robotoRegular);
	/*font-weight: 500;*/
	white-space: pre-line;
	font-size: 30px;
	line-height: normal;
}

/*Cards
***************************/
#cardsBlock .card-title{
	font-family: var(--spartan);
	font-weight: 600;
	color: var(--gris);
	font-size: 19px;
	text-align: center;
	line-height: normal;
}
#cardsBlock .card-title span{
	color: var(--verde);
}
#cardsBlock.custom-cards .cards-container .card{
	min-height: 350px;
}
#cardsBlock.custom-cards .cards-container .card .card-body{
	padding: 50px 20px;
}
#cardsBlock.custom-cards .cards-container .card .card-body img{
	width: 150px;
	height: auto;
}

/*Pruebas Individuales
***************************/
#pruebas-individuales{
	margin-bottom: 0;
}
#pruebas-individuales .subtitle{
	font-family: var(--robotoRegular);
}
#pruebas-individuales .title{
	font-family: var(--spartan);
	font-weight: 700;
	color: var(--rojo);
	margin-bottom: 30px;
	font-size: 30px;
}
#pruebas-individuales .descriptionText{
	font-family: var(--robotoRegular);
	color: #000;
	font-size: 18px;
	margin-bottom: 30px;
}
#pruebas-individuales .listPruebas li{
	margin-bottom: 25px;
	font-family: var(--spartan);
	font-weight: 700;
	color: var(--azul);
	line-height: 30px!important;
}
#pruebas-individuales .listPruebas li i{
	color: var(--verde);
	border-color: var(--gris)!important;
}
#pruebas-individuales .custom-list-icons:first-child li{
	padding-right: 40px!important;
}

/*Call to Action 1
***************************/
#callToAction1{
	/*background: var(--azul);*/
	background: url('../archivos/I+D_Diagnostics-Fondo-Cintillo01.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#callToAction1 .title{
	font-family: var(--spartan);
	color: #fff;
	font-weight: 700;
	font-size: 25px;
	margin-bottom: 10px;
	line-height: normal;
	text-align: right;
}
#callToAction1 .subtitle{
	font-family: var(--spartan);
	color: #fff;
	font-weight: 700;
	font-size: 35px;
	margin-bottom: 0;
	line-height: normal;
	text-align: right;
	white-space: pre-line;
}
#callToAction1 .subtitle span{
	font-size: 25px;
}
#callToAction1 .contentBx{
	max-width: 70%;
	margin: 0 auto;
}

/*Paquetes para empresas
***************************/
#paquetes-para-empresas{
	background-position-x: right;
	margin-bottom: 0;
}
#paquetes-para-empresas .col-cuttin-more-about:before{
	left: -90%;
	transform: rotate(-75deg);
}
#paquetes-para-empresas .col-cuttin-more-about:after{
	left: -90%;
	transform: rotate(75deg);
}
#paquetes-para-empresas .subtitle{
	font-family: var(--robotoRegular);
	text-align: right;
}
#paquetes-para-empresas .title{
	font-family: var(--spartan);
	font-weight: 700;
	color: var(--rojo);
	margin-bottom: 30px;
	font-size: 30px;
	text-align: right;
}
#paquetes-para-empresas .descriptionText{
	font-family: var(--robotoRegular);
	color: #000;
	font-size: 18px;
	margin-bottom: 30px;
	text-align: right;
}
#paquetes-para-empresas .listPruebas li{
	margin-bottom: 25px;
	font-family: var(--spartan);
	font-weight: 700;
	color: var(--azul);
	line-height: 30px!important;
}
#paquetes-para-empresas .listPruebas li i{
	color: var(--verde);
	border-color: var(--gris)!important;
}
#paquetes-para-empresas .custom-list-icons:first-child li{
	padding-right: 40px!important;
}

/*Call to Action 2
***************************/
#callToAction2{
	/*background: var(--verde);*/
	background: url('../archivos/I+D_Diagnostics-Fondo-Cintillo02.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 130px!important;
}
#callToAction2 .title{
	font-family: var(--robotoRegular);
	color: #fff;
	font-weight: 500;
	font-size: 30px;
	margin-bottom: 10px;
	line-height: normal;
}
#callToAction2 .subtitle{
	font-family: var(--spartan);
	color: #fff;
	font-weight: 700;
	font-size: 35px;
	margin-bottom: 30px;
	line-height: normal;
}
#callToAction2 .contentBx{
	max-width: 70%;
	margin: 0 auto;
}
#callToAction2 .btn-transparent:hover{
	color: var(--verde);
	background: #fff;
}
#callToAction2 .section-funnel-layer-bottom{
	top: -100%;
    bottom: initial;
}
#callToAction2 .section-funnel-layer-bottom .section-funnel-layer:nth-child(1){
	transform: skewY(4.7deg);
}
#callToAction2 .section-funnel-layer-bottom .section-funnel-layer:nth-child(2){
	transform: skewY(175.3deg);
}

/*Contacto
***************************/
#contacto .btnAzul{
	font-size: 15px;
}
.rowIconsContact{}
.rowIconsContact .titleIcon{
	font-family: var(--spartan);
	font-weight: 700;
	color: var(--verde);
	font-size: 25px;
}
.rowIconsContact .textIcon{
	font-family: var(--robotoRegular);
	color: var(--gris);
	font-size: 16px;
}
.rowIconsContact .textIcon a{
	color: var(--gris);
}
.formHome .contentRadio{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.formHome .contentRadio label.title{
	color: var(--verde);
	font-family: var(--spartan);
	font-weight: 700;
	font-size: 23px;
}
.formHome .contentRadio label{
	margin-bottom: 0;
}

/*Distribuidores
***************************/
#distribuidores{
	/*background: var(--verde);*/
	background: url('../archivos/pruebas-antigenos-imasddiagnostics.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 100px!important;
}
#distribuidores:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
}
#distribuidores .title{
	font-family: var(--robotoRegular);
	color: #fff;
	font-weight: 500;
	font-size: 30px;
	margin-bottom: 10px;
	line-height: normal;
}
#distribuidores .subtitle{
	font-family: var(--spartan);
	color: #fff;
	font-weight: 700;
	font-size: 35px;
	margin-bottom: 30px;
	line-height: normal;
}
#distribuidores .contentBx{
	max-width: 70%;
	margin: 0 auto;
}
#distribuidores .btn-transparent:hover{
	color: var(--verde);
	background: #fff;
}
#distribuidores .rowDistribuidores .contentBox{
	padding-bottom: 30px;
	text-align: center;
}

/*Footer
***************************/
footer{
	background: var(--rojo);
	border-top: 0;
}
footer .logo{
	width: 130px;
	height: auto;
}
footer p{
	color: #fff;
	font-family: var(--robotoMedium);
	font-size: 15px;
	margin-bottom: 0;
}
footer p a{
	color: #fff;
	transition: .5s ease-in-out;
}
footer p a:hover{
	color: #fff;
	text-decoration: underline;
}

/*Responsive
***************************/
@media (max-width: 800px){
	/*CSS Global Class*/
	.text-sm-center{text-align: center;}

	/*Banner Home*/
	.slide1{position: relative;}
	.slide1:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1;}

	/*Call to Action 1*/
	#callToAction1 .contentBx{max-width: 100%;}

	/*Distribuidores*/
	#distribuidores{padding-bottom: 60px!important; background-position-x: 25%;}
	#distribuidores .contentBx{max-width: 100%;}

	/*Call To Action 2*/
	#callToAction2{background-position-x: 85%; padding-top: 70px!important;}

	/*Contacto*/
	.formHome .contentRadio{display: block;}
	.formHome .contentRadio label.title{margin-bottom: 15px;}

	/*Footer*/
	#footer .logo{margin-top: 25px;}
}