body {
        height: 100%;
        width: 100%;
        background: #111;
        letter-spacing:.5px;
    }
    
    p {
        margin: 0 0 20px;
    }
    
    .blue-gradient {
        border-image-source: linear-gradient(45deg, #19cdff, #0074bc);
    }
    
    .blue-gradient-reverse {
        border-image-source: linear-gradient(45deg, #0074bc, #19cdff);
    }
    
    .blue-gradient-border {
        border-style: solid;
        border-width: 10px;
        border-image-slice: 1;
    }
    
    .blue-body-border {
        position: fixed;
    }
    
    .blue-body-border, #header-nav-wrapper {
        z-index:1000;
    }
    
    .content-wrapper {
        background:#fafbfc;
    }
    
    .content {
        width:80%;
        padding:40px 0;
        margin:0 auto;
    }
    
    .bio-text-wrapper {
        color: #eee;
        font-size: 40px;
        min-height:400px;
        padding:40px 0;
        padding-top:0;
    }
    
    .bio-text-image-wrapper {
        float: right;
        display: flex;
        align-items: center;
        height: calc(100vh - 350px);
        min-height:400px;
        max-height:600px;
        text-align:right;
        width:50%;
        justify-content:center;
    }
    
    .bio-text-image-wrapper > img {
        max-width:350px;
    }
    
    .bio-text {
        height: calc(100vh - 350px);
        min-height:400px;
        max-height:600px;
        display: flex;
        align-items: center;
        width:50%;
        
    }
    
    .bio-text-name {
        background-color: #f3ec78;
        background-image: linear-gradient(45deg,  #19cdff, #0074bc);
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color: transparent;
    }
    
    .wrapper {
        padding:85px 20px 0px 20px;
        text-align: left;
        margin: 0 auto;
        min-height:100vh;
    }
    
    #header-nav-wrapper {
        position: fixed;
        top: 0px;
        width: 100%;
        left: 0px;
        height:106px;
        color: #333;
        text-align: right;
    }
    
    #header-nav {
        margin:20px;
        padding:20px 30px;
        background:#111;
        transition:1s all;
    }
    
    #header-nav a {
        color:#fff;
        font-weight:bold;
        font-size:15px;
        text-transform:uppercase;
        display:inline-block;
        margin:0 10px;
        transition:1s all;
    }
    
    #header-nav-wrapper.scroll #header-nav{
        background: #fff;
        border-bottom: 1px solid #e4e4e4;
    }
    
    #header-nav-wrapper.scroll #header-nav a {
        color:#333;
    }
    
    .content-section {
        background: #fff;
    }
    
    h2 {
        display:inline-block;
        background:#111;
        padding:10px 30px;
        color:#eee;
    }
    
    p {
        font-size:18px;
    }
    
    li {
        font-size:18px;
    }
    
    .sub-title {
        text-transform:capitalize;
        text-align:left;
        padding:10px 0px;
        font-size:40px;
    }
    
    .work-description {
        text-align:left;
    }
    
    #footer-wrapper {
        color:#eee;
        background:#111;
        margin:20px;
    }
    
    #footer {
        padding:20px;
    }
    
    .logos {
        text-align:center;
        margin-top:40px;
    }
    
    .logos img {
        margin:20px 40px;
        max-height:55px;
        max-width:90%;
        text-align:center;
    }
    
    .bio-text-wrapper img.icon {
        width:50px;   
    }
    
    @media only screen and (max-width: 1024px) {
        
        #header-nav-wrapper {
            text-align:center;
        }
        
        #header-nav {
            margin:10px;
            padding:20px 10px;
        }
        
        .bio-text-image-wrapper {
            width:25%;   
        }
        
        .bio-text-wrapper img.icon {
            margin:0 auto;
            text-align:center;
            margin-bottom:50px;
        }
        
        .bio-text-wrapper {
            font-size:30px;
            padding:0;
            text-align:center;
        }
        
        .bio-text {
            width:65%;
        }
        
        .bio-text-image-wrapper > img {
            max-width:200px;   
        }
        
        .wrapper {
            padding:10px;
        }
        
        .blue-gradient-border {
            border-style: solid;
            border-width: 5px;
        }
        
        .work-description {
            text-align:left;
        }
    }
    
    @media only screen and (max-width: 500px) {
        .bio-text-image-wrapper {
            width:100%;
            float:none;
            height:auto;
            font-size:35px;
            min-height:unset;
        }
        
        .bio-text-image-wrapper img {
            width:200px;
        }
        
        .bio-text {
            height:auto;
            width:100%;
            min-height: unset;
            margin-top:50px;
            text-align:center;
        }
        
        .bio-text-wrapper {
            padding-top:40px;
        }
        
        .bio-text {
            font-size:20px;
        }
        
        .sub-title {
            font-size:30px;
        }
        
        .logos img {
            max-height:30px;
            margin:10px;
        }
        
        #header-nav a {
            font-size:12px;   
        }
    }