body{
     background:#100e17;
}
 h1, h2, h3, h4, h5, h6, .h01, .h02, .h03, .h04, .h05, .h06 {
     font-family: "poppins-semibold", sans-serif;
     color: #313131;
     font-style: normal;
     text-rendering: optimizeLegibility;
     margin-bottom: 2.1rem;
}
 h3, .h03, h4, .h04 {
     margin-bottom: 1.8rem;
}
 h5, .h05, h6, .h06 {
     font-family: "poppins-bold";
     margin-bottom: 1.2rem;
}
 h1, .h01 {
     font-size: 3.1rem;
     line-height: 1.355;
     letter-spacing: -.1rem;
}
 @media only screen and (max-width:600px) {
     h1, .h01 {
         font-size: 2.6rem;
         letter-spacing: -.07rem;
    }
}
 h2, .h02 {
     font-size: 2.4rem;
     line-height: 1.25;
}
 h3, .h03 {
     font-size: 2rem;
     line-height: 1.5;
}
 h4, .h04 {
     font-size: 1.7rem;
     line-height: 1.765;
}
 h5, .h05 {
     font-size: 1.4rem;
     line-height: 1.714;
     text-transform: uppercase;
     letter-spacing: .15rem;
}
 h6, .h06 {
     font-size: 1.3rem;
     line-height: 1.846;
     text-transform: uppercase;
     letter-spacing: .15rem;
}
 p img {
     margin: 0;
}
 p.lead {
     font-family: "lora-regular", serif;
     font-size: 2rem;
     line-height: 1.8;
     color: #888888;
}
 @media only screen and (max-width:768px) {
     p.lead {
         font-size: 1.7rem;
    }
}
 em, i, strong, b {
     font-size: 1.7rem;
     line-height: 3rem;
     font-style: normal;
     font-weight: normal;
}
 em, i {
     font-family: "lora-italic", serif;
}
 strong, b {
     font-family: "lora-bold", serif;
}
 small {
     font-size: 1.2rem;
     line-height: inherit;
}
 blockquote {
     margin: 3rem 0;
     padding-left: 4rem;
     position: relative;
}
 blockquote:before {
     content: "\201C";
     font-size: 8rem;
     line-height: 0px;
     margin: 0;
     color: #313131;
     font-family: arial, sans-serif;
     position: absolute;
     top: 3rem;
     left: 0;
}
 blockquote p {
     font-family: georgia, serif;
     font-style: italic;
     padding: 0;
     font-size: 1.9rem;
     line-height: 1.737;
}
 blockquote cite {
     display: block;
     font-size: 1.3rem;
     font-style: normal;
     line-height: 1.616;
}
 blockquote cite:before {
     content: "\2014 \0020";
}
 blockquote cite a, blockquote cite a:visited {
     color: #888888;
     border: none;
}
 abbr {
     font-family: "poppins-bold", serif;
     font-variant: small-caps;
     text-transform: lowercase;
     letter-spacing: .05rem;
     color: #888888;
}
 var, kbd, samp, code, pre {
     font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
 pre {
     padding: 2.4rem 3rem 3rem;
     background: #F1F1F1;
}
 code {
     font-size: 1.4rem;
     margin: 0 .2rem;
     padding: .3rem .6rem;
     white-space: nowrap;
     background: #F1F1F1;
     border: 1px solid #E1E1E1;
     border-radius: 3px;
}
 pre > code {
     display: block;
     white-space: pre;
     line-height: 2;
     padding: 0;
     margin: 0;
}
 pre.prettyprint > code {
     border: none;
}
 del {
     text-decoration: line-through;
}
 abbr[title], dfn[title] {
     border-bottom: 1px dotted;
     cursor: help;
}
 mark {
     background: #FFF49B;
     color: #000;
}
 hr {
     border: solid #d2d2d2;
     border-width: 1px 0 0;
     clear: both;
     margin: 2.4rem 0 1.5rem;
     height: 0;
}
 #intro {
     background:#000;
     -webkit-background-size:cover;
     -moz-background-size:cover background-size:cover;
     background-attachment:fixed;
     width:100%;
     height:100%;
     position:relative;
     text-align:center;
     display:table;

}
 .header-video {
     position:relative;
     overflow:hidden;
     display:table-cell;
     vertical-align:center;
     text-align: center;
     -webkit-transform: translateY(-2.1rem);
     -ms-transform: translateY(-2.1rem);
     transform: translateY(-2.1rem);
}
 .header-video img{
     min-height:300px;
     width:100%;
     height:100%;
     filter:brightness(50%);
}
 .header-video iframe{
     position:absolute;
     z-index:999;
     top:14%;
     left:8%;
     height:76%;
     width: 84%;
}
 .header-video video{
     position:absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
    /*filter:blur(4px);
    */
    filter:brightness(60%) grayscale(60%);
}
 .header-video{
     width:70%;
}
 .header-video__teaser-video{
     width:100%;
     height:auto;
}
@media screen and (max-width:400px){
  .header-video__teaser-video{
      width:100%;
      height:auto;
 }

}
 .header-video__media{
     width: 100%;
     height:100%;
}
 .header-video h1 {
     position:absolute;
     z-index:5;
     top:50%;
     left:10%;
     color: #FFFFFF;
     font-family: "poppins-bold", sans-serif;
     font-size: 7.4rem;
     line-height: 1.071;
     max-width: 1900px;
     margin-left: auto;
     margin-right: auto;
     text-transform:uppercase;
     text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
 .header-video h5 {
     color: #cc005f;
     font-family: "poppins-bold", sans-serif;
     font-size: 2.3rem;
     line-height: 1.565;
     margin-bottom: 0;
     text-transform: uppercase;
     letter-spacing: .3rem;
     text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
 .header-video .intro-position {
     position:absolute;
     z-index:5;
     top:38%;
     left:20%;
     font-family: "lora-regular", serif;
     font-size: 1.7rem;
     line-height: 2.4rem;
     text-transform: uppercase;
     letter-spacing: .2rem;
     color: #FFFFFF;
     text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
 .header-video .intro-position span {
     display: inline-block;
}
 .header-video .intro-position span::after {
     content: "|";
     text-align: center;
     display: inline-block;
     padding: 0 8px 0 14px;
     color: rgba(255, 255, 255, 0.3);
}
 .header-video .intro-position span:first-child::before {
     content: "|";
     text-align: center;
     display: inline-block;
     padding: 0 14px 0 8px;
     color: rgba(255, 255, 255, 0.3);
}
 .header-video .lead{
     position:absolute;
     z-index:5;
     top:84%;
     left:30%;
     font-family:"lora-regular", sans-serif;
     font-size:1.7rem;
     line-height:2.4rem;
     letter-spacing: .2rem;
     color:#FFFFFF;
     text-shadow: 0 0 6px rgba(0,0,0.2);
}
@media screen and (max-width: 900px){
  .header-video .lead{
      position:absolute;
      z-index:5;
      top:74%;
      left:30%;
      font-family:"lora-regular", sans-serif;
      font-size:1.7rem;
      line-height:2.4rem;
      letter-spacing: .2rem;
      color:#FFFFFF;
      text-shadow: 0 0 6px rgba(0,0,0.2);
 }
}

 .header-video .lead span{
     display:inline-block;
}
 .header-video__play-trigger {
     z-index: 5;
     position: absolute;
     background: rgba(0,0,0,.3);
     text-align: center;
     text-transform:uppercase;
     color: white;
     text-decoration: none;
     padding: 1em 3em;
     z-index: 5;
     left: 50%;
     top: 80%;
     border-radius: 10px;
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     -webkit-transition: background .5s;
     -moz-transition: background .5s;
     transition: background .5s;
}
 #header-video__play-trigger:hover {
     text-decoration:none;
     background: white;
     color:black;
}
/* closing trigger */
 .header-video__close-trigger{
     z-index:1000;
     position:absolute;
     background:#363636;
     text-align:center;
     color:white;
     text-decoration:none;
     border-radius:30%;
     right:8%;
     top:14%;
     transition:background 0.5s;
     border:none;
     opacity:0.5;
}
 .header-video__close-trigger:hover{
     background:#db0606;
     cursor:pointer;
     opacity:1;
}
 @media screen and (max-width: 1024px){
     .header-video h1 {
         position:absolute;
         z-index:5;
         top:44%;
         left:20%;
         color: #FFFFFF;
         font-family: "poppins-bold", sans-serif;
         font-size: 4rem;
         line-height: 1.071;
         max-width: 900px;
         margin-top: 0;
         margin-bottom: .10rem;
         margin-left: auto;
         margin-right: auto;
         text-transform:uppercase;
         text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
}
 #resume-intro{
     background:#000;
}
 .resume-intro{
     width:96%;
     margin:auto;
     padding-top:5rem;
     text-align:center;
     position:relative;

     background-size:cover;
     background-repeat:no-repeat;
     background-position:center;
     opacity:0.75;
}
 .resume-intro:after {
     content:"";
     display: block;
     height:10px;
     width: 96%;
     position: absolute;
     bottom: 0;
     border-radius:50%;
}
 .resume-intro h1{
     font-family:"Libre Baskerville", serif;
     font-size:3.6rem;
     color:#dbd7d7;
     margin-bottom:1.2rem;
}
 .resume-content{
     max-width:700px;
     margin:auto;
}
 .resume-link{
     max-width:700px;
     margin:auto;
     padding-top:3rem;
     font-size:1em;
     background:linear-gradient(to right, #ff0000 0%, #ff0000 12%, #e3d409 100%);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     text-transform:uppercase;
}
 .resume-link:hover{
     animation:3s infinite Heartbeat;
}
 @keyframes Heartbeat{
     0%{
         transform:scale(1.1);
    }
     25%{
         transform:scale(1.3);
    }
     40%{
         transform:scale(1);
    }
     60%{
         transform:scale(1.3);
    }
     100%{
         transform:scale(1);
    }
}
 .resume-link a{
     text-decoration:none;
}
 #codehub-intro{
     background:#000;
}
 .codehub-intro{
     width:96%;
     margin:auto;
     text-align:center;
     position:relative;
}
 .codehub-intro h1{
     font-family:"Libre Baskerville", serif;
     font-size:2.6rem;
     color:#dbd7d7;
     margin-bottom:1.2rem;
     margin: auto;
}
 .codehub-intro .codehub-content{
     position:relative;
     margin:auto;
     width:auto;
     padding-top:4rem;
     height:auto;
     display:flex;
     flex-wrap:wrap;
     justify-content:space-between;
}

 .codehub-intro .codehub-section{
     flex:1;
     flex-basis:300px;
     flex-grow:0;
     height:auto;
     background:#000;
     border:none;

     overflow:hidden;
     position:relative;
     height: 250px;
}
 .codehub-section .icon{
     display:inline-block;
     margin-bottom:2.1rem;
     margin-top: 1rem;
}
 .codehub-section .icon i{
     font-size:8rem;
     color:#fff;
}
 .codehub-section p{
     color:#808080;
}
.codehub-intro:after {
    content:"";
    display: block;
    height:10px;
    width: 96%;
    position: absolute;
    bottom: 0;
    border-radius:50%;
}
 #portfolio-intro{
     background:#100e17;
}
 .portfolio-intro{
     width:96%;
     margin:auto;
     padding-top:5rem;
     padding-bottom:5rem;
     text-align:center;
     position:relative;
}
 .portfolio-intro h1{
     font-family:"Libre Baskerville", serif;
     font-size:3.6rem;
     color:#dbd7d7;
     margin-bottom:1.2rem;
}
 .portfolio-intro .main{
     position:relative;
     margin:auto;
     width:92%;
     padding-bottom:4rem;
     padding-top:4rem;
     height:auto;
     display:flex;
     flex-wrap:wrap;
     justify-content:space-between;
}
 .portfolio-intro .section{
     flex:1;
     flex-basis:360px;
     flex-grow:0;
     height:360px;
     background:#fff;
     border:none;
     box-shadow:0px 4px 7px rgba(0,0,0,.5);
     transition:all .5s ;
     overflow:hidden;
     position:relative;
}
 .portfolio-intro .section img{
     width:100%;
     height:100%;
     filter:grayscale(70%);
     transition:all .5s;
}
 .portfolio-intro .descriptions{
     position:absolute;
     top:0px;
     left:0px;
     background-color:rgba(0,0,0,.7);
     width:100%;
     height:100%;
     transition:all .7s ease-in-out;
     box-sizing:border-box;
     clip-path:circle(0% at 100% 100%);
}
 .portfolio-intro .section:hover .descriptions{
     left:0px;
     transition:all .7s ease-in-out;
     clip-path:circle(75%);
}
 .portfolio-intro .section:hover{
     transition:all .5s ;
     box-shadow:0px 2px 3px rgba(0,0,0,.3);
}
 .portfolio-intro .section:hover img{
     transition:all .5s ;
     filter:blur(2px) grayscale(100%);
}
 .portfolio-intro .section p{
     color: #FFFFFF;
     margin-top:9rem;
     margin-bottom:0px;
}
 .portfolio-intro .section h1{
     color:#5cb85c;
     letter-spacing:1px;
     margin:0px;
}
 .portfolio-intro .section button{
     width:fit-content;
     cursor:pointer;
     margin:0px;
}
 .portfolio-intro .section button:hover{
     background:white;
     transition:all .3s ease-in-out;
}
.portfolio-intro:after {
    content:"";
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(200, 200, 200, 1) 47%, rgba(0, 0, 0, 0) 100%);
    display: block;
    height:10px;
    width: 96%;
    position: absolute;
    bottom: 0;
    border-radius:50%;
}
 #vlog-intro{
    /*background:#07070f;
    */
     background:#100e17;
}
 .vlog-intro{
     width:86%;
     margin:auto;
     padding-top:5rem;
     padding-bottom:5rem;
     text-align:center;
     position:relative;
     background:#100e17;
}
 .vlog-intro h1{
     font-family:"poppins-semibold", serif;
     font-size:3.6rem;
     color:#dbd7d7;
     margin-bottom:1.2rem;
}
 .vlog-lead{
     padding-bottom:2rem;
}
 .vimage{
     width:86%;
     height:480px;
     margin:auto;
     text-align:center;
     position:relative;
     background-image:url("../img/topograph.jpeg");
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center;
}
 .vimage .vlog_bt{
     position:relative;
     font-size:48px;
     color:white;
     top: 50%;
     transform: translateY(-50%);
}
 .show-popup .popup {
     opacity:1;
     visibility: visible;
}
 #contact-intro{
    /*background:#07070f;
    */
     background-image:radial-gradient(ellipse closest-side, rgb(15,14,22,0.75),#100e17),url("/static/app/img/TIN1.png");
     background-size:cover;
     background-repeat:no-repeat;
     background-position:left;
}
 .contact-intro{
     max-width:700px;
     margin:auto;
     padding-top:5rem;
     padding-bottom:5rem;
     text-align:center;
     position:relative;
     box-shadow:0px 4px 7px rgba(15,0,0,.8);
    /*background-image:radial-gradient(ellipse closest-side, rgb(14,14,22,0.75),#100e17),url("/static/app/img/hire.jpg");
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center;
    */
}
 .contact-intro h1{
     font-family:"Libre Baskerville", serif;
     font-size:3.6rem;
     color:#dbd7d7;
     margin-bottom:1.2rem;
     padding-bottom:4rem;
     text-shadow:2px 2px rgba(15,0,0,.8);
}
 #about-intro{
     background:#100e17;
}
 .about-intro{
     width:96%;
     margin:auto;
     padding-top:5rem;
     padding-bottom:5rem;
     text-align:center;
     position:relative;
}
 .about-intro h1{
     font-family:"Libre Baskerville", serif;
     font-size:3.6rem;
     color:#dbd7d7;
     margin-bottom:1.2rem;
}
 .about-content{
     width:100%;
     padding-left:16px;
     height:100vh;
}
 #instafeed{
     list-style:none;
}
 #instafeed li{
     float:right;
     margin:1rem;
     position:relative;
     width:18%;
     height:30%;
     overflow:hidden;
     background:linear-gradient(135deg, #02aab0, #00cdac);
    /*padding:60px 30px;
    */
     padding-top:0px;
     border-radius:4px;
}
 #instafeed img{
     width:100%;
     height:100%;
     border-radius: 5px 5px 0 0;
}
 #blog-intro{
     background:#100e17;
}
 .blog-intro{
     width:96%;
     margin:auto;
     padding-top:5rem;
     padding-bottom:5rem;
     text-align:center;
     position:relative;
}
 .blog-intro h1{
     font-family:"Libre Baskerville", serif;
     font-size:3.6rem;
     color:#dbd7d7;
     margin-bottom:1.2rem;
}
 .blog-content{

     width:100%;
     padding-left:16px;
     padding-right:16px;
     height:100vh;
     display:flex;
     flex-flow:row wrap;
     justify-content:flex-end;
     align-items:center;
}
 .blog-content .title a{
     color:white;
     text-decoration:none;
     font-family:"lora-regular", sans-serif;
}
 .blog-content span{
     color:#fafafa;
}
 .g-card{
     margin-left:6%;
     position:relative;
     width:320px;
     height:560px;
     overflow:hidden;
     background:linear:transparent;
    /*padding:60px 30px;
    */
     padding-top:0px;
     border-radius:4px;
}
 .publisher{
     font-family:'Josefin Sans', sans-serif;
     font-size:1.3rem;
     color:#fafafa;
     opacity:.8;
}
 .g-card img{
     border-radius: 5px 5px 0 0;
}
/*.g-card img:hover{
     -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 100%);
     mask-image: linear-gradient(to bottom, transparent 25%, black 100%);
}
*/
/*------------------------------------------------------ * Tablet *---------------------- */
 @media screen and (max-width: 768px){
     #intro {
         height:50%;
    }
     .header-video h1 {
         top:54%;
         left:26%;
         font-size: 3.5rem;
         line-height: 1.071;
         max-width: 400px;
    }
     .header-video .intro-position {
         top:40%;
         left:0%;
         font-size: 1.5rem;
    }
     .header-video .lead{
         top:68%;
         left:5%;
         font-size:1.5rem;
         line-height:1.4rem;
    }
     .header-video__play-trigger {
         padding: 1em 3em;
         left: 50%;
         top: 89%;
         font-size:50%;
         border-radius: 25px;
    }
     .resume-intro h1{
         font-size:2.1rem;
    }
     .resume-content{
         font-size:1.6rem;
    }
     .resume-link{
         font-size:1.1rem;
    }
     .codehub-intro h1{
         font-size:2.1rem;
    }
     .codehub-intro .codehub-section{
         padding-top:2.5rem;
         height:300px;
         flex-basis:200px;
         margin-bottom:1rem;
    }
     .codehub-section .icon{
         display:inline-block;
         margin-bottom:2rem;
    }
     .codehub-section .icon i{
         font-size:4rem;
    }
     .codehub-section p{
         font-size:1.6rem;
    }
     .portfolio-intro h1{
         font-size:2.1rem;
    }
     .portfolio-intro .section{
         flex-basis:15rem;
         margin-bottom:1.5rem;
         height:15rem;
    }
     .portfolio-intro .section p{
         font-size:1.1rem;
         margin-top:3rem;
    }
     .portfolio-intro .section h1{
         font-size:1.3rem;
    }
     .portfolio-intro .section button{
         width:fit-content;
         cursor:pointer;
         margin:0px;
         font-size:1.2rem;
    }
     .portfolio-intro .section button:hover{
         background:white;
         transition:all .3s ease-in-out;
    }
     .portfolio_button{
         font-size:1.4rem;
    }
     .vlog-intro h1{
         font-size:2.1rem;
    }
     .vlog-lead{
         padding-bottom:2rem;
         font-size:1.3rem;
    }
     .vimage{
         width:86%;
         height:240px;
         margin:auto;
         text-align:center;
         position:relative;
         background-image:url("/static/app/img/TIN1.png");
         background-size:cover;
         background-repeat:no-repeat;
         background-position:center;
    }
     .vimage .vlog_bt{
         position:relative;
         font-size:48px;
         color:white;
         top: 50%;
         transform: translateY(-50%);
    }
     .show-popup .popup {
         opacity:1;
         visibility: visible;
    }
     .contact-intro{
         width:96%;
    }
     .contact-intro h1{
         font-size:2.1rem;
         padding-bottom:0;
    }
     .contact-intro p span{
         font-size:1.3rem;
    }
     .contact-intro .contact_button{
         font-size:1.2rem;
    }
     .about-intro h1{
         font-size:2.1rem;
         margin-bottom:0;
         padding-bottom:0;
    }
     .about-content{
         width:100%;
         padding-left:10%;
         height:760px;
    }
     #instafeed{
         list-style:none;
         margin: 0 auto;
    }
     #instafeed li{
         float:left;
         margin:1rem;
         position:relative;
         width:25%;
         height:25%;
         padding-top:0px;
         border-radius:4px;
    }
     #instafeed li img{
         width:100%;
         height:100%;
         border-radius: 5px 5px 0 0;
    }
     .about-intro .about_button{
         font-size:1.2rem;
    }
     .blog-intro{
         padding-top:0;
        e;
    }
     .blog-intro h1{
         font-size:2.1rem;
    }
     .blog-content{
         height:auto;
         padding-bottom:16px;
         flex-flow:row nowrap;
         justify-content:flex-start;
         align-items:flex-start;
    }
     .blog-content .g-card{
         width:80%;
         height:auto;
         margin-bottom:1.4rem;
    }
     .blog-content .g-card .title{
         font-family:'Josefin Sans', sans-serif;
         font-size:1.4rem;
         color:white;
         margin-bottom:0;
    }
     .blog-content .g-card .publisher{
         font-size:1.rem;
    }
     .blog-content .g-card img{
         border-radius: 5px 5px 0 0;
         height:7em;
    }
     .blog-intro .blog_button{
         font-size:1.2rem;
    }
    /*--------------------end media ---------- * max-width 768px */
}
/*---------------------------- * large mobile device */
 @media screen and (max-width: 600px){
     #intro {
         height:42%;
    }
     .header-video h1 {
         top:40%;
         left:0%;
         font-size: 2.4rem;
         line-height: 1.071;
         max-width: 400px;
    }
     .header-video .intro-position {
         top:30%;
         left:0%;
         font-size: 1rem;
         line-height: 1.4rem;
         width: 90%;
         text-align: center;
    }
     .header-video .lead{
         top:65%;
         left:5%;
         font-size:1rem;
         line-height:1.4rem;
    }
     .header-video__play-trigger {
         padding: 1em 3em;
         left: 50%;
         top: 89%;
         font-size:50%;
         border-radius: 25px;
    }
     .resume-intro h1{
         font-size:2.1rem;
    }
     .resume-content{
         font-size:1.6rem;
    }
     .resume-link{
         font-size:1.1rem;
    }
     .codehub-intro h1{
         font-size:2.1rem;
    }
     .codehub-intro .codehub-section{
         flex-basis: 50%;
         padding-top:2.5rem;
         height:300px;
         margin-bottom:1rem;
    }
    .codehub-intro .codehub-content{
        position:relative;
        margin:auto;
        width:auto;
        padding-bottom:0rem;
        padding-top:4rem;
        height:auto;
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
   }
     .codehub-section .icon{
         display:inline-block;
         margin-bottom:2rem;
    }
     .codehub-section .icon i{
         font-size:4rem;
    }
     .codehub-section p{
         font-size:1.6rem;
    }
     .portfolio-intro h1{
         font-size:2.1rem;
    }
     .portfolio-intro .section{
         flex-basis:15rem;
         margin-bottom:1.5rem;
         height:15rem;
    }
     .portfolio-intro .section p{
         font-size:1.1rem;
         margin-top:3rem;
    }
     .portfolio-intro .section h1{
         font-size:1.3rem;
    }
     .portfolio-intro .section button{
         width:fit-content;
         cursor:pointer;
         margin:0px;
         font-size:1.2rem;
    }
     .portfolio-intro .section button:hover{
         background:white;
         transition:all .3s ease-in-out;
    }
     .portfolio_button{
         font-size:1.4rem;
    }
     .vlog-intro h1{
         font-size:2.1rem;
    }
     .vlog-lead{
         padding-bottom:2rem;
         font-size:1.3rem;
    }
     .vimage{
         width:86%;
         height:240px;
         margin:auto;
         text-align:center;
         position:relative;
         background-image:url("/static/app/img/coffe.jpg");
         background-size:cover;
         background-repeat:no-repeat;
         background-position:center;
    }
     .vimage .vlog_bt{
         position:relative;
         font-size:48px;
         color:white;
         top: 50%;
         transform: translateY(-50%);
    }
     .show-popup .popup {
         opacity:1;
         visibility: visible;
    }
     .contact-intro{
         width:96%;
    }
     .contact-intro h1{
         font-size:2.1rem;
         padding-bottom:0;
    }
     .contact-intro p span{
         font-size:1.3rem;
    }
     .contact-intro .contact_button{
         font-size:1.2rem;
    }
     .about-intro h1{
         font-size:2.1rem;
         margin-bottom:0;
         padding-bottom:0;
    }
     .about-intro .about_button{
         font-size:1.2rem;
    }
     .blog-intro{
         padding-top:0;
        e;
    }
     .blog-intro h1{
         font-size:2.1rem;
    }
     .blog-content{
         height:auto;
         padding-bottom:16px;
         flex-flow:row nowrap;
         justify-content:flex-start;
         align-items:flex-start;
    }
     .blog-content .g-card{
         width:80%;
         height:auto;
         margin-bottom:1.4rem;
    }
     .blog-content .g-card .title{
         font-family:'Josefin Sans', sans-serif;
         font-size:1.4rem;
         color:white;
         margin-bottom:0;
    }
     .blog-content .g-card .publisher{
         font-size:1.rem;
    }
     .blog-content .g-card img{
         border-radius: 5px 5px 0 0;
         height:7em;
    }
     .blog-intro .blog_button{
         font-size:1.2rem;
    }
    /*------------------- * end media max-size 600px */
}
/*--------------- * small mobile device */
 @media screen and (max-width: 375px){
     #intro {

	       height: 35%;
    }
     .header-video img{

         width:100%;
         height:100%;
         filter:brightness(40%);
    }
     .header-video h1 {
         font-family:"lora-bold-italic";
         top:45%;
         left:0%;
         font-size: 130%;
         line-height: 1.071;
         max-width: 400px;
    }
     .header-video .intro-position {
         font-family:"poppins-medium",serif;
         top:30%;
         left:0%;
         font-size: 60%;
         line-height: 1.4rem;
         width: 80%;
         left: 8%;
    }
     .header-video .lead{
         font-family:"poppins-light",serif;
         top:70%;
         left:8%;
         font-size:60%;
         line-height:1.4rem;
         text-align: center;
    }
     .header-video__play-trigger {
         padding: 1em 3em;
         left: 50%;
         top: 89%;
         font-size:50%;
         border-radius: 25px;
    }
     .resume-intro h1{
         font-size:2.1rem;
    }

     .resume-content{
         font-size:1.6rem;
    }
     .resume-link{
         font-size:1.1rem;
    }
     .codehub-intro h1{
         font-size:2.1rem;
    }
     .codehub-intro .codehub-section{
       flex-basis: 50%;
       padding-top:2.5rem;
       height:300px;
       margin-bottom:1rem;

    }
    .codehub-intro .codehub-content{
        position:relative;
        margin:auto;
        width:auto;
        padding-bottom:0rem;
        padding-top:4rem;
        height:auto;
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
   }
     .codehub-section .icon{
         display:inline-block;
         margin-bottom:2rem;
    }
     .codehub-section .icon i{
         font-size:4rem;
    }
     .codehub-section p{
         font-size:1.6rem;
    }
     .portfolio-intro h1{
         font-size:2.1rem;
    }
     .portfolio-intro .section{
         flex-basis:280px;
         flex:auto;
         margin-left:2.5rem;
         margin-right:2.5rem;
         margin-bottom:1.5rem;
         height:250px;
    }
     .portfolio-intro .section p{
         font-size:1.3rem;
    }
     .portfolio-intro .section h1{
         font-size:1.8rem;
    }
     .portfolio-intro .section button{
         width:fit-content;
         cursor:pointer;
         margin:0px;
         font-size:1.3rem;
    }
     .portfolio-intro .section button:hover{
         background:white;
         transition:all .3s ease-in-out;
    }
     .portfolio_button{
         font-size:1.4rem;
    }
     .vlog-intro h1{
         font-size:2.1rem;
    }
     .vlog-lead{
         padding-bottom:2rem;
         font-size:1.3rem;
    }
     .vimage{
         width:86%;
         height:240px;
         margin:auto;
         text-align:center;
         position:relative;
         background-image:url("/static/app/img/coffe.jpg");
         background-size:cover;
         background-repeat:no-repeat;
         background-position:center;
    }
     .vimage .vlog_bt{
         position:relative;
         font-size:48px;
         color:white;
         top: 50%;
         transform: translateY(-50%);
    }
     .show-popup .popup {
         opacity:1;
         visibility: visible;
    }
     .contact-intro{
         width:96%;
    }
     .contact-intro h1{
         font-size:2.1rem;
         padding-bottom:0;
    }
     .contact-intro p span{
         font-size:1.3rem;
    }
     .contact-intro .contact_button{
         font-size:1.2rem;
    }
     .about-intro h1{
         font-size:2.1rem;
         margin-bottom:0;
         padding-bottom:0;
    }
     .about-content{
         width:100%;
         padding-left:20%;
         height:50vh;
    }
     #instafeed{
         list-style:none;
    }
     #instafeed li{
         float:left;
         margin:1rem;
         position:relative;
         width:20%;
         height:20%;
         overflow:hidden;
         padding-top:0px;
         border-radius:4px;
    }
     #instafeed li img{
         width:100%;
         height:100%;
         border-radius: 5px 5px 0 0;
    }
     .about-intro .about_button{
         font-size:1.2rem;
    }
     .blog-intro{
         padding-top:0;
        e;
    }
     .blog-intro h1{
         font-size:2.1rem;
    }
     .blog-content{
         height:auto;
         padding-bottom:16px;
         flex-flow:column wrap;
         justify-content:flex-start;
         align-items:flex-start;
    }
     .blog-content .g-card{
         width:80%;
         height:auto;
         margin-bottom:1.4rem;
    }
     .blog-content .g-card .title{
         font-family:'Josefin Sans', sans-serif;
         font-size:1.4rem;
         color:white;
         margin-bottom:0;
    }
     .blog-content .g-card .publisher{
         font-size:1.rem;
    }
     .blog-content .g-card img{
         border-radius: 5px 5px 0 0;
         height:7em;
    }
     .blog-intro .blog_button{
         font-size:1.2rem;
    }
    /*------------------------------ *end max-size 450px */
}
#videoBG{
  position: fixed;
  z-index: -1;
}