@import url('../css-1');
body, html{
    position: relative;
    width: 100%;
    font-family: 'IBM Plex Sans', sans-serif;  
}

.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}
.justify-center{
    justify-content: center;
}
.col{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
}
@media screen and (min-width: 900px){
    .col--1{
        width: 8.33%
    }
    .col--2{
        width: 16.66%
    }
    .col--3{
        width: 25%;
    }
    .col--4{
        width: 33.33%;
    }
    .col--5{ 
        width: 41.66%;
    }
    .col--6{
        width: 50%;
    }
    .col--7{
        width:58.33%;
    }
    .col--8{
        width: 66.66%;
    }
    .col--9{
        width: 75%;
    }
    .col--10{
        width: 83.33%;
    }
    .col--11{
        width: 91.66%;
    }
    .col--12{
        width: 100%;
    }
}

.page{
    display:block;
    text-align:center;
    background-color: #002D9C;
    background-image: url("../images/Hub-Page-Bg.svg");
    background-size: cover;
    min-height:100%;
    min-width:100%;
    color: #F7F3F2;
    
}

.page__header{
    font-weight: 400;
    margin-top: 2%;
    font-size: 1.7em;
}
.nav{
    padding-top:60px;
}


.box{
    max-width: 440px;
    width:100%;
    font-size: .75em;
    font-weight: 400;
    display: inline-flex;
    flex-flow: column;
    flex-wrap: nowrap;
    margin: 30px;
    transition: border .5s, transform .5s;
}
.box:hover{
    transform: translatey(-20px);
}
.box--health{
    border: 3px solid #3DDBD955;
}
.box--health:hover{
    border: 3px solid #3DDBD9;
}


.box--ai{
    border: 3px solid #1C7CA755;
}
.box--ai:hover{
    border: 3px solid #1C7CA7;
}
.box__imgContainer{
    /* margin-bottom: -30px; */
}
.box__img{
    display:block;
}
.box__content{
    position: relative;
    background-color: #343A3F;
    height: 100%;
}

.box__copy{
    margin: 0 20px;
    line-height: 1.4em;
    font-weight: 300;
}

.box__logo{
    max-width:100%;
    width: 270px;
    padding: 30px 20px;
    
}
.box__btn{
    margin-top: auto;
}


.btn{
    
    color: #FFFFFF;
    font-size: .9em;
    text-decoration: none;
    padding: 14px 60px;
    display: inline-block;
}

.btn:hover{
    opacity: .8;
}

.btn--box{
    margin-top: 40px;
    margin-bottom: 30px;
}

.btn--health{
    background-color: #1063FF;
}

.btn--ai{
    background-color: #1C7CA7;
}