/* Framewrk Lite V2: Helix Small Biz - Site Theme
 * Copyright © 2011-2021 StaticDigital.com, All Rights Reserved
 * UPDATED: 20210514 - BS 4.6.0
 
** Table of Contents (reworked from: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)
** ----------------------------------------------------------------------------------------------------------
* Elements/Base – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here
  - headings, hr, forms, links, lists, quotes, tables, buttons

* Objects – class-based selectors which define undecorated design patterns
  - animations, drawer, media, layouts, overlays

* Components/Modules – specific UI components. This is where majority of work takes place and UI components are often composed of Objects and Components
  - 404, about, blog-post, callout, cta, faq, features, footer, forms, header, headings, hero, main-nav, page-header, wells, Badges, Labels, Panels, Media

* Helpers – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class
  - colors/backgrounds (ex. text-theme), clearfix, utilities

* Site Specific Customizations/Overrides - Custom overrides of elements, etc.

	Changelog:
	20210428 - Initial build
*/


/*============================================================
=Variables
 USAGE: .theme-main {color:var(--theme-color-main);}
CitiView Burgandy #bc2e43;
============================================================*/
:root {
	--theme-color-main:#d9ab69 !important;
	--theme-color-dark:#781d2b;
}



/*============================================================
=STATIC EXTRAS
============================================================*/
/* =STATIC EXTRA based on gradient at https://waconahconstruction.com/residential-home-construction/ */
.bg-overlay[data-style="13"] {
	background-color: transparent;
	background-image: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, #000000 100%);
	opacity: 0.75;
	/*transition: background 0.3s, border-radius 0.3s, opacity 0.3s;*/
}
/* =STATIC EXTRA: Modified ver https://uigradients.com/#DeepSpace */
.bg-overlay[data-style="14"] {
	background: linear-gradient(to top, #333, #000000);
	opacity: .8;
}


/* -- Add a sleight text shadow under solid btn text only */
/*.btn:not(.btn-outline) {text-shadow: 1px 1px 1px rgba(0,0,0,0.25);}*/




/*============================================================
=Elements/Base
============================================================*/
/* Highlight Color */
::-moz-selection {background:var(--theme-color-main); color:#fff; text-shadow:none;}
::selection {background:var(--theme-color-main); color:#fff; text-shadow:none;}


/* FRAMEWRK EXTRA: BS5 OVERRIDE */
a {color: var(--theme-color-main);}


/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Spectral", Arial, sans-serif; margin: 0; letter-spacing: -2px;}



/* Button, Custom */
/* MOBILE BTN-LG GREEN - Medium devices (tablets, 768px and up) */
@media (max-width: 991px) {
	button.btn.btn-lg,
	.btn:not(.close):not(.mfp-close).btn-lg,
	a.btn:not([href]):not([tabindex]).btn-lg {
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 18px;
	padding: 8px 40px;
	}
}

/*styles.css 11296*/
button.btn.btn-white.btn-outline:hover, button.btn.btn-white.btn-outline:focus, button.btn.btn-white.btn-outline:active, button.btn.btn-white.btn-outline.active, button.btn.btn-light.btn-outline:hover, button.btn.btn-light.btn-outline:focus, button.btn.btn-light.btn-outline:active, button.btn.btn-light.btn-outline.active, .btn:not(.close):not(.mfp-close).btn-white.btn-outline:hover, .btn:not(.close):not(.mfp-close).btn-white.btn-outline:focus, .btn:not(.close):not(.mfp-close).btn-white.btn-outline:active, .btn:not(.close):not(.mfp-close).btn-white.btn-outline.active, .btn:not(.close):not(.mfp-close).btn-light.btn-outline:hover, .btn:not(.close):not(.mfp-close).btn-light.btn-outline:focus, .btn:not(.close):not(.mfp-close).btn-light.btn-outline:active, .btn:not(.close):not(.mfp-close).btn-light.btn-outline.active, a.btn:not([href]):not([tabindex]).btn-white.btn-outline:hover, a.btn:not([href]):not([tabindex]).btn-white.btn-outline:focus, a.btn:not([href]):not([tabindex]).btn-white.btn-outline:active, a.btn:not([href]):not([tabindex]).btn-white.btn-outline.active, a.btn:not([href]):not([tabindex]).btn-light.btn-outline:hover, a.btn:not([href]):not([tabindex]).btn-light.btn-outline:focus, a.btn:not([href]):not([tabindex]).btn-light.btn-outline:active, a.btn:not([href]):not([tabindex]).btn-light.btn-outline.active {
	color: #000;
}



/*============================================================
=Objects
============================================================*/





/*============================================================
=Components/Modules
============================================================*/
/* - Page Header Title */
.page-header-content h2 { color:#fff;}


/* CTA - styles.css 17113 */
.call-to-action.call-to-action-dark {background-color: #000;}




/*----------------------------------------
=Footer
----------------------------------------*/
#footer {line-height: normal;}

address {margin-bottom: 0;}

/* LES EXTRA - previously was class "copyright-text" */
.dark #footer, #footer.inverted { color: #646b70; }
.dark #footer p, #footer.inverted p, #footer.dark p { color: #646b70; } /* Override*/
.dark #footer a:not(.btn):not(:hover), #footer.inverted a:not(.btn):not(:hover), #footer.dark a:not(.btn):not(:hover) { color: #646b70; } /* Override*/


/* BS 5 VR reworked for footer */
#footer .vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color:#646b70;
    opacity: .5;
}

.bluemondaylogo {
	background: url(https://www.bluemondaydesign.com/img/bmdlogos/clientfooterlogoDK.png) no-repeat;
	text-indent: -9999px;
	border: 0;
	width: 130px;
	height: 25px;
	float: right;
}





/*============================================================
=Sections
============================================================*/
/* =Section Intros: On pages after nav and title block */
.section-intro {padding:2.5rem 0; background-image: url('../img/bg-woodgrain.jpg');}

/* XS - ORANGE (portrait phones, less than 576px) */
.section-intro-title {font-size: 24px; line-height: 32px;}
	/* MD - BLUE (tablets, >=768px) */
	@media (min-width: 768px) {.section-intro-title {font-size: 28px; line-height: 36px;}}
	/* XL - PINK (large desktops, >=1200px) */
	@media (min-width: 1200px) {.section-intro-title {font-size: 32px; line-height: 40px;}}



/*----------------------------------------
=Section - Contact
----------------------------------------*/
.citation {list-style: none; padding:0; margin:0 0 20px;}
.citation > li {display: inline-block;}
.citation > li + li:before {padding: 0 6px 0 10px; color: inherit; content: "|\00a0"; /* \00a0 adds space */}
.jobtitle {margin-left: 8px; font-size:80%; font-style:italic; text-transform:uppercase;}


/*---------------------------------------------------------------------------
Contact Us Google Map Container with Resize
---------------------------------------------------------------------------*/
#mapcontainer {position:relative;}
#mapcontainer .map {
	width: 100%;
	height: 250px;
	border-bottom: 2px solid #111;
	background-color:#222;
	z-index: 1;
}
#mapcontainer .gmap3loading {line-height:275px; text-align:center;}

#mapcontainer .resize {
	background:#111;
	font-size:10px;
	color:#666;
	color:rgba(255,255,255,0.75);
	text-align:center;
	margin: 0 4px 0 -35px;
	cursor:pointer;
	position:absolute;
	bottom:0;
	left:50%;
	z-index: 2;
	border-radius: 4px 4px 0 0;
	}

	#mapcontainer .resize-toggle {padding:2px 14px;}

	/* Phones ORANGE XS */
	@media (max-width: 480px) { .resize {display:none;} }





/*============================================================
=Forms
============================================================*/
/* Lighten placeholder text */
.form-control::-moz-placeholder {color: #a9a9a9; opacity: 1;}
.form-control:-ms-input-placeholder {color: #a9a9a9;}
.form-control::-webkit-input-placeholder {color: #a9a9a9;}

/* Bootstrap Form Style Overrides - remove outline, smaller radius */
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline:none;
}
.form-control {
	border-radius: 2px;
}
.form-control:focus {
	border-color:#666;
	box-shadow:none;
}


/* Framewrk Ultimate Form */
/*.form-group-submit {margin-top:20px;}*/ /* Add space above submit button */
/*.radio-inline, .checkbox-inline {padding-top:4px;}*/ /* makes radios and checkboxes align vert */
.help-block {font-size:85%;}
.help-block::before {
	content: "\25b7";
	margin-right: 4px;
}

/* =Password Strength - remove 20px margin under password strength meter */
.pwstrength_viewport_progress .progress {margin-bottom:0;}


/* Hpot - Contact Form */
input[name=paramcheck] {display:none !important; visibility:hidden !important;}
.captchatext {font-family:"Courier New", Courier, monospace; font-size:18px; font-weight:bold; color:#96c80f;}


/* Parsley.js Validation v2+ */
/* NEW VALID/INVALID ICON VERSION 20210514 - Pulled from BS 4.6.0 */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
	border-color: #8cc152; /*BS COLOR #28a745*/
	padding-right: calc(1.5em + 0.75rem);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%238cc152' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    border-color: #ff0000; /*BS COLOR #dc3545*/
    padding-right: calc(1.5em + .75rem);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ff0000' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff0000' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.parsley-errors-list {
	margin: 4px 0 3px 0;
	padding: 0;
	list-style-type: none;
	color:#f00;
	font-size: 0.75em;
	line-height: 0.9em;
	opacity: 0;
	transition: all .3s ease-in;
}
	.parsley-errors-list.filled {opacity: 1;}


/* =Required Asterisks: add "required" to containing element. Usually div class="form-group"
    -- SVG VERSION: https://stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after
	-- background-image: See code explanation in Framewrk "Form Required Dots-Asterisk" folder. NOTE: added "-1" to push dot down and better inline */
.required label:after {
	display: inline-block;
	content: "";
	height: 12px;
	width: 12px;
	margin-left: 2px;
	background-image: url('data:image/svg+xml;utf8,%3csvg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 36 36"%3e%3ccircle cx="22" cy="22" r="11" fill="%23ff0000"/%3e%3c/svg%3e');
}


/* Removes asterisks after each radio/checkbox item. Requires additional label "control-label" added before. */
.required > .radio label:after, /* default radios */
.required label.radio-inline:after, /* inline radios */
.required > .checkbox label:after, /* default radios */
.required label.checkbox-inline:after /* inline checkboxes */ {
	content: "";
	color: inherit;
}

/* Warning Box on Textbox: bootstrap-maxlength.min.js */
.maxlength {
	color:#fff;
	padding: 2px 14px;
	border-radius: 0 0 4px 4px;
}
	.maxlength-warningclass {background-color: #8cc152;}
	.maxlength-limitreachedclass {background-color: #f00;}





/*============================================================
=Trumps/Helpers
============================================================*/
.text-theme {color:var(--theme-color-main);}





/*============================================================
=Site Specific Customizations
============================================================*/
/* =Page - Homepage */
/* Hero slider caption overrides */
/*4180*/
.inspiro-slider .slide .slide-captions h2 {
	font-size: 116px; /*ORIG 80px */
	font-weight: 700;
	line-height: 80px;
	margin-bottom: 30px;
	color: #ffffff;
	letter-spacing: -2px;
}
/*.inspiro-slider .slide .slide-captions h2 {
	font-size: 60px;
	font-weight: 700;
	line-height: 68px;
	margin-bottom: 30px;
	color: #ffffff;
}*/

/*4329*/
@media (max-width: 1024px) {
	.inspiro-slider .slide .slide-captions h1,
	.inspiro-slider .slide .slide-captions h2 {
	font-size: 66px;
	line-height: 60px;
	margin-bottom: 12px;
	}
}

/* ----------------------------------------------------------------
Scrolldown icon animation
-----------------------------------------------------------------*/
.scrolldown-animation {
  animation: 1s ease-in-out 0s normal none infinite running scrolldown-keyframes;
  bottom: 40px;
  height: 40px;
  left: 50%;
  margin-left: -20px;
  position: absolute;
  width: 45px;
  z-index: 60;
}

@keyframes scrolldown-keyframes {
	0%, 100% {
	transform: translateY(-8px);
	}
	50% {
	transform: translateY(0px);
	}
}
@keyframes scrolldown-keyframes {
	0%, 100% {
	transform: translateY(-8px);
	}
	50% {
	transform: translateY(0px);
	}
}


/*animated background*/
.animated-background {
  animation: 120s linear 0s normal none infinite running animatedBackground;
  background-repeat: repeat-x;
  background-size: cover;
}

@keyframes animatedBackground {
	0% {
	background-position: 0 0;
	}
	100% {
	background-position: -3000px 0;
	}
}
@keyframes animatedBackground {
	0% {
	background-position: 0 0;
	}
	100% {
	background-position: -3000px 0;
	}
}

/* Affiliates */
/* ORANGE/BLUE - Small devices (landscape phones, 576px and up) */
.affiliates img {max-height:60px; padding:6px;}

	/* GREEN - Medium devices (tablets, 768px and up) */
	@media (min-width: 768px) { .affiliates img {max-height:55px; padding:0;} }

	/* PINK - Large devices (desktops, 992px and up) */
	@media (min-width: 992px) { .affiliates img {max-height:65px; padding:0;} }



/* =Page - About */
.team-member {
    margin: 0px 0px 60px;
    padding: 0px 0px 60px;
    border-bottom: 1px solid rgb(238, 238, 238);
}
.team-member:last-child {
    border-bottom: 0px none;
	margin:0;
	padding:0;
}
.team-title {
	letter-spacing: 1.5px;
	font-weight:400;
}
.team-title::after {
    content: "";
    position: relative;
    display: block;
    width: 100px;
    height: 2px;
    background-color: var(--theme-color-main);
    margin: 20px 0px 30px;
}


/* =Page - Portfolio */
/* =LES ICON VERSION: since this simpler portfolio doesn't have the options for multiple choices (link, video, etc), 
the "a href" is removed and therefore, this icon is shown instead reworked from styles.css line 4604*/
.portfolio-description i {
	border-radius: 50%;
	color: #fff;
	font-size: 18px;
	height: 40px;
	line-height: 36px !important;
	width: 40px;
	border: 2px solid #fff;
	transition: all 250ms ease-in-out 0s;
}