/* ADDITIONAL CUSTOM CSS FOR SCREEN */
html {scroll-behavior: smooth;}
body {height:100%; margin: 0;}
/* ----------------------------------------------------------------------------- */
/* SPECIFIC TO THIS SITE */
nav {}
header {}
main {}
article {}
section {}
footer {}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
p {}
ol {}
ul {}
li {}
blockquote {}
img {}
table {}
tr {}
td {}
a:link, a:visited {}
a:focus, a:hover {}
/* ----------------------------------------------------------------------------- */
.text-white a {color:#ffffff} /* white links */
.text-white a:link, .text-white a:visited {color:#ffffff}
.text-white a:hover, .text-white a:focus {color:#ffffff88 !important} /* makes the link slightly transparent, so a little less white */
.bg-black {background-color: #000000 !important;}
.bg-black-semi {background-color: #00000099 !important;} /* semi-transparent black background */
.bg-charcoal {background-color:#212223}
.bg-white-semi {background-color: #ffffff75} /* semi-transparent white background */
.border-bottom-dark {border-bottom: 1px solid #444444;} /* you can change the color */
.border-bottom-light {border-bottom: 1px solid #44444422;} /* you can change the color or the opacity */
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);} /* change a coloured image to grayscale on-screen, but not in print */
.navtel {} /* format phone number in navsbar */
.pointer {cursor:pointer}
.square {list-style-type: square} /*square bullets */
.underline {text-decoration:underline}
/* ============================================== */
/* ADJUSTING HEIGHTS / VERTICAL SPACE */
/* ============================================== */
/* Put this on the first section below the sticky navs (e.g. header or slideshow). It doesn't work with parallax which always starts at screen top) */
.topgap {margin-top:55px} /* Adjust height according to the height of the Navbar */
/* Gives vertical space above Jump-To headings being hidden by sticky navs on anchors */
/* Adjust heights if necessary - this may depend on the margins and paddings on your Sections */
.jump {
display: block;
content: " ";
margin-top: -50px;
height: 50px;
visibility: hidden;
}
/* ============================================== */
/* RESPONSIVE ADJUSTMENTS - MOBILE STYLING */
/* ============================================== */
.break {display:none} /*only shows in small screens */
.bigscreen {} /*only shows in big screens */
.smallscreen {display:none} /*only shows in small screens */
/* The screen widths used below are the Bootstrap defaults */
/* == Phone Portrait (Extra Small) == */
@media (max-width: 575px) {
.bigscreen {display:none}
.break {display: block}
.carousel-caption { /*vertically align captions in middle of slideshow */
display: -ms-flexbox!important;
display: flex!important;
height: 100%!important;
-ms-flex-align: center!important;
align-items: center!important;
bottom:0px !important;}
.carousel-caption h1 {font-size: 1.3rem !important}
.carousel-control-prev, .carousel-control-next {display: none}
.carousel-indicators {display: none}/* turn off slideshow controls */
.display-3 {}
.embed-map::before {padding-top:125%} /* adjust shape of embedded map */
.embed-popup-form::before {padding-top: 150%} /*adjust shape of pop-up form */
.embed-popup-page::before {padding-top: 140%} /* adjust shape of pop-up page */
.gallery .pointer {cursor:default !important} /* turns off the pointer in the gallery */
h1 {font-size: 1.7rem}
h2 {font-size: 1.3rem}
h3 {font-size: 1.5rem}
h5 {font-size: 1.1rem}
.logo {max-width:200px; margin-right:10px} /* adjust width and height, but not max-width */
.modal-body img {max-width:100%; max-height:100% !important;} /*set image size to fit into pop-up */
.navtel {display:none !important} /* stop showing phone number in navbar */
.smallscreen {display:block}
.testimonial .carousel-caption {bottom:0px}
.testimonial .carousel-control-prev, .testimonial .carousel-control-next {display: none} /* turn off slideshow controls */
.topgap {} /* adjust height according to the height of the Navbar if necessary */
}
/* == Phone Landscape (Small) == */
@media (min-width: 576px) and (max-width: 767px) {
.bigscreen {display:none}
.break {}
.display-3 {}
.embed-map::before {padding-top:125%} /* adjust shape of embedded map */
.embed-popup-form::before {padding-top: 100%} /*adjust shape of pop-up form */
.embed-popup-page::before {padding-top: 25%} /*adjust shape of pop-up page */
.gallery .pointer {cursor:default !important} /* turns off the pointer in the gallery */
h1 {font-size: 1.8rem}
h2 {font-size: 1.6rem}
h3 {font-size: 1.5rem}
h5 {font-size: 1.1rem}
.logo {max-width:250px; margin-right:15px;} /* adjust width and height, but not max-width */
.navtel {display:none !important} /* stop showing phone number in navbar */
.parallax-caption-1 {}
.smallscreen {display:block}
.topgap {} /* adjust height according to the height of the Navbar if necessary */
.testimonial .carousel-control-prev, .testimonial .carousel-control-next {display: none !important;} /* turn off slideshow controls */
}
/* == Tablet Landscape (Medium) == */
@media (min-width:768px) and (max-width: 991px) {
.bigscreen {}
.embed-map::before {padding-top:100%} /* adjust shape of embedded map */
.embed-popup-form::before {padding-top: 100%} /*adjust shape of pop-up form */
.embed-popup-page::before {padding-top: 105%} /* adjust shape of pop-up page */
.gallery .pointer {cursor:default !important} /* turns off the pointer in the gallery */
h1 {font-size: 2rem}
h2 {font-size: 1.6rem}
h5 {font-size: 1.1rem}
.logo {max-width:230px; margin-right:5px;} /* adjust width and height, but not max-width */
.navtel {display:none !important} /* stop phone number showing in navbar */
.topgap {} /* adjust height according to the height of the Navbar if necessary */
}
/* == Tablet Landscape (Large) == */
@media (min-width:992px) and (max-width: 1199px) {
.embed-map::before {padding-top:125%} /* adjust shape of embedded map */
.embed-popup-form::before {padding-top: 100%} /*adjust shape of pop-up form */
.embed-popup-page::before {padding-top: 56.25%} /* adjust shape of pop-up page */
h1 {}
h2 {}
h5 {font-size: 1.1rem}
.navtel {display:none !important} /* stop phone number showing in navbar */
.parallax-caption-1 {}
.topgap {} /* adjust height according to the height of the Navbar if necessary */
}
/* == Tablet Landscape (Extra Large) == */
@media (min-width:1200px) {
.embed-map::before {padding-top:125%} /* adjust shape of embedded map */
.embed-popup-form::before {padding-top: 100%} /*adjust shape of pop-up form */
.embed-popup-page::before {padding-top: 56.25%} /*adjust shape of pop-up page */
}
/* ============================================= */
/* SLIDESHOW ADJUSTMENTS */
/* ============================================= */
.carousel-caption {bottom:40px}
.carousel-shadow {text-shadow: 3px 3px 6px #00000099} /* last 2 numbers in the color change the opacity of the shadow, 11 is lightest and 99 is darkest */
/* ============================================= */
/* TESTIMONIALS */
/* ============================================= */
/* Combines elements of slideshow and parallax scroller */
.opacity-dark {opacity: 5 !important;}/* used to make text as dark as possible */
.testimonial {text-align: center; padding: 40px 0px; color:#000000}
.testimonial .carousel-control-prev, .testimonial .carousel-control-next {filter: invert(50%)} /*change arrows. Black = 100%. Original grey-white = 0% */
.testimonial h3 {border-bottom: 1px solid #343a40; padding-bottom: 20px; display: inline-block;} /* change the styling on the Testimonials heading */
/* ============================================= */
/* PARALLAX SCROLLER */
/* ============================================= */
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.75; /* 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(#ffffff55, #ffffff77), url("../images/parallax1.jpg"); min-height:380px;} /* add overlay to lighten or darken image */
.bgimg-2 {background-image: url("../images/parallax2.jpg"); min-height:500px;} /* adjust height */
.bgimg-3 {background-image: url("../images/parallax3.jpg"); min-height:600px;}
/* Adjust the value for "top" to change the vertical position of a caption, change "left" for horizontal positioning */
.parallax-caption-1 {position: absolute; left: 0; width: 100%; text-align: center; top: 40%;}
.parallax-caption-2 {position: absolute; top: 30%; left:10%; text-align: left; color: #ffffff; text-shadow: 3px 3px 6px #00000099;}
.parallax-caption-3 {}
/* ============================================= */
/* CUSTOM CARDS WITH MOUSE-OVERS */
/* ============================================= */
/* Change styling according to which card version is being used */
.card, .card-img-overlay, .card-img, .card-header, .card-footer {border-radius: 0px !important}
.card-body {padding: 1rem}
.card-img-holder {position: relative; background-color:#343a40;}
.card-img-overlay:hover {opacity: 0.9 !important}
.card table {width:100%; margin-bottom: 0;}
.card table td, .card table th {padding: .1rem}
.card ul {padding-left: 10px !important; margin-bottom:0px;}
.card-caption {
background-color:#00000055;
padding: 5px 3px 5px 10px;
color:#ffffff;
position: absolute;
bottom:0px !important;
left:0px;
width:100%;
}
.card-caption-top {
background-color:#00000055;
padding: 5px 3px 5px 10px;
color:#ffffff;
position: absolute;
top:0px !important;
left:0px;
width:100%;
}
.card-img-overlay {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:100.1%;
width:100%;
opacity:0;
transition:.5s ease;
color:#ffffff;
background-color:#00000055;
}
.card-shadow {
box-shadow: 0 2px 5px 0 #00000055, 0 2px 10px 0 #00000055;
-webkit-box-shadow: 0 2px 5px 0 #00000055, 0 2px 10px 0 #00000055;
-moz-box-shadow: 0 2px 5px 0 #00000055, 0 2px 10px 0 #00000055;
}
.card-title {
position:absolute;
top: 33%;
left: 20%;
right:20%;
text-align:center;
}
/* ============================================= */
/* MODAL WINDOW ADJUSTMENTS */
/* ============================================= */
.modal-body {max-height: calc(100vh - 100px); overflow-y: auto;}
.modal-footer {padding:0; border-top:0;}
/* ============================================= */
/* EMBEDDED RESPONSIVE ADJUSTMENTS */
/* ============================================= */
/* the shape of a modal or iframe window is determined by padding-top */
/* to calculate a window: divide the height by the width and multiply by 100 */
/* landscape-shapes */
.embed-responsive-10by3::before {padding-top: 30%;}
.embed-responsive-21by9::before {padding-top: 42.857143%;}
.embed-responsive-16by9::before {padding-top: 56.25%;}
.embed-responsive-14by8::before {padding-top: 57.14286%;}
.embed-responsive-13by8::before {padding-top: 61.53846%;}
.embed-responsive-14by9::before {padding-top: 64.28571%;}
.embed-responsive-4by3::before {padding-top: 75%;}
/* square */
.embed-responsive-1by1::before {padding-top: 100%;}
/* portrait--shapes */
.embed-responsive-5by6::before {padding-top:120%;}
.embed-responsive-4by5::before {padding-top:125%;}
.embed-responsive-3by4::before {padding-top:133.333%;}
.embed-responsive-2by3::before {padding-top:150%;}
.embed-responsive-3by5::before {padding-top:166.6666%;}
.embed-responsive-1by2::before {padding-top:200%;}
.embed-responsive-2by5::before {padding-top:250%;}
/* ============================================= */
/* ENQUIRY FORM */
/* ============================================= */
.form {padding: 10px 15px 0px 20px; width:98%; max-width:500px !important; margin:0 auto;} /* max-width:550px */
.form label {margin-bottom:0}
.formfield {width:99%; background-color:#ededed; border:1px solid #dbdbdb}
.formfield-sm {width:97%; background-color:#ededed; border:1px solid #dbdbdb}
/*hidden captcha */
.honey-pot {display: none !important}
/* hide a field from view */
.hidefield {display: none !important}
/* create a larger checkbox (see SARIPA forms for example) */
input.largerCheckbox {width: 20px; height: 20px;}
/* ============================================= */
/* IMAGE LIGHTBOX */
/* ============================================= */
/* Change the cursor to a hand when you hover over the images */
#gallery img {cursor: pointer}
/* ============================================= */
/* EQUAL RESPONSIVE COLUMNS */
/* ============================================= */
/* Content flow automatically between columns */
@media screen and (min-width: 576px){
/*goes on section or parent Div */
.equalflow {display: grid}
/* goes on inner Div */
.paraflow {column-count: 2; margin-top:20px; margin-bottom:20px;}
.paraflow :first-child{margin-top:0}
.paraflow :last-child{margin-bottom: 0}
}
/* ============================================= */
/* 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: 575px) {
.phone-height {min-height: 300px; margin-left: 0px; margin-right: 0px}
/* Change ORDER OF COLUMNS in small screens */
.first {flex: 1 100%; margin-bottom:20px}
.last {flex: 1 100%}
.row {display: flex; flex-wrap: wrap;}
.row > .first {order: 1}
.row > .last {order: 2}
}
@media (min-width: 576px) and (max-width: 767px){
.phone-height {min-height: 300px;}
}
/* ============================================= */
/* TRANSPARENCY / OPACITY */
/* ============================================= */
/* Change how transparent elements are. The lower the value the more transparent */
.transparent {opacity: 0} /* totally transparent*/
.opacity-10 {opacity: 0.1} /* 10% opaque */
.opacity-20 {opacity: 0.2} /* 20% opaque */
.opacity-30 {opacity: 0.3} /* 30% opaque */
.opacity-40 {opacity: 0.4} /* 40% opaque */
.opacity-50 {opacity: 0.5} /* 50% opaque */
.opacity-60 {opacity: 0.6} /* 60% opaque */
.opacity-70 {opacity: 0.7} /* 70% opaque */
.opacity-80 {opacity: 0.8} /* 80% opaque */
.opacity-90 {opacity: 0.9} /* 90% opaque */
.opaque {opacity: 1 !important} /* not transparent at all - 100% opaque */
/* ============================================= */
/* STANDARD BOOTSTRAP COLORS */
/* ============================================= */
.blue {color:#007bff}
.cyan {color:#17a2b8}
.danger {color:#dc3545} /* red */
.dark {color:#343a40} /* dark gray */
.gray {color:#6c757d}
.gray-dark {color:#343a40}
.green {color:#28a745}
.indigo {color:#6610f2}
.info {color:#17a2b8}
.light {color:#f8f9fa} /* very slight gray */
.orange {color:#fd7e14}
.pink {color:#e83e8c}
.primary {color:#007bff}
.purple {color:#6f42c1}
.red {color:#dc3545}
.secondary {color:#6c757d} /* gray */
.success {color:#28a745}
.teal {color:#20c997}
.warning {color:#ffc107} /*yellow */
.white {color:#ffffff}
.yellow {color:#ffc107}
/* ============================================= */
/* PRINT ONLY */
/* ============================================= */
.print {display:none !important}