:root{
  --azul: #2785D5;
  --verde:#87BE27;
  --gris:#E6ECF0;
}
/* RESET */
*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	border: none;
	outline: none;
}
/* Works on Firefox */
* {
  scrollbar-color: var(--azul) whitesmoke !important;
}
.container-fluid{
  padding:0 !important;
}
.row > *{
  padding: 0 !important;
}
.row{
  margin:0 !important;
}
h1,h2,h3,h4{
	margin:0 !important;
}
p{
	margin:0 !important;
  font-size: 1.1rem !important;
}
ul{
  margin-bottom: 0 !important;
  padding: 0 !important;
}
html{
  scroll-behavior: smooth;
}
body{
  overflow-x: hidden !important;
  background-color: whitesmoke !important;
  font-family: textos !important;
}
/* RESET */

/* FUENTES */
@font-face {
    font-family: textos;
    src: url("../font/Montserrat-Light.ttf");
}
@font-face {
    font-family: titulo;
    src: url("../font/Montserrat-Bold.ttf");
}
@font-face {
    font-family: subTitulo;
    src: url("../font/Montserrat-Medium.ttf");
}
/* FUENTES */

/* ESTILOS GENERALES */
.boton{
  background-color: var(--verde) !important;
  color: white !important;
  border-radius: 20px !important;
  -webkit-transition: 0.5s !important;
  -o-transition: 0.5s !important;
  transition: 0.5s !important;
  padding: .4rem 1.5rem !important;
}
.boton:hover{
  background-color: white !important;
  color:var(--verde) !important;
  border: 1px solid var(--verde) !important;
}
.carrucel,
.induImg,
.induSection01,
.formulario{
  padding-top:5.5rem !important;
}
.section02,
.section03,
.section05,
.section07,
.induSection03,
.induSection04,
.induSection05,
.section00{
  padding: 5rem 0 !important;
}
.induSection02{
  padding-top: 5rem !important;
}
.section04{
  padding-bottom: 5rem !important;
}
.section01 h2,
.section02 h2,
.section03 h2,
.section04 h2,
.section05 h2,
.section07 h2,
.section00 h2,
.induSection01 h2,
.induSection03 h2,
.induSection04 h2{
  font-size: 2rem !important;
  font-family: subTitulo !important;
}
.section02 #texto span,
.section03 span,
.induSection01 #texto span,
.induSection03 span{
  font-family: titulo !important;
}
.section01 #texto{
  padding-right: 10% !important;
}

.induSection01 #texto{
  /*padding-left: 5% !important;*/
}
.section04 h3,
.section05 h3,
.section07 h3,
.section00 h3{
  font-size: 1.8rem !important;
  font-family: titulo !important;
}
#header nav ul li a,
.footer #nav ul li a{
  -webkit-transition:0.5s !important;
  -o-transition:0.5s !important;
  transition:0.5s !important;
}
#header nav ul li a:hover,
.footer #nav ul li a:hover{
  opacity: 0.5 !important;
}

/* BARRA DE NAVEGACION */
#header{
  background-color: var(--azul) !important;
  position: fixed !important;
  z-index: 1000 !important;
  width: 100% !important;
}
#header .tel{
  font-family: subTitulo !important;
}


/* SECTION 01 */

/* SECTION 02 */

/* SECTION 03 */
.section03 #azul{
  background-color: var(--azul) !important;
}
.section03 #borde{
  border: 1px solid var(--azul) !important;
  z-index: 99 !important;
}
.section03 #figuras{
  width: 100% !important;
  height: 100% !important;
  background-color: white !important;
}

/* SECTION 04 */
.section04 .card{
  height: 480px !important;
  -webkit-transition:0.5s !important;
  -o-transition:0.5s !important;
  transition:0.5s !important;
  border:1px solid var(--azul) !important;
}
.section04 .card:hover{
  background-color: var(--azul) !important;
  color:white !important;
}
.section04 #tarjetas img{
  width: 35% !important;
}
.section00 #tarjetas img{
  width: 50% !important;
}
.section00 #tarjetas .card{
  height: 100% !important;
}

/* SECTION 05 */
.section05 #tarjetas img{
  width: 100% !important;
}
.section05 #card{
  height: 530px !important;
}

/* SECTION 07 */
.section07 #tarjetas #img{
  overflow: hidden !important;
}
.section07 #tarjetas #img img{
  -webkit-transition: 0.5s !important;
  -o-transition: 0.5s !important;
  transition: 0.5s !important;
}
.section07 #tarjetas #img img:hover{
  -webkit-transform: scale(1.1) !important;
      -ms-transform: scale(1.1) !important;
          transform: scale(1.1) !important;
}

/* INDUSTRIAL / SECCION 02 */
.induSection02 .sub h3{
  color:var(--azul) !important;
  font-family: titulo !important;
}
.induSection02 .titulo h2{
  color:var(--verde) !important;
  font-family: subTitulo !important;
  font-size: 1.5rem !important;
}
.induSection02 #texto{
  /*padding-left: 15% !important;
  padding-right: 15% !important;*/
  text-align: center !important;
}
.induSection02 span{
  font-family: subTitulo;
}

/* INDUSTRIAL / SECCION 03 */
.induSection03{
  background:url(../img/fondos/01.png);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* INDUSTRIAL / SECCION 05 */
.induSection05{
  background-color: var(--gris) !important;
}
.induSection05 .subTitulo{
  font-family: titulo !important;
}
.induSection05 h3{
  font-family: titulo !important;
  font-size: 1.2rem !important;
}

.induSection05 .icono i{
  font-size: 4rem !important;
  color: var(--verde);
  padding: 2rem !important;
}

/* FORMULARIO */  
.formulario h3 {
  font-family: textos !important;
  font-size: 2.5rem !important;
}
.formulario h2{
  font-size: 4rem !important;
  font-family: titulo !important;
}
.formulario span{
  color:  var(--verde) !important;
}
.formulario p strong{
  font-family: subTitulo !important;
}
.formulario form input,
.formulario form textarea,
.formulario form select{
  opacity: .9;
  background-color: rgb(240,248,255);
  border: none;
}
.formulario form textarea{
  resize: none !important;
  height: 200px;
  border-radius: 15px !important;
}

/* FOOTER */
.footer{
  background-color: var(--azul) !important;
  margin-top: -0.5rem !important;
}
.footer h3{
  font-size: 1.5rem !important;
}
.footer h4{
  font-size: 1rem !important;
}
.footer h4 span{
  font-family: subTitulo !important;
}
.footer #redes li{
  border:2px solid white !important;
  border-radius: 25rem !important;
  height: 50px;
  width: 50px;
}
.footer #redes li i{
  color:white !important;
  font-size: 1.5rem !important;
}
.footer #nav .nav-link{
  padding: 0.5rem 0 0 0 !important;
}

/* LOADING */
.loading{
  width: 100%;
  height: 100vh;
  background: var(--azul);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top:0;
  left: 0;
  z-index: 100000;
  -webkit-clip-path: circle(100% at 50% 50%);
          clip-path: circle(100% at 50% 50%);
  -webkit-transition: -webkit-clip-path 0.8s ease-in-out;
  transition: -webkit-clip-path 0.8s ease-in-out;
  -o-transition: clip-path 0.8s ease-in-out;
  transition: clip-path 0.8s ease-in-out;
  transition: clip-path 0.8s ease-in-out, -webkit-clip-path 0.8s ease-in-out;
}
.loading2{
  -webkit-clip-path: circle(0% at 50% 50%);
          clip-path: circle(0% at 50% 50%);
}
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  -webkit-animation: lds-dual-ring 1.2s linear infinite;
          animation: lds-dual-ring 1.2s linear infinite;
}
@-webkit-keyframes lds-dual-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes lds-dual-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.section00 #tarjetas .cardB{
  text-decoration: none !important;
  color:  black !important;
  cursor: pointer;
}
.section00 #tarjetas .cardB .card{
  transition: 0.5s !important;
}
.section00 #tarjetas .cardB .card:hover{
  color: white !important;
  background-color: var(--azul) !important;
}
.induSection01 .sub{
  font-family: subTitulo !important;
}
.section00 .logo{
  width: 20% !important;
}
.formulario .logo{
  width: 40% im !important;
}


/* ESTILOS MOVIL */
@media only screen and (max-width: 500px){
  .section01 h2, 
  .section02 h2, 
  .section03 h2, 
  .section04 h2, 
  .section05 h2, 
  .section07 h2, 
  .induSection01 h2, 
  .induSection03 h2, 
  .induSection04 h2{
    font-size: 1.5rem !important;
  }
  #texto{
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
  #header nav{
    padding-left:0 !important;
  }
  #header .brand{
    width: 52% !important;
  }
  .navbar-brand{
    padding-right: 20% !important;
  }
  #header .nav{
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    text-align: center !important;
  }
  .carrucel,
  .induSection01,
  .formulario{
    padding-top: 4rem !important;
  }
  .section01 #texto{
    padding-top:4rem !important;
    padding-bottom: 4rem !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: center  !important;
        -ms-flex-align: center  !important;
            align-items: center  !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  .section01 #texto .boton{
    margin-right: 0 !important;
  }
  .section04{
    padding-bottom: 4rem !important;
  }
  .section04 #tarjetas .card,
  .section00 #tarjetas .card{
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }
  .footer .brand{
    width: 55% !important;
  }
  .footer .colBrand{
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    padding-bottom: 3rem !important;
  }
  .footer .colRedes{
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .footer #redes{
    padding-left: 1rem !important;
  }
  .footer #redes li{
    width: 45px !important;
    height: 45px !important;
  }
  .footer #redes li i{
    font-size: 1.3rem !important;
  }
  .footer #nav{
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    text-align: center !important;
  }
  .induSection02 .titulo h2{
    font-size: 3rem !important;
    text-align: center !important;
    margin-top:1.5rem !important;
  }
  .induSection03 #texto{
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    text-align: center !important;
  }
  .induSection05 .subTitulo{
    text-align: center !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .induSection05 .elemento,
  .induSection05 .elemento2{
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  .induSection05 .elemento .texto{
    text-align: center !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-bottom: 3rem !important;
  }
  .induSection05 .elemento2 .texto{
    text-align: center !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .formulario h3{
    font-size: 2rem !important;
    text-align: center !important;
  }
  .formulario h2{
    font-size: 3.5rem !important;
  }
  .formulario .col1{
    text-align: center !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-bottom: 3rem !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
  .formulario form{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
     -webkit-box-align: center !important;
         -ms-flex-align: center !important;
             align-items: center !important;
  }
  #header .tel{
    display: none !important;
  }
  .induSection02 .titulo h2{
    font-size: 2rem !important;
  }
  .induSection02 .sub h3{
    font-size: 1rem !important;
  }
  .section00 #info{
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
  .induImg{
    padding-top: 4rem !important;
  }
}