/* - - - - - - - - - - - - - - - 
CSS para pantallas pequeñas (Móviles)
Ultima modificación por:
Fecha:
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ */
/* ------------------------HEADER------------------------------ */
header{
    width: 0;
    height: 0;
    padding: 0;
    z-index: 9;
}
#logoResp{
    display: flex;
    justify-content: center;
    padding-top: 20px;
    position: relative;
    z-index: 4;
}
.logo {
    width: 60px;
    position: relative;
    top: 10px;
}

.nav-header{
    display: none;
}
.btn_contacto{
    display: none;
}
#menuToggle
{
  display: block;
  position: relative;
  top: -65px;
  left: 58px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #9F8137;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #000;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ #s1
{
  opacity: 1;
  transform: rotate(45deg) translate(1px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ #s3
{
    transform: rotate(-45deg) translate(0, -1px);
}

#menuToggle input:checked ~ #s2
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menu
{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  margin: -100px 0 0 -50px;
  padding: 27px;
  padding-top: 27px;
  width: 90vw;
  background: #F4F9FF;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  box-shadow: 2px 2px 50px 3px rgb(154 150 150);
}

#menu a
{
  padding: 20px 0;
  font-size: 22px;
}
#menu :nth-child(1){
    padding: 10px 0;
    top: 22px;
}

#menuToggle input:checked ~ #menu
{
  transform: none;
}
.btn{
    font-size: small;
}
.form-menu {
    background-size: 450%;
    width: 100%;
    height: 100%;
    top: -62%;
    /* opacity: .5; */
}
.form-menu-r {
    display: block !important;
    height: 13%;
    top: 35px;
    background-image: url(../../_images/_svg/fmenu.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    margin: auto;
    position: absolute;
    z-index: 3;
    background-size: cover;
  }
/* ------------------------ INICIO ------------------------------ */
.cpi {
    flex-direction: column;
    align-items: center;
    padding: 80px 0 0;
    
}
.ct-i p {
    font-size: 1em;
}
.logos {
    width: 80%;
    margin-bottom: 30px;
}
#logocpi {
    width: 30%;
}
#logofides {
    width: 50%;
}
#align-mx {
    flex-direction: column;
}
.ct-mx h1 {
    font-size: 2em;
}
.ct-mx p {
    width: 100%;
    margin: 0 auto 30px;
}
.mx img{
    width: 100%;
}
.nclientes h1{
    font-size: 1em;
}
.clients {
    width: 80%;
}
#cld2, #cld3, #cld4 {
    width: 100%;
    margin: 10px auto;
}
#t_inicio {
    height: 50vh
}
#t_inicio h1 {
    font-size: 1.3em;
    margin-top: -50px;
}
#v_inicio{
    display: none;
  }
  #f_inicio{
      background-image: url(../../_images/fondo_in2.jpg);
      background-repeat: no-repeat;
      background-position: top;
      background-size: cover;
  }
/* ------------------------ VALORES ------------------------------ */

.title-black {
    font-size: 3.5em;
}
#fondo-valores h1 {
    font-size: 2.5em;
}
#p-val {
    width: 80%;
    font-size: 1em;
}
.ct-val {
    padding-top: 85vh;
}
.mis-vis {
    flex-direction: column;
}
.align-misvis {
    width: 80%;
}
.pleca {
    width: 100%;
    margin-bottom: 30px;
}
.pleca p {
    font-size: 1em;
}
.align-misvis {
    margin: 50px auto 0;
}
/* ------------------------SERVICIOS------------------------------ */
.fondo {
    height: 400px;
}
.fondo h1 {
    font-size: 2em;
}
.gal {
    flex-direction: column;
    align-items: center;
}
.img-gal {
    width: 100%;
    height: 300px;
}
.txt-gal {
    width: 80%;
    text-align: center;
    padding-top: 25px;
    font-size: small;
}
#slider-serv>.owl-nav {
    width: 90%;
    top: 25%;
}
.title-white span {
    -webkit-text-stroke: 1px #fff;
    color: transparent;
}

/* ------------------------CERTIFICACIONES------------------------------ */
.sec-cert {
    margin: 40px auto;
}
.sec-cert h2 {
    width: 90%;
    font-size: 1em;
}
.logos_cert {
    text-align: center;
    margin: 30px 0;
    width: 100%;
}
#lg1 :nth-child(2) {
    margin: 0 20px;
}
.logos_cert img {
    width: 45%;
    margin: 10px 0!important;
}
#lg1{
        flex-direction: column;
}
#lg2 {
    flex-direction: column;
    margin-top: 0px;
}
/* ------------------------ CONTACTO ------------------------------ */
.fondo2 {
    height: 400px;
}
.fondo2 h1 {
    font-size: 2em;
}
.btn_ct {
    width: 25%;
  }
  .btns {
    width: 99%;
  }
  .forms {
    width: 90%;
  }
  .styleInput {
    padding: 10px;
    font-size: small;
    margin: 10px 5px;
  }
  .btn_ct {
    width: 100px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: small;
}
.btn-enviar {
    width: 30%;
}
#pleca-info {
    width: 90%;
    font-size: small;
}
/* ----------------------------- */
.mail-ok .btn_ct{
	width: 150px;
    padding: 13px 10px;
}
.mail-ok h3 {
    font-size: medium;
}
.mail-ok h1 {
    font-size: 3em;
    margin: 10px 0;
}
#txt-cok{
    font-size: 2em;
  }
/* ------------------------FOOTER------------------------------ */

.align-footer {
    flex-direction: column;
    align-items: center;
}
#ct-footer{
    text-align: center;
}
.logof {
    margin-bottom: 0px;
    width: 50px;
}
#alogof {
    width: auto;
}
footer {
    font-size: 1em;
}
#infof{
    text-align: center;
  }