html {
    min-height: 100%;
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}

body, p, h1, h2, h3, h4, h5, h6 {
	font-family: 'PT Sans', sans-serif;
}

body {
	color: #333333; 
	background-color: #232a34;
	padding: 0;
	border: 0;
	margin: 0;
} 

#nfail {
	font-size: .8rem;
	color: #FF0000;
}

.body {
	background: url("https://assets.mi6-hq.com/gfx/crest-bottom-right.webp") no-repeat bottom right;
	background-color: #FFF;
	min-height: 100%;
	padding: 30px;
	background-color: #FEFEFE;
	box-shadow-left: 20px 20px 20px #000;
	box-shadow-right: 20px 20px 20px #000;
	box-shadow-bottom: 20px 20px 20px #000;
}

.welcome {
	background-color: rgba(33,153,252,0.3); !important;
	color: #FFF !important;
	margin-top: 1.8rem;
	font-size: .9rem;
	padding: 1rem 1rem .1rem 1rem;
	border: 1px solid #2199e8;
}

.welcome h4 {
	letter-spacing: .6rem;
	font-weight: bold;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	text-transform: uppercase;
}

.welcome p {
	padding: 0;
	margin: 0;
	line-height: 1rem;
}

.welcome .dismiss {
	position: relative;
	display: inline;
	float: right;
	top: -.5rem;
	right: -.5rem;	
	color: #FFF;
	display: block;
	padding: 0rem .4rem 0rem .4rem;
	border: 1px solid #2199e8;
	border-radius: 10px;
	background-color: #2199e8;
	color: #000;
}

.welcome .button {
	margin: .2rem 0 .6rem 0;
}

h2.headliner {
	font-size: 2rem;
	font-weight: bold;
	text-transform: uppercase; 
}

strong {
	font-weight: bold;
}

h6 {
	font-weight: bold;
}

h6 a, h6 a:hover {
	color: #565656;
	border-bottom: 1px solid #565656;
}

ul {
	list-style-image: url(https://assets.mi6-hq.com/gfx/bullxs.png);
}

.row.margin {
	margin-bottom: .8rem;
}

a:hover {
	color: #1a7cbc;
	text-decoration: none;
}

header {
	background-color: #232a34;
}

header .row {
	background: url(https://assets.mi6-hq.com/gfx/background.webp) no-repeat center;
	min-height: 200px;
}

header .social img {
	width: 35px;
}

header .social {
	margin: 1.5rem 0 0 1rem;
}

.title-bar {
	background-color: #2199e8;
	padding: 0;
}

#menuset {
	width: 100%;
}

nav#menu {
	background-color: #2199e8;
	padding: 1rem;
}

.menu-fixed {
	position: fixed;
	box-shadow: 0px 0px 20px #333;
	z-index: 20;
}

nav#submenu {
	background-color: #1472b0;
}

.submenu {
	padding: .5rem 1rem .5rem .8rem;
}

.submenu ul, .menu ul {
	list-style-type: none;
	list-style-image: none;
	margin: 0 0 0 1rem;
	padding: 0;
}

.submenu ul li, .menu ul li {
	float: left;
	padding-right: 1.6rem;
}

.submenu ul li a, .menu ul li a {
	color: #FFF;
	font-size: 1.1rem;
	font-weight: bold;
}

.submenu ul li a {
	font-size: .9rem;
}

.breadcrumbs {
	margin: 0;
	padding: .6rem 2rem .6rem 2rem;
	background-color: #efefef;
}

.breadcrumbs ul {
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style-type: none;
}

.breadcrumbs ul li {
	float: left;
}

.breadcrumbs ul li, .breadcrumbs ul li a {
	font-size: 1rem;
	text-transform: none;
}

.logo {
	text-align: right;
	color: #FFF;
	font-weight: bold;
	font-size: 8rem;
	margin-top: 2rem;
	letter-spacing: .5rem;
	line-height: 6rem;
}

.strapline {
	text-align: right;
	color: #FFF;
	line-height: 1rem;
	font-size: 1.05rem;
	margin-right: 1rem;
}

.logo a, .strapline a {
	color: #FFF;
}

.newstopbox img, .noborder {
	border: none !important;
}

.sidebar ul {
	list-style-image: url(https://assets.mi6-hq.com/gfx/bullxs.png);
	padding: 0;
	margin: 0 0 0 1.1rem;
}

.sidebar li {
	padding: 0;
	margin: 0;
}

.sidebar .list {
	margin-bottom: 1rem;
}

.sidebar h4, h4.homepage {
	font-size: 1rem;
	font-weight: bold;
	text-transform: uppercase;
	color: #666;
	margin-bottom: 0;
}

.placard {
	background-color: #606068;
	padding: .5rem .2rem .5rem .2rem;
	text-align: center;
	margin-bottom: 1rem;
}

.placard img {
	border: none !important;
}

.feedback {
	margin-bottom: 1rem;
}

.features h4, .featured h4 {
	font-size: 1.2rem;
	margin: 0;
	padding: 0;
}

.featured h4 {
	color: #FFF;
}

.features .icon {
	border: 1px solid #CCC;
	clear: both !important;
}

.newslink {
	color: #333;
}

.newslink .highlight {
	color: #2199e8;
}

.newslink:hover {
	color: #333;
}

.frameholder {
	background:url(https://assets.mi6-hq.com/gfx/loader.gif) center center no-repeat;
}

a.title {
	border-bottom: 1px solid #666;
	color: #666;
}

.box.grey {
	background-color: #b5b5b5;
}

.box.grey:hover {
	background-color: #868686;
}

.box {
	font-size: .8rem;
	background-color: #2199e8;
	padding: 2px 6px 2px 6px;
	color: #FFF;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; /* future proofing */
	-khtml-border-radius: 3px; /* for old Konqueror browsers */
}

.box:hover {
	color: #FFF;
	background-color: #1a7cbc;
}

.article-content .date {
	font-size: .8rem;
	color: #888;
}

.article-icon {
	border-bottom: 5px solid #2199e8;
}

.article-icon:hover {
	border-bottom: 5px solid #1a7cbc;
}

.callout.soft {
	background-color: #f1f9ff;
}

.featured {
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
	margin-bottom: 1rem;
	width: 100%;
}

.featured h2 {
	color: #FFF;
}

.featured .padder {
	position: relative;
	top: 0;
	left: 0;
   width: 100%;
	vertical-align: center;
	background-color: #000;
	background-color:rgba(0, 0, 0, 0.5);
	padding: 2rem 1.5rem;
	height: 16.1rem;
}

.featured .padder h2 {
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
}

.featured.news h2 {
	font-size: 1.7rem;
}

.trevda {
	margin-bottom: 1rem;
	min-height: 16rem;
}

.newspost h4 {
	color: #000;
	padding: 10px 0 50px 0;
}

.sub {
	font-size: 11px;
	color: #999;
}

.sharing img {
	display: inline;
	width: 2rem;
	border: none !important;
}

.spoiler {
	display: none;
	padding: 1rem;
	background-color:  #ccc;
}

.button.show-spoilers {
	margin: 0 !important;
}

footer {
   height: 200px;
   width: 100%;
}

footer .padder {
	padding: 1rem 0;
}

footer p, footer a {
	font-size: .8rem;
	color: #EEE;
}

.hidden {
	display: none;
}

#lightgallery .column {
	text-align: center;
}

#lightgallery {
	padding-top: 1rem;
}

.trevda .strapline {
	position: absolute;
	bottom: .5rem;
	left: 1.4rem;
	display: block;
	text-align: left;
	font-size: .9rem;
}

/* Article Layout */

.h1 {
	font-weight: bold;
	color: #003399;
}

.caption {
	font-size: .85rem;
	color: #777;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
}

.caption a {
	font-weight: bold;
}

.masthead {
	background-color: #EFEFEF;
	margin-bottom: 2rem;
	padding-right: 2rem;
}

.masthead h1 {
	font-size: 2.5rem;
}

.masthead .date {
	margin-top: 1.2rem;
	font-size: 1rem;
	color: #003399;
	font-weight: bold;
}

.masthead h1 {
	margin-top: .5rem;
	font-size: 2rem;
}

.masthead {
	font-size: .97rem;
}

.centerpic {
	text-align: center !important;
	padding: 1rem;
	margin: 1rem 0 1rem;
	background-color: #EEE !important;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.masthead h1 {
	font-size: 2rem;
}

.masthead {
	font-size: .97rem;
}

.small-article h4 {
	font-size: 1.1rem;
}

.small-article {
	font-size: .8rem;
}

.small-article .icondrop {
	display: none;
}

.small-article .columns {
	padding-right: .5rem;
}

/* Pagination */

.mi6-pagination .previous {
	margin: 0rem .5rem 1rem 0rem;
}

.mi6-pagination .innerbutton, .mi6-pagination .currentpage {
	margin: 0rem .5rem 1rem 0rem;
}

/* Old fluid layouts */

/* Image on the right, text on the left */

.colwrap.picright .col1 {
	float:left;
	width: 53%;
	position:relative;
	padding: 0;
	overflow:hidden;
}

.colwrap.picright .col1 p {
	margin: 0 1.5em 1.2em 0;
}

.colwrap.picright .col1 ul li {
	margin: 0 1.5em 0 0;
}

.colwrap.picright .col2 {
	float:left;
	width: 47%;
	position:relative;
	padding:0;
	overflow:hidden;
	vertical-align: top;
}

.colwrap.picright .col2 img, .colwrap.picright .col2 p {
	margin: 0;
	padding: 0;
}

.colwrap.picright img, .colwrap.picleft img, .body .columns img {
	border: 1px solid #999;
}

/* Image on the left, text on the right */

.colwrap.picleft .col1 {
	float:left;
	width: 47%;
	position:relative;
	padding: 0;
	overflow:hidden;
}

.colwrap.picleft .col2 {
	float:left;
	width: 53%;
	position:relative;
	padding:0;
	overflow:hidden;
}

.colwrap.picleft .col2 p {
	margin: 0 0 1.2em 1.5em;
}

/* 2 or 3 photos centered in a grey box */
.centerpic .col1, #fluid-container .centerpic .col2, #fluid-container .centerpic .col3 {
	float: left;
	text-align: center;
}

.centerpic img {
	text-align: center;
	margin: 0 auto 0 auto;
	border: 1px solid #999;
}

.centerpic.twopics .col1, #fluid-container .centerpic.twopics .col2 {
	width: 50%;
}

.centerpic.threepics .col1, #fluid-container .centerpic.threepics .col2, #fluid-container .centerpic.threepics .col3 {
	width: 33%;
}

.centerpic.threepics .col3, #fluid-container .centerpic.twopics .col2 {
	clear: right;
}

.noborder, .iconholder img {
	border: none !important;
}

.middle {
	vertical-align: middle;
}

.blockquote {
	font-size: 2.2rem;
	line-height: 2.7rem;
	text-align: left !important;
	text-indent: 0px;
	font-family: Georgia, serif !important;
}

p.blockquote {
	padding-left: 10px;
	border-left: 20px solid #666;
}

.gallery {
	padding: 1rem;
	text-align: center;
	margin: 1rem 0 1rem 0;
}

.gallery img {
	margin: .3rem;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

@media only screen and (min-width: 640px) {
	.bookshelf {
		margin: 0 auto 0 auto;
		background-image: url('https://assets.mi6-hq.com/gfx/bond_bibles_bg.png'); 
		background-size: contain; 
		width: 550px; 
		height: 367px; 
		text-align: left;
	}
	.bookshelf .book {
		cursor: pointer; 
		display: block; 
		position: relative; 
		top: 5px; 
		left: 75px; 
		width: 101px; 
		border: 0px !important;
	}

	.bookshelf .book img {
		border: 0px !important;
	}

	.small-only {
		display: none !important;
	}
}

@media only screen and (max-width: 640px) { 

	#mainmenu {
		display: none;
	}

	/* hide things when the menu collapses */
	.hide-for-small {
		display: none !important;
	}

	.small-only {
		display: auto;
	}
	
	/* Resize header for mobile */
	
	header .row {
		min-height: auto;
		padding-bottom: 1rem;
	}
	
	.logo {
		margin-top: 1rem;
		font-size: 5.98rem;
	}
	
	.strapline {
		margin-top: 0rem;
		line-height: .1rem;
		font-size: .8rem;
	}
	
	/* Collapsable menu for mobile */
	
	.menu-fixed {
		position: relative;
		box-shadow: none;
		z-index: 0;
	}
	
	.menu ul {
		margin: 1rem 0 0 .2rem !important;
	}
	
	#mainmenu li {
		padding: 0;
		margin: 0;
		clear: both;
		display: block;
		width: 100%;
		border-bottom: 1px solid #368ac1;
	}
	
	#mainmenu li a {
		padding: 0;
		margin: 0;
		clear: both;
		display: block;
		width: 100%;
		padding: .5rem 0 .5rem 0;
	}
	
	/* Pagination */
	
	.mi6-pagination .innerbutton {
		display: none;
	}
	
	/* Footer tidies */
	
	footer .right, footer p {
		text-align: left !important;
	} 
	
	.masthead img {
		padding: 1rem 0 0 .8rem;
	}
	
	.masthead h1 {
		font-size: 1.2rem;
		padding-top: 1rem;
		font-weight: bold;
	}
	
	.masthead .date {
		font-size: .8rem;
	}
	
	.masthead .row .columns, .masthead .row .column {
		padding-right: 5px;
	}
	
	.menu a {
		font-size: 1rem;
	}
}

@media only screen and (max-width: 41em) { 
	.trevda {
		margin-top: 1rem;
	}
	
	.featured h2 {
		font-weight: bold;
		font-size: 1.6rem;
	}
	
	.featured h4 {
		font-size: 1rem;
	}
	
	.featured {
		background-size: 100%;
	}
	.featured .padder {
		min-height: auto;
		padding: 1rem;
	}
}