:root {
       --animate-duration: 1s;
       --animate-delay: 1s;
       --animate-repeat: infinite;

       --pallete1: #5271ff;
       --pallete2: #38b6ff;
       --pallete3: #5e17eb;
       --pallete4: #004aad;
       --pallete5: #F5F7F8;
       --pallete6: #F6F5F5;
       --pallete7: #d9d9d9;
       --pallete8: #a6a6a6;
       --pallete9: #737373;
       --pallete10: #100C08;
       --pallete11: #3049A5;
       --pallete12: #F5F5F5;
       --pallete13: #60A3D9;
       --pallete14: #FD49A0;
       --pallete15: #070F2B;
       --pallete16: #222831;
       --pallete17: #31363F;
       --pallete18: #ff3131;
       --pallete19: #B4B4B8;
       --pallete20: #C7C8CC;
       --pallete21: #EF7C8E;
       --pallete22: rgb(245, 245, 245, 0.9);
       --pallete23: rgb(16, 12, 8, 0.8);
       --pallete24: #d8eefe;
       --pallete25: #e3f6f5;
       --pallete26: #ff5470;
       --pallete27: #094067;
       --pallete28: #232946;
       --pallete29: #25d366;
       --pallete30: #ff8906;
       --pallete31: rgb(255, 180, 0);
       --pallete32: rgb(9, 64, 103, 0.9);
       --pallete33: rgb(255, 244, 0);
       --pallete34: rgb(244, 205, 42);
       --pallete35: rgb(253, 246, 140);

       --pallete1op: rgba(82, 113, 255, 0.2);
       --pallete2op: rgba(56, 182, 255, 0.2);
       --pallete11op: rgba(48, 73, 165, 0.5);
       --pallete27op: rgba(9, 64, 103, 0.5);
       --pallete24op: rgba(216, 238, 254, 0.2);
       --pallete25op: rgba(227, 246, 245, 0.3);
       --pallete13op: rgba(96, 163, 217, 0.3);
}

@media (max-width: 1024px) {

       /* html {
              font-size: 90%;
       } */
       /* ===== START FLOATING BUTTON ========== */

       #float .item {
              max-width: 10rem;
       }

       /* ===== END FLOATING BUTTON ========== */

       /* ===CONTAINER-JUMBOTRON=== */

       .section-jumbotron .banner-jumbotron img {
              height: 23rem;
       }

       .section-jumbotron .container-jumbotron .container-jumbotron-item {
              margin: 0 auto;
       }

       .section-jumbotron .container-jumbotron .container-jumbotron-item h1 {
              font-size: 1.5rem;
       }

       .section-jumbotron .container-jumbotron .container-jumbotron-item h4 {
              font-size: 1rem;
       }

       .section-jumbotron .container-jumbotron .container-jumbotron-item p {
              font-size: 1rem;
              padding-bottom: 0.5rem;
              border-bottom: 1px solid var(--pallete12);
       }


       /* ===END-CONTAINER-JUMBOTRON=== */


       /* ===CONTAINER-NAVBAR=== */
       #hamburgerMenu {
              display: inline-block;
       }

       .container-navbar .navbar-link {
              position: absolute;
              color: var(--pallete10);
              display: block;
              top: 100%;
              right: -100%;
              z-index: 3;
              width: 23rem;
              transition: 0.3s;
              justify-content: space-between;
       }

       .container-navbar .navbar-link.active {
              right: 0;
              height: 100vh;
              overflow-y: scroll;
              padding-bottom: 8rem;
              background-color: var(--pallete5);
              /* font-size: 0.7rem; */
       }

       .container-navbar .navbar-link .nav-item {
              padding: 0.5rem 3%;
              display: flex;
              flex-direction: column;
              align-items: start;
              margin: auto 0.3rem;
              font-size: 1.2rem;
              font-weight: 500;
              width: auto;
              border-bottom: 0.1rem solid var(--pallete10);
       }

       .container-navbar .navbar-link .nav-item .nav-link {
              height: auto;
              display: flex;
              flex-direction: column;
              align-items: start;
              width: 100%;
              margin: auto;
       }

       .container-navbar .navbar-link .nav-item .nav-link a {
              color: var(--pallete10);
              padding: 0.3rem 5%;
              border-top-right-radius: 0.5rem;
              border-top-left-radius: 0.1rem;
              border-bottom-right-radius: 0.5rem;
              border-bottom-left-radius: 0.1rem;
       }

       .container-navbar .navbar-link .nav-item .nav-link a:hover {
              color: var(--pallete15);
              padding: 0.3rem 5%;
              background-color: var(--pallete7);
              border-top-right-radius: 0.5rem;
              border-top-left-radius: 0.1rem;
              border-bottom-right-radius: 0.5rem;
              border-bottom-left-radius: 0.1rem;
       }

       .container-navbar .navbar-link .nav-item span {
              position: relative;
              margin: auto 0;
              display: flex;
              flex-direction: column;
              width: 100%;
              background-color: var(--pallete7);
       }

       .container-navbar .navbar-link .nav-item span a {
              font-size: 1.2rem;
              color: var(--pallete15);
              margin: 0.5rem;
              border-bottom: solid 0.1rem var(--pallete27);
              width: auto;
       }

       .container-navbar .navbar-link .nav-item span a:hover {
              background-color: var(--pallete12);
              color: var(--pallete10);
              border-radius: 0.7rem;
              width: auto;
              transition: 0.2s linear;
       }

       .container-navbar .navbar-extra a {
              font-size: 2.5rem;
       }

       .container-navbar .navbar-extra .admin {
              display: none;
       }

       .container-navbar .navbar-footer {
              position: fixed;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 1.2rem;
              width: 23rem;
              padding: 0 1%;
              bottom: 0;
              height: 3rem;
              background-color: var(--pallete4);
       }

       .container-navbar .navbar-footer .nav-footer {
              padding: 0.3rem 5%;
       }

       .container-navbar .navbar-footer .nav-footer:hover {
              background-color: var(--pallete12);
              padding: 0.3rem 5%;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
       }

       .container-navbar .navbar-footer .nav-footer a {
              color: var(--pallete12);
       }

       .container-navbar .navbar-footer .nav-footer a:hover {
              color: var(--pallete10);
       }

       /* ===END CONTAINER-NAVBAR=== */


}