*, *:before, *:after {
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

*:focus {
  outline: none !important;
}

body, html {
  height: 100%;
}

body {
/*  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 12px;
  background: #936e76;
  background: linear-gradient(135deg, #3f4159 0%, #725767 50%, #c6a887 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$mauve', endColorstr='$blush',GradientType=1 );
  
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-perspective: 1000px;
          perspective: 1000px;*/
}

input, textarea, button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  
  resize: none;
}

a, button, input[type="submit"] {
  cursor: pointer;
}

::-moz-selection {
  background: rgba(205, 144, 139, 0.2);
}

::selection {
  background: rgba(205, 144, 139, 0.2);
}

.flex-ficha{
        display: flex;
    }
    h2,.titulo1{
        color: #ffffff;
    }
    /* h2:before,h2:after{
        background-color: #ffffff;
    } */
    .noticias_textos_container{
        display: none;
    }

    .flex-ficha .modulo.info{
        width: 100%;
    }

    

    .flex-ficha .flex-container div,.flex-ficha .flex-container p{
        max-width: 100%;
    }
    .flex-ficha .flex-container .field{
        max-width: 300px;
        display: inline-block;
        margin-right: 30px;
    }
    .flex-ficha .flex-container .field.legal{
        /*max-width: 100%;*/
    }
    .flex-ficha .flex-container{
        padding: 30px;
        padding: 65px;
    box-sizing: border-box;
    }
form{
    width: 100%;
    margin-top: 0px;
}
span.nav {
  transition: all 150ms ease-out;
  flex-basis: 25%;
  display: block;
  position: relative;
  width: 100%;
  padding: 18px 0;
  text-align: center;
}
span.nav:nth-of-type(1) {
  z-index: 5;
}
span.nav:nth-of-type(2) {
  z-index: 4;
}
span.nav:nth-of-type(3) {
  z-index: 3;
}
span.nav:nth-of-type(4) {
  z-index: 2;
}
span.nav:nth-of-type(5) {
  z-index: 1;
}
span.nav:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: #f3e3e2;
}
span.nav:last-of-type:after {
  display: none;
}

input.nav {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0;
  position: absolute;
  z-index: 6;
  top: 0;
  width: 25%;
  height: 53px;
}
input.nav:hover + span, input.nav:focus + span {
  background: #f3e3e2;
}
input.nav:active + span, input.nav:checked + span {
  background: #866972;
  color: white;
}
input.nav:active + span {
  transition: all 150ms ease-in;
}
input.nav ~ main section {
  transition: all 450ms ease-out;
  -webkit-transform: translateY(50%) translateZ(0);
          transform: translateY(50%) translateZ(0);
  opacity: 0;
  z-index: -1;
}
input.nav:nth-of-type(1) {
  left: 0%;
}
input.nav:nth-of-type(1):checked ~ main section:nth-of-type(1) {
  -webkit-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
  opacity: 1;
  z-index: 10;
}
input.nav:nth-of-type(2) {
  left: 25%;
}
input.nav:nth-of-type(2):checked ~ main section:nth-of-type(2) {
  -webkit-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
  opacity: 1;
  z-index: 10;
}
input.nav:nth-of-type(3) {
  left: 50%;
}
input.nav:nth-of-type(3):checked ~ main section:nth-of-type(3) {
  -webkit-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
  opacity: 1;
  z-index: 10;
}
input.nav:nth-of-type(4) {
  left: 75%;
}
input.nav:nth-of-type(4):checked ~ main section:nth-of-type(4) {
  -webkit-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
  opacity: 1;
  z-index: 10;
}
input.nav:nth-of-type(5) {
  left: 100%;
}
input.nav:nth-of-type(5):checked ~ main section:nth-of-type(5) {
  -webkit-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
  opacity: 1;
  z-index: 10;
}

.material {
  width: 100%;
}
.material div {
  position: relative;
  width: 100%;
  max-width: 300px;
  padding-top: 18px;
}
.material .field label {
  transition: all 150ms ease-out;
  will-change: transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  display: block;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 4px;
  font-weight: 500;
  color: #c6a887;
  line-height: 1.5;

  -webkit-transform: translateY(-24px) translateZ(0);
          transform: translateY(-24px) translateZ(0);
  font-size: 12px;

}
.material hr {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  border: 0;
  border-radius: 4px;
  margin: 0;
  background: #ebebeb;
}
.material hr:after {
  transition: all 150ms ease-out;
  -webkit-transform: scaleX(0) translateZ(0);
          transform: scaleX(0) translateZ(0);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  will-change: transform;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #c6a887;
}
.material input, .material textarea{
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  z-index: 1;
  padding: 0 0 4px;
  margin: 0;
  width: 100%;
  background: none;
  color: #3f4159;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'Lato-Light', serif;
}
.material textarea{
    top: 30px;
}
.field.observaciones hr{
    top: 100px;
}
.material .field[value=""]  label{
    -webkit-transform: translateZ(0);
          transform: translateZ(0);
          font-size: 16px; 
}
/*.material input:focus + label, .material input:invalid + label, .material textarea:focus + label{*/
.material .field input:focus + label, .material .field textarea:focus + label{
  -webkit-transform: translateY(-24px) translateZ(0);
          transform: translateY(-24px) translateZ(0);
  font-size: 12px;
  margin-top: 0px;  
}

.material input:focus ~ hr:after, .material textarea:focus ~ hr:after {
  -webkit-transform: scaleX(1) translateZ(0);
          transform: scaleX(1) translateZ(0);
}
.module-form-container{
        position: relative;
        display: flex;
    }
    .module-form{
        width: 50%;
    }
    .observaciones label{
        /*top: 18px;  */
        bottom: 90px !important;
        margin-left: 5px;
    }
    .field.observaciones hr {
        top: 118px;
    }
    .material textarea {
        top: 0px;
        margin-bottom: 20px;
        border-left: 1px solid #ebebeb;
        padding-left: 10px;
    }
.flex-ficha .flex-container .material label{
    color:#ccb497;
    font-family: 'Lato-Light';
    /*font-size: 14px;*/
}

.checkbox{
  width: 50px;
}
.material-checkbox{
  top: -30px;
}
.material-checkbox a{
  position: relative;
  z-index: 1;
}
.flex-ficha .flex-container .material .material-checkbox a:hover{
  margin-left: 0px;
  left: 0px;
  font-weight: bolder;
  color: #c6a887;
  text-decoration: underline;
}
.flex-ficha .flex-container .material .material-checkbox a:hover:before, .flex-ficha .flex-container .material .material-checkbox a:hover:after{
  content: "";
}
.flex-ficha .flex-container .material .material-checkbox label{
      -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}
.flex-ficha .flex-container .material .material-checkbox label{
    margin-left: 30px;
    top: 30px;
    font-size: 13px;
    z-index: 2;
}

.material-checkbox div {
  position: relative;
}
.material-checkbox .check {
  z-index: 0;
  display: flex;
  align-items: center;
  align-content: center;
}
.material-checkbox span {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  background: #000;
}
.material-checkbox svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .45;
}
.material-checkbox line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2px;
  stroke-linecap: round;
}
.material-checkbox g:last-child line {
  stroke: white;
  opacity: 0;
}
.material-checkbox g:last-child line:first-child {
  transition: stroke-dashoffset 100ms ease-out;
  stroke-dasharray: 6.708;
  stroke-dashoffset: 6.708;
}
.material-checkbox g:last-child line:last-child {
  transition: stroke-dashoffset 200ms ease-out 100ms;
  stroke-dasharray: 14.873;
  stroke-dashoffset: 14.873;
}
.material-checkbox label {
  margin-left: 6px;
}
.material-checkbox input {
  cursor: pointer;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.material-checkbox input:checked + div span {
  background: #c6a887;
}
.material-checkbox input:checked + svg {
  opacity: 1;
}
.material-checkbox input:checked + div g:last-child line {
  opacity: 1;
}
.material-checkbox input:checked + div g:last-child line:first-child {
  stroke-dashoffset: 0;
}
.material-checkbox input:checked + div g:last-child line:last-child {
  stroke-dashoffset: 0;
}

.material-button {
  width: 100%;
}
.material-button div {
  width: 100%;
}
.material-button button, .material-button input[type="submit"] {
  margin: 0;
  border: 0;
  border-radius: 0px;
  padding: 6px 12px;
  background: #ebebeb;
  background:#000;
  color: #3f4159;
  font-size: 16px;
  transition: all 150ms ease-out;
  border: 1px solid #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.material-button .over, .material-button .touched, .material-button button:hover, .material-button button:focus, .material-button input[type="submit"]:hover, .material-button input[type="submit"]:focus {
  background: #c6a887;
  color: white;
  border: 1px solid #c6a887;
}
.material-button button:active, .material-button input[type="submit"]:active {
  transition: all 150ms ease-in;
  background: #3f4159;
}
.material-button button.save, .material-button input[type="submit"].save {
  width: 100%;
  max-width: 256px;
  padding: 12px 24px;
  background: #000;
  color: white;
  font-size: 18px;
}
.material-button button.save:hover, .material-button button.save:focus, .material-button input[type="submit"].save:hover, .material-button input[type="submit"].save:focus {
  background: #fff;
  color: #c6a887;
}
.material-button .save:hover{
  background: #231d1d !important;
  border:1px solid black;
}
a img:parent { background: none; }
.material-button button.save:active, .material-button input[type="submit"].save:active {
   background: #333;
  color: #c6a887;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px rgba(0,0,0,1) inset !important;
}
input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
}
@media only screen and (max-height: 444px) {
  .material-button button.save, .material-button input[type="submit"].save {
    /*display: none;*/
  }
}
.material-button button.connect, .material-button input[type="submit"].connect {
  display: block;
  width: 100%;
  border-radius: 1000px;
  color: white;
}
.material-button button.gh, .material-button input[type="submit"].gh {
  background: #4183c4;
}
.material-button button.gh:hover, .material-button button.gh:focus, .material-button input[type="submit"].gh:hover, .material-button input[type="submit"].gh:focus {
  background: #7ba9d6;
}
.material-button button.gh.connected, .material-button input[type="submit"].gh.connected {
  background: #ebebeb;
  color: #343434;
}
.material-button button.gh.connected:hover, .material-button button.gh.connected:focus, .material-button input[type="submit"].gh.connected:hover, .material-button input[type="submit"].gh.connected:focus {
  background: #4183c4;
  color: white;
}
.material-button button.gh:active, .material-button input[type="submit"].gh:active {
  background: #2c5d8d !important;
}
.material-button button.tw, .material-button input[type="submit"].tw {
  background: #2daae1;
}
.material-button button.tw:hover, .material-button button.tw:focus, .material-button input[type="submit"].tw:hover, .material-button input[type="submit"].tw:focus {
  background: #70c5eb;
}
.material-button button.tw.connected, .material-button input[type="submit"].tw.connected {
  background: #ebebeb;
  color: #343434;
}
.material-button button.tw.connected:hover, .material-button button.tw.connected:focus, .material-button input[type="submit"].tw.connected:hover, .material-button input[type="submit"].tw.connected:focus {
  background: #2daae1;
  color: white;
}
.material-button button.tw:active, .material-button input[type="submit"].tw:active {
  background: #187da9 !important;
}
.material-button button.fb, .material-button input[type="submit"].fb {
  background: #3b5997;
}
.material-button button.fb:hover, .material-button button.fb:focus, .material-button input[type="submit"].fb:hover, .material-button input[type="submit"].fb:focus {
  background: #5e7ec0;
}
.material-button button.fb.connected, .material-button input[type="submit"].fb.connected {
  background: #ebebeb;
  color: #343434;
}
.material-button button.fb.connected:hover, .material-button button.fb.connected:focus, .material-button input[type="submit"].fb.connected:hover, .material-button input[type="submit"].fb.connected:focus {
  background: #3b5997;
  color: white;
}
.material-button button.fb:active, .material-button input[type="submit"].fb:active {
  background: #263960 !important;
}
.material-button button.li, .material-button input[type="submit"].li {
  background: #069;
}
.material-button button.li:hover, .material-button button.li:focus, .material-button input[type="submit"].li:hover, .material-button input[type="submit"].li:focus {
  background: #0099e6;
}
.material-button button.li.connected, .material-button input[type="submit"].li.connected {
  background: #ebebeb;
  color: #343434;
}
.material-button button.li.connected:hover, .material-button button.li.connected:focus, .material-button input[type="submit"].li.connected:hover, .material-button input[type="submit"].li.connected:focus {
  background: #069;
  color: white;
}
.material-button button.li:active, .material-button input[type="submit"].li:active {
  background: #00334d !important;
}
.material-button.center div {
  display: flex;
  justify-content: center;
}
fieldset{
    border: none;
    margin-bottom: 10px;
}

  .material label {
    transition: all 150ms ease-out;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: block;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 4px;
    font-weight: 500;
    color: #cd908b;
    line-height: 1.5;
}

/*  FECHA */



::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator


::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: transparent; }
::-webkit-datetime-edit-text { color: #caa782; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: #333; }
::-webkit-datetime-edit-day-field { color: #333; }
::-webkit-datetime-edit-year-field { color: #333; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: #caa782; }

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}
::-webkit-datetime-edit-text { padding: 0 2rem; }
/*  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }*/
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}


/*  FIN FECHA */
input[type="date"]::before { 
      content: attr(data-placeholder);
      width: 100%;
    }
    
    /* hide our custom/fake placeholder text when in focus to show the default
     * 'mm/dd/yyyy' value and when valid to show the users' date of birth value.
     */
    input[type="date"]:focus::before,
    input[type="date"]:valid::before { display: none }

@media (max-width: 500px){
    ::-webkit-datetime-edit-month-field { color: #FFF; }
::-webkit-datetime-edit-day-field { color: #FFF; }
::-webkit-datetime-edit-year-field { color: #FFF; }
  
    .material-button{
          margin-top: 20px;
    }
    .flex-ficha .flex-container{
        flex-wrap: nowrap;
    }
    .flex-ficha .modulo.info {
        width: 100%;
    }
    .field.legal.material-checkbox{
        top: 10px;
    }
    .flex-ficha .modulo.info .flex-container.left{
        background-color: rgba(0,0,0,.65);
        margin-top: 0px;
    }
    .flex-container.left p, .flex-container.left .titulo1{
        display: none;
    }
    .module-form-container{
        flex-direction: column;
        margin-top: -10px;
    }
    .flex-ficha .modulo.info div{
        width: 100%;
    }
    .observaciones{
        margin-top: -20px;
    }
    .field.legal{
        margin-top: -40px;
    }
    .flex-ficha .flex-container .material label{
        color:#ccb497;
        /*font-family: 'Helvetica Neue' !important;*/
        /*font-size: 14px;*/
    }
}
@media (max-width: 360px){
    .flex-ficha .flex-container{
        padding: 10px;
    }
    .material-button{
          margin-top: 0px;
    }
    .material  .field input, .material .field label, .material .field[value=""] label{
        font-size: 13px;
    }
    .flex-ficha .titulo2{
        text-align: center;
        margin-top: 20px;
        line-height: 0px;
        margin-bottom: 10px;
    }
    .titulo2 span{
        font-size: 15px;
    }
    .material .field label{
        transform: translateY(-18px) translateZ(0);
        font-size: 11px;
    }
    .material .field input:focus + label{
      -webkit-transform: translateY(-18px) translateZ(0);
              transform: translateY(-18px) translateZ(0);
      font-size: 11px;
      margin-top: 0px;  
      color: #ccb497 !important;
    }
    .material .field textarea:focus + label{
        font-size: 11px;
        margin-top: 0px;  
    }
    .material .field.observaciones input:focus + label{
         -webkit-transform: translateY(-24px) translateZ(0);
              transform: translateY(-24px) translateZ(0);
    }
    
    .flex-ficha .flex-container .material .material-checkbox label{
        font-size: 10px;
    }
}
@media (min-width: 470px) and (max-height: 500px) and (orientation: landscape) {
  ::-webkit-datetime-edit-month-field { color: #FFF; }
::-webkit-datetime-edit-day-field { color: #FFF; }
::-webkit-datetime-edit-year-field { color: #FFF; }
    .flex-ficha .modulo.info .flex-container.left{
        background-color: rgba(0,0,0,.65);
        margin-top: 0px;
    }

    .field.legal.material-checkbox{
        top: 10px;
    }
    .flex-ficha .modulo.info {
        width: 100%;
    }
    .flex-ficha .modulo.info .flex-container.left{
        background-color: rgba(0,0,0,.65);
        margin-top: 0px;
    }
    .flex-container.left p, .flex-container.left .titulo1{
        display: none;
    }
    .module-form-container{
        /*flex-direction: column;*/
        margin-top: -10px;
    }
    .flex-ficha .modulo.info div{
        width: 100%;
    }
    .observaciones{
        margin-top: 20px;
    }
    .field.legal{
        margin-top: -40px;
    }
    .flex-ficha .flex-container .material label{
        color:#ccb497;
        /*font-family: 'Helvetica Neue' !important;*/
        /*font-size: 14px;*/
    }

 .flex-ficha .flex-container{
        padding: 10px;
    }
    .material  .field input, .material .field label, .material .field[value=""] label{
        font-size: 13px;
    }
    .flex-ficha .titulo2{
        text-align: center;
        margin-top: 20px;
        line-height: 0px;
        margin-bottom: 10px;
    }
    .titulo2 span{
        font-size: 15px;
    }
    .material .field label{
        transform: translateY(-18px) translateZ(0);
        font-size: 11px;
    }
    .material .field input:focus + label{
      -webkit-transform: translateY(-18px) translateZ(0);
              transform: translateY(-18px) translateZ(0);
      font-size: 11px;
      margin-top: 0px;  
    }
    .material .field textarea:focus + label{
        font-size: 11px;
        margin-top: 0px;  
    }
    .material .field.observaciones input:focus + label{
         -webkit-transform: translateY(-24px) translateZ(0);
              transform: translateY(-24px) translateZ(0);
    }
    
    .flex-ficha .flex-container .material .material-checkbox label{
        font-size: 10px;
    }
    .material-button{
        position: absolute;
    }
    .flex-ficha .flex-container .material .material-checkbox label{
        width: 90%;
    }
}
@-webkit-keyframes rotateIn {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(200px);
            transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes rotateIn {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(200px);
            transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%) translateZ(0);
            transform: translateY(100%) translateZ(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%) translateZ(0);
            transform: translateY(100%) translateZ(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}