/*
#################################################################################################
# CASE STUDIES                                                                                  #
# ------------                                                                                  #
# CREATED BY: Simon Edge                                                                        #
# DATE: 23/01/2020                                                                              #
# DESCRIPTION:                                                                                  #
# CSS code for Case Studies ('case_study' custom post type)                                     #
#################################################################################################
*/


/*
###############################
### CASE STUDY LANDING PAGE ###
###############################
*/
#case_studies_page {
	padding:30px 0px 0px !important;
}
#case_studies_page .et_pb_text_inner > p {
	padding:0px !important;
}
@media only screen and (max-width:767px) {
	#case_studies_page { padding:20px 0px 0px !important; }
}

/* ##### CATEGORY FILTER DROPDOWN AND SEARCH INPUT BOX ##### */
#case_studies_page #cat_search_wrapper {
	max-width:1100px;
	margin:0px auto;
}
/* CATEGORIES DROP-DOWN */
#cat_search_wrapper #cs_categories_wrap {
	float:left;
	width:48%;
	margin-right:2%;
}
#cat_search_wrapper #cs_categories_wrap .nice-select {
	width:100%;
	max-width:300px;
	float:none;
	margin:0px;
	padding-left:15px;
	padding-right:42px;
	background-color:#f6f6f6;
	color:#6c6c6c;
	border-style:none;
	font-size:14px;
	line-height:42px;
	height:42px !important;
}
#cat_search_wrapper #cs_categories_wrap .nice-select:after {
	right:18px;
	width:8px;
	height:8px;
	margin-top:-7px;
	margin-right:0px;
	border-color:#60a9d0;
	border-width:3px;
}
#cat_search_wrapper #cs_categories_wrap .nice-select ul {
	width:300px;
	max-height:280px;
	overflow:auto;
}
#cat_search_wrapper #cs_categories_wrap .nice-select ul li {
	font-weight:400;
	font-size:14px;
	line-height:40px;
	min-height:40px;
	color:#6c6c6c;
}
#cat_search_wrapper #cs_categories_wrap .nice-select ul li.selected {
	font-weight:400;
	color:#60a9d0 !important;
	background-color:#f6f6f6;
}
#cat_search_wrapper #cs_categories_wrap .nice-select ul li:hover {
	background-color:#f6f6f6;
}
/* SEARCH INPUT FORM */
#cat_search_wrapper #cs_search_wrap {
	float:right;
	width:48%;
	margin-left:2%;
	text-align:right;
}
#cat_search_wrapper #cs_search_wrap form {
	width:100%;
}
#cat_search_wrapper #cs_search_wrap form input[type='text'] {
	vertical-align:top !important;
	width:258px !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;
}
#cat_search_wrapper #cs_search_wrap form input::-webkit-input-placeholder { color:#909090 !important; }
#cat_search_wrapper #cs_search_wrap form input:-moz-placeholder { color:#909090 !important; }
#cat_search_wrapper #cs_search_wrap form input::-moz-placeholder {  color:#909090 !important; }
#cat_search_wrapper #cs_search_wrap form input:-ms-input-placeholder { color:#909090 !important; }
#cat_search_wrapper #cs_search_wrap form input:-ms-input:-webkit-autofill,
#cat_search_wrapper #cs_search_wrap form input:-ms-input:-webkit-autofill:hover,
#cat_search_wrapper #cs_search_wrap form input:-ms-input:-webkit-autofill:focus
#cat_search_wrapper #cs_search_wrap form input:-ms-input:-webkit-autofill {
	-webkit-box-shadow:0 0 0px 1000px #f6f6f6 inset !important;
	-webkit-text-fill-color:#000000 !important;
}
#cat_search_wrapper #cs_search_wrap form 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;
}
#cat_search_wrapper #cs_search_wrap form button:hover {
	background-color:#6c6c6c !important;
}
#cat_search_wrapper #cs_search_wrap form button i {
	font-size:20px;
	line-height:42px;
	color:#ffffff;
}
@media only screen and (max-width:1279px) {
	#case_studies_page #cat_search_wrapper { max-width:96%; }
}
@media only screen and (max-width:999px) {
	#case_studies_page #cat_search_wrapper { max-width:94%; }
}
@media only screen and (max-width:767px) {
	#cat_search_wrapper #cs_categories_wrap {
		float:none; width:100%; margin-right:0px; text-align:center; margin:0px 0px 30px !important; }
	#cat_search_wrapper #cs_search_wrap {
		float:none; width:100%; margin-left:0px; text-align:center; }
	#cat_search_wrapper #cs_categories_wrap .nice-select {
		margin:0px auto !important; }
}

/* ### CASE STUDY PAGE - MASONRY GRID ### */
#masonry_case_studies {
	width:100%;
	max-width:1140px;
	margin:0px auto;
	padding:50px 0px 0px;
	clear:both;
	float:none;
}
#masonry_case_studies .cs_item {
	float:left;
	width:33.3333%;
	height:550px;
	overflow:hidden;
	padding:0px 1.6666% 0px;
}
#masonry_case_studies .csi_show {
	display:block;
}
#masonry_case_studies .csi_hide {
	display:none;
}
#masonry_case_studies .csi_wrap {
	padding:0px;
	border:solid 1px #f0f0f0;
	background-color:#ffffff;
}
@media only screen and (max-width:999px) {
	#masonry_case_studies .cs_item { width:50%; height:560px; padding:0px 2.5% 0px; }
}
@media only screen and (max-width:849px) {
	#masonry_case_studies .cs_item { height:550px; }
}
@media only screen and (max-width:799px) {
	#masonry_case_studies .cs_item { height:540px; }
}
@media only screen and (max-width:599px) {
	#masonry_case_studies { max-width:340px; }
	#masonry_case_studies .cs_item { width:100%; height:auto; overflow:visible; margin:0px 0px 50px; }
}
/* image and image hover overlay (image link, post date, social share icons) */
#masonry_case_studies .csi_wrap .cs_imgw {
	position:relative;
}
#masonry_case_studies .csi_wrap .cs_imgw img {
	position:absolute;
	top:0px;
	left:0px;
	display:block !important;
	width:100% !important;
}
#masonry_case_studies .csi_wrap .cs_imgw .cs_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_case_studies .csi_wrap .cs_imgw:hover .cs_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_case_studies .csi_wrap .cs_imgw .cs_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_case_studies .csi_wrap .cs_imgw .cs_imgo > a:hover {
	background-color:rgba(0,0,0,0.2);
}
/* category links */
#masonry_case_studies .csi_wrap .cs_cats {
	position:relative;
	bottom:auto;
	display:block;
	padding:20px 0px 10px 10px;
}
#masonry_case_studies .csi_wrap .cs_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_case_studies .csi_wrap .cs_cats span:hover {
	background-color:#000000 !important;
	color:#ffffff;
}
/* title, date, excerpt & link */
#masonry_case_studies .csi_wrap h2.cs_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_case_studies .csi_wrap h2.cs_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_case_studies .csi_wrap h2.cs_title:hover,
#masonry_case_studies .csi_wrap h2.cs_title a:hover {
	color:#60a9d0;
}
#masonry_case_studies .csi_wrap .cs_date {
	margin:0px;
	padding:0px 10px 10px;
	font-size:14px;
	line-height:20px;
	color:#6c6c6c;
}
#masonry_case_studies .csi_wrap .cs_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_case_studies .csi_wrap .cs_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_case_studies .csi_wrap .cs_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_case_studies .csi_wrap .cs_link:hover,
#masonry_case_studies .csi_wrap .cs_link a:hover {
	color:#60a9d0;
}

/* load more (pagination) button */
#cs_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;
}
#cs_load_more:hover {
	border-color:#60a9d0;
	background-color:#60a9d0;
	color:#ffffff;
}

/* searching popup box */
#cs_search_popup {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);
	z-index:999999;
	display:none;
}
#cs_search_popup div {
	width:90%;
	max-width:280px;
	margin:180px auto;
	background-color:#ffffff;
	padding:20px;
	text-align:center !important;
}
#cs_search_popup div h3 {
	padding:0px !important;
	font-size:20px !important;
	line-height:26px !important;
	color:#707070 !important;
}



/*
##############################
### SINGLE CASE STUDY PAGE ###
##############################
*/

/* ##### SINGLE CASE STUDY - PAGE TITLE SECTION ##### */
.single-case_study #single_cs_header {
	padding:90px 0px;
	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 );
}
.single-case_study #single_cs_header h3 {
	content:'Career Role';
	display:block;
	max-width:1200px !important;
	margin:0px auto !important;
	padding:0px 0px 5px !important;
	text-align:center !important;
	font-weight:100 !important;
	font-size:16px !important;
	line-height:22px !important;
	letter-spacing:1px;
	color:#ffffff !important;
	cursor:default !important;
}
.single-case_study #single_cs_header h3 a {
	color:#ffffff !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;
}
.single-case_study #single_cs_header h3 a:hover {
	color:#d0d0d0 !important;
}
.single-case_study #single_cs_header h1 {
	width:90% !important;
	max-width:1200px !important;
	margin:0px auto !important;
	padding:0px !important;
	text-align:center !important;
	font-weight:500 !important;
	font-size:36px !important;
	line-height:42px !important;
	color:#ffffff !important;
	cursor:default !important;
}
@media only screen and (max-width:1199px) {
	.single-case_study #single_cs_header h1 { font-size:32px !important; line-height:38px !important; }
}
@media only screen and (max-width:980px) {
	.single-case_study #single_cs_header { padding:80px 0px; }
	.single-case_study #single_cs_header h1 { font-size:28px !important; line-height:34px !important; }
 }
@media only screen and (max-width:767px) {
	.single-case_study #single_cs_header { padding:60px 0px; }
	.single-case_study #single_cs_header h1 { font-size:24px !important; line-height:30px !important; }
	.single-case_study #single_cs_header h3 { font-size:14px !important; line-height:20px !important; }
}

/* ##### SINGLE CASE STUDY - BODY SECTION ##### */
.single-case_study #main-content .container {
	padding:60px 0px 0px !important;
}
.single-case_study #main-content .container:before {
	display:none !important;
}
.single-case_study .single_cs_wrapper {
	max-width:1000px !important;
	margin:0px auto !important;
}
/* date & categories */
.single-case_study .single_cs_wrapper #scs_date,
.single-case_study .single_cs_wrapper #scs_cats {
	padding:0px 0px 15px;
	font-weight:500;
	font-size:18px;
	line-height:24px;
	color:#000000;
}
.single-case_study .single_cs_wrapper #scs_date span,
.single-case_study .single_cs_wrapper #scs_cats span {
	display:inline-block;
	color:#000000;
	padding-right:10px;
}
.single-case_study .single_cs_wrapper #scs_cats a {
	color:#60a9d0;
	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;
}
.single-case_study .single_cs_wrapper #scs_cats a:hover {
	color:#000000;
}
/* intro text */
.single-case_study .single_cs_wrapper #scs_intro {
	padding:0px 0px 30px;
	font-weight:500;
	font-size:18px;
	line-height:26px;
	color:#000000;
}
/* onedrive embed code */
.single-case_study .single_cs_wrapper #scs_embed {
	width:100% !important;
	max-width:1000px !important;
	padding-top:58.6% !important;
	position:relative !important;
}
.single-case_study .single_cs_wrapper #scs_embed iframe {
	position:absolute !important;
	top:0px !important;
	left:0px !important;
	width:100% !important;
	height:100% !important;
}
.single-case_study .single_cs_wrapper #scs_helptext {
	padding:5px 0px 10px;
	text-align:center;
	font-weight:500;
	font-size:18px;
	line-height:24px;
	color:#c0c0c0;
}
/* content/description */
.single-case_study .single_cs_wrapper #scs_description h1,
.single-case_study .single_cs_wrapper #scs_description h2,
.single-case_study .single_cs_wrapper #scs_description h3,
.single-case_study .single_cs_wrapper #scs_description h4,
.single-case_study .single_cs_wrapper #scs_description h5 {
	margin:30px 0px 10px !important;
	padding:0px !important;
	font-weight:700 !important;
	line-height:130% !important;
	color:#000000 !important;
}
.single-case_study .single_cs_wrapper #scs_description h1 { font-size:28px !important; }
.single-case_study .single_cs_wrapper #scs_description h2 { font-size:24px !important; }
.single-case_study .single_cs_wrapper #scs_description h3 { font-size:20px !important; }
.single-case_study .single_cs_wrapper #scs_description h4 { font-size:18px !important; }
.single-case_study .single_cs_wrapper #scs_description h5 { font-size:16px !important; }
.single-case_study .single_cs_wrapper #scs_description p {
	margin:10px 0px 20px !important;
	padding:0px;
	font-weight:500 !important;
	font-size:14px !important;
	line-height:24px !important;
	color:#6c6c6c !important;
}
.single-case_study .single_cs_wrapper #scs_description hr {
	display:none !important;
}
.single-case_study .single_cs_wrapper #scs_description ol {
	list-style-type:decimal !important;
	margin:0px 0px 20px 20px !important;
	padding:0px;
}
.single-case_study .single_cs_wrapper #scs_description ul {
	list-style-type:disc !important;
	margin:0px 0px 20px 10px !important;
	padding:0px 0px 0px 15px;
}
.single-case_study .single_cs_wrapper #scs_description p + ol,
.single-case_study .single_cs_wrapper #scs_description p + ul {
	margin-top:-10px !important;
}
.single-case_study .single_cs_wrapper #scs_description ul li,
.single-case_study .single_cs_wrapper #scs_description ol li {
	padding:3px 0px !important;
	font-size:14px !important;
	line-height:22px !important;
	color:#6c6c6c !important;
}
@media only screen and (max-width:980px) {
	.single-case_study .single_cs_wrapper #scs_date,
	.single-case_study .single_cs_wrapper #scs_cats {
		font-size:17px !important; line-height:22px !important; }
	.single-case_study .single_cs_wrapper #scs_intro {
		font-size:17px !important; line-height:24px !important; }
	.single-case_study .single_cs_wrapper #scs_helptext {
		font-size:17px !important; line-height:22px !important; }
	.single-case_study .single_cs_wrapper #scs_description h1 { font-size:26px !important; }
	.single-case_study .single_cs_wrapper #scs_description h2 { font-size:22px !important; }
	.single-case_study .single_cs_wrapper #scs_description h3 { font-size:18px !important; }
	.single-case_study .single_cs_wrapper #scs_description h4 { font-size:16px !important; }
	.single-case_study .single_cs_wrapper #scs_description h5 { font-size:15px !important; }
}
@media only screen and (max-width:767px) {
	.single-case_study .single_cs_wrapper #scs_date,
	.single-case_study .single_cs_wrapper #scs_cats {
		font-size:16px !important; line-height:22px !important; }
	.single-case_study .single_cs_wrapper #scs_intro {
		font-size:16px !important; line-height:24px !important; }
	.single-case_study .single_cs_wrapper #scs_helptext {
		font-size:16px !important; line-height:22px !important; }
	.single-case_study .single_cs_wrapper #scs_embed { padding-top:62% !important; }
	.single-case_study .single_cs_wrapper #scs_description h1 { font-size:24px !important; }
	.single-case_study .single_cs_wrapper #scs_description h2 { font-size:20px !important; }
}