@import url('https://fonts.googleapis.com/css2?family=Unna:wght@400;700&display=swap');

  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

body{
  margin-top:70px;
}
.navbar {
  overflow: hidden;
  background-color: #F5F8FA;
  font-family: Arial, Helvetica, sans-serif;
  width:100%;
  margin:0px;
  position:fixed;
  z-index:1000;
  top:0px;
}

#logu{
  float:left;
}

#logu:hover{
  background:none;
}

.navbar a {
  float: right;
  font-size: 12px;
  color: black;
  margin-top:5px;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
}

.navbar a:hover{
  font-weight:bold;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown-content a:hover{
  font-weight:bold;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 12px;  
  border: none;
  outline: none;
  color: black;
  padding: 26px 16px;
  z-index:1000;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}



.dropdown-content {
  display: none;
  position: fixed;
  background-color: #F5F8FA;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:1000;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index:1000;
}

.dropdown-content a:hover {
  background-color: #ddd;
  font-weight:bold;
  z-index:1000;
}

.show {
  display: block;
  z-index:1000;
}


  .container-curso{
    height:600px; background:url("https://i.ibb.co/xsggCV7/Fondo-Cursos.jpg");
    background-size:cover;
    background-repear:no-repeat;
    position:relative;
    padding-top:70px;

  }


  .nombre{
    width:40%;
    background:#02426A;
    border-radius:20px;
    left:10%;
    z-index:999;
    position:absolute;
    padding-bottom:90px;
    box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);
  -webkit-box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);
  -moz-box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);
  }

  .foto{
    width:50%;
    height:300px; background:url("https://meca.ues21.edu.ar/fehgra/Imagenesmicrositio/pexels-kampus-production-5940721.jpg");
    background-size:cover;
    border-radius:20px;
    left:40%;
    top:140px;
    position:absolute;
    box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);
  -webkit-box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);
  -moz-box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);
  }

  .nombre h1{
    width:80%;
    font-size:24px;
    position:absolute:20px;
    margin:auto;
    color:white;
    font-family:'Unna';
    padding-top:50px;
  }

  .nombre p{
    width:80%;
    font-size:12px;
    margin:auto;
    color:white;
    font-family:'Open Sans';
    padding-top:20px;
  }

  .button-curso{
    color:#02426A;
    padding:12px 10px 12px 10px;
    border: 1px solid white;
    width:90px;
    border-radius:20px;
    background:white;
    font-size:12px;
    text-align:center;
    position:absolute;
    left:10%;
    margin-top:20px;
    font-family:'Open Sans';
  }


   .containertabla {
              background-color: #467497;
              border-radius: 10px;
              padding: 15px;
              margin-top:-50px;
              width: 80%;
              margin: 0 auto;
              margin-top: -50px;
              z-index: 999;
              display: flex;
              position: relative;  ;
              align-items: center;
              justify-content: center;
     box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);
  -webkit-box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);
  -moz-box-shadow: 0px 3px 17px -3px rgba(153,153,153,0.66);

          }
          .responsive-table {
              width: 100%;
              display: table;
          }
          .responsive-table li {
              display: table-row;
          }
          .responsive-table li div {
              display: table-cell;
              padding: 10px;
              text-align: center;
              border-right: 1px solid white;
              vertical-align: middle;
              color: white;
              font-family: 'Open Sans', sans-serif;
          }
          .responsive-table li div:last-child {
              border-right: none;
          }
          .responsive-table li div h4 {
              font-weight: bold;
              margin: 0;
              margin-bottom: 10px;
              font-size: 1em;  /* Tamaño de fuente para el título */
          }
          .responsive-table li div p {
              font-size: 0.8em;  /* Tamaño de fuente para la bajada */
              margin: 0;
          }
          @media (max-width: 765px) {
              .responsive-table li div {
                  display: block;
                  border-right: none;
              }
          }


  .parent2{
    padding-top:70px;
  display: grid;
    margin:auto;
    width:80%;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  }

  .div11 { grid-area: 1 / 1 / 2 / 2; }
  .div12 { grid-area: 1 / 2 / 2 / 3;}

  .vertodo{
    margin:auto;
    margin-top:20px;
    padding:15px 5px 15px 5px;
    border: 1px solid black;
    border-radius:50px;
    width:100px;
    text-align:center;
    font-family: 'Open Sans';
  }

  .vertodo:hover{
    border: 1px solid #467497;
    background: #467497;
    color:white;
  }

  .div11 span{
    text-decoration:underline;
    text-decoration-color:#008DD4;
  }

   @import url('https://fonts.googleapis.com/css2?family=Unna:wght@400;700&display=swap');

  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

  .containerplan{
    width:100%;
  }
  .mplan{
    font-family:'Open Sans';
    font-size:12px;
    color:#008DD4;
    padding-top:10px;
  }

  .tplan{
    font-family:'Open Sans';
    font-size:18px;
    color:black;
    font-weight:600;
    padding-bottom:10px;
    padding-top:10px;
    border-bottom: 2px solid #D8D8D8;

  }

  .lightbox {
    /* Default to hidden */
    display: none;

    /* Overlay entire screen */
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* A bit of padding around image */
    padding: 1em;

    /* Translucent background */
    background: rgba(0, 0, 0, 0.8);
  }

  /* Unhide the lightbox when it's the target */
  .lightbox:target {
    display: block;
  }

  .lightbox span {
    /* Full width and height */
    display: block;
    width: 100%;
    height: 100%;

    /* Size and position background image */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }