/* ************************** HOME PAGE FEATURE ************************** */

.front-page .feature { height: 727px; }

	/* see chr-slider.css for the rest */

/* ************************** HOME PAGE CONTENT ************************** */

.front-page #content { margin-top: 35px; margin-bottom: 0; }

.frontpage_slideshow.chr_slider .title{ 
	font-size: 70px;
	line-height: 75px; 
}

	.featured_pages { margin: 35px 0 !important; text-align: center; }
		.featured_page { width: 25%; float: left; }
			.featured_page a{ color: #404040; }
			 .featured_page a h5{ font-size: 15.5px;}
			 .featured_page a:hover{ text-decoration: none;}
			.featured_page .link { text-decoration: none; display: block; opacity: 1; padding: 0 5px; }
				.featured_page .title { margin-bottom: 15px; }
				.featured_page img { }
				.featured_page .excerpt { padding: 0 5px; }
				
				.featured_pages:hover .link { opacity: .5; }
					.featured_pages:hover .link:hover { opacity: 1; }
			
	.content_section { }
		.content_section .section_background { overflow: hidden; }
			.content_section .section_content { padding: 60px 0 40px 0; box-sizing: border-box; }
				.content_section .title { margin-bottom: 20px; }
				.content_section .content { }
					.content_section .content p { letter-spacing: 1px; line-height: 1.8em; }
				.content_section ul.icons { margin: 40px -2%; text-align: center; }
					.content_section ul.icons li { float: left; margin: 2.5% 2%; width: 20%; cursor: default; }
						.content_section ul.icons li:nth-child(4n+1) { clear: left; }
						.content_section ul.icons .link { }
						
						.content_section ul.icons .image {
							/*-webkit-transform: rotate3d(0,1,0,0deg);
							-moz-transform: rotate3d(0,1,0,0deg);
							-ms-transform: rotate3d(0,1,0,0deg);
							-o-transform: rotate3d(0,1,0,0deg);
							transform: rotate3d(0,1,0,0deg);
						}
						
							.content_section ul.icons li:hover .image {
								-webkit-transform: rotate3d(0,1,0,180deg);
								-moz-transform: rotate3d(0,1,0,180deg);
								-ms-transform: rotate3d(0,1,0,180deg);
								-o-transform: rotate3d(0,1,0,180deg);
								transform: rotate3d(0,1,0,180deg);*/
							}
						
						.content_section ul.icons .label { }
						
			.content_section .feature_image {
				display: block; /* important removed for responsive */
				position: absolute;
				top: -50px;
				right: -30px;
				width: 322px;
				height: 322px;
				
			}
				
				.mod-no-svgclippaths .content_section .feature_image,
				.Explorer .content_section .feature_image { display: none; } /* important removed for responsive */
			
				.content_section .feature_image .magnify_overlay {
					border: 1px solid rgba(0,0,0,0.1);
					border-radius: 50%;
					position: absolute;
					top: 3%;
					left: 3%;
					width: 93%;
					height: 93%;
					box-shadow: 0px 0px 11px 6px rgba(0,0,0,.3);
				}
				
				.content_section .feature_image .feature {
				
					/*
						see http://caniuse.com/#feat=css-clip-path for latest clip-path support
						- as of writing, no support in IE at all, not even listed at https://status.modern.ie/
						- chrome uses -webkit-clip-path with an inline shape (also supports #anchor for inline but not external)
						- firefox only supports url(#anchor) (both inline and external)
						- safari uses -webkit-mask with an external url
						- use clip-path & mask for future compatibility
						and, be careful in chrome if combining backface-visibility, 3D transforms and clip-paths
					*/
					
					/* see also https://css-tricks.com/clipping-masking-css/ & https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath */
					
					-webkit-clip-path: circle(44.5% at center); /* Chrome */
					clip-path: circle(44.5% at center); /* FUTURE COMPAT */
					clip-path: url(clip-circle.svg#svgClip); /* Firefox*/
					/*-webkit-mask: url(clip-circle.svg); Brekas in Chrome (no longer required)*/
					mask: url(clip-circle.svg); /* FUTURE COMPAT */
					background-position: 0 0;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%; /* 750px for firefox? */
					background-size: cover;
					background-repeat: repeat;
				}
				
			.content_section .backup_feature_image {
				display: none; /* important removed for responsive */
				position: absolute;
				top: -50px;
				right: -30px;
				width: 322px;
				height: 322px; 
			}
			
				.content_section .backup_feature_image .feature { width: 100%; height: 100%; background-size: cover; }
				
				.mod-no-svgclippaths .content_section .backup_feature_image,
				.Explorer .content_section .backup_feature_image { display: block; } /* important removed for responsive */
		

/* ******************** The end, thanks for visiting! ******************* */