/*
This is the main CSS file for the CDE Website 
*/


body {
    font-family: "Open Sans";
    font-weight: 400;
    font-size: 1.6em;
    line-height: 1.8;
    color: #818181;
    color: #383838;
    margin: 0px;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: auto;
    --overflow-x: hidden;
    --overflow-y: scroll;
    -webkit-overflow-scrolling: touch; 
  }

a:-webkit-any-link {
    color: -webkit-link;
    cursor: grab;
    text-decoration: none;
}

a:link {
    cursor: grab;
    color: #383838;
    text-decoration: none;
}

a:visited {
    cursor: grab;
    text-decoration: none;
    color: #383838;
}

a:hover {
    cursor: grab;
}

#screentoosmall.container-fluid {
    display: none;
}

a.ex1:link {
    color: white;
}

a.ex1:visited {
    color: white;
}

a.ex1:hover {
    color: white;
}

#success_message { display: none;}

.jumbotron h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.5em;
    padding-bottom: 15px;
}


.mini-jumbotron h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.5em;
    padding-bottom: 15px;
    text-align: center;
    
}


.lead {
    padding-bottom: 2%;
}

.jumbotron p {
    --font-size: 1.2em;
    --color: black;
    font-weight: bold;
}

.whyus {
    background-color: #ddd2c2;
    --height: 300px;
    margin: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    --border: 1px solid red;
    width: 32%;
    min-height: 180px;
}

.whyus > h4 {
    --font-weight: 400;
    font-size: 0.94em;
    text-align: center;
    
}

.whyus > p {
    text-align: center;
}


h2 {
    --font-size: 32px;
    font-size: 1.4em;
    text-transform: uppercase;
    color: #383838;
    --font-weight: 600;
    margin-bottom: 20px;
    --background-color: #c1b282;
    font-family: "Montserrat";
    --font-weight: bolder;
    --font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0em;
  }

  h4 {
      --font-size: 19px;
      font-size: 1.1em;
      line-height: 1.375em;
      color: #383838;
      font-weight: 600;
      margin-top: 10px;
      margin-bottom: 10px;
      --margin-bottom: 30px;
      --color: #c1b282;
      font-family: "Montserrat";
      letter-spacing: 0em;
  }  

h4.aboutusheader {
    padding-top: 20px;
}

  .jumbotron {
        padding: 0px;
        --padding-top: 50px;
        margin-top: 70px;
        border: 0px;
        --border-top: 1px solid red;
        --padding-top: 0px;
        --margin-top: 0%;
        padding-bottom: 0px;
        background-color: #383838;
        --background-image: URL(../images/banner/banner_2.jpg);
        color: #fff;
        --padding: 100px 25px;
        --height: 200px;
        margin-bottom: 20px;
  }


#hero.container-fluid {
    margin:0px;
    padding: 0px;
}

/* Carousel */

.carousel {
    --height: 600px;
    max-height: 600px;
    max-width: 100%;
    overflow: hidden;
    margin-top: 0px;
}

.carousel-inner > .item > img {
    margin: 0 auto;
    border: 0px;
}


.carousel-caption {
    --border: 1px solid red;
    position: absolute;
    right: 10%;
    top: 25%;
    left: 10%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    vertical-align: middle;
    bottom: inherit;
}

.btn-getquote {
    margin-top: 5px;
}


.carousel-indicators li {
    position: relative;
    width: 60px;
    height: 5px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    border-radius: 0px;
}

.carousel-indicators li.active {
    position: relative;
    margin-top: 1px;
    margin-bottom: 1px;
    width: 60px;
    height: 5px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    background-color: rgba(255,255,255,.5);
}

.mini-jumbotron {
    margin-top: 70px;
    padding: 0px;
    background-color: #383838;
    --background-color: #c1b282;
    background-image: URL(../images/dark-wood-final.jpg);
    color: #fff;
    --padding: 100px 25px;
    padding-left: 15%;
    padding-right: 15%;
    text-align: center;
    padding-top: 2%;
    padding-bottom: 2%;
    --font-family: Montserrat, sans-serif;
    --display: block;
    z-index: 5;
    --color: #383838;
    color: white;
}




.mini-jumbotron .lead {
    font-size: 1em;
    text-align: center;
    --color: #c9c9c9;
}



#img_gallery {
    margin-top: 60px;
    background-color: #383838;
    background-color: #FFFFFF;
    Background-color: #c9c9c9;
    --border: 1px solid red;
    padding: auto;
}


.container-fluid {
    --padding: 60px 50px;  /* remember to add this to lower resolutions */
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 2%;
    padding-bottom: 2%;
    --border: 1px solid black;
    overflow-x: hidden;
}

#in-materials2 > #certifiedcontainer.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}

#framing-materials p {
    margin-bottom: 20px;
}

#deckboard-materials p {
    margin-bottom: 20px;
}

.navbar .container-fluid {
    overflow: visible;
}


#about, #services {
    padding-top: 70px; 
    margin-top: -70px;
}

#about.container-fluid {
    margin-bottom: 2%;
}
      
#services.container-fluid {
    display: block;
    padding-top: 5%;
    --padding-top: 8%;
    padding-left: 0px;
    padding-right: 0px;
}


.svc_more {
    padding-top: 15px;
    --border: 1px solid red;
   text-align: right;
    padding-right: 15px;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 1em;
}

.svc_more a:link {
    text-decoration: none;
    color: #282828;
}

.svc_more a:visited {
    text-decoration: none;
    color: #282828;
}

.svc_more a:hover {
    text-decoration: none;
    color: #282828;
}

#work.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}


#header.container-fluid {
    padding: 0px;
    --border: 1px solid red;
}

#thanks {
    text-align: center;
    margin-top: 10%;
}



/* CUSTOMIZATION - Inner Pages */

.in-bggold {
    background-color: #c1b282;
}

/* Call to Action */
 

/* Work Gallery */
.work_gallery {
    --border: 0px solid black; 
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2%;
    padding-top: 2%;
    min-height: 450px; /* Reserve space to prevent layout shift */
}

/* Prevent layout shift while slider loads */
.work_gallery .bxslider {
    visibility: hidden;
}

.work_gallery .bx-wrapper .bxslider {
    visibility: visible;
}

/* Materials */


/* redo materials all clean like */
.materials-container0 {
    position: relative;
    --border: 0px solid black;
    margin-left: 15px;
    margin-right: 15px;
}

.materials-container {
    position: relative;
    --background-color: #383838;
    --color: white;
    margin: 0px;
    border: 5px solid white;
    --height: 600px;
    --text-align: center;
    --padding-top: 70px;
    padding: 0px;
}



.materials-title-container {
    --border: 1px solid red;
    height: 50px;
    display: table;
    width: 100%;
   
}

.materials-title {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    font-size: 18px;
    --color: #282828;
    --color: white;
    --border: 1px solid white;
    position: relative;
    z-index: 2;
    font-weight: bold;
    padding-left: 4px;
  
}


.material-sample {
   --position: absolute;
    --top: 0px;
    --left: 0px;
    max-height: 200px;
    --border: 5px solid red;
    overflow: hidden;
    --border-bottom: 5px solid white;
    z-index: 1;
    
}
       
.material-sample img {
    width: 100%;
}


.materials-content {
    --border: 1px solid red;
    padding: 4px;
    --padding-top: 10px;
  
}

.materials-content ul {
    -webkit-padding-start: 20px;
    --border: 1px solid black;
    font-size: 1em;
}

.materials-description {
    font-size: 0.85em;
    text-align: left;
}

.materials-header {
    background-color: #383838;
    --border: 1px solid red;
    color: white;
    font-size: 18px;
}


/* CUSTOMIZATION - About Section Collapsible Content */
/* Icon when the collapsible content is shown */
.btn.btn-readmore:after {
    font-family: "Glyphicons Halflings";
    content: "\e113";
    --float: right;
    margin-left: 15px;
}

/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
    content: "\e114";
  }


.btn-readmore {
    float: right;
    margin-top: 20px;
    margin-right: 30px;
    color:#282828;
    background-color:#c1b282;
    --border-color: red;
    text-decoration: none;
    font-weight: bold;
}

.btn-readmore:active {
    --border: 1px solid #fff;
    text-decoration: none;
    color: #fff;
}

.btn-readmore:focus {
    --border: 1px solid #fff;
    text-decoration: none;
    color: #fff;
}
      
.btn-readmore:hover {
    color: #383838;
}

.form-control {
    border: 1px solid #383838;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.075);
    box-shadow: inset 0 0px 0px rgba(0,0,0,.075);
}

.form-control:focus {
    border: 1px solid #c1b282; 
}

.btn {
    border-radius: 0px;
}
  
.btn.btn-default.pull-right {
    border: 0px solid #fff;
    color:#282828;
    background-color:#c1b282;
    text-decoration: none;
    font-weight: bold;
    }


.btn.btn-default.pull-right:active {
    --border: 1px solid #fff;
    border: 0px solid #fff;
    text-decoration: none;
    color: #fff;
}

.btn.btn-default.pull-right:focus {
    --border: 1px solid #fff;
    border: 0px solid #fff;
    text-decoration: none;
    color: #fff;
}
      
.btn.btn-default.pull-right:hover {
    border: 0px solid #fff;
    color: #383838;
}
    

/* End Customization */
      

/* CUSTOMIZATION - Services and Materials Section */
  .serv_box {
      border: 1px solid #c1b282;
      height: 400px;
      display: block;
      overflow: hidden;
      position: relative;
  }

/* Images in the serv box */
.serv_box IMG {
    height: 400px;
}


.serv_frontdrop {
    position: absolute;
    left: 0px;
    top: 0px;
    border: 1px solid green;
    background: linear-gradient(315deg, rgba(56,56,63,0.8) 0%, rgba(56,56,63,0.8) 100%);
    width: 100%;
    height: 100%;
    opacity: 0;
}

.serv_frontdrop:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); 
    transition: all 0.3s ease;
}


.serv-title-text {
        letter-spacing: 0.1em;
        padding-top: 10%;
        padding-bottom: 10%;
        writing-mode: vertical-rl;
        -ms-writing-mode: bt-rl;
        transform: rotate(180deg); 
        border: 0px solid #c1b282;
        position: absolute;
        top: 0px;
        right: 16px;
        background-color: #c1b282;
        font-family: "Montserrat";
        font-weight: 600;
        font-size: 1em;
        --font-weight: bold;
        color: #383838;
        z-index: 2;
      }
      
.serv-header-border {
        --border: 1px solid #c1b282;
        height: auto;
        display: block;
        border-left: 0px solid black;
        position: absolute;
        left: 4px;
      }

#services .row.border-left {
    border-left: 20px solid #c1b282;
    --margin-right: 10%;
    height:auto;
    margin-left: 0px;
}



.work-header-border {
    --border: 1px solid #c1b282;
    height: auto;
    display: block;
    border-left: 0px solid black;
    position: absolute;
    right: 4px;
    }
      
#work .row.border-right {
    border-right: 20px solid #c1b282;
    --margin-right: 10%;
    height:auto;
    margin-right: 0px;
}

#services .row.border-left {
    border-left: 20px solid #c1b282;
    --margin-right: 10%;
    height:auto;
    margin-right: 0px;
}
      
.serv-text-lt {
    font-size: 24px;
    color: #383838;
    padding-bottom:2px;
    writing-mode: vertical-rl;
    -ms-writing-mode: bt-rl;
    transform: rotate(180deg);
    font-weight: bold;
    border: 0px solid black;
  }


#services h2, #work h2 {
    margin-top: 8px;
    font-size: 1.4em;
    text-transform: uppercase;
    color: #383838;
    font-family: "Montserrat";
    font-weight: 600;
    writing-mode: vertical-rl;
    -ms-writing-mode: bt-rl;
    transform: rotate(180deg);
    font-size: 1.4em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    --border: 1px solid black;
  
}

.mobtitle h2 {
    display: none;
}


.mat_container {
    --border: 1px solid #c1b282;
    background-color: #c1b282;
    height: AUTO;
    padding-bottom: 2%;
    padding-top: 2%;
    --padding: 1%;
    --text-align: right;
  }
      

.mat_box {

    display: block;
    margin: 5%;
    text-align: center;
    --border: 1px solid black;
    opacity: 1;
    position: relative;
  }


.row.no-gutter {
  margin-left: 2%;
  margin-right: 2%;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

/*
A .instagram_gallery {
    border-color: white;
    text-decoration: none;
    color: white;
    opacity: 0;
    --background: linear-gradient(135deg, rgba(38, 163, 255, 0.85), rgba(83, 201, 179, 0.85));
    background: linear-gradient(315deg, rgba(56,56,63,0.8) 0%, rgba(56,56,63,0.8) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}

A .instagram_gallery:visited {
    border-color: white;
    text-decoration: none;
    color: white;
}

A .instagram_gallery:hover {
    text-decoration: none;
    color: black;
    opacity: 1;
    transition: all 0.3s ease;
}
*/

/*
.instagram_gallery img {
    border: 0px solid grey;
}

.instagallery_image_size {
    margin: 1% 1%;
   /* --width:23%; come back to this */ /*
    width: 100px;
    float: left;
}


#instafeed_napi a:link,
#instafeed_napi a:visited,
{
    opacity: 1;
    
}

#instafeed_napi a:hover
{
    --cursor: crosshair;
    opacity: 0.7;
   -- background: linear-gradient(315deg, rgba(56,56,63,0.8) 0%, rgba(56,56,63,0.8) 100%);
    transition: all 0.3s ease;
}

*/

A .lw-backdrop {
    border-color: white;
    text-decoration: none;
    color: white;
    opacity: 0;
    --background: linear-gradient(135deg, rgba(38, 163, 255, 0.85), rgba(83, 201, 179, 0.85));
    background: linear-gradient(315deg, rgba(56,56,63,0.8) 0%, rgba(56,56,63,0.8) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}

A .lw-backdrop:visited {
    border-color: white;
    text-decoration: none;
    color: white;
}

A .lw-backdrop:hover {
    text-decoration: none;
    color: black;
    opacity: 1;
    transition: all 0.3s ease;
}

.lw-description {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;   
  z-index: 2;
   
}


.work_box_msg {
    --border: 1px solid black;
    --height: 200px;
    display: block;
    --padding: 1%;
    padding-left: 0.5%;
    text-align: left;
    margin: 0px;
    margin-top: 0%;
    margin-left: 3%;
    margin-bottom: 0%;
    --border: 1px solid black;

  }

.work_box_msg h4 {
    --color: #c1b282;
    --color: white;
    font-size: 1.4em;
    --color: red;
}

.materials-text-lt {
        font-size: 24px;
        color: #383838;
        padding-bottom: 2px;
        writing-mode: vertical-rl;
        -ms-writing-mode: bt-rl;
        transform: rotate(180deg);
        font-weight: bold;
        border: 0px solid black;
        margin-left: 0%;
  }

/* End Customization */

/* CUSTOMIZATION - Footer Section */
footer.container-fluid {
    padding-left: 0%;
      padding-right: 0%;
      padding-top: 0%;
      padding-bottom: 0%;
    --background-color: white;
}

.footer-shade{
    background-color: #383838;
}


.footer_box_old {
    border: 1px solid #c1b282;
    height: 300px;
    padding-top: 4%;
    width: 25%;
    --margin-right: 1%;
    --width: 20%;
    --margin-left: 20px;
    float: left;
    --display: block;
    --padding-top: 30%;
    -- padding-left: 10%;
    --padding: 5%;
    --text-align: right;
  }

.footer-header-border {
        border-left: 20px solid #c1b282;
        height: 300px;
        display: block;
        padding: 5%;  
      }

.footer-text-lt {
    margin-top: 1%;
    letter-spacing: 0.1em;
    font-size: 12px;
    --color: #c1b282;
    color: #383838;
    --color: black;
    padding-bottom:2px;
    writing-mode: vertical-rl;
    -ms-writing-mode: bt-rl;
    transform: rotate(180deg);
    font-weight: bold;
    --border: 1px solid white;
  }


.footer_box a {
    display: block;
    --color: #818181;
    color: white;
    --color: #c1b282;
    color: #ddd2c2;
    text-decoration: none;
}

.footer_box a:visited {
    --color: #818181;
    color: white;
    --color: #c1b282;
    color: #ddd2c2;
    text-decoration: none;
}


.footer_box a:hover {
    color: #818181;
    color: white;
    text-decoration: none;
}


.footer_backtopbox a {
     color: #c1b282;
}

.footer_backtopbox a:visited {
     color: #c1b282;
}

.footer_backtopbox a:hover {
     color: #c1b282;
}


.mobile_copyright {
    display: none;
}


/* This is where you calculate the footer divs */
.col-sm-1.test:first-child {
    --border: 1px solid white;
    width: 12%;
    background-color: white;
}
.col-sm-10.test {
    --border: 1px solid white;
    width: 76%;
    padding-right: 10%;
    --padding-top: 2%;
}

.col-sm-3.test {
    --margin: 0px;
}

.try1:first-child {
    --margin-left: 2%;
}


.try1{
    margin-left: 6%;
    margin-top: 5%;
}


.try2 {
    float: left;
    --border: 1px solid #c1b282;
    margin-top: 5%;
    margin-left: 3%;
}


.footer_box {
    border: 0px solid green; 
    float: left;
}


.footer-title-text { 
    margin-top: 18px;
    padding-top: 15px;
    padding-bottom: 16px;
    writing-mode: vertical-rl;
    -ms-writing-mode: bt-rl;
    transform: rotate(180deg); 
    font-weight: bold;
    border-bottom: 4px solid #c1b282;
    color: #c1b282;
    --color: white;
    color: #ddd2c2;
    letter-spacing: 0.2em;
    float: left;
    --width: 25%;
    width: 30px;
      }

.footer-text {
    margin-top: 10px;
    margin-left: 0px;
    padding-left: 50px;
    padding-right: 30px;
    color: #ddd2c2;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    line-height: 2.5em;
    --border: 1px solid red;
}


.footer_backtopbox {
    text-align: center;
    color: #c1b282;
    margin-top: 10px;
    padding: 10px;
    
}


/* End Customization */

    
      
/* CUSTOMIZATION - Changed gray to white and added real gray */
  .bg-white {
      background-color: #fff;
  }
       
  .bg-grey {
      --background-color: #c9c9c9;
      background-color: #f6f6f6;
  }
      
      
/* End Customization */
      
  .logo-small {
      color: #f4511e;
      font-size: 50px;
  }
  .logo {
      color: #f4511e;
      font-size: 200px;
  }
  .thumbnail {
      padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
  }
  .thumbnail img {
      width: 100%;
      height: 100%;
      margin-bottom: 10px;
  }
  .carousel-control.right, .carousel-control.left {
      background-image: none;
      --color: #f4511e;
      color: transparent;
  }
  .carousel-indicators li {
      border-color: #c1b282;
  }
  .carousel-indicators li.active {
      background-color: #c1b282;
  }
  .item h4 {
      font-size: 19px;
      line-height: 1.375em;
      font-weight: 400;
      font-style: italic;
      margin: 70px 0;
  }
  .item span {
      font-style: normal;
  }
  .panel {
      border: 1px solid #c1b282; 
      border-radius:0 !important;
      transition: box-shadow 0.5s;
  }
  .panel:hover {
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
  }
  .panel-footer .btn:hover {
      border: 1px solid #c1b282;
      background-color: #fff !important;
      color: #c1b282;
  }
  .panel-heading {
      color: #fff !important;
      background-color: #c1b282 !important;
      padding: 25px;
      border-bottom: 1px solid transparent;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
  }
  .panel-footer {
      background-color: white !important;
  }
  .panel-footer h3 {
      font-size: 32px;
  }
  .panel-footer h4 {
      color: #aaa;
      font-size: 14px;
  }
  .panel-footer .btn {
      margin: 15px 0;
      background-color: #c1b282;
      color: #fff;
  }
      
      
/* CUSTOMIZATION - Container */  
.container {
    padding: 0px;
   padding-left: 15px;
    padding-right: 9%;
    margin: 0px;
    width: 100%;
    
    border: 0px solid red;
      }

/* End Customization */



/* CUSTOMIZATION - Footer Background */  
footer {
    background-color: #383838;
    font-size: 16px;
      }

/* End Customization */



/* Navbar work */

.navbar {
    min-height: 70px;
    height: 70px;
    display: block;
    background-color: #383838;
    --border: 5px solid red;
    margin-bottom: 0px;
    z-index: 9999;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    border: 0px;
    border-image-width: 0px;
    --border-bottom: 1px solid #383838;
}

.navbar .container-fluid {
    height: 70px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
    margin-left: 14px;
    margin-right: 4%;
    padding-top: 0px;
}
      


.navbar-left img {
    padding-top: 22px;
    width: 214px;
}  /* note:  set breakpoints so that this will look good */


/* Vertically align all navbar text */
.navbar-nav li a {
 line-height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-toggle {
    margin: 0px;
}

/* Style of the collapsing menu */

.navbar-collapse {
    border: 0px;
    background-color: #383838;
}

/* No reason to have negative margins on the logo and nav button */
    .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: 0px;
    margin-left: 0px; 
}



      
  .navbar li a, .navbar .navbar-brand {
      --color: #818181 !important;
      color: white !important;
      font-family: "Montserrat";
    font-weight: 600;
      
      font-size: 13px;
      letter-spacing: 0.1em;
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
      --color: #fff !important;
      --background-color: #c1b282 !important;
      color: #c1b282 !important;
      --color: white !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
      --color: #fff !important;
  }


    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        --color: #555;
        background-color: transparent;
        color: white;
    }


/* Dropdown Hover for Menu */

    .dropdown-menu>li>a {
        display: block;
        padding: 3px 20px;
        clear: both;
        --font-weight: 400;
        line-height: 1.42857143;
        color: #818181;
        white-space: nowrap;
        color: #818181 !important;
        color: white !important;
        font-family: "Montserrat";
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.1em;
    }

    
    li.dropdown:hover > .dropdown-menu {
        display: block;
        background-color: #383838;
        border: 0px;
        left: 0;
    }

     .navbar-nav li.active a.dropdown-item {
        --color: #818181 !important;
         color: white !important;
         --color: white !important;
      background-color: #383838 !important; 
      }
      
      .navbar-nav li a.dropdown-item:hover{
          color: #c1b282 !important;
          --color: white !important;
          background-color: #383838 !important; 
      }
  
      
      


/* CUSTOMIZATION END */
      
      
/* CUSTOMIZATION - Gold Glyphicon */
      
    .glyphicon {
        color: #c1b282;
      }
/* END CUSTOMIZATION */
      
      
/* CUSTOMIZATION - Danger Button */
    .btn-getquote{
        color:#383838;
        font-weight: bold;
        background-color:#c1b282;
        border-color:#c1b282;
          margin-bottom: 40px;
        --float: right;
    }

    .btn-getquote:hover {
        background-color: #ddd2c2;
    }


          


/* END CUSTOMIZATION */
      
/* CUSTOMIZATION - Input Group */
      
    .input-group {
        width: 40%;
        margin: auto;
      }
/* END CUSTOMIZATION */
      




#tileadcontainer.container-fluid {
    --background-color: #c1b282;  
   -- background-color: white;
    --background-color: gray;
    --margin-top: 20px;
    padding-bottom: 50px;
    padding-top: 50px
    --border: 5px solid red;
}


.tilead .glyphicon {
     font-size: 25px;
    color: #383838;
    --color: #c1b282;  
    
}


.tilead P {
    color: #383838;
}

#certifiedcontainer.container-fluid {
    margin-top: 20px;
}


.certifiedcontainer .glyphicon {
     font-size: 50px;
    color: #383838;
}

.certifiedcontainer P {
    color: #383838;
}

.certifiedcontainer img {
    --width: 100%;
    height: 65px;
   -- border: 1px solid black;
    padding: 15px;
    --margin: 10px;
}


    
  footer .glyphicon {
      font-size: 20px;
      margin-bottom: 20px;
      color: #c1b282;
   
  }
  .slideanim {visibility:hidden;}
  .slide {
      --animation-name: slide;
      ---webkit-animation-name: slide;
      --animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }


/* CUSTOMIZATION - Input Group */
      
.input-group {
    width: 90%;
    margin: auto;
      }
/* END CUSTOMIZATION */
      



/* SCREEN SIZING WORK - THE 20% OF SCREENS - EDGE CASE SCREEN SIZES */

@media screen and (min-width: 1680px) {
    
    /* Extend the page only up to 1400px */
    /* idea - find out how to do it  like the apple web site */
    body {
        max-width: 1680px;
        margin: auto;
    }
    
    
    .navbar {
        max-width: 1680px;
        margin: auto;
    }
    
    #thanks {
        margin-bottom: 10%;
    }
    
    
}


@media screen and (min-width: 1600px) {
    .col-sm-10.test {
        padding-right: 22%;
        --border: 1px solid red;
        
    }
    
.whyus {
        min-height: auto;
    }
}


@media screen and (min-width: 1440px) and (max-width: 1599px) {
    .col-sm-10.test {
        padding-right: 16%;
        --border: 1px solid red;
    }
    
    
    
}



@media screen and (max-width: 1200px) {
/* CUSTOMIZATION - Input Group */
    
    .container {
        padding: 0px;
        margin: auto;
          }

    .input-group {
        width: 40%;
        margin: auto;
          }


    .container-fluid {
        padding-left: 10%;
        padding-right: 10%;
    }
  
    
/* END CUSTOMIZATION */
}   


@media screen and (min-width: 1280px) {
    .cde_slogan {
        display: block;
    }
}


@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    /* Fix 768 to 1023 - mostly mobile, but keep navbar, hero, and carousel the same.  
        Took out all things related to the navbar, hero and carousel */

    #services.container-fluid {
        padding-top: 70px;
        margin-top: -70px;
    }


        .col-sm-4 {
          text-align: center;
          margin: 5px 0; /* used to be 25 */
        }
        .btn-lg {
            width: 100%;
            margin-bottom: 35px;
        }



        .container-fluid {
            padding-left: 10%;
            padding-right: 10%;
        }

        #about.container-fluid {
            padding-bottom: 6%;
            --border-bottom: 2px solid red;
            display: block;
        }






    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 0px;
        padding-left: 0px;
    }
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 0px;
        padding-left: 0px;
        border-radius: 0px;
    }


/* Hero and Carousel Work */
    
    
       
/* Hero work  - 768 - 1023 */
    
      .jumbotron {
      padding: 0px;
      margin-top: 70px;
      border: 0px;
      padding-bottom: 0px;
      background-color: #383838;
      color: #fff;
      margin-bottom: 20px;
      
  }




/* Carousel - 768 to 1023 */
    
    
    .carousel-caption h1 {
        font-size: 220%;
    }
    
    p.lead {
        font-size: 18px;
    }

.carousel {
    --height: 400px;
    max-height: 600px;
    max-width: 100%;
    overflow: hidden;
    margin-top: 0px;
}
    

.carousel-inner > .item > img {
    margin: 0 auto;
    border: 0px;
    overflow: hidden;
    height: 200px;
}
    
    .caro-img > img {
        height: 450px;
    }

    .caro-img {
        width: auto;

    }
    


.carousel-caption {
    --border: 1px solid red;
    position: absolute;
    right: 10%;
    top: 20%;
    left: 10%;
    z-index: 10;
    
    
    
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    vertical-align: middle;
    bottom: inherit;

}

    
/* Hero work done 768 to 1023 */
    
/* End Hero and Carousel Work */


    /* Services Work  - 768px */

        #services .row.border-left {
        border-left: 15px solid #c1b282;

        }


        #certifiedcontainer h2 {
            margin-left: 0px;
            margin-right: 0px;
        }


    /* Work Section - 768px */
        #work .row.border-right {
        border-right: 15px solid #c1b282;
        --margin-left: 0px;
        }


    .mat_box img {
        height: 200px;
        width: 200px;
    }
    



        /* contact section 768 */

    #contact.container-fluid {
            --padding-top: 70px;
           --margin-top: -70px;

        }


        #contact .col-sm-7 {
            padding-top: 20px;
            padding-bottom: 40px;
        }



        /* footer section 768 */
        .footer-header-border {
            border-left: 0px;
        }

        .col-sm-1.test:first-child {
        width: 12%;
        background-color: #383838;
            display: none;
    }


        .col-sm-10.test {
            padding-right: 15px;
            width: 100%;
            --border: 2px solid red;
        }


        .try1, .try1:first-child {
            --border: 2px solid blue;
            padding-right: 20%;
            margin-left:  15px;
            --width: 100%;
        }



        .footer-text {
            margin-top: 18px;
            line-height: 2.2em;
        }

        .try2 {
            float: none;
        }

        .footer_backtopbox {
            margin-top: 50px;
            margin-bottom: 20px;
        }


      .footer-text-lt {
        margin-top: 1%;
        letter-spacing: 0.1em;
        font-size: 12px;
        --color: #c1b282;
        color: white;
        --color: black;
        padding-bottom: 2px;
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        font-weight: bold;
        border: 1px solid white;
    }

    .mobile_copyright {
        --border: 1px solid red;
        display: block;
        color: #818181;
        FONT-WEIGHT: BOLD;
        text-align: center;
        font-size: 0.7em;
        padding-bottom: 10px;
    }
    
    
        .whyus {
        width: 100%;
        height: auto;
            min-height: auto;
    }

    

      } /* end max width 768 to 1023 */
    




@media screen and (max-width: 767px) {
    
    
    
 /* Screen hack */   
    html {
        position: fixed;
        overflow: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }  



    body {
        font-family: "Open Sans";
        font-weight: 400;
        font-size: 1.6em;
        line-height: 1.8;
        color: #818181;
        color: #383838;
        margin: 0px;

        height: 100%;
        width: 100%;
        margin: 0;
        overflow: auto;

      }
    
  .navbar-nav li a:hover, .navbar-nav li.active a {
      color: #fff !important;
  }
    
    
    #services.container-fluid {
        padding-top: 0px;
        margin-top: 0px;
    }

    
    .col-sm-4 {
      text-align: center;
      margin: 10px 0; /* used to be 25 */
    }
    
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }
    
    
    
    .container-fluid {
        padding-left: 10%;
        padding-right: 10%;
    }
    
    #about.container-fluid {
        padding-bottom: 6%;
        --padding-bottom: 500px;
        --border-bottom: 2px solid red;
        display: block;
    }
    
    
    .navbar-left img {
        width: 214px;
        padding-top: 4px;
    }
    


  
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 0px;
        padding-left: 0px;
    }
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 0px;
        padding-left: 0px;
        border-radius: 0px;
    }

    
/* NAVBAR WORK - 768PX */
    /* center the toggle button */
    .navbar .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
        margin: 0px;
        padding-top: 18px;
        
    }
    
    .navbar-header {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    
    .navbar-collapse {
        box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
        padding-right: 15px;
        padding-left: 15px;
        border: 0;
        background-color: #383838;
    }
    


    
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #c1b282;
        background-color: transparent;
}

    .navbar-nav li a {
        width: 100%;
        --border: 1px solid red;
    }
    
    
    .navbar-collapse collapse in {
        --width: 100%;
    
    }
 
    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    --min-height: 100%;
}
    
 /* Change color of icon hamburger bar */   
  .navbar-default .navbar-toggle .icon-bar {
    background-color: white;
      border: 1px;
}
    
/* Show the full menu on mobile */
    
    .dropdown-menu {
        display: block;
        position: relative;
        background-color: #383838;
        -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0);
        box-shadow: 0 0px 0px rgba(0,0,0,.0);
        border: 0px solid red;
        width: 100%;
        padding-left: 10%;
    }
    
    .navbar-nav li a {
        line-height: 40px;
    }

    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 1200px;
    }
    
/* END NAVBAR WORK - 768 */
    
    
/* Hero work  768 */
    
      .jumbotron {
      padding: 0px;
      --padding-top: 50px;
      margin-top: 70px;
      border: 0px;
      --border-top: 1px solid red;
     --padding-top: 0px;
      --margin-top: 0%;
      padding-bottom: 0px;
      background-color: #383838;
      --background-image: URL(../images/banner/banner_2.jpg);
      color: #fff;
      --padding: 100px 25px;
      --height: 200px;
      margin-bottom: 20px;
      
  }




/* Carousel */
    
    .carousel-caption h1 {
        font-size: 160%;
    }
    
    p.lead {
        font-size: 16px;
    }

    .carousel {
        --height: 400px;
        max-height: 600px;
        max-width: 100%;
        overflow: hidden;
        margin-top: 0px;
    }


    .carousel-inner > .item > img {
        margin: 0 auto;
        border: 0px;
        overflow: hidden;
        height: 200px;
    }

    .caro-img > img {
        height: 350px;
    }

    .caro-img {
        --position: relative;
        --height: 400px;
        width: auto;

    }
    

    .carousel-caption {
        border: 0px solid red;
        position: absolute;
        right: 10%;
        top: 2%;
        left: 10%;
        z-index: 10;



        padding-top: 10px;
        padding-bottom: 10px;
        color: #fff;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0,0,0,.6);
        vertical-align: middle;
        bottom: inherit;

    }

    .carousel-indicators li {
        position: relative;
        width: 60px;
        height: 5px;
        margin-right: 3px;
        margin-left: 3px;
        text-indent: -999px;
        border-radius: 0px;
    }

    .carousel-indicators li.active {
        position: relative;
        margin-top: 1px;
        margin-bottom: 1px;
        width: 60px;
        height: 5px;
        margin-right: 3px;
        margin-left: 3px;
        text-indent: -999px;
        background-color: rgba(255,255,255,.5);
    }
    
    
    /* Hero work done 768 */

    /* Services Work  - 768px */
    
    #services .row.border-left {
    border-left: 0px solid #c1b282;
        
    }
    
    #services .row.border-left .col-sm-1 {
    display: none;
        
    }
    
    .serv_box {
        margin-bottom: 20px;
        overflow: hidden;
    }
    
    
    .serv_box img {
        width: 100%;
    }
    
    

    
    #services h2, #work h2 {
    --display: none;
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
        margin-top: 0px;
        margin-left: 5%;
        margin-right: 5%;
  
    }
    
    #certifiedcontainer h2 {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    
    .mobtitle h2 {
    display: block;
    --border: 1px solid black;
    --padding-top: 20px; /* add this back if it causes trouble for mobile */
    }
    
    
    
    
    /* Work Section - 768px */
    #work .row.border-right {
    border-right: 0px solid #c1b282;
    margin-left: 0px;
    }
    
    #work .row.border-right .col-sm-1 {
        border: 1px solid black;
        display: none;
    }
    
    #work .row.border-right .col-sm-11 {
        padding-right: 0px;
        padding-left: 0px;
    }
    
    .work_box_msg {
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .work_box_msg h4 {
        font-size: 1em;
    }
    
    /* Show insta descriptions on mobile at all times */
    A .lw-backdrop {
    opacity: 1;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    }
    
    .lw-description {
        padding-left: 5px;
        padding-right: 5px;
    }

    
    
    

    /* contact section 768 */
    
    #contact.container-fluid {
        padding-top: 70px;
        margin-top: -70px;
        
    }
    
    
    #contact .col-sm-7 {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    
    
    
    
    
    /* footer section 768 */
    .footer-header-border {
        border-left: 0px;
    }
    
    .col-sm-1.test:first-child {
    width: 12%;
    background-color: #383838;
        display: none;
    }
    
    
    .col-sm-10.test {
        padding-right: 15px;
        width: 100%;
        --border: 2px solid red;
    }
    
    
    .try1, .try1:first-child {
        --border: 2px solid blue;
        padding-right: 20%;
        margin-left:  15px;
        --width: 100%;
    }
    

    
    .footer-text {
        margin-top: 18px;
        line-height: 2.2em;
    }
    
    .try2 {
        float: none;
        display: block;
        --border: 1px solid red;
    }
    
    
    .footer_box {
      width: 100%;
        --border: 1px solid green;
    }
    
    .footer_backtopbox {
        
        --min-width: 200px;
        --border: 1px solid white;
        padding-top: 50px;
        margin-bottom: 20px;
        width: 50%;
        margin: 0 auto;
    }
    
    
  .footer-text-lt {
    margin-top: 1%;
    letter-spacing: 0.1em;
    font-size: 12px;
    --color: #c1b282;
    color: white;
    --color: black;
    padding-bottom: 2px;
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
    font-weight: bold;
    border: 1px solid white;
}
    
    .mobile_copyright {
        --border: 1px solid red;
        display: block;
        color: #818181;
        FONT-WEIGHT: BOLD;
        text-align: center;
        font-size: 0.7em;
        padding-bottom: 10px;
    }
    
    .whyus {
        width: 100%;
        height: auto;
        min-height: auto;
    }
    
    
        /* Instafeed Code for Mobile */
    /*
    #instafeed_napi {
        margin: 2%;
    }
    
    .instagram_gallery img {
    border: 10px solid grey;
        --findme       
}
    
    .instagallery_image_size {
    margin: 1%;
    width: 10%; 
    float: left;
}
    
  } /* end max width 768 */
    

/* Safari Sucks Sat morning code 
    
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:1)
{ @media {
    
    
    #instafeed_napi {
        margin: 2%;
    }
    
    .instagram_gallery img {
    border: 10px solid grey;
        width: 50px;
}
    
    .instagallery_image_size {
    margin: 1%;
    width: 10%; 
    float: right;
    padding-left: 100px;
}    
    
}}
    
    */
    
    
 /*
    #instafeed_napi {
        margin: 2%;
    }
    
    .instagram_gallery img {
    border: 10px solid grey;
        width: 50px;
}
    */
        

            
        img.instagallery_image_size {
        margin: 1%;
       --width: 10%!important; 
            width: 360px;
        --float: right;
        --padding-left: 100px;
        border: 2px solid red;
    }    

    .work_box_msg h4 {
        --color: #c1b282;
        --color: white;
        font-size: 1.4em;
        color: red;
    }

    
    
}
    

@media screen and (min-width: 1024px) and (max-width: 1275px) {
    /* Fix footer between 1024 and 1280 */
    

    .col-sm-10.test {
        padding-right: 0px;
        width: 80%;
        --border: 2px solid red;
    }
    
    .col-sm-1.test {
        padding: 0px;
        width: 2px;
    }
    
    .footer-header-border {
        margin-left: 15px;
        border-left-width: 20px;
    }
    
    .whyus {
        width: 31%;
        height: auto;
    }
    
}



@media screen and (min-width: 500px) and (max-width: 768px) {
    
    /* Fix the footer - 500 to 766 */
    
    .try1:first-child {
        --margin-left: 10%;
        padding-right: 2%;
        margin-right: 0%;
        --border: 1px solid red;
    }
    
    .try1 {
        padding-right: 2%;
        margin-right: 10%;
        --border: 1px solid red;
        --margin-left: 10%;
    }
    
    
    
}

@media screen and (min-width: 700px) and (max-width: 1024px) {
    /* Add overlay text on latest work section */
    
    /* Work Section - 700px to 1023px */

    #work .row.border-right .col-sm-11 {
        padding-right: 0px;
        padding-left: 0px;
    }
    
    .work_box_msg {
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .work_box_msg h4 {
        font-size: 1em;
    }
    
    /* Show insta descriptions on mobile at all times */
    A .lw-backdrop {
    opacity: 0.8;
    width: 70%;
    height: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
    
    .lw-description {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* End add overlay on latest work section - 700 to 1023 */
    
}




@media screen and (min-width: 700px) and (max-width: 1023px) {
        
        /* Fix the footer - nested media query -  700 to 766 */
    
        .try1:first-child {
            --margin-left: 5%;
            padding-right: 2%;
            margin-right: 2%;
            --border: 1px solid red;
        }

        .try1 {
            padding-right: 2%;
            margin-right: 2%;
            --border: 1px solid red;
            --margin-left: 5%;
        }


    }

@media screen and (min-width: 500px) and (max-width: 1680px) {
    #thanks {
    text-align: center;
    margin-top: 10%;
    --border: 1px solid red;
    }



    .fixed-bottom {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
        bottom: 0;
        margin-bottom: 0;
    }    
}


@media screen and (min-width: 450px) and (max-width: 767px) {
    
    /* Fix the carousel */
    .carousel-caption {
        position: absolute;
        top: 12%;
    }
    
    
   /*  Fix the Services pics - make them center and 80% of the screen */
    
    .col-sm-3 {
        padding-left: inherit;
        padding-right: inherit;
    }
    
    .serv_box {
        height: inherit;
        width: 80%;
        margin: auto;
        margin-bottom: 20px;
    }
    
    .serv_box img {
        height: inherit;
    }
    
    #services h2 {
        margin-left: 10%;
    }
    

    
    
    /* Fix certified by - they shouldn't be just in one line? */
    
}


@media screen and (min-width: 301px) and (max-width: 1023px) { 
    
    .mini-jumbotron {
        padding-left: 10%;
        padding-right: 10%;
    }
}


@media screen and (min-width: 301px) and (max-width: 767px) { 
    
    #bx-pager a:hover img, #bx-pager a.active img {
    border-top: solid #c1b282 0.2em;
}
    
    .svc_more {
    padding-top: 15px;
    --border: 1px solid red;
   text-align: center;
    padding-right: 0px;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 1em;
}

}
 


@media screen and (max-width: 325px) {
    .carousel-caption {
        position: absolute;
        top: 0%;
        left: 5%;
        right: 5%;
    }
}

@media screen and (max-width: 300px) {
body {
      font-size: 1.6em;
    background-color: #383838;
  }
    
    .navbar, #hero {
        display: none;
    }
    
    #about.container-fluid, #services.container-fluid, #work.container-fluid, #certifiedcontainer.container-fluid, #contact.container-fluid, .container-fluid {
        display: none;
    }
    
    #screentoosmall.container-fluid {
        display: block;
        color: white;
    }
    
    #screentoosmall.container-fluid h1 {
            color: white;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
    }
    
    .mini-jumbotron {
        display: none;
    }
    
    
}

@media screen and (min-width: 300px) {
    
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 0px;
        padding-left: 0px;
    }
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 0px;
        padding-left: 0px;
        border-radius: 0px;
    }

    
}