html {
  scroll-behavior: smooth;
}
body { font-family: 'Open Sans', sans-serif; background:#e6e4e4 url(img/bg.png) no-repeat center top; background-size: 100% auto; 
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

body, section, footer, h1, h2, h3, a, b, p, div, .row, .container { transition: all 200ms;  }
    section { width:100%; height:auto; padding:75px 0; }
    footer { width:100%; height:auto; padding:125px 0; border-bottom:#f60 solid 20px; }
    footer a { font-size:22px; }
    h1, h2, h3, h4, h5, h6 { font-weight:700; color:#fc8301; }
    select { padding: 10px 16px; border-radius:25px; border: none; background:#f38b20; color:#000; font-weight:500; -webkit-filter: drop-shadow(5px 7px 5px rgba(0, 0, 0, .4));
  filter: drop-shadow(5px 7px 5px rgba(0, 0, 0, .4)); }
    a { color:#fc7101; font-weight:600; text-decoration:none; }
    a:hover { color:#000; font-weight:600; text-decoration:none; }
    b { font-weight:700; }
    p { font-size:22px; }
    nav { width:100%; background: #fdd005; overflow: hidden; position: relative; height:auto; text-align: right; position: fixed; z-index:10; padding:10px 0;  background: background: linear-gradient(#e66465, #9198e5); }
    nav img.nav-img { filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg); position: absolute; z-index:1 ; top:0; left:0;  width:100%; }
    nav a { position:relative; z-index:10; }
    .mosaico { width:31%; margin:4px; -webkit-filter: drop-shadow(5px 7px 15px rgba(0, 0, 0, .4));
  filter: drop-shadow(5px 7px 15px rgba(0, 0, 0, .4)); }

    .logo_1 { margin-top:5%; -webkit-filter: drop-shadow(5px 7px 15px rgba(0, 0, 0, .4));
  filter: drop-shadow(5px 7px 15px rgba(0, 0, 0, .4)); margin-bottom:40px; }
  .btn_ { background:none; color:#f26a21; font-size:24px !important; font-weight: 600 !important; display: inline-block; padding:5px 15px;  margin-right:20px; }
  .btn_:hover {  color:#000; font-weight: 700; font-size:24px !important; font-weight: 600 !important; display: inline-block; padding:5px 15px; border-radius:20px; }
  .btnn { background:#000; color:#fff; max-width:320px; border-radius: 25px; padding:20px; display:block; margin:25px auto;font-size:24px; font-weight:600; }
  .btnn:hover { background:#f26a21; color:#000; max-width:320px; border-radius: 25px; padding:20px; display:block; margin:25px auto;font-size:24px; font-weight:600; }


  .compra { padding:0 3%; }
  .compra img { display:inline-block; }
  .profesiones { background:#fc8301 url(img/ciudad.svg) no-repeat center bottom; background-size: 100% auto; padding:250px 0; }
  .profesiones h2 {color:#fff; font-size:3.5vw; margin:-155px auto 50px auto; max-width:650px; font-weight:800;  }
  .profesiones p { margin:50px auto; max-width:650px;   }
  .prof { width:80%; position:absolute; margin-bottom:-10px; left:10%; }
    
    .intro { color:#fff; font-size: 3vw; line-height: 3.4vw; font-weight: 800;  margin-bottom: -10px; text-transform: uppercase; }
    .txt-intro { font-size: 2vw; line-height:2.8vw; font-weight:800; }
    .costos h2 { margin-top:0px; font-size:4.5vw;  }
    .costos h3 { margin-top:0px; font-size:2.5vw;  }
    .costos a {  display:block;  }
    .costos img {  display:block; margin:5px auto; }
    .costos p { margin:50px 0;   }

    #usuarios { background: url(img/mosaico.jpg) no-repeat center ; background-size: cover; padding:250px 0;  }
    #usuarios p { font-size: 4.2vw; color:#fff; backdrop-filter: blur(10px); font-weight: 400; background: rgba(0, 0, 0, .7); border-radius:35px; padding: 35px 3%;  }
    #usuarios p span { color:#f60; font-weight: 800; }
    .box{ color: #000; padding: 0px; position: relative; display: none; margin-top: 20px; transition: all 0.5s;   }
  
  .celda { width:40%; display:inline-block; font-size:24px;  font-weight:700; text-align: center; }
  .celda span { display:block; color:#fff; background:#d5560a; padding:5px 15px; margin-bottom:10px; font-weight:500; border-radius:30px; font-size:18px; }
  .blend { mix-blend-mode: multiply;  display: flex;  justify-content: center;}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  border-radius:30px; overflow: hidden;
}

th, td {
  text-align: center;
  padding: 8px;
  font-size: 22px;
}

tr:nth-child(even){background-color: #abacac}




@media (max-width: 560px) {
    body { font-family: 'Open Sans', sans-serif; background:#e6e4e4 url(img/bg.png) no-repeat center top; background-size: 180% auto;}
    .intro { color:#fff; font-size: 8vw; line-height: 8.4vw; font-weight: 800;  margin-bottom: -10px; text-transform: uppercase; }
    .txt-intro { font-size: 6vw; line-height:6.8vw; font-weight:800; }

    .mosaico {
    width: 30%;
    margin: 4px;
    -webkit-filter: drop-shadow(5px 7px 15px rgba(0, 0, 0, .4));
    filter: drop-shadow(5px 7px 15px rgba(0, 0, 0, .4));
}

}