/***************
* GENERAL STYLES
***************/
.bold{font-weight: bold }
.italic{font-style: italic }
.deliveryheading{text-decoration: underline; color: #f1aa21 !important; margin-bottom: 20px !important}
.centreitem{margin: 0 auto !important}
.cover{padding: 1px; background: url(../images/transparent-background.png) no-repeat}
.underline{text-decoration: underline !important; }
/*a.img-responsive .img-center{margin: 0 auto !important}*/
.image-link img{margin: 0 auto  !important}
.scale-down {margin:0 auto; object-fit: scale-down;}

/********************
* MARGINS AND PADDING
*********************/
.m_b_0{margin-bottom: 0 !important; padding-bottom: 0 !important}
.m_30{margin: 30px !important}
.m_r_30{margin-right: 30px !important}
.m_l_50{margin-left: 50px !important}
.m_lr_30{margin-left: 30px !important; margin-right: 30px !important}
.padding30{padding: 30px !important}
.padding5_10{padding: 5px 10px !important}
.paddingBottom30{padding-bottom: 30px !important;}
.paddingTopBottom30{padding-top: 30px !important; padding-bottom: 30px !important;}


/**********
* HEIGHTS AND WIDTHS
***********/
.maxh_300{max-height: 300px !important}
.maxh_200{max-height: 200px !important}
.maxh_250{max-height: 250px !important}
.h_250{height: 250px !important}
.h_100{height: 100px !important}
.w100{width: 100% !important}
.w80_ml_10{width: 80% !important; margin-left: 10% !important}

/*************
* TABLES
*************/
/* .table-striped>tbody>tr:nth-child(odd)>td {
   background-color: #dfdfdf;
 }
 .table-striped>tbody>tr:nth-child(even)>td {
   background-color: #c4c4c4;
 } 
.table-striped th{
   background-color: #fff;
 }
td, th{text-align: center !important}
.table-striped{border: solid 1px #b67a0c !important} */

/***************
* SLIDER
***************/
.slidertext{color: #fff !important; font-size: 3.5em !important; text-shadow: -2px -2px 2px rgba(64, 64, 64, 0.9) !important;}


/*****************
* YOUTUBE VIDEO EMBED
*******************/
.vid{position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden}
.vid iframe, .vid object, .vid embed{position: absolute; top: 0; left: 0; width: 100%; height: 100%}

/*****************
* FEATURES LIST
******************/
.features-list-icon{background-color: transparent !important}
                              
/*****************
* BACKGROUNDS
*****************/
.backgroundpvcpanels{background-image: url('../images/pvc-panels.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundcontact{background-image: url('../images/timber.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgrounddecking{background-image: url('../images/decking/decking.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgrounddoors{background-image: url('../images/doors/doors-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundpatiodoors{background-image: url('../images/doors/patio-doors-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundlouvredoors{background-image: url('../images/doors/louvre-doors-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundfencing{background-image: url('../images/fencing/fencing-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundflooring{background-image: url('../images/flooring-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundmouldings{background-image: url('../images/mouldings-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundwinter{background-image: url('../images/winter-snow.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundstairparts{background-image: url('../images/stairparts-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundwallpanels{background-image: url('../images/wall-panel-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.backgroundshowroom{background-image: url('../images/showroom-background.jpg') !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0%}
.blackbackgroundopaque{background-color: rgba(0,0,0,0.4)}
.backgroundtransparent{background-color: transparent !important}                           
.pinkbackground{background: #eddedb !important}
.redbackground{background: #5c0000 !important}
.dkredbackground{background: #480000 !important}
.greybackground{background-color: #dfdfdf !important}
.yellowbackground{background-color: #f1aa21 !important}
.whitebackground{background-color: #fff !important}


/************
* FOOTER
************/
.dkredfooter{background: #480000 !important;  padding-top: 20px !important}
.dkredfooter a, .dkredfooter a:visited{text-decoration: underline; color: #fff !important}
.dkredfooter a:hover{text-decoration: underline; color: #f1aa21 !important }

/************
* TEXT COLOURS
**************/
.products b{color: #5c0000}
.products a, .products a:visited{color: #5c0000 !important}
.products a:hover, .products a:hover b{text-decoration: underline; color: #f1aa21 !important}
.whitetext, .whitetext a, .whitetext a:visited{color: #fff !important}
.whitetext a:hover{text-decoration: underline; color: #5c0000 !important}
.redtext, .redtext a, .redtext a:visited{color: #5c0000 !important}
.card-title  { font-size: 1.5rem; margin: 0.1rem 0rem;}
.redtext a:hover{text-decoration: underline; color: #f1aa21 !important}
.yellowtext{color: #f1aa21 !important}
.creamtext{color: #fef8ed !important}

/***************
* NAVIGATION
***************/
/*nav ul li a:visited{background: #5c0000 !important}*/
nav ul li a, nav ul li a:visited{font-size: 1.2rem; margin: .4rem !important}
.navbar-nav > li > .dropdown-menu { background-color: #f1aa21; color: #5c0000!important ;}
/* nav ul li a:hover{border-bottom: solid 3px #fff; background-color: transparent !important}
nav ul li ul{background: #6e0002 !important}
nav ul li ul li a, nav ul li ul li a:visited{color: #fff}
nav ul li ul li a:hover{background: #f1aa21 !important; color: #fff !important}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{border-color: #fff !important} */
.navaddress{font-size: 1.2rem !important; padding: 1rem 1.5rem !important; margin-bottom: 0!important;}
/* .menustyle{position: relative !important; z-index: 40000 !important} */
/*nav ul li a:hover, nav ul li a:visited{color: #fff !important}
li.menu-item a:hover, li.dropdown a:hover{color: #e7e7e7 !important}*/
.navbarLogo {width:100% ; height:auto}


/***** SEARCH BTN ********/
.quick-search-form .form-control {
height: 35px;
padding: 8px 15px;
color: #5c0f05;   /* change  color of text to be typed inside search box */
font-size: 13px;
line-height: 20px;
background-color: transparent;
border: 1px solid black;
border-radius: 0!important;
-webkit-box-shadow: none;
box-shadow: none;
}

.btn-custom {
color: #fbf9f9;            
background-color: #5c0f05;   /* change  button color */
border-radius: 0!important;    /* button border radius */
padding: 6px 10px;              /* Button size change*/

}

.btn-custom:hover{
background-color: #410b03; /* change  button color on hover */
border-radius: 0!important;

}

.btn-search {
color: #fbf9f9;            
background-color: #821304;   /* change  button color */ 
border-radius: 10!important;  
}
   
.btn-search:hover{
background-color: #6a1204; /* change  button color on hover */  
border-radius: 10!important;
}

.btn-outline-secondary{
   color: #fbf9f9!important;            
background-color: #821304!important; 
border-radius: 10!important;
}


/**************
* BORDERS
**************/
.yellowbord{border: solid #f1aa21 !important}
.yellowbord2{border: solid #5c0000 !important}
.thinwhitebord{border: solid 1px #fff !important} 
.thinredbord{border: solid 1px #5c0000 !important} 
.redbord{border: solid #5c0000 !important}

.box-inner img{border-radius: 0 !important}

/*************
* BUTTONS
*************/
.btn-contact{font-size: 28px !important; font-weight: bold !important; color: #df951c !important}
.btn-white{background: #fff !important; color: #5c0000 !important; border-radius: 5px}
 .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open > .dropdown-toggle.btn-white{
    background: #ebebeb !important; color: #5c0000 !important}
.btn-red{background-color: #5c0000 !important; color: #fff !important; border-radius:5px; margin:2px 2px;}
 .btn-red:hover, .btn-red:focus, .btn-white:active, .btn-white.active, .open > .dropdown-toggle.btn-white{
    background-color: #8e0000 !important; color: #fff !important}

/***************
*  PRODUCT DISPLAY
*****************/
.flex, .flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
}

.panel {
   text-align: center;  
    margin: 0 auto;
   display: flex;
   flex-direction:column;
   align-content:stretch; 
}

.panel-body {
   display: flex;
   flex-grow:1;
}
.panel-grey, .panel-grey .panel-heading{background-color: #ebebeb !important}
.panel-lightgrey{background-color: #acacac}
.panel-grey .panel-footer{background-color: #dedede}
.panel-white, .panel-white .panel-heading{background-color: #fff !important}
 .panel-white .panel-footer{background-color: #f5f5f5}
.panel-white .panel-footer .btn-white,  .panel-grey .panel-footer .btn-white{border: solid 1px #5c0000 !important}

.centering{float: none; margin: 0 auto;}

/***************
* CONTACT FORM
***************/
 .select-wrap select{background-color: #e3e3e3 !important;margin-right: 10px;} 
.form-control{background-color: #e3e3e3 !important; padding-left: 30px}
.form-group i, .fa-ul li i, .select-wrap select i{font-size: 1.2em !important; color: #5c0000 !important; }

.fa-twitter, .fa-facebook {
   transition: color 0.2s;
}

.fa-twitter:hover, .fa-facebook:hover {
   color: #9f0000;
}
.select-wrap select span{color: #5c0000 !important} 

/*************
* FAQ PAGE
*************/
.topics{margin-top: 50px; margin-bottom: 70px}
.topics ul li a{color: #4c4c4c; font-size: 1.3em !important; text-decoration: underline; }
.topics ul li a:hover{color: #7d003f}
.faq-answers{padding-top: 50px;  padding-bottom: 50px}
.faq-answers h2{margin-bottom: 20px; color: #fff;}
.faq-answers hr{margin: 50px 0; color: #fff}

/***************************
* Loading Animation Styling
****************************/

.hideLoader {
   visibility: hidden;
}

.loaderContainer {
   
   display: flex;
   /*flex-direction: row;*/
   justify-content: center;
   padding: 10px;
}

.loader {
   display: none;
   justify-content: center;
   border: 5px solid #e3e3e3;
   border-radius: 50%;
   border-top: 5px solid #5c0000;
   width: 60px;
   height: 60px;
   -webkit-animation: spin 2s linear infinite;
   /* Safari */
   animation: spin 2s linear infinite;
}

/* Safari */

@-webkit-keyframes spin {
   0% {
       -webkit-transform: rotate(0deg);
   }
   100% {
       -webkit-transform: rotate(360deg);
   }
}

@keyframes spin {
   0% {
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

/****************
* Stretched Link
*****************/
/* This is used with the product 'cards' to to stretch a link across the whole item*/
.stretched-link::after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   pointer-events: auto;
   content: "";
   background-color: rgba(0,0,0,0);
}

.centeredText {
   
      display: flex;
      align-items: center;
}

.subCatCard{
  
   transition: background-colour 0.5s ease-out ;
   -webkit-transition: background-color 500ms ease-out ;
   -moz-transition: background-color 500ms ease-out ;
   -o-transition: background-color 500ms ease-out ;
   background-color: #ffffff;
  }

.subCatCard:hover{
 background-color: #f1aa21;
}

.itemCard{
   
   box-shadow: 0;
   transition: box-shadow 0.5s;
   max-width: 300px; 
   margin: 10px auto; 
   border: 1px solid #5c0f05;
}

.itemCard:hover{
   /*border: solid 1px #636363 !important;*/
   box-shadow: 2px 2px;
}

.productCategoryTitle{
   color: #f5f5f5 !important;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   /* top: 50%;
   left: 50%; */
   /* transform: translate(0%, 70%); */
}
.itemCardImage{
   /* display: block; */
  /* max-width:100%; */
  max-height:240px;
  width: auto;
  height: 100%;
}
  
.vertical-center {
   justify-content: center;
   display: flex;
   align-items: center;
 }


/*************************************************************
/ Carousel Slider styling
*************************************************************/
.carousel-fade .carousel-inner .item {
   opacity: 0;
   -webkit-transition-property: opacity;
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
   transition-property: opacity;
 }
 .carousel-fade .carousel-inner .active {
   opacity: 1;
 }
 .carousel-fade .carousel-inner .active.left,
 .carousel-fade .carousel-inner .active.right {
   left: 0;
   opacity: 0;
   z-index: 1;
 }
 .carousel-fade .carousel-inner .next.left,
 .carousel-fade .carousel-inner .prev.right {
   opacity: 1;
 }
 .carousel-fade .carousel-control {
   z-index: 2;
 }

 .carousel-caption-text-center{
   font-size: 10.0rem !important;
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   
 }

 .carousel-caption-text-left{
   margin: 0;
   position: absolute;
   top: 50%;
   left: 30%;
   transform: translate(-60%, -50%);
 }

 .carousel-caption-text-right{
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(10%, -60%);
 }

 .carousel-caption h1, .carousel-caption h2{
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-size: 3.0rem !important;
 }

 /********************* Media Queries for Sizes ******************/
 @media (min-width: 1500px){

   .carousel-caption h1, .carousel-caption h2{
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
      margin-top: 1.5rem;
      margin-bottom:1.5rem;
      line-height: 4.0rem;
      font-size: 4.5rem !important;
    }
 
 }

 /* @media (max-width: 530px){
   .navbar-brand {width:60% ; min-width: 250px; height:auto}
 } */

@media (max-width: 990px){
   nav ul li a, nav ul li a:visited{font-size: 1.5rem; margin: .1rem !important}
   .navaddress{font-size: 1.1rem !important; padding: 0.8rem 1.0rem !important}
   .subCatCard .card-body { padding: 0.2rem !important}
}

 @media (max-width: 1000px){

   .carousel-caption h1, .carousel-caption h2{
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
      font-size: 2.0rem !important;
    }

 }

 /* @media (max-width: 1200px){
   nav ul li a, nav ul li a:visited{font-size: 1.0rem; margin: .1rem !important}
} */