* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.body-custom {
  font-family: 'zona_pro_light', 'zona_pro';
  max-width: 500px;
  text-align: center;
  margin: 0 auto;
}

a {
  color: inherit;
}

.container-fluid,
.row {
  min-height: 100vh;
}

body > div:nth-of-type(3) {
  margin-top: 0 !important;
  padding: 0 !important;
}

#welcome_page,
#start_screen,
#start,
#company_info,
#bb,
#efy,
#wdwv {
  min-height: 100vh;
}

#goTo_start,
#goTo_quiz,
#goTo_bb,
#goTo_efy,
#goTo_wdwv {
  margin-top: 30px;
}

/*--------------------------------- welcome_page ---------------------------------*/

#welcome_page,
#start_screen {
  color: #E3968E;
  background-color: #5B2686;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.avon_logo {
  margin: 50px 0;
}

.avon_logo img {
  width: 100%;
}

#progress_bar {
  height: 6px;
  border-radius: 3px;
  background-color: #E3968E;
  transition: 0.4s linear;
  transition-property: width, background-color;
  animation: progressAnimation 2s;
}

@keyframes progressAnimation {
  0%   { width: 0%; background-color: #5B2686;}
  100% { width: 100%; background-color: #E3968E; }
}

/*--------------------------------- start_screen ---------------------------------*/

.inactive {
  display: none !important;
}

.active {
  display: block !important;
}

/*--------------------------------- start ---------------------------------*/

#start {
  background-color: #DE5C61;
  color: #EDBFC5;
  font-size: 1.6em;
}

.choice {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
}

.social_media_icons {
  display: flex;
  justify-content: space-around;
  margin: 30px 0 50px 0;
}

/*------------------------------ company_info -------------------------------*/

#company_info {
  color: #E7BDC5;
  background-color: #DE5C61;
  text-align: left;
}

.menu {
  font-weight: bold;
  cursor: pointer;
}

.company_info_svg {
  color: #E7BDC5;
}

.menu_back {
  text-align: right;
  font-weight: bold;
  cursor: pointer;
}

.menu_back div {
  transform: rotate(90deg);
  display: inline;
}

.back_to_start {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.back_to_start_container {
  font-size: 1.6em;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}

#back_to_start_container {
  font-size: 1.6em;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}

.back_to_start,
#goTo_start,
#goTo_quiz_main,
#goTo_quiz,
#goTo_bb,
#goTo_efy,
#goTo_wdwv,
.video {
  cursor: pointer;
}

.gm_photo img {
  width: 100%;
  margin-bottom: 5px;
}

.video {
  text-decoration: none;
}

.section_title {
  font-family: 'zona_problack';
  font-size: 3.4em;
  padding: 10px 0;
  font-weight: bold;
}

.main_title {
  font-family: 'zona_problack';
  font-size: 2em;
  padding: 20px 0;
  font-weight: bold;
}

.story_container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.story_container img {
  padding-left: 10px;
}

.single_map {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 0;
}

.single_map p {
  text-decoration: underline;
}

.single_map img {
  margin-right: 5px;
}

.info5 {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.info5_image img {
  margin: 10px;
  max-width: 33px;
}

.info5 p {
  text-align: left;
}

#goTo_bb {
  background-color: #5B2586;
  text-align: left;
  padding: 20px;
}

/*--------------------------------- bb ---------------------------------*/

#bb {
  color: #E7BDC5;
  background-color: #5B2586;
  text-align: left;
}

.step {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 30px 0;
}

.step_number {
  font-weight: bold;
  font-size: 2em;
  padding-right: 30px;
}

#goTo_efy {
  color: #5B2586;
  background-color: #F4CEA4;
  padding: 20px;
}

/*--------------------------------- efy ---------------------------------*/

#efy {
  color: #5B2586;
  background-color: #F4CEA4;
  text-align: left;
}

.step_image {
  padding-right: 30px;
}

.development {
  display: flex;
  justify-content: space-between;
}

.aspire {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 10px;
}

.efy_image img {
  width: 100%;
  margin-top: 15px;
}

#goTo_wdwv {
  color: #F4CEA4;
  background-color: #ED4970;
  padding: 20px;
}

/*--------------------------------- wdwv ---------------------------------*/

#wdwv {
  background-color: #DE5C61;
  color: #EDBFC5;
  text-align: left;
}

#goTo_quiz {
  color: #E3968E;
  background-color: #365785;
  padding: 20px;
}

/*--------------------------------- quiz ---------------------------------*/

#quiz_1q,
#quiz_2q,
#quiz_3q,
#quiz_4q,
#quiz_5q,
#quiz_6q {
  color: #E3968E;
  background-color: #365785;
  min-height: 90vh;
}

.q_number {
  font-family: 'zona_problack';
  font-size: 2em;
  font-weight: bold;
  padding: 15px 0;
}

.answer {
  font-family: 'zona_problack';
  font-weight: bold;
  padding: 10px 0;
  cursor: pointer;
  font-size: 1.6em;
}

.correct {
  font-family: 'zona_problack';
  font-weight: bold;
  color: #0D460F;
  font-size: 1.6em;
}

.incorrect {
  font-family: 'zona_problack';
  font-weight: bold;
  color: #740B0B;
  font-size: 1.6em;
}

.correct-bg {
  background-color: #368551 !important;
  color: #8EE391 !important;
}

.incorrect-bg {
  background-color: #E24A4A !important;
  color: #EFCDD3 !important;
}

.next {
  font-family: 'zona_problack';
  font-weight: bold;
  padding: 30px;
  font-size: 2em;
  cursor: pointer;
}

.menu_list {
  font-family: 'zona_pro_light', 'zona_pro';
  text-align: center;
  font-size: 1.6em;
}

.menu_list a {
  display: block;
  text-decoration: none;
  padding: 10px;
}


@media (max-width: 330px) {
  .section_title {
    font-size: 2.6em;
  }
  .main_title {
    font-size: 1.6em;
  }
}