/*
Theme Name:     MR Fire Services
Description:    Theme the MR Fire Services
Version:        1.0
Author:         BajaWeb!
Text Domain:    MR Fire Services
*/


/*
					MENU DE OPCIONES.
	1. BOTONES.
______________________________________________________________________________________________

	2. HEADER.
		2.1 Logo.
		2.2 Letra del Menu.
		2.3 Menu Hamburguesa.
_______________________________________________________________________________________________

	3. BANNER PRINCIPAL. 
_______________________________________________________________________________________________

	4. QUIENES SOMOS.
_______________________________________________________________________________________________

	5. VALORES.
_______________________________________________________________________________________________
	
	6. VISION Y MISION.
_______________________________________________________________________________________________

	7. NUESTROS SERVICIOS.
		7.1 Titulos.
		7.2 Contenidos.
_______________________________________________________________________________________________

	8. NUESTROS TRABAJOS.
_______________________________________________________________________________________________

	9. MARCAS.
_______________________________________________________________________________________________

	10. DUDAS.
_______________________________________________________________________________________________

	11. CONTACTANOS.
_______________________________________________________________________________________________

	12. DESARROLLADO POR.
_______________________________________________________________________________________________

	13. BOTON WHATSAPP 
_______________________________________________________________________________________________

	14. MEDIA QUERYS
_______________________________________________________________________________________________
*/

html
{
	scroll-behavior: 											smooth;
}


/*					1. BOTONES.					*/

.btnLetrasAzulFondoTransparente
{
	display: 													inline-block;

	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
	font-weight: 												600;
	font-size: 													21px;
	line-height: 												120%;
	padding: 													10px 25px;
	border-radius: 												79px;

	text-align: 												center;

	background: 												transparent !important;
	border: 													2px solid #05002B;
	color: 														#05002B;

	text-decoration: 											none;	
}

.btnLetrasAzulFondoTransparente:hover
{
	border: 													2px solid #0B0062;
	color: 														#0B0062;
}

.btnLetrasVerdesFondoTransparente
{
	display: 													inline-block;

	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
	font-weight: 												600;
	font-size: 													15px;
	line-height: 												120%;
	padding: 													10px 25px;
	border-radius: 												79px;

	text-align: 												center;

	background: 												transparent !important;
	border: 													2px solid #28D146;
	color: 														#28D146;

	text-decoration: 											none;	
}

.btnLetrasBlancasFondoTransparente:hover
{
	border: 													2px solid #28D146;
	color: 														#28D146;
}

.btnEnviar
{
    width:                                                      150px !important;
    padding:                                                    0px !important;
    border-radius:                                              79px !important;
} 

/*			TERMINA LA SECCION 1. BOTONES.		*/ 


/*					2. HEADER.					*/

.header
{
	width: 														100%;
	height: 													auto;
	padding-top: 												5px;
	padding-bottom: 											5px;

	text-align: 												center;
	position: 													fixed;
	overflow:													hidden;

  	background: 												#0B0062;
  	top: 														0;
	z-index: 													99999999; 
}

/*					2.1 Logo.					*/

.ImgHeaderLogoMrFireServices
{
    position:                                                   relative;
	width: 														80px;
    top:                                                        50%;
    transform:                                                  translateY(-50%);
}

/* 		TERMINA SECCION DE 2.1 Logo.			*/

/*				1.2 Letra Del Menu.				*/

.header ul
{
    margin-bottom: 												0px;
}

.header li
{
	display: 													inline-block;
    position: 													relative;

    margin-left: 												20px;
    margin-right: 												20px;
    top: 														50%;
    transform: 													translateY(-50%);

    list-style: 												none;
}

.header a 
{
	font-family: 												'Calibri';
	font-style: 												normal;
	font-weight: 												400;
	font-size: 													21px;
	color: 														#FFFFFF;

	text-decoration: 											none;
}

.header a:hover
{
	color: 														#FFFFFF;
}

/* 		Termina seccion 1.2 Letra Del Menu.		*/

/*			TERMINA LA SECCION 2. HEADER.		*/	

/*				3. BANNER PRINCIPAL. 			*/

.banner-principal
{
	width:                                                      100%;
    height:                                                     auto;

    margin-top: 												40px;

    padding-top:                                                50px;
    padding-bottom:                                             80px;
}

.banner-principal img 
{
	width:                                                      100%;
    height:                                                     100%;
    object-fit:                                                 contain;
}

.banner-principal h1
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  29px;

    align-items:                                                center;
    text-align:                                                 center;

    color:                                                      #05002B;	
}

/*	TERMINA LA SECCION 3. BANNER PRINCIPAL. 	*/

/*				4. QUIENES SOMOS.				*/

.quienessomos-container
{
    width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                50px;
    padding-bottom:                                             50px;
}

.quienessomos-container h1
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  40px;

    align-items:                                                center;
    text-align:                                                 center;

    color:                                                      #05002B;	
}

.quienessomos-container img 
{
	width: 														100%;
    height: 													100%;
    right: 														0;
    left: 														0;
    top: 														0;
    bottom: 													0;
    object-fit: 												cover;	
}

.quienessomos-container p 
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                500;
    font-size:                                                  20px;
  	line-height: 												120%;  

    text-align: 												justify;

    padding-left: 												15px;

    color:                                                      #000000;
}

/*		TERMINA SECCION 4. QUIENES SOMOS.		*/


/*					5. VALORES.					*/

.valores-container 
{
	width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                20px;
    padding-bottom:                                             45px;

    background-color: 											#05002B;
}

.valores-container h1
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  40px;

    align-items:                                                center;
    text-align:                                                 center;

    color:                                                      #FFFFFF;
}

/*Estilos del tooltip*/

.tooltip-container 
{
  	position: 													relative;
  	display: 													inline;
  	z-index: 													300;
}

.tooltip-description 
{
  	visibility: 												hidden; /*Agregado*/
  	opacity: 													0;/*Agregado*/
  
  	width: 														160px; /*Puedes cambiarlo a gusto*/
  	padding: 													20px;
  	border-radius: 												10px;
  	text-align: 												left;
	
  	background-color: 											#FFFFFF;
  	color: 														#000000;
  	box-shadow: 												0 0 17px #111;

  /*Lo posicionamos en el centro del elemento y lo ponemos por encima*/
  	position: 													absolute;
  	top: 														200%;
  	left: 														50%;
  	transform: 													translate(-50%, 0%);

  	transition: 												all 500ms ease-in;
}

/*El pequeño detalle*/
.tooltip-description::before 
{
  	content: "";
  	width: 														15px;
  	height: 													15px;
  	background-color: 											#FFFFFF;

  	position: 													absolute;
  	top: 														-7.5px;
  	left: 														50%;
  	transform: 													translate(-50%, 0%) rotate(45deg);
}

/*Recta final*/
.tooltip-element 
{
  	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  17x;

    color:                                                      #FFFFFF;
}

.tooltip-element:hover
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  17x;
	background: 												#FFFFFF;
	color: 														#05002B;

	border-radius: 												50px;
	padding: 													10px;
	text-align: 												center;
}

/*Efectos hover*/
.tooltip-container:hover .tooltip-description 
{
  	visibility: 												visible;
  	opacity: 													10;
}

.tooltip-container:hover .tooltip-element 
{
  	text-decoration: 											underline;
}

/*		TERMINA SECCION 5. VALORES.				*/

/*			6. VISION Y MISION.					*/

.VisionMision-container
{
    width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                70px;
    padding-bottom:                                             50px;
}

.VisionMision-cuadro
{
	padding-top: 												20px;
    padding-bottom: 											20px;
    background-color: 											#0B0062;

    text-decoration: 											none;
}

.VisionMision-cuadro:hover
{
	background-color: 											#05002B;	
}

.VisionMision-cuadro h1
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  30px;
    line-height: 												120%;

    text-align: 												center;

    color:                                                      #FFFFFF;
}

.VisionMision-cuadro P 
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                500;
    font-size:                                                  17px;
    line-height: 												120%;

	color: 														#FFFFFF;
}

/*	TERMINA SECCION 6. VISION Y MISION.			*/

/*			7. NUESTROS SERVICIOS.				*/

.servicios-container
{
    width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                30px;
    padding-bottom:                                             50px;
}

.servicios-container h1
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  40px;

    align-items:                                                center;
    text-align:                                                 center;

    color:                                                      #05002B;	
}

/*				7.1 Titulos.					*/

.btnTituloMarcas
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
	font-weight: 												600;
	font-size: 													20px;

	padding-right: 												20px;
	padding-left: 												20px;
	margin-left: 												20px;

	color: 														#000000;
	border: 													none;
	background: 												transparent;
}

.btnTituloMarcas.active
{
	border-radius: 												100px;

	color: 														#FFFFFF;
	background: 												#05002B;
}

.menuScroll
{
	overflow-x: 												auto;
    white-space: 												nowrap;
    padding: 													12px;
    background: 												linear-gradient(to right, transparent, transparent), linear-gradient(to right, transparent, transparent), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
    background-position: 										left center, right center, left center, right center;
    background-repeat: 											no-repeat;
    background-color: 											transparent;
    background-size: 											20px 100%, 20px 100%, 10px 100%, 10px 100%;
    background-attachment: 										local, local, scroll, scroll;
}

/*		Termina seccion 7.1 Titulos.			*/

/*				7.2 Contenidos.					*/

.servicios-container img
{
	width: 														100%;
	height: 													100%;
	right: 														0;
    left: 														0;
    top:														0;
    bottom: 													0;

    object-fit: 												cover;												
}

.servicios-container h2
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
	font-weight: 												700;
	font-size: 													32px;
	text-align: 												center;

	margin-top: 												30px;

	color: 														#000000;
}

.servicios-container h3
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
	font-weight: 												600;
	font-size: 													25px;
	
	margin-top: 												20px;
	margin-bottom: 												30px;

	text-align: 												center;

	color: 														#000000;	
}

.servicios-container p
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
	font-weight: 												400;
	font-size: 													20px;
	
	margin-top: 												20px;

	text-align: 												justify;

	color: 														#000000;
}

/*		Termina seccion 7.2 Contenidos.			*/

/* TERMINA SECCION 7. NUESTROS SERVICIOS.		*/

/*			 8. NUESTROS TRABAJOS.              */

.nuestrotrabajos-container
{
    width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                50px;
    padding-bottom:                                             50px;
}

.nuestrotrabajos-container h1
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  40px;

    align-items:                                                center;
    text-align:                                                 center;

    color:                                                      #05002B;	
}

.carousel 
{
    margin: 													0 auto;
    padding: 													20px 0;
    overflow: 													hidden;
    display: 													flex;
    > * 
    {
      flex: 													0 0 100%;
    }
    &:hover .group 
    {
      															animation-play-state: paused;
    }
}

.cardTrabajos
{
	width: 														400px;
	height: 													400px;

	border: 													none;
}

.nuestrotrabajos-container img
{
	object-fit: 												cover;
    width: 														100%;
    height: 													100%;
    color: 														white;
    border-radius: 												24px;
    box-shadow: 												rgba(0, 0, 0, 10%) 5px 5px 20px 0;
    font-size: 													xx-large;
    justify-content: 											center;
    align-items: 												center;
    min-height: 												200px;
}

/* Agrupando las tarjetas para una mejor estructura. */
.group 
{
    display: 													flex;
    gap: 														20px;
    /* Agrega padding a la derecha para crear un espacio entre la última y la primera tarjeta. */
    padding-right: 												20px;
    will-change: 												transform; /* Deberíamos ser amables con el navegador: hazle saber qué vamos a animar. */
    animation: 													scrolling 30s linear infinite;
}

  @keyframes scrolling {
    0% {
      transform: 												translateX(0);
    }
    100% {
      transform: 												translateX(-100%);
    }
  }

/*     	Termina seccion 8. NUESTROS TRABAJOS.	*/

/*			9. MARCAS.							*/

.marcas-container
{
    width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                50px;
    padding-bottom:                                             50px;
}

.marcas-container h1
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  40px;

    align-items:                                                center;
    text-align:                                                 center;

    color:                                                      #05002B;	
}

.marcas-container img
{
	object-fit: 												contain;
    width: 														100%;
    height: 													100%;
}

/*		Termina seccion 9. MARCAS.				*/

/*			10. DUDAS.							*/

.dudas-container
{
	width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                50px;
    padding-bottom:                                             50px;

    background-color: 											#05002B;
}

.dudas-container h3
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                500;
    font-size:                                                  30px;

    align-items:                                                center;
    text-align:                                                 center;

    color:                                                      #FFFFFF;
}

.dudas-container p 
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                500;
    font-size:                                                  17px;
  	line-height: 												120%;  

    text-align: 												justify;

    color:                                                      #FFFFFF;
}

.dudas-container a 
{
	color: 														#28D146;
}

/*		Termina seccion 10. DUDAS.				*/

/*			11. CONTACTANOS.					*/

.contactanos-container
{
	width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                50px;
    padding-bottom:                                             50px;
}

.contactanos-container h1 
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                700;
    font-size:                                                  40px;
    line-height: 												120%;

    text-align: 												center;

    color:                                                      #05002B;
}

.contactanos-container h5 
{
    font-weight:                                                600;
    font-size:                                                  25px;
    line-height:                                                120%;
    color:                                                      #000000;
}

.contactanos-container p 
{
    font-style:                                                 normal;
    font-weight:                                                500;
    font-size:                                                  20px;
    line-height: 												120%;

    color:                                                      #000000;
}

.contactanos-container input
{
    position:                                                   relative;
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    width:                                                      100%;
    height:                                                     50px;
    font-weight:                                                600;
    padding:                                                    20px;
    border:                                                     2px solid #05002B;

    background:                                                 #ffffff;
    border-radius:                                              10px;

    resize:                                                     none;
} 

.contactanos-container input::placeholder
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                600;
    font-size:                                                  16px;
    line-height:                                                120%;
    padding-left:                                               10px;

    text-align:                                                 justify;

    color:                                                      #000000;
}   

.contactanos-container textarea
{
    position:                                                   relative;
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    width:                                                      100%;
    height:                                                     100px;
    padding:                                                    20px;
    border:                                                     2px solid #05002B;

    font-weight:                                                600;
    font-size:                                                  16px;
    line-height:                                                250%;
                    
    background:                                                 #ffffff;
    border-radius:                                              10px;
    resize:                                                     none;
}     

.contactanos-container textarea::placeholder
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight:                                                600;
    font-size:                                                  16px;
    line-height:                                                120%;
    padding-left:                                               10px;

    text-align:                                                 justify;

    color:                                                      #000000;
}  

/*		Termina seccion 11. CONTACTANOS.		*/

/* 			12. DESARROLLADO POR.				*/    

.desarrollador-container
{
	width:                                                      100%;
    height:                                                     auto;
    padding-top:                                                10px;
    padding-bottom:                                             10px;

    background-color: 											#05002B;
}

.desarrollador-container a
{
	font-family: 												"Roboto", sans-serif;
    font-style:                                                 normal;
    font-weight: 												600;
    font-size: 													15px;
    line-height: 												120%;

    color: 														#FFFFFF;
    text-decoration: 											none;
}

/*		Termina seccion 12. DESARROLLADO POR.	*/

/*				13. BOTON WHATSAPP				*/

.btn-wsp
{
	position: 													fixed;
	width: 														55px;
	height: 													55px;
	line-height: 												55px;
	bottom: 													30px;
	right: 														30px;
	background: 												#0DF053;
	color: 														#FFFFFF;
	border-radius: 												50px;
	text-align: 												center;
	font-size: 													30px;
	box-shadow: 												0px 1px 10px rgba(0, 0, 0, 0.3);
	z-index: 													100;
}

.btn-wsp:hover
{
	text-decoration: 											none;
	color: 														#0DF053;
	background: 												#FFFFFF;
}

/*		Termina seccion 13. BOTON WHATSAPP		*/


/* 				14. MEDIA QUERYS					*/

@media(max-width: 991px) 
{

	/*					1. BOTONES.					*/

	.btnLetrasAzulFondoTransparente
	{
		font-size: 												15px;
	}

	/*			TERMINA LA SECCION 1. BOTONES.		*/ 


	/*					2. HEADER.					*/

	/*			2.3 Menu Hamburguesa.			*/

		.btn-primary
	{
	    background-color:                                       transparent !important;
	    border:                               					none !important;
	}

	.btn-primary:hover
	{
	    background-color:                                      	transparent;
	    border:                                                 none;
	}

	.btn-check:focus+.btn-primary, .btn-primary:focus {
	    color:                                                  #FFFFFF !important;
	    background-color:                                       transparent !important;
	    border-color:                                           transparent !important;
	}

	.navbar-toggler-icon
	{
	    width:                                                  35px;
	    background-color:                                       transparent !important;
	}

	.offcanvas
	{
	    width:                                                  400px;
	   	margin-top: 											58px;
	    background-color:                                       #0B0062 !important;
	}

	.offcanvas-body h2
	{
	    color:                                                  #ffffff !important;
	}

	/*	Termina Seccion 2.3 Menu Hamburguesa.	*/

	/*			TERMINA LA SECCION 2. HEADER.		*/


	/*				3. BANNER PRINCIPAL. 			*/

	.banner-principal h1
	{
		font-weight:                                            700;
	    font-size:												22px;
	}

	/*	TERMINA LA SECCION 3. BANNER PRINCIPAL. 	*/

	/*				4. QUIENES SOMOS.				*/

	.quienessomos-container h1
	{
	    font-size:												30px;
	}

	.quienessomos-container p 
	{
		padding-left: 											0px;
	}

/*		TERMINA SECCION 4. QUIENES SOMOS.		*/


/*					5. VALORES.					*/


	.tooltip-element 
	{
  		font-family: 												"Roboto", sans-serif;
    	font-style:                                                 normal;
    	font-weight:                                                700;
    	font-size:                                                  17x;

    	color:                                                      #FFFFFF;
	}


/*		TERMINA SECCION 5. VALORES.				*/

/*			6. VISION Y MISION.					*/

	.VisionMision-container
	{
	    padding-top:                                            50px;
	}

	.VisionMision-cuadro
	{
	    margin-bottom:											25px;
	}


/*	TERMINA SECCION 6. VISION Y MISION.			*/

/*			7. NUESTROS SERVICIOS.				*/

	.servicios-container
	{
	    padding-top:                                                0px;
	}

	.servicios-container h1
	{
		font-family: 												"Roboto", sans-serif;
	    font-style:                                                 normal;
	    font-weight:                                                700;
	    font-size:                                                  40px;

	    align-items:                                                center;
	    text-align:                                                 center;

	    color:                                                      #05002B;	
	}

/*				7.1 Titulos.					*/

    .btnTituloMarcas
    {
    	font-weight: 												400;
    	font-size: 													18px;
    
    	margin-left: 												10px;
    }

/*		Termina seccion 7.1 Titulos.			*/

/*				7.2 Contenidos.					*/

	.servicios-container img
	{
	    padding: 													0px;											
	}

	.servicios-container h2
	{
		font-size: 													28px;

		margin-top: 												-10px;

		color: 														#05002B;
	}

/*		Termina seccion 7.2 Contenidos.			*/

/* TERMINA SECCION 7. NUESTROS SERVICIOS.		*/

/*			 8. NUESTROS TRABAJOS.              */

	.nuestrotrabajos-container
	{
	    width:                                                      100%;
	    height:                                                     auto;
	    padding-top:                                                50px;
	    padding-bottom:                                             50px;
	}

	.nuestrotrabajos-container h1
	{
		font-size:													30px;	
		margin-top: 												-40px;
	}

	.cardTrabajos
	{
		width: 														250px;
		height: 													250px;
	}

/*     	Termina seccion 8. NUESTROS TRABAJOS.	*/

/*			9. MARCAS.							*/

	.marcas-container h1
	{

	    font-size:                                                  30px;
	}

	.marcas-container img
	{
		padding: 													5px;
	}

/*		Termina seccion 9. MARCAS.				*/

/*			10. DUDAS.							*/

	.dudas-container p 
	{
			margin-top: 											10px;
			margin-bottom: 											25px;
	}

/*		Termina seccion 10. DUDAS.				*/

/*			11. CONTACTANOS.					*/

	.contactanos-container h1 
	{
    		font-size:                                         		30px;
	}

	.contactanos-container h5 
	{
    		text-align:                                     		center;
	}


/*		Termina seccion 11. CONTACTANOS.		*/

/* 			12. DESARROLLADO POR.				*/    

/*		Termina seccion 12. DESARROLLADO POR.	*/

}

/*		TERMINA SECCION 14. MEDIA QUERYS			*/