/*
#################################################################################################
# RESOURCES PAGE                                                                                #
# --------------				                                                                     #
# CREATED BY: Simon Edge                                                                        #
# DATE: 17/07/2019                                                                              #
# DESCRIPTION:                                                                                  #
# CSS code to display the 'Resources' page.                                                     #
#################################################################################################
*/

#resources_page {
	padding:0px 0px 30px !important;
}
#resources_page .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px !important;
}
#resources_page .et_pb_text_inner p {
	padding:0px !important;
}

/* ### RESOURCE PAGE - CATEGORY FILTER FOR GRID ### */
#res_cat_filter_wrapper {
	padding:60px 0px 20px;
	text-align:center;
	background: #00548B;
	background: -moz-linear-gradient(left, #00548B 0%, #38A4DC 100%);
	background: -webkit-linear-gradient(left, #00548B 0%,#38A4DC 100%);
	background: linear-gradient(to right, #00548B 0%,#38A4DC 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00548B', endColorstr='#38A4DC',GradientType=1 );
}
#res_cat_filter {
	display:inline-block;
}
#res_cat_filter a {
	display:block;
	float:left;
	margin:0px 30px;
	padding:0px;
	cursor:pointer;
}
#res_cat_filter a .res_filter_image {
	width:128px;
	height:128px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center top;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#res_cat_filter a .res_filter_image img {
	display:block;
	width:100%;
	height:100%;
	border-radius:10px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	opacity:1.0;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#res_cat_filter a.res_inactive .res_filter_image img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
}
#res_cat_filter a.res_active .res_filter_image img,
#res_cat_filter a:hover .res_filter_image img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	opacity:1.0;
}
#res_cat_filter a h4 {
	padding:10px 0px 0px;
	font-family:'Open Sans';
	font-weight:700;
	font-size:16px;
	line-height:22px;
	color:#ffffff;
	max-width:128px;
}
#res_view_all_button {
	display:block;
	float:none;
	clear:both;
	margin:5px auto 0px;
	padding:0px 10px;
	width:150px;
	text-align:center;
	font-weight:400;
	font-size:15px;
	line-height:30px;
	color:#60a9d0;
	font-style:italic;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#res_view_all_button:hover {
	color:#ffffff;
}
@media only screen and (max-width:980px) {
	#res_cat_filter a { margin:0px 20px; }
}
@media only screen and (max-width:767px) {
	#res_cat_filter_wrapper { padding:55px 0px 15px; }
	#res_cat_filter a { margin:0px 10px; }
	#res_cat_filter a .res_filter_image { width:110px; height:110px; }
	#res_cat_filter a h4 { font-size:14px; line-height:18px; max-width:110px; }
	#res_view_all_button { margin:0px auto;  font-size:14px; }
}
@media only screen and (max-width:599px) {
	#res_cat_filter a { margin:0px 5px; }
	#res_cat_filter a .res_filter_image { width:95px; height:95px; }
	#res_cat_filter a h4 { font-size:13px; line-height:18px; max-width:95px; }
}
@media only screen and (max-width:479px) {
	#res_cat_filter a { margin:0px 5px; }
	#res_cat_filter a .res_filter_image { width:80px; height:80px; }
	#res_cat_filter a h4 { font-size:13px; line-height:18px; max-width:80px; }
}

/* ### RESOURCE PAGE - SEARCH FORM ### */
#resources_page #res_search {
	padding:50px 0px 0px;
	text-align:center;
	vertical-align:top !important;
}
#resources_page #res_search input[type='text'] {
	vertical-align:top !important;
	width:300px !important;
	padding:0px 5px 0px 15px !important;
	font-weight:400 !important;
	font-size:14px !important;
	line-height:42px !important;
	color:#000000 !important;
	background-color:#f6f6f6 !important;
	border-style:none !important;
	border-top-left-radius:5px !important;
	border-bottom-left-radius:5px !important;
}
#resources_page #res_search input::-webkit-input-placeholder { color:#909090 !important; }
#resources_page #res_search input:-moz-placeholder { color:#909090 !important; }
#resources_page #res_search input::-moz-placeholder {  color:#909090 !important; }
#resources_page #res_search input:-ms-input-placeholder { color:#909090 !important; }
#resources_page #res_search input:-ms-input:-webkit-autofill,
#resources_page #res_search input:-ms-input:-webkit-autofill:hover,
#resources_page #res_search input:-ms-input:-webkit-autofill:focus
#resources_page #res_search input:-ms-input:-webkit-autofill {
	-webkit-box-shadow:0 0 0px 1000px #f6f6f6 inset !important;
	-webkit-text-fill-color:#000000 !important;
}
#resources_page #res_search button {
	vertical-align:top !important;
	padding:0px !important;
	width:42px !important;
	text-align:center !important;
	border-style:none !important;
	background-color:#60a9d0 !important;
	background-image:none !important;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	cursor:pointer !important;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#resources_page #res_search button:hover {
	background-color:#6c6c6c !important;
}
#resources_page #res_search button i {
	font-size:20px;
	line-height:42px;
	color:#ffffff;
}
@media only screen and (max-width:767px) {
	#resources_page #res_search input[type='text'] { width:250px !important; }
}

/* ### RESOURCE PAGE - MASONRY GRID ### */
#masonry_resources {
	width:100%;
	max-width:1140px;
	margin:0px auto;
	padding:50px 0px 0px;
	clear:both;
	float:none;
}
#masonry_resources .res_item {
	float:left;
	width:33.3333%;
	height:550px;
	overflow:hidden;
	padding:0px 1.6666% 0px;
}
#masonry_resources .resi_show {
	display:block;
}
#masonry_resources .resi_hide {
	display:none;
}
#masonry_resources .resi_wrap {
	padding:0px;
	border:solid 1px #f0f0f0;
	background-color:#ffffff;
}
@media only screen and (max-width:999px) {
	#masonry_resources .res_item { width:50%; height:560px; padding:0px 2.5% 0px; }
}
@media only screen and (max-width:849px) {
	#masonry_resources .res_item { height:550px; }
}
@media only screen and (max-width:799px) {
	#masonry_resources { padding:70px 0px 0px; }
	#masonry_resources .res_item { height:540px; }
}
@media only screen and (max-width:599px) {
	#masonry_resources { padding:60px 0px 0px; max-width:340px; }
	#masonry_resources .res_item { width:100%; height:auto; overflow:visible; margin:0px 0px 50px; }
}
/* image and image hover overlay (image link, post date, social share icons) */
#masonry_resources .resi_wrap .res_imgw {
	position:relative;
}
#masonry_resources .resi_wrap .res_imgw img {
	position:absolute;
	top:0px;
	left:0px;
	display:block !important;
	width:100% !important;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#808080;
	cursor:pointer;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap .res_imgw:hover .res_imgo {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity:0.9;
	opacity:0.9;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo .res_imgl {
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:90px;
	text-align:center;
	padding:12px 0px;
	border:solid 2px #ffffff;
	border-radius:7px;
	background-color:transparent;
	font-weight:700;
	font-size:12px;
	line-height:12px;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo .res_imgl i {
	font-size:32px;
	line-height:100%;
	color:#ffffff;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo .res_imgl:hover {
	background-color:#ffffff;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo .res_imgl1:hover i {
	color:#1da940 !important;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo .res_imgl2:hover i {
	color:#5da8d2 !important;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo .res_imgl3:hover i {
	color:#fec200 !important;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo .res_imgl4:hover i {
	color:#7f54d1 !important;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo > a {
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:auto;
	padding:10px 15px;
	border:solid 1px rgba(255,255,255,0.5);
	background-color:rgba(0,0,0,0);
	color:#ffffff;
	font-weight:700;
	font-size:12px;
	line-height:12px;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap .res_imgw .res_imgo > a:hover {
	background-color:rgba(0,0,0,0.2);
}
/* category links */
#masonry_resources .resi_wrap .res_cats {
	position:relative;
	bottom:auto;
	display:block;
	padding:20px 0px 10px 10px;
}
#masonry_resources .resi_wrap .res_cats span {
	display:inline-block;
	margin:0px 5px 5px 0px;
	padding:5px 10px;
	font-size:13px;
	line-height:16px;
	background-color:#60a9d0;
	color:#000000;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap .res_cats span:hover {
	background-color:#000000 !important;
	color:#ffffff;
}
/* title, date, excerpt & link */
#masonry_resources .resi_wrap h2.res_title {
	margin:0px;
	padding:0px 10px 7px;
	font-weight:500;
	font-size:20px;
	line-height:24px;
	max-height:96px; /* max of 4 lines */
	overflow:hidden;
	color:#000000;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap h2.res_title a {
	color:#000000;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap h2.res_title:hover,
#masonry_resources .resi_wrap h2.res_title a:hover {
	color:#60a9d0;
}
#masonry_resources .resi_wrap .res_author {
	margin:0px;
	padding:0px 10px 10px;
	font-size:14px;
	line-height:20px;
	color:#6c6c6c;
}
#masonry_resources .resi_wrap .res_date {
	margin:0px;
	padding:0px 10px 10px;
	font-size:14px;
	line-height:20px;
	color:#6c6c6c;
}
#masonry_resources .resi_wrap .res_excerpt {
	margin:0px;
	padding:0px 10px;
	font-size:14px;
	line-height:20px;
	color:#6c6c6c;
	max-height:120px; /* max of 6 lines */
	overflow:hidden;
}
/* read more button */
#masonry_resources .resi_wrap .res_link {
	margin:10px 0px 15px;
	padding:10px;
	font-weight:400;
	font-size:16px;
	line-height:16px;
	font-style:italic;
	color:#6c6c6c;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap .res_link a {
	display:inline-block;
	color:#6c6c6c;
	background-color:#ffffff;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_resources .resi_wrap .res_link:hover,
#masonry_resources .resi_wrap .res_link a:hover {
	color:#60a9d0;
}

/* load more (pagination) button */
#res_load_more {
	margin:0px auto 30px;
	clear:both !important;
	border:solid 1px #e0e0e0;
	padding:15px 0px;
	width:150px;
	text-align:center;
	font-weight:400;
	font-size:14px;
	line-height:14px;
	color:#6c6c6c;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#res_load_more:hover {
	border-color:#60a9d0;
	background-color:#60a9d0;
	color:#ffffff;
}

/* ### RESOURCE PAGE - RESOURCE POPUP ### */
#resources_page .resource_popup {
	background-color:rgba(0,0,0,0.9);
	apadding-right:15px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	height:100%;
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
   z-index:99999999999;
   aoverflow-y:scroll;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#resources_page .resource_popup .rp_wrapper {
	width:100%;
	max-width:660px;
	margin:60px auto 0px;
	padding:30px;
	background-color:#ffffff;
	border-radius:10px;
	position:relative;
}
#resources_page .resource_popup .rp_wrapper .rp_close {
	position:absolute;
	top:-10px;
	right:-10px;
	padding:15px 0px;
	width:50px;
	text-align:center;
	color:#ffffff;
	background-color:#dc3545;
	border-radius:50%;
	font-family:'Open Sans';
	font-weight:500;
	font-size:20px;
	line-height:20px;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#resources_page .resource_popup .rp_wrapper .rp_close:hover {
	background-color:#000000;
}
#resources_page .resource_popup .rp_wrapper > h3 {
	padding:0px 0px 3px !important;
	font-weight:400 !important;
	font-family:'Open Sans' !important;
	font-size:20px !important;
	line-height:24px !important;
	color:#000000 !important;
}
#resources_page .resource_popup .rp_wrapper > h5 {
	padding:0px 0px 15px !important;
	font-weight:400 !important;
	font-family:'Open Sans' !important;
	font-size:14px !important;
	line-height:100% !important;
	color:#c0c0c0 !important;
}
#resources_page .resource_popup .rp_wrapper iframe {
	width:100% !important;
	height:338px !important;
	background:#f0f0f0 url('onalytica-logo.png') no-repeat center;
}
#resources_page .resource_popup .rp_wrapper > p {
	margin:0px !important;
	padding:10px 0px 0px !important;
	font-size:15px !important;
	line-height:22px !important;
	color:#6c6c6c !important;
}
@media only screen and (max-width:768px) {
	#resources_page .resource_popup .rp_wrapper {
		max-width:440px; margin:40px auto 0px; padding:20px; border-radius:7px !important; }
	#resources_page .resource_popup .rp_wrapper .rp_close {
		top:-30px !important; right:auto !important; left:50% !important; margin-left:-20px !important;
		padding:10px 0px !important; width:40px !important; }
	#resources_page .resource_popup .rp_wrapper > h3 {
		padding:0px 0px 3px !important; font-size:18px !important; line-height:22px !important; }
	#resources_page .resource_popup .rp_wrapper > h5 {
		padding:0px 0px 12px !important;  font-size:13px !important; }
	#resources_page .resource_popup .rp_wrapper > p {
		padding:8px 0px 0px !important; font-size:14px !important; line-height:20px !important; }
	#resources_page .resource_popup .rp_wrapper iframe {
		height:225px !important; }
}
@media only screen and (max-width:479px) {
	#resources_page .resource_popup .rp_wrapper {
		max-width:340px; padding:15px; }
	#resources_page .resource_popup .rp_wrapper iframe {
		height:174px !important; }
}