body
      {
        font-size: 10pt;
        text-align: center;
        font-family: PoRegular, Verdana, Arial, Helvetica, sans-serif;
      }
      .logo
      {
        margin: 0 auto;
      }
      h1
      {
        color: rgba(5, 81, 138, 1);
        font-weight: 100;
        font-size: 2.5rem;
      }
      h1 label
      {
        font-weight: 900;
      }
      h2
      {
        color: rgba(77, 77, 77, 1);
        font-weight: normal;
        font-size: 1.3rem;
      }
      .btn
      {
        font-weight: bold;
        background-color: rgba(5, 81, 138, 1);
        color: white;
        border:0;
        cursor: pointer;
        width: 4rem;
        height: 1.5rem;
      }
      .input
      {
        color: rgba(5, 81, 138, 1);
        border: 1px solid rgba(5, 81, 138, 1);
      }
      .label
      {
        color: rgba(5, 81, 138, 1);
        font-size: 1.2rem;
        font-weight: bold;
      }
      .select
      {
        text-decoration: none;
        border: 0;
        color: rgba(5, 81, 138, 1);
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: inherit;
        background-color: rgba(0, 0, 0, 0);
      }

      .bcontainer
      {
        display: flex;
        flex-direction: row;
      }
      .bcontainer div
      {
        flex: 1;
      }
      .room
      {
        text-align: center;
      }
      #dates
      {
        width: 90%;
        text-align: center;
        margin: 0 auto;
        border: none;
        /*background-color: red;*/
        /*border: 1px solid yellow;*/
        border-collapse: collapse;
      }
      #dateback
      {
        background: #ffffff url("../img/pane.png") no-repeat center center;
        height: 2rem;
      }
      .datetext
      {
        background-color: rgba(5,81,138,1);
        height: 2rem;
      }
      .datetext label
      {
        color: white;
      }
      #datepickerleft
      {
        border-right: 2px solid rgba(5,81,138,1);
      }
      #datepickerright
      {
        border-left: 2px solid rgba(5,81,138,1);
      }
      .form
      {
        text-align: center;
        /*
          width: 960px;
          margin: 100px auto;
        */
      }


      .table
      {
        margin: 0 auto;
        border-collapse: collapse;
        border: 1px solid rgba(5, 81, 138, 1);
        color: rgba(5, 81, 138, 1);
        font-size: 1rem;
      }
      .table td
      {
        border: 1px solid rgba(5, 81, 138, 1);
        height: 2rem;
        margin: 0 auto;
        padding: 0 auto;
      }
      .table th
      {
        border-collapse: separate;
        border: 1px solid rgba(5, 81, 138, 1);
      }
      .table thead th:last-child
      {
        border-top: 1px solid rgba(5, 81, 138, 0);
        border-right: 1px solid rgba(5, 81, 138, 0);
      }

      .table tbody tr td:nth-child(1)
      {
        width: 14rem;
      }
      .table tbody tr td:nth-child(2)
      {
        width: 6rem;
      }
      .table tbody tr td:nth-child(3)
      {
        width: 6rem;
      }
      .table tbody tr td:nth-child(4)
      {
        width: 8rem;
      }
      .table tbody tr td:nth-child(5)
      {
        width: 8rem;
      }
      .table tbody tr td:nth-child(6)
      {
        width: 5rem;
      }
      .plus
      {
        text-decoration: none;
        width: 1.8rem;
        height: 1.8rem;
        /*border: 1px solid rgba(128,128,128,1);*/
        border: none;
        margin: 0 auto;
        background-color: rgba(5, 81, 138, 1);
        color: white;
        cursor: pointer;
        font-weight: 900;
        font-size: 1.2rem;
      }

      /*RIGHT FORM*/
      .tabs
      {
        position: relative;
        height: 350px;
        clear: both;
        margin: 25px 0;
        margin: 0 auto;
        width: 90%;
      }
      .tab
      {
        float: left;
        color: white;
      }
      .tab > label
      {
        background: white;
        padding: 10px;
        border: 1px solid rgba(209,209,209,1);
        margin-left: -1px;
        position: relative;
        left: 1px;
        border-radius: 15px 15px 0px 0px;
        cursor: pointer;
        transition: background 0.5s, color 0.5s;
        padding-right: 30px;
        padding-left: 30px;
        color: rgba(5,81,138,1);
        font-weight: bold;
        font-size: 1rem;
      }
      .tab > label:hover
      {
        background-color: rgba(5,81,138,1);
        color: white;
      }
      .tab [type=radio]
      {
        display: none;
      }
      .tcontent
      {
        position: absolute;
        top: 36px;
        left: 0;
        background: rgba(5,81,138,1);
        right: 0;
        bottom: 0;
        padding: 20px;
        padding-bottom: 0px;
        border: 1px solid rgba(209,209,209,1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .tcontent > *
      {
        opacity: 0;

        /*-webkit-transform: translate3d(0, 0, 0);

        -webkit-transform: translateX(-100%);
        -moz-transform:    translateX(-100%);
        -ms-transform:     translateX(-100%);
        -o-transform:      translateX(-100%);*/

        /*-webkit-transition: all 0.6s ease;
        -moz-transition:    all 0.6s ease;
        -ms-transition:     all 0.6s ease;
        -o-transition:      all 0.6s ease;*/
        -webkit-transition: all 1s ease;
        -moz-transition:    all 1s ease;
        -ms-transition:     all 1s ease;
        -o-transition:      all 1s ease;
      }
      .tcontent div
      {
        flex: 1;
        text-align: left;
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .tcontent div div
      {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .tcontent div div div
      {
        flex: 1;
        font-weight: bold;
      }
      .tcontent div div div:first-child
      {
        padding-left: 5px;
      }
      .mandatory
      {
        align-items: flex-end;
        font-size: 0.7rem;
      }
      .tcontent input
      {
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 10px;
        width: 90%;
        font-weight: bold;
      }
      .tcontent select
      {
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 10px;
        width: 90%;
        font-weight: bold;
        color: rgba(5,81,138,1);
      }
      #formEnd
      {
        display: flex;
        fle
      }
      .button_field
      {
        flex: 1;
        background: #ffffff url("../img/pane.png") no-repeat center center;
        background-size: cover;
        margin-left: -20px;
        margin-right: -20px;
        align-items: center;
        display: flex;
      }
      .button_field button
      {
        flex: 1;
        width: 6rem;
        height: 100%;
        border: 1px solid rgba(5,81,138,1);
        background-color: rgba(5,81,138,1);
      }

      [type=radio]:checked ~ label
      {
        background-color: rgba(5,81,138,1);
        border: 1px solid rgba(209,209,209,1);
        z-index: 2;
        color: white;
      }
      [type=radio]:checked ~ label ~ .tcontent
      {
        z-index: 1;
      }
      [type=radio]:checked ~ label ~ .tcontent > *
      {
        opacity: 1;
        /*-webkit-transform: translateX(0);
        -moz-transform:    translateX(0);
        -ms-transform:     translateX(0);
        -o-transform:      translateX(0);*/
      }

      /** footer **/
      #temrs
      {
        
      }
      #term
      {
        display: block;
        text-decoration: none;
        font-weight: bold;
        background-color: rgba(5, 81, 138, 1);
        color: white;
        border:0;
        cursor: pointer;
        width: 15rem;
        height: 1rem;
        padding-top:0.5rem;
        padding-bottom:0.5rem;
        margin: 0 auto;
        text-align: center;
      }


      /** modal **/
      .modalContent
      {
        /*background-color:aqua;*/
        background: #ffffff url("../img/condiciones.png") no-repeat center center;
        background-size: cover;
        width:32rem;
        height:39.35rem;
        margin: 5% auto;
        position: relative;
        z-index: 10;
        padding: 5px;
      }
      .modal
      {
        background-color: rgba(0,0,0,.8);
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        opacity:0;
        pointer-events:none;
        z-index: 10;
        transition: all 1s;
      }
      #myModal:target
      {
        opacity:1;
        pointer-events:auto;
      }
      #modalClose
      {
        text-decoration: none;
        background-color: rgba(5,81,138,1);
        color: white;
        font-weight: bold;
        padding: 0 auto;
        display: block;
        margin-left: 0;
        width: 2rem;
        height: 1rem;
        padding-top: 0.2rem;
        padding-bottom: 0.75rem;
        font-size: 1rem;
        text-align: center;
        position: absolute;
        right: 5px;
      }
      .modalContent h2
      {
        text-align: left;
        padding-left: 1.5rem;
        color: rgba(5,81,138,1);
        font-weight: bold;
        margin: 0;
      }
      .modalContent div
      {
        text-align: justify;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-size: 0.79rem;
        margin: 0;
      }
      .modalContent div ul
      {
        list-style-type:square;
      }
      .modalContent div ul li
      {
        text-align: justify;
        font-size: 0.79rem;
      }

      /***************************************** MEDIA QUERIES - SCREEN *****************************************/

      /***************************************** MEDIA QUERIES - TABLET *****************************************/
      @media (max-width: 1100px)
      {
        .bcontainer
        {
          flex-direction: column;
        }
        .room
        {
          margin-bottom: 2rem;
        }
      }
      /***************************************** MEDIA QUERIES - MOVIL *****************************************/
      @media (max-width: 640px)
      {
        .bcontainer
        {
          flex-direction: column;
        }
        #CheckIn
        {
          text-align: center;
        }
        #CheckOut
        {
          text-align: center;
        }
        .datetext
        {
          background-color: rgba(5,81,138,1);
          height: 1rem;
        }
        .plus
        {
          width: 1.2rem;
          height: 1.2rem;
        }
        .room
        {
          margin-bottom: 1rem;
        }

        #term
        {
          width: 9rem;
          height: 0.6rem;
        }

        /*******************************************************************************************************/
        .modalContent
        {
          background: #ffffff url("../img/condiciones.png") no-repeat center center;
          background-size: cover;
          width:20rem;
          height:30rem;
          margin: 5% auto;
          position: relative;
          z-index: 10;
          padding: 5px;
        }
        #modalClose
        {
          width: 1.2rem;
          height: 0.5rem;
          padding-top: 0.2rem;
          padding-bottom: 0.7rem;
        }
        /*******************************************************************************************************/

        /*************************************/
        /*
          <div id="myModal" class="modal">
          <div class="modalContent">
          <a id="modalClose" href="#">x</a>
        */
        /*************************************/
        /***********************************************************************************/
        /***********************************************************************************/
        /*.tcontent
        {
          /*position: absolute;
          top: 36px;
          left: 0;
          background: rgba(5,81,138,1);
          right: 0;
          bottom: 0;
          padding: 20px;
          padding-bottom: 0px;
          border: 1px solid rgba(209,209,209,1);
          overflow: hidden;*/
          /*display: flex;
          flex-direction: column;
        }
        /*.tcontent div:nth-child(1)
        {
          flex: 6;
        }
        .tcontent div:nth-child(2)
        {
          flex: 0;
        }
        .tcontent div:nth-child(3)
        {
          flex: 4;
        }
        .tcontent div:nth-child(4)
        {
          flex: 0;
        }
        .tcontent div:nth-child(5)
        {
          flex: 6;
        }
        .tcontent div div div:nth-child(2)
        {
          flex: 6;
        }*/
        /*.tcontent div
        {
          flex: 1;
          /*text-align: left;*/
          /*display: flex;
          flex-direction: column;
          /*justify-content: center;*/
        /*}
        .tcontent div div
        {
          flex: 1;
          display: flex;
          flex-direction: row;
        }
        .tcontent div div div
        {
          flex: 1;
          font-weight: bold;
        }*/
        /*.tcontent div div div:first-child
        {
          padding-left: 5px;
        }*/
        /***********************************************************************************/
        /***********************************************************************************/
      }