* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/***Bootstrap overwrite***/
/*** @fix this seems to remedy the issu with additional pixels to the right of the screen. **/
.row {
	margin-right: 0;
	margin-left: 0;
}

/****End Bootstrap overwrite***/

.hidden {
	display: none;
}

.background-image {
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
}

.fixed-background {
	background-attachment: fixed;
	background-size: cover;
}

.repeat-background {
	background-repeat: repeat;
}

.circle {
	border-radius: 50% 50%;
}

.youtube-video-iframe {
	width: 100%;
	min-height: 320px;
}

.middle-text {
	vertical-align: middle;
}

.dark-transparent-overlay {
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: #000;
	opacity: 0.4;
}

.spacer {
	height: 20px;
}

/* WPO Row container rules */
.wpo-row-container {
	padding: 20px 18px;
}

.wpo-mobile-menu-button{
	background: #fff;
    border-radius: 5px;
}

.alignleft, .wpo-image-left {
	float: left;
}

.alignright, .wpo-image-right {
	float: right;
}

.aligncenter, .wpo-image-center {
	margin-left: auto;
    margin-right: auto;
    display: table;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px){ 
	.wpo-row-container{ 
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%;
			margin-right: auto;
			margin-left: auto;
	}


}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px)  and (max-width: 991.98px){ 
	.wpo-row-container{ 
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
		margin-right: auto;
		margin-left: auto;
	} 
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px){ 
	.wpo-row-container{ 
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
		margin-right: auto;
		margin-left: auto;
	}

	#wpo-menu-toggle-button {

		display: none;
	}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
	.wpo-row-container{
		-ms-flex: 0 0 66.666667%;
	  	flex: 0 0 66.666667%;
	  	max-width: 66.666667%;
		margin-right: auto;
		margin-left: auto;
	} 

	#wpo-menu-toggle-button {

		display: none;
	}
}


/* Menu scripts @todo - move to module script */
#wpo-menu-toggle-button {
	float: right;
	cursor: pointer;
	padding: 10px;
}

.wpo-nav-menu .sub-menu .sub-menu{
	display: none;
}

.wpo-nav-menu > .menu-item {
	position: relative;
	display: inline-block;
	margin-left: 15px;
}

.wpo-nav-menu .sub-menu {
	min-width: 200px;
	position: absolute;
	z-index: 100;
	display: none;
	background-color: #FFFFFF;
}

.wpo-nav-menu .menu-item-has-children:hover > .sub-menu {
	display: block;
}

.sub-menu .sub-menu-item {
	padding: 5px;
	display: block;
	min-width: 200px;
}

.sub-menu .sub-menu-item:hover {
	background-color: #F5F5F5;
}





























/* Small devices (landscape phones, 576px and up)*/
@media /*(min-width: 576px) and */(max-width: 767.98px){ 
	.wpo-nav-menu{
		display: none;
		margin: 0;
		margin-top: 10px;
		padding: 5px;
		float: left;
		text-align: left;
	} 

	#wpo-menu-toggle-button {
		display: inline-block;
	}

	.wpo-nav-menu .menu-item {
		display: block;
		margin-top: 5px;
		text-align: left;
	}

	.wpo-show-mobile-menu {
		display: block;
	}

	.menu-button-container-column .img-fluid {
		max-width: 90%;
	}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px)  and (max-width: 991.98px){ 
	.wpo-nav-menu{
		display: none;
		margin: 0;
		margin-top: 10px;
		padding: 5px;
		float: left;

	} 

	#wpo-menu-toggle-button {
		display: inline-block;
	}

	.wpo-nav-menu .menu-item {
		display: block;
		margin-top: 5px;
		text-align: left;
	}

	.wpo-show-mobile-menu {
		display: block;
	}

	.menu-button-container-column .img-fluid {
		max-width: 72%;
	}
}

.bar-strip{
    width: 28px;
    height: 4px;
    background-color: black;
    margin: 6px 0;
}