/******************************************************************
Theme Name: MBlue Theme 
Theme URL: http://mmw.mx
Author: Mapacheweb
Description: Mtheme Child 
Theme Author: Mapacheweb
Author URL: http://yourdomain.com
Template: mtheme
Version: 1.0.0 
Text Domain: mtheme-child
******************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
/*CUSTOM COLOR THEME 2*/
:root{
  /*BASE COLOR THEME*/
  --primary:#586469;
  --link:#03A9F4;
  --linkhov:#FF9800;
  --title:#353b41;
  --txt:#353b41;
  --txt2:#666;
  --white:#FFF;
margin:0; 
  

  --darkcolor:#1e2125; 
  --color:#4ada4f;


  /*Tipografia*/
  --ftitle: 'Open Sans', sans-serif;
  --ftexto:'Roboto', sans-serif;
  --h1:38px;
  --h2:30px;
  --h3:24px;
  --h4:18px;
  --h5:16px;
  --h6:16px;
  --p:16px;
  --span:12px;
  --big:18px;

  /*btn*/
  --border:1px;
  --padding:8px 12px;
  --radius:44px;
  --txtbtn:16px;

  /*Colores adicionales*/
  --themecolor:#353b41;
  --darktheme:#1e2125; 
  --luztheme:#c7cbd1; 
  --luzlink:#bca5e4;
  --darklink:#FF9800;
}
/*.navbar-fixed-top{position: absolute;}*/
header .navbar{background: #FFF;margin: 0;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);}
.home header .navbar{background: #E5E5E5;margin: 0;}
/* header.header{margin-bottom: -50px;} */
/* body{ padding-top: 160px;} */
.logotipo{width: 200px;}
.logotipo img{height: 66px; margin:0px 5px 0 0; }
.logotipo h1{display: none;}
.logotipo span{display: none;}
.navbar-inverse{
  background-color: transparent;
  background-image:linear-gradient(0deg, transparent, #0a2342);
  background-repeat: no-repeat;
  background-size: 100% 100%; 
}
.navbar-inverse.navbar-active{background: linear-gradient(0deg, #12427d, #0a2342);}
.navbar-nav > li{    padding: 10px 15px;}
.navbar-nav > li a{text-transform: uppercase;}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus{ background-color: transparent; color: white; opacity: 1; }
.redes li{padding: 10px 0px !important;}

.sectionmpche{background-color:var(--primary);}

.redes{margin: 0 20px;}
.redes a{
  font-size: 20px;
  color: #82BE37;
}
.redes svg path{
  fill: #82BE37;
}

.referencenav{position: relative;}
/* .scroleable{max-height: 600px;overflow-y: scroll;} */
.fixedright{
  position: absolute;
  top: calc(50vh - 200px);
  right: 50px;
  z-index: 9999;
  width: 200px;    
}
.fixedright a{
  width: 80px;
  border: 1px solid #c3c3c3;
  border-radius: 20px;
  background-color: white;
  position: relative;
  font-size: 17px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto 10px;
  transition: all .3s;
  color: #62B4FE;
  line-height: 2;
}
.fixedright a:last-child{
  margin-bottom: 0px;
}

.fixedright a:hover{transform: scale(1.25);font-size: 14px;color: #62B4FE;}
/* .fixedright a.active{
  font-size: 15px;
  background: #89c8ff;
  color: #fff;
} */

.fixedright:after{
  content: "";
  position: absolute;
  width: 1px;
  top: 0;
  left: 50%;
  bottom: 0;
  border-right: 2px dotted #c3c3c3;
}
    

/* Estilos Sitio */

.azul{color:#62B4FE;}
.amarillo{color:#F6BC0A;}
.verde{color:#82BE37;}
.negro{color:#1B1725;}
.azul-bg{background-color:#62B4FE; padding: 10px 0 0 1px!important;}
.amarillo-bg{background-color:#F6BC0A;}
.verde-bg{background-color:#82BE37;}
.negro-bg{background-color:#1B1725;}

body{font-family: var(--ftexto);}
body{background-color: #E5E5E5;}
.titulo{font-size: 42px;font-weight: 300;text-align: center;margin: 0;margin-bottom: 40px;text-transform: uppercase;}
.grid > div{background: transparent;}
a, a:hover{color: #000;}
/* Servicios */
#servicios{padding: 40px 20px 0;    z-index: 111; position: relative;min-height: 40vh;}
#servicios .container > div {grid-gap: 20px;}
#servicios .servicio{border:1px solid #D9D9D9; background-color: #fff; color: #404040;height: 180px;border-radius: 20px;padding:20px 40px 40px;text-align: center;transition: .5s;overflow: hidden;}
#servicios .servicio h3{color:#535e63;font-size: 20px;font-weight: 600;margin: 10px 0 30px;transition: .5s;}
#servicios .servicio span{display: none;transition: .5s;color: #fff;font-size: 14px;}
#servicios p{margin-top: 20px;font-size: 13px;display: none;transition: .5s;}
#servicios .ser:hover .servicio, #servicios .ser.active .servicio{color: #fff; height: 250px;padding: 40px 20px;}
#servicios .ser:hover p, #servicios .ser:hover span,#servicios .ser.active p, #servicios .ser.active span{display: block;}
#servicios .ser:hover h3, #servicios .ser.active h3{color: #fff;}
#servicios .ser:nth-child(1):hover .servicio, #servicios .ser:nth-child(1).active .servicio{background: #F6BC0A; }
#servicios .ser:nth-child(2):hover .servicio, #servicios .ser:nth-child(2).active .servicio{background: #62B4FE; }
#servicios .ser:nth-child(3):hover .servicio, #servicios .ser:nth-child(3).active .servicio{background: #82BE37; }
#servicios .ser:nth-child(4):hover .servicio, #servicios .ser:nth-child(4).active .servicio{background: #1B1725; }

#divisor{background: linear-gradient(195deg, #95cd51 0%, #2888e2 100%)!important;height: 3px;width: 40%;margin: 0 auto;margin-bottom: 30px;margin-top: 30px;}



/* Quienes somos */

#somos{
  padding: 60px 0;position: relative;border-bottom: 10px solid;
  border-image-source: linear-gradient(264deg, #95cd51 0%, #2888e2 100%);  border-image-slice: 1;
   z-index: 112221; position: relative;
}
#somos h2{color:#fff;font-size: 52px;line-height: 62px;}
#somos p{color:#fff;font-size: 32px;line-height: 51px;font-weight: 300;}

#historia{padding: 20px 0;}
.historia-item{padding: 0 50px;}
#historia .historia-item .grid{grid-gap: 0;position: relative;}
#historia .historia-item .item-content{display: flex;align-items: center;}
#historia .historia-item .item-1{margin:0;text-align: right;border-right: 1px solid #9691A3;padding-bottom: 50px;position: relative;}
#historia .historia-item .item-2{margin:0;text-align: left;border-left: 1px solid #9691A3;padding-bottom: 50px;}
#historia .historia-item .circulo{
  width: 60px;
  height: 60px;
  position: absolute;
  border-radius: 50%;
  right: -30px;
  top: 58%;
  margin-top: 0px;
  padding: 12px 0 0 1px;
  z-index: 999;

  left: calc(50% - 30px);
  right: auto;
}
#historia .historia-item img{width: 100%;}
#historia .historia-item .item-1 .wrap{border-radius: 20px 0 0 20px;}
#historia .historia-item .item-2 .wrap{border-radius: 0 20px 20px 0;}
#historia .historia-item .wrap{overflow: hidden;}
#historia .historia-item .wrap img{transition: all .3s ease;}
#historia .historia-item .wrap:hover img{transform: scale(1.2);}
#historia .historia-item .circulo img{width: 100%;}
#historia .historia-item h3{font-weight: 600;font-size: 18px;text-transform: uppercase;color: #404040;}
/* #historia .historia-item .item-1 h3{padding-right: 50px;}
#historia .historia-item .item-2 h3{padding-left: 50px;} */
.item-1.item-content{padding-right: 50px;}
.item-2.item-content{padding-left: 50px;}
#historia .historia-item h3{font-weight: 600;font-size: 18px;text-transform: uppercase;color: #404040;}
#historia .historia-item h4{color:#C3C3C3;font-weight: 300;font-size: 42px;margin-top: 0;}
#historia .historia-item span{font-weight: 600;font-size: 16px;}
#historia .historia-item p{font-weight: 400;font-size: 14px;color:#676767;line-height: 24px;}

#servicios.detalle p{display: block;width: 70%;margin: 0 auto;margin-bottom: 60px;font-size:16px;}

.galeria .wrap{overflow: hidden;margin-bottom: 20px;border-radius: 20px;}
.galeria .wrap img{
  height: 185px;
  width: 100%;
  object-fit: cover;
  transition: all .3s ease;
}
.galeria .wrap:hover img{transform: scale(1.2);}
.detalle.energia,.detalle.perforacion,.detalle.verde,.detalle.construccion{display:none;}



/* Footer */

#footer {
  margin:0; background: url(img/BIONER_Bg_footer.jpg);background-position: center;background-repeat: no-repeat; padding-top: 20px; 
  clear: both; color: var(--white);border-top: 10px solid; border-image-source: linear-gradient(95deg, #95cd51 0%, #2888e2 100%);  
  border-image-slice: 1;background-size: cover;
  z-index: 111;  position: relative;}
#footer #sub-floor{background:rgba(0, 0, 0, 0.20);}
#footer .logo{margin-bottom:40px;}
#footer hr{ background-color: #fff;margin: 40px 0;}
#footer .navbar-nav{width: 100%;margin:0;display: flex; justify-content: center; flex-wrap: wrap;}
#footer .navbar-nav li{border:none;}
#footer .navbar-nav li a{font-size: 14px;font-weight: 600;text-transform: uppercase;}

.contacto .telefonos{font-size: 36px;font-weight: 300;}
.contacto .telefonos span{display: block;}
.contacto .direccion span, .contacto .emails span{display: block;font-size: 26px;}

#footer .btn-servicios{position: relative; font-weight: normal;width: 180px;box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);display: block; margin: 20px 0;}
#footer .btn-servicios {background: linear-gradient(45deg, #95cd51 0%, #2888e2 100%);}
#footer .btn-servicios span{ background:#fff; display: block; padding: 8px 0; border-radius: var(--radius);font-size: 16px;font-weight: 700;}
#footer .btn-servicios.messenger span{color:#2888E2;}
#footer .btn-servicios.whatsapp span{color:#95CD51;}
#footer .contacto-plus{margin-top: 50px;}
#footer .contacto-plus p{font-weight: 600;color:#fff;font-size: 18px;margin-top: 40px;}

.header-sect{min-height: 500px;position: relative;background-position: center;background-size: cover;}
.header-sect h2{font-size: 95px;text-align: center;font-weight: 300;text-transform: uppercase;position: absolute;bottom: 20px;width: 100%;color:#95CD51;}

.nosotros_servicios{background: #fff;padding: 100px 0;}
.nosotros_servicios path{fill:#fff;}
.nosotros_servicios .nosotros_servicio{box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.16);padding: 40px 22px;border-radius: 12px;}
.nosotros_servicios .nosotros_servicio header{border-bottom: 1px solid #C3C3C3; margin-bottom: 30px;padding-bottom: 30px;}
.nosotros_servicios .nosotros_servicio header .circulo{width: 90px;height: 90px;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: 20px;text-align: center;line-height: 140px;}
.nosotros_servicios .nosotros_servicio:nth-child(1) header .circulo{background:#95CD51;}
.nosotros_servicios .nosotros_servicio:nth-child(2) header .circulo{background:#2888E2;}
.nosotros_servicios .nosotros_servicio:nth-child(3) header .circulo{background:#F9CE4E;}
.nosotros_servicios .nosotros_servicio header .t{color:#95989A;font-size: 32px;vertical-align: middle;}
.nosotros_servicios .nosotros_servicio p{color:#676767;font-size: 21px;line-height: 41px;font-weight: 300;}
.nosotros_servicios .container > div { grid-gap: 30px; }


.serv{padding: 80px 0;background:#fff ;}
.serv img{width: 100%;border-bottom:7px solid;border-image-source: linear-gradient(264deg, #95cd51 0%, #2888e2 100%);  border-image-slice: 1;}
.serv .serv-item > div { grid-gap: 50px; }
.serv .serv-item {margin-bottom: 80px; }
.serv h3 svg{display: inline-block;vertical-align: middle;}
.serv h3 span{font-size: 18px;font-family: 'Open Sans', sans-serif;font-weight: 400;font-style:italic;color:#95989A;}
.serv h2{font-size: 46px;font-weight: 400;margin-bottom:20px;}
.serv p{font-size: 18px;font-weight: 400;color:#95989A;margin-bottom: 5px;}
.serv b{font-size: 18px;color:#95989A;margin-bottom: 5px;}

.proyectos{padding:80px 0;background:#fff ;}
.proyectos .container > div { grid-gap: 20px; }

#nosotros p{width: 70%;margin: 0 auto;margin-bottom: 60px;font-size:16px;text-align: center;}
#nosotros .mlk{width: 50%;margin: 50px auto;display: block;}

#footer .navbar-nav li{border:none;}
footer .redes{display: inline-block;padding: 0;margin: 0;}
footer .redes li{list-style: none;display: inline-block;border-bottom: 0 !important;}
footer .redes li a{margin: 0 20px;}


@media (max-width: 992px){
  .navbar-header{width: auto;}
  .fixedright{display: none;}
}

@media (max-width: 767px){
  .titulo{font-size: 28px;}
  #footer .btn-servicios{margin: 0 auto;margin-bottom: 15px;margin-top: 15px;}
  body .navbar-nav > li > a {padding: 10px 5px;} 
  header .navbar-nav > li {padding: 0;}
  #servicios.detalle p{width: 100%;text-align: center;}
  .navbar-toggle{margin-top: 45px;background-color: #E5E5E5;margin-right: 10px;}
  .navbar-toggle .icon-bar{background: #000;}
  /* .logotipo{width: 200px;} */
  .navbar-collapse.in{padding: 10px 30px;}
  .redes{margin: 0;}
  .redes li{display: inline-block;}
  .historia-item{padding: 0;}
  #historia .historia-item .grid{
    background: #fff;
    border-radius: 20px;
    margin-bottom: 50px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 30%);
    padding: 30px 20px 20px;
  }
  #historia .historia-item .item-1,#historia .historia-item .item-2{border: 0;padding: 10px 0 0;text-align: center;}
  #historia .historia-item .item-2 p,#historia .historia-item .item-2 p{margin-bottom: 0;padding: 0;}
  #historia .historia-item .item-2 h3{padding: 0;}
  #historia .historia-item .item-1 .wrap,#historia .historia-item .item-2 .wrap{border-radius: 20px;}
  #historia .historia-item h4{font-size: 40px;}
  #historia .historia-item .circulo{
    left: 50%;
    top: -15px;
    width: 50px;
    height: 50px;
    margin-left: -25px;
  }
  #historia .historia-item .circulo.two{
    left: 50%;
    bottom: 200px;
    width: 50px;
    height: 50px;
    /* margin-top: 0; */
    top: -15px;
    margin-left: -25px;
  }
  #historia .historia-item h3{padding: 0;text-align: center;font-size: 17px;}
  #historia .historia-item .item-1{padding-bottom: 0;}
}

.fixedright{transform: scale(.9); }
.fixedright a{ font-size: 20px; }

@media (max-height: 800px){
 .fixedright{transform: scale(.9);}
 .fixedright a{font-size: 16px;}
}

@media (max-height: 700px){
  .fixedright{transform: scale(.9);}
  .fixedright a{}
  
}

@media (max-height: 600px){
   .fixedright{transform: scale(.9); display: none;}
   .fixedright a{}
}