:root {
    font-size: 15px;
}

body {
    margin: 0;
}

/* GeN TeXT */

p {
    font-family: Open Sans;
    font-size: 1rem;
    color: #333333;
}

#top-nav {
    padding: 0.667rem 0 0.667rem 0;
    margin-bottom: 2.667rem;
    
}
.button {
    display: inline-block;
    background: white;
    border: 2px solid #2C33DE;
    border-radius: 5px;
    padding: 0.333rem;
    font-family: Open Sans;
    font-size: 1rem;
    color: #2C33DE;

    text-decoration: none;
    margin-right: 0.667rem;

    transition: 0.2s ease-in-out;
}

.button:hover {
    background: #2C33DE;
    color: white;
}

.button:hover .marker{
    -webkit-animation: bounce-bottom .9s ease-in-out;
    animation: bounce-bottom .3s ease-in-out;
}
.marker {
    display: inline-block;
    font-size: 0.667rem;
}

/* HeaDeR */

.jumbotron {
    display: flex;
}
.logo {

    width: 5.333rem;
    margin-right: 2.667rem;

    display: flex;
    justify-content: center;
    align-items: center;
}

.logo svg {

    width: 5.333rem;

}
.name {
    margin: 0.667rem 0 0.667rem 0;

    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.3px;
    font-size: 3rem;
    color: #000000;
}
.role {

    margin: 0.667rem 0 0.667rem 0;

    font-family: Raleway;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.0947368px;
    font-size: 2rem;
    text-transform: uppercase;
    color: #2C33DE;
}
.location {
    margin: 0.667rem 0 0.667rem 0;

    font-family: Raleway;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.0473684px;

    color: #4A4A4A;
}

/* MaiN CoNTeNT */

main {

 padding: 1.5rem;

}

.section-head {
    font-size: 1.875rem;
    font-family: Raleway;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2C33DE;
}

article {
    padding-left: 1.333rem;
    border-left: 1px solid #DADADA;

}
.section-titles {
    font-family: Raleway;
    font-style: normal;
    font-weight: bold;
    line-height: 11px;
    letter-spacing: 0.08px;

    color: #000000;
}

.date {
    font-family: Raleway;
    font-size: small;
    font-style: normal;
    font-weight: normal;
    line-height: 11px;
    letter-spacing: 0.08px;
    
    color: #2C33DE;
}
/* GaLLeRy */

.work-preview {
    display: block;
    height: 4rem;
    margin: 1.333rem;
    background: #2C33DE;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#hc-mobile{
    background-image: url(/img/wp-hatcxCost2.png);
}
#hc-web{
    background-image: url(/img/wp-hatcxCostWApp.png);
}

#hc-CorWeb{
    background-image: url(/img/wp-HATCXWebsite.png);
}
#V-Escrow{
    background-image: url(/img/wp-Escrow.png);
}

#greyzone{
    background-image: url(/img/wp-GreyZone.png);
}

#Ills{
    background-image: url(/img/wp-ills.png);
}
#wp-Thrive{
    background-image: url(/img/wp-Thrive.png);
}
/* SiDeBaR */
aside {

    margin-left: 1.333rem;
    padding: 1.333rem 1.333rem 0 1.333rem;
    border-left: 1px solid #DADADA;

    position: fixed;
    right: 0;

}

.info-block {

    margin-bottom: 2.667rem;

}

.info-head {   

    margin-bottom: 1.333rem;
    margin-top: 0;
    font-size: 1rem;
    font-family: Raleway;
    font-style: normal;
    font-weight: bold;
    line-height: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #2C33DE;
}

.sidebar-list {
    margin-top: 0;
    padding-left: 0;

    list-style-type: none;
    font-size: 0.875rem;
    font-family: Open Sans;
    letter-spacing: 0.5px;

    color: #333;

}

.sidebar-list li {
    margin-bottom: 0.6667rem;
}

.sidebar-list a {
    text-decoration: none;
    color: #333;
    transition: 0.3s ease-out;
}

.sidebar-list a:hover {
    color: rgb(255, 0, 85);
}

/* GRiD */

.body-wrap {
    max-width: 1500px;
    margin: 0 auto;
    /* padding: 1.5rem; */
    
    display: grid;
    grid-template-columns: 75% 25%;

}


@keyframes bounce-bottom{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(5px);
    }
}



@media only screen and (max-width: 800px){
   .jumbotron{
       margin-top: 4rem;
   }
    .body-wrap{
        display: initial;
    }

    aside {
        position: initial;
    }
    #top-nav {
    background: #2C33DE;
    padding: 1.333rem;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}
#top-nav .button {
    padding: 1rem;
    border: 2px solid white;
}

#top-nav .button:hover {
    border: 2px solid white;
}

}