/* ==========================================================================
   Custom font styles
   ========================================================================== */

@import 'https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext';

/* ==========================================================================
   Body styles
   ========================================================================== */

body {
   font-family: 'Lato', sans-serif;
   color: #000000;
   font-size: 13px;
   text-align: justify;
}


/* ==========================================================================
   Base styles
   ========================================================================== */


/* COLORS */
.brown, .goldHover {
   color: #9b6a1c !important;
}

.grey {
   color: #48463e !important;
}

.black {
   color: #221e1f !important;
}

.white {
   color: #fcfcfc !important;
}

.light-grey {
   color: #d7d7d7;
}

.bg-brown {
   background-color: #9b6a1c !important;
}

.bg-grey {
   background-color: #48463e !important;
}

.bg-black {
   background-color: #221e1f !important;
}

.bg-white {
   background-color: #fcfcfc !important;
}

.bg-light-grey {
   background-color: #f1f1f1;
}

/* FONT-SIZES */
.text-extra-small {
   font-size: 11px !important;
}

.text-small {
   font-size: 12px !important;
}

.text-normal {
   font-size: 13px !important;
}

.text-medium {
   font-size: 15px !important;
}

.text-large {
   font-size: 17px !important;
}

.text-extra-large {
   font-size: 19px !important;
}

.text-uppercase {
   text-transform: uppercase;
}

/* HEADERS */
h1 {
   font-size: 18px;
}

h2 {
   font-size: 16px;
 }

h3 {
   font-size: 14px;
}

h4, h5, h6 {
   font-size: 13px;
   font-weight: 700;
}


/* FONT-WEIGHT */
.bold {
   font-weight: bold;
}


/* PADDING */
.nopadding {
   padding: 0;
}

.nopadding-left {
   padding-left: 0;
}

.nopadding-right {
   padding-right: 0;
}

.padding-left-5px
{
   padding-left: 5px !important;
}

.padding-right-5px
{
   padding-right: 5px !important;
}

.padding-left-15px
{
   padding-left: 15px !important;
}

.padding-right-15px
{
   padding-right: 15px !important;
}

.padding-left-30px
{
   padding-left: 30px !important;
}

.padding-right-30px
{
   padding-right: 30px !important;
}

.padding-top-1px {
   padding-top: 1px !important;
}

.padding-top-5px
{
   padding-top: 5px !important;
}

.padding-bottom-5px
{
   padding-bottom: 5px !important;
}

.padding-top-15px
{
   padding-top: 15px !important;
}

.padding-bottom-15px
{
   padding-bottom: 15px !important;
}

.padding-top-20px
{
   padding-top: 20px !important;
}

.padding-bottom-20px
{
   padding-bottom: 20px !important;
}

.padding-top-30px
{
   padding-top: 30px !important;
}

.padding-bottom-30px
{
   padding-bottom: 30px !important;
}

.padding-top-70px
{
   padding-top: 70px !important;
}

.padding-10px {
   padding: 10px;
}

/* MARGIN */
.nomargin {
   margin: 0;
}

.nomargin-left {
   margin-left: 0;
}

.nomargin-right {
   margin-right: 0;
}

.margin-left-30px
{
   margin-left: 30px !important;
}

.margin-right-30px
{
   margin-right: 30px !important;
}

.margin-top-5px
{
   margin-top: 5px !important;
}

.margin-bottom-5px
{
   margin-bottom: 5px !important;
}

.margin-bottom-10px
{
   margin-bottom: 10px !important;
}

.margin-top-15px
{
   margin-top: 15px !important;
}

.margin-bottom-15px
{
   margin-bottom: 15px !important;
}

.margin-top-20px
{
   margin-top: 20px !important;
}

.margin-bottom-20px
{
   margin-bottom: 20px !important;
}

.margin-top-30px
{
   margin-top: 30px !important;
}

.margin-bottom-30px
{
   margin-bottom: 30px !important;
}

.margin-top-70px
{
   margin-top: 70px !important;
}

.margin-bottom-70px
{
   margin-bottom: 70px !important;
}


.margin-right-10px {
   margin-right: 10px;
}
.margin-left-10px {
   margin-left: 10px;
}

/* BUTTON */
.no-button {
   background: none;
   border: none;
}


/* BLOCKS */
.inline-block {
   display: inline-block;
}

/* BORDER */
.noborder {
   border: none !important;
}

.noradius {
   border-radius: 0 !important;
}


/* LINE-HEIGHT */
.line-height-18px {
   line-height: 18px;
}

.line-height-30px {
   line-height: 30px;
}

.line-height-48px {
   line-height: 48px;
}


/* SCROLL */
.scrollbar-x {
   overflow-x: scroll;
}


/* RESPONSIVE TABLE UPDATE 768px < */
.hover:hover {
   cursor: pointer;
}


/* BORDER */
.solid-border {
   border: 3px solid #221e1f;
}


/* ALIGN */
.center {
   margin: 0 auto;
}

.row-height {
   display: table;
   table-layout: fixed;
   height: 100%;
   width: 100%;
}

.col-height {
   display: table-cell;
   float: none;
   height: 100%;
}

/* DIVIDERS */
.divider, .divider-black {
   display: inline-block;
   line-height: 1.5em;
   height: 1.5em;
   width: 1px;
   padding-left: 4px;
   margin-right: 2px;
   border-right: 1px solid #fcfcfc;
   vertical-align: -25%;
}

.divider-black {
   border-color: #221e1f;
}

.horizontal-divider, .horizontal-divider-left {
   border-bottom: 1px solid #000000;
   margin: 20px 30px 30px 30px;
}

.horizontal-divider-left {
   margin-left: 0;
}

/* HTML ELEMENTS */
hr {
   border-color: #d7d7d7;
}

/* OVERFLOW */
.overflow-x-hidden {
   overflow-x: hidden;
}

.overflow-y-hidden {
   overflow-y: hidden;
}

.overflow-hidden {
   overflow: hidden;
}

/* HEIGHTS */
.col-height-150px {
   height: 150px;
}

.col-height-200px {
   height: 200px;
}

.col-height-250px {
   height: 250px;
}

.col-height-300px {
   height: 300px;
}

/* HOVER */

.bxslider img {
   opacity: 0.8;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
   filter: alpha(opacity = 80);

}

.bxslider img:hover {
   opacity: 1;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 100);
   filter: alpha(opacity = 100);
   cursor: pointer;
}

/* MISC */
.avoid-clicks {
   pointer-events: none;
}

a.goldHover:hover {
   color: #9b6a1c !important;
   cursor: pointer;
}


/* ==========================================================================
   Header styles
   ========================================================================== */


/* ==========================================================================
   Navbar styles
   ========================================================================== */

.navbar-toggle {
   float: left;
}

.navbar-toggle .icon-bar {
   background-color: #000000;
}

button.navbar-toggle {
   margin-left: 70px;
   margin-top: 58px !important;
}

.navbar > div.container-fluid div.navbar-header {
   height: 150px;
}


.logo {
   position: absolute;
   margin: 0 auto;
   width: 100%;
   top: 35px;
   pointer-events: none;
   z-index: 9999;
}

div.logo a img {
   display: block;
   width: 165px;
   height: auto;
   margin: 0 auto;
   pointer-events: auto;
}

#navbar {
   background: #ffffff;
   position: absolute;
   z-index: 10000;
   left: 0;
   top: 115px;
   width: 100%;
}

#navbar.navbar-collapse.collapse.in {
   border-bottom: 1px solid #c8c8c8;
   padding-bottom: 25px;
}

#navbar a {
   display: block;
   width: 100%;
   font-weight: 700;
   text-transform: uppercase;
   color: #000000;
   padding-left: 67px;
   padding-top: 10px;
   padding-bottom: 10px;
   line-height: 15px;
}

#navbar a.selected, #navbar a:hover {
   color: #9b6a1c;
   text-decoration: none;
}

#navbar-inner {
   width: 180px;
}

.full-width {
   -webkit-transition: width 1s ease-in-out;
   -moz-transition: width 1s ease-in-out;
   -o-transition: width 1s ease-in-out;
   transition: width 1s ease-in-out;
   width: 100% !important;
}


/* ==========================================================================
   Content styles
   ========================================================================== */

/* DESIGN PROCESS */
.process-step {
   background: url("../img/process_ball_bg.png") no-repeat center;
   height: 63px;
   line-height: 63px;
   text-align: center;
   display: block;
   margin: 0 auto;
}

.process-step-line {
   background: url("../img/process_step_line.png") repeat-x center;
   height: 63px;
   line-height: 63px;
   text-align: center;
   display: block;
   margin: 0 auto;
}

.process-item:hover  .process-step {
   background: url("../img/process_ball_hover.png") no-repeat center;
   height: 63px;
   line-height: 63px;
   text-align: center;
   display: block;
   margin: 0 auto;
}

.process-headline h3 {
   margin-top: 12px;
}

.process-item:hover {
   cursor: pointer;
}

.process-item:hover .process-headline h3 {
   color: #9b6a1c;
}

div.process-step.process-item-selected, .process-item:hover div.process-step.process-item-selected {
   background: url("../img/process_ball_selected.png") no-repeat center;
   color: #ffffff;
}

div.process-headline.process-item-selected h3 {
   color: #9b6a1c;
}



div.designProcessReveal .process-step-1 {
   background: url("../img/process_step_1_ball_bg.png") no-repeat center;
   height: 63px;
   line-height: 63px;
   display: inline-block;
   margin: 0 auto;
   width: 190px;
   float: left;
}


div.designProcessReveal .process-step-2 {
   background: url("../img/process_step_2_ball_bg.png") no-repeat center;
   height: 63px;
   line-height: 63px;
   display: inline-block;
   margin: 0 auto;
   width: 190px;
   float: left;
}


div.designProcessReveal .process-step-3 {
   background: url("../img/process_step_3_ball_bg.png") no-repeat center;
   height: 63px;
   line-height: 63px;
   display: inline-block;
   margin: 0 auto;
   width: 190px;
   float: left;
}


div.designProcessReveal .process-step-4 {
   background: url("../img/process_step_4_ball_bg.png") no-repeat center;
   height: 63px;
   line-height: 63px;
   display: inline-block;
   margin: 0 auto;
   width: 190px;
   float: left;
}


div.designProcessReveal .process-step-5 {
   background: url("../img/process_step_5_ball_bg.png") no-repeat center;
   height: 63px;
   line-height: 63px;
   display: inline-block;
   margin: 0 auto;
   width: 190px;
   float: left;
}

div.on-desktop .process-item:hover .process-step-1 {
   background: url("../img/process_step_1_ball_hover.png") no-repeat center;
}


div.on-desktop .process-item:hover .process-step-2 {
   background: url("../img/process_step_2_ball_hover.png") no-repeat center;
}


div.on-desktop .process-item:hover .process-step-3 {
   background: url("../img/process_step_3_ball_hover.png") no-repeat center;
}


div.on-desktop .process-item:hover .process-step-4 {
   background: url("../img/process_step_4_ball_hover.png") no-repeat center;
}


div.on-desktop .process-item:hover .process-step-5 {
   background: url("../img/process_step_5_ball_hover.png") no-repeat center;
}

div.on-desktop .process-headline {
   display: inline-block;
   float: left;
}

div.on-desktop .process-headline h3 {
   line-height: 63px;
   margin: 0;
   padding-left: 10px;
}

div.on-desktop .padding-left-process-step-2 .process-headline h3 {
   padding-left: 0;
   padding-right: 10px;
}


div.on-desktop .padding-left-process-step-4 .process-headline h3 {
   padding-left: 0;
   padding-right: 10px;
}

div.on-desktop .process-description {
   position: absolute;
   padding-left: 10px;
}

div.on-desktop .padding-left-process-step-2  .process-description {
   width: 450px;
   margin-left: -198px;
   text-align: justify;
}

div.on-desktop .padding-left-process-step-4  .process-description {
   width: 450px;
   margin-left: -422px;
   text-align: justify;
}

.design-process-outro {
   margin-top: 70px;
}

div.on-desktop .process-step-1.process-item-selected, div.on-desktop .process-item:hover div.process-step-1.process-item-selected {
   background: url("../img/process_step_1_ball_selected.png") no-repeat center;
}

div.on-desktop .process-step-2.process-item-selected, div.on-desktop .process-item:hover div.process-step-2.process-item-selected {
   background: url("../img/process_step_2_ball_selected.png") no-repeat center;
}


div.on-desktop .process-step-3.process-item-selected, div.on-desktop .process-item:hover div.process-step-3.process-item-selected {
   background: url("../img/process_step_3_ball_selected.png") no-repeat center;
}


div.on-desktop .process-step-4.process-item-selected, div.on-desktop .process-item:hover div.process-step-4.process-item-selected {
   background: url("../img/process_step_4_ball_selected.png") no-repeat center;
}


div.on-desktop .process-step-5.process-item-selected, div.on-desktop .process-item:hover div.process-step-5.process-item-selected {
   background: url("../img/process_step_5_ball_selected.png") no-repeat center;
}


.padding-left-process-step-2 {
   margin-left: 111px;
}

.padding-left-process-step-4 {
   margin-left: 333px;
}

.process-step-divider {
   background: url("../img/process_dotted_line_bg.png") no-repeat left center;
   margin-left: 8px;
   height: 72px;
}



/* PROJECT */
.projects-page-filter {
   background: #000000;
}

.projects-page-filter ul li {
   text-transform: uppercase;
   display: inline-block;
   line-height: 50px;
   color: #e0e0e0;
   padding: 0 10px;
   text-align: center;
}

.projects-page-filter ul li:hover, .projects-page-filter ul li.on {
   font-weight: 700;
   cursor: pointer;
   color: #ffffff;
}

.projects-page-filter ul {
   text-align: center;
   margin: 0;
   padding: 0;
}

#project-list div.back {
   background-color: rgba(0, 0, 0, 0.6);
   position: absolute;
   bottom: 0px;
   z-index: 1;
   width: 100%;
}

.projectCaption {
   font-size: 10px;
   text-transform: uppercase;
   color: #ffffff;
   padding: 10px 0 0 15px;
   margin-bottom: 0;
}

.projectCaptionSecondLine {
   font-size: 10px;
   text-transform: uppercase;
   color: #ffffff;
   padding: 0 0 0 15px;
}

#project-list .item:hover {
   cursor: pointer;
}

#project-list .item:hover div.back {
   background-color: rgba(255, 255, 255, 0.5);
   height: 100%;
   text-align: center;
}

#project-list .item:hover div.back .projectCaption {
   padding-top: 25%;
   color: #000000;
   font-weight: 700;
}

#project-list .item:hover div.back .projectCaptionSecondLine {
   color: #000000;
   font-weight: 700;
}

/* PROJECT DETAILS */
ul.projectSlider {
   padding-left: 0;
}

.projects-details-page {
   overflow-y: hidden;
}
.projects-details-page #bx-pager {
   width: 85%;
   display: block;
   margin-left: 11%;
   position: absolute;
   z-index: 9999;
}

.projects-details-page #bx-pager a {
   display: inline-block;
   width: 14%;
   border-top: 4px solid #ffffff;
   border-left: 0;
   border-bottom: 6px solid #ffffff;
   border-right: 0;
   padding: 0;
   margin: 0 0.5%;
}

.projects-details-page #bx-pager a  {
   height: 0;
   overflow: hidden;
}


.projects-details-page #bx-pager a:hover {
   overflow: visible;
}

.projects-details-page #bx-pager a img {
   border: 5px solid #ffffff;
   position: relative;
}

.project-details-description {
   transition-duration: 1s;
   -moz-transition-duration: 1s;
   -webkit-transition-duration: 1s;

}

#project-details-button {
   width: 51px;
   height: 51px;
   left: 0;
   top:0;
   position: absolute;
}

#project-details-button:hover {
   cursor: pointer;
}

.project-details-button-close {
   right: 0 !important;
   left: auto !important;
}

.hide-project {
   padding-left: 411px !important;
   transition-duration: 1s;
   -moz-transition-duration: 1s;
   -webkit-transition-duration: 1s;
}

.hide-project-details {
   background: url("../img/project_details_close.png") !important;
}

#project-details {
   width: 461px;
   height: 469px;
   background: url("../img/project_details_open.png");
   padding: 31px 15px 15px 66px;
}

#project-details-wrapper {
   width: 461px;
   height: 469px;
   display: block;
   position: absolute;
   z-index: 9999;
   right: 0;
   overflow: hidden;
   transition-duration: 1s;
   -moz-transition-duration: 1s;
   -webkit-transition-duration: 1s;
}

.project-details-description h2 {
   text-transform: uppercase;
   font-size: 18px;
   font-weight: 700;
}

.project-details-description h3, .project-details-description h4 {
   text-transform: uppercase;
   font-size: 12px;
   font-weight: 700;
}

.project-details-description ul {
   list-style: none;
}

.project-details-description .share {
   padding-top: 10px;
   font-weight: 700;
}

.project-details-description .share i {
   padding: 0 5px;
}

.project-control {
   color: #9b6a1c;
   text-transform: uppercase;
   font-size: 12px;
   font-weight: 700;
   margin-top: 30px;
   line-height: 15px;
}

ul.indexSlider li img, ul.projectSlider li img {
   margin: 0 auto;
}

.project-control a {
   color: inherit;
}

.hideItem {
   opacity:0;
   width: 0;
   transition: all 0.5s !important;
   overflow: hidden;
}

.showItem {

}

/* CONTACT */
.submit-buttom button {
   width: 100%;
   border: 1px solid #9b6a1c;
   padding: 15px 0;
   background: #ffffff;
   color: #9b6a1c;;
}

.form-control {
   border-color: #acacac;
}

.input-lg, .form-group-lg .form-control {
   font-size: 13px;
}

/* ==========================================================================
   Footer styles
   ========================================================================== */

footer > div.container {
   padding: 35px 0;
}

footer {
   font-size: 11px;
}

footer .fa {font-size: 13px; margin: 0 5px;}

/* ==========================================================================
   Layout updates - depend for resolution
   ========================================================================== */

/* Navbar breakpoint update */
@media (min-width: 768px) {
   .navbar-header {
      float: none;
   }
   .navbar-left,.navbar-right {
      float: none !important;
   }
   .navbar-toggle {
      display: block;
   }
   .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
   }
   .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: 10px;
      padding-bottom: 10px;
   }
   .collapse.in{
      display:block !important;
   }

   .navbar > .container-fluid {
      padding: 0;
   }

}


/* XS - max. 768px */
@media (max-width: 767px) {

   /* LOGO */
   div.logo a img {
      width: 135px;
   }

   #navbar {
      top: 90px;
      padding-left: 0;
   }

   .logo {
      top: 20px;
   }

   /* NAVBAR */
   button.navbar-toggle {
      margin-top: 0 !important;
      margin-left: 0;
      padding: 17px 13px;

   }

   .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
      margin: 0;
   }

   #navbar a {
      padding-left: 48px;
   }

   .navbar > div.container-fluid div.navbar-header {
      height: 105px;
   }

   /* ABOUT */
   .about-page .image-wrapper {
      margin: 0 -15px;
   }

   .projects-page-filter ul li {
      padding: 0 5px;
      font-size: 10px;
   }

   /* PROJECT DETAILS */
   .project-details-description-mobile .project-details-description {
      display: block;
      position: inherit;
      height: auto;
      width: 100%;
      border-left: 0;
      padding: 0 15px 30px 15px;
   }

   #project-details-wrapper {
      display: none;
   }

   .projects-details-page #bx-pager {
      display: none;
   }

   .projects-details-page  .bx-wrapper {
      margin-bottom: 0;
   }

   /* DESIGN PROCESS */
   .design-process-outro {
      margin-top: 15px;
   }

   /* FOOTER */
   footer > div.container {
      padding: 15px;
   }


}


/* SM - min. 768px - max. 991px */
@media (min-width: 768px) and (max-width: 991px) {

   /* DESIGN PROCESS */
   .design-process-outro {
      margin-top: 30px;
   }

   /* PROJECT DETAILS */
   .project-details-description-mobile .project-details-description {
      display: block;
      position: inherit;
      height: auto;
      width: 100%;
      border-left: 0;
      padding: 0 15px 30px 15px;
   }

   #project-details-wrapper {
      display: none;
   }

   .projects-details-page #bx-pager {
      display: none;
   }

}


/* MD - min. 992px - max. 1199px */
@media (min-width: 992px) and (max-width: 1199px) {

   /* DESIGN PROCESS */
   .padding-left-process-step-2 {
      margin-left: 28px;
   }

   .padding-left-process-step-4 {
      margin-left: 250px;
   }

   .design-process-outro {
      margin-top: 100px;
   }

   div.on-desktop .padding-left-process-step-2  .process-description {
      width: 333px;
      margin-left: -82px;
      text-align: justify;
   }

   div.on-desktop .padding-left-process-step-4  .process-description {
      width: 333px;
      margin-left: -306px;
      text-align: justify;
   }

}


/*!* LG - min. 1200px *!*/
/*@media (min-width: 1200px) {*/

   /*.navbar-collapse.collapse {*/
      /*display: none!important;*/
   /*}*/

/*}*/