/* This file contains the mobile css for the template */
/* Variables */
@primaryColor: #a2195b; /* was temporarily 8F2544 for screen shots */

@secondaryColor1: #5A1001;
@secondaryColor2: #231F20;
@secondaryColor3: #404041;
@secondaryColor4: #fff;
@backgroundColor: #fafafa;

@defaultTextColor: #000000;
@alternateTextColor: #231F20;
@defaultFont: 'D-DIN-Exp';
@headerFont: 'D-DIN-Exp' !important;

@baseFontSize: 14px;

//@borderColour: #ccc;

@font-face {
  font-family: 'galano_grotesque_demobold';
  src: url('/fonts/rene_bieder_-_galano_grotesque_demo_bold-webfont.woff2') format('woff2'),
  url('/fonts/rene_bieder_-_galano_grotesque_demo_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'galano_grotesque_alt_demobold';
  src: url('/fonts/rene_bieder_-_galano_grotesque_alt_demo_bold-webfont.woff2') format('woff2'),
  url('/fonts/rene_bieder_-_galano_grotesque_alt_demo_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'D-DIN-Exp';
  src:  url('/fonts/D-DIN-Exp.ttf.woff') format('woff'),
  url('/fonts/D-DIN-Exp.ttf.svg#D-DIN-Exp') format('svg'),
  url('/fonts/D-DIN-Exp.ttf.eot'),
  url('/fonts/D-DIN-Exp.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

/* General Layout */
div, table tr td, table tr th, a, div.blockBody, span {
  font-family: @defaultFont;
  color: @defaultTextColor;
  font-size: @baseFontSize;
  font-weight: 300;
  line-height: 21px;
  padding: 0px;
}
#topLine {
  height: 2px;
  background-color: @primaryColor;
}
#headerBar {
  padding-top: 10px;
  background-color: #fff;
  box-shadow: 0px 0px 10px #ccc;
}
#header-container {
  padding-bottom: 10px;
}
#logo-container {
  display: inline;
}
#logo-container span {
  font-size: 12px;
  color: #888;
}
#logo-container a {
  color: @alternateTextColor;
}
#logo {
  width: 70%;
}
.navbar-toggle {
  color: #ccc;
  font-size: 24px;
  background: #fff;
  padding: 15px;
  margin: 0px;
  border: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.navbar-toggle .icon-bar {
  height: 3px;
  background: #ccc;
}
br.clear {
  display: none !important;
}
body{
  overflow-x:hidden;
  background-color: #dedede;
}

.btn-primary {
  color: #fff !important;
  background-color: @primaryColor !important;
  border-color: darken(@primaryColor, 10%) !important;
}
.btn-primary:hover {
  background-color: lighten(@primaryColor, 10%) !important;
  border-color: lighten(@primaryColor, 10%) !important;
}
.form-group {
  margin-bottom: 0px;
}
.createRelatedEntity {
  position: absolute;
  width: calc(100% - 30px);
  z-index: 200;
  height: fit-content;
}

/* TYPOGRAPHY */
body, div, td, input, th, h3, h4, p {
  font-family: @defaultFont !important;
}
label {
  font-family: @defaultFont;
  font-weight: 300;
  font-size: @baseFontSize;
  text-align: center !important;
  width: 100%;
}
h1 {
  font-family: @defaultFont !important;
  font-weight: 300;
  color: @primaryColor;
  font-size: @baseFontSize * 2.5 !important;
}
//h1 strong {
//  font-family: @defaultFont;
//  font-weight: 700;
//  color: @defaultTextColor;
//}
h3 {
  font-family: @headerFont;
  font-weight: normal;
  color: @defaultTextColor !important;
  font-size: @baseFontSize * 2 !important;
  line-height: initial;
}
h5 {
  font-size: 18px;
  font-weight: 300;
  text-align: center;
}
h5 a {
  text-decoration: none;
}
h5 a strong {
  font-family: @defaultFont;
  font-weight: 700;
  color: @primaryColor;
}
.element h2, h2.blockHeading div {
  font-family: @headerFont;
  font-weight: 700;
  color: @primaryColor;
  font-size: @baseFontSize * 1.5 !important;
  line-height: initial;
}
h2 span {
  font-family: @headerFont;
  font-weight: 700;
  font-size: inherit !important;
  line-height: initial;
}
h2 a {
  font-family: @headerFont;
  font-weight: 700;
  color: @primaryColor;
  font-size: inherit !important;
  line-height: initial;
}
h2 a:hover {
  color: @alternateTextColor;
}

///* Forms */
//.form-control, select.form-control {
//  display: block;
//  font-size: @baseFontSize !important;
//  width: 100%;
//  height: 34px;
//  padding: 6px 12px;
//  line-height: 1.42857143;
//  color: @defaultTextColor;
//  background-color: #ffffff;
//  background-image: none;
//  border: 1px solid @secondaryColor3;
//  border-radius: 0px !important;
//  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
//  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
//  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
//  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
//  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
//  -webkit-appearance: none;
//}
//input[type=checkbox] {
//  -webkit-appearance: none;
//  border: 1px solid @borderColour;
//  padding: 5px;
//  margin-right: 5px;
//  margin-bottom: -2px;
//}
//input[type=checkbox]:checked {
//  background: @primaryColor;
//}
//.btn-group-sm>.btn, .btn-sm {
//  border-radius: 0px;
//}
//
//
///* SEARCH */
//#mobile-search-container {
//  display: none;
//  margin-top: 10px;
//  padding: 10px;
//  background: @backgroundColor;
//}
//#mobile-search-container .form-group {
//  margin-bottom: 0px;
//}
//#mobile-search-container .form-group .form-control {
//  background-image: initial;
//  border: initial;
//  border-radius: initial;
//  -webkit-box-shadow: initial;
//  box-shadow: initial;
//  -webkit-transition: initial;
//  -o-transition: initial;
//  transition: initial;
//  font-family: @defaultFont;
//  font-weight: 100;
//  font-size: @baseFontSize;
//}
//#toggleSearchBtn {
//  float: right;
//  color: @secondaryColor3;
//  font-size: (@baseFontSize + 7);
//  background: #fff;
//  padding: 7px 0px 0px 10px;
//  margin: 0px;
//  border: none;
//  -webkit-border-radius: 0px;
//  -moz-border-radius: 0px;
//  border-radius: 0px;
//
//}
//
///* LOGIN MENU */
//#toggleLoginMenu {
//  float: right;
//  color: #ccc;
//  font-size: 20px;
//  background: #fff;
//  padding: 8px 3px 0px 6px;
//  margin: 0px;
//  border: none;
//  -webkit-border-radius: 0px;
//  -moz-border-radius: 0px;
//  border-radius: 0px;
//}
//#mobile-login-menu-container {
//  display: none;
//  background: #fff;
//  margin-top: 10px;
//  height: 100%;
//}
////ul#floatingNavContainer li {
////  width: 100%;
////  list-style: initial;
////  display: flex;
////  float: none;
////  background: #f9f9f9;
////  border-bottom: 1px solid #ccc;
////}
////ul#floatingNavContainer li a {
////  padding: 10px 15px;
////  width: 100%;
////  font-family: 'Futura', 'Trebuchet MS', 'Arial', sans-serif;
////  font-weight: 100;
////  font-size: 12px;
////  color: #fff;
////}
//
//

/* NAV */
.navbar-nav {
  margin: 0px -15px;
}
.navbar-nav>li>a {
  font-family: @defaultFont;
  font-weight: 100;
  font-size: @baseFontSize;
  color: @defaultTextColor;
  text-decoration: none;
  width: 100%;
  list-style: initial;
  display: flex;
  float: none;
  background: @backgroundColor;
  border-bottom: 1px solid @secondaryColor3;
}
.dropdown-menu>li>a {
  text-decoration: none !important;
  font-size: @baseFontSize;
  font-family: @defaultFont !important;
  font-weight: 300 !important;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  border-color: @primaryColor;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  background-color: @primaryColor;
  font-weight: 400 !important;
}
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu > li > a {
    padding: 8px 0px 8px 0px;
  }
}

/* FOOTER */
#contact-line {
  background: url('/site/user_data/images/LL-website-banners-contact-line.jpg') bottom;
  background-size: cover;
  padding: 145px 40px;
  text-align: center;
}
#contact-line .btn-primary {
  background-color: @primaryColor;
  border-color: darken(@primaryColor, 10%);
  text-decoration: none;
  border-radius: 30px;
  white-space: normal;
}
#contact-line .btn-primary:hover,
#contact-line .btn-primary:focus,
#contact-line .btn-primary:active,
#contact-line .btn-primary.active,
#contact-line .open>.dropdown-toggle.btn-primary {
  background-color: darken(@primaryColor, 10%);
  border-color: darken(darken(@primaryColor, 10%), 10%); /*set the color you want here*/
}
body#page_15 #contact-line .btn-primary {
  display: none;
}
#bottom-footer-nav {
  background: #fff;
  padding: 30px;
}
.floating_type_0 li {
  width: 50%;
}
.floating_type_0 li a {
  font-size: @baseFontSize - 2;
}
.floating_type_0 li a:hover {
  color: @primaryColor;
}
#footer {
  background-color: @secondaryColor3;
  color: @alternateTextColor !important;
  padding: 30px 0px;
}
#footer p {
  text-align: center;
  color: #fff;
  font-family: @defaultFont;
  margin-top: 20px;
}
#footer-bar {
  background-color: @primaryColor;
  //padding: 2px 0px;
  text-align: center;
  line-height: 17px;
}
#footer-bar div {
  color: #fff;
  font-size: @baseFontSize - 5;
  font-family: @defaultFont;
}
////ul#floatingNavContainer.floating_type_1 li {
////  display: none;
////  border-bottom: 1px solid @secondaryColor3;
////  background: initial;
////}
////ul#floatingNavContainer.floating_type_1 li a {
////  padding: 10px 0px;
////
////}
////ul#floatingNavContainer.floating_type_1 li#link_contact-us,
////ul#floatingNavContainer.floating_type_1 li#link_branches,
////ul#floatingNavContainer.floating_type_1 li#link_footer-find-a-fabricator,
////ul#floatingNavContainer.floating_type_1 li#link_featured-projects {
////  display: inline-block;
////}
////ul#floatingNavContainer.floating_type_1 li#link_contact-us {
////  border-bottom: none;
////}
//
//
///* SOCIAL */
//.social {
//  float: right;
//  height: 35px;
//  width: 35px;
//  background-color: @secondaryColor3;
//  border-radius: 50%;
//  padding: 5px 7px;
//  margin-right: 10px;
//}
//.social .fa {
//  font-size: 25px;
//  color: @alternateTextColor;
//}
//.social:hover {
//  background-color: @primaryColor;
//}
//
///* */
//ul#floatingNavContainer li {
//  background: transparent;
//  border-bottom: none;
//}
//ul#floatingNavContainer li a {
//  padding: 4px 0px;
//}
//Block Stylings


.corner_style_Padding {
  background: #fff;
}
.corner_style_Padding h1 {
  font-size: @baseFontSize + 4 !important;
}
.corner_style_Padding h2 span {
  font-size: @baseFontSize !important;
}




.corner_style_BannerWrapperTextLeft .element.element_CMS {
  position: absolute;
  width: calc(100% - 30px);
  height: 156px;
  margin: 0px;
  background: linear-gradient(90deg, #efefef 30%, transparent 50%);
  padding: 17px;
}
.corner_style_BannerWrapperTextLeft .element.element_CMS div.blockBody {
  width: 52%;
}
.corner_style_BannerWrapperTextLeft .element h2,
.corner_style_BannerWrapperTextLeft .element h2.blockHeading div {
  font-size: @baseFontSize + 2 !important;
  margin-top: 0px;
}
.corner_style_BannerWrapperTextLeft .element h3 {
  font-size: @baseFontSize !important;
}

.corner_style_BannerWrapperTextLeftTransparentGradient .element.element_CMS {
  position: absolute;
  width: calc(100% - 30px);
  height: 155px;
  margin: 0px;
  background: linear-gradient(90deg, rgba(239, 239, 239, 0.9) 30%, transparent 60%);
  padding: 40px;
}
.corner_style_BannerWrapperTextLeftTransparentGradient .element.element_CMS div.blockBody {
  width: 80%;
}
.corner_style_BannerWrapperTextLeftTransparentGradient .element h2,
.corner_style_BannerWrapperTextLeftTransparentGradient .element h3,
.corner_style_BannerWrapperTextLeftTransparentGradient .element h2.blockHeading div {
  font-size: @baseFontSize !important;
}
.corner_style_BannerWrapperTextLeftTransparentGradient .row:nth-child(2) .inlineImage {
  position: absolute;
  top: -60px;
  width: 50px;
  right: 50px;
}

.corner_style_BannerWrapperTextLeftNoGradient .element.element_CMS {
  position: absolute;
  width: calc(100% - 30px);
  height: 155px;
  margin: 0px;
  padding: 40px;
}
.corner_style_BannerWrapperTextLeftNoGradient .element.element_CMS div.blockBody {
  width: 80%;
}
.corner_style_BannerWrapperTextLeftNoGradient .element h2,
.corner_style_BannerWrapperTextLeftNoGradient .element h3,
.corner_style_BannerWrapperTextLeftNoGradient .element h2.blockHeading div {
  font-size: @baseFontSize !important;
}
.corner_style_BannerWrapperTextLeftNoGradient .row:nth-child(2) .inlineImage {
  position: absolute;
  top: -60px;
  width: 50px;
  right: 50px;
}



@media (min-width: 1200px) {
  @-moz-document url-prefix() {
    .corner_style_BannerWrapperTextLeft .element.element_CMS {
      height: 480px;
    }
  }




  .floating_type_0 li {
    width: 16.66666666666666%;
  }
  .corner_style_BannerWrapperTextLeft .element.element_CMS {
    position: absolute;
    width: calc(100% - 30px);
    height: 480px;
    margin: 0px;
    background: linear-gradient(90deg, #efefef 30%, transparent 50%);
    padding: 40px;
  }

  .corner_style_BannerWrapperTextLeft .element.element_CMS div.blockBody {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    width: 50%;
  }

  .corner_style_BannerWrapperTextLeftTransparentGradient .element.element_CMS {
    position: absolute;
    width: calc(100% - 30px);
    height: 480px;
    margin: 0px;
    background: linear-gradient(90deg, rgba(239, 239, 239, 0.9) 30%, transparent 60%);
    padding: 40px;
  }

  .corner_style_BannerWrapperTextLeftTransparentGradient .element.element_CMS div.blockBody {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    width: 50%;
  }

  .corner_style_BannerWrapperTextLeftTransparentGradient .row:nth-child(2) .inlineImage {
    position: absolute;
    top: -200px;
    width: 200px;
    right: 50px;
  }

  .corner_style_BannerWrapperTextLeftNoGradient .element.element_CMS {
    position: absolute;
    width: calc(100% - 30px);
    height: 480px;
    margin: 0px;
    padding: 40px;
  }

  .corner_style_BannerWrapperTextLeftNoGradient .element.element_CMS div.blockBody {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    width: 50%;
  }

  .corner_style_BannerWrapperTextLeftNoGradient .row:nth-child(2) .inlineImage {
    position: absolute;
    top: -200px;
    width: 200px;
    right: 50px;
  }

  .corner_style_BannerWrapperTextLeft .element h2,
  .corner_style_BannerWrapperTextLeft .element h2.blockHeading div,
  .corner_style_BannerWrapperTextLeftTransparentGradient .element h2,
  .corner_style_BannerWrapperTextLeftTransparentGradient .element h2.blockHeading div,
  .corner_style_BannerWrapperTextLeftNoGradient .element h2,
  .corner_style_BannerWrapperTextLeftNoGradient .element h2.blockHeading div {
    font-size: @baseFontSize * 2.5 !important;
  }

  .corner_style_BannerWrapperTextLeft .element h3,
  .corner_style_BannerWrapperTextLeftTransparentGradient .element h3,
  .corner_style_BannerWrapperTextLeftNoGradient .element h3 {
    font-size: @baseFontSize * 1.5 !important;
  }

  .corner_style_BannerWrapperTextLeft .element h2 span,
  .corner_style_BannerWrapperTextLeftTransparentGradient .element h2 span,
  .corner_style_BannerWrapperTextLeftNoGradient .element h2 span {
    font-size: @baseFontSize * 2.5 !important;
    font-family: @headerFont;
    font-weight: 700;
    line-height: initial;
  }

  .corner_style_Padding h1 {
    font-size: 35px !important;
  }
  .corner_style_Padding h2 span {
    font-size: inherit !important;
  }

}
@media (min-width: 768px) {
  #logo {
    width: 300px;
  }
  #logo-container {
    float: left;
  }
  .container {
    width: initial;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse.collapse {
    display: initial !important;
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.in {
    overflow-y: visible !important;
    display: block !important;
  }
  .navbar-nav>li {
    float: initial;
    margin-top: -1px;
  }
  .navbar-nav>li>a {
    background-color: transparent;
    background: none;
    border-bottom: none;
  }
  .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
  }

  .nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .nav>li>a:focus, .nav>li>a:hover {
    color: @primaryColor;
    background-color: #fff;
    font-weight: 700;
  }
}
@media (min-width: 1200px) {
  #logo {
    width: 250px;
  }
  .container {
    width: 1214px;
  }
  .navbar-toggle {
    display: none;
  }
  .navbar-nav {
    float: right;
    margin-top: 5px;
    margin-right: -30px;
  }
  .navbar-nav>li {
    float: left;
  }

  .navbar-nav > li > a {
    float: none;
    background: transparent;
    border-bottom: none;
  }

  .navbar-collapse.collapse {
    display: block !important;
  }
}