/****** COLORS ******/
/* Taronja #EA5B0C */

.mobile.selector,
.header__burger,
.mobile,
.mobile-tabs .line,
.mobile-tabs label,
.mobile-tabs input,
.menu-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  
  body {
    zoom: normal !important;
  }
  .app {
    font-family: 'Lato' !important;
    font-weight: 400 !important;
  }
  .app .dialec, .app .pagina {
    box-shadow: none !important;
  }
  .familiars .canvi.oculta,
  .familiars .registre.oculta,
  .preferencies .opcioconmutador,
  .citacio .missatge,
  .cites .taula,
  .familiars .titol,
  .pagina .visites .titol,
  .pagina .cites .titol,
  .pagina .marge,
  .portal .taula .fila.titols,
  .benvingut,
  .pagina .seccio .logo,
  .menu,
  .telefon,
  .peu {
    display: none !important;
  }
  .familiars .opcions .menu,
  .citacio .opcions .menu,
  .familiars .marge,
  .citacio .marge,
  .content-container .visites .taula,
  .content-container .cites .taula,
  .mobile,
  .mobile-tabs .line,
  .mobile-tabs input,
  .menu-mobile,
  .menu-mobile,
  .pagina .capsalera .benvingut.menu-fixed-sota-titol {
    display: block !important;
  }
  .mobile-tabs label {
    display: inline-block !important;
  }
  .familiars .opcions,
  .citacio .opcions {
    display: flex;
    max-height: 60px;
  }
  .app {
    position: relative;
  }
  
  .app .dialec {
    box-shadow: none !important;
  }
  
  .app input, .app select, .app textarea, .app .camp.formulari .valor {
    box-shadow: 0px 3px 5px rgba(0,0,0,.15);
    border-radius: 6px !important;
    border-color: #D8D8D8 !important;
    padding: 10px !important;
  }
  .aptima .contenidor {
    max-width: 100% !important;
  }
  .selector,
  .dialec.autenticacio {
    width: 100% !important;
  }
  
  .dialec.autenticacio .titol {
    color:#EA5B0C !important;
  }
  
  .dialec.autenticacio .camp input {
    width: 93% !important;
  }
  
  .boto {
    background-color:#EA5B0C !important;
  }
  
  .logo {
    background-position: center;
    height: 21mm !important;
  }
  
  .header.capsalera .contenidor .logo {
    height: 12mm !important;
  }
    
  .header.capsalera .burger__links .logo {
    height: 18mm !important;
    background:white;
    margin-left: -70px;
    padding: 30px 0;
  }
  
  .autenticacio .botonera {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
  }
  
  .autenticacio .botonera .boto {
    flex:1;
  }
  .citacio .botonera {
    position: fixed;
    width: 97%;
    bottom:0px;
    border-top:2px solid whitesmoke;
    z-index: 99;
    display: flex;
    padding: 5px 5px 0;
    background:white;
  }
  .citacio .botonera .boto {
    flex:1;
    padding: 1mm 4mm;
  }
  .etiqueta {
    font-weight: 400;
  }
  
  .dialec.autenticacio .camp {
    margin: 4mm 0 !important;
  }
  
  .pagina {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin-top: 60px !important;
  }
  
  .pagina .seccio {
    display: block !important;
  }
  
  .pagina .capsalera .titol {
    text-align: center !important;
    margin-top: 0 !important;
    font-family: "Lato" !important;
    padding-top: 15px;
    font-weight: 600;
    letter-spacing: 2.5pt;
    font-size: 19px !important;
    text-transform: uppercase;  
  }
  
  .pagina .capsalera {
    height: auto !important;
  }
  .mobile.tabs input { display: none; }
  
  .mobile.tabs input + label {
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
  }
  
  .mobile.tabs input ~ .tab { display: none }
  /* show contents only for selected tab */
  #tab1:checked ~ .tab.contingut1,
  #tab2:checked ~ .tab.contingut2 { display: block; }
  
  .pagina .seccio.portal {
    margin-top: 20px;
  }
  
  .seccio .mobile.tabs {
    padding: 0 15px;
  }
  .citacio .primeres .tarja,
  .portal .taula .fila {
    display: block !important;
    border-radius: 5px;
    padding: 15px !important;
    border: none !important;
    box-shadow: 0px 0px 7px rgba(0,0,0,.15);
    background: white !important;
    margin-bottom: 20px !important;
    position: relative;
  }
  .citacio .primeres .tarja .boto,
  .portal .taula .fila .cancelar {
    width: 25%;
    position: absolute;
    top:20px;
    font-size: 3.2mm !important;
    right: 15px;
    text-align: center;    
  }
  .citacio .primeres .tarja .boto {
    height: auto !important;
    max-height: none !important;
  }
  .citacio .primeres .tarja .boto.opcions {
    top: 50px; 
    display: block !important; 
  }
  .citacio .primeres .tarja.contactar .detalls {
    width: 70% !important;
  }
  .portal .taula .dades {
    height: 100% !important;
    background: transparent !important;
    overflow: inherit !important;
  }
  
  .portal .taula .fila span {
    font-weight: 500;
    font-size: 14px;
    margin:5px 0;
  }
  
  .portal .visites .fila {
    background:rgba(234,91,12,.15) !important; 
  }
  .hores .selector,
  .citacio .primeres .tarja {
    width: 100% !important;
  }
  .citacio .primeres .tarja .capsalera .professional,
  .citacio .primeres .tarja .capsalera .subespecialitat,
  .citacio .primeres .tarja .capsalera {
    background-color: transparent !important;
    color: #000 !important;
  }
  .citacio .primeres .tarja.seleccionada {
    background-color: rgba(14,141,111,.2);
  }
  .citacio .primeres .tarja.seleccionada .boto {
    background-color: #0E8D6F !important;
  }
  .burger__links {
    display: flex;
    flex-direction: column;
    margin-top: 0px;
  }
  .burger__lang-select {
    position: relative;
    width: 51px;
    margin-top: 38px;
  }
  .burger__tag {
    margin-top: auto;
  }
  .burger__socials {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }
  .segon-menu li,
  .burger__links .link {
    margin: 5px 0;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: -0.03em;
    color: rgba(0,0,0,.6);
    font-family: "Lato";
  }
  .burger__links .link i {
    color:#EA5B0C;
    margin-right: 10px;
    font-size: 16px;  
  }
  .header__burger {
    display: flex;
    flex-direction: column;
    width: 26px;
    height: 26px;
    margin-left: auto;
    transition: all 0.5s linear;
    cursor: pointer;  
  }
  .header__burger span {
    width: 100%;
    height: 3px;
    background: white;
    margin-top: 8px;
    transition: all 0.5s linear;
  }
  .segon-menu ul {
    padding:0;
    list-style: none !important;
  }
  .segon-menu ul a {
    font-weight: 400;
    font-family: "Lato";
    text-decoration: none !important;
    color:rgba(0,0,0,.6);
  }
  .benvingut-text {
    font-family: "Lato";
    color:#EA5B0C;
    font-size: 13px;
  }
  .benvingut-text .boto {
    width: 100%;
    margin: 0;
  }
  
  .toggler{
    /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
      z-index:2;
      height: 50px;
      width: 50px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      opacity: 0;
  }
  
  .hamburger{
      position: absolute;
      top: 0;
      right: 0;
      height: 65px;
      width: 65px;
      padding: 0.6rem;
    
    /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */
    
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  /* CREATING THE MIDDLE LINE OF THE HAMBURGER : */
  
  .hamburger > div{
      position: relative;
      top: 0;
      left: 0;
      background: white;
      height: 2px;
      width: 60%;
      transition: all  0.4s ease;
  }
  
  /* CREATING THE TOP AND BOTTOM LINES : 
  TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */
  
  .hamburger > div::before,
  .hamburger > div::after{
      content: '';
      position: absolute;
      top: -10px;
      background: white;
      width: 100%;
      height: 2px;
      transition: all  0.4s ease;
  }
  
  .hamburger > div::after{
      top: 10px;
  }
  
  .menu-mobile {
    margin-top: -70px;
  }
  
  /* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE :  */
  
  .toggler:checked + .hamburger > div{
      background: rgba(0,0,0,0);
  }
  
  .toggler:checked + .hamburger > div::before{
      top: 0;
      transform: rotate(45deg);
      background: white;
  }
  
  /* AND ROTATING THE TOP AND BOTTOM LINES :  */
  
  .toggler:checked + .hamburger > div::after{
      top: 0;
      transform: rotate(135deg);
      background: white;
  }
  
  
  /* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT :  */
  
  .menu-m{
      background: white;
      width: 0%;
      height: 100vh;
      box-shadow: 0px 2px 6px rgba(0,0,0,.15);
      position: absolute;
    
    /* APPLYING TRANSITION TO THE MENU :  */
    
      transition: all 0.4s ease;
  }
  
  /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */
  
  .toggler:checked ~ .menu-m{
      width: 80%;
      height: 100vh;
  }
  
  
  /* STYLING THE LIST :  */
  
  .menu-m >  div > ul{
      display: flex;
      flex-direction: column;
  /*     position: fixed; */
      top: 130px;
      padding-left: 10px;
      width: 90%;
    
    /* HIDDEN INITIALLY  :  */
    
      visibility: hidden;
  }
  
  .menu-m > div > ul > li{
      list-style: none;
      padding: 0 15px;
  }
  
  .menu-m > div > ul > li > a{
      color: black;
      text-decoration: none;
      font-size: 2rem;
      font-family: 'Lato';
  }
  
  /* WHEN THE TOGGLER IS CHECKED, CHANGE THE VISIBILITY TO VISIBLE :  */
  
  .toggler:checked ~ .menu-m > div > ul{
      transition: visibility 0.4s ease;
      transition-delay: 0.1s;
      visibility: visible;
  }
  
  .toggler:checked ~ .menu-m > div > ul > li > a:hover{
      color: orange;
  }
  .pagina .apartat.actiu {
    max-height: none !important;
  }
  .portal .apartats {
    height: 100% !important;
  }
  .mobile-tabs {
    width: 100%;
    position: relative;
    transform: translate(0%, 6%);
    font-size: 0;
    border-radius: 3px;
    padding:0 15px;
  }
  .mobile-tabs input {
    display: none !important;
  }
  .mobile-tabs input:checked + label {
    background: transparent;
    color:#EA5B0C;
  }
  .mobile-tabs input#tab1:checked ~ .line {
    left: 0%;
  }
  .mobile-tabs input#tab1:checked ~ .content-container #c1 {
    opacity: 1;
  }
  .mobile-tabs input#tab2:checked ~ .line {
    left: 25%;
    margin-left: 45px;
  }
  .mobile-tabs input#tab2:checked ~ .content-container #c2 {
    opacity: 1;
  }
  .mobile-tabs input#tab3:checked ~ .line {
    left: 50%;
  }
  .mobile-tabs input#tab3:checked ~ .content-container #c3 {
    opacity: 1;
  }
  .mobile-tabs input#tab4:checked ~ .line {
    left: 75%;
  }
  .mobile-tabs input#tab4:checked ~ .content-container #c4 {
    opacity: 1;
  }
  .mobile-tabs label {
    display: inline-block;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    width: auto;
    text-align: center;
    color: #555;
    position: relative;
    transition: 0.25s background ease;
    cursor: pointer;
    margin-right: 30px;
    font-family: "Lato";
    font-weight: 500;
  }
  .mobile-tabs label::after {
/*     content: ""; */
    height: 2px;
    width: 100%;
    position: absolute;
    display: block;
    background: #ccc;
    bottom: 0;
    opacity: 0;
    left: 0;
    transition: 0.25s ease;
  }
  .mobile-tabs label:hover::after {
    opacity: 1;
  }
  .mobile-tabs .line {
    position: absolute;
    height: 2px;
    background: #EA5B0C;
    width: 25%;
    top: 34px;
    left: 0;
    transition: 0.25s ease;
    margin-left: 15px;
  }
  .mobile-tabs .content-container {
    background: #eee;
    position: relative;
    height: 100%;
    font-size: 16px;
  }
  .mobile-tabs .content-container .content {
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0;
    transition: 0.25s ease;
    color: #333;
  }
  .apartat.cites .mobile-tabs .llista {
    margin:0 !important;
  }
  .apartat.cites .mobile-tabs .llista .buida .missatge {
    height:  auto !important;
    padding: 10px !important;
  }
  .mobile-tabs .content-container .content h3 {
    font-weight: 200;
    margin: 10px 0;
  }
  .mobile-tabs .content-container .content p {
    margin: 10px 0;
  }
  .mobile-tabs .content-container .content p,
  .mobile-tabs .content-container .content i {
    font-size: 13px;
  }
  .content-container .fila.cancelada {
    background: #dbdbdb !important;
  }
  .content-container .fila.programada .dia {
    font-size: 12px;
    font-family: "Lato";
    font-weight: 500;
    width: 70%;
    color:rgba(0,0,0,.4);
    display: flex;
    flex-wrap: wrap;
  }
  .dia span {
    font-size: 12px !important;
    float: left;
    padding: 0 3% 0 0;
  }
  .content-container .doctor {
    clear: both;
  }
  .pacient .etiqueta,
  .doctor .etiqueta {
    color:rgba(234,91,12,.4);
    letter-spacing: 2pt;
    margin: 15px 0 0;
    font-size: 13px;
    font-family: "Lato";
  }
  .pacient .nom,
  .doctor .nom {
    font-size: 16px;
    font-family: "Lato";
    margin: 0 0 5px !important;
  }
  .apartat.cites .llista {
    margin: 0 !important;
  }
  .familiars .portal {
    width: 100% !important;
    padding: 0 3mm !important;
    margin: 0 !important;
  }
  .familiars .marge,
  .citacio .marge {
    margin:0 auto;
    text-align: center;
  }
  .familiars .marge .opcio,
  .citacio .marge .opcio {
    color: transparent !important;
    font-family: "Lato" !important;
  }
  .familiars .marge .opcio {
    flex:1 !important;
  }
  .familiars .marge .opcio .ordre,
  .citacio .marge .opcio .ordre {
    font-size: 100% !important;
    display: block;
    color:#000 !important;
    height: 25px;
    width: 30px;
    border-radius: 50% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background-color: transparent !important;
    flex:1;
    padding-top: 6px !important;
  }
  .familiars .marge .opcio.actual.
  .citacio .marge .opcio.actual {
    border-bottom: 2px solid #EA5B0C !important;
  } 
  .familiars .marge .opcio.actual .ordre,
  .citacio .marge .opcio.actual .ordre {
    font-size: 100% !important;
    display: block;
    width: 30px;
    height: 25px;
    border-radius: 50% !important;
    padding:0 !important;
    color: white !important; 
    background-color: rgba(234,91,12,1) !important;
    padding-top: 6px !important;
  }
  .citacio .beneficiaris .selector {
    width: 100% !important;
    overflow: inherit !important;  
  }
  .citacio .beneficiaris .tarja {
    flex-basis: 100%;
    justify-content: flex-start !important;
    padding: 3mm !important;
  }
  .citacio .beneficiaris .tarja.seleccionada {
    background-color: rgba(234,91,12,.5) !important;
  }
  .citacio .beneficiaris .tarja div {
    font-size: 13px;
    font-weight: 500;
  }
  .citacio .titol {
    font-size: 16px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .citacio .beneficiaris .companyies .titol {
    margin-top: 30px !important;
  }
  .citacio .apartats {
    height: 100% !important;
  }
  .familiars .botonera,
  .citacio .botonera {
    text-align: center !important;
    margin-top: 50px !important;
  }
  .familiars .botonera .boto,
  .citacio .botonera .boto {
    width: 90% !important;
    margin-bottom: 10px !important;
  }
  .especialitats .especialitats {
    width: 100%;
  }
  .especialitats .especialitats .tarja {
    flex-basis: 32%;
    display: block;
    margin: 0 auto 5px;
    text-align: center;
    background: rgba(234,91,12,.5);
    color: white;
    max-height: 80px !important;
    height: 80px !important;    
  }
  .tarja.seleccionada,
  .especialitats .especialitats .tarja.seleccionada {
    background: rgba(234,91,12,1) !important;
  }
  .especialitats .especialitats .tarja div {
    font-size: 11px;
    line-height: 13px;
    padding:5px 0;
  }
  .especialitats .especialitats .tarja i {
    color:white !important;
    padding-top: 10px;
    padding-bottom: 0px;
    font-size: 15px;
    line-height: 9px;
  }
  .pre-titol {
    text-transform: uppercase;
    letter-spacing: 2pt;
    font-size: 17px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .citacio .dadesCita .camp {
    width: 100% !important;
    display: block !important;
    padding: 10px 0 !important;
    border:none !important;
    border-bottom: 1px solid rgba(0,0,0,.2) !important;
  }
  .citacio .dadesCita .camp label {
    font-size: 15px;
  }
  .citacio .opciocheck {
    background: #e8e8e8;
    padding: 7px 5px;
    margin: 0 5px 5px;
    color: black;
    border-radius: 7px;
  }
  .opcioconmutador {
    margin: 5px 10px 5px !important;
  }
  .opcioconmutador input,
  .opciocheck input {
    box-shadow: none !important;
  }
  .citacio .opcioconmutador {
    width: auto !important;
  }
  .selector .forats,
  .citacio .hores .primeres .tarja .peu,
  .opcioconmutador.mobile {
    display: block !important;
  }
  .familiars .camp.formulari .valor,
  .citacio .hores .primeres .tarja,
  .selector select {
    width: 100% !important; 
  }
  .citacio .hores .primeres .tarja {
    height: auto !important;
  }
  .hores .tarja .detalls div {
    margin: 8px 0 !important;
  }
  .citacio .primeres .tarja .detalls {
    width: 70%;
  }
  .citacio .primeres .tarja .detalls .dia,
  .citacio .primeres .tarja .detalls .hora {
    color:rgba(0,0,0,.4) !important;
  }
  .hores .selector.forats {
    background-color: transparent !important;
  }
  .hores .capsalera.forats {
    background-color: transparent !important;
    color: #ea5b0d;
    font-weight: 800;
    font-size: 16px;
  }
  .hores .forats .dia {
    padding: 7px 0 !important;
    font-weight: 600 !important;
    margin-top: 5px;
  }
  .hores .forats .dia span {
    float: right !important;
    font-weight: 400 !important;
  }
  .citacio .forats .ocupat {
    color: #b3b3b3 !important;
  }
  .citacio .forats {
    display: flex !important;
    flex-wrap: wrap;
  }
  .citacio .forats .forat {
    flex-basis: 24%;
    padding:7px 0 !important;
    text-align: center !important;
  }
  .familiars .camp input {
    width: 93% !important;
  }
  .familiars .camp .etiqueta {
    margin-bottom: 5px;
  }
  .familiars .camps,
  .familiars .camps .camp {
    margin-bottom: 20px;
  }
  .familiars .indicacio {
    margin: 3mm 0 !important;
  }
  .selector.forats {
    max-height: 100mm;
    border-bottom: 2px solid whitesmoke;
  }
  .apartat .botonera.flotant {
    display: none !important;
  }
}