/*
	(c)2018 - visuallizard.com

	General Layout Styles.
	Sets major blocking to elements that appear accross the site in different templates.
	All can be removed and started from scratch or elemnts can be adjusted individually.
*/

body .grid {
	display: block;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;

}

.container {
/*
	Set site maximum width only here and use this class to centre the content in browser window.
	Use "max-width" instead of "width" for auto-responsivness.
*/
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.full-bleed {
/* 	alternative to .full-width - https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/ */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}



#announcement {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	background: #ffcc00;
	background: #000;
}
	#announcement h2 {
		margin: 0 0 0.25em 0;
		font-size: 30px;
		color: #000;
		color: #fff;
	}
	#announcement p {
		font-size: 20px;
		margin: 0;
		color: #fff;
	}



#secondary-nav {
	display: block;
	position: relative;
	width: 100%;
	padding: 15px 0;
	margin: 0;
	background: #f4f4f4;
}
	ul.second-nav {
		display: flex;
		position: relative;
		justify-content: flex-end;
		float: right;
		width: 30%;
		padding: 0;
		margin: 0;

		font-size: 14px;
		font-weight: 600;
		list-style: none;
	}
		ul.second-nav li {
			display: block;
			position: relative;
			flex-grow: 1;
			flex-basis: 15%;
			max-width: 23.5%;
			margin: 0 0 0 10px
		}
		ul.second-nav li:first-of-type { margin: 0; }
		ul.second-nav li a.nav-link {
			display: block;
			position: relative;
			padding: 0.65em 0.5em;
			text-align: center;
			text-transform: uppercase;
		}
		ul.second-nav li#second-51 a.nav-link {
			border-radius: 30px;
			background: #fff;
		}



.site-header {
	z-index: 20;
	padding: 0;
	background: none;
}
.site-header > .container {
	padding: 1em 0;
}

.site-title {
	display: block;
	position: relative;
	float: left;
	width: 150px;
	height: 80px;
	padding: 0;
	margin: 0;
	background: url("../png/logo-header-rehfit.png") no-repeat left center;
	background-size: contain;
}
	.site-title > a {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 0;
		margin: 0;
		text-decoration: none;
		text-indent: -999em;
		color: inherit;
		font-weight: 800;
		font-size: 30px;
		line-height: 1;
	}


/* Search Form */
.search-form {
	float: right;
	display: inline-flex;
	margin: .5em 0;
}
	.search-input {

	}
	.search-button {
		border-radius: 0;
	}



/* ! NAVIGATIONS  */
/* General for all levels and navs: */
.nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-item {
	position: relative;
	display: inline-block;
	display: block;
	vertical-align: top;
}
.nav-link {
	display: block;
	padding: .5em 1em;
	color: inherit;
	text-decoration: none;

	line-height: 1.25;
}
.nav-link:hover {
	color: #c8201e;
}
.nav-item[data-nav-status='has-active'] > .nav-link {
    color: #c8201e;
}
.nav-item[data-nav-status='active'] > .nav-link {
    color: #c8201e;
}

	/* 	Main nav specific (opinionated) */
	.main-nav {
		float: left;
		max-width: 85%;
		padding: 1.25em 0 1em 1em;
	}

	/* Level 1 (horizontal) */
	.main-nav .nav-1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 16px;
		font-weight: 600;
	}
	.main-nav .nav-1 > li {

	}
	.main-nav .nav-1 > li#navigation-1-30,
	.main-nav .nav-1 > li#navigation-1-33,
	.main-nav .nav-1 > li#navigation-1-58,
	.main-nav .nav-1 > li#navigation-4-30,
	.main-nav .nav-1 > li#navigation-4-33,
	.main-nav .nav-1 > li#navigation-4-58,
	.main-nav .nav-1 > li#navigation-5-30,
	.main-nav .nav-1 > li#navigation-5-33,
	.main-nav .nav-1 > li#navigation-5-58 { display: none; }

	.main-nav .nav-1 > li > a {
		text-align: center;
	}

	/* all sub-lists (drop-downs & drop-sides) */
	.main-nav .sub-list {
		display: block;
		position: absolute;
		top: 0;
		left: auto;
		width: 240px;
		margin: 0;
		padding: 0;

		background-color: #fff;
		border: 1px solid rgba(0,0,0,0.2);
		border-radius: 10px;
		box-shadow: 0 3px 10px rgba(0,0,0,0.2);
		transition: all 0.2s ease;
		z-index: 1000;
	}
	.main-nav li              > .sub-list { visibility: hidden;  opacity: 0; }
	.main-nav li:hover        > .sub-list { visibility: visible; opacity: 1; }
	.main-nav li:focus-within > .sub-list { visibility: visible; opacity: 1; }

	.main-nav .sub-list .sub-list { left: 100%; }

	.main-nav :nth-last-child(1) > .nav-2,
	.main-nav :nth-last-child(2) > .nav-2 { right: 0; left: auto; }

	.main-nav :nth-last-child(1) > .nav-2 .nav-list,
	.main-nav :nth-last-child(2) > .nav-2 .nav-list { right: 100%; left: auto; }

	.main-nav :nth-last-child(1) > .nav-2 .has-sub > .nav-link::after,
	.main-nav :nth-last-child(2) > .nav-2 .has-sub > .nav-link::after {  }



	/* Level 2 (the only drop-down ) */
	.main-nav .nav-2 {
		top: 100%;
	}


	.main-nav .nav-2 > li {
		padding: 0 1em;
	}
	.main-nav .nav-2 > li > a {

	}
	/* .main-nav .nav-2 > li#navigation-1-29 > a,
	.main-nav .nav-2 > li#navigation-1-55 > a,
	.main-nav .nav-2 > li#navigation-1-70 > a,
	.main-nav .nav-2 > li#navigation-1-75 > a,
	.main-nav .nav-2 > li#navigation-1-78 > a,
	.main-nav .nav-2 > li#navigation-4-29 > a,
	.main-nav .nav-2 > li#navigation-4-55 > a,
	.main-nav .nav-2 > li#navigation-4-70 > a,
	.main-nav .nav-2 > li#navigation-4-75 > a,
	.main-nav .nav-2 > li#navigation-4-78 > a,
	.main-nav .nav-2 > li#navigation-5-29 > a,
	.main-nav .nav-2 > li#navigation-5-55 > a,
	.main-nav .nav-2 > li#navigation-5-70 > a,
	.main-nav .nav-2 > li#navigation-5-75 > a,
	.main-nav .nav-2 > li#navigation-5-78 > a {
		padding: 1em 0;
		margin-top: 5px;
		border-top: 1px solid #c8102e;
		text-transform: uppercase;
		color: #c8102e;
	} */
	.main-nav .nav-2 > li > a.nav-link {
		padding: 0.5em 0;
	}

	/* Level 3, etc. */
	.main-nav .nav-3 {

	}
	.main-nav .nav-3 > li {

	}
	.main-nav .nav-3 > li > a {

	}


	/* Has-subs Chevron indicators */
	.main-nav .has-sub > .nav-link {
		padding-right: 1.5em;
	}
	.main-nav .has-sub > .nav-link:after {
		content: " ";
		display: block;
		position: absolute;
		top: 0;
		right: -5px;
		bottom: 0;
		width: 1.5em;
		height: 1.5em;
		margin: auto;
		background: url("../png/chevron.png") no-repeat center center;
		background-size: 100%;
		color: #c8102e;
		transition: all 0.2s ease;
	}
	.main-nav .nav-1 > .has-sub:hover > .nav-link:after {
		transform: rotateX(180deg);
	}



/* 	! SECTIONS	*/
main {

}
	main > .container {
		padding: 2em 0;
	}
	main.home > .container,
	main.promises > .container { padding: 0; }
	.primary {
        display: block;
        position: relative;
        flex: 0 0 68%;
		max-width: 68%;
		padding: 0;
	}
	.sidebar {
        display: block;
        position: relative;
        flex: 0 0 30%;
		max-width: 30%;
		padding: 0 0 0 2rem;
		border-left: 1px solid #777;
	}
	main.contact > .container .primary {
		float: left;
		width: 35%;
		padding: 0 2% 0 0;
	}
	main.contact > .container .sidebar {
		float: right;
		width: 65%;
		padding: 0 0 0 2%;
		border: none;
	}


	.home-block,
	.promise {
		display: block;
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0;
		overflow-x: hidden;
	}
	#introduction {
		display: block;
		position: relative;
		width: 100%;
		padding: 0 0 30px 0;
		margin: 0;
	}
	.services {
		display: block;
		position: relative;
		width: 100%;
		padding: 30px 0;
		margin: 0;
	}
	.home-block#news-events {
		min-height: 300px;
		border: none;
		background: #f4f4f4;
	}
		.home-block .container,
		.promise .container,
		#introduction .container {
			display: block;
			position: relative;
		}
		.home-block .container .small-left,
		.promise .container .small-left,
		#introduction .container .small-left {
			display: block;
			position: relative;
			width: 40%;
			min-height: 480px;
			padding: 30px 0;
			margin: 0;
		}
		#introduction .container .small-left {
			padding: 30px 0;
		}
		.home-block .container .small-right,
		.promise .container .small-right {
			display: block;
			position: relative;
			width: 40%;
			min-height: 480px;
			padding: 30px 0;
			margin: 0 0 0 60%;
		}
		.home-block div.skew-image-right,
		.promise div.skew-image-right,
		#introduction div.skew-image-right {
			display: block;
			position: absolute;
			z-index: 1;
			top: 0;
			right: -120px;
			width: 60%;
			min-height: 480px;
			border-radius: 30px;
			transform: skewX(-15deg);
			overflow: hidden;
		}
			.home-block div.skew-image-right div.image-container,
			.promise div.skew-image-right div.image-container,
			#introduction div.skew-image-right div.image-container {
				display: block;
				position: absolute;
				top: 0;
				left: 50%;
				width: 1200px;
				height: 500px;
				padding: 0;
				margin: 0 0 0 -650px;
				text-align: center;
				background: #f2f2f2;
				color: red;
				transform: skewX(15deg);
			}
				#promotion div.skew-image-right div.image-container div.banner a.video:before,
				#introduction div.skew-image-right div.image-container div.banner a.video:before {
					content: "";
					display: block;
					position: absolute;
					z-index: 1;
					top: 45%;
					left: 50%;
					width: 70px;
					height: 50px;
					padding: 0;
					margin: -25px 0 0 -35px;
					border-radius: 10px;
					background: rgba(0,0,0,0.6);
					transition: all 0.2s ease;
				}
				#promotion div.skew-image-right div.image-container div.banner a.video:after,
				#introduction div.skew-image-right div.image-container div.banner a.video:after{
					content: "";
					display: block;
					position: absolute;
					z-index: 2;
					top: 45%;
					left: 50%;
					width: 0;
					height: 0;
					padding: 0;
					margin: -15px 0 0 -9px;
					border-top: 15px solid transparent;
					border-left: 25px solid rgba(255,255,255,0.9);
					border-bottom: 15px solid transparent;
					transition: all 0.2s ease;
				}
				#promotion div.skew-image-right div.image-container div.banner a.video:hover:before,
				#introduction div.skew-image-right div.image-container div.banner a.video:hover:before { background: rgba(255,255,255,1); }
				#promotion div.skew-image-right div.image-container div.banner a.video:hover:after,
				#introduction div.skew-image-right div.image-container div.banner a.video:hover:after { border-left: 25px solid rgba(0,0,0,0.7); }


				.home-block div.skew-image-right div.image-container img,
				.promise div.skew-image-right div.image-container img,
				#introduction div.skew-image-right div.image-container img {
					display: block;
				}

/*
				.home-block div.skew-image-right div.image-container div.cke > .c1,
				.promise div.skew-image-right div.image-container div.cke > .c1,
				#introduction div.skew-image-right div.image-container div.cke > .c1 {
					display: block;
					position: relative;
					width: 100%;
					padding: 0;
					margin: 0;
				}
*/
		.home-block div.skew-image-left,
		.promise div.skew-image-left {
			display: block;
			position: absolute;
			z-index: 1;
			top: 0;
			left: -120px;
			width: 60%;
			min-height: 480px;
			border-radius: 30px;
			transform: skewX(-15deg);
			overflow: hidden;
		}
			.home-block div.skew-image-left div.image-container,
			.promise div.skew-image-left div.image-container {
				display: block;
				position: absolute;
				top: 0;
				right: 50%;
				width: 1200px;
				height: 500px;
				padding: 0;
				margin: 0 -650px 0 0;
				text-align: center;
				background: #f2f2f2;
				transform: skewX(15deg);
			}
				.home-block div.skew-image-left div.image-container img,
				.promise div.skew-image-left div.image-container img {
					display: block;
				}


	/* ! Regions for Layout Module */
	.region-row {
		display: flex;
	}
		.region-cell {
			width: 100%;
			padding: 2rem 5%;
		}
		.region-cell:first-child {
			padding-left: 0;
		}
		.region-cell:last-child {
			padding-right: 0;
		}



/* ! Site Footer  */
.site-footer {
	position: relative;
	clear: both;
	padding: 1em 0;
	margin: 90px 0 0 0;
	background-color: #f4f4f4;
	color: #000;
}

/* ! Error Pages */
.error-header {
	font-size: 50px;
}
.error-code {
	font-size: 12px;
}