/*
 * Globals
 */
/*General Styles*/

body {
    background: #ffffff;
  color: #333;
  text-align: left;
  font-family: 'Quicksand', sans-serif;
}
img{max-width: 100%;}
/*.site-main {
    border-left: 25px solid #f5f5f5;
    border-right: 25px solid #f5f5f5;
    border-top: 30px solid #f5f5f5;
    border-bottom: 30px solid #f5f5f5;
}*/
/*
 * Base structure
 */
html,
body {
  height: 100%;
}
.col-float{float:left;}
.col-right{float:right;}

/* Links */
a,
a:focus,
a:hover {
  color: #333;
  cursor:pointer;
      text-decoration:none;;
}

/* Custom default button */
.btn-default {
  color: #fff;
  text-shadow: none;
  /* Prevent inheritence from `body` */
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 0.5rem 2rem;
}

.btn-default:hover,
.btn-default:focus {
  background-color: rgba(255, 255, 255, 0.3);
}

.pad-lft-rht{padding: 0 25px;}



/* Padding for spacing */
.inner {
  padding: 30px;
}

/*
 * Header
 */

header#header {padding: 70px 0 70px;position: fixed;width: 100%;z-index:10;}
img.logo{max-width: 50px;}
ul#site-nav{float: right; list-style: none; margin: 0; padding: 0;}
.navbar ul#site-nav li { float: left;}
.header-main .header-content{display: inline-block;width: 100%;}
.header-main .header-content .logo{float:left;font-weight: 600;letter-spacing: 9px;}
.header-right{float:right;}

/*Menu*/
.header-right nav{padding: 0;}
.navbar ul#site-nav li a { padding: 0 20px;font-size: 18px;display: block;color: #999;font-weight: 400;}
.navbar ul#site-nav li:last-child a{padding-right: 0;}
.navbar ul#site-nav li a.active{color: #333;}
.navbar ul#site-nav li a.active:after, .navbar ul#site-nav li a:hover::after {
    content: "";
    border-bottom: 3px solid #E54949;
    height: 3px;
    display: block;
}
#main-nav {margin: 0;
    padding: 0;
    right: 0 !important;
    display: block;}

.navbar ul#site-nav li a:hover, .navbar ul#site-nav li a.active{color: #333;}


/*Intro Content*/
section.intro-banner{padding:180px 0 0;}
section.intro-banner, section.proj-item, footer.footer-main {
   
}
section.proj-item2 {
    padding: 100px 0;
}
.intro-banner h1{font-weight: 100;line-height: 50px;    padding-top: 5px;}
.intro-banner img{max-width: 32px;}
.intro-banner ul#site-nav, .intro-banner ul#site-nav li {float: left;}
.intro-banner ul#site-nav li a {font-weight: 600;}
.intro-banner ul#site-nav li a:hover{color:#999;}
.intro-banner ul#site-nav li:nth-child(2) a {padding: 0 15px;}
.intro-banner ul#site-nav {padding-top: 30px;}
.intro-banner ul#site-nav li:nth-child(2) a:after, .intro-banner ul#site-nav li:nth-child(1) a:after { content: "-"; padding-left: 15px;}

.proj1, .proj2, .proj3, .proj4  {
       
    display: inline-block;
    min-height: 320px;
    position: relative;
    width: 100%;
    margin-bottom: 95px;
}
.proj-item1, .proj-item2, .proj-item3, .proj-item4 {
    padding: 50px 0;position:relative;
}
section.intro-banner h5{color: #c1c1c1;font-size:16px;}
.proj-item1 img, .proj-item3 img{position: absolute; bottom: 0; right: 0px; max-width: 820px;}
.proj-item1 {background:#9ed3e5;}

.proj-item3 {background:#c7d7e6;}
.project-container ol, .project-container ul, .proj-desc ul, .proj-desc ol {margin: 0;padding: 0 15px;color: #666;line-height: 28px;font-size: 18px;}
.project-container ol li, .project-container ul li, .proj-desc ul li, .proj-desc ol li{padding-bottom: 20px;}
.project-container figcaption, .wireframe-img figcaption{color: #999;text-align: center;margin: 0 auto;}
.col-box .col-float h6{padding-bottom: 15px;border-bottom: 1px solid #999;font-weight: 600;}
.col-box .col-float{margin-bottom: 30px;}
.dark-bg{background: #D0F2FA;}

.proj-cont {
    width: 50%;
    text-align: left;
    padding: 60px 40px;
}
.proj1 .proj-cont, .proj3 .proj-cont{ float: left;}
.proj2 .proj-cont, .proj4 .proj-cont{float: right;}

.proj-cont h3 a{font-size: 48px;font-weight: 800;position: relative;z-index: 99;}
.proj-cont h3 a:hover{opacity:0.8;}
.proj-cont p{font-size: 18px;padding-top: 10px;}
.proj-cont a{font-weight: 700;font-size: 18px;position: relative;z-index: 99;}
.proj-cont a.read-btn:after{content: url('../img/arrow-right.png');padding: 0px 15px; vertical-align: middle; position: absolute;top:1px;transition-delay: 0.1s;}
.proj-cont a.read-btn:hover::after{padding-left:25px;}
.proj3 img.mobile{right: 10%;}
.proj4 img.mobile{left: 10%;}
.proj3 img.mobile, .proj4 img.mobile{max-width: 320px;}
.proj1 img, .proj2 img, .proj3 img, .proj4 img {
    width: 100%;
    position: absolute;
    bottom: 0;
    max-width: 580px;
}
.proj-item3 img{max-width: 420px;right:15%;}
.proj1 img, .proj3 img {float: right;    right: 0;}
.proj2 img, .proj4 img {float: left;    left: 0;top: 40px;}
.result-val h2{color: #E54949; font-size: 48px;}
.krost .result-val p{font-size: 16px;}
.fit-parent {width: 100%;height: 100%;object-fit: cover;}

.work-header {position: relative;width: 100%;height: 100vh;}

/*Project1*/
/*.project-banner{background-image: url(../img/krost-banner1.png);background-repeat: no-repeat;background-size: contain;
height: 100vw; width: 100%;}*/
section.project-img-main {
    text-align: center;
    position: relative;
 
}
#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}
section.proj-overvw .col-md-7, .proj-overvw .col-md-5 { float: left;}
a.link-cont { font-size: 18px; border-bottom: 1px solid #E54949;font-weight: 600;padding-top: 20px; display: inline-block;color: #E54949;}
a.btn-link-cont{background: #E54949;color: #fff;padding: 15px 15px;margin: 0 auto;width: 150px;display: inline-block;text-align: center;}
.krost h4{    font-size: 30px;font-weight: 800;    padding-bottom: 15px;}
.krost p {font-size: 18px;color: #666;}
.project-container{width:50vw;margin:0 auto;}


.proj-overvw img.cont-proj-brand {max-width: 150px;}
.proj-prob-bg {background: #f9f9f9;padding: 75px 0;}
section.proj-overvw {position: relative;}
.proj-image img{padding:0 20px;}
.proj-intro-head h5 { font-size: 14px; letter-spacing: 5px;}


.fa-linkedin-in:before {
    content: "\f0e1";
}
.proj-desc{padding: 75px 0;}
.proj-overvw blockquote {margin: 0;padding: 30px 0px;width: 98%;}

.proj-overvw blockquote p, .client-feedbck p {padding: 35px;background: #D0F2FA;font-size: 24px;display: inline-block;}
.proj-overvw blockquote p::before {content: '\201C';}
.proj-overvw blockquote p::after {content: '\201D';}
.proj-overvw blockquote footer.author-cont, .client-feedbck footer.author-cont{border: none;padding: 0;    text-align: right;}


.proj-nxt {width: 100%; display: flex;flex-direction: row;}
.proj-nxt .nxt-cont, .proj-nxt .prev-cont{padding: 70px 45px;}
.proj-nxt .nxt-cont{background: #f1f1f1;float:right;}
.proj-nxt .prev-cont{background: #dcdcdc;}
.proj-nxt .nxt-cont h3, .proj-nxt .prev-cont h3{margin-bottom: 25px;}
.proj-nxt a.nxt-lnk, .proj-nxt a.prev-lnk{color: #E54949;position: relative;}
.proj-nxt a.nxt-lnk:after{content: url('../img/right-arrow-red.png');padding: 0px 15px; vertical-align: middle; position: absolute;top:1px;transition-delay: 0.1s;}
.proj-nxt a.prev-lnk:before{content: url('../img/right-arrow-red.png');padding: 0px 15px; vertical-align: middle; position: absolute;top:-5px;transition-delay: 0.1s;left: -10px;    transform: scale(-1);}
.prev-cont, .nxt-cont{width:50%;float: left;}
.design-img, .design-img .mt-5{display: inline-block;}
.prev-lnk {padding-left: 35px;}
.about .project-cont-main{padding-top: 12%;}
.prof-img h1, .prof-img img{float: left;}
.about-info, .about-info a{width: 100%;float:left;}
.about-info a{padding-bottom: 10px;color: #E54949;}
.about-info h5{color: #999;font-size: 18px;}
.resum-btn {
    width: 30%;
    float: right;
}
.cont-info {
    width: 70%;
    float: left;
}
.about .project-container{width: 70vw;}
.about-info h5 a.btn-link-cont {float: right;color: #fff;}
.abt-box {padding: 30px 25px;    margin-left: 20px;width: 30%;float: left;}
.abt-box:first-child{margin: 0;}
.abt-box ul{list-style:none;padding: 0;margin: 0;margin-top: 25px;}
.abt-container {
    width: 100%;
    float: left;
    display: flex;
    flex-wrap: nowrap;
}
.abt-box ul li{    line-height: 18px;
    padding-bottom: 15px;
    font-size: 16px;
}

/*Footer*/
footer{background: #fff;    padding: 75px 0 75px;width: 100%;display: inline-block;border-top: 1px solid #e5e5e5;}
.footer-main #header-brand{float:left;}
.footer-main #header-brand a{color: #999;}
.footer-main .navbar ul#site-nav li a { padding: 0 15px;font-size: 15px;display: block;color: #999;}
.footer-main .navbar ul#site-nav li:last-child a{padding-right: 0;}
.footer-main .navbar ul#site-nav li a:hover{color: #333;}
.footer-main .navbar ul#site-nav li a.active:after, .navbar ul#site-nav li a:hover::after {
    content: "";
    border-bottom: none;
  
}
.footer-main .navbar ul#site-nav li a i {
    font-family: Fontawesome;
    font-style: normal;
    font-size: 24px;
}

/*Responsive device*/

@media (min-width: 768px) {

}

@media (min-width: 1600px){
.container {max-width: 1440px;}
}


@media (min-width: 1200px){
.container {max-width: 1240px;}
}

@media screen and (min-width: 992px) and (max-width:1024px) {

}

@media screen and (min-width:768px) and (max-width:991px) {
.proj3 img.mobile, .proj4 img.mobile{max-width: 320px;}
.proj1 img, .proj2 img{max-width: 580px;}
}

@media (min-width: 0px) and (max-width:991px) {
    header#header{padding: 30px 0 30px;}
    .header-main .header-content{padding: 0 15px;}
    .proj-cont{width: 100%;padding: 10px 10px;} 
    .proj1 img, .proj2 img, .proj3 img, .proj4 img{position: initial;width: 100%;}
    .proj3 img.mobile, .proj4 img.mobile{margin: 0;max-width: 100%;right:0;}
    .proj1, .proj2, .proj3, .proj4{margin-bottom: 0;min-height: auto;}
    .project-container{width: 100%;}
    .footer-main .header-content #header-brand, .footer-main .header-content .header-right{width: 100%;text-align: center;float: left;}
    .footer-main .header-content #header-brand{margin-bottom: 30px;}
    .footer-main .header-right nav#main-nav{display: inline-block;}
    .proj-item1 img, .proj-item3 img{position: inherit;width: 100%;}
}



@media (min-width: 0px) and (max-width:767px) {
    
    .prev-cont, .nxt-cont{width: 100%;}
}


/*
 * Cover
 */


/*
 * Affix and center
 */