@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Adamina|Montserrat:300,400,600,700|Roboto+Condensed:400,700|Roboto:300,400,500,700');

body{
  color:#444a4e;
  font-family: 'Open Sans', sans-serif;
  margin:0;
}

a, a:hover{
  color:inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5{
  font-family: 'Roboto', sans-serif;
}

h2{
  font-size: 3em;
}

h3{
  font-size: 2em;
}

header{
  align-items: center;
  border-bottom:1px solid #FFF;
  display: flex;
  flex-direction: row;
  height: auto;
  justify-content: center;
  position: fixed;
  width:100%;
  z-index: 100;
  transition: all .5s;
}

.headerAn{
  background: rgba(163, 159, 156, .8);
  transition: all .5s;
  /*-webkit-box-shadow: 0px 9px 11px -6px rgba(143,143,143,.6);
  -moz-box-shadow: 0px 9px 11px -6px rgba(143,143,143,.6);
  box-shadow: 0px 9px 11px -6px rgba(143,143,143,.6);*/
}

section{
  margin:auto;
  padding:20px 3%;
  max-width: 1100px;
  width:94%;
}

section.sin{
  padding:20px 0;
  width:100%;
}

.backGrisSection{
  background:#f4f4f4;
}

.backBlanco{
  background-color: #FFF;
}


.fRojo{
  color:#ee5462 !important;
}

.fNaranja{
  color:#ff6d00;
}

.fGris{
  color:#4B4B4B;
}

.fGris2{
  color:#cecece;
}

.fAzul{
  color:#0f75bc;
}

.fw100{
  font-weight: 100;
}

.fw300{
  font-weight: 300;
}

.fw400{
  font-weight: 400;
}

.w10{
  width: 10% !important;
}

.w15{
  width: 15% !important;
}

.w20{
  width: 20% !important;
}

.w30{
  width: 30% !important;
}

.w40{
  width: 40% !important;
}

.w45{
  width: 45% !important;
}

.w50{
  width: 50% !important;
}

.w55{
  width: 55% !important;
}

.w60{
  width: 60% !important;
}

.w70{
  width: 70% !important;
}

.w80{
  width: 80% !important;
}

.w90{
  width: 90% !important;
}

.w100{
  width: 100% !important;
}

.margenAuto{
  margin: auto;
}

.margenT1{
  margin-top:1%;
}

.margenT3{
  margin-top:3%;
}

.margenT5{
  margin-top:5%;
}

.margenT10{
  margin-top:10%;
}

.margenT13{
  margin-top:13%;
}

.margenT10p{
  margin-top:10px;
}

.margenB2{
  margin-bottom: 2px;
}

.margenB5{
  margin-bottom: 5px;
}

.margenB2P{
  margin-bottom: 2%;
}


.margenR5{
  margin-right: 5%;
}

.margenR9{
  margin-right: 9%;
}

.margenR10{
  margin-right: 10%;
}

.margenR2{
  margin-right: 2.5%;
}

.margenR1{
  margin-right: 1%;
}

.margenR{
  margin-right: .8%;
}

.marginT_7{
  margin-top:-7px;
}

.paddingL2{
  padding-left: 2%;
}

.paddingL5{
  padding-left: 5%;
}

.sinMargen{
  margin:0;
}

.botonActivo{
  cursor: pointer;
}

.centroTodo{
  align-items: center;
  justify-content: center;
}

.centroTop{
  align-items: center;
  text-align: center;
}

.alignTop{
  align-items: flex-start;
  justify-content: flex-start !important;
}

.centroIzq{
  align-items: center;
  justify-content: flex-startå
}

.bottomRight{
  align-content: flex-end;
  justify-content: flex-end;
}

.alignBottom{
  justify-content: flex-end;
}

.centroDerecha{
  align-items: flex-end;
  justify-content: center;
}

.derechaCentro{
  align-items: center;
  justify-content: flex-end;
}

.pRelative{
  position: relative;
}

.pAbsolute{
  position: absolute;
}


.flexSpaceBet{
  justify-content: space-between;
}

.textARight{
  text-align: right;
}

.textALeft{
  text-align: left;
}

.lineHe30{
  line-height: 30px;
}

.hGroup{
  display: flex;
  flex-direction: row;
  width: 100%;
}

.vGroup{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.contPadding20{
  padding:0 20px;
  width: calc(100% - 40px) !important;
}

.centroTodo{
  align-content: center;
  justify-content: center;
  text-align: center;
}

.centroTodo p{
  margin:15px;
}

.cEnviado{
  background:green;
  color:#FFF;
  margin-bottom:15px;
}

.menuLogo{
  display: flex;
  flex-direction: row;
  margin:auto;
  justify-content: space-between;
  padding:0 10px;
  width:100%;
  max-width: 1100px;
}

.logo{
  align-items: center;
  display: flex;
  margin-right:5%;
  padding:15px 0;
  width:32%;
}

.logo img{
  width:100%;
}

nav.movil{
  display: none;
}

li.cuadroMenu{
  border-left:1px solid #FFF;
  border-right:1px solid #FFF;
  padding: 0 20px !important;
}

nav.menu{
  align-items:flex-end;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:50%;
}

nav.menu ul, nav.menu li{
  padding:0;
  margin:0;
}

nav.menu ul{
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: space-between;
  width: 100%;
}

nav.menu li{
  align-items: center;
  color:#FFF;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  font-size:.8em;
  font-weight: 300;
  height: 100%;
  list-style: none;
  transition: all .5s;
  
}

.textShadowMenu{
  color:#FFF !important;
  text-shadow: 2px 2px 0px rgba(150, 150, 150, 1);
  transition: all .5s;
}

nav.menu li a{
  color:inherit;
  text-decoration: none;
}

nav.menu li a:hover{
  color:#ecb26c;
}

footer{
  color:#FFF;
  background:#6c6d70;
  font-family: Montserrat;
  font-size: .9em;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  width:100%;
}

.contFooter{
  margin:auto;
  padding:30px 0;
  width:100%;
  max-width: 1100px;
}

.contFooter p{
  font-size: .8em;
  margin:.3em 0;
}

.menuMovil{
  background:#676769;
  display: none;
  position: fixed;
  top:6%;
  color:#FFF;
  width: 100%;
  z-index: 1000;
}

.menuMovil ul{
  margin:0;
  padding:0;
}

.menuMovil li{
  color:inherit;
  border-bottom:1px solid #5f5f5f;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2em;
  margin: 0 auto;
  padding:7% 0 !important;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
  width: 90%;
  transition: all .5s;
}

.menuMovil li:last-child{
  border-bottom:none;
}

.menuMovil li a{
  color:inherit;
  text-decoration: none;
}

/**** BANNER ****/

.textoBanner{
  color:#FFF;
}

.textoBanner h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 4em;
  font-weight: 300;
}

.textoBanner p{
  font-size: 1.2em;
}


/**** *****/

.margenArriba{
  margin-top:-5%;
}

.buscasTexto{
  border-bottom: 3px dashed #B8B8B8;
  padding-bottom:40px;
  width: 50%;
}

.botonMas{
  background:#828180;
  border-radius: 5px;
  color:#FFF;
  font-size: .8em;
  padding:5px 20px;
  text-align: center;
  width: 35px;
}


.botonMas2{
  background:#828180;
  border-radius: 3px;
  color:#FFF;
  font-size: .7em;
  padding:0 20px;
  text-align: center;
  width: 25px;
}

.botonRegistro{
  border: 2px solid #FFF;
  border-radius: 20px;
  color:#FFF;
  font-size: .8em;
  padding:5px 20px;
  text-align: center;
  width: 100%;
  max-width: 100px;
}

.botonRegistroNegro{
  border: 1px solid #000;
  border-radius: 20px;
  color:#000;
  font-size: .8em;
  padding:5px 20px;
  text-align: center;
  width: 100%;
  max-width: 100px;
}

/***** ESPECIALIDADES *****/

.fondoEspecialidades{
  background-image: url(../images/especialidades-banner.jpg);
  background-size: cover;
  background-position: top center;
  padding:20% 0;
}

.fondoEspecialidades h1, .fondoEspecialidades h2, .fondoEspecialidades h3, .fondoEspecialidades li{
  color:#FFF;
}

.fondoEspecialidades li{
  font-size: 1.3em;
}

.mailing{
  color:#FFF;
  border:none;
  background:#7f8084;
  height: 2em;
  margin-bottom: 10px;
  text-indent: 5px;
}

.mailing::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FFF;
  opacity: 1; /* Firefox */
}

.mailing:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFF;
}

.mailing::-ms-input-placeholder { /* Microsoft Edge */
  color: #FFF;
}

/***** FORMULARIO ******/


.registro h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  margin-top:0;
}

.ladoDotten{
  border-left:2px dashed #C9c9c9;
  padding:0 60px;
  width:calc(70% - 120px) !important;
}

.ladoNoDotten{
  justify-content: space-between;
  padding:0 60px;
  width:calc(30% - 120px) !important;
}

.formEmprendedor{
  font-weight: 100;
}

.formEmprendedor input[type="text"]{
  border-left:none;
  border-right:none;
  border-top: none;
  border-bottom:1px solid #c9c9c9;
  font-size: .8em;
  height:2.4em;
  text-indent: 3px;
  width: 95%;
}

.formEmprendedor textarea{
  border:1px solid #c9c9c9;
  font-size: .8em;
  height:10em;
  text-indent: 3px;
  resize: none;
  width: 95%;
}

.formEmprendedor .hGroup.espacioBottomTop{
  margin-bottom:30px;
}

.formEmprendedor .hGroup.espacioBottom{
  margin-bottom:40px;
}

/**** TESTIMONIALES ****/

.backTestimoniales{
  background-image: url(../images/opiniones-back-workinghope.jpg);
  background-size: cover;
  background-position: bottom center;
  padding:2% 0 7% 0;
}


/*** QUIENES ****/

.backQuienes{
  background-image: url(../images/backQuienes.jpg);
  background-size: cover;
  background-position: top center;
  padding:1% 0;
}

/**** SERVICIOS ****/

.oculto{
  display: none;
}

.tMouse{
  cursor: pointer;
}

/***** CONTACTO *****/

.contacto{
  margin-top:4%;
  width: 100%;
}

.contacto h2{
  font-size: 2em;
  font-weight: 100;
  margin:0;
}

.contacto p span{
  color:#c10e0e;
  font-family: Adamina;
  font-size: 1em;
  font-weight: 300;
  margin:0;
}

.contactoCuerpo{
  margin:3% auto;
  max-width:900px;
  width:100%;
}

#formEnvia{
  border: 1px solid #D5D5D5;
  font-size: .9em;
  margin: auto;
  text-align: right;
  padding:5% 10%;
  width: 80%;
}

#formEnvia input[type="text"]{
  background: #F0F0F0;
  border: none;
  height: 2em;
  width:98%;
}

#formEnvia input[type="submit"], #formEnvia input[type="button"]{
  align-self: flex-end;
  background: #0f75bc;
  border:none;
  color: #FFF;
  font-size: .9em;
  margin-top: 10px;
  padding: 5px;
  width: 150px;
}

#formEnvia textarea{
  background: #F0F0F0;
  border: none;
  height: 200px;
  resize: none;
  width: 99%;
}

#formEnvia p{
  margin: 5px;
  text-align: left;
}

/***** EMPLEADOR *****/

.borderLeft{
  border-left: 1px solid #CCC;
}

.bullGris{
  list-style: none;
}

.bullGris li{
  display: flex;
  flex-direction: row;
  font-weight: bold;
  line-height: 33px;
}

.bullGris li::before{
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #CCC; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  font-size: 2em;
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

/*.Error{
	border:2px solid red !important;
}*/

.Error{
  background-color:#e89b9b !important;
}

.Error1{
 border:1px solid #e89b9b !important;
}

.goog-te-gadget .goog-te-combo{
  width: 100px;
}

#google_translate_element>div>span{
  display:none !important;
}

.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon *{
  font-size: .9em !important;
}





@media screen and (max-width: 770px) {
  nav.menu{
    width:70%;
  }
  
  header{
    background: rgba(255,255,255,1)
  }
  
  .redesT{
    color:#FFF;
    margin:25% 10px 0 0;
    text-align: right;
  }
  
  .movilPad{
    padding:3%;
    width: 94% !important;
  }

  .logo{
    width:80%;
  }

  .hGroup{
    flex-direction: column;
  }

  .bannerP{
    padding-top:17%;
    /*height: 35vh;*/
  }
  
  .valores{
    margin:0;
  }
  
  .cuadroValT{
    min-height: 180px;
  }
  
  .cuadroValT{
    width: 96% !important;
  }
  
  .cuadroVal1, .cuadroVal2{
    margin-right: 0;
  }
  
  .margenR2{
    margin-right: 0;
  }
  
  #Servicios h2, #Contacto h2, .movCenter{
    text-align: center !important;
  }
  
  .ladoNoDotten, .ladoDotten{
    padding:0;
    border-left: none;
  }
  
   .w10, .w20, .w25, .w30, .w35, .w40, .w45, .w50, .w55, .w60, .w70, .w80, .w90{
    width: 100% !important;
  }


}

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

  body{
    font-size: 70%;
  }

  body p{
    font-size:1.4em !important
  }

  nav.menu{
    display: none;
  }
  nav.movil{
    display: flex;
  }
}

@media screen and (min-width: 550px) {
  .menuMovil{
    height: 0;
  }
}