/* Spash Screen */
#splash-screen {
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
}

.navbar-bdsl{
    /* background-image: url(../img/Header.png); */
    background-color: #482922;
    background-size: cover;
    min-height: 150px;
    /* min-height: 100%; */
}

.btn_img:hover{
    opacity: 0.5;
    transition: all 0.3s ease 0s;
}

/* Ethnic Composition of Stem Cell Registry */
#statistics{
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
    z-index: 2;
}

/* How to Donate Stem Cells */
.become_donor{
    margin-top: -15%;
    z-index: 3;
}

/* Donor Stories */
#donor_stories{
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
    background-color: #482922;
    margin-top: 10%;
    z-index: 1;
    padding-bottom: 5%;
}

.round-border{
    z-index: 3;
}

.donor_img:hover{
    opacity: 0.8;
    transition: all 0.3s ease 0s;
}

/* Events */
#events{
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
    background-color: #482922;
    /* margin-top: 10%; */
    z-index: 2;
}
.events{
    margin-top: -25%;
}

/* Contact Us */
#contact-us{
    /* background-color: #482923; */
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
    /* margin-top: 30%; */
}

#contact-form {
    margin: 5%;
    padding: 5%;
    border-radius: 2%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* Footer */
footer {
    text-align: right;
    padding: 1% 2% ;
    background-color: #482923;
    color: white;
}

.instagram{
    margin-top: -6.5%;
}

/* Infinite Scroll Effect */
.marquee {
    --gap: 1rem;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}
  
.marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--gap);
    animation: scroll 15s linear infinite;
}

.marquee__content > li {
    list-style-type: none;
}

a.navbar-brand {
    display: contents;
}

/* Move it (define the animation) */
@keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
}

/* Pie Chart Animations */

#chartdiv {
    width: 100%;
    height: 500px;
}
  
.chart {
    position: relative;
    width: 550px;
    height: 550px;
    left: 20%;
  }
  .pieTip {
    position: absolute;
    float: left;
    min-width: 30px;
    max-width: 300px;
    padding: 5px 18px 6px;
    border-radius: 2px;
    background: rgba(255,255,255,.97);
    color: #444;
    font-size: 19px;
    text-shadow: 0 1px 0 #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    letter-spacing: .06em;
    box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
    -webkit-transform: all .3s;
       -moz-transform: all .3s;
        -ms-transform: all .3s;
         -o-transform: all .3s;
            transform: all .3s;
    pointer-events: none;
  }
  .pieTip:after {
        position: absolute;
        left: 50%;
        bottom: -6px;
        content: "";
        height: 0;
        margin: 0 0 0 -6px;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-top: 6px solid rgba(255,255,255,.95);
        line-height: 0;
  }
  .chart path { cursor: pointer; }

  /* Events Page */

  .card-shadow {
    /* box-shadow: 0.5rem 0.5rem black, -0.5rem -0.5rem #ccc;
    border-radius: 2%; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  /* Resources Page */

  #resource-intro {
    background-color: #FFDBAC;
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
  }

  #stem-cells {
    background-color: #FFDBAC;
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
  }

  #black-donors {
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
    height: auto;
  }

/* Carousel */
span.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23482922' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
  }
  
span.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23482922' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

#avery-body {
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
    height: 100%;
}

.pillar {
    margin: 2%;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    margin-bottom: 5%;
}

.video-container {
    position: relative;
    padding-bottom: 56.5%;
    height: 0;
    width: 100%;
  }
  
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


#about-intro {
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: top, center;
  }

  .card-header > .mb-0 > button {
    color: inherit;
  }

  .video-header {
    position: relative;
    background-color: black;
    height: 75vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
  }
  
  .video-header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    /* padding: 10%; */
  }
  
  .video-header .container {
    position: relative;
    z-index: 2;
  }
  
  .video-header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
  }

  
  /* @media (pointer: coarse) and (hover: none) {
    .video-header {
      background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
    }
    .video-header video {
      display: none;
    }
  } */

@media (min-width: 0px) { 
    .about_us{ 
        margin-top: -20%;
        width: 50vw;
    }
    .about_us_btn {position: absolute; top: 20%; left: -15%;} 
    .about_img_size {width: 40%;}
    /* .ethnic_comp {margin-top: 15%; margin-bottom: 5%} */
    #pieChart {
        width: 200px;
        margin-left: -20%;
        margin-top: -10%;
    }
    .comp_table {margin-top: 90%;}
    .donor_btn {position: absolute; left:2%; }
    .donor_img_size { width: 40% }
    .events_btn {position: absolute; left:10%; }
    .event_img_size { width: 40% }

    .ethnic_comp {
        margin-bottom: -20%;
        /* margin-top: -20%; */
    }

    .marquee__content > li > img{
        height: 50%;
    }

    .Header_logo {
        width: 15%;
    }

    .social_logo {width: 70%;}
}

@media (min-width: 400px) {
    #pieChart {
        width: 200px;
        margin-left: 0%;
        margin-top: 0%;
    }
}

/* @media (min-width: 650px) {
    .Header_logo {
        margin-top: -100px
    }
} */

@media (min-width: 500px) { 
    .about_us{ margin-top: -20%; }
    .about_us_btn {position: absolute; top: 20%; left: -8%;} 
    .about_img_size {width: 40%;}
    .ethnic_comp {margin-bottom: 25%}
    #pieChart {width: 250px; margin-left: -10%}
    .comp_table {margin-top: 55%;}
    .donor_btn {position: absolute; left:15%; }
    .donor_img_size { width: 40% }
    .events_btn {position: absolute; left:25%; }
    .event_img_size { width: 40% }

    .marquee__content > li > img{
        height: 75%;
    }
    
    .Header_logo {
        width: 15%;
    }

    .ethnic_comp {
        margin-bottom: -10%;
        /* margin-top: -20%; */
    }
}

@media (min-width: 768px) { 
    .about_us{ margin-top: -20%; }
    .about_us_btn {position: absolute; top: 20%; left: 0%;} 
    .about_img_size {width: 60%;}
    .ethnic_comp {margin-top: 20%; margin-bottom: 5%}
    #pieChart {width: 350px;}
    .comp_table {margin-top: 25%;}
    .donor_btn {position: absolute; left:25%; }
    .donor_img_size { width: 60% }
    .events_btn {position: absolute; left:32%; }
    .event_img_size { width: 60% }

    .marquee__content > li > img{
        /* width: 50%; */
        height: 100%;
    }

    .Header_logo {
        width: 15%;
    }
    .social_logo {width: 50%;}
 }

@media (min-width: 992px) { 
    .about_us{ margin-top: -20%; }
    .about_us_btn {position: absolute; top: 20%; left: 5%;}   
    .about_img_size {width: 85%;}
    .donor_img_size { width: 85% }
    .ethnic_comp {margin-top: 20%; margin-bottom: 5%}
    #pieChart {width: 400px;}
    .comp_table {margin-top: 20%;}
    .donor_btn {position: absolute; left:30%; }
    .events_btn {position: absolute; left:35%; }
    .event_img_size { width: 95% }

    /* .Header_logo {margin-top: -30px} */
    .Header_logo {
        width: 40%;
    }
    
}

@media (min-width: 1200px) { 
    .about_us_btn {position: absolute; top: 20%; left:6%; }  
    .about_img_size {width: 85%;}
    #pieChart {width: 450px;}
    .comp_table {margin-top: 10%;}
    .event_img_size { width: 85% }

    /* .Header_logo {margin-top: -20px} */
 }

@media (min-width: 1400px) { 
    .about_us{ margin-top: -20%; }
    .about_us_btn {position: absolute; top: 20%; left:6%; }   
    .about_img_size {width: 85%;}
    .ethnic_comp {margin-top: 20%; margin-bottom: 5%;}
    #pieChart {width: 600px;}
    .comp_table {margin-top: 5%;}
    .donor_btn {position: absolute; left:37%; }
    .events_btn {position: absolute; left:38%; }
    .event_img_size { width: 85% }
/* 
    .Header_logo {margin-top: -25px} */
}

.instagram, .instagram:hover, .instagram:visited {
    color: white;
}

.video-container-vertical {
    position: relative;
    padding-bottom: 56.5%;
    /* height: 100%; */
    width: 100%;
    /* max-width: 100%; */
    /* object-fit: cover; */
}

.video-container-vertical video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
}