body {
  font-family: Arial, Helvetica, sans-serif;
}
/* ============================================= */
/*              HEADER    
This is for the small screen as that is the default*/          
/* ============================================= */
.contact {font-size:16px !important; margin-top:-2px  }
.t4-header {height: 85px !important;} /* nav bar height*/
/* ============================================= */
/*              PARALLAX SCROLLER                */
/* ============================================= */
.bgimg-1, .bgimg-2, .bgimg-3 {
  position: absolute;
  opacity: 1.00; /* You can adjust opacity */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;} /* this can also be 'auto' or 'contain' depending on how you want to fit the picture */
/* Specify the background image/s for the parralax scrollers */
.bgimg-1 {background-image: linear-gradient(#00000033, #000000), url("../../../../images/parallax1.jpg"); min-height:350px;}   /* add overlay to lighten or darken image */
.opacity-dark {opacity: 5 !important;}/* used to make text as dark as possible */

/* ============================================= */
/*              NAVS              */
/* ============================================= */
/* Problem with hamburger not sitting on righT */
.header-wrap .navbar-brand {position: relative !important;}
.navbar-toggler { float: right !important;}
.t4-megamenu-mainmenu {float: right !important; }
.t4-navbar .navbar {float: right !important; }
/*.t4-section-inner.container-fluid .header-block {padding: 1rem 0 !important;}*/


/* ============================================= */
/*              PAGE               */
/* ============================================= */
.blog .blog-items .blog-item, .blog-featured .blog-items .blog-item {
    margin-bottom: 0 !important;} /* disable white space before footer */
.t4-main-body {padding-bottom:0 !important}
.mobile {display: block} /* To display something on mobile phones only */
.break-out{
  width:100.0vw;
  position: relative;
  left: calc(-1 * (100vw - 100%) / 2);
  overflow:hidden !important;
}
.break-out-darkbk {padding-left:0px !important; padding-right:0px!important;}
hr {border-top: 1px solid #EC5F0E!important; margin-top: .2rem!important; margin-bottom: 1rem!important }
.page-header h2 {color: #6c757d!important; font-size:50px !important; font-weight:bold !important}/*used for page header*/}
h1 {color: #EC5F0E !important;}
h2 {color: #EC5F0E;} 
h3 {color: #EC5F0E;}
h4 {color: #EC5F0E;}
h5 {color: #EC5F0E; font-size:1.20rem !important}

a {color: #000000;}
.bk_dark_gradient1 { background-image: linear-gradient(to right,  #101214, #27292b, #575859);
color: #eeeeee !important;
}
.bk_dark_gradient2 { background-image: linear-gradient(to right,  #2f3030, #27292b,#101214 );
color: #eeeeee !important;
}
.parralax-dark {color: #eeeeee !important}
.parralax-dark a {color: #eeeeee !important}

.bullet {max-width:50px; max-height:50px; padding-right:10px; float:left;}
.bullet-txt {font-size: 0.9rem !important;}
/* ============================================= */
/*           EQUAL RESPONSIVE COLUMNS            */
/* ============================================= */
 
@media screen and (min-width: 576px){
       
  .equalflow {display} 
  
  .paraflow {column-count: 2; margin-top:20px; margin-bottom:20px; column-gap:2rem} 
  .paraflow :first-child{margin-top:0 !important;}
  .paraflow :last-child{margin-bottom:0 !important;}

}


/* ============================================= */
/*          FLEXIBLE BACKGROUND IMAGES           */
/*     Images stretch and shrink in a column     */
/* ============================================= */

/* This is the class to add to the row*/
.row.display-flex {display: flex;}

/* This is the class that must be used on the column using the background image */
.fitpic { background-size: cover !important; width: 100%; height: 100%; background-position: center center; }

/* Add this code to @Media statements  */
@media (max-width: 767px){ 
  .phone-height {height: 300px !important; max-height: 300px !important; margin-bottom:15px; margin-left: 0px; margin-right: 0px }
}


/* Change ORDER OF COLUMNS in small screens */
@media (max-width: 767px) {
  .first {flex: 1 100%;}
  .last {flex: 1 100% ;}
  .row {display: flex; flex-wrap: wrap;}
  .row > .first {order: 1;}
  .row > .last {order: 2;}
}


/* ============================================= */
/*          FOOTER           */
/* ============================================= */
.t4-footer .container {padding-bottom:0 !important;  padding-top: 0 !important;}
.t4-footer a {color:#ffffff !important}
.footer {font-size: 0.9rem !important;}
.footertable {border-collapse: collapse; width: 100%; margin-bottom: 0px; }
/* =======FOOTER on 2nd level======= */
.t4-main-body, .t4-content{padding:0px !important; margin-top:-10px!important}  /*stops footer from showing through above page heading and down the right side} */
.t4-main-body {margin-bottom:410px ;}/* Did not work on Apple, now it does*/

.t4-footer  
{height: 420px; /*  different heights for larger screens*/
  position: fixed;
  z-index: -1;
  bottom: 0;
  /*background-image: linear-gradient(to right, #1e252b, #28313A, #535C63);*/
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  color: #eeeeee !important;
}


* == SCREEN SIZE ADJUSTMENTS == */

/* == Phone Portrait (Extra Small) 
NB some media queries will not work: No media query for `xs` since this is the default in Bootstrap*/
@media (max-width: 575px) { 
  h1 {font-size:20px!important}
}

/* == Phone Landscape (Small) == */
@media (min-width: 576px) and (max-width: 767px) { 
.navbar-brand.logo-control img.logo-img {max-width:220px !important;max-height:60px!important; margin-top:-5px!important}
.t4-header {height: 70px !important;} /* nav bar height*/
.contact {font-size:18px !important; margin-top:5px}
.t4-main-body {padding-top: 0; padding-bottom: 0;} /* Remove white space between Testimonials & Footer */
.navbar-brand{ margin-right:.06rem!important; margin-top:-5px!important}
 .t4-footer {height: 420px !important;}
 .t4-main-body {margin-bottom:420px !important;}
}

/* == Tablet Portrait (Medium) == */
@media (min-width:768px) and (max-width: 991px) {
.navbar-brand.logo-control img.logo-img {max-width:200px !important;max-height:76px!important; margin-top:-10px!important}
.t4-header {height: 85px !important;} /* nav bar height*/
.contact {font-size:20px !important;  margin-top:10px}
 .t4-footer {height: 530px !important;}
 .t4-main-body {margin-bottom:530px !important;}
}

/* == Tablet Landscape (Large) == */
@media (min-width:992px) and (max-width: 1199px) {
.navbar-brand.logo-control img.logo-img {max-width:225px !important;max-height:85px!important; margin-top:-15px !important}
.t4-header {height: 85px !important;} /* nav bar height*/
.contact {font-size:25px !important; margin-top:7px}
.t4-footer {height: 460px!important;}
.t4-main-body {margin-bottom:460px !important;}
}

/* == Tablet Landscape (Extra Large) == */
@media (min-width:1200px) {
.navbar-brand.logo-control img.logo-img {max-width:225px !important;max-height:85px!important; margin-top:-15px !important}
.t4-header {height: 85px !important;} /* nav bar height*/
.contact {font-size:25px !important;  margin-top:0px} 
 .t4-footer {height: 410x!important}
 .t4-main-body {margin-bottom:410px !important;}

}

/* =======Print ======= */
@media print {
  #t4-header {margin-top:10px !important; margin-bottom:10px!important}
  #t4-slideshow, .n2-section-smartslider {display:none !important}
    .container-fluid { 
      width: 100% !important;
      height: 100% !important; 
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;}
  
 .break-out{ max-width: 200vw !important; position: relative;  left: 0px !important; }  
  .col-md-12 {width: 100% !important;}
	.col-md-11 {width: 91.66666666666666% !important;}
	.col-md-10 { width: 83.33333333333334% !important;}
	.col-md-9 {width: 75%;}
	.col-md-8 {width: 66.66666666666666% !important;}
	.col-md-7 {width: 58.333333333333336% !important;}
	.col-md-6 {width: 50%;}
	.col-md-5 {width: 41.66666666666667% !important;}
	.col-md-4 {width: 33.33333333333333% !important;}
	.col-md-3 {width: 25% !important;}
	.col-md-2 {width: 16.666666666666664% !important;}
	.col-md-1 {width: 8.333333333333332% !important;}

 body {font-size: 15px; font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;}
  a[href]:after {content: none !important;}/*stops all links showing as URLs - Bootstrap*/
  .noprint {display:none}
  .parralax-dark {color:#000000 !important}
  
 /*Force Left-Right background images to print: but not background to footer */ 
  * {-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/}
  .t4-footer {background: #FFFFFF !important; color:#000000 !important; }
  .t4-footer a {color:#000000}
 
}