ul     {list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: transparent;
        position: fixed;
        top: 10;
        width: 98.8%;}

        li { float: right;
        font-size:120%;
        padding: 10px 10px 10px 10px;}

        li a {display: block;
        padding: 5px 10px 5px 10px;
        background-color: transparent;
        color:white;
        text-align: center;
        text-decoration: none;
        transition-duration: 0.4s;
        font-size: 20px;}

        li.float-left {float:left}

        li a:hover {background-color: transparent;
                border-style: solid;
                border: 2px solid;
                border-radius: 8px}

        li a.activo {background-color:transparent;
                border-style: solid;
                border: 2px solid;
                border-radius: 8px;
                color: white;}
              
        li a:hover:not(.activo) {background-color: transparent;
        color: white;}

        @media screen and (max-width: 768px) {

                [class="barra de navegación"] {width: 50%;
                margin: 0% 0% 0% 25%;}

                    ul {position: relative;
                        background-color: #eee;
                        align:center;}

                    li {display: block;
                        align:center;
                        float: none;
                        font-size:100%;
                        padding: 2px 0% 2px 0%;
                        width:100%;}

                     li.float-left {float:none;
                                padding: 2px 0% 2px 30%;
                                width:100%}
                      
                      li a {display: block;
                        color: #000;
                        padding: 3px 0px;
                        text-decoration: none;}
                }

#Título {color: white;
        background-image: radial-gradient(circle, #3169b1, #407ac0, #4f8ad0, #5e9cdf, #6eadee);
        text-align: center;
        padding-top: 30px;
        padding-bottom: 30px;   
        text-align:center;
        font-family:arial;
        font-style:oblique;
        font-size: 3.5vw;}

div#Presentación {text-align: center;}
        #Presentación {         text-align: center;
                                box-sizing: border-box;
                                margin:auto;
                                width:90%;}

                                .h-presentación {color:grey;
                                        text-align: center;
                                        font-size:150%;}
                                .p-presentación {text-align: justify;
                                        color:grey;
                                        font-size:120%;}

                                .contenedor-1{display: block;
                                        grid-template-columns: 100% 100% 100%;}

                                .celda-1  {padding: 5px 5px;}
                                .celda-2  {padding: 5px 5px;}
                                .celda-3  {padding: 5px 70px;}
                                .imagen-1 {padding: 5px;}
                                .imagen-3 {padding: 5px;}
                                .imagen-4 {padding: 5px;}
                                .imagen-8 {padding: 5px;}
                                .imagen-5 {padding: 0px 0px 0px 0px;}
                                .imagen-6 {padding: 0px 0px 0px 0px;}
                                .imagen-7 {padding: 0px 0px 0px 0px;}

                                @media only screen and (min-width: 768px) {
                                        /* larger than mobile phones: */

                                        #Presentación {text-align: center;
                                                box-sizing: border-box;
                                                margin:auto;
                                                width:80%;}
                                        
                                        [class="contenedor-1"] {display: grid;
                                                grid-template-columns: 30% 40% 30%;
                                                padding: 10px 0;}

                                          [class="celda-1"]  {padding: 25px 50px;}
                                          [class="celda-2"]  {padding: 25px 10px;}
                                          [class="celda-3"]  {padding: 25px 50px;}
                                          [class="imagen-1"] {padding: 30px;}
                                          [class="imagen-3"] {padding: 30px;}
                                          [class="imagen-4"] {padding: 30px;}
                                          [class="imagen-8"] {padding: 30px;}
                                          [class="imagen-5"] {padding: 0px 0px 0px 0px;}
                                          [class="imagen-6"] {padding: 0px 0px 0px 0px;}
                                          [class="imagen-7"] {padding: 0px 0px 0px 0px;}
                                                
                                      }
                
                                .subcontenedor-1 {display: grid;
                                        grid-template-columns: 25% 50% 25%;
                                        padding: 0px;}
                      
                                      .subcelda-1, .subcelda-2, .subcelda-3 {width: 100%;
                                        text-align: center;
                                        margin: auto;
                                        padding: 0px 0;}

.Líneas-título {text-align: center;
        color:grey;}

#Líneas {margin:auto;
        width:90%;
        text-align:justify;}

        .h-líneas {color:grey;
                text-align: center;
                font-size:150%;
                padding: 10px 0px 0px 0px;}
        .p-líneas {text-align: justify;
                color:grey;
                font-size:120%;
                padding: 0px 0px 0px 0px;}

        .contenedor-2{display: block;
                grid-template-columns: 100% 100% 100%;}

                .imagen-9 {width: 100%;
                        height: auto;}
                .imagen-10 { width: 100%;
                        height: auto;}
                .imagen-11 { width: 100%;
                        height: auto;}

        @media only screen and (min-width: 768px) {
                /* larger than mobile phones: */
                
                [div="Líneas"] {margin:auto;
                        width:100%;}
                [class="contenedor-2"] {display: grid;
                        grid-template-columns: 33.33% 33.33% 33.33%;}

                  [class="celda-4"] {padding: 10px 20px;}
                  [class="celda-5"] {padding: 10px 20px;}
                  [class="celda-6"] {padding: 10px 20px;}

              }

#Exporta {text-align: center;}

        .exporta {color: grey;
                font-style: bold;
                letter-spacing: 2px;
                padding:50px 0px 0px 0px}

        .button1 {font-size: 20px;
                border-radius: 8px;
                background-color: white;
                color:  #009BDB;
                border: 2px solid  #009BDB;
                transition-duration: 0.4s;
                cursor: pointer;
                padding: 10px;}

        .button1:hover {background-color: #009BDB;
                  color: white;}

#Footer {text-align: center;
        color: grey;}