.error-validation {
   display: block;
   width: 100%;
   margin-top: 0.25rem;
   font-size: 0.875em;
   color: #f25767;
}

.faq-items .faq-item .faq-title button {
   font-size: 15px;
   /* font-weight: 500; */
}

.header1-area .header-top-area {
   padding: 10px 0 8px;
   /* background: #ead24a; */
}

.title-default-left-bold-lowhight {
   text-transform: none !important;
}

.title-default-left-bold {
   text-transform: none !important;
}

.inner-page-banner-area .pagination-area h1 {
   text-transform: none !important;
}

title-news-left-bold {
   text-transform: none !important;
}

.header1-area .header-top-area .header-top-right {
   text-align: right;
   font-weight: 400;
}
.header1-area .header-top-area .header-top-right ul li {
   position: relative;
   font-size: 14px;
   padding-right: 0;
   display: inline-block;
   margin-left: 11px;
   padding-right: 12px;
   border-right: 1px solid #212121;
}
.header1-area .header-top-area .header-top-right ul li img {
   height: 22px;
}
.header1-area .header-top-area .header-top-right ul li:nth-child(6n) {
   border-right: none;
   padding-right: 0;
}

.service-box1:first-child {
   border-radius: 30px 0 0 0;
}

.service-box1:last-child {
   border-radius: 0 30px 0 0;
}

@media only screen and (max-width: 767px) {
   .service-box1:last-child {
      border-radius: 0 0 30px 0;
   }
}

@media (min-width: 768px) and (max-width: 991px) {
   .header1-area .header-top-area .header-top-right ul li:nth-child(4n) {
      display: none;
   }
}
.header1-area .header-top-area .header-top-right ul li i {
   padding-right: 10px;
   font-size: 18px;
   color: #ead24a;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
.header1-area .header-top-area .header-top-right ul li a {
   color: #333333;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
.header1-area .header-top-area .header-top-right ul li a:hover {
   color: #ead24a;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
.header1-area .header-top-area .header-top-right ul li .apply-btn-area {
   text-align: right;
}

.swal2-container .swal2-title {
   padding: 24px 24px 0;
   font-size: 20px;
   font-weight: 500;
}

.main-menu-area {
   background: linear-gradient(130deg, rgb(70, 121, 162) 0%, rgba(0, 152, 79, 1) 60%, rgba(0, 172, 89, 1) 100%) !important;
}
.stick {
   border-bottom: 0 !important;
}

.apply-now-btn {
   background: #f5f5f5f5 !important;
   color: #da251d !important;
   border: 0px solid #f5f5f5f5 !important;
   width: 75px;
   font-size: 11px;
}

.apply-now-btn:hover {
   background: rgb(70, 121, 162) !important;
   color: #ffffff;
}

nav#desktop-nav ul li > ul {
   background: rgb(0, 152, 79);
}

nav#desktop-nav ul li > ul > li {
   border-bottom: 1px solid #ead24a;
}

.product-details-tab-area ul > li a {
   background: rgb(0, 152, 79);
}

nav#desktop-nav ul li > ul > li:hover,
nav#desktop-nav ul li > ul > li .active {
   background: #008746;
}

nav#desktop-nav ul li .mega-menu-area > li:hover > a:hover {
   background: #008746;
}

nav#desktop-nav ul li .mega-menu-area > li a {
   border-bottom: 1px solid #ead24a;
}

nav#desktop-nav ul li .mega-menu-area > li a:last-child {
   border-bottom: 1px solid #ead24a;
}

nav#desktop-nav ul li .active {
   background-color: #008746;
}

.slider1-area .nivo-directionNav a.nivo-nextNav:hover {
   background-color: #ead24a;
}

.slider1-area .nivo-directionNav a.nivo-prevNav:hover {
   background-color: #ead24a;
}

.research-box2 .research-img-holder .research-details {
   right: 30px;
}

.bg-gradient-green {
   background: linear-gradient(310deg, rgb(70, 121, 162) 0%, rgba(0, 152, 79, 1) 60%, rgba(0, 172, 89, 1) 100%) !important;
}

.bg-footer-green {
   background: #008746 !important;
}

.bg-footer-green p {
   color: #ffffff !important;
}

.bg-green-deep-fixed {
   /* background-attachment: fixed; */
   position: relative;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}
.bg-green-deep-fixed:before {
   content: "";
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   margin: 0 auto;
   position: absolute;
   background-color: rgba(70, 121, 162, 0.2);
}

.title-bar-big-left-close:before {
   bottom: -15px;
}

.course-details-comments .media .media-body h4 {
   background: rgb(0, 172, 89);
   border-radius: 0.25rem !important;
   margin-bottom: 15px;
   font-size: 12px;
}

.overlay-video:before {
   background-color: rgba(0, 172, 89, 0.6);
}

.sidebar-latest-research-area ul li .latest-research-content p {
   font-size: 13px;
}

.custom-big-btn {
   color: #333333;
   padding: 13px 0;
   background: #ead24a;
   font-size: 15px;
   font-weight: 600;
   display: inline-block;
   border: none;
   width: 175px;
   text-align: center;
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
}
.custom-big-btn:hover {
   background: rgb(70, 121, 162);
   color: #ffffff;
}

.custom-big-btn-long {
   color: #333333;
   padding: 8px 0;
   background: #ead24a;
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   display: inline-block;
   border: none;
   width: 250px;
   text-align: center;
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
}

.custom-big-btn-long:hover {
   background: rgb(70, 121, 162);
   color: #ffffff;
}

.custom-big-btn-responsive {
   color: #333333;
   padding: 8px 15px;
   background: #ead24a;
   font-size: 14px;
   font-weight: 500;
   display: inline-block;
   border: none;
   text-align: center;
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
}
.custom-big-btn-responsive:hover {
   background: rgb(70, 121, 162);
   color: #ffffff;
}

.course-details-comments .answer {
   padding-left: 55px;
}

@media only screen and (max-width: 479px) {
   .course-details-comments .answer {
      padding-left: 35px;
   }
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
   background: rgb(70, 121, 162);
}

.bg-gradient-green-2 {
   background: linear-gradient(270deg, rgb(86, 148, 199) 0%, rgba(0, 200, 103, 1) 60%, rgba(0, 200, 103, 1) 100%) !important;
}

.bg-gradient-green-3 {
   background: linear-gradient(130deg, rgb(70, 121, 162) 0%, rgba(0, 152, 79, 1) 60%, rgba(0, 172, 89, 1) 100%) !important;
}

.bg-primary-deep:before {
   background: linear-gradient(130deg, rgba(70, 121, 162, 0.9) 0%, rgba(0, 152, 79, 0.9) 60%, rgba(0, 172, 89, 0.9) 100%) !important;
}

.sambutan-rektor {
   border-radius: 0 0 0 10rem;
}

.service-box1 {
   background-color: rgba(0, 172, 89, 0.8);
   padding: 33px 30px 20px 40px;
}

@media (min-width: 992px) and (max-width: 1199px) {
   .service-box1 {
      padding: 20px 25px 15px 25px;
   }
}

@media only screen and (max-width: 991px) {
   .service-box1 {
      background-color: rgb(0, 172, 89);
      padding: 20px 20px 15px;
   }
}

.service-box1 .service-box-content h3 {
   font-size: 18px;
   font-weight: bold;
}

@media (min-width: 992px) and (max-width: 1199px) {
   .service-box1 .service-box-content h3 {
      font-size: 17px;
   }
}

.service-box1 .service-box-content p {
   font-size: 15px;
   font-weight: bold;
   color: #ead24a;
}

.news-date1 li {
   width: 80px;
   height: 42px;
   font-size: 18px;
   text-align: center;
   line-height: 2.3;
}

@media (min-width: 480px) and (max-width: 991px) {
   .news-date1 li {
      height: 32px;
      font-size: 16px;
      width: 70px;
      line-height: 2;
   }
}

@media (min-width: 480px) and (max-width: 767px) {
   .news-date1 li {
      font-size: 18px;
      line-height: 2;
   }
}
@media only screen and (max-width: 479px) {
   .news-date1 li {
      height: 27px;
      font-size: 14px;
      width: 60px;
      line-height: 2;
   }
}

.course-details-inner .course-details-tab-area ul.course-details-tab-btn > li a:hover {
   background: rgb(0, 172, 89);
}

.course-details-inner .course-details-tab-area ul.course-details-tab-btn > li a.active {
   background: rgb(0, 172, 89);
}

.news-date1 li:nth-child(odd) {
   background: rgb(0, 172, 89);
   color: #ffffff;
   font-weight: 700;
   border-radius: 0.3rem 0.3rem 0 0;
}
.news-date1 li:nth-child(even) {
   background: #ead24a;
   color: #212121;
   font-weight: 500;
   border-radius: 0 0 0.3rem 0.3rem;
}

.courses-box1 .single-item-wrapper .courses-content-wrapper {
   padding: 14px 12px;
}

.courses-box1 .single-item-wrapper .courses-content-wrapper .item-title {
   font-size: 18px;
   /* line-height: 1.4; */
}

h3.sidebar-title:before {
   bottom: -12px;
}

h3.sidebar-title {
   margin-bottom: 23px;
}

.event-inner-wrapper .single-item .item-content p {
   margin-bottom: 20px;
}

.read-more-link {
   font-weight: bold;
   color: rgb(0, 172, 89);
}

.read-more-link:hover {
   color: rgb(86, 148, 199);
}

.read-more-link-white {
   font-weight: bold;
   color: #ffffff;
}

.read-more-link-white:hover {
   color: #ead24a;
}

.owl-controls .owl-prev {
   border-radius: 25px 25px 25px 25px !important;
}

.owl-controls .owl-prev:hover {
   background: rgb(86, 148, 199) !important;
   border: 1px solid rgb(86, 148, 199);
}
.owl-controls .owl-next {
   border-radius: 25px 25px 25px 25px !important;
}

.owl-controls .owl-next:hover {
   background: rgb(86, 148, 199) !important;
   border: 1px solid rgb(86, 148, 199);
}

.courses-box1 .single-item-wrapper .courses-img-wrapper a {
   background: rgb(86, 148, 199);
}

.event-inner-area .event-wrapper > li .event-calender-holder span {
   background: rgb(0, 172, 89);
}

.event-inner-area .event-wrapper > li .event-calender-holder {
   background: #ead24a;
}

.faq-items .faq-item .faq-body {
   background: rgb(0, 172, 89);
}

.img-radius {
   border-radius: 0 0 10rem 0;
}

.img-radius-2 {
   border-radius: 10rem 0 0 0;
}

.footer-area-top .featured-links > li ul li {
   margin-bottom: 1px;
   font-size: 14px;
   font-weight: 200;
}

.footer-area-top h3 {
   margin-bottom: 15px;
   font-size: 15px;
}

.footer-area-top .footer-social li a i {
   color: #f5f5f5;
   font-size: 20px;
   margin-top: 9px;
}

.footer-area-top .footer-social li a {
   width: 40px;
   height: 40px;
   border: 1px solid #f5f5f5;
}

.footer-area-top .corporate-address li i {
   color: #f5f5f5;
}

.footer-area-top .featured-links > li ul li:before {
   color: #f5f5f5;
}

.footer-area-top .corporate-address li {
   margin-bottom: 5px;
   font-size: 14px;
   font-weight: 200;
}

.courses1-area {
   background: #ffffff;
}

@media only screen and (max-width: 767px) {
   .footer-area-bottom p {
      margin-bottom: 3px !important;
   }
}

@media (min-width: 768px) and (max-width: 1199px) {
   .event-inner-area .event-wrapper > li .event-content-holder p {
      margin-bottom: 15px;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   .event-inner-area .event-wrapper > li .event-content-holder p {
      margin-bottom: 15px;
   }
}

.main-menu-area .logo-area {
   margin: 25px 0;
}

.main-menu-area .apply-btn-area {
   margin: 24px 0;
}

nav#desktop-nav ul li a {
   padding: 30px 8px;
}

nav#desktop-nav ul li > ul > li > a {
   /* padding: 10px 10px 10px 15px;
   display: block;
   color: #ffffff; */
   font-weight: 200;
}

@media (min-width: 992px) and (max-width: 1199px) {
   nav#desktop-nav ul li a {
      padding: 30px 7px;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   nav#desktop-nav ul li a {
      padding: 30px 6px;
   }
}

nav#desktop-nav ul {
   text-align: center;
}

nav#desktop-nav ul li {
   vertical-align: top !important;
}

nav#desktop-nav ul li .mega-menu-area {
   width: 628px;
}

nav#desktop-nav ul li .mega-menu-area > li {
   width: 290px;
}

nav#desktop-nav ul li .mega-menu-area > li .active {
   background-color: #008746;
}

.title-tagline {
   font-weight: 700;
   font-size: 50px;
   color: #333333;
   text-align: center;
}
@media (min-width: 991px) and (max-width: 1199px) {
   .title-tagline {
      font-size: 48px;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   .title-tagline {
      font-size: 45px;
   }
}
@media (min-width: 480px) and (max-width: 767px) {
   .title-tagline {
      font-size: 43px;
   }
}
@media (min-width: 321px) and (max-width: 479px) {
   .title-tagline {
      font-size: 40px;
   }
}
@media only screen and (max-width: 320px) {
   .title-tagline {
      font-size: 35px;
   }
}

.about-slider-area {
   padding: 80px 0;
}

@media (min-width: 992px) and (max-width: 1199px) {
   .about-slider-area {
      padding: 80px 0;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   .about-slider-area {
      padding: 70px 0;
   }
}
@media (min-width: 480px) and (max-width: 767px) {
   .about-slider-area {
      padding: 20px 0 55px;
   }
}
@media (min-width: 321px) and (max-width: 479px) {
   .about-slider-area {
      padding: 15px 0 45px;
   }
}
@media only screen and (max-width: 320px) {
   .about-slider-area {
      padding: 10px 0 35px;
   }
}

.about-page1-area {
   padding: 80px 0;
}

@media (min-width: 992px) and (max-width: 1199px) {
   .about-page1-area {
      padding: 80px 0;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   .about-page1-area {
      padding: 70px 0;
   }
}
@media (min-width: 480px) and (max-width: 767px) {
   .about-page1-area {
      padding: 20px 0 55px;
   }
}
@media (min-width: 321px) and (max-width: 479px) {
   .about-page1-area {
      padding: 15px 0 45px;
   }
}
@media only screen and (max-width: 320px) {
   .about-page1-area {
      padding: 10px 0 35px;
   }
}

.lecturers-page1-area {
   padding: 80px 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
   .lecturers-page1-area {
      padding: 80px 0;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   .lecturers-page1-area {
      padding: 70px 0;
   }
}
@media (min-width: 480px) and (max-width: 767px) {
   .lecturers-page1-area {
      padding: 20px 0 55px;
   }
}
@media (min-width: 321px) and (max-width: 479px) {
   .lecturers-page1-area {
      padding: 15px 0 45px;
   }
}
@media only screen and (max-width: 320px) {
   .lecturers-page1-area {
      padding: 10px 0 35px;
   }
}

.featured-box2:before {
   border-radius: 0.25rem !important;
   background: rgb(70, 121, 162);
}
.featured-box2:hover i {
   color: rgb(70, 121, 162);
}

.featured-box2 i {
   height: 50px;
   width: 50px;
   line-height: 50px;
   font-size: 23px;
}

.featured-box2 h3 {
   margin-top: 5px;
   font-size: 18px;
   margin-bottom: 5px;
}
.custom-featured-box2 {
   background: #eee6c8;
}

.bg-cream {
   background: #fffae7 !important;
}

.bg-custom-dark {
   background: #111b21 !important;
}

/* .footer-area-bottom {
   border-top: 1px dotted #ead24a;
} */

.custom-featured-box2 i {
   height: 35px;
   width: 35px;
   line-height: 35px;
   font-size: 20px;
}

.custom-featured-box2 h3 {
   margin-top: 5px;
   font-size: 15px;
   margin-bottom: 5px;
}

.courses-box1 .single-item-wrapper .courses-content-wrapper .courses-info li {
   font-size: 12px;
}

.students-say-area .owl-controls .owl-dots .active span {
   background: rgb(0, 172, 89);
}

.mean-container .mean-bar {
   background: transparent;
}

.mean-container a.meanmenu-reveal span {
   background: #ffffff;
}

.mean-container a.meanmenu-reveal {
   color: #ffffff;
}

.mean-container .mean-nav ul li a.mean-expand {
   background: rgba(255, 255, 255, 0);
}
.mean-container .mean-nav ul li a.mean-expand:hover {
   background: rgba(255, 255, 255, 0);
}

.mean-container .mean-nav ul li a:hover {
   color: #ffffff;
}

.mean-container .mean-nav ul li a {
   color: #ffffff;
}

.mean-container .mean-nav ul li li a {
   color: #ffffff;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
   font-weight: bolder;
}

.navbar-light .navbar-toggler {
   color: rgba(255, 255, 255, 0.55);
   border-color: rgba(255, 255, 255, 0.1);
}

.navbar-light .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.page-item.active .page-link {
   background-color: rgb(0, 172, 89);
   border-color: rgb(0, 172, 89);
}

.sidebar-search-btn-full {
   color: #333333;
   background: #ead24a;
   border: 2px solid #ead24a;
}

.sidebar-search-btn-full:hover {
   background: rgb(70, 121, 162);
   color: #ffffff;
}

.pagination-center li a {
   color: #333333;
   background: #ead24a;
}

.pagination-center li a:hover {
   color: #ffffff;
   background: rgb(70, 121, 162);
}
.pagination-center .active a {
   color: #ffffff;
   background: rgb(70, 121, 162);
}

.inner-page-banner-area {
   padding: 60px 0 70px;
}
@media (min-width: 992px) and (max-width: 1199px) {
   .inner-page-banner-area {
      padding: 60px 0 70px;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   .inner-page-banner-area {
      padding: 80px 0 90px;
   }
}
@media (min-width: 480px) and (max-width: 767px) {
   .inner-page-banner-area {
      padding: 70px 0 78px;
   }
}
@media (min-width: 321px) and (max-width: 479px) {
   .inner-page-banner-area {
      padding: 60px 0 66px;
   }
}
@media only screen and (max-width: 320px) {
   .inner-page-banner-area {
      padding: 50px 0 56px;
   }
}

.navbar-brand {
   font-size: 1.15rem;
}

.sidebar-latest-research-area ul li .latest-research-content h4 {
   background: rgb(0, 172, 89);
}

.overlay-default:before {
   background-color: rgba(0, 0, 0, 0.3);
}

.event-inner-wrapper .event-info-block li {
   margin-bottom: 8px;
   font-size: 15px;
   padding-left: 30px;
}
@media only screen and (max-width: 479px) {
   .event-inner-wrapper .event-info-block li {
      font-size: 14px;
   }
}
.event-inner-wrapper .event-info-block li:last-child {
   margin-bottom: 0;
}
.event-inner-wrapper .event-info-block li i {
   font-size: 18px;
   margin-right: 10px;
}

.event-details-inner .event-details-img .countdown-content .countdown-section:nth-child(odd) {
   background: rgb(0, 172, 89);
}

.event-details-inner .event-details-img .countdown-content .countdown-section h3 {
   color: #ffffff;
}
.event-details-inner .event-details-img .countdown-content .countdown-section:nth-child(odd) p {
   color: #ffffff;
}
.event-details-inner .event-details-img .countdown-content .countdown-section:nth-child(even) p {
   color: #ffffff;
}

.inner-product-details-left .tab-content {
   border: 0px solid #333333;
}

.footer-area-top .footer-social li a:hover i {
   color: rgb(70, 121, 162);
}

.research-box2 .research-img-holder .research-details a {
   background: rgb(0, 172, 89);
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
   color: #ead24a !important;
}

.contact-us-info1 ul > li {
   padding: 10px 0 8px 25px;
}

.contact-us-info1 ul > li i {
   top: 25px;
}

.news-comments li a {
   color: #7f7f7f;
}

a.link-prodi {
   color: #333333;
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
   font-size: 15px;
   font-weight: 500;
}
a.link-prodi:hover {
   color: #ead24a;
}

.course-details-inner ul.course-feature li:before {
   font-size: 18px;
}

.course-details-inner ul.course-feature li {
   padding-left: 25px;
}

.modal {
   top: 7%;
   height: 93%;
}

.course-details-inner .course-details-tab-area ul.course-details-tab-btn > li a {
   font-size: 18px;
   padding: 10px 15px;
}

.brand-area .brand-area-box a img {
   height: 130px;
   width: auto;
   margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.main-timeline {
   position: relative;
}

/* The actual timeline (the vertical ruler) */
.main-timeline::after {
   content: "";
   position: absolute;
   width: 6px;
   background-color: rgb(0, 172, 89);
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -3px;
}

/* Container around content */
.timeline {
   position: relative;
   background-color: inherit;
   width: 50%;
}

/* The circles on the timeline */
.timeline::after {
   content: "";
   position: absolute;
   width: 25px;
   height: 25px;
   right: -13px;
   background-color: rgb(70, 121, 162);
   border: 5px solid #ead24a;
   top: 15px;
   border-radius: 50%;
   z-index: 1;
}

/* Place the container to the left */
.left {
   padding: 0px 40px 20px 0px;
   left: 0;
}

/* Place the container to the right */
.right {
   padding: 0px 0px 20px 40px;
   left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
   content: " ";
   position: absolute;
   top: 18px;
   z-index: 1;
   right: 30px;
   border: medium solid white;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
   content: " ";
   position: absolute;
   top: 18px;
   z-index: 1;
   left: 30px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
   left: -12px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
   /* Place the timelime to the left */
   .main-timeline::after {
      left: 31px;
   }

   /* Full-width containers */
   .timeline {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
   }

   /* Make sure that all arrows are pointing leftwards */
   .timeline::before {
      left: 60px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
   }

   /* Make sure all circles are at the same spot */
   .left::after,
   .right::after {
      left: 18px;
   }

   .left::before {
      right: auto;
   }

   /* Make all right containers behave like the left ones */
   .right {
      left: 0%;
   }
}