/**********************************
  Morph Template
  Copyright 2016, KLLR
  Website: themes.wearekllr.com
  Support: kllr.ticksy.com

  Contents:

  01. Generic styles
  02. Typography
  03. Buttons
  04. Navigation
  05. Components
  06. Intro
  07. Work
  08. Single work
  09. Services
  10. About
  11. News
  12. Contact
  13. Footer
  14. Coming soon
  15. 404
**********************************/
/**********************************
 01. Generic styles
**********************************/
.left,
.right {
  display: inline-block;
  float: left; }

/**********************************
 02. Typography
**********************************/
body, p {
  font-family: 'Open Sans', sans-serif; }

h1, h2, h3, h4, h5 {
  font-family: 'Raleway', sans-serif; }

p {
  font-size: 14px;
  line-height: 1.6em; }

.sub-headline {
  color: #666;
  font-size: 16px;
  text-align: center; }

h1 {
  font-size: 66px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase; }

h2 {
  font-size: 38px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center; }
  h2::after {
    background-color: #e70f0b;
    content: "";
    height: 2px;
    width: 30px;
    display: block;
    margin: 18px auto 20px auto; }

span.bold {
  font-weight: 600; }

h3 {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0; }

h4 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase; 
color: white;
text-align: center;}

h5 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0; }

a.logo {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  letter-spacing: 7px;
  text-transform: uppercase; }
  a.logo:hover {
    text-decoration: none; }

/**********************************
 03. Buttons
**********************************/
.btn {
  border: none;
  border-radius: 2px; }

.btn-default {
  background: #e70f0b;
  color: #292929;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px 35px; }

.btn-transparent {
  color: #fff;
  background: transparent;
  border: 1px solid #fff; }

.btn-white {
  color: #292929;
  background-color: #fff; }

/**********************************
 04. Navigation
**********************************/
#nav1 {
  background: #fff;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #ededed;
  margin: 0; }
  #nav1 li a {
    color: #292929;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase; }
    #nav1 li a:hover {
      color: #e70f0b; }
  #nav1 .nav > li > a {
    padding-top: 21px;
    padding-bottom: 14px;
    padding-left: 35px;
    padding-right: 35px;
    transition: all ease-in-out 400ms;
    -webkit-transition: all ease-in-out 400ms; }

#nav1.navbar-default .navbar-toggle {
  border: none; }

#nav1.navbar-default .navbar-toggle .icon-bar {
  background-color: #292929;
  width: 24px;
  height: 3px; }

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none; }

  .navbar .navbar-collapse {
    text-align: center; } }
@media only screen and (max-width: 777px) {
  #nav1 .nav > li > a {
    padding-left: 30px;
    padding-right: 30px; } }
/**********************************
 05. Components
**********************************/
.call-to-action1 {
  background-image: url(../images/black_wood_background.jpg);
  background-size: cover;
  color: #fff;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px; }
  .call-to-action1 h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    margin-bottom: 20px; }
  .call-to-action1 p {
    color: #ededed;
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    width: 80%; }

@media only screen and (max-width: 768px) {
  .call-to-action1 p {
    width: 100%; } }
.separator1 {
  background: #fff;
  text-align: center;
  padding-top: 90px;
  padding-bottom: 100px; }
  .separator1 h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    margin-bottom: 30px; }
  .separator1 p {
    color: #666;
    font-size: 16px;
    width: 70%;
    margin-left: auto;
    margin-right: auto; }

@media only screen and (max-width: 840px) {
  .separator1 p {
    width: 90%; } }
/**********************************
 06. Intro
**********************************/
.top-bar {
  padding-top: 40px;
  position: relative;
  z-index: 101; }
  .top-bar li {
    margin-left: 7px; }
  .top-bar i {
    font-size: 16px; }
  .top-bar .right {
    text-align: right;
    float: right; }
    .top-bar .right a {
      color: #fff; }

.intro-parallax {
  background-image: url(../images/1-cos-ortho.jpg);
  background-size: cover; }

#intro {
  text-align: center;
  height: 100vh;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; }
  #intro h1 {
    color: #fff;
    margin-bottom: 25px; }
    #intro h1::after {
      background-color: #fff;
      content: "";
      height: 2px;
      width: 30px;
      display: block;
      margin: 28px auto 30px auto; }
  #intro p {
    color: #ededed;
    font-size: 18px;
    margin-bottom: 60px; }

.intro-content {
  margin-top: -80px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 101; }

.intro-overlay {
  background-color: rgba(41, 126, 113, 0.65);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100; }

@media only screen and (max-width: 320px) {
  .intro-content {
    margin-top: -50px; } }
/**********************************
 07. Work
**********************************/
#work {
  background: #f4f4f4;
  padding-top: 150px;
  padding-bottom: 150px;
  position: relative; }
  #work header {
    margin-bottom: 100px; }

/* filter */
.navbar-default.work-filter {
  background: none;
  border-radius: 0;
  border: none;
  margin-bottom: 60px;
  text-align: center; }

#work .navbar-collapse.collapse {
  padding: 0;
  margin-bottom: -6px; }

.portfolio-sorting li {
  margin: 0;
  padding: 0; }

.nav.portfolio-sorting li a {
  color: #292929;
  font-size: 16px;
  font-weight: 400;
  padding: 16px 40px;
  transition: all ease-in-out 250ms;
  -webkit-transition: all ease-in-out 250ms; }

.nav.portfolio-sorting li a:hover {
  background: #e70f0b;
  text-decoration: none; }

.nav.portfolio-sorting a.active,
.nav.portfolio-sorting a.current,
.nav.portfolio-sorting li a:hover {
  background: #e70f0b;
  color: #292929; }

.work-filter.navbar-default .navbar-toggle {
  background-color: #e70f0b;
  border: none;
  border-radius: 2px;
  font-weight: 600;
  text-transform: uppercase;
  float: none; }

@media (min-width: 768px) {
  .navbar.work-filter .navbar-nav {
    display: inline-block;
    float: none; }

  .navbar.work-filter .navbar-collapse {
    text-align: center; } }
/* overlay */
.work-overlay {
  background: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all ease-in-out 400ms;
  -webkit-transition: all ease-in-out 400ms; }

#work .portfolio-item:hover .work-overlay {
  opacity: 0.9; }

.desc-container {
  display: table;
  width: 100%;
  height: 100%; }

.desc-wrapper {
  display: table-cell;
  vertical-align: middle; }

p.work-desc-big {
  color: #2c2c2c;
  font-size: 24px;
  font-weight: 700; }

p.work-desc-small {
  color: #686868;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase; }

#work .portfolio-item {
  margin: 10px;
  width: 30%; }
  #work .portfolio-item:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02); }
#work .portfolio-item img {
  transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms; }

/* isotope grid */
.isotope-item {
  z-index: 2; }

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1; }

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s; }

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width; }

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity; }

@media only screen and (max-width: 768px) {
  #work .portfolio-item {
    width: 40%; } }
@media only screen and (max-width: 480px) {
  #work .portfolio-item {
    width: 100%;
    margin: 0 0 15px 0; } }
/**********************************
 08. Single work
**********************************/
.single-work header {
  background-image: url(../images/bg2.jpg);
  background-size: cover;
  height: 600px;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; }
  .single-work header h2, .single-work header p {
    color: #fff; }

.single-work-intro-content {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  margin-top: -105px; }

.single-work-info {
  background-color: rgba(0, 0, 0, 0.25);
  padding-top: 35px;
  padding-bottom: 25px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }
  .single-work-info li, .single-work-info a {
    color: #ededed;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase; }
  .single-work-info li {
    margin-right: 20px; }

.single-work-description {
  padding-top: 70px;
  padding-bottom: 100px; }
  .single-work-description p {
    color: #666;
    font-size: 16px; }

.single-work-img {
  background-color: #f9f9f9;
  padding-top: 90px;
  padding-bottom: 90px;
  margin-top: 50px;
  margin-bottom: 70px; }

@media only screen and (max-width: 768px) {
  .single-work-info {
    text-align: center; } }
/**********************************
 09. Services
**********************************/
#services {
  background: #ededed;
  padding-top: 150px;
  padding-bottom: 150px; }

.services-list {
  text-align: center;
  margin-top: 100px; }
  .services-list h4 {
    margin-top: 40px;
    margin-bottom: 30px; }
  .services-list p {
    color: #666; }

.diamond {
  background: url(../images/diamond.png) no-repeat;
  text-align: center;
  margin: 0 auto;
  width: 244px;
  height: 244px;
  display: block;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; }
  .diamond i {
    color: #fff;
    font-size: 60px;
    line-height: 0;
    margin: 0;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }

@media only screen and (max-width: 992px) {
  #services p {
    margin-bottom: 80px; } }
/* services2 */
.services2 {
  background: #292929;
  padding-top: 120px;
  padding-bottom: 90px; }
  .services2 p, .services2 h3, .services2 h5 {
    color: #ededed; }
  .services2 h3 {
    text-align: center;
    margin-bottom: 90px; }
  .services2 h5 {
    letter-spacing: 2px;
    margin-bottom: 18px; }
  .services2 i {
    color: #e70f0b;
    font-size: 30px; }
  .services2 .right {
    margin-bottom: 70px; }
  .services2 .left {
    width: 15%; }
  .services2 .right {
    right: 0;
    width: 85%; }

/**********************************
 10. About
**********************************/
#about {
  padding-top: 150px;
  padding-bottom: 150px; }
  #about header {
    margin-bottom: 90px; }

.box1 {
  background-color: #ededed;
  padding: 50px 55px 40px 55px; }
  .box1 h3 {
    font-size: 26px;
    margin-bottom: 30px; }
  .box1 p {
    color: #666;
    margin-bottom: 18px; }

.images-collage img {
  margin-bottom: 20px; }

@media only screen and (max-width: 992px) {
  .box1 {
    margin-bottom: 30px; }

  .images-collage img {
    margin-left: auto;
    margin-right: auto; } }
/* team */
.team {
  text-align: center; }
  .team h3 {
    font-size: 26px;
    margin-top: 85px;
    margin-bottom: 85px; }
  .team .left {
    width: 50%; }
  .team .right {
    right: 0;
    width: 50%; }
  .team p.team-name {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 20px; }
  .team p.team-description {
    color: #666;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 20px; }
  .team .social i {
    color: #292929;
    font-size: 18px;
    margin-left: 3px;
    margin-right: 3px; }

@media only screen and (max-width: 630px) {
  .team .left,
  .team .right {
    width: 100%; }
  .team p.team-description {
    padding: 0; }
  .team ul.social {
    margin-bottom: 45px; } }
/* team2 */
.team2 {
  text-align: center;
  margin-top: 90px; }
  .team2 h3 {
    font-size: 26px;
    margin-bottom: 90px; }
  .team2 p.team-name {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 15px; }
  .team2 p.team-description {
    color: #666;
    margin-bottom: 15px; }
  .team2 .social i {
    color: #292929;
    font-style: 16px; }

@media only screen and (max-width: 992px) {
  .team2 ul.social {
    margin-bottom: 45px; }
  .team2 img {
    margin-left: auto;
    margin-right: auto; } }
/**********************************
 11. News
**********************************/
#news {
  background: #ededed;
  padding-top: 150px;
  padding-bottom: 150px; }
  #news header {
    margin-bottom: 90px; }

.latest-news {
  background: #fff;
  padding: 35px;
  margin-bottom: 20px; }

p.news-date {
  color: #989898;
  font-size: 13px;
  text-transform: uppercase; }

p.news-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4em;
  margin-bottom: 80px; }

a.news-read-more {
  color: #e70f0b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px; }

/**********************************
 12. Contact
**********************************/
#contact {
  background-image: url(../images/black_wood_background.jpg);
  background-size: cover;
  padding-top: 120px;
  position: relative; }
  #contact p, #contact h2 {
    color: #fff; }
  #contact header {
    margin-bottom: 90px; }
  #contact .form-control {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none; }
  #contact .form-group {
    margin-bottom: 30px; }
  #contact input {
    height: 44px; }
  #contact button {
    text-align: center;
    margin: 10px auto 0 auto; }
  #contact .has-error .help-block {
    color: #ffb7b7; }
  #contact .text-success,
  #contact div#msgSubmit.h3.text-center.tada.animated.text-success {
    color: #fff; }

.contact-info {
  margin-bottom: 55px;
  text-align: center; }
  .contact-info p {
    margin-bottom: 0; }
  .contact-info .left, .contact-info .right {
    width: 50%; }

p.contact-info-title {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px; }

/**********************************
 13. Footer
**********************************/
footer {
  text-align: center;
  padding-top: 85px;
  padding-bottom: 50px; }
  footer a {
    color: #fff;
    font-size: 13px;
    font-weight: 600; }
    footer a:hover {
      color: #e70f0b;
      text-decoration: none; }
  footer li {
    margin: 0 15px; }

p.copyright {
  font-size: 13px;
  margin: 60px 0 0 0; }

footer.footer-pages {
  padding-top: 75px;
  padding-bottom: 40px; }
  footer.footer-pages a {
    color: #292929; }
  footer.footer-pages p.copyright {
    color: #666; }

/**********************************
 14. Coming soon
**********************************/
.coming-soon {
  background-image: url(../images/bg4.jpg);
  background-size: cover;
  height: 100vh;
  text-align: center;
  position: relative; }
  .coming-soon h1, .coming-soon p {
    color: #fff; }
  .coming-soon h1 {
    font-size: 120px;
    margin-bottom: 70px; }
  .coming-soon input.form-control {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    width: 210px;
    height: 46px;
    margin-right: 20px;
    display: inline-block;
    -webkit-box-shadow: none;
    box-shadow: none; }
  .coming-soon button {
    display: inline-block;
    margin-top: -2px; }
  .coming-soon p.copyright {
    font-size: 13px;
    margin-bottom: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; }

.coming-soon-content {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-top: -100px; }

@media only screen and (max-width: 992px) {
  .coming-soon h1 {
    font-size: 100px; } }
@media only screen and (max-width: 768px) {
  .coming-soon h1 {
    font-size: 80px; } }
@media only screen and (max-width: 430px) {
  .coming-soon h1 {
    font-size: 60px; }
  .coming-soon input.form-control,
  .coming-soon button {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  .coming-soon button {
    margin-top: 20px;
    width: 210px; } }
/**********************************
 15. 404
**********************************/
.page-404 {
  background-image: url(../images/bg5.jpg);
  background-size: cover;
  height: 100vh;
  text-align: center;
  position: relative; }
  .page-404 p.copyright {
    color: #fff;
    font-size: 13px;
    margin-bottom: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; }

.page-404-content {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-top: -100px; }
  .page-404-content h1, .page-404-content p {
    color: #fff; }
  .page-404-content h1 {
    font-size: 100px;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 20px; }
  .page-404-content p {
    font-family: 'Raleway', sans-serif;
    font-size: 38px;
    margin-bottom: 90px; }

@media only screen and (max-width: 768px) {
  .page-404-content {
    margin-top: -60px; }
    .page-404-content p {
      font-size: 28px;
      margin-bottom: 70px; } }
@media only screen and (max-width: 480px) {
  .page-404-content p {
    font-size: 20px; }

  .page-404 p.copyright {
    margin-bottom: 20px; } }
@media only screen and (max-width: 320px) {
  .page-404-content p {
    margin-bottom: 40px; } }



/**********************************
 16. General @media settings
**********************************/
@media only screen and (max-width: 768px) {
  .style {
    margin-top: -60px; }
    .style p {
      font-size: 28px;
      margin-bottom: 70px; } 
h1 {
  font-size: 26px;
   }
}

@media only screen and (max-width: 480px) {
  .style p {
    font-size: 20px; }

  .style p.style {
    margin-bottom: 20px; } 
h1 {
  font-size: 26px;
   }
}

@media only screen and (max-width: 320px) {
  .style p {
    margin-bottom: 40px; } 


	h1 {
  font-size: 26px;
   }

}