.about-me-note button:hover {
       margin: 10px 0 0 10px;
       transition-duration: 0.2s;
   }

   .about-me-note a {
       color: #ffaf00;
       text-decoration: none;
   }

   @media only screen and (max-width: 990px) {
       .about-me-cr {
           max-width: 100%;
           flex-direction: column;
       }

       .about-me-text {
           width: 100%;
       }

       .about-me-title {
           margin-bottom: 5px;
       }

       .about-me-notes {
           width: 100%;
           display: none;
           visibility: hidden;
       }
   }

   /* Experience
----------------------------------------------- */
   .experience-bg {
       padding: 50px 15px;
       border-top: 1px solid #E4E4E4;
   }

   .experience-cr {
       margin: auto;
       max-width: 1100px;
       position: relative;
   }

   .experience-columns {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .experience-column {
       width: 50%;
   }

   .experience-column-timeline {
       border-radius: 5px;
       padding: 30px 30px 0;
       /* -webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1); */
   }

   .experience-column-timeline .experience-item::after {
       position: absolute;
       content: "";
       left: 0px;
       top: 11px;
       width: 30px;
       height: 1px;
       background-color: #E4E4E4;
       border-radius: 0 30px 30px 0;
       transition-duration: 0.2s;
   }

   .experience-column-timeline .experience-item:hover::after {
       background-color: #FFAF00;
       transition-duration: 0.2s;
   }

   .experience-column-timeline .experience-item {
       position: relative;
       padding: 0;
       border-left: 1px solid #E4E4E4;
       transition-duration: 0.2s;
   }

   .experience-column-timeline .experience-item:hover {
       border-left: 1px solid #FFAF00;
       transition-duration: 0.2s;
   }

   .experience-column-timeline .experience-item .experience-item-content {
       padding: 0px 0px 75px 50px;
   }

   .experience-column-timeline .experience-item:last-child .experience-item-content {
       padding-bottom: 0;
   }

   .experience-title {
       margin-bottom: 25px;
   }

   .experience-title h3 {
       font-family: Montserrat, Helvetica, sans-serif;
       font-size: 28px;
       font-weight: 700;
       color: #000;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       padding-bottom: 15px;
       border-bottom: 1px solid #FFAF00;
       width: 97%;
   }

   .experience-item-img-title {
       display: flex;
       flex-direction: row;
       /* flex-wrap: wrap; */
       align-items: center;
       margin-bottom: 10px;
   }

   .experience-item-img-title img {
       float: left;
       vertical-align: middle;
       padding-right: 10px;
       height: 23px;
       filter: grayscale(100%);
       transition-duration: 0.2s;
   }

   .experience-item-content:hover .experience-item-img-title img {
       filter: grayscale(0%);
       transition-duration: 0.2s;
   }

   .experience-item-img-title a {
       text-decoration: none;
   }

   .experience-item-content-title {
       font-weight: 700;
       font-size: 20px;
       line-height: 25px;
       font-family: Montserrat, Helvetica, sans-serif;
       color: #000;
   }

   .experience-item-content-title span {
       position: relative;
   }

   .experience-item-content .experience-item-content-title span::after {
       content: "";
       display: block;
       margin-top: -11px;
       width: 0%;
       height: 10px;
       background-color: #E4E4E4;
       position: absolute;
       z-index: -1;
       transition-duration: 0.2s;
       opacity: 0.5;
   }

   .experience-item-content:hover .experience-item-content-title span::after {
       width: 100%;
       transition-duration: 0.2s;
   }

   .experience-item-content-date {
       font-family: Inter, Helvetica, sans-serif;
       font-size: 12px;
       color: #464646;
       font-weight: 400;
       margin-bottom: 10px;
   }

   .experience-item-content-post {
       font-family: Inter, Helvetica, sans-serif;
       font-weight: 600;
       font-size: 16px;
       color: #464646;
       transition-duration: 0.2s;
       line-height: 1.5;
   }

   .experience-item-content:hover .experience-item-content-post {
       color: #000;
       transition-duration: 0.2s;
   }

   .experience-item-content p {
       font-family: Inter, Helvetica, sans-serif;
       font-size: 16px;
       font-weight: 400;
       line-height: 30px;
       color: #464646;
       text-align: left;
   }

   .experience-item-content ul {
       font-family: Inter, Roboto, Helvetica, sans-serif;
       font-size: 16px;
       font-weight: 400;
       line-height: 30px;
       color: #464646;
       text-align: left;
       list-style-type: square;
   }

   .experience-item-content ul a {
       color: #551A8B;
   }

   .experience-item-content ul li:not(:last-child) {
       margin-bottom: 10px;
   }

   .experience-accordion {
       /* border-top: 1px solid #E4E4E4; */
   }

   .experience-accordion p {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-between;
       cursor: pointer;
   }

   .experience-accordion p {
       color: #464646;
       transition-duration: 0.2s;
   }

   .experience-accordion:hover p {
       color: #000;
       transition-duration: 0.2s;
   }

   .experience-accordion i {
       color: #464646;
       transform: rotate(0deg);
       transition-duration: 0.5s;
   }

   .experience-accordion:hover i {
       color: #000;
       transform: rotate(90deg);
       transition-duration: 0.5s;
   }

   .experience-accordion-panel {
       border-bottom: 1px solid #E4E4E4;
       transition-duration: 0.2s;
   }

   .experience-item-content:hover .experience-accordion-panel {
       border-bottom: 1px solid #FFAF00;
       transition-duration: 0.2s;
   }

   .experience-accordion-panel-active {
       display: none;
   }

   @media only screen and (min-width: 990px) {}

   @media only screen and (max-width: 990px) {
       .experience-cr {
           max-width: 100%;
       }

       .experience-columns {
           flex-direction: column;
           flex-wrap: initial;
       }

       .experience-column {
           width: 100%;
       }

       .experience-column:first-child {
           margin-bottom: 50px;
       }

       .experience-title h3 {
           width: 100%;
       }

       .experience-column-timeline {
           padding: 15px 0 0 15px;
       }

       .experience-column-timeline .experience-item::after {
           width: 15px;
       }

       .experience-column-timeline .experience-item .experience-item-content {
           padding: 0px 0px 50px 25px;
       }
   }

   @media only screen and (max-width: 770px) {
       .experience-item-img-title img {
           display: none;
           visibility: hidden;
       }
   }

   /* Habilidades
----------------------------------------------- */
   .skills-bg {
       padding: 50px 15px;
       background-color: #FBFBFB;
       border-top: 1px solid #E4E4E4;
   }

   .skills-cr {
       max-width: 1100px;
       position: relative;
       margin: auto;
   }

   .skills-title h3 {
       padding-bottom: 15px;
       border-bottom: 1px solid #FFAF00;
       font-family: Montserrat, Helvetica, sans-serif;
       font-size: 28px;
       font-weight: 700;
       color: #000;
       text-transform: uppercase;
       letter-spacing: 1.5px;
   }

   .skills-scroll {
       margin: 0;
       padding: 30px 0;
       display: flex;
       flex-direction: row;
   }

   .skills-scroll::-webkit-scrollbar {
       height: 10px;
   }

   .skills-scroll::-webkit-scrollbar-thumb {
       background-color: #FFAF00;
       /* border-radius: 30px; */
       transition-duration: 0.2s;
   }

   .skills-scroll::-webkit-scrollbar-thumb:hover {
       background-color: #464646;
       transition-duration: 0.2s;
   }

   .skills-scroll::-webkit-scrollbar-track {
       background-color: #E4E4E4;
       /* border-radius: 30px; */
   }

   .skill-item-cr {}

   .skill-item {
       height: 300px;
       padding: 25px 50px;
       background: rgb(255, 255, 255);
       background: linear-gradient(145deg, rgba(255, 255, 255, 0) 50%, rgba(255, 175, 0, 0) 100%);
       border: 1px solid #E4E4E4;
       display: flex;
       flex-direction: column;
       justify-content: center;
       /* flex: 0 0 20%; */
       text-align: left;
       transition-duration: 0.2s;
   }

   .skill-item:hover {
       /* box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); */
       /* background: rgb(255,255,255); */
       /* background: linear-gradient(145deg, rgba(255,255,255,0) 50%, rgba(255,175,0,0.499124649859944) 100%); */
       border: 1px solid #FFAF00;
       transition-duration: 0.2s;
   }

   .skill-item i {
       font-size: 36px;
       color: #FFAF00;
   }

   .skill-item h5 {
       margin-top: 20px;
       margin-bottom: 20px;
       font-family: Montserrat, Helvetica, sans-serif;
       font-size: 24px;
       font-weight: 700;
       color: #000;
   }

   .skill-item p {
       margin: 0;
       font-family: Inter, Helvetica, sans-serif;
       font-size: 16px;
       font-weight: 400;
       color: #464646;
       line-height: 25px;
   }

   .skills-scroll-angle {
       display: none;
       position: absolute;
       top: 48%;
       left: 100%;
       -webkit-transform: translateX(-50%);
       -ms-transform: translateX(-50%);
       transform: translateX(-50%);
       z-index: 4;
       animation: skills-angle-mobile 4s infinite;
   }

   @keyframes skills-angle-mobile {
       0% {
           left: 95%;
           opacity: 0;
       }

       25% {
           opacity: 0.75;
       }

       50% {
           left: 99%;
           opacity: 0;
       }

       100% {
           left: 99%;
           opacity: 0;
       }
   }

   .skills-scroll-angle i {
       font-size: 50px;
       color: #FFAF00;
   }

   @media only screen and (min-width: 1000px) {
       .skills-scroll {
           flex-wrap: wrap;
           justify-content: space-between;
           row-gap: 22px;
       }

       .skill-item {
           flex: 0 0 22.6%;
       }
   }

   @media only screen and (min-width: 770px) and (max-width: 1000px) {
       .skills-scroll {
           flex-wrap: wrap;
           justify-content: center;
           row-gap: 22px;
           column-gap: 2%;
       }

       .skill-item {
           flex: 0 0 35%;
       }
   }

   @media only screen and (max-width: 770px) {
       .skills-scroll {
           overflow-x: scroll;
           overflow-y: hidden;
       }

       .skill-item {
           flex: 0 0 62%;
       }

       .skill-item:not(:last-child) {
           margin-right: 20px;
       }

       .skills-scroll-angle {
           display: block;
       }
   }