/*
Theme Name: Salient Child Theme
Theme URI: https://lfprojects.linuxfoundation.org;
Description: This is a custom child theme for Salient
Author: Asitha de Silva
Author URI: http://asithadesilva.com;
Template: salient
Version: 1.0.1
*/


p code, li code { display: inline-flex; padding: 5px; }
.col-sm-5cols { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; width: 20%; float: left; }
.col.centered-text ul, .wpb_column.centered-text ul { text-align: center; }
#header-outer #social-in-menu .fa-rss:after, .material #slide-out-widget-area.slide-out-from-right .fa-rss:after{content:"\f09e"}

/* Persons Custom Post Type CSS */
.single-person { margin-bottom: 20px; }
.single-person-title h3, .single-person-title h5 { text-align: center; font-size: 20px !important; margin-bottom: 0 !important; line-height: 25px !important }
.single-person-title h5 { font-weight: 100; }
.single-person-description { padding: 10px 0; text-align: center }
.single-person-description p { font-size: 11px; padding-bottom: 10px !important }
.single-person-description p.read-more { padding-bottom: 0px !important; }
.long-description { margin-bottom: 20px; }
.social-links { text-align: center }
.single-person-icon, .single-person-title, .single-person-description { width: 100%; }

/* New Person profile photo overrides */
.single-person-icon { width: 100px !important; height: 100px !important; margin: 0 auto; text-align: center; border-radius: 50px; overflow: hidden !important; }
.single-person-icon img { min-height: 100% !important; text-align: center; max-width: 100% !important; }

/* Vendors Custom Post Type CSS */
#vendor-parent img { max-height: 130px; margin-bottom: 0; cursor: pointer}
.lightbox { display: none; }
.featherlight .featherlight-inner img { max-height: 100px; }
#vendor-parent .mix { border: 1px solid #ccc; width: 22.5%; margin-right: 15px; margin-bottom: 20px; padding: 10px;}
#vendor-parent .mix:hover { border-color: #168fdf; }
#vendor-parent.wpls-logo-showcase.wpls-logo-grid { font-size: 0 !important; clear: both; margin-top: 80px; }
#vendor-dropdown fieldset { margin-right: 20px; }

/* Members CSS */
.single-member { margin-bottom: 20px; text-align: center}
.single-member-icon { text-align: center; }
.single-member-icon img { text-align: center; max-width: 100% !important; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.single-member-icon img:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) !important; }

.single-recent-post .post-date { font-size: 14px; padding-bottom: 5px; }

/* Projects CSS */
.single-project { margin-bottom: 20px; text-align: center }
.single-project-icon { text-align: center; }
.single-project-icon img { text-align: center; max-width: 200px !important; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.single-project-icon img:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) !important; }
.single-project .inner .single-project-icon { height: 70px !important; width: auto !important; }
.single-project-lightbox h3 { font-size: 30px !important; line-height: 32px !important; }
.single-project-lightbox h5 { font-size: 18px !important; line-height: 20px !important; font-weight: 300 !important }
.single-project-lightbox h6 { font-size: 15px !important; line-height: 17px !important; margin-bottom: 20px; }

/* TT STYLES */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }

/* need to clear floats instead of contain them? use this below. */
.clear, .clear-both { clear: both; }

/* need to float things? we got you covered. */
.left, .floatleft { float: left !important; }
.right, .floatright { float: right !important; }

/* these are for images, below. gives a nice margin. sweet. */
.alignright { float: right; margin: 0 0 15px 15px;}
.alignleft { float: left; margin: 0 15px 15px 0;}
.floatnone { float: none; }

.bg-cover {background-size: cover; background-position: center center;}
.light-grey-bg,.bg-light-grey {background-color: #efefef;}
.bg-white {background-color: #fff;}
.bg-light-blue {background-color: #E9F6FB;}
.vertical-middle {position: relative;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);display: block;}

/* need a middle-aligned header. don't write another CSS rule. just use these! */
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

/* Typography decorators  */
h1, h2, h3, h4 { font-family: 'Proxima Nova Bold'; margin-bottom: 1em; }
h1 { font-family: 'Proxima Nova Bold'; font-size: 48pt; }
h1 + p { margin-top: 3em; }
p { margin-bottom: 1.5em; font-size: 18px; line-height: 1.5em; }
p.white, h2.white,h1.white,h3.white,h4.white, ul.white li {color: #fff;}
.text-block p:first-child, .text-block h2 + p, h1 + p { font-size: 24px; font-family: 'Proxima Nova Light'; }
.proxima-bold {font-family: 'Proxima Nova bold';}

/* need to add z-index?  Us these class? */
.z0 {z-index: 0;}
.z1 {z-index: 1;}
.z2 {z-index: 2;}
.z3 {z-index: 3;}
.z4 {z-index: 4;}
/* For a little extra reassurance */
.z99{z-index: 99;}

/* magic. many combinations exists with simplicity. */
.float20 { float: left; width: 20%; }
.float25 { float: left; width: 25%; }
.float33 { float: left; width: 33%; }
.float40 { float: left; width: 40%; }
.float50 { float: left; width: 50%; }
.float60 { float: left; width: 60%; }
.float66 { float: left; width: 66%; }
.float75 { float: left; width: 75%; }
.float80 { float: left; width: 80%; }
.inline25 { display: inline-block; width: 25%; margin-right: -4px; }
.inline20 { display: inline-block; width: 20%; margin-right: -4px; }
.inline16 { display: inline-block; width: 16.5%; margin-right: -4px; }
.inline33 { display: inline-block; width: 33%; margin-right: -4px; }
.inline50 { display: inline-block; width: 50%; margin-right: -4px; }
.inline66 {display: inline-block; width: 67%; margin-right: -4px;}
.inline-top, .vert-top {vertical-align: top;}
.inline-middle, .vert-middle {vertical-align: middle; }

/* decorators */
.btn { background: #8dc63f; color: white; display: inline-block; padding: 10px 20px;}

/* foundry items */
.mk-tile { list-style: none !important; border-radius: 3px; width: 250px; height: 145px; float: left; height: 200px; margin: 0 25px 25px 0px;  position: relative; transition: all 0.3s ease; position: relative;}
.mk-tile:hover {box-shadow: 0 12px 20px -15px rgba(0,0,0,0.5); transform: scale(1.05); }
.mk-tile a {display: block; height: 100%;padding: 15px; border: 1px solid #ddd; position: relative; z-index: 1; background-color: #fff;}
.mk-tile h3 {margin-top: 0px; font-size: 16pt; height: 35px; line-height: 1.4em;}
.tile-logo {height: 30px; position: absolute; left: 10px; bottom: 8px; z-index: 2; width: 50%;}
.tile-logo img {max-height: 30px; max-width: 60%; width: auto; display: inline-block; top: 50%; position: relative; transform: translateY(-50%);}
.cf-certified {color: #777; background: white; line-height: 1.5em; position: absolute; bottom: 0; right: 0; width: 100%; text-align: right; text-transform: uppercase; font-size: 12px; font-weight: 300; padding: 10px; }

@media(min-width: 768px){
	.wpls-column, .wpls-columns { padding: 0 0.93rem; }
	#header-outer:not(.small-nav){ margin-top: 21px; }
	#lf-header { padding-top: 2px; background: #252525;  }
	#lf-header img { max-width: 270px; }
	.mix, .gap { width: calc(100%/4 - (((4 - 1) * 1rem) / 4)); float: left; text-align: center; }
	#lf-header { position: absolute; width: 100%; z-index: 11;}
	.single-recent-post .featured-image-crop { height: 150px; max-width: 270px;	max-height: 150px;	overflow: hidden;}
	.single-recent-post .featured-image-crop img { max-height: 300px; }	
}

@media(max-width: 767px){
	#lf-header { display: none; }
	.mix:not(.security-advisors-child), .gap {
	    width: 45% !important;
	    float: left;
	    text-align: center;
	}	
	#vendor-btns { display: flex; }
	#vendor-parent img { max-height: 50px; margin-bottom: 0; cursor: pointer;}
	#vendor-dropdown fieldset { float: none; width: 100%; margin-bottom: 10px; }
	#vendor-parent.wpls-logo-showcase.wpls-logo-grid { margin-top: 20px; }	
	.col-sm-5cols { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; width: 100%; float: left; }	
}

@media only screen and (min-width: 641px) and (max-width: 1000px){
	.wpls-col-10 {
			width: 20%;
	}
}