/* DE Web Works - Main CSS */

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #56575b;
}

h1, h2, h3 {  
  font-family: 'Roboto', sans-serif;
}

.page-wrapper {
  position: relative;
  margin: 0 auto;
  background-color: #fff;
}

.container {
  max-width: 70.625rem;
  margin: 0 auto;
}

.container > .row,
.rotator > .row,
.banner > .row {
  max-width: 100%;
}

.no-js .top-bar {
  display: none;
}

/*------------------------------------*\
    #SITE HEADER
\*------------------------------------*/
.header {
  padding-top: 1.5625rem;
}

.header-logo img {
  margin: 1.125 0 1.5625rem;
}

.header-phone {
  padding-top: 0;
  font-size: 1.5rem;
  font-weight: 300;
}

.header-phone,
.header-phone a,
.header-phone a:hover {
  color: #272626;
  text-decoration: none;
}

/*------------------------------------*\
    #HOMEPAGE ROTATOR
\*------------------------------------*/
.rotator {
  position: relative;
}

.slick-slider {
  margin-bottom: 2.8125rem;
}

.slick-slide img {
  width: 100%;
}

.slick-prev,
.slick-prev:hover,
.slick-prev:focus {
  top: auto;
  left: 1.25rem;
  bottom: 0.625rem;
  width: 1.0625rem;
  height: 1.5625rem;
  background-image: url(./img/arrow-prev.png);
  background-repeat: no-repeat;
}

.slick-next,
.slick-next:hover,
.slick-next:focus {
  top: auto;
  right: 1.25rem;
  bottom: 0.625rem;
  width: 1.0625rem;
  height: 1.5625rem;
  background-image: url(./img/arrow-next.png);
  background-repeat: no-repeat;
}

.slick-prev,
.slick-next {
  z-index: 101;
}

.slick-prev:before,
.slick-next:before {
  content: "";
}

.slick-dots {
  z-index: 100;
  bottom: 0;
  margin: 0;
  padding: 0.4375rem 0 0.6875rem 0;
  background-color: rgba(0,0,0,0.33);
}

.slick-dots li button:before {
  content: "\2022";
  width: 1.0625rem;
  height: 1.0625rem;
  font-size: 1rem;
  line-height: 1.25rem;
  color: transparent;
  opacity: 1;
  border: solid 0.0625rem #fff;
  border-radius: 3.125rem;
}
.slick-dots li.slick-active button:before,
.slick-dots li button:hover:before {
  color: transparent;
  opacity: 1;
  background-color: #ed1c24;
}

/*------------------------------------*\
    #CIRCLE CALLOUTS
\*------------------------------------*/
.callouts {
  padding: 1.25rem 0 1.25rem;
  background-color: #ed1c24;
}

.callouts p {
  margin-left: 5rem;
  margin-right: 5rem;
  font-family: 'Roboto Slab', serif;
  font-size: 1.5625rem;
  font-weight: 300;
  line-height: 1.375;
  color: #fff;
  text-align: center;
}

.callouts .medium-3.columns {
  text-align: center;
}

.callouts .medium-3.columns img {
  margin-top: 0;
}

.callout-title {
  max-width: 10rem;
  margin: 0.75rem auto 0;
  font-family: 'Roboto', serif;
  font-size: 1.0625rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  text-decoration: underline;
}

/*------------------------------------*\
    #BANNERS
\*------------------------------------*/
.banner .small-12 img {
  width: 100%;
}

.shadow-top,
.shadow-bottom {
  position: relative;
}

.shadow-top:before {
  position: absolute;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  min-height: 2.5625rem;
  background-image: url(./img/shadow-top.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  pointer-events: none;
}

.shadow-bottom:after {
  position: absolute;
  bottom: 0;
  content: "";
  width: 100%;
  height: 100%;
  min-height: 2.5625rem;
  background-image: url(./img/shadow-bottom.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  pointer-events: none;
}

/*------------------------------------*\
    #PAGE CONTENT
\*------------------------------------*/
h1 {
  margin-bottom: 1rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1.75rem;
  color: #5b5b5c;
}

.content,
.content p {
  font-weight: 300;
  font-size: 1.0625rem;
  color: #1c1c1c;
  line-height: 1.55;
  word-spacing: 0.09375rem;
}

.content p {
margin-bottom: 0.5rem;
}

.content h2 {
  margin-top: 1.6875rem;
  margin-bottom: 0.5rem;
  font-size: 1.375rem;
  font-weight: 300;
  color: #ed1c24;
}

.content h3 {
  margin-top: 1.6875rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 300;
  color: #ed1c24;
}

.content a {  
  color: #014787;
  text-decoration: underline;
}

.content a:hover {
  color: #ed1c24;
  text-decoration: underline;
}

.home-content {
  margin: 1.25rem 0 3.125rem 0;
}

.home-content .container {
  max-width: 68.75rem;
  border-bottom: solid 1px #000;
  padding: 0 3.75rem 2.1875rem;
}

/*------------------------------------*\
    #HOMEPAGE CALLOUTS
\*------------------------------------*/
.home-callouts .container {
  max-width: 71.875rem;
  padding-bottom: 3.4375rem;
}

.home-callouts .columns {
  position: relative;
}

/*
.home-callouts h2 {
  position: relative;
  display: inline-block;
  width: 70%;
  height: 60px;
  margin-top: -30px;
  margin-left: 20px;
  margin-bottom: 24px;
  padding: 33px 0 4px 25px;
  font-size: 17px;
  color: #fff;  
  background-color: rgba(0,0,0,0.49);
}
*/

.home-callouts .columns div.title-wrap {
  padding: 0;
  display: table;
  width: 70%;
  height: 3.75rem;
  margin-top: -1.875rem;
  margin-left: 1.25rem;
  margin-bottom: 1.5rem;
  line-height: normal;
}
.home-callouts h2 {
  position: relative;
  display: inline-block;
  display: table-cell;
  vertical-align: bottom;
  height: 3.75rem;
  padding: 0.25rem 0 0.25rem 1.5625rem;
  font-size: 1.0625rem;
  color: #fff;  
  background-color: rgba(0,0,0,0.49);
}

.home-callouts h2:before {
  position:absolute;
  top: 0;
  right: -2.1875rem;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 2.1875rem 3.75rem 0;
  border-color:  transparent transparent rgba(0,0,0,0.49) transparent;
}

.home-callouts h2:after {
  position: absolute;
  right: -3.75rem;
  bottom: 0.3125rem;
  content: "+";
  width: 1.25rem;
  height: 1.25rem;
  font-size: 2.25rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: #ed1c24;
}

/* Fix plus sign vertical position on IE */
@media screen and (min-width:0\0) {
  .home-callouts h2:after {    
    bottom: -5px;    
  }  
}

.home-callouts .columns div {
  padding: 0 2.8125rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #898686;
}

.home-bottom {  
  margin-bottom: 4.0625rem;
  padding-top: 4.0625rem;
}

.home-bottom-left ul {
  margin-top: 1.875rem;
  line-height: 2.65;
}

.secondary-content {
  margin-top: 3.125rem;
}

.secondary-content .container {
  padding: 0 3.75rem 2.1875rem;
}

.secondary-content aside {
  padding: 1.25rem 0 2rem;
  border-top: solid 0.0625rem #897a75;
  border-bottom: solid 0.0625rem #897a75;
  font-family: 'Roboto Slab', serif;
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.5;
  color: #027db2;
}

.image-right {
  float: right;
  margin-left: 5rem;
  margin-bottom: 3rem;
}

/*------------------------------------*\
    #FOOTER
\*------------------------------------*/
.footer {
  padding: 2.5rem 0 3.75rem;
  background-color: #4e4d4d;
}

.footer-nav-wrap {
  min-height: 7.5rem;
}

.footer-nav {
  list-style-type: none;
  margin: 1rem 0 0 0;
  padding: 0;
}

.footer-nav li {
  display: inline;
  margin: 0;
  padding: 0;
}

.footer-nav li:after {
  content: "|";
  padding: 0 0.5rem 0 0.625rem;
}

.footer-nav li:last-of-type:after {
  content: "";
  display: none;
}

.footer-nav,
.footer-nav a {
  font-size: 0.9375rem;
  color: #fff;
}

.footer-nav a:hover,
.footer-nav a.active {
  color: #ed1c24;
  text-decoration: none;
}

.footer-links {
  list-style-type: none;
  margin: 0 0 0.25rem 0;
  padding: 0;
}

.footer-links li {
  display: inline;
  margin: 0;
  padding: 0;
}

.footer-links li:after {
  content: "|";
  padding: 0 0.5rem 0 0.625rem;
}

.footer-links li:last-of-type:after {
  content: "";
}

.footer-links a {
  font-size: 0.875rem;
  color: #a6a3a3;
}

.footer-links a:hover {
  text-decoration: underline;
}

.copyright {
  font-size: 0.875rem;
  line-height: 1.8;
  color: #a6a3a3;
}

.copyright a {
  color: #a6a3a3;
}

.footer-contact-logo {
  margin-top: 1rem;
}

.footer-contact {
  float: right;
  margin: 2rem 0.875rem 0 0;
  text-align: left;
}

.footer-contact,
.footer-contact a {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.45;
  color: #a6a3a3;
}

.footer-phone,
.footer-email {
  position: relative;
}

.footer-phone:before {
  position:absolute;
  top: 1px;
  left: -1.375rem;
  content: "";
  width: 0.9375rem;
  height: 0.9375rem;
  background-image: url(./img/icon-phone.png);
}

.footer-email:before {
  position:absolute;
  top: 3px;
  left: -1.375rem;
  content: "";
  width: 0.9375rem;
  height: 0.9375rem;
  background-image: url(./img/icon-mail.png);
}

.footer-logo {
  margin-top: 1.5rem;
}

/*------------------------------------*\
    #FORMS
\*------------------------------------*/
input[data-invalid],
select[data-invalid],
textarea[data-invalid] {
    border-color: #f04124 !important;
}

.error small.error label {
    color: inherit;
}


/*------------------------------------*\
    #CONTACT
\*------------------------------------*/
.home-contact h2 {
    margin: 0;
    padding: 0.625rem 1rem;
    font-family: 'Roboto Slab', serif;
    font-size: 1.5625rem;
    font-weight: 300;    
    color: #fff;
    background-color: #0099dc;
}

.contact-form {
  padding: 0.625rem 1rem;
  background-color: #ededed;
}

.contact-form label {
  color: inherit;
}

.contact-form input[type='text']{
  height: 2.2rem;
  margin-bottom: 1rem;
}

.contact-form textarea {
  height: 6.25rem;
}

.contact-form .button {
  border-radius: 0.1875rem;
  box-shadow: inset -1px -1px 2px 0px rgba(183,104,0,0.5),
    inset 1px 1px 2px 0px rgba(245,198,69,1);
  padding: 0.8125rem 2rem;
  font-size: 1.25rem;
  color: #3a3a3a;
  background-color: #f0ab00;
}

.contact-form .button:hover {
  box-shadow: inset -1px -1px 5px 0px rgba(209,130,26,0.5),
    inset 1px 1px 5px 0px rgba(255,224,95,1);  
  background-color: #FFC51A;
}

.scroll-to-top-wrap {
  position: absolute;
  right: 1rem;
  bottom: 0;
  width: 2.125rem;
  height: 3.0625rem;
}

.scroll-to-top {
  text-decoration: none;
  position: fixed;
  bottom: 1rem;
  display:none;
}

/*------------------------------------*\
    #MEDIA QUERIES
\*------------------------------------*/
/* Small only */
@media screen and (max-width: 47.9375em) {
  /*------------------------------------*\
      #SITE HEADER
  \*------------------------------------*/
  .header {
    padding-top:0;
  }

  .header-logo,
  .header-phone {
    text-align: center;
  }

  .header-logo img {
    margin: 1rem 0 0.5rem;
  }

  .header-phone {
    padding-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 300;
  }

  .title-bar {
    background-color: #ed1c24;
  }
  .menu-icon {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      width: 1.25rem;
      height: 1rem;
  }  
  .menu-icon::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 0.125rem;
    background: #fefefe;
    top: 0;
    left: 0;
    box-shadow: 0 0.4375rem 0 #fefefe, 0 0.875rem 0 #fefefe;
  }
  .menu-icon:hover::after {
      background: #cacaca;
      box-shadow: 0 0.4375rem 0 #cacaca, 0 0.875rem 0 #cacaca;
  }
  .top-bar, .top-bar ul {
    background-color: #333;
  }  
  .menu > li > a {
    color: #fff;
  }
  .is-drilldown-submenu-parent > a::after {
    border-color: transparent transparent transparent #fff;    
  }
  .js-drilldown-back > a::before {      
    border-color: transparent #fff transparent transparent;
  } 

  .slick-slider {
    margin-bottom: 0.5rem;
  }

  /*------------------------------------*\
      #HOMEPAGE CALLOUTS
  \*------------------------------------*/
  .home-callouts .container {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
  }

  .home-callouts .columns {
    padding-bottom: 2rem;
  } 
   
  .home-callouts img {
    width: 100%;
  }

  .home-callouts .columns div {
    padding: 0 1rem;    
  }

  /*------------------------------------*\
      #CIRCLE CALLOUTS
  \*------------------------------------*/
  .callouts {
    padding: 2rem 0 2rem;
  }

  .callouts .small-6:nth-of-type(odd) {
    clear: left;
  }

  .callouts p {
    margin-left: 0;
    margin-right: 0;    
    font-size: 1.25rem;    
  }  

  .callout-title {
    max-width: 80%;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 300;
    text-decoration: underline;
  }  

  /*------------------------------------*\
      #PAGE CONTENT
  \*------------------------------------*/
  .home-content .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .secondary-content {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .secondary-content .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .image-right {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
  }

  /*------------------------------------*\
      #FOOTER
  \*------------------------------------*/
  .footer {
    padding: 1rem 0 0;
  }

  .footer-nav {
    margin: 0 2rem 1.5rem;
    padding: 0;
  }

  .footer-nav li {
    display: block;
  }

  .footer-nav li:after {
    content: "";
    padding: 0;
  }

  .footer-nav,
  .footer-nav a {
    font-size: 1.125rem;
  }

  .footer-nav a:hover {
    text-decoration: underline;
  }

  .footer-logo {
    margin-top: 0;
    margin-left: 2rem;
  }

  .footer-links {
    margin: 0.5rem 0 0 2rem;
    padding: 0;
  }

  .footer-links li {
    display: block;
  }

  .footer-links li:after {
    content: "";
    padding: 0;
  }

  .footer-links a {
    font-size: 1.125rem;
    color: #a6a3a3;
  }

  .footer-links a:hover {
    text-decoration: underline;
  }

  .footer-contact-logo {
    display: none;
  }

  .footer-contact {
    float: none;
    margin: 1rem 2rem;
    text-align: left;
  }

  .footer-contact,
  .footer-contact a {
    font-size: 1.125rem;
  }  

  .copyright {
    margin: 1rem 2rem;
  }
}

/* Medium and up */
@media screen and (min-width: 48em) {
  .no-js .top-bar {
    display: block;
  }

  .no-js .title-bar {
    display: none;
  }
  
  .header-logo {
    text-align: left;
  }
  .header-phone {
    text-align: right;
  }
  .top-bar {
    padding: 0;
  }  
  .top-bar, .top-bar ul {
    background-color: transparent;
  }
  .top-bar-right {
    margin: 1.6875rem -1.5rem 0 0;
  }
  .menu > li > a {
    padding: 0.7rem 0.75rem 1.375rem 0.75rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #797676;
  }

  .menu > li > a:hover,
  .top-bar-right > .menu > li:hover > a {
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
    color: #fff;    
    background-color: #ed1c24;
  }


  .menu > li > a.active {
    color: #ed1c24;
  }

   .menu > li > a.active:hover {
    color: #fff;
  }

  .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    position: absolute;
    top: 0.8rem;
    right: 1.25rem;    
    content: 'V';    
    border: none;    
    font-size: 0.6875rem;
  }

  ul.is-dropdown-submenu {
    z-index: 1001;
    background-color: #000;
    border: none;
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;    
    padding: 0.75rem 0 1.25rem 0;
  }

  ul.is-dropdown-submenu a {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 300;    
    color: #fff;
  }
  ul.is-dropdown-submenu a:hover {
    background-color: #897a75;
    border-radius: 0;
  }

  .home-callouts .row .columns {
    padding: 0 1.5625rem;  
  }
}

/* Tablet only */
@media screen and (min-width: 48em) and (max-width: 64em) {
  .top-bar-right {
    margin: 1.6875rem 0 0 0;
  }

  .home-callouts .row .columns {
    padding: 0 1rem;  
  }

  .home-callouts .columns div {
    padding: 0 1.25rem;    
  }

  .footer-contact-logo {
    margin-left: -1rem;
  }
  .footer-contact {
    margin-right: 0;
  }
}

/* Tablet only */
@media screen and (min-width: 48em) and (max-width: 64em) and (orientation: portrait) {  
  .dropdown.menu > li.is-dropdown-submenu-parent > a::after {        
    right: 0.75rem;
  }  

  .dropdown.menu > li.is-dropdown-submenu-parent > a {
    padding-right: 1rem;
  }  

  .home-callouts .row .columns {
    padding: 0 0.5rem;  
  }  

  .footer-contact-logo {
    margin-left: 1rem;
  }  
}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

/* Breakpoint for top navigation, page width between 768px and 1030px */
@media screen and (min-width: 48em) and (max-width: 1030px) {
  .menu > li > a {
    padding: 0.7rem 0.625rem 1.375rem 0.625rem;
    font-size: 1rem;      
  }

  .dropdown.menu > li.is-dropdown-submenu-parent > a::after {        
    font-size: 0.5625rem;
  }  
}

/* Breakpoint for top navigation, page width between 768px and 910px */
@media screen and (min-width: 48em) and (max-width: 910px) {
  .menu > li > a {
    padding: 0.7rem 0.5rem 1.375rem 0.5rem;
    font-size: 0.8125rem;      
  }

  .dropdown.menu > li.is-dropdown-submenu-parent > a::after {    
    font-size: 0.4375rem;
  }  
}