* {
  font-family: 'Poppins', sans-serif;

}

@font-face {
  font-family: 'Sequel100';
  src: url('assets/fonts/Sequel100Black-75.ttf');
  font-display: swap;
}



body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* UKRAINIAN WOMEN RETURNERS */
.banner-ua {
  background-image: linear-gradient(333deg, rgba(255, 255, 255, 1) 49%, rgba(255, 255, 255, 0) 49%),
    linear-gradient(45deg, rgba(0, 87, 183, 1) 61%, rgba(255, 255, 255, 0) 61%);
}

@media (max-width: 1200px) {
  .banner-ua {
    background-image: linear-gradient(190deg, rgba(255, 255, 255, 1) 49%, rgba(255, 255, 255, 0) 49%),
      linear-gradient(20deg, rgba(0, 87, 183, 1) 61%, rgba(255, 255, 255, 0) 61%);
  }
}

.banner-ua-text {
  padding-top: 15vh;
  margin-left: 1vw;
  font-size: 8vh;
  color: #ffd700;
}

@media (max-width: 1200px) {
  .banner-ua-text {
    color: black;
    padding-bottom: 0;
    margin-left: 3vw;
    padding-top: 0;

    font-size: calc(2.275rem + 2.5vw) !important;
  }
}

.main-text-ua {
  font-size: 2.2rem !important;
}

@media (max-width: 1200px) {
  .main-text-ua {
    margin-top: 20vh;
    margin-right: 2vw;
    margin-bottom: 20vh;
    font-size: calc(1.275rem + 1.5vw) !important;
    color: #ffd700;
  }
}

/* END */

/* TEST AREA - PROCEED WITH CAUTION, HARDHAT NOT REQUIRED */

.title {
  font-family: 'Sequel100';
  font-size: 4rem !important;
}

.main-text {
  font-size: 2.2rem !important;
}

@media (max-width: 1200px) {
  .main-text {
    margin-top: 20vh;
    margin-right: 2vw;
    margin-bottom: 20vh;
    font-size: calc(1.275rem + 1.5vw) !important;
    color: #D2FA32;
  }

  .title {
    font-size: 3rem !important;
  }
}

.slider-text {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

@media (max-width: 1200px) {
  .slider-text {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
    font-size: calc(1.175rem + 1.25vw) !important;
  }
}

/* cubes with rounded corners */


.black-cube-rounded {
  border-radius: 5px;
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: black;
  transition: transform 0.5s;
  /* Animation */
}

.black-cube-rounded:hover {
  transform: scale(1.3);
}

.purple-cube-rounded {
  border-radius: 5px;
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: #7d33fa;
  transition: transform 0.5s;
  /* Animation */
}

.purple-cube-rounded:hover {
  transform: scale(1.7);
}

.green-cube-rounded {
  border-radius: 5px;
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: #d2fa32;
  transition: transform 0.5s;
  /* Animation */
}

.green-cube-rounded:hover {
  transform: scale(1.7);
}

.pink-cube-rounded {
  border-radius: 5px;
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: #e60073;
  transition: transform 0.5s;
  /* Animation */
}

.pink-cube-rounded:hover {
  transform: scale(1.7);
}

.orange-cube-rounded {
  border-radius: 5px;
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: #fcbe00;
  transition: transform 0.5s;
  /* Animation */
}

.orange-cube-rounded:hover {
  transform: scale(1.7);
}

/* regular cubes */

.black-cube {
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: black;
  transition: transform 0.5s;
  /* Animation */
}

.black-cube:hover {
  transform: scale(1.3);
}

.purple-cube {
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: #7d33fa;
  transition: transform 0.5s;
  /* Animation */
}

.purple-cube:hover {
  transform: scale(1.7);
}

.green-cube {
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: #d2fa32;
  transition: transform 0.5s;
  /* Animation */
}

.green-cube:hover {
  transform: scale(1.7);
}

.pink-cube {
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: #e60073;
  transition: transform 0.5s;
  /* Animation */
}

.pink-cube:hover {
  transform: scale(1.7);
}

.orange-cube {
  width: 3%;
  padding-bottom: 3%;
  position: relative;
  background: #fcbe00;
  transition: transform 0.5s;
  /* Animation */
}

.orange-cube:hover {
  transform: scale(1.7);
}

/* long rectangles */

.grey-rectangle {
  width: 17%;
  padding-bottom: 1.5%;
  background: #F1F1F1;
}



.black-rectangle {
  width: 17%;
  padding-bottom: 1.5%;
  background: black;
}

.pink-rectangle {
  width: 17%;
  padding-bottom: 1.5%;
  background: #e60073;
  transition: transform 0.5s;
  /* Animation */
}

.pink-rectangle:hover {
  transform: scaleY(1.65);
}

.purple-rectangle {
  width: 17%;
  padding-bottom: 1.5%;
  background: #7d33fa;
  transition: transform 0.5s;
  /* Animation */
}

.purple-rectangle:hover {
  transform: scaleY(1.65);
}

.green-rectangle {
  width: 17%;
  padding-bottom: 1.5%;
  background: #d2fa32;
  transition: transform 0.5s;
  /* Animation */
}

.green-rectangle:hover {
  transform: scaleY(1.65);
}

.orange-rectangle {
  width: 17%;
  padding-bottom: 1.5%;
  background: #fcbe00;
  transition: transform 0.5s;
  /* Animation */
}

.orange-rectangle:hover {
  transform: scaleY(1.65);
}

/* long rectangles - screen size change */

@media (max-width: 1360px) {

  .orange-rectangle,
  .black-rectangle,
  .purple-rectangle,
  .pink-rectangle,
  .green-rectangle,
  .grey-rectangle {
    width: 10%;
    padding-bottom: 3%;

  }

  .orange-rectangle:active,
  .black-rectangle:active,
  .purple-rectangle:active,
  .pink-rectangle:active,
  .green-rectangle:active,
  .grey-rectangle:active {
    transform: scaleY(1.65);
  }
}

/* SEQUEL FONTS */
.sequel-font-reg {
  font-family: 'Sequel100';
}

.sequel-font {
  font-family: 'Sequel100';
}

.sequel-font-footer {
  font-family: 'Sequel100';
}

@media (max-width: 1200px) {
  .sequel-font-footer {
    font-size: calc(1.0rem + 1.0vw) !important;
  }
}

@media (max-width: 1200px) {
  .sequel-font {
    font-size: calc(1.8rem + 2.0vw) !important;
  }
}

.sequel-font-index {
  font-family: 'Sequel100';
}

@media (max-width: 1200px) {
  .sequel-font-index {
    font-size: calc(2.275rem + 2.5vw) !important;
  }
}


/*text for table in the commercial training page */
.commercialTableText {
  font-size: 1.2rem !important;
}

/*HEADER CSS*/

#dropdown1,
#dropdown2,
#dropdown3,
#dropdown4,
#single,
#single2 {
  transition: background 0.3s;
  transform: skew(-20deg);
}

li.nav-item:hover {
  background: #d2fa32;
}

@media screen and (min-width: 1500px) {
  .navbar-size {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

.footer-links:hover {
  background: linear-gradient(90deg, rgba(125, 51, 250, 0.8578781854538691) 23%, rgba(220, 200, 255, 0) 80%);
  transition: background 0.2s;

}

a.text-white:hover {
  color: #000000 !important;
  text-decoration: none;

}

.menu {
  transform: skew(20deg);
  /* UNSKEW */
}

.options {
  transform: skew(20deg) translate(25px, 0px);
}

.options2 {
  transform: skew(20deg) translate(0px, 0px);
}

.container {
  max-width: 960px;
}

/*Banner - black*/
.banner {
  background: rgb(129, 129, 129);
  background: linear-gradient(180deg, rgba(129, 129, 129, 1) 0%, rgba(0, 0, 0, 1) 100%);
  color: white;
}

.banner-wr {
  background-image: linear-gradient(333deg, rgba(255, 255, 255, 1) 49%, rgba(255, 255, 255, 0) 49%),
    linear-gradient(45deg, rgba(127, 17, 224, 1) 61%, rgba(255, 255, 255, 0) 61%);
}

@media (max-width: 1200px) {
  .banner-wr {
    background-image: linear-gradient(190deg, rgba(255, 255, 255, 1) 49%, rgba(255, 255, 255, 0) 49%),
      linear-gradient(20deg, rgba(127, 17, 224, 1) 61%, rgba(255, 255, 255, 0) 61%);
  }
}





.banner-wr-text {
  padding-top: 15vh;
  margin-left: 1vw;
  font-size: 8vh;
  color: #D2FA32;
}

@media (max-width: 1200px) {
  .banner-wr-text {
    color: black;
    padding-bottom: 0;
    margin-left: 3vw;
    padding-top: 0;

    font-size: calc(2.275rem + 2.5vw) !important;
  }
}

.banner>a {

  color: white;
}

/* UA colours for sliders */

#yellow-slider-ua {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 17vh;
  right: -50%;

  background: #ffd700;
  box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
  border-radius: 44px 0px 0px 44px;
  color: #0057B7;

  transition: right 0.8s ease-in-out;
  -o-transition: right 0.8s ease-in-out;
  -ms-transition: right 0.8s ease-in-out;
  -moz-transition: right 0.8s ease-in-out;
  -webkit-transition: right 0.8s ease-in-out;
}


#yellow-slider-ua:active {
  right: 100%;
}


@media only screen and (max-device-width: 480px) {
  #yellow-slider-ua:active {
    right: 5%;
  }
}

@media (min-width:641px) {
  #yellow-slider-ua:hover {
    right: 100%;
  }
}

#blue-slider-ua {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 17vh;
  right: -50%;

  background: #0057B7;
  box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
  border-radius: 44px 0px 0px 44px;
  color: #ffd700;

  transition: right 0.8s ease-in-out;
  -o-transition: right 0.8s ease-in-out;
  -ms-transition: right 0.8s ease-in-out;
  -moz-transition: right 0.8s ease-in-out;
  -webkit-transition: right 0.8s ease-in-out;
}


#blue-slider-ua:active {
  right: 100%;
}


@media only screen and (max-device-width: 480px) {
  #blue-slider-ua:active {
    right: 5%;
  }
}

@media (min-width:641px) {
  #blue-slider-ua:hover {
    right: 100%;
  }
}

/* end */

#yellow-slider {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 17vh;
  right: -50%;

  background: #FCBE00;
  box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
  border-radius: 44px 0px 0px 44px;
  color: black;

  transition: right 0.8s ease-in-out;
  -o-transition: right 0.8s ease-in-out;
  -ms-transition: right 0.8s ease-in-out;
  -moz-transition: right 0.8s ease-in-out;
  -webkit-transition: right 0.8s ease-in-out;
}


#yellow-slider:active {
  right: 100%;
}


@media only screen and (max-device-width: 480px) {
  #yellow-slider:active {
    right: 5%;
  }
}

@media (min-width:641px) {
  #yellow-slider:hover {
    right: 100%;
  }
}


#pink-slider {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 17vh;
  right: -50%;

  background: #E60073;
  box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
  border-radius: 44px 0px 0px 44px;
  color: black;

  transition: right 0.8s ease-in-out;
  -o-transition: right 0.8s ease-in-out;
  -ms-transition: right 0.8s ease-in-out;
  -moz-transition: right 0.8s ease-in-out;
  -webkit-transition: right 0.8s ease-in-out;
}



#pink-slider:active {
  right: 100%;
}


@media only screen and (max-device-width: 480px) {
  #pink-slider:active {
    right: 5%;
  }
}

@media (min-width:641px) {
  #pink-slider:hover {
    right: 100%;
  }
}

#purple-slider {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 17vh;
  right: -50%;

  background: #7D33FA;
  box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
  border-radius: 44px 0px 0px 44px;
  color: black;

  transition: right 0.8s ease-in-out;
  -o-transition: right 0.8s ease-in-out;
  -ms-transition: right 0.8s ease-in-out;
  -moz-transition: right 0.8s ease-in-out;
  -webkit-transition: right 0.8s ease-in-out;
}


#purple-slider:active {
  right: 100%;
}


@media only screen and (max-device-width: 480px) {
  #purple-slider:active {
    right: 5%;
  }
}

@media (min-width:641px) {
  #purple-slider:hover {
    right: 100%;
  }
}

#green-slider {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 17vh;
  right: -50%;

  background: #D2FA32;
  box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
  border-radius: 44px 0px 0px 44px;
  color: black;

  transition: right 0.8s ease-in-out;
  -o-transition: right 0.8s ease-in-out;
  -ms-transition: right 0.8s ease-in-out;
  -moz-transition: right 0.8s ease-in-out;
  -webkit-transition: right 0.8s ease-in-out;
}


#green-slider:active {
  right: 100%;
}


@media only screen and (max-device-width: 480px) {
  #green-slider:active {
    right: 5%;
  }
}

@media (min-width:641px) {
  #green-slider:hover {
    right: 100%;
  }
}

#black-slider {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 17vh;
  right: -50%;

  background: #000000;
  box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
  border-radius: 44px 0px 0px 44px;
  color: #D2FA32;

  transition: right 0.8s ease-in-out;
  -o-transition: right 0.8s ease-in-out;
  -ms-transition: right 0.8s ease-in-out;
  -moz-transition: right 0.8s ease-in-out;
  -webkit-transition: right 0.8s ease-in-out;
}


#black-slider:active {
  right: 100%;
}


@media only screen and (max-device-width: 480px) {
  #black-slider:active {
    right: 5%;
  }
}

@media (min-width:641px) {
  #black-slider:hover {
    right: 100%;
  }
}


.dates {
  padding-left: 5vw;
}

/* Rounded edges */

.rounded-borders {
  border-radius: 44px 44px 44px 44px;
}

/* Rounded corner shadow */

.multiple-shadows-rounded {
  box-shadow: 10px 10px 5px 0px rgba(231, 232, 229, 1), -10px -10px 5px 0px rgba(255, 255, 255, 1);
}

/* images visible and not visible on mobile vs desktop */

.visible-mobile {
  display: none !important;
}

@media (max-width: 489px) {
  .visible-mobile {
    display: inline !important;
  }

  .hidden-mobile {
    display: none !important;
  }
}

/* CARDS */

.black-card {
  background-color: #000000;
  border-radius: 43px;
  color: white;
}

.pink-card {

  background: #E60073;
  border-radius: 43px;
  color: white;
}

.yellow-card {
  background: #FCBE00;
  border-radius: 43px;
  color: black;
}

.green-card {
  background: #D2FA32;
  border-radius: 43px;
  color: black;
}

.purple-card {
  background: #7D33FA;
  border-radius: 43px;
  color: white;
}


/* UKRAINIAN COLOURS */
.ua-yellow-card {
  background: #ffd700;
  border-radius: 43px;
  color: black;
}

.ua-blue-card {
  background: #0057B7;
  border-radius: 43px;
  color: #ffd700;
}

/* END */

/* FLIP CARDS */

/* 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 */
.flip-card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card:active .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.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) */
.flip-card-front {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7D33FA;
}

/* Style the back side */
.flip-card-back {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #D2FA32;
  transform: rotateY(180deg);
}

/* end */

/* FLIP CARDS UKRAINE */

/* 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 */
.flip-card-ua {
  width: 300px;
  height: 200px;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner-ua {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-ua:hover .flip-card-inner-ua {
  transform: rotateY(180deg);
}

.flip-card-ua:active .flip-card-inner-ua {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front-ua,
.flip-card-back-ua {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front-ua {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffd700;
}

/* Style the back side */
.flip-card-back-ua {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0057B7;
  transform: rotateY(180deg);
}

/* end */

/* FLIP CARDS - BIGGER AND WITH IMAGES AS FRONT */
.no-select {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* 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 */
.flip-card-big {
  width: 600px;
  height: 400px;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

div.flip-card-front-big img {
  object-fit: cover;
}

/* This container is needed to position the front and back side */
.flip-card-inner-big {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-big:hover .flip-card-inner-big {
  transform: rotateY(180deg);
}

.flip-card-big:active .flip-card-inner-big {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front-big,
.flip-card-back-big {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
/* .flip-card-front-big {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7D33FA;
} */

/* Style the back side */
.flip-card-back-big {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #D2FA32;
  transform: rotateY(180deg);
  object-fit: cover;
}


/* FORM CSS */

.form-effects {
  background: #FFFFFF;
  box-shadow: inset 5px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px #D2FA32;
  border-radius: 41px;
}

/* LIST HOVER EFFECTS */

.list-effect {
  background-color: #ffffff;
}

.list-effect:hover {
  background-color: #e60073;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

.list-effect-green {
  background-color: #ffffff;
}

.list-effect-green:hover {
  background-color: #D2FA32;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

.list-effect-purple {
  background-color: #ffffff;
}

.list-effect-purple:hover {
  background-color: #7D33FA;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

.list-effect-orange {
  background-color: #ffffff;
}

.list-effect-orange:hover {
  background-color: #FCBE00;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

/* SLIDES */
.pink-slide {
  background: #FFFFFF;
  box-shadow: 4px 4px 4px #E60073;
  border-radius: 41px;
}

.yellow-slide {
  background: #FFFFFF;
  box-shadow: 4px 4px 4px #FCBE00;
  border-radius: 41px;
}

.purple-slide {
  background: #FFFFFF;
  box-shadow: 4px 4px 4px #7D33FA;
  border-radius: 41px;
}

.green-slide {
  background: #FFFFFF;
  box-shadow: 4px 4px 4px #d2fa32;
  border-radius: 41px;
}

/* TEXT HIGHLIGHT */
.black-highlight {
  background-color: black;
  padding: 1%;
}


.green-highlight {
  background: url(assets/img/brushstroke-smaller.svg);
  /* padding: 0.5%; */
  background-position: left;
  background-repeat: repeat-x;
  background-size: cover;
  /* background-color: #D2FA32; */
}

@media (max-width: 1200px) {
  .green-highlight {
    background-image: none;
    padding: 0.5%;
    background-color: transparent;
  }
}

.purple-highlight {
  background: url(assets/img/brushstroke-smaller-purple.svg);
  /* padding: 0.5%; */
  background-position: left;
  background-repeat: repeat-x;
  background-size: cover;
  /* background-color: #D2FA32; */
}

@media (max-width: 1200px) {
  .purple-highlight {
    background-image: none;
    padding: 0.5%;
    background-color: transparent;
  }
}


.ua-highlight {
  background: url(assets/img/brushstroke-smaller-ua.svg);
  /* padding: 0.5%; */
  background-position: left;
  background-repeat: repeat-x;
  background-size: cover;
  /* background-color: #D2FA32; */
}

@media (max-width: 1200px) {
  .ua-highlight {
    background-image: none;
    padding: 0.5%;
    background-color: transparent;
  }
}


/* COUNTING NUMBER FORMATTING */

.purple-text {
  color: #7D33FA;
}

.fig-number {
  color: #7D33FA;
}

/*LIST ITEM ICONS AND STYLING*/
ul.no_bullet {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

i {
  float: left;
}

i~span {
  display: block;
  padding-left: 1em;
  padding-top: 2px;
}


.li-icon-cd {
  background: url('assets/brand/48x48 Code Division Favicon.svg') no-repeat left top;
  height: 54px;
  padding-top: 1vh;
}


li.h2 {
  margin: 20px;
}

.span-text {
  padding-left: 5vw;
}



@media (max-width: 992px) {
  .span-text {
    padding-left: 15vw;
  }
}

@media (max-width: 992px) {
  .bgrd-black {
    background-color: #212427;
  }
}

/*BUTTONS*/


/*Button: green*/

/*Button: pink*/
.btn-pink {
  color: white;
  background-color: #e60073;

}

.btn-pink:hover {
  color: white;
  background-color: #79003d;

}

/*Button: orange*/
.btn-orange {
  color: black;
  background-color: #fcbe00;

}

.btn-orange:hover {
  color: black;
  background-color: #e28e00;

}

.btn-green {
  color: #000000;
  background-color: #d2fa32;

}

.btn-green:hover {
  color: #000000;
  background-color: #88aa00;

}

/*Button: purple*/

.btn-purple {
  display: inline-block;
  color: #000000;
  background-color: #dcc8ff;

}

.btn-purple:hover {
  display: inline-block;
  color: #000000;
  background-color: #7d33fa;

}

.btn-black {
  display: inline-block;
  color: #d2fa32 !important;
  background-color: black;
}

.btn-black:hover {
  display: inline-block;
  color: white;
  background-color: black;
}

.btn-ukraine {
  display: inline-block;
  color: #ffd700;
  background-color: #0057B7;
}

.btn-ukraine:hover {
  display: inline-block;
  color: #0057B7;
  background-color: #ffd700;
}

.btn-yellow {
  display: inline-block;
  color: #0057B7;
  background-color: #ffd700;
}

.btn-yellow:hover {
  display: inline-block;
  color: #ffd700;
  background-color: #0057B7;
}



/* INSET BUTTONS */

.btn-inset {
  display: inline-block;
  color: #000000;
  box-shadow: 10px 10px 15px 0px rgba(144, 188, 57, 1), -10px -10px 15px 0px rgba(230, 255, 129, 1);
  border: 0.05px solid #CCF527;
  /* border-radius: 31px; */

}

.btn-inset:hover {
  display: inline-block;
  color: #000000;
  box-shadow: -11px -14px 15px 0px rgba(230, 255, 129, 1) inset, 11px 14px 15px 0px rgba(144, 188, 57, 1) inset;
  border: 0.05px solid #CCF527;
  /* border-radius: 31px; */
}


/*
/*SEPARATORS*/

/*green separator*/

.green-separator {
  border-bottom-width: 12px;
  border-bottom-style: solid;
  border-bottom-color: #d2fa32;
}


/*purple separator*/

.purple-separator {
  border-bottom-width: 12px;
  border-bottom-style: solid;
  border-bottom-color: #dcc8ff;
}

.blue-separator {
  border-bottom-width: 40px;
  border-bottom-style: solid;
  border-bottom-color: #0057B7;
}

.yellow-separator {
  border-bottom-width: 40px;
  border-bottom-style: solid;
  border-bottom-color: #ffd700;
}



/*emphasis*/

.green-emphasis {
  color: #C7F900;
  text-decoration: none;

}

.purple-emphasis {
  color: #7d33fa;
  text-decoration: none;

}

.black-emphasis {
  color: black;

  text-decoration: none;
}

.pink-emphasis {
  color: #e60073;
  text-decoration: none;

}

.orange-emphasis {
  color: #fcbe00;
  text-decoration: none;
}

.light-purple-emphasis {
  color: #dcc8ff;
  text-decoration: none;
}

a:hover {
  color: inherit;
}


/*CODE DIVISION COLOUR BACKGROUNDS with matching text colours*/

/*green*/

.bg-green {
  background-color: #d2fa32;
}

.bg-purple {
  background-color: #7d33fa;
}

.bg-light-purple-only {
  background-color: #dcc8ff;
}

.bg-dark-purple-only {
  background-color: #7d33fa;
}

.bg-orange-only {
  background-color: #fcbe00;
}

.bg-pink-only {
  background-color: #e60073;
  color: #fcbe00;
  /*orange*/
}

/*light purple*/

.bg-light-purple {
  background-color: #dcc8ff;
  color: #e60073;
  /*pink*/
}

/*dark purple*/

.bg-dark-purple {
  background-color: #7d33fa;
  color: #d2fa32;
  /*green*/
}

/*orange*/

.bg-orange {
  background-color: #fcbe00;
  color: #7d33fa;
  /*dark purple*/
}


/*pink*/

.bg-pink {
  background-color: #e60073;
  color: #fcbe00;
  /*orange*/
}


/*black*/

.bg-black {
  background-color: #000000;
  color: white;
}


/* Extra utilities
*/

/* image zoom on hover */
.img-zoom {
  transition: all 0.3s ease-in-out;
}

.img-zoom:hover {
  transform: scale(1.05);
}

/*card zoom on hover*/

.card-zoom {
  transition: all 0.3s ease-in-out;
}

.card-zoom:hover {
  transform: scale(1.05);
}

/*BOX SHADOWS ON HOVER*/
.purple-box {
  transition: box-shadow .3s;
}

.purple-box:hover {
  box-shadow: 1px 1px 15px 13px #7D33FA;
}

.light-purple-box {
  transition: box-shadow .3s;
}

.light-purple-box:hover {
  box-shadow: 1px 1px 15px 13px #dcc8ff;
}

.pink-box {
  transition: box-shadow .3s;
}

.pink-box:hover {
  box-shadow: 1px 1px 15px 13px #e60073;
}

.orange-box {
  transition: box-shadow .3s;
}

.orange-box:hover {
  box-shadow: 1px 1px 15px 13px #fcbe00;
}

.black-box {
  transition: box-shadow .3s;
}

.black-box:hover {
  box-shadow: 1px 1px 15px 13px #000000;
}

.green-box {
  transition: box-shadow .3s;
}

.green-box:hover {
  box-shadow: 1px 1px 15px 13px #C7F900;
}

.neutral-box {
  transition: box-shadow .3s;
}

.neutral-box:hover {
  box-shadow: 0 0 11px rgba(33, 33, 33, .2);

}

.neutral-box-rounded {
  transition: box-shadow .3s;
  border-radius: 25px;

}

.neutral-box-rounded:hover {
  box-shadow: 0 0 11px rgba(33, 33, 33, .2);

}

/*Focused Breathing*/

:root {
  --primary-color: #fcbe00;
  --secondary-color: #dcc8ff;
  --large: 200px;
  --small: 10px;
  --timing: 8s;
}

.breathing-circle-container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.breathing-circle {
  background-color: var(--primary-color);
  width: var(--small);
  height: var(--small);
  border-radius: calc(var(--small) / 2);
  display: inline-block;
  animation: breath var(--timing) ease infinite none running
}

.breathing-input {
  margin: 20px 0;
  height: 40px;
  font-size: 1.25em;
  width: 10vw;
}

@keyframes breath {

  25%,
  50% {
    background-color: var(--secondary-color);
    width: var(--large);
    height: var(--large);
    border-radius: calc(var(--large) / 2);
  }
}


.overflow-hidden {
  overflow: hidden;
}

.no-underline-a:hover {
  text-decoration: none;
}

.no-underline-a:link {
  text-decoration: none;
  color: black;
}

/*VIDEO*/

.video-size {
  width: 100%;
}


/* CHANGE TO DEFAULT BOOTSTRAP CSS SETTINGS */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}


/*Enlarged text for emphasis*/
.big-text-purple {
  font-size: 250px;
  color: #7D33FA;
}

.big-text-green {
  font-size: 250px;
  color: #D2FA32;
  ;
}


/* VERTICAL CAROUSEL */
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}






/*sizing for the carousel in start fund paage*/

@media screen and (min-width:1500px) {
  .startFundCarousel {
    height: 150px;
  }
}

@media screen and (max-width:1499px) {
  .startFundCarousel {
    height: 175px;
  }
}

@media screen and (max-width:1000px) {
  .startFundCarousel {
    height: 200px;
  }
}


@media screen and (max-width:800px) {
  .startFundCarousel {
    height: 230px;
  }
}

@media screen and (max-width:700px) {
  .startFundCarousel {
    height: 260px;
  }
}

@media screen and (max-width:600px) {
  .startFundCarousel {
    height: 275px;
  }
}

@media screen and (max-width:500px) {
  .startFundCarousel {
    height: 350px;
  }
}

@media screen and (max-width:450px) {
  .startFundCarousel {
    height: 395px;
  }
}

@media screen and (max-width:400px) {
  .startFundCarousel {
    height: 450px;
  }
}

@media screen and (max-width:350px) and (min-width:320px) {
  .startFundCarousel {
    height: 575px;
  }
}



/*sizing for the carousel 2 in start fund paage*/

@media screen and (min-width:1500px) {
  .startFundCarousel2 {
    height: 175px;
  }
}

@media screen and (max-width:1499px) {
  .startFundCarousel2 {
    height: 230px;
  }
}

@media screen and (max-width:1000px) {
  .startFundCarousel2 {
    height: 285px;
  }
}


@media screen and (max-width:800px) {
  .startFundCarousel2 {
    height: 300px;
  }
}

@media screen and (max-width:700px) {
  .startFundCarousel2 {
    height: 320px;
  }
}

@media screen and (max-width:600px) {
  .startFundCarousel2 {
    height: 380px;
  }
}

@media screen and (max-width:500px) {
  .startFundCarousel2 {
    height: 460px;
  }
}

@media screen and (max-width:450px) {
  .startFundCarousel2 {
    height: 500px;
  }
}

@media screen and (max-width:400px) {
  .startFundCarousel2 {
    height: 625px;
  }
}

@media screen and (max-width:350px) and (min-width:320px) {
  .startFundCarousel2 {
    height: 680px;
  }
}



/* Code for text overlay on images*/

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FFFFFF;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay .text {
  color: #7D33FA;
  text-align: center;
}

/* Stops certain fontsizes being too big on mobile*/
@media screen and (max-width:1200px) {
  .mobileText {
    font-size: 1.2rem !important;
  }
}


.priceText {
  font-size: 5rem !important;
}

/* The Modal (background) */
.modalIndex {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  /* background: rgb(0, 87, 183);
  background: linear-gradient(180deg, rgba(0, 87, 183, 0.75) 0%, rgba(0, 87, 183, 0.75) 50%, rgba(255, 204, 0, 0.75) 50%); */

  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* .modalPurple {
  display:block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  background: rgb(0,87,183);
  background: rgba(125, 51, 250, 0.5);
  background-repeat: no-repeat;
  background-attachment: fixed;
} */

/* Modal Content/Box */
.modal-content {

  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #d2fa32;
  float: right;
  font-size: 50px;
  font-weight: bold;
  opacity: .75;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#appeal {
  color: #017cc2;
  background-color: #fef100;
  transition-duration: 0.4s;
  border: none;
  padding: 15px 32px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#appeal:hover {
  color: #fef100;
  background-color: #017cc2;
}




.reg-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
}

.reg-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}


.reg-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
}

.equal-col {
  display: grid;
}


/* ticker */

.marquee {
  width: 100%;
  line-height: 50px;
  background-color: rgba(210, 250, 50, 0.5);
  color: black;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  /*position: fixed;*/
  position: sticky;
  z-index: 1;
  /* margin-left: 10%; */
  /* margin-right: 10%; */
}

.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}

/* CUBE BACKGROUND */

.cube-background {
  background-image: url("assets\img\cubes_background.png");

  background-repeat: repeat-x;
}

/* Scroll to top button */

.scroll-to-top {

  position: fixed;
  /* Fixed/sticky position */
  bottom: 20px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  border: none;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 15px;
  /* Some padding */
  border-radius: 10px;
  /* Rounded corners */
  font-size: 18px;
  /* Increase font size */
}

@media (max-width: 489px) {
  .scroll-to-top {
    display: none;
  }
}


/* Commercial step cards */

/* .com-cards {
  display: flex;

}



  .com-cards {
    display: flex;

  }
} */