/*---------------------------------------------------------------

  Project Name: Montana - Minimal Portfolio HTML Template
  File Name: style.css
  Author: Peng Lam
  Author URI: http://khaitawng.com
  Version: 1.0.0

------------------------------------------------------------------*/
/*----------------------------------------------------------------

// Table of contents //

        Body
    0.  Typography
    1.  Buttons
    2.  General
    3.  Preloader
    4.  Navigation section
    5.  Home section
    6.  About section
    7.  Work section
    8.  Testimonial section
    9.  Client section
    10. Contact section
    11. Footer section
    12. Social icon
    13. Mobile Responsive styles

------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Karla:400,400i');

body {
    background: #ffffff;
    font-family: 'Karla', sans-serif;
    font-style: normal;
    font-weight: 400;
    overflow-x: hidden;
}

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


/*---------------------------------------
    0 Typorgraphy              
-----------------------------------------*/

h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  line-height: normal;
}

h1 {
  color: #353535;
  font-size: 35px;
}

h2 {
  color: #454545;
  font-size: 25px;
  margin-top: 0;
}

h3 {
  font-size: 20px;
}

h4 {
  color: #505050;
}

h5 {
  color: #656565;
  letter-spacing: 0.5px;
}


p {
  color: #757575;
  font-size: 16px;
  line-height: 25px;
}


/*---------------------------------------
    1 Buttons               
-----------------------------------------*/

.btn-success:focus {
  background-color: #000000;
  border-color: transparent;
}

.section-btn {
  background-color: #f9f9f9;
  border-radius: 100px;
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  letter-spacing: 1.6px;
  padding: 14px 28px;
  margin-top: 32px;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
  text-transform: uppercase;
}

.section-btn:focus,
.section-btn:hover {
  background: #000000;
  color: #ffffff;
}



/*---------------------------------------
    2 General               
-----------------------------------------*/

html{
  -webkit-font-smoothing: antialiased;
}

a {
  color: #4d638c;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none !important;
}

a:hover, a:active, a:focus {
  color: #4d638c;
  outline: none;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #252525;
}

.section-title {
  position: relative;
  padding-bottom: 22px;
}

#service,
#about,
#work,
#testimonial,
#contact {
  padding-top: 100px;
  padding-bottom: 100px;
}

#testimonial,
#contact, footer {
  text-align: center;
}



/*---------------------------------------
    3 Preloader section              
-----------------------------------------*/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background: none repeat scroll 0 0 #ffffff;
}

.spinner {
  border: 1px solid transparent;
  border-radius: 5px;
  position: relative;
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 1px solid #959595;
  border-top-color: #ffffff;
  animation: spinner .9s linear infinite;
}

@-webkit-@keyframes spinner {
  to {transform: rotate(360deg);}
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}



/*---------------------------------------
    4 Navigation section              
-----------------------------------------*/

.navbar-default {
  background: #ffffff;
  box-shadow:0 40px 100px rgba(0,0,0,.2);
  border: none;
  margin-bottom: 0;
}

.navbar-default .navbar-brand {
  color: #656565;
  font-size: 20px;
  line-height: 40px;
}

.navbar-default .nav li a {
  font-size: 14px;
  color: #656565;
  line-height: 40px;
  padding-right: 22px;
  padding-left: 22px;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
}

.navbar-default .navbar-nav > li a:hover {
  background-color: #e7e7e7;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #656565;
}

.navbar-default .navbar-toggle {
  border: none;
  padding-top: 10px;
}

.navbar-default .navbar-toggle {
  background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
  background: #202020;
  border-color: transparent;
}



/*---------------------------------------
    5 Home section              
-----------------------------------------*/
#home {
  display: -webkit-box;
  display: -webkit-flex;
   display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
   align-items: center;
  height: 100vh;
  position: relative;
  text-align: right;
  padding-top: 150px;
}

.home-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.home-text {
  position: relative;
  z-index: 2;
}

#home h1 {
  color: #000;
}

#home h5 {
  color: rgba(250,250,250,0.5);
}



/*---------------------------------------
    6 About section              
-----------------------------------------*/

#about {
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
}

.about-text {
  padding-top: 82px;
}

.about-text p {
  padding-top: 6px;
}



/*---------------------------------------
    7 Service section              
-----------------------------------------*/

#service .section-title {
  text-align: center;
}

#service .media {
  margin-top: 35px;
}

#service .media .fa {
  font-size: 45px;
  margin-right: 15px;
}

#service .media ul li {
  font-size: 16px;
}



/*---------------------------------------
    7 Work section              
-----------------------------------------*/

.about-image img,
.work-thumb img {
  width: 100%;
}

.work-thumb {
  margin: 100px 5px 5px 5px;
  overflow: hidden;
  position: relative;
  top: 0;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
}

.work-thumb:hover {
  background: #ffffff;
  box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
  top: -5px;
}

.work-overlay h4,
.work-overlay h5 {
  margin: 0;
}

#work .work-overlay {
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
  position: absolute;
  bottom: -45px;
  left: 40px;
}

#work .col-md-4:hover .work-overlay {
  bottom: 25px;
}



/*---------------------------------------
   8 Testimonial section              
-----------------------------------------*/

#testimonial .item p {
  font-size: 19px;
  line-height: 30px;
  font-style: italic;
}

.tst-author {
  margin-top: 32px;
}

.tst-author .tst-foto {
  display: inline-block;
  overflow: hidden;
  width: 80px;
  height: 80px;
  padding: 4px;
  margin-right: 16px;
}

.tst-author .tst-foto img {
  border-radius: 100%;
}

.tst-author .tst-author-info {
  display: inline-block;
  text-align: left;
  width: auto;
  position: relative;
  top: -28px;
}

.tst-author .tst-author-info h4 {
  margin-bottom: 4px;
}

.tst-author .tst-author-info h5 {
  letter-spacing: 0.3px;
  margin-top: 0px;
}



/*---------------------------------------
   9 Client section              
-----------------------------------------*/

#client .container {
  background: #f9f9f9;
  padding: 102px 82px;
  min-height: 400px;
}

#client .fa {
  font-size: 45px;
  margin-right: 10px;
  position: relative;
  top: 10px;
}

#client ul li {
  display: inline-block;
  list-style: none;
  vertical-align: top;
  width: 14%;
  margin: 0 12px;
}

#client ul li.small-width {
  width: 10%;
}



/*---------------------------------------
    10 Contact section              
-----------------------------------------*/

.contact-info {
  padding-bottom: 42px;
}

#contact .text-success,
#contact .text-danger {
  display: none;
}

#contact .form-control {
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  box-shadow: none;
  font-size: 18px;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
}

#contact .form-control:focus {
  border-color: #d9d9d9;
}

#contact input {
  height: 50px;
  margin-bottom: 18px;
}

#contact button#cf-submit {
  background: #242424;
  border: none;
  border-radius: 40px;
  color: #ffffff;
  height: 55px;
  margin-top: 22px;
}

#contact button#cf-submit:hover {
  background: #000000;
  color: #ffffff;
}



/*---------------------------------------
    11 Footer section              
-----------------------------------------*/

footer {
  background: #f9f9f9;
  padding: 100px 0 100px 0;
}

.footer-copyright h5 {
  font-size: 14px;
  line-height: 22px;
  padding-top: 12px;
}



/*---------------------------------------
    12 Social Icon             
-----------------------------------------*/

.social-icon {
  position: relative;
  padding: 0;
  margin: 0;
}

.social-icon li {
  display: inline-block;
  list-style: none;
}

.social-icon li a {
  background: #ffffff;
  border-radius: 100%;
  color: #252525;
  cursor: pointer;
  font-size: 20px;
  text-decoration: none;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  margin: 32px 4px 0 4px;
}

.social-icon li a:hover {
  background: #f2f2f2;
  color: #202020;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



/*---------------------------------------
    13 Mobile Responsive styles              
-----------------------------------------*/

@media (max-width: 980px) {

  #home {
    height: 55vh;
  }

  .about-text {
    padding-top: 32px;
  }

  #work .col-md-4 {
    margin-bottom: 55px;
  }

  #client .container {
    padding: 82px 62px;
    min-height: 350px;
  }

  #client ul li {
    width: 20%;
    margin: 0;
  }

  #client ul li.small-width {
    width: 15%;
  }
}



@media (max-width: 768px) {

  h1 {
    font-size: 32px;
  }

  #home {
    height: 65vh;
  }
}



@media (max-width: 767px) {

  #about, #work,
  #testimonial, #contact {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #home {
    height: 65vh;
  }

  .navbar-default .navbar-brand {
    line-height: 20px;
  }

  .navbar-default .nav li a {
    line-height: 15px;
  }

  .about-text {
    padding-top: 0;
  }

  #about .about-image {padding-top: 32px;}

  #work .col-md-4 {
    margin-bottom: 75px;
  }
}



@media (max-width: 650px) {

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 22px;
  }

  #home {
    height: 100vh;
  }

  #client .container {
    padding: 42px 22px;
    min-height: inherit;
  }

  #client ul li {
    width: 40%;
    margin-bottom: 22px;
  }

  #client ul li.small-width {
    width: 45%;
  }

  #client .fa {
    margin-bottom: 12px;
  }
}


@media (max-width: 320px) {

  h1 {
    font-size: 26px;
  }

  #home {
    height: 100vh;
    padding-top: 50px;
  }
}