/* Description: Index page styling */

/* == Slider ==
   i.e. Top three stories on index page */

/* Desktop layout */
@media only screen and (min-width: 801px) {
	div.ot-slider-layer.first {
		margin-right: 2.34505863% !important;
		width: 66.49916248% !important;
		}
	div.ot-slider-layer.second {
		margin: 0 0 2.417% 0 !important;
		width: 31.15577889% !important;
	}
	div.ot-slider-layer.third {
		margin: 0 !important;
		width: 31.15577889% !important;
	}
}

/* Tablet layout */
@media only screen and (max-width: 800px) {
	div.ot-slider-layer.first {
		margin-right: 3.40501792% !important;
		width: 65.53166070% !important;
	}
	div.ot-slider-layer.second {
		margin: 0 0 1.8828% 0 !important;
		width: 31.06332138% !important;
	}
	div.ot-slider-layer.third {
		margin: 0 !important;
		width: 31.06332138% !important;
	}
}

div.ot-slider {
	padding-bottom: 2em;
}

/* Gradient over slider images */
img.slider-overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; 
}

div.ot-slider div.ot-slider-layer > a {
	display: block;
}

/* Hide default gradient since we've got our own */
div.ot-slider div.ot-slider-layer > a:before,
div.ot-slider div.ot-slider-layer > a:hover:before,
div.ot-slider div.ot-slider-layer a.content-category:before {
	display: none;
}

/* Main headline text */
div.ot-slider div.ot-slider-layer strong {
	bottom: auto !important;
	left: 2.5%;
	letter-spacing: normal;
	right: 2.5%;
	text-shadow: 0px 0px 7px rgba(0,0,0,0.8);
	text-transform: none;
	top: 3%;
}

div.ot-slider div.first strong {
	font-size: 3.25em !important;
}

div.ot-slider div.second strong,
div.ot-slider div.third strong {
	font-size: 1.55em !important;
}


/* == Home blocks ==
   n.b. The first three stories are usually displayed with the "slider" plugin. Since this plugin is hidden at sizes below 600px, the first three stories are repeated in a home block which is only visible at that size, and hidden otherwise. */

/* Desktop and tablet */
@media only screen and (min-width: 601px) {
	div.left-content div.home-block:first-child {
		display: none;
	}
	div.left-content div.home-block:nth-child(n+3) {
		padding-top: 2em;
	}
}

/* Mobile */
@media only screen and (max-width: 600px) {
	div.left-content div.home-block:first-child {
		border-bottom: 0;
		display: block;
		padding-bottom: 0;
	}
	div.left-content div.home-block:nth-child(2) {
		padding-top: 2em;
	}
}

/* Home block layout */
div.left-content div.home-block {
	border-bottom: solid 1px #838383;
	margin-bottom: 0;
	padding-bottom: 2em;
	position: relative;
}

/* Last block shouldn't have a bottom border */
div.left-content div.home-block:last-child {
	border-bottom: none;
}


/* == News home blocks == */

/* Desktop and tablet layout */
@media only screen and (min-width: 601px) {
	div.article-list-block div.item {
		margin: 0 3.40501792% 2em 0 !important;
		width: 31.06332139% !important;
	}
	div.article-list-block div.item:nth-child(3n+0) {
		margin-right: 0 !important;
	}
	div.article-list-block div.item:nth-child(n+4) {
		margin-bottom: 0 !important;
	}
}

/* Mobile layout */
@media only screen and (max-width: 600px) { 
	div.article-list-block {
		max-width: 100%;
		margin: auto;
	}
	div.article-list-block div.item {
		margin: 0 0 2em !important;
		width: 100% !important;
	}
	div.article-list-block div.item:last-child {
		margin: 0 !important;
	}
	div.item-header a figure img {
		height: 100% !important;
		width: 100% !important;
	}
}

/* Truncate headlines longer than three lines on wide viewports */
@media only screen and (min-width: 1267px) {
	div.article-list-block div.item-content h3 {
		max-height: 3.5em;
	}
}

/* Image containers */
div.article-list-block div.item div.item-header {
	margin-bottom: 0.65em;
	position: relative;
}

/* Headlines */
div.article-list-block div.item div.item-content h3 {
	font-size: 1.5em;
	margin-bottom: 0.35em;
}


/* == Single-category home blocks == */

div.category-default-block {
	margin-bottom: 0;
	max-width: 100%;
	padding-bottom: 0;
}

/* Desktop and tablet layout */
@media only screen and (min-width: 601px) {
	div.column6 {
		margin: 0;
		padding-left: 0 !important;
		width: 48.29749104% !important;
	}
	div.column6:first-child {
		margin: 0 3.40501792% 0 0 !important;
	}
}

/* Mobile layout */
@media only screen and (max-width: 600px) {
	div.column6 {
		width: 100% !important;
	}
}

/* "View more" button */
div.main-title a.button {
	margin: 0 !important;
	color: #fff;
	box-shadow: none;
	font-weight: bold;
}
div.main-title a.button:hover {
	background-color: #2c5a56;
}

/* Main article in left column */
div.column6 div.item-main {
	border-bottom: none !important;
	margin-bottom: 0;
}

/* Main article headline */
div.column6 div.item-main div.item-content h3 {
	font-size: 1.95em;
	font-weight: 500;
}

/* Main article text */
div.column6 div.item-main div.item-content p {
	font-size: 1em;
}

/* Right column */
div.smaller-articles {
	margin: 0;
}

/* Articles in right column */
div.column6 div.item { 
	border: 0;	
	margin-bottom: 0;
	min-height: 63px;
	padding-bottom: 2em;
	padding-left: 4em;
	position: relative;
}

/* Image containers in right column */
div.column6 div.item div.item-header { 
	left: 0;
	position: absolute;
	width: 112px !important;
}

/* Headlines in right column */
@media only screen and (min-width: 1267px) {
	div.category-default-block div.item div.item-content h3 {
		font-size: 1.25em;
		min-height: 2.5em;
		overflow: hidden;
	}
}

@media only screen and (min-width: 1015px) and (max-width: 1266px) {
	div.category-default-block div.item div.item-content h3 {
		font-size: 1.381216vw;
	}
}

@media only screen and (min-width: 801px) and (max-width: 1014px) {
	div.category-default-block div.item div.item-content h3 {
		font-size: 1em;
	}	
}