/********************************
ESTILOS QUE TIENEN QUE ESTAR ARRIBA
********************************/
.appear-640{
    display:none !important; 
}
.hide-640{
    display:block; 
}

.appear-500{
    display:none !important; 
}
.hide-500{
    display:block; 
}
.appear-800{
    display:none !important; 
}
.hide-800{
    display:block; 
}



html {
    scroll-behavior: smooth;
    overflow:auto;
  }
body{
    overflow-x: hidden;
}


.wrapper{
    max-width: 80rem;
    margin: 0 auto;
}
ul li{
    margin-bottom:0.5rem;
}
/********************************
ESTILOS QUE SE REPITEN
********************************/
h1,h2,h3{
    display: inline-block;
}

h1{
    font-style: italic;
    font-weight: bold;
}

h2{
    font-weight: 900;
    font-size: 2.5rem;
    text-transform: uppercase;
    font-style: italic;
    text-align: center;
    z-index:1;
}

h3{
    font-weight: 900;
    font-size: 1.9rem;
    text-transform: uppercase;
    font-style: italic;
    text-align: center;
}

h4{
    font-weight: bold;
    font-style: normal;
    font-size: 1.5rem;
    text-align: left;
}
h5{
    font-style: normal;
    font-size: 1.0rem;
    /*max-width: 30rem;*/
    margin: 2rem auto 1rem;
    font-weight: bold;
}
#servicios .wrapper .content,
span,p,ul{
    font-size: 1rem;
}
p{
    letter-spacing: 0px;
    line-height: 1.2rem;
}

ul{
    list-style: square;
    line-height: 1.1rem;
}

section{
   /* padding-left:5vw;
    padding-right:5vw;*/
}
img{
    width: 100%;
}

.module{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 10vh;
    padding-top: 5vh;
}
.module h2{
    margin: 3rem auto 2rem;
}

.titleVineta::before{
    content: "";
    background-color:
    #00F9F6;
    position: relative;
    width: 70px;
    height: 4px;
    margin: 0px;
    padding: 0px;
    z-index: -1;
    left: -36px;
    top: 13px;
    transform: rotate(144deg);
    display: block;
}

.titleVineta::after{
    content: "";
    background-color:#00F9F6;
    position: relative;
    width: 90px;
    height: 6px;
    margin: 0px;
    padding: 0px;
    z-index: -1;
    left: -39px;
    top: -24px;
    transform: rotate(144deg);
    display: block;
}


.icon {
    vertical-align: bottom;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
}
.xsmall{
    width: 35px;
    height:35px;
}
.xxxsmall{
    width: 20px;
}
.bgdark{
    background:#212121;
}
.bgdark h2,
.bgdark h3,
.bgdark h4,
.bgdark p{
    color:white;
}


/* spinners para las secciones que merecen spinner*/
#nosotros img,
#fundadora img,
#trabajo img,
#testimonios img
{
    background-image: url("../img/spinner.svg");
    background-repeat: no-repeat;
    background-position: center;
}

/********************************
FANCYBOX
********************************/
.fancybox-caption h1{
    font-size:1.5rem;
}
.fancybox-caption h2{
    font-size:1rem;
}

.prefixser{
    font-size: 1.2rem;
    font-weight: bold;
    /*text-transform: uppercase;*/
    color: #00F9F6;
}

/********************************
ESTRUCTURA GENERAL DE LA PAGINA
********************************/
body{
    font-family: "montserrat";
}

main{
    display:grid;
    grid-template-areas:
                        "hero"
                        "nosotros"
                        "fundadora"
                        "equipo"
                        "servicios"
                        "blog"
                        "trabajo"                      
                        "testimonios"
                        "contactanos"
                        "footer";



    grid-template-columns: 100vw;
    grid-template-rows:auto auto auto auto  auto  auto  auto auto auto auto;
    margin-top:15vh;
    /*margin-top:-6vh;*//*Esto para que no desaparezca el Sticky del Whatsapp*/                 

}
#header{
    grid-area:header;
}

#hero{
    grid-area:hero;
}
#nosotros{
    grid-area:nosotros;
}
#fundadora{
    grid-area:fundadora;
}
#equipo{
    grid-area:equipo;
}

#servicios{
    grid-area:servicios;
}
#blog{
    grid-area: blog;
    /*margin-top: -30px;*/
}
/*
.embed-container{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 0px 3rem;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 85vh;
}*/

#trabajo{
    grid-area:trabajo;
}
#testimonios{
    grid-area:testimonios;
}
#contactanosSVG{
    grid-area:contactanosSVG;
}
#contactanos{
    grid-area:contactanos;
}
#whatsapp{
    grid-area:whatsapp;
}


/*iframe
.iframe{
    height:100vh;
}*/
/********************************
HERO INFO
********************************/
.sg-box-1 .sg-panel div{
    background-position: top center;
}
.sg-box-3 .sg-panel div{
    background-position: 0px 40%;
}

.sg-box-4 .sg-panel div{
    background-position: center 25%;
}

.sg-panel h2{
    font-size:4.5vw;
    /*margin-top: 6vw;*/
}
.sg-panel h3{
    font-size:2.5vw;
}
/********************************
MENU
********************************/
#virtuallink{
    position: absolute;
    z-index: 1000;
    border: 3px solid #00F9F6;
    background: black;
    color: white;
    padding: 0.8rem 1rem 0.5rem;
    top: -8px;
    right: calc(5%);
    border-radius: 12px;
    text-decoration: none;
}



#header{
    display: flex;
    align-content: space-between;
    align-items: center;
    height: 14vh;
    background:white;
    position: fixed;
    z-index: 999;
}
#logo img{
    height: 10vh;
    margin: 0px 20px 0px 50px;
    width:auto;
    transition: 400ms ease all;
    transition: all 0.4s cubic-bezier(.91,.05,1,.63);
}
#mainMenu a{
    font-family: "Montserrat";
    color: black;
    text-decoration: none;  
    text-transform: uppercase;
    font-size: 1.1rem;
    position:relative;
    /*transition: 400ms ease all;
    transition: all 0.4s cubic-bezier(.91,.05,1,.63);*/
}
/*
/*WIGGLY*/
/*https://codepen.io/geoffgraham/pen/bxEVEN*/
/*
a:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%2300F9F6' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 20%;
    border-bottom: 0;
    padding-bottom: .3em;
    text-decoration: none;
  }
*/
/*BARRA INFERIOR*/
/*https://codepen.io/origine/pen/KVzpYm*/
#mainMenu a:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    background-color: #00F9F6;
    transition: transform 0.3s;
  }
  #mainMenu a:hover:after {
    transform: scaleX(1);
  }



.scrolled #mainMenu a{
    font-size:1rem;
}

/********************************
NOSOTROS
********************************/
#nosotros  .wrapper{
    display:grid;
    grid-template-areas: "nosotrosContent nosotrosPhoto";
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;  
    margin-bottom: 1rem;
    margin-top: 10vh;    
}
/*
#nosotros  .wrapper > div > *{
    position: relative;
    right:0px;
}*/
/*
#nosotros{
    padding-top:10vh;
    padding-bottom:3vh;
}*/

#nosotrosContent{grid-area:nosotrosContent;}
#nosotrosPhoto{grid-area:nosotrosPhoto;}

#nosotros .wrapper > div{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: right;
}

#nosotros img{
    padding: 10vh 0vw 5vh 5vw;
    /*max-width: calc(20vw + 50px);*/
    /*max-width:360px;*/
    /*min-width: 80%;*/
}
#nosotros p{
    margin-left: 1vw;
}
#nosotros h2{
    text-align: right;
}
/*
#nosotros p{
    padding:1vh 0vw 1vh 5vw;
}*/

/********************************
FUNDADORA
********************************/

#fundadora:before {
    content: "";
    background-color: #212121;
    position: absolute;
    width: 100%;
    padding: 0px;
    z-index: -1;
    height: 17vh;
    background: -webkit-linear-gradient(263deg,#212121 50%, white 50%);
    background: linear-gradient(183deg,#212121 50%,white 50%);
    clip-path: polygon(0% -1%, 100% -1%, 100% 66%, 0% 26%);
}




#fundadora .wrapper{
    display:grid;
    grid-template-areas: "fundadoraPhoto fundadoraTitle"
                         "fundadoraPhoto fundadoraContent";
    grid-template-columns: 40% 60%;
    grid-template-rows: 6rem  auto;   
}

#fundadoraPhoto{
    grid-area:fundadoraPhoto;
}
/*
#fundadora{
    margin-bottom:5rem;
}*/

#fundadora h3{
    grid-area:fundadoraTitle;   
}

#fundadoraContent{
    grid-area:fundadoraContent;
}

#fundadoraPhoto{
    text-align:center;
}

#fundadoraPhoto img{
    border: 7px solid#00F9F6;
    margin-left: 0vw;
    width: 100%;
    /*margin-top: 5vw;*/
}
#fundadora h3{
    color:white;
    margin: 0vh 0vw 0px 5vw;
    text-align: left;
    /*font-size: 2.5rem;*/
}
#fundadoraContent{
    padding-left:5vw;
    padding-right: 0vw;
}
/*
#fundadoraContent h4{
    margin-top: 0vw;
}*/

/********************************
EQUIPO
********************************/
#equipo{
    /*margin-bottom:5rem;*/
}

#equipo .wrapper{
    text-align: center;
}

  #equipoWrapper{
    display: flex;
    /*width: 90%;*/
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1115px;

  }

  .card h4,
  .card h3
  {
    z-index: 900;
    text-align: center;
  }
  .card h4.special{
    color: #05F9F6;
    display: block;
    position: relative;
    margin: 0;
    top: -3rem;
    right: -8rem;
  }
  .card h3.special{
    color: white;
    display: block;
    position: relative;
    margin: 0 auto;
    
}

  .card {
    /*width: 90vw;*/
    height: 360px;
    /*border-radius: 15px;*/
    padding: 1.5rem;
    background: white;
    position: relative;
    display: flex;
    align-items: center;
    transition: 0.4s ease-out;
    /*box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);*/
    margin-bottom:1rem;
  }

  .card img {
    object-fit: cover;
    object-position: center 16%;
    transition: 0.4s ease-out;
  }

  .card:hover {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  .card:hover:before {
    opacity: 1;
  }
  .card:hover .info {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  .card:hover img{
    object-position: -223px 16%;
  }
  .card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    /*border-radius: 15px;*/
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: 0.5s;
    opacity: 0;
  }
  .card img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    /*border-radius: 15px;*/
  }
  .card .info {
    position: relative;
    z-index: 3;
    color: white;
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition: 0.5s;
  }
  .card .info h1 {
    margin: 0px;
  }
/*
  .card:hover .info h3,.card:hover .info h4{
    font-size: 1.5rem;
    } */
   /* .card:hover h3,.card:hover h4{
        font-size: 0px;
    }*/

    .card .info p {
    /*letter-spacing: 1px;*/
    /*margin-top: 8px;*/
    /*width:140%;*/
    }
    .card .tohide{
        transition: 0.4s ease-out;
    }
    .card:hover .tohide{
        opacity:0;
    }

   


/********************************
SERVICIOS
********************************/
  #servicios {
    padding-bottom: 5rem;
    /*max-width: 80vw;*/
    /*margin-bottom: 4rem;*/
  }
  /*
  #servicios .titleVineta{
    margin-left: auto;
    margin-right: auto;
    width: 17rem;
    z-index: 100;
    position: relative;
}*/


  #servicios .wrapper > .item {
    background: #212121;
    color:white;
    padding: 2rem 2rem 1rem;
    margin: 0 auto;
    max-width: 30rem;
  }
  #servicios .wrapper > .item:last-of-type {
    background: #462521;
    text-align: center;
    border-radius: 0.5rem;
  }
  #servicios .wrapper > .item:last-of-type > .icon {
    color: #FFFFFF;
  }
  #servicios .wrapper > .item:nth-of-type(6) {
    padding-bottom: 2rem;
  }
  #servicios .wrapper > .item > .icon {
    color: #05F9F6;
    font-size: 2rem;
    font-weight: 900;
  }
  #servicios .wrapper > .item > .title {
    font-size: 1.5rem;
    font-weight: bold;
    font-style: italic;
  }

  #servicios .wrapper .title{
    margin-top:1rem;
  }
  #servicios .wrapper .content{
      margin-top:1rem;
  }


  @media screen and (min-width: 800px) and (min-height: 270px) {
    #servicios .wrapper {
      display: table;
      width: 80vw;
     /* max-width: 1500px;*/
      margin: 0 auto 2rem;
      height: 80vh;
      max-height: 1000px;
      overflow: hidden;
      padding-bottom: 0;
    }
    #servicios .wrapper > .item {
      display: table-cell;
      position: relative;
      height: 100%;
      padding: 2rem 1rem;
      text-align: center;
      -webkit-transform-origin: 0 50%;
              transform-origin: 0 50%;
      transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
    }
    #servicios .wrapper > .item:hover:not(:last-of-type) {
      -webkit-transform: scaleX(2) translateX(-1px);
              transform: scaleX(2) translateX(-1px);
      box-shadow: 0 0 0.5rem #05F9F6;
      background: #212121
      border-color: transparent;
    }
    #servicios .wrapper > .item:hover + .item {
      opacity: 0.1;
    }
    #servicios .wrapper > .item:hover + .item:last-of-type {
      opacity: 0.1;
      background: #212121
    }
    #servicios .wrapper > .item:not(:last-of-type) {
      border-right: 1px solid white;
    }
    #servicios .wrapper > .item:last-of-type {
      background: #1B1B1B;
      width: 25%;
      border-radius: 0;
    }
    #servicios .wrapper > .item:last-of-type .heart-icon {
      font-size: 6rem;
    }
    #servicios .wrapper > .item:hover:last-of-type .heart-icon {
      -webkit-transform: scale(2);
              transform: scale(2);
    }
    #servicios .wrapper > .item:last-of-type > .title {
      -webkit-transform: rotate(0) translateX(-50%) translateY(-2.5rem);
              transform: rotate(0) translateX(-50%) translateY(-2.5rem);
      padding: 0;
      text-align: center;
    }
    #servicios .wrapper > .item:last-of-type > .content {
      opacity: 1;
      -webkit-transform: translateX(-50%) translateY(-50%);
              transform: translateX(-50%) translateY(-50%);
    }
    #servicios .wrapper > .item:hover:not(:last-of-type) > .icon {
      -webkit-transform: scaleX(0.5);
              transform: scaleX(0.5);
    }
    #servicios .wrapper > .item:hover:not(:last-of-type) > .title {
      -webkit-transform: scaleX(0.5) translateX(-50%);
              transform: scaleX(0.5) translateX(-50%);
      background: #05F9F6;
      text-align: center;
      padding: 3rem 0px;
      color:white;
      font-weight: bold;
    }
    #servicios .wrapper > .item:hover:not(:last-of-type) > .title > .text {
      -webkit-transform: translateX(-50%)  translateY(-50%);/* translateY para posicionarlo*/
              transform: translateX(-50%)  translateY(-50%);
      left: 50%;
      top: 50%;
      width: 90%;
      position: relative;
      color:#212121;
    }
    #servicios .wrapper > .item:hover:not(:last-of-type) > .content {
      opacity: 1;
    }
    #servicios .wrapper > .item > .icon {
      font-weight: 900;
      font-size: 2rem;
      transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
      color: #05F9F6;

    }
    #servicios .wrapper > .item > .title {
      position: absolute;
      bottom: 0;
      left: 50%;
      height: 1.5rem;
      width: 135%;
      text-align: left;
      -webkit-transform-origin: 0 50%;
              transform-origin: 0 50%;
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
      transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
      font-size: 1.2rem;
    }

    #servicios .wrapper > .item > .title#lastTitle {
        bottom:50%;
    }
    #servicios .wrapper > .item > .title#lastTitle h2{
        font-size: calc(1.8vw - 20%);
    }
    
    #lastTitle .titleVineta::after,
    #lastTitle .titleVineta::before
    {
        left: auto;
        top: auto;
        transform: initial;
        
    }
    #lastTitle .titleVineta::before{
        width: 7rem;        
    }    
    #lastTitle .titleVineta::after
    {
        width: 8rem;
    }
    
    

    #servicios .wrapper > .item > .title > .text {
      position: absolute;
      left: 2rem;
      bottom: 0;
      /*white-space: nowrap;*/
      transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
    }
    #servicios .wrapper > .item > .content {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200%;
      height: auto;
      -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.5);
              transform: translateX(-50%) translateY(-50%) scaleX(0.5);
      transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
      opacity: 0;
      padding: 1rem;
      pointer-events: none;
      line-height: 1.2rem;
    }
  }
  .heart-icon {
    color: #CA2E55;
    font-size: 3rem;
    transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
  }
/********************************
BLOG
********************************/

#blog{
    background: #212121; 
    height:50rem;
}
.embed-container{
    height:40rem;}

#blog h2{
    margin:6rem auto 3rem;
}



.title-blog{
    background: #212121;
    text-align: center;
    /*margin-bottom: 3vw;
    padding-top: 3vw;
    padding-bottom: 3vw;*/
}
.title-blog h2{
    color: white;
}
.title-blog h2::after{
    content: " ";
    background-color:
    #00F9F6;
    position: relative;
    width: 70px;
    height: 4px;
    z-index: 1;
    display: block;
    right: 0;
    left: 67%;

}

/********************************
TRABAJO
********************************/
#trabajo{
    padding-bottom: 0vh;
    /*margin-top:5vh;*/
}
#trabajoWrapper{
    display:flex;
    flex-wrap: wrap;
}


.trabajos{
    margin:1%;
    justify-content: space-between;
    align-content: space-between;
    transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
    flex-basis: 30%;
    flex-grow: 1;
}

.trabajos:nth-child(1){
    flex-grow: 1;
    flex-basis:20%;
    /*margin-right:20px;*/
 }
.trabajos:nth-child(2){
   flex-grow: 4;
   flex-basis:25%;
}
.trabajos:nth-child(3){
    flex-grow: 1;
    flex-basis:30%;
    /*margin-right:20px;*/
 }
 .trabajos:nth-child(4){
    flex-grow: 3;
    flex-basis:15%;
    /*margin-right:20px;*/
 }
 .trabajos:nth-child(5){
    flex-grow: 1;
    flex-basis:25%;
 }
 .trabajos:nth-child(7) img{
    object-position:center 18%;
 }

 .trabajos:nth-child(8) img{
    height: 450px;
    object-position:center right;
 }
 .trabajos:nth-child(9) img{
    height: 400px;
    object-position:center 18%;
 }

 .trabajos:nth-child(9) img{
    object-position: center 23%;
 }


 .trabajos img{
     width:100%;
     object-fit: cover;
     object-position: center center;
     height: 350px;
 }

 .trabajos{
     position: relative;
 }

 .trabajos p{
    position: absolute;
    top: 0px;
    padding: 1vh 3vw 2vh;
    display: none;
    align-items: center;
    height: 230px;
    margin: 0px;
    flex-wrap: wrap; 
    align-content: end;
    color: white;  
    transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);         
    text-shadow: 1px 1px black;
 }
 .trabajos p span{
     display: block;
 }
 .trabajos p span.title{
     font-weight: bolder;
 }

 .trabajos p span.desc{
     margin-right: 10px;
 }

 span.fecha{
    outline: 1px solid white;
    margin: 5px 0;
    padding: 1px 5px;
    background:black;
    display:block;
}

.trabajos:hover{
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scaleX(1) translateX(-5px);
    transform: scaleX(1) translateX(-5px);
    /*box-shadow: 0 0 3rem #301916;*/
    /*background: #212121;*/
    border-color: transparent;    
}

.trabajos:hover p{
    display: flex;
}

/********************************
TESTIMONIOS
********************************/
#testimonios{
    padding-top: 0rem;
    padding-bottom: 3vh;
    text-align: center;
}

.testimonios{
    /*margin:10px 30px;*/
    display: flex;
    align-items: center;    
}

.testimonios img{
    object-fit: cover;
    width: 45%;
    margin: 20px;
    display: inline-block;
    max-height: 30vh;
    object-position: 0 top;
    clip-path: polygon(0% 27.5%, 17.50% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.testimonios .img-wrapper::after{
    display: inline-block;
    content: "";
    border-top: .3rem solid red;
    width: 4rem;
    margin: 0 1rem;
    transform: translateY(-1rem);
}
.testimonios img.inverse{
    clip-path: polygon(0% 0%, 75% 0%, 100% 35%, 100% 100%, 0% 100%);
}


.testimonios div{
    width: 60%;
    display: inline-block;
    margin-bottom:3rem;
}

.testimonios h5{
    color:#05F9F6 !important;

}
.testimonios h5,
.testimonios p{
    text-align: right;
}
.testimonios:nth-child(even) h5,
.testimonios:nth-child(even) p{
    text-align: left;
}

.testimonios p,
.testimonios ul,
.testimonios h4
{
    max-width: 40rem;
}
.lamas{
    object-position: right top;
}

#testimonios:before {
    content: "";
    background-color:#212121;
    position: relative;
    width: 100%;
    padding: 0px;
    z-index:0;
    height: 6vw;
    background-image: -webkit-linear-gradient(276deg, white 60%, #212121 50%);
    background-image: linear-gradient(175deg,white 60%,#212121 50%);
    clip-path: polygon(0% -1%, -1% 82%, 100% 0%);
}

/********************************
CONTACTANOS
********************************/
/*#contactanos{
    margin-top:5vh;
}*/

#contactanos {
    padding-top: 0vh;
}

#contactanos:before {
    content: "";
    background-color:#212121;
    position: relative;
    width: 100%;
    padding: 0px;
    z-index: -1;
    height: 8vw;
    /*
    background-image: -webkit-linear-gradient(93deg, white 50%, #212121 50%);
    background-image: linear-gradient(93deg, white 50%, #212121 50%);
    clip-path: polygon(0% 0%, 0% 75%, 100% 0%,100% 100%);*/
    background-image: -webkit-linear-gradient(94deg, white 50%, #212121 50%);
    background-image: linear-gradient(356deg, white 50%, #212121 50%);
    clip-path: polygon(0% -1%, 0% 92%,100% -1%);
}


#contactanos .wrapper{
    display:flex;
    grid-template-areas: "contactanosTitle contactanosTitle"
                         "contactanosForm contactanosInfo";
    grid-template-columns: 50% 50%;
    grid-template-rows:auto auto;     
}
#contactanos h2{
    grid-area:contactanosTitle;

}
#contactanos form{
    grid-area:contactanosForm;
}
#contactanos #contactoInfo{
    grid-area:contactanosInfo;
    margin-left: 2rem;
    max-width: 20rem;
}

#contactanos label{
   font-weight: 900; 
   display: block;
   margin: 0px 1rem 1rem;   
}
#contactanos input{
    font-size: 1.5rem;
    padding: 8px 20px;
    border:1px solid #999;
    border-radius: 2rem;
    width:100%;
}
#contactanos textarea{
    height: 5rem;
    font-size: 1.5rem;
    padding:8px 20px;
    border:1px solid #999;
    border-radius: 2rem;
    width:100%;    
}

#contactanos fieldset{
    border:none;
    margin-bottom:0rem;
    margin-right: 1rem;
    margin-left: 1rem;
}

#contactanos button{
    font-style: italic;
    font-weight: 900;
    background: black;
    padding: 0.8rem 3rem;
    color: white;
    position: relative;
    right: 0;
    margin: 1rem 0px;
    border-radius: 5rem;
    border: none;
    width: 100%;
}

.captcha-wrapper{
    font-size: 1.5rem;
    padding: 8px 7px 8px 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}
#contactanos .captcha-wrapper input{
    width:50%
}
#contactanos #captcha{
    display:inline-block;
}

#captchaErrorLabel{
    width:80%;
}

span.successLabel,
form label{
  font-weight: bold;
    text-align: center;
    padding: 0vh 0px;
    /*font-size: 1.3rem;*/
    width: auto;
    display: block;  
}
form .errorLabel,
form .successLabel{
    text-align:center;    
}

form .successLabel{
    color: green;
}
.error label,
form .errorLabel{
    color: #b44;
}

form .errorLabel{
    display:none;
}

form .error .errorLabel{
    display:block;
    margin: 10px auto 5px;
    transition: all 0.4s cubic-bezier(.91,.05,1,.63);
}

.error input,
.error textarea{ 
    box-shadow: 0px 0px 3px #b44;
}

#contactanos.formSuccess input,
#contactanos.formSuccess textarea{ 
    box-shadow: 0px 0px 3px green;
}


fieldset:last-child .error {/*El del textarea*/
    text-align: left;
}



/********************************
FOOTER
********************************/
#footer .wrapper{
    display:grid;
    grid-template-areas: "infoContacto socialIcons";
    grid-template-columns: 70% 30%;
    grid-template-rows:auto;                        
}
#infoContacto{
    grid-area:infoContacto;
}
#socialIcons{
    grid-area:socialIcons;
}

#copyright{
    grid-area:copyright;

}

#copyright {
    padding: 10px 10vw 15px;
    background: #1B1B1B;
    color: white;
    font-style: italic;
    text-align: center;
    margin-top: 3rem;
    display: flex;
    align-items: baseline;
    align-content: center;
    justify-content: center;
}
#copyright > span {
    margin-right:2vw;
}


#copyright a{
    font-weight: bold;
    color:white;
    text-decoration: none;
}
/*centrar las imagenes jiji*/
.direccion a{
    display: inline-flex;
    align-items: center;
}
.direccion .icon{
    margin-right: 10px;
    vertical-align: middle;
}
.direccion a{
    color:black;
    text-decoration: none;
}

.direccion span{
    margin-right:20px;
}
#socialIcons > *{
    display: inline;
}

#socialIcons {
    grid-area: socialIcons;
    display: flex;
    align-items: center;
    align-content: first baseline;
    justify-content: center;
    flex-wrap: wrap;
}
#socialIcons p{
    margin-right: 2.5vw;
}

/********************************
WHATSAPP
********************************/
 #whatsapp{
    position: fixed;
    z-index: 99999;
    padding: 10px 15px;
    background:white;
    border-radius: 25px 0px 0px 25px;
    box-shadow: -1px 1px black;
    min-width: 55px;   
    top: 20vh;
    right:0;
 }

 #whatsapp img{
     width:30px;
 } 



/********************************
MEDIAS QUERYS
********************************/
@media screen and (min-width: 1501px) {
    #contactanos h2{
        background-image: url("../img/contactanos.png");
        background-repeat: no-repeat;
        background-position:50%;
        background-size: contain;
    }
    /*#equipo h2{
        /*background-image: url("../img/ourteam.png");
        background-repeat: no-repeat;
        background-position:50%;
        background-size: contain;*/
        /*text-align:center;
    }*/
    /*#testimonios h2{
        background-image: url("../img/testimonials.png");
        background-repeat: no-repeat;
        background-position:50% 7%;
        background-size: contain;
    } */
    .wrapper{
        max-width: 65rem;
    }
    
}

@media screen and (max-width: 1500px) {
    .wrapper{
        margin-left:10vw;
        margin-right:10vw;
    }
}

@media screen and (max-width: 1300px) {
    .testimonios h3{
        width:100%;
    }

    .testimonios div {
        width: 45%;
    }
}

@media screen and (max-width: 1250px) {
.card:hover img {
    object-position: 50% 16%;
  }
  .card:hover .tohide{
      display: none;
  }

}

@media screen and (max-width: 1150px) {
    #mainMenu a {
    font-size: 1rem;
    }
}
@media screen and (max-width: 1000px) {
    /*.wrapper {
        margin-left: 5vw;
        margin-right: 5vw;
    }*/

    /*Menu Principal*/
    #mainMenu a::after {
        bottom: 17px;
        left: 10vw;
        width: 6vw;
        height: 5px;
    }

    .trabajos:nth-child(1){
        flex-basis:33%;
     }
    .trabajos:nth-child(2){
       flex-basis:33%;
    }
    .trabajos:nth-child(3){
        flex-basis:33%;
     }
     .trabajos:nth-child(4){
        flex-basis:50%;
     }
     .trabajos:nth-child(5){
        flex-basis:50%;
     }
     .trabajos:nth-child(10){
        flex-basis: 60%;
        flex-grow: 2;
     }

 
     .trabajos img{
        height: 300px;
     }
     .trabajos:nth-child(8) img{
        height: 300px;
        object-position:center right;
     }
     .trabajos:nth-child(9) img{
        height: 300px;
        object-position:center 18%;
     }

     .trabajos:nth-child(10) img{
        clip-path: polygon(0% 0%, 100% 0%, 100.00% 85%, 0% 100%);


     }


    .testimonios {
        align-items: normal;
    }
    .testimonios img {
        object-position: center top;
    }

    .testimonios{
        flex-wrap:wrap;
    }

    .testimonios h4 {
        width: 100%;
        text-align: center;
    }






}

    
    
@media screen and (max-width: 960px) {
    #blog {
        height: 55rem;
    }
    .embed-container {
        height: 43rem;
    }
}
@media screen and (max-width: 800px) {

    /*Estilos Generales*/
    p,h5{
        text-align: left;
        max-width: 30rem;
        margin: 1rem auto;
    }


    .module{
        padding-bottom:1rem;
    }

    #trabajo {
            margin-top: -5vh;
    }
    .wrapper {
        max-width: 80rem;
        margin: 0 auto;
    }
    .module{
        padding-bottom:0px;
    }

    .wrapper > *{
        margin-left:10vw;
        margin-right:10vw;
    }

    #nosotros  .wrapper{
        display:grid;
        grid-template-areas: "nosotrosContent" 
                             "nosotrosPhoto";
        grid-template-columns: 100vw;
        grid-template-rows: auto auto;      
    }

    #nosotros p {
        margin-left: auto;
    }

    #nosotrosPhoto{
        margin-top:2rem;
    }
    #nosotros img{
        width:80%;
        margin:auto;
        padding:0vh 0vw 5vh 0vw;
        max-width: 250px;
    }

    #fundadora:before {
        background: -webkit-linear-gradient(263deg,#212121 50%, white 50%);
        background: linear-gradient(187deg,#212121 50%,white 50%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 57%, 0% 40%);
    }

    #fundadora  .wrapper{
        display:grid;
        grid-template-areas: "fundadoraTitle"
                             "fundadoraPhoto"
                              "fundadoraContent";
        grid-template-columns: 100vw;
        grid-template-rows: 4rem  auto auto;   
    }

    #fundadora:before{
        height:calc(75vh + 50px);
    }

    #fundadora h3{
        text-align: center;
        margin:40px 5vw 3px 5vw;
    }

    #fundadoraPhoto img{
        border:7px solid #00F9F6;
        margin:5vw auto 0vw;
        width:50%;
        min-width: 15rem;
    }
    #fundadora h4{
        text-align: center;
    }
    #fundadoraContent{
        text-align: left;
        padding-left: 0vw;
    }
    /*Equipo*/
    #equipo{

    }

    .equipo.card{
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
    }
    .card img{
        position: static;
        flex-basis: 90%;
        height: auto;
        max-width:26rem;
        margin-bottom:1rem;
    }
    .card .info{
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        color:black;
        flex-basis: 90%;
    }
    .card:hover,
    .card:hover .info {
        -webkit-transform: none;
        transform: none;
    }

    .card::before,.card:hover::before {
        content:"";
        opacity: 0;
    }
    #servicios{
        text-align:center;
        padding-bottom:0rem;
    }
    #servicios .wrapper{
        /*padding-bottom:5rem;*/
        background: #212121;
    }
    #servicios h2{
        color:white;
    }
    #servicios .icon,
    #servicios .title,
    #servicios .text{
        display: inline;
    }

    #servicios .wrapper > .item {
        max-width: 30rem;
        padding: 1rem 4rem 2rem;
        text-align: left;
    }
    /*
    #servicios .wrapper > .item:last-of-type(2){
        padding-bottom:10rem;
    }*/
    
    .trabajos {
        flex-basis: 45%;
    }

    .trabajos p{
        display: flex;
    }


    #footer .wrapper{
        display:grid;
        grid-template-areas: "infoContacto"
                             "socialIcons";
        grid-template-columns: 100vw;
        grid-template-rows:auto auto auto;                        
    }

    #contactanos  .wrapper{
        display:grid;
        grid-template-areas:
            "contactanosTitle" 
            "contactanosInfo"
            "contactanosForm";
        grid-template-columns: 100vw;
        grid-template-rows:auto auto auto; 
        text-align: auto;    
    }

    #contactanos #contactoInfo {
        padding: 0 0rem;
        text-align: left;
        max-width: 30rem;
        margin-left:10vw;
    }




    #infoContacto{
        text-align: center;        
    }

    #socialIcons{
        text-align: center;
        margin-top: 2rem;        
    }

    .appear-800{
        display:block !important; 
    }
    h2.appear-800{
        display:inline-block !important; 
    }


    .hide-800{
        display:none !important; 
    }

 
     div ul{
        max-width: 30rem;
        margin: 1rem auto;
        padding-left: 35px;
     }



     div h4
     {
         max-width: none;
     }

    /*.card .info p {
        width: 100%;
    }*/

    #copyright {
        flex-wrap: wrap;
    }


}
 @media screen and (max-width: 800px) and (min-height: 1024px){
      .embed-container {
    padding-bottom: 72vh;
   
}
    
}
 @media screen and (max-width: 640px){
      
    #trabajo {
        margin-top: -3vh;
    }

    /*TESTIMONIOS*/
    .testimonios:nth-child(even) h5,
    .testimonios:nth-child(even) p,
    .testimonios:nth-child(odd) h5,
    .testimonios:nth-child(odd) p{
        text-align: left;
    }

    .testimonios img{
        object-fit: cover;
        width: 100%;
        margin: 1rem 0;
        display: block;
    }
    .testimonios div{
        width: 100%;
        display: block;
        /*margin:0px auto 1rem;*/
    }
    .testimonios{
        flex-wrap:wrap;
    }

    .testimonios h5 {
        text-align: center;
    }

    .testimonios h4{
        text-align: center;
    }  
    .appear-640{
        display:block !important; 
    }
    .hide-640{
        display:none !important; 
    }

/********************************
BLOG
********************************/
/*
.iframe{
    height:130vh;
}*/
/*
.embed-container {
    position: relative;
    padding-bottom: 110vh;
    height: 0;
    overflow: hidden;
}
.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}*/
      
  }
@media screen and (max-width: 500px) {

    #servicios .wrapper > .item > .title{
        font-size: 6.5vw;
    }
    #servicios .wrapper > .item > .icon {
        font-size: 8w;
    }
    #servicios .wrapper > .item {
        padding: 1rem 12vw 2rem;
    }

    /*arreglo de vaina del IFRAME manualmente*/
    #blog{
        height:49rem;
    }

    .embed-container{
    height:38rem;
    }
    /*trabajo*/
    .trabajos:nth-child(1){
        flex-grow: 1;
        flex-basis:35%;
     }
    .trabajos:nth-child(2){
       flex-grow: 2;
       flex-basis:65%;
    }
    .trabajos:nth-child(3){
        flex-grow: 1;
        flex-basis:50%;
     }
     .trabajos:nth-child(4){
        flex-grow: 1;
        flex-basis:50%;
        /*margin-right:0px;*/
     }
     .trabajos:nth-child(5){
        flex-grow: 2;
        flex-basis:100%;
     }


    .appear-500{
        display:block !important; 
    }
    .hide-500{
        display:none !important; 
    }
    h2{
        font-size:calc(9vw - 15%);
        /*width:auto !important;*/
        /*width: 80vw;*/
    }
    h3{
        font-size:8vw;
        /*width:auto !important;*/
    }
    .sg-content {
        padding: 5px 2px;
    }

    h4 {
        font-size:6vw;
    }

    .titleVineta::before {
        width: 12vw;
        height: 3px;
        position: static;
        transform: none;

    }
    .titleVineta::after {
        width: 16vw;
        height: 4px; 
        position: static;
        transform: none;
    }

    menu, ol, ul {
        padding: 0 0 0 15px;
    }

}

@media screen and (max-width: 800px) {
    
    /*#blog {
        height: 60rem;
    }
    .embed-container {
        height: 48rem;
    }*/
}
@media screen and (max-width: 650px) {
    #blog{height:83rem;}
    .embed-container{height:71rem;}

}
@media screen and (max-width: 550px) {
    div ul {
        padding-left: 15px;
        text-align: left;
    }

    #blog{height:79rem;}
    .embed-container{height:67rem;}

    .direccion span {
        margin-right: 0px;
    }

}
@media screen and (max-width: 450px) {
    /*GENERAL*/
    .module h2 {
        margin: 3rem auto 2rem;
    }

    /*NOSOTROS*/
    #fundadoraPhoto img {
        min-width: auto;
        width:90%;
    }


    #servicios .wrapper .content,
    span, p, ul {
        font-size: 0.9rem;
    }

    /*IFRAME*/
    #blog{height:75rem;}
    .embed-container{height:64rem;}

    /*.wrapper > * {
        margin-left: 5vw;
        margin-right: 5vw;
    }*/
    /*FORM*/ 
    #contactanos fieldset {
        border: none;
        margin-bottom: 0rem;
        margin-right: 0rem;
        margin-left: 0rem;
        padding: 0.5rem 0px 1rem;
    }
    .captcha-wrapper {
        justify-content: center;
    }
    #contactanos .captcha-wrapper input {
        width: 100%;
    }

    #contactanos button {
        padding: 0.8rem 1vw;
    }
    .direccion span{
        font-size: calc(0.9rem - 1vw);
        word-wrap: anywhere;
    }
    #socialIcons p{
        flex-basis: 90%;
    }


}


@media screen and (max-width: 300px) {

    /*GENERAL*/
    #servicios .wrapper .content,
    span, p, ul {
        font-size: 0.8rem;
    }

    #blog{height:73rem;}
    .embed-container{height:60rem;}


}


/*PINCHES HACKS*/
@supports (-ms-ime-align:auto) { 
    #servicios .wrapper > .item > .title {bottom:-65vh;} 
    
    @media screen and (min-width:800px) and (min-height:270px){
        #servicios .wrapper > .item > .content {
            top: 140%;
        }
        /*@media screen and (min-width:800px) and (min-height:270px)*/
        #servicios .wrapper > .item > .title#lastTitle h2 {
            margin-top:40vh;
        }
    }
}