@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

.navbar {
    background-color: rgba(0, 0, 0, 0.851)!important;
    width: 100%;
    white-space: nowrap;
}
@media screen and (max-width:768px){
    .col{
        flex:0!important;
        flex-basis:auto!important;
        clip-path: none!important;
        margin:0!important;
    }
    #scientists{
        margin:0!important;
    }
    .caption{
        /* text-align: center!important; */
        padding-top: 2%!important;
        /* bottom: 20%; */
        /* height: 20%; */
    }
    .img{
        min-height: 500px!important;
    }
    .card{
        padding-bottom: 5%!important;
        padding-top: 5%!important;
    }
}

.navbar-brand img {
    width: 200px;
    height: auto;
    margin-top: 10px;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.navbar a {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 20px;
}

/* .nav-item {
    background-color: rgba(0, 0, 0, 0.851)!important;
} */

.nav-link {
    margin-right: 30px;
    white-space: nowrap;
}

.navbar .collapse .nav-item .nav-link:after {
    content: '';
    width: 0;
    height: 1.5px;
    display: block;
    background: white;
    transition: 300ms;
}

.navbar .collapse .nav-item .nav-link:hover:after {
    width: 100%;
}

.dropdown-toggle::after {
    border-left: none;
    border-right: none;
    border-top: none;
}

.body {
    background-image: url("./img/space2.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

.title {
    
    color: white;
}

.img {
    min-height: 800px;
    background: center/cover no-repeat;
}

.row {
    width: 101.5%;
}

.col {
    flex: 3;
    -ms-flex: 3;
    transition: all 0.25s ease-out, flex-grow 0.35s ease 0.4s, -webkit-box-flex 0.35s ease 0.4s, -ms-flex-positive 0.35s ease 0.4s;
}

.col:hover {
    flex-grow: 5;
}

.col:first-child {
    margin-right: -5vw;
    clip-path: polygon(0 0, calc(100%) 0, calc(100% - 5vw) 100%, 0 100%);
    padding-right: 0!important;
    padding-left: 0!important;
}

.col:nth-child(2) {
    clip-path: polygon(10vw 0, calc(100%) 0, calc(100% - 5vw) 100%, 15px 100%);
    margin: 0 -5vw;
    padding-right: 0!important;
    padding-left: 0!important;
}

.col:last-child {
    clip-path: polygon(10vw 0, 100% 0, 100% 100%, 15px 100%);
    margin-left: -5vw;
    padding-right: 0!important;
    padding-left: 0!important;
}

.container-fluid {
    padding-right: 0!important;
    padding-left: 0 !important;
}

.container-fluid .row {
    padding-left: 0;
}

.caption {
    position: absolute;
    bottom: 10%;
    text-align: center!important;
    background-color: rgba(0, 0, 0, 0.479);
    color: white;
    width: 100%;
    padding: 7% 18% 0 18%;
    min-height: 35%;
    transition: background 0.25s ease-out, color 0.25s ease-out, font-size 0.35s ease 0.5s, text-shadow 0.25s ease-out, padding 0.35s ease 0.5s;
}

/* .col:hover>.img .caption {
    background-color: white;
    color: black;
} */

#content {
    display: none;
    position: relative;
    min-height: 100vh;
    transition: ease 2s;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5rem;
    background-color: black;
}

.feed {
    color: white;
    background-color: rgba(0, 0, 0, 0.479);
    padding: 10px 10px 10px 10px;
    font-family: 'Roboto Slab', serif;
    padding-bottom: 5rem;
}

.feed h1 {
    padding: 2% 0 2% 0;
}

.card {
    color: white;
    background-color: rgba(0, 0, 0, 0.479);
    padding: 0 8.5% 0 8.5%;
    text-align: left;
    border: none;
    margin-bottom: 1%;
}

.card img {
    width: 100%;
    height: 315px;
}

.card-content {
    background-color: black;
    color: white;
    max-height: 50px;
}

.card a:link {
    text-decoration: none;
}

.card p {
    margin-bottom: 0!important;
}

.card-content:after {
    content: '';
    height: 0;
    width: 100%;
    display: inline-block;
    background: white;
    transition: 300ms;
}

.card-content:hover:after {
    height: 6px;
}

.description {
    padding: 0 5% 0 5%;
}

.footer-content {
    margin: 0 auto;
}

.cp {
    color: white;
}

.footer-content ul li {
    display: inline;
    padding: 10px 10px 10px 10px;
}

.fa {
    color: white;
}

.sticky-bottom {
    background-color: black!important;
}

.row {
    display: flex;
    padding-left: 50px;
}

.col-sm-4 {
    flex: 33.33%;
    padding: 5px;
}

@media screen and (max-width: 600px) {
    .col-sm-4 {
        width: 100%;
        flex: 100%;
        padding: 5px;
    }
}