/* ==========================================================================

  DESING PAGE
  This page is currently used for the design page.
  
  Index:

  1. Portfolio
  2. Design Page - We Can Help With
  3. Design Page - Our Clients 
  4. Design Page - Our Knowledge


/* ==========================================================================*/




.inline { display: inline !important; }

.custom-design-page {}
.custom-design-page .body-container {}
.custom-design-page .body-container .page-center {
  padding-top: 0;
  padding-bottom:0;
}
.custom-design-page .custom-design-row1-wrapper {
  background-attachment: fixed;
  background-size: cover;
  background-position: center 8px;
}

.custom-design-page .row-fluid .row-fluid-wrapper .hs_cos_flex-control-nav {
  display: none;
}

.custom-design-page .row-fluid .row-fluid-wrapper:hover .hs_cos_flex-control-nav {
  display: block;
}

.custom-design-page .row-fluid .row-fluid-wrapper:hover .hs_cos_flex-prev {
  left: 5px;
  display: block;
}

.custom-design-page .row-fluid .row-fluid-wrapper:hover .hs_cos_flex-next {
  display: block;
  right: 5px;
}

.custom-design-row1-wrapper {
  background-image: url("//cdn2.hubspot.net/hubfs/2171535/Bitovi_July_2016_Theme/Images/design-hero-background.jpg");
  background-position: 0 0;
  background-size: cover;
  padding: 40px 0;
  text-align: center;
}
.custom-design-row1-wrapper .page-center {}
.custom-design-row1 {}
.custom-design-row1 h1 {
  letter-spacing: -1px;
  color: #fff;
  font-size: 53px;
  font-weight: 300;
  line-height: 55px;
  margin:50px 0 0;
}
.custom-design-row1 h2 {
  margin: 50px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 36px;
}

.custom-design-row1 .btn-green {
  margin: 0;
  border-color: #043e28;
}

.custom-design-page .body-container .page-center.custom-design-row2 {
  padding-bottom: 50px;
  padding-top: 50px;
  text-align: center;
}
.custom-design-row2-col {
  padding: 50px 0;
}
.custom-design-row2-col.custom-design-row2-col1 {}
.custom-design-row2-col.custom-design-row2-col2 {}
.custom-design-row2-col {
  text-align: center;
}

.custom-design-row2-col img {
  max-width: 150px;
  vertical-align: middle;
}

.custom-design-row2-col h3 {
  font-weight: 500;
}
.custom-design-row2-col p {
  font-size: 18px;
  line-height: 24px;
}
.custom-design-row3-top {
  text-align: center;
}
.custom-design-page .custom-design-row3-top h3 {
 margin-top: 50px;
 margin-bottom: 0;
}
.custom-design-row3-col1.custom-design-slider {}
.custom-design-row3-col2 {
  padding: 0 15px;
}

.custom-design-row7 {
  text-align: center;
}

.custom-design-row7 h3 {
  font-size: 36px;
  font-weight: 300;
}

.custom-open-row2.custom-design-row8 p {
  font-size: 18px;
  line-height: 1;
}


@media (max-width: 990px) {
  .project-container {
    padding-bottom: 30px;
  }
  .custom-design-slider {
    display: none !important;
  }
  .custom-design-img {
    display: block;
    margin: 0 auto 30px !important;
  }
  .custom-design-row3-col2, .custom-design-row4-col2 ,
  .custom-design-row5-col2, .custom-design-row6-col2,
  .custom-design-row2-col{
    width: 100% !important;
    margin-left: 0px !important;
  }
  .custom-design-page .body-container .page-center.custom-design-row2 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .custom-design-row2-col {
    padding: 15px;
  }
}
@media (max-width: 768px) {
  .custom-design-row3-col2, .custom-design-row4-col2 ,
  .custom-design-row5-col2, .custom-design-row6-col2 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .custom-design-row7 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .custom-design-row7 p {
    display: inline;
  }
  .custom-design-page .body-container .page-center {
    padding: 0;
  }
}
@media (max-width: 610px) {
  .custom-design-row1-wrapper {
    padding: 40px 15px;
  }
  .custom-design-row2-col img,
  .custom-design-row2,
  .custom-design-row3-top h3 {
    margin-bottom: 0px;
  }
}

.we-can-help-with {
  background-color: #eee;
  margin-bottom: 50px;
  padding: 50px 15px;
  text-align: center;
}
.we-can-help-with h2 {
  font-weight: 300;
  margin:0;
  margin-bottom: 30px;
}
.we-can-help-with ul{
  overflow:hidden;
  text-align: left;
  margin: 0;
  padding: 0;
}
.we-can-help-with ul li{
  float:left;
  display:inline;
  width:25%;
}
@media (max-width: 990px) {
  .we-can-help-with ul li{
    width:33%;
  }
}
@media (max-width: 768px) {
  .we-can-help-with ul li{
    width:50%;
  }
}
@media (max-width: 500px) {
  .we-can-help-with ul li{
    width:100%;
  }
}

/*--------------------------------  Our Work ------------------------*/ 



.project-container {
  padding-top: 60px;
}

.project-container p {
  line-height: 1.8;
}

.project-preview-container {
  position: relative;
}
.project-preview-container .img-responsive {
  width: 100%;
}


@media (min-width: 768px) {
  .our-work {
    margin-top: 50px;
  }
}

@media (min-width: 768px) {
  .project-preview-container {
    min-height: 480px;
  }
  .static-project-sample {
    display: none !important;
    max-width: 566px;
    margin: 0 auto !important;
    float: none !important;
    padding: 15px 15px 30px 15px;
  }
}
@media (max-width: 990px) {
  .static-project-sample {
    display: block !important;
  }
  .slideshow-project-sample,
  .slideshow-control-container {
    display: none !important;
  }
  .client-wrapper {
    width: 100% !important;
  }
  .client-description {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.hover-browser,
.hover-phone,
.slideshow {
  display: none;
}
.hover-browser > div img.js-slideshow-hide,
.hover-phone > div img.js-slideshow-hide,
.slideshow > div img.js-slideshow-hide {
  display: none;
}
.browser-img-container,
.phone-img-container,
.phablet-img-container {
  position: absolute;
  bottom: 0;
  z-index: 3;
  display: block;
}
.browser-img-container .static-browser,
.phone-img-container .static-browser,
.phablet-img-container .static-browser,
.browser-img-container .static-phone,
.phone-img-container .static-phone,
.phablet-img-container .static-phone,
.browser-img-container .static-phablet,
.phone-img-container .static-phablet,
.phablet-img-container .static-phablet {
  position: absolute;
  z-index: 3;
  display: block;
}
.browser-img-container .static-browser,
.phone-img-container .static-browser,
.phablet-img-container .static-browser {
  top: 54px;
  left: 4px;
  max-width: 98%;
}
.browser-img-container .static-phone,
.phone-img-container .static-phone,
.phablet-img-container .static-phone {
  top: 46px;
  left: 15px;
  max-width: 82.25%;
}
.browser-img-container .static-phablet,
.phone-img-container .static-phablet,
.phablet-img-container .static-phablet {
  top: 60px;
  left: 20px;
  max-width: 89.25%;
}
.browser-img-container {
  z-index: 3;
  right: 30px;
}
.browser-img-container .slideshow,
.browser-img-container .slideshow > div {
  position: absolute;
  width: 475px;
  height: 250px;
}
.browser-img-container .slideshow {
  z-index: 5;
  top: 54px;
  left: 6px;
  max-width: 98%;
  display: block;
}
.browser-img-container .slideshow > div {
  top: 0px;
  left: 0px;
}
@media (min-width: 768px) {
  .browser-img-container {
    width: 90%;
  }
}
.phablet-img-container {
  z-index: 3;
  right: 30px;
}
.phablet-img-container .slideshow,
.phablet-img-container .slideshow > div {
  position: absolute;
  width: 312px;
  height: 396px;
}
.phablet-img-container .slideshow {
  z-index: 5;
  top: 60px;
  left: 21px;
  max-width: 98%;
  display: block;
}
.phablet-img-container .slideshow > div {
  top: 0px;
  left: 0px;
}
@media (min-width: 768px) {
 .phablet-img-container {
    width: 65%;
  }
}
.phone-img-container {
  z-index: 4;
  left: 0;
}
.phone-img-container.phone-large {
  width: 50%;
  left: 136px;
  bottom: auto;
}
.phone-img-container.phone-phablet-container {
  left: 50px;
  bottom: -13px;
}
.phone-img-container .slideshow,
.phone-img-container .slideshow > div {
  position: absolute;
  width: 497px;
  height: 250px;
}
.phone-img-container .slideshow {
  z-index: 5;
  top: 46px;
  left: 16px;
  max-width: 82.25%;
  display: block;
}
.phone-img-container .slideshow > div {
  top: 0px;
  left: 0px;
  width: 99.5%;
}
.phone-img-container .slideshow > div img {
  width: 139px;
  height: 237px;
}
@media (min-width: 768px) {
  .phone-img-container {
    width: 30%;
  }
}
.static-project-sample {
  margin-bottom: 30px;
}
.static-project-sample .img-responsive {
  width: 100%;
}
.client-logo {
  margin-bottom: 20px;
}
.slideshow-control-container {
  margin: 20px 0;
  height: 20px;
}
.slideshow-controller {
  display: none;
  line-height: 0;
}
.slideshow-controller .slideshow-control {
  font-weight: 100;
  font-size: 30px;
  color: #ccc;
  vertical-align: top;
  text-decoration: none;
  line-height: 3px;
}
.slideshow-controller .controller-left {
  margin-right: 20px;
}
.slideshow-controller .controller-right {
  margin-left: 20px;
}
.slideshow-controller .slideshow-control,
.slideshow-controller ul,
.slideshow-controller li,
.slideshow-controller .slideshow-indicator {
  display: inline-block;
}
.slideshow-controller ul {
  margin: 0;
  padding: 0;
  width: auto;
  list-style: none;
}
.slideshow-controller li:last-child a {
  margin-right: 0;
}
.slideshow-controller .slideshow-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
  cursor: pointer;
}
.slideshow-controller li.active .slideshow-indicator {
  background-color: #C9323A;
}
.project-container:hover .slideshow-controller {
  display: block;
}

/*--------------------------------  Design Page - We Can Help With ------------*/ 

.design-we-can-help-with h2 {
  text-align: left;
  margin-bottom: 26px; 
}

.design-we-can-help-with ul {
  column-count: 2;
  width: 60%;
  margin-bottom: 20px;
}

.design-we-can-help-with img {
  float: right;
  width: 262px;
  height: 262px;
  margin-top: 70px;  
}

@media only screen and (max-width: 768px) {
    .design-we-can-help-with .featured-box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .design-we-can-help-with ul {
        width: 80%;
    }
    .design-we-can-help-with img {
        margin-top: 0;
    }
}

@media only screen and (max-width: 480px) {
    .design-we-can-help-with ul {
        column-count: 1;
    }
}


/*--------------------------------  Design Page - Our Clients -----------------------*/ 

.custom-design-page .our-clients img {
   margin: 45px 32px 0; 
}

/*--------------------------------  Design Page - Our Knowledge -----------------------*/ 
.design-our-knowledge-content {
  display: flex;
  margin-bottom: 30px;
}

.design-our-knowledge-content-box {
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 2%;
  padding: 20px;
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
  width: 50%;
}

.design-our-knowledge-content-box img {
    width: 180px;
}
.design-our-knowledge-content-box h3 {
    font-size: 22px;
    margin-top: 10px;
}
.design-our-knowledge-content-box a {
     text-decoration: none;
}
.design-our-knowledge-content-box a:hover h3 {
     color: #356FD1;
}
.design-our-knowledge-content-box a p {
    color: black;
}
.design-our-knowledge-content-box h3 small {
    display: block;
    margin-top: 8px;
    font-weight: normal;
    color: #666;
}
.design-our-knowledge-content-box p:last-of-type {
    margin-bottom: 0;
    margin-top: 10px;
}

@media only screen and (max-width: 480px) {
    .design-our-knowledge-content {
        flex-direction: column;
    }
    .design-our-knowledge-content-box {
        width: 96%;
    }
}

/*--------------------------------  Blog Articles -----------------------*/

.custom-design-page .topic-article-header {
    display: none;
}

.custom-design-page .custom-global-recent-post .topic-post-item .span9 {
    background-color: #f2f2f2;
}
.custom-design-page .custom-global-recent-post h2.post-title {
    text-align: left;
}
.custom-design-page .custom-global-recent-post .span3.post-thumb-container,
.custom-design-page .custom-global-recent-post .author-avatar{
    border-color: #f2f2f2;
}
.custom-design-page .custom-global-recent-post .topic-post-item.topic-post {
    border-bottom: 0;
    padding-bottom: 0;
}

/*--------------------------------  Portfolio Page -----------------------*/

.design-portfolio .project-container {
    padding-top: 100px;
}

/* End Design */