/*
	Theme Name: Your Theme by Fusion Studios
	Theme URI: http://html5blank.com
	Description: Based on HTML5 Blank WordPress Theme by Todd Motto (@toddmotto)
	Version: 1.4.3
	Author: Kevin (kevin@fusionstudiosinc.com)
	Author URI: http://fusionstudiosinc.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/


/* IMPORT FONTS BEGINS*/

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* IMPORT FONTS ENDS*/


/*WORDPRESS CORE STYLES BEGIN*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}

        @media only screen and (max-width: 750px){
            /*remove float and center all left and right aligned images at 750px.  Adjust as needed*/
            .alignleft, .alignright {
                float:none;
                display: block;
                height: auto;
                margin: 20px auto;
            }
        }

a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:95%;
	padding: 5px;
	text-align:center;
}

    @media screen and (max-width: 400px){
        .wp-caption.aligncenter {
            width: unset!important; /*this, coupled with positioning below, prevents wordpress from forcing a size on the caption and preventing a truly resposive AND centered image and caption*/
            position: relative;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
        }
    }

.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	margin:0;
	padding:0;
	width:100%;
    height: auto;
}
.wp-caption .wp-caption-text, .gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:7px 0px 7px 0px;
}

/*WORDPRESS CORE STYLES END*/


/* FLEXBOX PARENT ELEMENT STYLES BEGIN */

.displayFlex {
    display: flex;
}
.flexDirectionColumn {
    flex-direction: column;
}
.justifyContentCenter{
    justify-content: center;
}
.justifyContentSpaceBetween{
    justify-content: space-between;
}
.justifyContentSpaceAround{
    justify-content: space-around;
}
.justifyContentFlexEnd {
    justify-content: flex-end;
}
.alignItemsCenter {
    align-items: center;
}
.alignItemsFlexEnd{
    align-items: flex-end;
}
.alignItemsStretch {
    align-items: stretch;
}
.flexWrapWrap {
    flex-wrap: wrap;
}

/* FLEXBOX PARENT ELEMENT STYLES END*/

/*GENERAL HTML STYLES BEGIN*/

html{
    overflow-x: hidden; /*must be present to prevent mobile from having scrolling issues in certain circumstances*/
}
body {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	color: black;
    line-height: normal;
    overflow-x: hidden; /*must be present to prevent mobile from having scrolling issues in certain circumstances*/
    position: relative; /*must be present to prevent mobile from having scrolling issues in certain circumstances*/
	margin: 0;
}
a, span.makeLink {
	color: #0079c2;
	text-decoration: none;
	transition: color .4s;
	cursor: pointer;
}
a:hover, span.makeLink:hover {
	color: #444;
	transition: color .4s;
}
a:focus {
	outline: 0;
}
a:hover, a:active {
	outline: 0;
}
.buttonWrapper a, .buttonWrapper span{
	color: #afa9e0;
    background: #242424;
    padding: 7px 20px 7px 20px;
    border-radius: 5px;
    margin-top: 10px;
   	display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    position: relative;
    transition-property: color;
    transition-duration: 0.5s;
	cursor: pointer;
 }
body.single-post .buttonWrapper.singlePost a{
	margin-bottom: 45px;
}
.buttonWrapper a:hover, .buttonWrapper span:hover{
	color: black;
	transition: .5s color;
}
.buttonWrapper a:before, .buttonWrapper span:before{
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: whitesmoke;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition-property: transform;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}
.buttonWrapper a:hover:before, .buttonWrapper span:hover:before{
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	border: 1px solid black;
	border-radius: 5px;
}
audio {
	outline: 0;
}
h1, h2, h3, h4, h5, h6, p{
    margin: 0px;
    padding: 15px 0;
    /*margins placed on elements at the top of other elements whose padding has not been set don't show up due to overflow issues in the box model. Because of this, we will ALWAYS use padding instead of margins*/
}
h2{
	font-size: 40px;
	color: #2d2665;
	font-weight: 100;
	line-height: 100%;
}
h2.withUnderline:after{
	display: block;
    content: '';
    border-top: 2px solid #4fcadc;
    max-width: 11%;
    margin: auto;
}
iframe, object, embed {
	max-width: 100%;
}
img{
    max-width: 100%;
    height: auto;
}
main{
	color: #313131;
	display: block;
}
p:empty{
    display: none;
    /*prevents empty paragraph tags WordPress sometimes puts in from screwing up layout.  We used to do this with jquery inscripts, but caused problems with Google captcha*/
}
.fixedWidth {
    max-width: 1200px;
    margin: 0 auto;
}
.paddingSides{
    /*for use especiially on full or fixed width containers to add side padding see http://yoursite.me/wordpressKevin/ for examples*/
    padding-left: 5%; /*don't use short forms here*/
    padding-right: 5%;
    /*box size: boder box; uncomment as required*/
}

	@media screen and (max-width: 470px){
		.paddingSides{
			padding-left: 45px;
			padding-right: 45px;
		}
	}

.paddingTopBottom{
     /*for use especiially on full or fixed width containers to add top and bottom padding see http://yoursite.me/wordpressKevin/ for examples*/
    padding-top: 50px; /*don't use short forms here*/
    padding-bottom: 50px;
}
.textAlignCenter{
	text-align: center;
}
.whitesmokeBackground{
	background: whitesmoke;
}
/*GENERAL > form styles begin*/

form{
	max-width: 700px;
    border: 2px #e4e2e2 solid;
    padding: 10px 10px 0 10px;
    border-radius: 7px;
    background: #2d2665;
}
input[type="text"], input[type="email"], textarea{
	width: 100%;
	padding: 7px;
	box-sizing: border-box;
}
input[type="text"], input[type="email"]{
	border: none;
    margin: 5px 0;
    font-size: 17px;
    border-bottom: 1px solid #4fcadc;
	background: none;
    color: white;
}
input[type="file"]{
	color: #757575;
	padding: 10px 0 10px 0;
}
input[type="submit"]{
    background: #4fcadc;
    padding: 14px 0 10px 0;
    border: none;
    color: white;
    display: block;
    font-size: 20px;
    letter-spacing: 2px;
	cursor: pointer;
	transition: .4s background;
	width: 100%;
    margin: auto;
}

	@media screen and (max-width: 380px){
		input[type="submit"]{
			width: 100%;
		}
	}

input[type="submit"]:hover{
	background: #28253c;
	transition: .4s background;
}
textarea{
	padding: 10px;
    box-sizing: border-box;
	color: white;
	background: none;
}
textarea:active, textarea:focus{
	background: #28253c;
	border: none;
	outline: none;
}
label {
	color: #cccbcb;
	display: block;
	text-transform: uppercase;
	margin-top: 9px;
}
input:active, input:focus{
	background: #28253c;
	border: none;
	outline: none;
}

/*GENERAL > form styles end*/

/*GENERAL HTML STYLES END*/

/*HEADER STYLES BEGIN*/

.header .displayFlex.headerContentWrapper{
	background: white;
}

/*HEADER SCROLLED STYLES BEGIN --class "scroll added by scripts.js in theme file*/

.header.scrolled{
    position: fixed; /*make header "sticky"*/
    width: 100%; /*must have a width to make "sticky" work*/
    box-sizing: border-box; /*allows any padding or borders to be included in the with of the header, so width: 100% above doesn't cut stuff with padding off*/
   	z-index: 999999; /*ensure menu goes over everything*/
	transform: translateY(70px);/* This style and the two below it just make the header do a jiggy jog with easing when class "scrolled is added to it"*/
    top: -70px;
    transition: transform 500ms ease;
    border-bottom: 1px solid #ecebeb;
}
.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem{
	padding: 9px 0 0 60px;
	transition: margin .6s;
	margin: -26px 0px;
}

	@media screen and (max-width: 1023px){
		.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem{
			top: unset;
			margin: 0px;
			padding: 0;
			padding-left:20px;
			padding-top: 10px;
		}
	}

	@media screen and (min-width: 1024px){
		.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem img {
			transform: scale(.6);
			transition: all .5s;
		}
	}

.header.scrolled .mobileNavOpenClose{
	/*whenthe window is NOT scrolled jquery (js/scripts.js) uses "top:" to place the position: fixed nav open close button in order to offset the fact that .headerContact pushes down the mobile open close as the ntext breaks.  When The window IS scrolled (and .headerContact disappears, this style overrides the jquery to place the open close nav button at top: 5px;*/
	top: 15px!important;
}


/*HEADER SCROLLED STYLES end --class "scroll added by scripts.js in theme file*/

.header .displayFlex.headerContentWrapper a.logo.flexItem {
	position: relative;
	transform: scale(1);
	color: #211e1d;
	transition: color .4s, padding .4s, transform .4s, margin .4s;
	padding: 12px 0 12px 3%;
}
.header .displayFlex.headerContentWrapper a.logo.flexItem img{
	max-width: 210px;
}

	@media screen and (max-width: 1100px){
		.header .displayFlex.headerContentWrapper a.logo.flexItem img{
			max-width: 195px; /*adjust as necessary*/
		}
		.header .displayFlex.headerContentWrapper a.logo.flexItem{
			padding: 12px 0 12px 9px;
		}
		.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem{
			padding: 9px 0 0 24px;
		}
	}

/*HEADER > NAV main menu item styles begin*/

.header .displayFlex.headerContentWrapper .flexItem.nav {
    height: 54px; 
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul li a[aria-current]{
	/*styles currrently active page using the aria-current attribute that wordpress inserts into the currently acitve menu item.*/
	color: black !important;
	font-weight: bold;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul {
    display: flex; /*override default block behaviour of uppermost li items only, so they go across screen one after another.  */
    right: 0px; /*puts menu to the right of the screen.  Comment out to put menu to left*/
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul {
    margin: 0px; /*override default browser margin on ul elements.  Don't take this out!*/
    padding: 0px; /*override default browser padding on ul elements. Don't take this out!*/
    position: absolute;/*this and z-index (below) allows all menu items to flow over content below them.*/
    z-index: 999;
    list-style: none; /*override default browser bullet display on list items*/
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li a {
    /*asign any styles that should apply to ALL menu items below. Styles put on any subs (below) would override these general styles.*/
    display: block;
	color: #2d2665;
	transition: .4s color;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li a:hover {
    /*asign any styles that should apply to ALL menu items below. Styles put on any subs (below) would override these general styles.*/
	color: #4fcadc;
	transition: .4s color;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > a {
    /*asign any styles that should apply only to TOP LEVEL menu items below.*/
    padding: 16px 1.5vw 16px 1.5vw; 
	text-transform: uppercase;
 }
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > a:hover{
    /*asign any hover styles that should apply only to TOP LEVEL menu items below.*/
 }

/*HEADER > NAV main menu item styles END*/

/*HEADER > NAV > SUB-MENU Styles begin*/

.header .displayFlex.headerContentWrapper .flexItem.nav ul li.menu-item-has-children > a:after {
    /*put "+" indicator menu item with subs. WordPress creates the class "menu-item-has-children" for any menu item that has subs*/
    content: '+';
    padding-left: 5px;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li ul.sub-menu  {
    display: none; /*set all subs not to display initially.  On hover function in js/scripts.js toggles display*/
	background: white;
	top: 52px;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu > li > a {
    /*assign styles that should effect ONLY FIRST LEVEL SUBS below.  Styles set on subs of subs would override these*/
    margin-left: 5px;/*so subs have a margin with respect to their parent*/
    font-size: 90%;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu > li > a:hover{
    /*assign hover styles that should effect ONLY FIRST LEVEL SUBS below.  Styles set on subs of subs would override these*/
} 
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu li a {
    /*assign any styles that should effect ALL LEVELS OF SUBS below*/
    padding: 10px;
	color: black;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu li a:hover {
    /*assign any styles that should effect ALL LEVELS OF SUBS ON HOVER below*/
    color: #0099cc;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li ul.sub-menu li{
    position: relative; /*so subs of subs will appear at the top of their li parent.  Subs of subs are to top: 0px; (below).*/
}
.header .displayFlex.headerContentWrapper > .flexItem.nav > ul > li > ul.sub-menu > li > ul.sub-menu > li > a {
	font-size: 90%;
    /*assign styles that should effect ONLY SECOND LEVEL SUBS below. */
}
.header .displayFlex.headerContentWrapper > .flexItem.nav > ul > li > ul.sub-menu > li > ul.sub-menu > li > a:hover {
    /*assign HOVER styles that should effect ONLY SECOND LEVEL SUBS below. */
}
.header .displayFlex.headerContentWrapper > .flexItem.nav > ul > li > ul.sub-menu > li > ul.sub-menu {
   left: 100%; /*puts subs of subs directly to the RIGHT of their sub-parent.*/
   width: 100%;/*sets the width of subs--adjust as needed to your longest one so sub subs don't wrap*/
   top: 0px; /*so sub subs begin at the top of their li parent, which is set to position: relative;*/
  }

/*HEADER > NAV > SUB-MENU Styles end*/

/* HEADER mobile navigation styles begin */
    
        @media screen and (max-width: 1023px){
                /*don't display the desktop nav at and below 1023px.  Adjust pixel value as desired.*/
                .header .nav {
                    display: none;
                }
            }

        @media screen and (min-width: 1024px) {
            /*don't display mobile menu button or the mobile menu iteself at 1024px and above.  Adjust the pixel value as desired.*/
            .header .mobileNavOpenClose, .header .mobileNavWrapper {
                display: none; 
            } 
        }

/* HEADER mobile navigation styles > MOBILE NAV OPEN CLOSE ("hamburger") styles BEGIN */

.header .mobileNavOpenClose {
    /*js/scripts.js toggles the width of this element between 100% (when mobile menu is showing, therby matching its width) and the 99px value below (when mobile menu is not showing)*/
    text-align: center; /*centers mobile hamburger and word "menu"*/
    position: fixed; /*so menu bar follows the user on scroll*/
    z-index: 9999999999;
    top: 2%;
    right: 14px;
    width: 99px;
    line-height: 45px; /*adjust to vary height of mobile menu icon bar*/
    background-color: white;/*background for mobile menu icon bar*/
    text-transform: uppercase;
    padding-right: 10px;
    padding-left: 10px;
	/*border: 2px solid #cc0134;
	border-radius: 5px;*/
    visibility: hidden;/*prevents hamburger from moving for a second before jquery is fully loaded, visiblity set to visible again by Jquery function*/
    box-sizing: border-box;
}
.header .mobileNavOpenClose a.mobileNavIcon {
    color: grey; /*defines color of both the word menu and hamburger in mobile menu bar*/
}
.header .mobileNavOpenClose a.mobileNavIcon span:before{
    content:'\2630';/*creates the hamburger*/
    padding-right: 5px;
    font-size: 29px;
    position: relative;
    top: 5px;
}
.header .mobileNavOpenClose a.mobileNavIcon.XoutOfMobileMenu span:before {
    /*class "XoutOfMobileMenu" toggled through js/scripts.js JQuery, puts mobile menu-close "x" in place of hamburger when mobile menu is open*/
    content:'\00D7';/*creates the "x"*/
    font-size:40px;
    position:relative;
    top: 8px;
    display: inline-block; /*so inline span can recieved rotaton (inline elements do not)*/
    transform: rotate(360deg);
    transition:transform 1s ease-out;
    animation: fadeinout 1s ease forwards;
    opacity: 0;
}

        @keyframes fadeinout {
            0% { opacity: 0; }
            50% { opacity: .5; }
            100% { opacity: 1; }
        }

/* HEADER mobile navigation styles > MOBILE NAV OPEN CLOSE ("hanburger") styles END */

/* HEADER mobile navigation styles > MOBILE NAV WRAPPER (mobile menu) styles BEGIN */

.header .mobileNavWrapper{
    position: fixed;
    width: 100%;
    height: 0%; /*hide mobile menu until js/scripts.js toggles the height to 100% (menu open) and back to 0% (menu close) on click*/
    right: 0px; /*so nav menu appears from right of screen*/
    overflow-y: scroll; /*so "position: fixed" menu will scroll --MUST supply a height .mobileNav" element below*/
    top: 52px; /*so mobile logo and nav go directly beneath the (expanded) hamburger menu button*/
    background: white;
    z-index: 999;
	transition: top .4s;
}
.header .mobileNavOpenClose.moveToTopofWindow{
	/* class moveToTopofWindow added by scripts.js, but we ensure with important override that its always top 0 right 0 left 0 with the folowing styles WHEN MBILE NAV IS OPENED */
	top: 0px!important;
	right: 0px!important;
	left: 0px !important;
}
.header .mobileNavWrapper .mobileLogo{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
.header .mobileNavWrapper .mobileLogo img {
    width: 200px;/*adjust if mobile logo is too large for screen*/
}
.header .mobileNavWrapper .mobileNav ul {
    margin: 0px; /*override browser defaults for all mobile menu items*/
    padding: 0px; /*override browser defaults for all mobile menu items*/
    list-style: none;/*remove browser default for lists*/
}
.header .mobileNavWrapper .mobileNav{
    height: 339vh;/*fixed with must have a height so all menu items appear. Large value is to accomodate orientation change*/
}
.header .mobileNavWrapper .mobileNav ul li a {
    /*define styles that should define ALL menu items here*/
    color: grey;
    display: block;
    padding: 30px 20px; /*controls height of menu items*/
    border-top: rgba(164, 156, 156, 0.4) 1px solid;
 }
.header .mobileNavWrapper .mobileNav > ul > li a:last-of-type{
    border-bottom: rgba(164, 156, 156, 0.4) 1px solid; /* put a border bottom only on last child of main menu items ONLY to complete menu*/ 
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children{
	position: relative;
}
a.dropDownActivator{
	position: absolute;
    top: 0px;
    right: 0px;
    padding: 30px !important;
    border: 1px solid grey;
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children a.dropDownActivator:after{
    /*"drop down activator" inserted by javascript in theme JS folder*/
	content: "▼";
	transform: rotate(0deg);
	display: block;
	transition: 500ms ease transform;
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children > a.OpenCloseToggle:after{
    /*"OpenCloseToggle class inserted by javascrip in theme JS folder*/
    transform: rotate(180deg);
  }
.header .mobileNavWrapper .mobileNav ul li a:hover {
    /*define HOVER styles that should define ALL menu items here*/
}
.header .mobileNavWrapper .mobileNav > ul > li > a {
    /* define styles for only all TOP LEVEL MENU ITEMS below*/
     transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav > ul > li > a:hover {
    /* define hover styles for only all TOP LEVEL MENU ITEMS below*/
    background-color:rgba(0, 0, 0, 0.1); /*very transparent black*/
    transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li > a {
    /*define any styles that should effect SUBS ONLY below*/
    padding-left: 45px;
    background-color: #b8bcbe; /*grey is default*/
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li > a:hover {
    /*insert any HOVER styles that should effects SUBS ONLY here*/
    /*background-color: #bc108d;magenta is default*/
    transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children> ul.sub-menu li > a {
    /*insert any styles that should effect SUBS of SUBS ONLY here*/
    padding-left: 40px;
    background-color: yellow;
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children> ul.sub-menu li > a:hover {
    /*insert any HOVER styles that should effect SUBS OF SUBS ONLY here*/
      background-color: blue;
      transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children ul.sub-menu {
    /*don't display ANY subs until user clicks on them and js/script.js JQuery toggles their display*/
    display: none;
	flex-basis: 100%;
}

/* HEADER mobile navigation styles > MOBILE NAV WRAPPER (mobile menu) styles END */

/*HEADER slide form out from right styles begin*/

.slideOutFromRightTrigger:before{
	position: fixed;
	right: -119px;
	top: 50%;
	transform: rotate(-90deg) translateY(-50%);
	background: #2d2665;
	cursor: pointer;
	color: white;
	padding: 6px 30px 6px 30px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border: 1px solid black;
	transform-origin: center;
	z-index: 99999;
	content: 'BEGIN INVESTIGATION';
	transition: .5s all cubic-bezier(0.38, -0.53, 0.63, 1.39);
}
.slideOut.slideOutFromRightTrigger:before{
	content:'CLOSE';
	right: 464px;
	transition: .5s all cubic-bezier(0.38, -0.53, 0.63, 1.39);
}
.slideOutFromRightWrapper{
	position: fixed;
	background: white;
	z-index: 999999;
	height: 76%;
	max-height: 736px;
	/*above 2 styles keep scrolling working right and height from getting to big for larger devices in landscape at least*/
	overflow-y: auto;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	transition: .5s all cubic-bezier(0.38, -0.53, 0.63, 1.39);
	border: 2px solid black;
	border-radius: 10px;
	padding: 7px 25px 19px 25px;
	max-width: 496px
}
.slideOutFromRightWrapper p{
	padding: 0;
}
.slideOutFromRightWrapper.slideOut{
	/*class "slideOut" added by jquery in scripts.js in theme files*/
	left: calc(100% - 522px); /*adjust as the desired width of the content changes*/
	transition: .5s all cubic-bezier(0.38, -0.53, 0.63, 1.39);
}
.slideOutFromRightWrapper.slideOut .phoneWrapper{
	text-align: center;
	text-transform: uppercase;
}
.slideOutFromRightWrapper.slideOut .phoneWrapper a{
	font-size: 25px;
	color: #2d2665;
	transition: .4s color;
}
.slideOutFromRightWrapper.slideOut .phoneWrapper a:hover{
	color: #4fcadc;
}

@media (max-width: 570px){
	.slideOutFromRightWrapper{
		}
	.slideOutFromRightWrapper.slideOut{
		left: 18%;
	}
	.slideOut.slideOutFromRightTrigger:before{
		right: calc(-50px + 80%);
	}
}

/*HEADER slide form out from right styles begin*/

/* HEADER mobile navigation styles END */

/*HEADER styles end*/

/*HOMEPAGE STYLES BEGIN*/

body.home .pageTitle{ 
    display: none;/*don't display page title on homepage*/
}
.heroWrapper{
	position: relative;
	text-align: center;
}
.heroWrapper .hero{
	/* old office background: background: url('https://workplace-investigation.com/wp-content/uploads/headerImage.jpg'); 
	padding: 19.6% 0;*/
	background-image: url('https://workplace-investigation.com/wp-content/uploads/heroHealthcare.jpg');
	background-size: cover;
	padding-top: 35%;
	padding-bottom: 9.6%;
	background-position: bottom;
}
.heroWrapper .heroTaglineWrapper{
	background: #282565cc;
	padding: 10px 5%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	box-sizing: border-box;
}
.heroWrapper .heroTaglineWrapper .tagline{
	font-size: calc(1.7vw + 10px);
    line-height: 100%;
    color: #dedede;
}
.heroWrapper .heroTaglineWrapper .subTagline{
	font-size: calc(.7vw + 10px);
	color: #4fcadc;
	text-transform: uppercase;
}
.heroWrapper .heroTaglineWrapper .subTaglineTwo{
	font-size: calc(.7vw + 11px);
	color: #efef82;
	text-transform: unset;
}

	 @media (max-width: 750px){
			.heroWrapper .heroTaglineWrapper{
				position: relative;
				top: unset;
				transform: unset;
			}
		 .heroWrapper .heroTaglineWrapper .tagline{
			 font-size: 20px;
		 }
		 .heroWrapper .heroTaglineWrapper .subTagline, .heroWrapper .heroTaglineWrapper .subTaglineTwo{
			 font-size: 16px;
			 line-height: 21px;
			 padding-top: 5px;
		 }
	}

.coursesCallout #newStar {
	background: #2d2665;
	width: 80px;
	height: 80px;
	position: relative;
	text-align: center;
}
.coursesCallout #newStar:before, #newStar:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 80px;
	width: 80px;
	background: #2d2665;
}
.coursesCallout #newStar:before {
	transform: rotate(30deg);
}
.coursesCallout #newStar:after {
	transform: rotate(60deg);
}
.coursesCallout #newStar .newStarText{
	position: relative;
    z-index: 9;
    color: white;
	transform: rotate(-13deg);
	font-size: 35px;
}
.displayFlex.forCoursesHP{
	column-gap: 6%;
}

	@media (max-width: 600px){
		.displayFlex.forCoursesHP{
			flex-direction: column;
		}
		.coursesCallout #newStar{
			margin-bottom: 15px;
		}
	}

.coursesCallout .coursesTextHP h2{
	font-size: 30px;
}
.displayFlex.educateInvestigation .flexItem{
	flex-basis: 50%;
	color: whitesmoke;
	padding: 5%;
}
.displayFlex.educateInvestigation .flexItem .subHeading{
	font-size: 20px;
    text-transform: uppercase;
    margin-top: -24px;
    padding-top: 4px;
}
.displayFlex.educateInvestigation .flexItem.educate{
	background: #2d2665;
	background-image: url('https://workplace-investigation.com/wp-content/uploads/lightblueAmpersand.png');
	background-position: right;
	background-repeat: no-repeat;
	background-size: 100px;
	padding-right: 119px;
}
.displayFlex.educateInvestigation .flexItem.educate .subHeading{
	 color: #4fcadc;
	 border-top: 1px solid #4fcadc;
}
.displayFlex.educateInvestigation .flexItem.investigate{
	background: #4fcadc;
	background-image: url('https://workplace-investigation.com/wp-content/uploads/purpleAmpersand.png');
	background-position: left;
	background-repeat: no-repeat;
	background-size: 140px;
	padding-left: 162px;
}
.displayFlex.educateInvestigation .flexItem.investigate .subHeading{
	color: #2d2665;
	 border-top: 1px solid #2d2665;
	font-weight: bold;
}
.displayFlex.educateInvestigation .flexItem h2{
	color: white;
	font-size: 55px;
	padding-bottom: 38px;
	padding-top: 0px;
	margin: 0;
	line-height: 51px;
}
.displayFlex.educateInvestigation .flexItem .buttonWrapper{
	text-align: center;
}
.displayFlex.educateInvestigation .flexItem.educate h2{
	color: #4fcadc;
}

	@media (min-width: 1380px){
		.displayFlex.educateInvestigation .flexItem.educate p.minimumHeight{
			min-height: 142px;
		}
	}

	@media (min-width: 1336px) and (max-width: 1379px){
		.displayFlex.educateInvestigation .flexItem.educate p.minimumHeight{
			min-height: 192px;
		}
	}

	@media (min-width: 1025px) and max-width: 1335px){
			.displayFlex.educateInvestigation .flexItem.educate p.minimumHeight{
				min-height: 192px;
			}
		}

	@media (min-width: 1023px) and (max-width: 1024px){
			.displayFlex.educateInvestigation .flexItem.investigate p.minimumHeight{
				min-height: 126px;
			}
		}

.displayFlex.educateInvestigation .flexItem.investigate h2{
	color: #2d2665;
}
.displayFlex.educateInvestigation .flexItem.investigate p{
	padding-top: 0px;
}
.displayFlex.educateInvestigation .flexItem.investigate p.purple{
	color: #2d2665;
	font-weight: bold;
	padding-bottom: 0px;
	margin-bottom: -6px;
}
.displayFlex.educateInvestigation .flexItem.investigate ul{
	margin-top: -20px;
	padding-top: 0px;
}

	@media (max-width: 1023px){
		.displayFlex.educateInvestigation{
			flex-direction: column;
		}
		.displayFlex.educateInvestigation .flexItem.educate{
			background-position: center bottom;
			padding-right: inherit;
			padding: 5% 5% 100px 5%;
			background-image: url('https://workplace-investigation.com/wp-content/uploads/mobileAmpersandTop.png');
			background-size: 180px;
		}
		.displayFlex.educateInvestigation .flexItem.investigate{
			background-position: center top;
			padding: 100px 5% 5% 5%;
			background-image: url('https://workplace-investigation.com/wp-content/uploads/mobileAmpersandBottom.png');
			background-size: 180px;
		}
	}

.employersOnlyWrapper{
	background: black;
	color: white;
	text-align:center;
}
.displayFlex.hpServices .flexItem{
	flex: 1;
	padding: 0 20px;
	text-align: center;
	box-sizing: border-box;
	margin-top: 20px;
}

	@media (max-width: 1023px){
		.displayFlex.hpServices .flexItem{
			flex-basis: 50%;
			}
	}

	@media (max-width:550px){
		.displayFlex.hpServices .flexItem{
			flex-basis: 100%;
			}
	}

.displayFlex.hpServices .flexItem h3{
	padding: 0px;
    background: #18b9d1;
    color: white;
    font-weight: 100;
}
.displayFlex.hpServices .flexItem img.alignnone{
	margin: unset;
	display: block;
	width: 100%;
	height: auto;
}

/*HOMEPAGE STYLES END*/

/*INSIDE PAGE STYLES BEGIN*/
h1.pageTitle{
	background: url('https://workplace-investigation.com/wp-content/uploads/pageTitleBackground.png');
	background-repeat: no-repeat;
	background-position: center;
	color: white;
	font-size: 50px;
	font-weight: 100;
	text-align: center;
	padding: 3%;
}

	@media (max-width: 1023px){
		h1.pageTitle{
			font-size: 26px;
			line-height: 31px;
		}
	}

/*real world examples styles begin found on "Our Purpose" and on "Real World Examples" pages*/

.displayFlex.realWorldExamples p{
	color: white;
	padding-left: 20px;
	padding-right: 20px;
	font-style: italic;
}
.displayFlex.realWorldExamples p:nth-of-type(even){
	background: #18b9d1;
}
.displayFlex.realWorldExamples p:nth-of-type(odd){
	background: #2d2665;
}

/*real world examples styles begin found on "Our Purpose" and on "Real World Examples" pages*/

/*INSIDE PAGE > Professional Services pages styles begin*/

.displayFlex.mainServicesDivisions .flexItem{
	flex-basis: 33%;
	margin-bottom: 30px;
	padding: 0 15px;
	box-sizing: border-box;
}

	@media (max-width: 1023px){
		.displayFlex.mainServicesDivisions .flexItem{
			flex-basis: 50%;
		}
	}

	@media (max-width: 1023px){
		.displayFlex.mainServicesDivisions .flexItem{
			flex-basis: 100%;
		}
	}

.displayFlex.mainServicesDivisions .flexItem h2{
	font-size: 18px;
    background: #18b9d1;
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
}
.displayFlex.mainServicesDivisions .flexItem img{
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}
.displayFlex.mainServicesDivisions .flexItem .buttonWrapper {
	text-align: center;
}
.displayFlex.mainServicesDivisions .flexItem .buttonWrapper a{
	margin-top: unset;
	display: block;
	border-radius: unset;
}
.displayFlex.mainServicesDivisions .flexItem .buttonWrapper a:hover:before{
   	border-radius: unset;
}

/*INSIDE PAGE > Professional Services pages styles end*/

/*INSIDE PAGE > method courses and workshops page styles begin*/

.forCourses{
	margin-top: 0px;
	margin-bottom: 0px;
}
ul.forCourses{
	padding-left: 25px;
}
blockquote.forCourses p{
	padding: 0px;
}

/*INSIDE PAGE > method courses and workshops page styles end*/

/*INSIDE PAGE > Resource Center page styles begin*/

.displayFlex.mainPostDivisions .flexItem{
	flex-basis: 33%;
	margin-bottom: 30px;
	padding: 0 15px;
	box-sizing: border-box;
}

	@media (max-width: 1023px){
		.displayFlex.mainPostDivisions .flexItem{
			flex-basis: 50%;
		}
	}

	@media (max-width: 1023px){
		.displayFlex.mainPostDivisions .flexItem{
			flex-basis: 100%;
		}
	}

.displayFlex.mainPostDivisions .flexItem h2{
	font-size: 18px;
    background: #18b9d1;
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
}
.displayFlex.mainPostDivisions .flexItem img{
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}
.displayFlex.mainPostDivisions .flexItem .buttonWrapper {
	text-align: center;
}
.displayFlex.mainPostDivisions .flexItem .buttonWrapper a{
	margin-top: unset;
	display: block;
	border-radius: unset;
}
.displayFlex.mainPostDivisions .flexItem .buttonWrapper a:hover:before{
   	border-radius: unset;
}

/*INSIDE PAGE > Resource Center page styles end*/

/*INSIDE PAGE > contact page styles begin*/

.hello{
	font-size: 190px;
	color: #2d2665;
	text-align: center;
}
.hello img{
	margin: unset;
	vertical-align: -7px;
	margin-left: -14px;
}
.helloText{
	font-weight: bold;
	text-align: center;
}
.displayFlex.contactInfoWrapper .flexItem:first-of-type{
	font-size: 24px;
}
.displayFlex.contactInfoWrapper .contactCompany{
	font-size: larger; 
	font-weight: bold; 
	color: #2d2665;
}
body.contact-us .slideOutFromRightTrigger, body.contact-us .slideOutFromRightWrapper{
	display: none;
	/*don't display pull-out form on contact page as contact form is already on this page*/
}

/*INSIDE PAGE > contact page styles begin*/

/*INSIDE PAGE STYLES END*/

/*BLOG STYLES BEGIN. NOTE THERE ARE 2 BLOG MAIN PAGES ON THIS SITE*/

/* GENERAL "BLOG" PAGE STYLES BEGIN (NOT FOR RESOURCES BLOG)*/

body.blog article{
	padding: 40px;
}
body.blog article ul.alignwide{
	max-width: 800px;
	margin: auto;
}
body.blog article ul.alignwide li{
	margin-bottom: 40px;
}
body.blog article ul.alignwide a:not(.moretag){
	font-size: 30px;
	line-height: 33px;
}

/* GENERAL "BLOG" PAGE STYLES END (NOT FOR RESOURCES BLOG)*/


/* BLOG STYLES > resource center and single post blog styles begin*/

.blogWrapper article{
	/*effects single blog pages that don't have displayFlex on them*/
	border-bottom: 2px solid #959191;
	margin-bottom: 50px;
 }
.displayFlex.blogWrapper main.flexItem{
	flex: 1;
	padding-right: 40px;
}
.displayFlex.blogWrapper main.flexItem article.blogFixedWidth h2{
	padding-top: 0px;
}
.displayFlex.blogWrapper main.flexItem img{
	max-width: 100%;
	height: auto;
	display: block;
}
.displayFlex.blogWrapper main.flexItem img.alignright, .displayFlex.blogWrapper main.flexIte img.alignleft{
	/*remove align left and right float styles for blog excerpts as it screws up the layout*/
	float: none;
	margin: auto;
	margin-bottom: 30px;
} 

	@media (max-width: 767px){
		.displayFlex.blogWrapper{
			flex-direction: column;
		}
	}

.displayFlex.blogWrapper main.flexItem h1.singlePostTitle{
	color: #2bbfd5;
	padding-bottom: 0px;
}
/*BLOG STYLES > styles for pagination at bottom of posts main page begin*/

nav.pagination{
	text-align: center;
    padding: 30px;
	font-size: 22px;
}
nav.pagination .page-numbers{
	padding: 3px 10px 3px 10px;
	border: 1px solid #959393;
	border-radius: 4px;
	display: inline-block;
	min-width: 20px;
}
nav.pagination .page-numbers.current{
	background: #a7a6a6;
    color: white;
}

/*BLOG STYLES > styles for pagination at bottom of posts main page end*/

/*BLOG STYLES > styles for previous/next post navigation NOT pagination begin*/

.previousPost{
    display: inline-block;
	padding-right: 30px;
}
.nextPost{
	display: inline-block
}

/*BLOG STYLES > styles for previous/next post navigation NOT pagination end*/


/*BLOG STYLES > sidebar styles begin*/

.displayFlex.blogWrapper .flexItem.sidebar{
	flex: 0 1 313px;
}
.blogWrapper.displayFlex .flexItem.sidebar h3{
	font-weight: normal;
}
.displayFlex.sidebarRecentPosts{
	margin-bottom: 25px;
}
.displayFlex.sidebarRecentPosts .flexItem.sidebarRecentPostsThumbnail img{
	min-width: 150px;
}
.displayFlex.sidebarRecentPosts .flexItem.sidebarRecentPostsTextContent{
	padding-left: 20px;
}

/*BLOG STYLES > sidebar styles end*/
.archive h2{
	/*fixes picture floating issues in posts*/
	clear: both;
	padding-top: 50px;
}

/*BLOG STYLES >secondary blog excerpt page styles begin*/

/*>secondary blog excerpt expand collapse element styles begin (JS for this in js/scripts.js file*/
h2.trigger.displayFlex{
	cursor: pointer;
	position: relative;
	background: #18b9d1;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 30px;
	color: whitesmoke;
	transition: .4s color;
	font-size: 30px;
}

	@media (max-width: 1023px){
		h2.trigger.displayFlex{
			font-size: 24px;
		}
	}

h2.trigger.displayFlex:hover, h2.trigger.displayFlex:hover svg.arrow{
	color: #dddbdb;
	fill: #dddbdb;
}
h2.trigger.displayFlex svg.arrow{
	position: relative;
	width: 40px;
	height: auto;
	fill: #ffffff;
	transform: rotate(270deg);
	transition: transform .4s, fill .4s;
	transform-origin: center;
}
h2.trigger.active.displayFlex svg.arrow{
	transform: rotate(360deg);
}
.elementToSlideUpDown {
	display:none;
}
#defaultedSlidDown.elementToSlideUpDown{
	display: block;
}

/*>secondary blog excerpt expand collapse element styles end*/

.displayFlex.secondaryPostsExcerptWrapper .flexItem{
	flex-basis: 33%;
	padding: 30px 15px;
	box-sizing: border-box;
}

@media (max-width: 1023px){
	.displayFlex.secondaryPostsExcerptWrapper .flexItem{
		flex-basis: 50%;
	}
}

@media (max-width: 600px){
	.displayFlex.secondaryPostsExcerptWrapper .flexItem{
		flex-basis: 100%;
	}
}

.displayFlex.secondaryPostsExcerptWrapper .flexItem h3{
	background: #2d2665;
    font-weight: normal;
    text-transform: uppercase;
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
	color: whitesmoke;
	min-height: 58px;
}

.displayFlex.secondaryPostsExcerptWrapper .flexItem img{
	width: 100%;
	height: auto;
	display: block;
}

	@media (min-width: 1200px){
	.displayFlex.secondaryPostsExcerptWrapper .flexItem .excerptWrapper{
		min-height: 150px;
	}
	}

.displayFlex.secondaryPostsExcerptWrapper .flexItem .buttonWrapper a{
	display: block;
}

/*BLOG STYLES >secondary blog excerpt page styles end*/

/* BLOG STYLES > resource center and single post blog styles end*/

/*BLOG STYLES END*/

/*FOOTER STYLES BEGIN*/
.newsletterSignUpWrapper{
	background: #2d2665;
	padding-top: 15px;
	padding-bottom: 15px;
	box-shadow: inset 0px 0px 18px 1px #1c1c1c;
}
.newsletterSignUpWrapper h3{
	color: whitesmoke;
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
   font-weight: 100;
    font-size: 25px;
	padding-bottom: 0px;
}
.newsletterSignUpWrapper h5{
	text-align: center;
	color: whitesmoke;
	padding-top: 0px;
	text-transform: uppercase;
	font-weight: normal;
	position: relative;
}
.newsletterSignUpWrapper h5:after{
	content: '';
	border-top: 1px solid white;
	position: absolute;
	height: 3px;
}
.newsletterSignUpWrapper .wpcf7-spinner{
	display: none;
}
.wpcf7 form .wpcf7-response-output{
	color: white;
}
.newsletterSignUpWrapper form{
	max-width: unset;
	border: unset;
	padding: unset;
	border-radius: unset;
	background: unset;
}
.newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem{
	padding: 0 15px;
	margin-top: unset;
}
.newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem.submit{
	flex-basis: 150px;
}
.newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem input[type="text"], .newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem input[type="email"]{
	border-bottom: unset;
	background: #cfcdcd;
	color: #252525;
}

.newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem input[type="submit"] {
	padding: 6px;
	margin-top: 19.5%;
	text-transform: uppercase;
	background: unset;
	border: 1px solid white;
	border-radius: 2px;
	font-size: 16px;
}
.newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem input[type="submit"]:hover{
	background: #18b9d1;
}

	@media (max-width: 767px){
		.newsletterSignUpWrapper .displayFlex.newsletterForm{
			flex-direction: column;
		}
		.newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem.submit{
			flex-basis: unset;
		}
		.newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem{
			margin-top: -15px;
			padding: unset;
		}
		.newsletterSignUpWrapper .displayFlex.newsletterForm .flexItem input[type="submit"]{
			margin-top: 30px;
		}
	}

.footer {
	background: rgb(51, 50, 53);
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
}
.footer .fixedWidth.displayFlex .flexItem a {
	color: white;
}
.footer .fixedWidth.displayFlex .flexItem a:hover {
	color:  #cccece;
}

.footer .fixedWidth.displayFlex .flexItem.footerLogo img.footerLogoImage{
	max-width: 300px;
	filter: grayscale(1) brightness(4);
}

	@media (max-width: 450px){
		.footer .fixedWidth.displayFlex .flexItem.footerLogo img.footerLogoImage{
			max-width: 80%;
		}
	}

.footer .fixedWidth.displayFlex .flexItem.footerBorder{
	border-left: 1px solid #4fcadc;
	height: 145px;
}

	@media (max-width: 850px){
		.footer .fixedWidth.displayFlex .flexItem.footerBorder{
			border-left: unset;
			height: unset;
			width: 145px;
			border-top: 1px solid #4fcadc;
		}
	}

.footer .fixedWidth.displayFlex .flexItem.footerSocialIcons svg{
	height: 23px;
	width: 23px;
	padding-right: 16px;
	fill: #49497e;
	transition: .4s fill;
}
.footer .fixedWidth.displayFlex .flexItem.footerSocialIcons svg:hover{
	fill:  #cccece;
	transition: .4s fill;
}

.copyriteWrap{
	font-size: 10px;
	padding: 8px;
	color: white;
	background: #18b9d1;
}

	@media screen and (max-width: 850px){
		.footer{
			text-align: center;
		}
		.footer .fixedWidth.displayFlex{
			flex-direction: column;
		}
		.footer .fixedWidth.displayFlex .flexItem.footerLogo{
			margin: 15px auto;
		}
	}

/*FOOTER STYLES END*/