body,
html{width:100%;height:100%}

@font-face{font-family:CircularStd;src:url(../fonts/CircularStd-Black.eot);
src:url(../fonts/CircularStd-Black.eot?#iefix) 
format('embedded-opentype'),url(../fonts/CircularStd-Black.woff) 
format('woff'),url(../fonts/CircularStd-Black.ttf) 
format('truetype'),url(../fonts/CircularStd-Black.svg#bcc26993292869431e54c666aafa8fcd) 
format('svg');
font-weight:800;font-style:normal}

@font-face{font-family:CircularStd;src:url(../fonts/CircularStd-Book.eot);src:url(../fonts/CircularStd-Book.eot?#iefix) format('embedded-opentype'),url(../fonts/CircularStd-Book.woff) 
format('woff'),url(../fonts/CircularStd-Book.ttf) 
format('truetype'),url(../fonts/CircularStd-Book.svg#bcc26993292869431e54c666aafa8fcd) 
format('svg');
font-weight:400;font-style:normal}
canvas{position:fixed;top:0;left:0;z-index:-1}
body{font-family:CircularStd,sans-serif;webkit-tap-highlight-color:#fff;color:#fff;background:#111010}
:after,:before{-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box}

@media (min-width:1200px){
.container{width:970px!important}}
hr{border-color:rgba(21,3,68,.1);margin:30px 0}
a{color:#fff;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;transition:all .3s;text-decoration:underline}
a:focus,a:hover{color:#888;outline:0!important}
h1,h2,h3,h4,h5,h6{font-family:CircularStd,sans-serif;text-transform:none!important;color:#fff}
h2{font-size:33px;line-height:1.5}
h6{font-size:14px;font-weight:700;letter-spacing:1px;color:#616161;margin-bottom:40px}
p{margin-bottom:20px;font-size:20px;line-height:1.5}
.mt0{margin-top:0}.mb0{margin-bottom:0!important}
.mb10{margin-bottom:10px!important}
.mb20{margin-bottom:20px!important}
.mb30{margin-bottom:30px!important}
.mb60{margin-bottom:40px!important}
.mb80{margin-bottom:80px!important}aside,section{padding:60px 0}
.no-padding{padding:0}
.flt-left{float:left}
.flt-right{float:right}
.txt-left{text-align:left}
.txt-right{text-align:right}
.txt-center{text-align:center}::-moz-selection{text-shadow:none;color:#fff;background:#222}::selection{text-shadow:none;color:#fff;background:#222}
img::selection{color:#fff;background:0 0}
img::-moz-selection{color:#fff;background:0 0}
img{margin-bottom:20px}
.navbar-brand>img{width:200px}
.navbar-default{border:none;font-family:CircularStd,sans-serif;background-color:#111010;
    -webkit-transition:all ease .35s;-moz-transition:all ease .35s;transition:all ease .35s}
.navbar-default .navbar-header .navbar-brand{background:url(../img/krvin-logo.png) no-repeat;background-size:100%;width:105px;margin-top:20px;opacity:.1;
    -webkit-transition:all ease .35s;
    -moz-transition:all ease .35s;transition:all ease .35s}
.navbar-default .navbar-header .navbar-brand:focus,.navbar-default .navbar-header .navbar-brand:hover{color:#fff;opacity:1}
.navbar-default .nav>li>a,.navbar-default .nav>li>a:focus{text-transform:uppercase;font-size:14px;letter-spacing:1px;color:#fff}
.navbar-default .nav>li.active>a,.navbar-default .nav>li.active>a:focus,.navbar-default .nav>li.active>a:focus:hover,.navbar-default .nav>li.active>a:hover,.navbar-default .nav>li>a:focus:hover,.navbar-default .nav>li>a:hover{text-decoration:line-through;background-color:transparent}

@media(min-width:992px){
    .navbar-default{border:none;background-color:transparent;padding-top:20px}
    .navbar-default .navbar-header .navbar-brand:focus,.navbar-default .navbar-header .navbar-brand:hover{color:#fff}.navbar-default .nav>li>a,.navbar-default .nav>li>a:focus{color:#fff;padding:25px 15px;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;-ms-transition:all .15s ease;-o-transition:all .15s ease;transition:all .15s ease;text-decoration:none}
    .navbar-default .nav>li>a:focus:hover,.navbar-default .nav>li>a:hover{color:#fff}
    .navbar-default.affix{border:none;background-color:rgba(17,16,17,1);padding-top:0;-webkit-box-shadow:0 2px 40px 0 rgba(17,16,17,.8);-moz-box-shadow:0 2px 40px 0 rgba(17,16,17,.8);box-shadow:0 2px 40px 0 rgba(17,16,17,.8)}
    .navbar-default.affix .navbar-header .navbar-brand{color:#555;background:url(../img/krvin-logo.png) no-repeat;background-size:100%;opacity:1}.navbar-default.affix .navbar-header .navbar-brand:focus,.navbar-default.affix .navbar-header .navbar-brand:hover{color:#fff}
    .navbar-default.affix .nav>li>a:focus:hover,.navbar-default.affix .nav>li>a:hover{color:#fff}
    .add-padding{padding:0}}

@media (max-width:991px){
    .navbar-brand{padding:10px 15px}
    .navbar-brand>img{width:145px}
    .navbar-default .navbar-header .navbar-brand{background:url(../img/krvin-logo.png) no-repeat;background-size:100%;width:105px;margin-top:20px;margin-left:15px;margin-bottom:0}
    .navbar-default.affix .navbar-header .navbar-brand{opacity:1}
    .navbar-default{-webkit-box-shadow:0 2px 40px 0 rgba(0,0,0,.1);
        -moz-box-shadow:0 2px 40px 0 rgba(0,0,0,.1);
        box-shadow:0 2px 40px 0 rgba(0,0,0,.1)}
    .navbar-header{float:none}
    .navbar-left,.navbar-right{float:none!important}
    .navbar-toggle{display:block}
    .navbar-collapse{border-top:none;box-shadow:none}
    .navbar-fixed-top{top:0;border-width:0 0 1px}
    .navbar-collapse.collapse{display:none!important}
    .navbar-nav{float:none!important;margin-top:7.5px}
    .navbar-nav>li{float:none}.navbar-nav>li>a{padding-top:20px;padding-bottom:20px}
    .collapse.in{display:block!important}
    .navbar-default .nav>li>a,.navbar-default .nav>li>a:focus{border-bottom:none;margin-bottom:0;text-decoration:none}
    .navbar-default .nav>li.active>a,.navbar-default .nav>li.active>a:focus,.navbar-default .nav>li.active>a:focus:hover,.navbar-default .nav>li.active>a:hover{color:#fff!important;background:0 0;border-bottom:none}
    .navbar-default .nav>li>a:focus:hover,.navbar-default .nav>li>a:hover{color:#fff!important;border-bottom:none}}
    .navbar-toggle{position:relative;float:right;padding:10px;margin-top:15px;margin-right:15px;margin-bottom:0;border:none}
    .navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:none;background:0 0}
    .navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:none;border:none}
    .navbar-default .navbar-toggle .icon-bar{background-color:#fff}

@media (min-width:768px){
.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:0}}
header{position:relative;width:100%;min-height:520px;text-align:left}
header .header-content{padding-top:220px}
header .header-content h1{font-size:33px;line-height:1.5;color:#fff}
#project-talkm{background-color:#313131}
#project-talkm .bg{background:url(../img/project-talkm-bg.png) no-repeat;background-position:bottom left;background-size:100%;height:480px;width:100%;position:absolute;top:0;right:0}
#project-talkm .illustration{background:url() no-repeat;background-position:bottom center;background-size:100%;height:;width:;position:absolute;top:0;right:15px}
#project-talkm a:hover{color:#396fd2}

.cta{width:100%;background:#1d1d1d;padding:20px 40px;text-align:left;font-weight:700;font-size:18px;letter-spacing:1px;border:none;-webkit-box-shadow:0 20px 80px 0 rgba(0,0,0,1);-moz-box-shadow:0 20px 80px 0 rgba(0,0,0,1);box-shadow:0 20px 80px 0 rgba(0,0,0,1);-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}
.cta:hover{background:#2f2f2f}
.cta:hover .fas{-ms-transform:translateX(10px);-webkit-transform:translateX(10px);transform:translateX(10px)}
.cta:active,.cta:focus{outline:0}
.cta .fas{position:absolute;right:55px;font-size:24px;top:40%;-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}

.ctb{width:100%;background:#1d1d1d;padding:0px 10px;text-align:left;font-size:18px;letter-spacing:1px;border:none;-webkit-box-shadow:0 20px 80px 0 rgba(0,0,0,1);-moz-box-shadow:0 20px 80px 0 rgba(0,0,0,1);box-shadow:0 20px 80px 0 rgba(0,0,0,1);-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}
.ctb:hover{background:#2f2f2f}
.ctb:hover .fas{-ms-transform:translateX(10px);-webkit-transform:translateX(10px);transform:translateX(10px)}
.ctb:active,.ctb:focus{outline:0}
.ctb .fas{position:absolute;right:55px;font-size:24px;top:40%;-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}

.ctc{width:100%;background:#1d1d1d;padding:0px 10px;text-align:left;font-size:18px;letter-spacing:1px;border:none;-webkit-box-shadow:0 20px 80px 0 rgba(0,0,0,1);-moz-box-shadow:0 20px 80px 0 rgba(0,0,0,1);box-shadow:0 20px 80px 0 rgba(0,0,0,1);-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}
.ctc:hover{background:#2f2f2f}
.ctc:hover .fas{-ms-transform:translateX(10px);-webkit-transform:translateX(10px);transform:translateX(10px)}
.ctc:active,.ctc:focus{outline:0}
.ctc .fas{position:absolute;right:55px;font-size:24px;top:40%;-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}

.ctd{width:100%;background:#1d1d1d;padding:0px 50px;text-align:left;font-size:18px;letter-spacing:1px;border:none;-webkit-box-shadow:0 20px 80px 0 rgba(0,0,0,1);-moz-box-shadow:0 20px 80px 0 rgba(0,0,0,1);box-shadow:0 20px 80px 0 rgba(0,0,0,1);-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}
.ctd:hover{background:#2f2f2f}
.ctd:hover .fas{-ms-transform:translateX(10px);-webkit-transform:translateX(10px);transform:translateX(10px)}
.ctd:active,.ctc:focus{outline:0}
.ctd .fas{position:absolute;right:55px;font-size:24px;top:40%;-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}

#contact{padding:140px 0 0}
#contact h2 a{color:#fff;font-weight:700}
#contact h2 a:hover{color:#888}
.fab,.far{font-size:24px;color:#fff}
#contact ul{margin-top:40px}
#contact li{padding-right:5px;padding-left:5px;width:48px;height:48px;text-align:center;line-height:54px;margin:0 10px;top:0;position:relative;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;-ms-transition:all .15s ease;-o-transition:all .15s ease;transition:all .15s ease}
#contact li:hover{top:-3px;position:relative;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;-ms-transition:all .15s ease;-o-transition:all .15s ease;transition:all .15s ease;-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2)}
.socials{text-align:right}
footer{color:#201f1f;padding-top:80px}
footer a,footer h2{color:#201f1f}
footer a{text-decoration:underline}
footer a:hover{color:#111010}
.copyright{color:#626262;font-size:10px;margin:180px 0 40px}

@media (max-width:991px){
    header .header-content{padding:150px 15px 120px}
    h2{line-height:1.2;margin-bottom:40px!important}
    #project-talkm .illustration{width:55%}}

@media (max-width:767px){header{min-height:400px}
    header .header-content{padding:120px 15px}
    header .header-content h1{font-size:22px;margin-bottom:20px!important;margin-top:60px}
    #about .header-content h1{margin-top:20px;margin-bottom:80px!important}
    section{padding:30px 0}
    
    #project-talkm .bg{height:420px;width:100%;top:0}
    #project-talkm .illustration{width:60%;height:420px}
    
    #contact{padding:40px 0 0}
    #contact li{width:32px;height:32px}
    #about .header-content{padding:120px 15px 0}
    .caption .text-right{display:none}h2{font-size:22px;line-height:1.5;margin-top:0}
    #about h6,#experience h6{margin-bottom:20px}
    .tools{margin-bottom:0}
    #projects .cta{padding:40px 20px}
    #projects .cta i{top:40%}
    #experience .cta div,#projects .cta div{width:80%}
    #experience .cta{margin-top:80px;margin-bottom:40px;padding:40px 20px}
    #experience .cta i{top:55%}
    #projects .ctb{padding:40px 20px}
    #projects .ctb i{top:40%}
    #experience .ctb div,#projects .cta div{width:80%}
    #experience .ctb{margin-top:80px;margin-bottom:40px;padding:40px 20px}
    #experience .ctb i{top:55%}
    .copyright{margin:60px 0 40px}}

@media (max-width:480px){h2{margin-bottom:20px!important}
    #awwwards{display:none;}
    #experience h2{margin-bottom:80px!important}
    #experience .tools h2{margin-bottom:0!important}
    #project-biomark .bg,#project-edukasyon .bg,#project-gluthea .bg,#project-talkm .bg,#project-talkm .illustration{width:100%}
    #project-talkm .illustration{width:90%;right:10%}