/*
Theme Name:     Black and White Child
Theme URI:      http://modernthemes.net/demo/blackandwhite
Template:       blackandwhite
Version:        0.1
*/

/* For categories */
.page-title, 
li.vc_grid-filter-item > span {
	font-style: normal;
}

.wpb_wrapper {
	min-height: 568px;
}

/* For home page */
.resize {
	width: 33.3%;
}

.featured-info {
    float: left;
    background: #f2f2f2;
    padding: 2% 4px 45%;
    text-align: center;
    height: 272px;
	justify-content: center;
}

.featured-hr {
	margin-bottom: 6px;
}

.featured-info h1 {
	margin-top: 4px;
	min-height: 60px;
	font-size: 12px;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.featured-info h1:hover {
	font-weight: bold;
	letter-spacing: 0.055em;
}

.featured-info p {
	margin-bottom: 16px;
	font-size: 11px;
}

img.grayscale {
	object-fit: cover;
    min-height: 272px;
	width: 100%;
}

.read-up {
	font-size: 12px;
	border: .5px solid #000;
	padding: 8px 8px 6px 8px;
}

.featured-date {
	text-align: center; 
	margin-top: 12px;
}

/** adjust reserves size for banners dynamically, https://www.w3schools.com/howto/howto_css_aspect_ratio.asp **/
.londo-top-banner-ads {
	height: 90px;
}

@media only screen and (min-width: 781px) and (max-width: 1100px) {
	.featured-info {height: 246px; }
	.featured-info h1 { min-height: 136px; }
	.featured-info p { display: none; }
	.featured-date { text-align: center; }
}

@media handheld, only screen and (max-width: 780px) {
	.wp-post-image {max-height: 350px; min-height: 350px; object-fit: cover}
	.slider h1 {font-size: 36px}
	.featured-title { font-size: 26px; margin-top: -50px}
	.resize { width: 100%; margin-bottom: -4px; }
	.featured-info { height: 324px; }
	.featured-info h5 { font-size: 22px; }
	.featured-black  { font-size: 26px; }
	.featured-info h1 { font-size: 18px; min-height: 30px; }
	.featured-info p { font-size: 16px; margin-bottom: 30px; }
	.read-up {
		font: 14px 'Oswald', Helvetica, sans-serif;
		font-weight: 300;
		letter-spacing: 0.4em;
		padding: 14px 20px 12px 25px;
		text-transform: uppercase;
		border: 2px solid #000;
		border-radius: 2px;
	}
	.read-up:hover {
		background:#000;
		color: #fff;
	}	
	.featured-date { 
		margin-top: 24px;
	}
/** adjust reserves size for banners dynamically, https://www.w3schools.com/howto/howto_css_aspect_ratio.asp **/
.londo-top-banner-ads {
	width: 100%;
	height: auto;
    padding-top: 12.4%; /* 728:90 ratio */
    position: relative;
}
.londo-top-banner-ads > div {
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}	
}