/* this page is for bootstrap overrides and custom css outside of the theme css*/
html{
    scroll-behavior: smooth;
}


#root .text-muted {
    color: #5e656b!important;
}

/* bootstrap overrides */
hr{
    margin-top: 5rem;
    margin-bottom: 2rem;
}
.card-body{
    max-height: 3.5rem;
}
.navbar-shrink * .nasa-logo{
    height: 3rem;
}
span.fa-stack > i.fa-stack-1x{
    font-size: 3rem;
}

/* new classes */
.margin-top-1{
    margin-top: 1rem;
}
.margin-top-3{
    margin-top: 3rem;
}
.margin-bottom-10{
    margin-bottom: 10rem;
}
.margin-bottom-7{
    margin-bottom: 7rem;
}
.margin-bottom-5{
    margin-bottom: 5rem;
}
.nasa-logo{
    height: 5rem;
    width: auto;
}
.homepage-list-img{
    height: 100%;
    width: auto;
}
.homepage-list-img-invert{
    height: auto;
    width: 100%;
}
.challange-vids{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    height: 55rem;
}
.challenge-vids > .col-sm-4 {
    max-height: 15rem;
}
.flex-abt-vid{
    display: flex;
    justify-content: space-around;
}
.force-center {
    margin-left: auto;
    margin-right: auto;
}
.text-grey{
    color: rgb(100, 100, 100);
}
.datesList{
    width: 100%;
    margin-left: 10rem;
}
.date-list-item{
    display: flex;
}
.date-list-item > span{
    width: 30%;
    padding-left: 1rem;
}
.date-list-item > a{
    width: 30%;
}
.date-list-item:before {
    content: "\2022";
    margin-left: 1rem;
}
/* bubble */
.bubble-div{
    display: flex;
    justify-content: flex-end;
}
.s-bubble {
    position: relative;
    width: 50%;
    height: auto;
    text-align: center;
    background-color: #fff;
    border: 2px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 50%;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    padding:4em;
    display: flex;
    flex-direction: column;
    line-height: 2em;
  }
  .s-bubble > span {
      padding: .5em;
  }
  .s-bubble:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 35%;
    top: 98%;
    border: 25px solid;
    border-color: #666 transparent transparent #666;
    transform: rotate(3deg);
    /* z-index: -1; */
  }
  .s-bubble:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 35.8%;
    top: 97%;
    border: 22px solid;
    border-color: #fff transparent transparent #fff;
    transform: rotate(3deg);
  }
/* end bubble */

.mittic-black{
    height: auto;
    width: 20rem;
}

.mittic-heading-image{
    height: auto;
    width: 60rem;
    max-width: 400px;
}

.services-text{
    font-size: 1.3rem;
}
.mittic-card{
    flex: 0 1 0%;
}
.vid-img-div{
    height: 100%;
    width: 100%;
    cursor: pointer;
}
.vid-img-div > span{
    height:1.5em;
    text-align:center;
    font:3rem/1.5 sans-serif;
    color:white;
    text-shadow:0 0 0.5em black;
    position:absolute;
    top: 44%;
    bottom: auto;
    left: 0;
    right: 0;
    pointer-events: none;
}
.contact-div{
    display: flex;
    justify-content: center;
}
.jacket-kid{
    height: auto;
    width: 25rem;
}
.glasses-kid{
    width: 50%;
}
.presenting-kid{
    width: 30rem;
    height: auto;
}
.suits-congrats{
    width: 70%;
    height: auto;
}
.artemis-logo{
    max-width: 100%;
    padding: 1rem;
}
.micro-g-logo{
    width: auto;
    height: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.index-video{
    width: 75%;
    height: 40vh;
}

.screen-reader-only {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    overflow: hidden !important;
}

.underline{
    text-decoration: underline;
}
.outline{
    outline: invert;
}

.mittic-rows > .row{
    margin-bottom: 2rem;
}
/* .mittic-ol{
    width: 74vw;
} */
.mittic-ol > li {
    margin-bottom: 1rem;
}
.mittic-ol > li > ul > li{
    margin-bottom: .5rem;
}
.mittic-ol > li > ul > li:first-of-type{
    margin-top: .5rem;
}
.mittic-gs > li{
    margin-bottom: .5rem;
}

.suits-icon-row{
    margin-bottom: 1.5rem;
}
.suits-logo{
    width: auto;
    height: 14rem;
}

.logo-spacer{
    width: 5rem;
}

#moved-text:hover{
    color: blue !important;
}

.button-background {
    background-color: crimson;
            box-shadow: 0 5px 0 #8d0000;
            padding: 0.4em 0em;
            position: relative;
            display: inline-block;
            font-size: 4.8rem;
            color: white;

            width:100%;
}

/* ie only */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .card-img-top {
        max-height: 11.5rem;
    }
    .mittic-card{
        flex: unset;
    }
}

/* mobile */
@media (max-width: 991px){
    .page-section{
        padding-left: 1rem;
        padding-right: 1rem;
    }
  
    .contact-div{
        flex-direction: column;
        display: flex;
        align-items: center;
    }
    .video-row-2{
        margin-bottom: 7rem;
    }
    .margin-bottom-10{
        margin-bottom: 5rem;
    }
    .jacket-kid{
        height: 25rem;
        width: auto;
    }
    .glasses-kid{
        width: 100%;
        height: 15rem;
    }
    .datesList{
        margin-left: 0rem;
    }
    .date-list-item{
        margin-bottom: 2rem;
    }
    .presenting-kid{
        width: 100%;
        height: 16rem;
    }
    .edpc{
        width: 100%;
    }
    .suits-congrats{
        width: 100%;
        height: 22rem;
    }
    .s-bubble{
        width: unset;
        padding: 3rem;
        margin-bottom: 3rem;
    }
    .artemis-logo{
        height: 10rem;
    }
    .artemis-logo-div{
        text-align: center;
    }
    .micro-g-logo{
        width: 100%;
        height: auto;
    }
    .index-video{
        width: 100%;
    }
    .suits-logo{
        width: auto;
        height: 14rem;
    }
    .mittic-black {
        height: 7rem;
    }
    .suits-icon-row{
        margin-bottom: 0rem;
    }
    .logo-spacer{
        width: unset;
    }
}

@media screen and (max-width: 320px){
    
    .mittic-heading-image{
        max-width: 290px;        
        margin-left: -4px;
    }
}

@media screen and (min-width: 375px){
    
    .mittic-heading-image{
        max-width: 355px;
        margin-left: -4px;
    }
}

/* tablet */
@media screen and (min-width: 768px){
    
    .mittic-heading-image{
        max-width: 650px;
        margin-left: -4px;
    }
}

/* laptop */
@media screen and (min-width: 1024px){
    
    .mittic-heading-image{
        max-width: 940px;
        margin-left: -4px;
    }
}