
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body{
    font-family: 'Inter', sans-serif !important;
}
body h1, body h2, body h3, body h4, body a, body li, body div, body span, body label {
  font-family: 'Inter', sans-serif !important;
}
body h2 {
  font-size: 38px;
  font-weight: 600;
  color: #000;
}
body .little-h2 {
  font-size: 23px !important;
}

.mb-18  {
  margin-bottom: 18px !important;
}

.mb-14  {
  margin-bottom: 14px !important;
}

.mb-6  {
  margin-bottom: 5.5rem !important;
}

.mt-6  {
  margin-top: 5.5rem !important;
}

.nav-lang ul li a:hover{
  color: black !important;
}
.original_price span {
  text-decoration: line-through;
  color: red;
  font-size: 23px;
}
.original_price span:before,
.original_price span:after {
    content: "\00a0\00a0";
}
.word-break {
  word-break: break-all;
}

body p {
  font-size: 18px;
  color: #000;
  line-height: normal;
}

body .global-header {
  overflow: visible;
  background-color: #40BAD2;
  box-shadow: unset;
  border: 0;
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 200;
  overflow: visible;
}

body a, body a:hover{
    text-decoration: none !important;
}

div#cert_content iframe{
  border-radius: 10px;
  overflow: hidden;
}

#cert_content > div > div{
  background: #40bad2;
  border: none;
}

div#cert_content h1 {
  background: #40bad2;
}

.certification-section h4 {
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 3px;
}

.certification-section h1 {
  font-size: 38px;
  font-weight: 600;
  text-align: left;
  color: #fff;
}

#cert_img {
  padding-bottom: 38px;
}

.cert_img_add {
  padding-bottom: 38px;
}

footer a {
  color: #fff !important;
  line-height: normal !important;
}
a {
    text-decoration: none;
}
.navbar-brand:hover {
  color: #fff !important;
}
a:hover {
    color: inherit;
}
body #content {
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}

.main-header .container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.top-header .announce-btn-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 18px;
  line-height: 2rem;
  font-weight: normal;
  margin-right: 2rem;
  cursor: pointer;
}

body .global-header .main-header {
  position: unset;
  height: auto;
}
.main-header .container {
  padding: 10px 15px;
}
.mybg-primary a,.mybg-primary p,.mybg-primary h1,.mybg-primary h2,.mybg-primary h3,.mybg-primary li,.mybg-primary h5 {
  color: #fff;
}
.mybg-primary{
	background-color: #40bad2 !important;
	color: #fff;
}
.main-header nav.navbar.navbar-expand-md {
    padding: 20px 0;
}
button:focus, button:focus-visible {
    border: none;
    outline: 0 !important;
    box-shadow: none !important;
}
.main-header a.navbar-brand {
	background-color: #40bad2;
	padding: 8px 30px;
	color: #fff;
}
.main-header a.nav-link {
  color:white;
}
.main-header a.nav-link.btn {
	border: 2px solid white;
}
.main-header li.nav-item {
	margin-right: 12px;
}

 /* .home_blog_title {
  max-height: 130px !important;
  overflow: hidden !important;
} */


.main-header a.nav-link.btn.login-btn:hover {
  background-color: white !important;
  color: #40bad2 !important;
}

.main-header a.nav-link.btn.logo {
    padding: 5px 35px;
    color: white;
    border-radius: 10px;
}

.main-header a.nav-link.btn.reg.reg-btn:hover {
  background-color: #40bad2 !important;
  color: white  !important;
}

.main-header a.nav-link.btn.reg {
    background-color: white;
    color: #40bad2;
    padding: 5px 15px;
}
.main-header li.nav-item.lng1 span {
    padding: 0 .5rem;
}
.navbar ul li a.nav-link:hover, .nav-lang ul li a:hover {
    color: rgba(0,0,0,.7);
}
.navbar ul li a.nav-link, .nav-lang ul li a {
    color: white;
}
.nav-lang ul {
    list-style: none;
    display: flex;
    padding-left: 0;
    margin: 0;
}
.nav-lang ul li {
    color: rgba(0,0,0,.55);
}
.nav-lang ul li a {
    padding: 0.5rem;
    text-decoration: none;
}
.slider.responsive.home-index img{
	width: 100%;
	height: auto; /*0627*/
}
.slider.responsive.home-index ul li {
    list-style: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #40bad2;
    cursor: pointer;
}
.slider.responsive.home-index ul.slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.slider.responsive.home-index ul.slick-dots li button {
    font-size: 0;
    border: 0;
    background: 0;
}
.content {
    direction: ltr;
}
.slider.responsive.home-index ul li.slick-active {
    background-color: #40bad2;
}
.slider.responsive.home-index button {
    display: none !important;
}
.slider.responsive.home-index .slick-slide {
    height: auto;
}

.slider.responsive.home-index ul.slick-dots {
    margin-top: 20px;
}

.home-preheader-1, .home-preheader-2 {
    font-size: 24px;
}

.home-headline-2 {
    margin-top: 18px;
}

footer .logo {
    background-color: #004d80;
    padding: 15px 35px;
    width: auto;
    display: inline-block;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}
footer .logo:hover{
	text-decoration: none;
}
footer ul li {
    list-style-type: none;
}
footer ul li a {
    color: #fff;
}
footer label {
    font-weight: 600;
    font-style: normal;
    color: #fff;
}
body hr {
    border: 2px solid #40BAD2;
    margin: 38px 0; /*0613*/
    opacity: 1;
}
.courses-list .course-img img {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.courses-list .course {
    border: 3px solid #40bad2;
    border-radius: 5px;
    padding: 15px;
    cursor: pointer;
}
.courses-list .course-img .code {
    border: 3px solid #40bad2;
    padding: 3px 10px;
    text-align: center;
    border-radius: 5px;
    margin-right: auto;
    position: absolute;
    bottom: 35px;
    left: 0;
    background-color: #40BAD2;
    color: white;
    font-weight: 600;
}
.courses-list .course-img {
    border-bottom: 3px solid #40bad2;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: center;
}
.course .footer-section {
    border-top: 3px solid #40bad2;
    padding: 22px 0 0 0;
    margin-top: 33px;
    direction: ltr;
    padding-bottom: 7px;
}

.course .footer-section a {
    background-color: #40bad2;
    color: #fff;
    padding: 7px 22px;
    border-radius: 5px;
}

/*.course .footer-section span.price {
    font-weight: 600;
    float: right;
    font-size: 18px;
}*/
.course .footer-section span.price-section {
    float: right;
    font-weight: bold;
}

.course .footer-section span.price-section span.original_price {
    text-align: center;
    display: block;
}

.course .footer-section span.price-section span.currency {
    margin-right: 7px;
}
.courses-list .course h2.headline {
    font-size: 18px;
    line-height: 1;
}

.certification-section p{
	font-size: 18px;
}
section.cust-faq {
    padding-bottom: 3rem;
}
.accordion .card-header {
    padding: 0.1rem;
    background: transparent;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    border: 3px solid #40bad2;
}

div#cert_content .accordion .card-header {
  border: 3px solid #FFF;
}

section.cust-faq .accordion-item .accordion-body {
    margin-bottom: 15px;
}
.accordion .card {
    border: 0;
}
.accordion .card-header h2 button:focus {
    outline: none;
    box-shadow: none;
}
.accordion .btn-link.focus, .btn-link:focus{
	text-decoration: none;
}
.accordion .card-header h2 button:hover{
	text-decoration: none;
}
.artificial-intelligence .banner-content{
	padding: 15px;
	height: 440px;
  text-align: left;
  border-radius: 5px;
  border: solid transparent;
}
.artificial-intelligence .banner-content h2 {
    font-size: 16px;
}

div#cert_content a.anchor {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}

div#cert_content button.accordion-button {
  background: #40bad2;
  border: 0;
  text-align: center;
  justify-content: center;
  box-shadow: none;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
  padding: 6px;
}

div#cert_content button.accordion-button:after {
  display: none;
}

section.cust-faq button.accordion-button {
    background: none;
    border: 0;
    text-align: center;
    justify-content: center;
    box-shadow: none;
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: none;
    padding: 6px;
}
.accordion-item {
  background-color: #fff;
}
section.cust-faq .accordion-item {
    border: 0;
}

section.cust-faq button.accordion-button:after {
    display: none;
}
/* banner css */
.cust-banner-wrapper {
    padding: 0;
}
.cust-banner-btn a {
    background: #40bad2;
    color: #fff !important;
    padding: 10px 15px;
    display: inline-block;
    border-radius: 5px;
    margin-top: 15px;
}
.cust-banner-img img {
    max-width: 100%;
    width: 388px !important;
    margin-left: auto;
    border-radius: 5px;
    border: solid transparent;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
    .banner-flip-card {
      background-color: transparent;
      width: 100%;
      height: 200px;
      perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  .banner-flip-card:hover .banner-flip-card-front, 
  .container:hover .banner-flip-card-front, 
  .banner-content:hover .course-flip-card-front, 
  .myCourseConent:hover .course-flip-card-front, 
  .course-flip-card:hover .course-flip-card-front  {
      visibility: hidden;
  }
/* This container is needed to position the front and back side */
.banner-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.container:hover .banner-flip-card-inner,
.banner-flip-card:hover .banner-flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.banner-flip-card-front, .banner-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.banner-flip-card-front {
  color: black;
}

/* Style the back side */
.banner-flip-card-back {
  color: #000;
  transform: rotateY(180deg);
}

.banner-flip-card {
    height: 100%;
}
.banner-flip-card-front {
    position: relative !important;
}
.banner-flip-card-back {
    top: 0;
}

.banner-flip-card-back h2 {
  margin-top: 15px;
}

/* banner css end */

/* catalog 1 */

.course-flip-card {
    background-color: transparent;
    width:100%;
    height: 100%;
    perspective: 1000px;
    text-align: left;
}

.course-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.banner-content:hover .course-flip-card-inner,
.myCourseConent:hover .course-flip-card-inner,
.course-flip-card:hover .course-flip-card-inner {
    transform: rotateY(180deg);
}

.course-flip-card-front, .course-flip-card-back {
    position: absolute;
    width: 100%;
    height: 20rem;
    overflow: visible;
    text-overflow: ellipsis;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.myCourseConent > div.content > div > div > div.course-flip-card-front,
.myCourseConent > div.content > div > div > div.course-flip-card-back {
  height: 12rem;
}

.course-flip-card-front {
    position: relative;
}
.course-flip-card-back {
    position: absolute;
    top: 0;
}
.course-flip-card-front {
    color: black;
}

.course-flip-card-back {
    transform: rotateY(180deg);
}

div.inner-slide-cont-box > div > div > div > p {
    font-size: 13px;
}

section.cust-pursue-career h2,.courses-list h2.heading {
    margin-bottom: 15px;
} 

.certification-section img {
    max-width: 100%;
}
@media (min-width:768px) {
  .certification-section img {
    max-width: 488px;
  }
}

#certification-button-div {
    float: right;
    /* margin-top: 38px; */
    width: 64%;
}

#certification-button {
    line-height: 1.5;
    cursor: pointer;
    padding: 5px 38px;
    border-radius: 10px;
    font-size: 1rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

a#certification-button:hover {
  background-color: white !important;
  color: #40bad2 !important;
}

div#main-slider-data img {
  border-radius: 5%;
}

@media screen and (max-width:991px){
    .main-header .nav-lang {
      margin-top: -10px;
  }
  /* .certification-section .tst-left {
      margin-top: 40px;
  } */
}

@media screen and (max-width:1024px){
    .courses-list .course {
        margin-top: 30px;
    }
    .courses-list .col-md-3:first-child .course {
        margin-top: 0;
    }
}
@media (min-width:768px)
{
    body .container {
      padding-left: 15px;
      padding-right: 15px;
    }
}
@media screen and (min-width:768px) and (max-width:1023px){
    .courses-list .col-md-3 {
        flex: 0 0 50%;
        width: 50%;
    }
    .courses-list .course {
        margin-bottom: 30px;
    }
    .courses-list .course {
        margin-top: 0px;
    }
}
hr.double-hr {
    border: 8px solid #40BAD2;
}
.course-details .cust-banner-img img {
    width: 350px !important;
}
.course-details .code span {
    border: 2px solid #40bad2;
    color: #40bad2;
    border-radius: 6px;
    padding: 7px 35px;
    text-transform: uppercase;
    font-weight: 600;
}
.course-about {
    border: 2px solid #40bad2;
    padding: 15px 20px;
    border-radius: 10px;
}
.course-about p:last-child {
    margin: 0;
}

ul{
    list-style-type: none;
    padding: 0;
    margin:0;
}
.course-details .code {
  margin-bottom: 40px;
}
.course-content-section .course-offering {
    border: 2px solid #40bad2;
    padding: 15px;
    margin-top: 38px;
    border-radius: 10px;
}
.course-content-section .course-offering .logo, .course-content-section .course-offering .content {
    display: inline-block;
    vertical-align: top;
    line-height: 1.2rem;
    font-size: 18px;
}
.course-content-section .course-offering .logo img {
    width: 50px;
}
.course-content-section .course-offering .logo {margin-right: 15px;}
.course-content-section .course-offering li {
 margin-top: 18px;

}
.course-content-section .course-offering .content li {
    margin: 0;
}
.course-content-section .course-offering .content label {
    font-weight: bold;
    font-style: normal;
}
.course-content-section .course-offering ul {
  padding: 0;
  margin: 0;
}
.course-content-section .course-offering h2 {
    margin-bottom: 20px;
    font-size: 28px;
}
.program-accordion .accordion-item {
    border-right: 0;
    border-left: 0;
}
.program-accordion .accordion-button:not(.collapsed) {
    background-color: unset;
    color: #000;
    font-weight: bold;
}
.program-accordion .accordion-button {
    font-weight: bold;
    background: unset;
    box-shadow: unset;
    font-style: normal;
    font-family: 'Inter', sans-serif !important;
}
.program-accordion .accordion-button:hover {
  background: unset;
}
@media screen and (max-width:768px){
    .course-details .code {
        margin-bottom: 30px;
    }
    .program-accordion {
        margin-bottom: 30px;
    }
}

@media (max-width:991px)
{
    .course-content-section .course-offering .logo, .course-content-section .course-offering .content{
        display: block;
    }
}
@media (max-width:767px)
{
    .cust-banner-btn {
        margin-bottom: 30px;
    }
    body #login-and-registration-container .my-checkbox-terms_of_service label{
        vertical-align:top;
        width: 84%;
    }
    body .login-register-content {
      padding: 0 15px;
    }
    body #login-and-registration-container{
        padding: 20px 20px;
    }
    body #login-and-registration-container .reg-btn a.action{
        margin-bottom: 20px;
    }
    body .show-option-fields p::before, body .show-option-fields p::after{
        width: 16%;
    }
    .main-header li.nav-item a {
      padding-bottom: 0;
      padding-top: 0;
    }
    .main-header li.nav-item {
      margin-top: 12px;
    }
    .main-header .nav-lang {
      margin-top: 10px !important;
    }
    .main-header .navbar-toggler,.main-header .navbar-toggler:hover {
      background: #40bad2;
      box-shadow: unset;
    }
    .main-header .navbar-toggler span {
      padding-top: 4px;
    }

}

#videoModal iframe{
    height: 540px;
    width: 100%;
}
/*
.course-content-section .v-section {
  border: 2px solid #40bad2;
  border-radius: 10px;
}
.course-content-section .v-section img {
  width: 100%;
  border-radius: 10px;
}
.course-content-section .v-section .hero {
  position: relative;
}
.course-content-section .play-button-outer {
  margin: 25% auto;
  width: 70px;
  height: 70px;
  background-color: #000000ab;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.course-content-section .play-button {
  margin: 0 auto;
  top: 25%;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1em 0 1em 1.3em;
  border-color: transparent transparent transparent #fff;
  opacity: .75;
  left: 4px;
}
*/

.course-details .v-section img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 38px !important;
}
.course-details .v-section .hero {
  position: relative;
}
.course-details .play-button-outer {
  margin: 20% auto;
  width: 70px;
  height: 70px;
  background-color: #000000ab;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.course-details .play-button {
  margin: 0 auto;
  top: 25%;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1em 0 1em 1.3em;
  border-color: transparent transparent transparent #fff;
  opacity: .75;
  left: 4px;
}

.main-header .nav-lang .active a {
  color: #40bad2;
}

#login-and-registration-container{
  max-width: 800px;
  margin: 0 auto;
  border: 2px solid #40bad2;
  padding: 50px 80px;
  border-radius: 10px;
}
#login-and-registration-container .form-field label{
    display: block;
    margin-bottom: 15px;
    font-weight: normal;
    position: unset;
    padding-left: 0;
}
#login-and-registration-container .form-field input{
  width: 100%;
  padding: 7px 10px;
  border: 2px solid #ddd;
  height: auto;
}
#login-and-registration-container .action{
  margin: 0 auto;
  width: 130px;
  display: block;
  background-color: #40bad2;
  border: 1px solid #40bad2;
  color: #fff;
  padding: 7px 0;
  border-radius: 10px;
  box-shadow: unset;
}
#login-email-desc {
  display: none;
}

#login-and-registration-container  .login-help.field-link {
  display: none;
}
#login-and-registration-container #password-reset-email {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 1px solid #ddd;
  padding: 7px 12px;
}
#login-and-registration-container .reset-help.field-link {
  display: none;
}
#login-and-registration-container #password-reset-email-validation-error {
  margin: 10px 0;
  display: block;
  padding: 0;
}
#login-and-registration-container #password-reset-email-validation-error ul {
  padding: 0;
  margin: 0;
}
#login-and-registration-container .action.action-primary.action-update.js-reset {
  width: 200px;
  margin-top: 30px;
}
#login-and-registration-container {
  margin-top: 60px;
}
/*#password-reset-form  #password-reset {
  border: 2px solid #40bad2;
  border-radius: 10px;
  max-width: 800px;
  padding: 30px 40px;
  margin: 0 auto;
  margin-top: 30px;
}*/
#password-reset-form .section-title, #password-reset-form .action-label {
  display: none;
}
#password-reset-form .js-form-errors.status.submission-error {
  display: none;
}
#login-and-registration-container .form-field {
  margin-bottom: 30px;
}

#login-and-registration-container .submission-error {
 margin-bottom: 20px;
    color: red;
}
#password-reset-form {
  margin-top: 50px;
}

#login-and-registration-container .register-form .optional-fields, 
#login-and-registration-container .register-form .checkbox-optional_fields_toggle {
  display: none;
}
#login-and-registration-container #register-terms_of_service 
{
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
#login-and-registration-container .my-checkbox-terms_of_service label
{
    display: inline-block;
    margin-bottom: 15px;
    width: 90%;
    line-height: 1;
}

#login-and-registration-container .checkbox-terms_of_service .error {
  width: auto;
  display: inline;
}

/* div#home_blog_data {
    position: relative;
    height: 520px;
} */

/* div#home_blog_data .hm_blog {
    position: absolute;
    top: 0;
    bottom: 0;
} */

#login-and-registration-container .checkbox-terms_of_service label{
    display: inline;
}
#login-and-registration-container .checkbox-terms_of_service {
  margin-top: 30px;
}
#login-and-registration-container .form-field .tip.tip-input {
  margin-top: 10px;
  display: block;
}

.show-option-fields {
  width: 100%;
  padding: 40px 0;
  max-width: 500px;
  margin: 0 auto;
}

.show-option-fields p {
  display: flex;
  align-items: center;
  color: #212529;
}

.show-option-fields p:before,
.show-option-fields p:after {
  content: "";
  width: 25%;
  height: 2px;
  background: #212529;
}

.show-option-fields p:before{
  margin: 0 20px 0 0;
}

.show-option-fields p:after{
  margin: 0 0 0 20px;
}
.other-text{
    font-size: 16px;
    line-height: 1.3;
    color: #212529;
}
.other-text a{
    color: #40bad2;  
}

#login-and-registration-container .reg-btn {
  text-align: center;
  margin-top: 40px;
}
#login-and-registration-container .reg-btn .action {
  display: inline-block;
  margin: 0 10px;
  width: 200px;
  font-size: 16px;
  box-shadow: unset;
}
#login-and-registration-container .reg-btn a.action {
  background-color: transparent;
  color: #40bad2;
  border: 2px solid;
  padding: 11px 0;
    font-size: 18px;
}
.form-group.country label {
  font-weight: normal;
  margin-bottom: 20px;
}
.form-group.country .tip.tip-input {
  margin-top: 10px;
  display: block;
}
#main-footer ul li img {
  width: 80px;
  margin-top: 20px;
}
body .program-accordion .accordion-button {
  text-shadow: unset;
}
#videoModal{
    width: 100%;
    left: 0;
    right: 0;
    background-color: unset;
}

#videoModal .modal-header {
    padding-bottom: 0;
    margin-top: 30px;
}
#videoModal .modal-header button#modalclosebtn, #videoModal .modal-header button#modalclosebtn:hover {
    box-shadow: none;
    background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
}
.modal-backdrop.fade.show {
    display: none;
}


/* @media screen and (min-width:320px) and (max-width:445px)
{
    div#home_blog_data {
        position: relative;
        height: 530px;
    }
} */

div#homepage_course_list .footer-section a {
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
}

/* div#homepage_course_list hr:last-child {
    display: none;
} */

@media (min-width: 768px) {
  .custom-col-sm-8 {
      flex: 0 0 auto;
      width: 66.66666667%;
  }
}

@media (min-width: 768px) {
  .custom-col-sm-4 {
      flex: 0 0 auto;
      width: 33.33333333%;
  }
}