/*CSS FILE FOR HOMEPAGE*/

/*RESPONSIVNESS*/

@media (min-width: 922px) {
  .ast-container {
    max-width: unset;
  }
}

@media (min-width: 1366px) {
  .ast-container {
    max-width: unset;
  }
}

/*GENERAL*/

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.fade:not(.show) {
  opacity: 1;
}

.ast-container {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.section-box {
  padding-bottom: 0px;
}

.green-bkg {
  background-color: #b9e0b6;
  width: auto;
}

.yellow-bkg {
  background-color: #fef77f;
  padding: 35px 50px 35px 50px;
}

.right-border {
  border-radius: 0 56px 56px 0;
}

.left-border {
  border-radius: 56px 0 0 56px;
}

.title-box {
  padding: 50px;
  margin-bottom: 50px;
  margin-top: 50px;
  text-transform: uppercase;
}

h1 {
  display: inline;
}

p {
  margin-top: 15px;
  margin-bottom: 15px;
}

.yellow-banner {
  text-align: center;
  padding: 20px;
}

.title-banner {
  display: flex;
  align-items: center;
  padding-top: 50px;
}

.title-float {
  margin-left: auto;
}

.banner-cont {
  padding-bottom: 50px;
  margin-top: 100px;
}
hr {
  border-top: 1px solid;
}

.event-box {
  margin-top: 100px;
}

/* GEN BUTTONS */

.btn-display {
  display: none;
}

.btn-yellow {
  display: block;
  background-color: #fef77f;
  font-weight: 800;
  color: black;
  padding: 20px 30px;
  border-radius: 56px;
}

.btn-yellow:hover {
  background-color: #f0e978;
}

.btn-yellow:active {
  background-color: #f0e978;
}

.btn-yellow:focus {
  background-color: #f0e978;
}

.yellow-hold {
  background-color: #f0e978;
  font-weight: 800;
  cursor: pointer;
  color: black;
  padding: 20px 30px;
  border-radius: 56px;
}

.yellow-hold:hover {
  background-color: #f0e978;
}

.yellow-hold:active {
  background-color: #f0e978;
}

.yellow-hold:focus {
  background-color: #f0e978;
}

.btn-green {
  background-color: #b9e0b6;
  font-weight: 800;
  color: black;
  padding: 20px 30px;
  border-radius: 56px;
}

.btn-green:hover {
  background-color: #a8cca6;
}

.btn-green:active {
  background-color: #a8cca6;
}

.btn-green:focus {
  background-color: #a8cca6;
}

/*SECTION 1 BANER*/

/* SLIDER */

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Prev and Next butn */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 100;
  background-color: rgba(180, 220, 177, 0.6);
  border-radius: 50%;
  transform: background 300ms;
}
.arrow img {
  width: 50px;
}
.arrow:hover {
  background-color: rgba(180, 220, 177, 0.3);
}
.prev-btn {
  left: 0;
}
.next-btn {
  right: 0;
}

picture {
  width: 100%;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #f6978d;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #f6978d;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.slide {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow-x: hidden;
}

/* SECTION Thank you message */

.ty-mito-grid{
	display: grid;
  align-items: center;
	grid-template-columns: 60% auto;
}

.ty-vid-cont{
	padding:10% 0 10% 0;
	position:relative;
	width: 500px;
	height: auto;
}

.ty-vid-mito{
	width: 500px;
	height: auto;
}

.ty-mito-headline{
	font-size: 35px;
  line-height: 1.4;
}

.ty-mito-text{
		font-size: 26px; 
		font-weight: 600; 
		margin-bottom: 40px;
	}

/*SECTION 2 ABOUT*/

#about-mito-box {
  display: flex;
}

#mito-disease-info {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 100px;
  margin-bottom: 20px;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.mito-image {
  width: 400px;
  height: auto;
}
.mito-image-two {
  width: 270px;
  height: auto;
}

/* SECTION 3 THEME */

.theme-info {
  display: grid;
  grid-template-columns: 55% auto;
  column-gap: 50px;
  align-items: center;
}

/*SECTION 4 KEY MESSAGES*/

.key-messages-all {
  display: grid;
  grid-gap: 50px;
}

.key-number {
  width: 100px;
  height: 100px;
  align-content: center;
  text-align: center;
  border-radius: 50%;
}

.key-title {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 20px;
}

.key-message {
  height: auto;
  padding: 50px 30px 50px 30px;
  border-radius: 20px;
  /* 	margin-left:50px;
	margin-right:50px; */
}

.key-wrapper {
  max-width: 1200px;
}

li {
  margin-top: 20px;
}

/*SECTION 4 EVENTS*/

.light-mito-logo {
  height: 300px;
  width: 300px;
}

.gallery-preview {
  margin: 30px 0;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 20px;
}

.button-center {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column-gap: 20px;
}

.light-up-box {
  display: grid;
  grid-template-columns: 60% 1fr;
  padding-top: 50px;
  text-align: center;
  align-items: center;
}

/*SECTION 5 AWARNESS*/

.awarness-cont {
  padding-bottom: 50px;
}

.awarness-cont2 {
  padding-bottom: 0;
}

.awarness-box {
  display: flex;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 20px;
}

.awarness-logo {
  margin: auto;
  width: 150px;
}

.awarness-lhon {
  margin: auto;
  width: 200px;
}

.awarness-btn {
  margin-left: auto;
  margin-top: 50px;
}

/*SECTION 6 RESOURCES*/

#resources-box {
  display: grid;
  grid-template-columns: 30% 1fr;
  margin-bottom: 100px;
  align-items: flex-start;
}

.buttons-row {
  display: grid;
  grid-template-columns: 50% 50%;
  justify-items: center;
  text-align: center;
  margin: 50px 0 50px 0;
}

.button-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-row-gap: 20px;
}

.button-box-other {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-row-gap: 20px;
}

/*SECTION 7 PERSONAL*/
#personal-title-box {
  display: grid;
  grid-template-columns: auto 1fr;
}
.story-box {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #fff;
  margin-bottom: 50px;
  padding: 50px;
  border-radius: 20px;
  grid-column-gap: 50px;
}

.read-more {
  background-color: #fef77e;
  display: inline-block;
  float: right;
  padding: 20px 30px;
  border-radius: 56px;
  font-weight: 800;
}

/*SECTION 8 GET INVOLVED*/

#get-involved-title {
  display: grid;
  grid-template-columns: 1fr auto;
}

.list-dash {
  margin-top: 50px;
  margin-bottom: 50px;
  list-style-type: none;
}
.list-dash li:before {
  content: '\2014'; /*dash*/
  position: absolute;
  margin-left: -30px;
}

/*SECTION 9 PARTNERS*/

#partners-box {
  display: flex;
}

#mito-partners {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  grid-row-gap: 50px;
  grid-column-gap: 50px;
  align-items: center;
  justify-items: center;
  margin-top: 50px;
}

#mito-partners img {
  height: auto;
  width: 150px;
}

.last-row {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}

/*SECTION 10 Get in touch*/

#get-in-touch-cont {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Modal pop up */

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Box */
.modal-content {
  margin: 0 auto;
  margin-top: 70px;
  padding: 20px;
  width: 70vw;
  border: solid 5px #a8cca6;
  /*height: 800px;
  width: 800px; */
}

@media (max-width: 767px) {
  .modal-content {
    width: 90vw;
  }
}

/* Close Button */
.close {
  z-index: 99999;
  margin-left: auto;
  color: #000;
  font-size: 30px;
  font-weight: bold;
}

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

#gform_submit_button_1 {
  background-color: #b9e0b6;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  color: black;
  padding: 15px 30px;
  border: none;
  border-radius: 56px;
}

#gform_submit_button_1:hover {
  background-color: #a8cca6;
  border: none;
}

/* BUTTON CANVA */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  border-radius: 24px;
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 235px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  text-align: center;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #b9e0b6;
}

.show {
  display: block;
}

/* MEDIA*/

@media only screen and (max-width: 480px) {
  body {
    overflow-x: hidden;
  }

  .fl-page {
    overflow: hidden;
  }
}

@media only screen and (max-width: 768px) {

  .ty-vid-cont{
    width: 300px;
  }
    
    .ty-vid-mito{
    width: 300px;
    height: auto;
  }
    
    .ty-mito-text{
      font-size: 22px; 
      font-weight: 600; 
      margin-bottom: 40px;
    }

  .section-box {
    margin-top: 30px;
  }
  .banner-desktop {
    display: none;
  }

  .free-space {
    display: none;
  }
  .title-banner {
    padding-top: 0px;
  }
  .title-box {
    width: 100%;
    text-align: center;
    padding: 15px 25px;
    margin-bottom: 30px;
    margin-top: 20px;
  }
  .yellow-bkg {
    padding: 20px 35px 20px 35px;
  }
  .right-border {
    border-radius: 0px;
  }
  .left-border {
    border-radius: 0px;
  }

  .button-center {
    grid-gap: 20px;
    flex-direction: column;
  }
  .btn-yellow:hover {
    background-color: #f0e978;
  }

  .btn-yellow:active {
    background-color: #f0e978;
  }

  .btn-yellow:focus {
    background-color: #f0e978;
  }

  .btn-green:hover {
    background-color: #a8cca6;
  }

  .btn-green:active {
    background-color: #a8cca6;
  }

  .btn-green:focus {
    background-color: #a8cca6;
  }
  .wrapper {
    padding: 0 15px 0 15px;
  }
  .mito-asset {
    display: none;
  }
  #mito-disease-info {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
    padding: 0px 20px;
    margin-bottom: 50px;
  }
  .mito-image {
    min-width: 300px;
    width: auto;
    height: auto;
  }

  .mito-image-two {
    max-width: 400px;
    width: auto;
    height: auto;
  }
  .theme-info {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
    padding: 0px 20px;
    margin-bottom: 50px;
    column-gap: 0;
  }
  .theme-img {
    max-width: 500px;
    justify-self: center;
  }
  .key-title {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
  }
  .key-title {
    margin: 0 10px 0 10px;
  }
  .key-messages-all {
    grid-gap: 20px;
  }
  .key-number {
    margin-left: 0px;
    width: 70px;
    height: 70px;
    align-content: center;
    text-align: center;
    border-radius: 50%;
  }
  .key-message {
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .key-list {
    margin-top: 50px;
    margin-bottom: 50px;
    list-style-type: none;
  }
  .key-list li p {
    position: relative;
    left: -15px;
  }
  .key-list li h3 {
    position: relative;
    left: -15px;
    font-size: 20px;
  }
  .key-list li:before {
    content: ' \25CF';
    position: absolute;
    margin-left: -30px;
  }

  /* 	EVENTS */
  .light-up-box {
    display: grid;
    grid-template-columns: auto;
    grid-row-gap: 20px;
    padding-top: 30px;
    text-align: center;
    align-items: center;
  }

  .gallery-preview {
    margin: 30px 0;
    display: grid;
    grid-template-columns: auto;
    grid-row-gap: 20px;
  }

  /* 	RESOURCES */

  .buttons-row {
    display: grid;
    grid-template-columns: auto;
    grid-row-gap: 20px;
    justify-items: center;
    text-align: center;
    margin: 30px 0 30px 0;
  }

  /* 	PERSONAL STORIES */

  #personal-title-box {
    grid-template-columns: auto;
  }

  .personal-stories-banner {
    text-align: center;
    margin-top: 100px;
  }
  .story-box {
    display: grid;
    grid-template-columns: auto;
    background-color: #fff;
    margin: 50px 10px;
    padding: 20px;
    grid-row-gap: 20px;
    text-align: center;
    justify-content: center;
    justify-items: center;
  }

  .read-more {
    background-color: #fef77e;
    padding: 10px 20px;
    border-radius: 56px;
    font-weight: 800;
  }
  .read-more-story {
    float: center;
  }

  /* 	PARTNERS */
  #mito-partners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-row-gap: 30px;
    align-items: center;
    justify-items: center;
  }

  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 100;
    background-color: rgba(180, 220, 177, 0.6);
    border-radius: 50%;
    transform: background 300ms;
  }
  .arrow img {
    width: 40px;
  }
  .arrow:hover {
    background-color: rgba(180, 220, 177, 0.3);
  }
  .prev-btn {
    left: 0;
  }
  .next-btn {
    right: 0;
  }
}

@media only screen and (min-width: 769px) and (max-width: 920px) {

  .ty-vid-mito{
    width: 350px;
    height: auto;
  }
    .ty-mito-grid{
    display: grid;
    align-items: center;
    grid-template-columns: 50% auto;
      gap: 10px;
  }
  .ty-mito-headline{
    font-size: 28px;
    line-height: 1.4;
  }
    
    .ty-mito-text{
      font-size: 22px; 
      font-weight: 600; 
      margin-bottom: 0px;
    }

  .section-box {
    margin-top: 30px;
  }

  .banner-desktop {
    margin-top: 100px;
  }
  .wrapper {
    padding: 0 30px 0 30px;
  }
  .title-box {
    text-align: center;
    padding: 20px 30px;
    margin-bottom: 30px;
  }

  .story-box {
    display: grid;
    grid-template-columns: auto;
    background-color: #fff;
    margin: 50px 30px;
    padding: 20px;
    grid-row-gap: 20px;
    text-align: center;
    justify-content: center;
    justify-items: center;
  }
  #mito-partners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-row-gap: 30px;
    align-items: center;
    justify-items: center;
  }
}

button {
  border-style: none;
  color: #000;
  background-color: inherit;
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
  font-family: inherit;
  font-weight: 800;
  font-size: 20px;
  font-size: 1rem;
  line-height: 1em;
  border-radius: 56px;
}

button:hover {
  border: none;
  color: #000;
}

button:active {
  border: none;
  color: #000;
  text-decoration: none;
  background-color: #fef77f;
}

button:focus {
  border: none;
  color: #000;
  text-decoration: none;
}

a {
  color: #000;
}

a:hover {
  color: #000;
  text-decoration: none;
}