/*
Theme Name: Default blue OII Theme
Description: A default theme for OII websites with OII and OU logos
Version: 1.0
Author: Oxford Internet Institute
Author URI: http://www.oii.ox.ac.uk
Template: iconic-one
*/




div.work-packages {
display: none;
}

.work-packages {
display: none;
}



/* =Theme customization starts here
-------------------------------------------------------------- */
.site-header {
  border: 0;
}

header#masthead {
	margin: -24px -24px 0 -24px; 
	background-color: rgb(0, 33, 71); /*Changed to dark blue on request from Brent Mittelstadt 6 May 2015*/
	position: relative;
	z-index: 1;
}

header#masthead::after {
	content: "";
	background: url('') no-repeat;
	opacity: 0.08;
	top: -150px;
	left: 80px;
	bottom: 0;
	right: 0;
	z-index: 2;   
}
.header-background {
	padding: 20px 0;
	/* background: rgb(0, 33, 71) ; Changed to dark blue on request from Brent Mittelstadt 6 May 2015*/
}
.hgroup .site-description:hover{
	text-decoration: none;
}

.hgroup {
	padding: 0 0 0 20px; /*no padding needed at top as the line height of the site name provides it. No right padding needed, as the logo provides left padding*/
	position: relative;
	z-index: 3;
	width: 60%;
	display: inline-block;
    margin: 17px 0;
   	float:none;
}
nav#site-navigation {
	position: relative;
	z-index: 10;
}
.hgroup a {
	
	font-size: 2.0em;
	text-shadow: none;
	padding: 0;
	margin: 0 0 5px 0;
	line-height: 1.25;
    font-weight: 500;
    text-decoration: none;
	text-shadow: 0;
}
/* changed font size 2.5 >2.3 */

.hgroup a,
.hgroup a:hover,
.hgroup .site-description:hover {
	color: white; /* Changed to white on request from Brent Mittelstadt 6 May 2015*/
}

.hgroup .site-description {
	line-height: 1.3;
	font-size: 1.6em;
	text-shadow: none;
	white-space: pre-wrap;
	padding: 0;
	margin: 20px 0 0 0;
	font-weight: normal;
}

.wrapper,
.site-header {
	border: 0;
}






#primary,
.site-content {
	padding-left: 0;
	margin-left: 0;	
	padding-right: 4%;
	margin-right: 2%;
}

#secondary {
	padding-right: 0;
	margin-right: 0;	
}

div#content {
	margin-bottom: 2em;
}
.site-content article {
	word-wrap: normal !important;
}

div.edit-link {
	clear: left;
	display: inline-block;
}

.edit-link a, a.post-edit-link,
.tags a,
.work-packages a {
	padding: 0 10px !important;
	display: inline-block;
	color: white !important;
	border-radius: 0px;
	margin: 0 5px 5px 0;
}

.tags a {
	background-color: rgb(67, 129, 173);
}
.work-packages a {
	color: rgb(67, 129, 173) !important;
	background-color: white;
	border-radius: 50px;
	display: inline-block !important;
	width: auto;

}
div.work-packages {
	display: inline-block;
}
.edit-link a, a.post-edit-link {
	background-color: rgb(205, 0, 54);
}

.tags {
	margin-bottom: 20px;
}
.tags a:before {
	content: "\f323";  /*dashicon*/
	margin-right: 4px;
}

.edit-link a:before {
	content: "\f464"; /*dashicon*/
	margin-right: 4px;
}

.work-packages a:before {
	content: "\f322"; /*folder icon*/
	margin-right: 4px;
}

.edit-link a:hover, a.post-edit-link:hover,
.tags a:hover {
	color: white !important;
	text-decoration: none;
}

.work-packages a:hover {
	text-decoration: none;
}
.tags a:hover {
	background-color: rgb(53, 103, 139);
}

.edit-link a:hover, a.post-edit-link:hover {
	background-color: rgb(165, 0, 43);
}

img {
  border: 0;
  box-shadow: none !important;
}

img.img-circle {
	border-radius: 50%;
	text-align: center;

}

.text-center {
	margin: 0 auto;
}

article {
	-webkit-hyphens: none !important;
	-moz-hyphens: none !important;
	-ms-hyphens: none !important;
	-o-hyphens: none !important;
	hyphens: none !important;
}

.archive-title,
.page-title {
	font-size: 1.7em;
	line-height: 1.3;
}

.archive-meta {
	font-size: 1.1em;
	margin-top: 0;
}

.archive-header {
	margin-bottom: 22px;
}

.entry-header .entry-title {
	margin-bottom: 0.5em;
}

@media screen and (max-width: 768px) {
	#logo {
		float: none;
		margin: 0 auto;
		padding: 20px 0 0 0;
		width: 90%;
		text-align: center;
	}
	.hgroup {
		float: none;
		width: 75%;
		padding: 0;
		margin: 0 auto;
	}
	header#masthead {
		margin-bottom: 34px;
	}
	#primary,
	.site-content {
		padding-right: 0;
		margin-right: 0;
	}
	
	.site-description{
		font-size:1.2em!important;
	}

	

}

@media screen and (min-width: 768px) and (max-device-width : 1024px) and (orientation : portrait) {
		#logo {
		float: none;
		margin: 0 auto;
		padding: 20px 0 0 0;
		width: 90%;
		text-align: center;
	}
	.hgroup {
		float: none;
		width: 75%;
		padding: 0;
		margin: 0 auto;
	}
	header#masthead {
		margin-bottom: 34px;
	}
	#primary,
	.site-content {
	padding-right: 0;
	margin-right: 0;
	}
}

@media screen and (min-width: 768px) {
	.entry-header .entry-title {
		font-size: 2em;
	}
}

body .site {
	padding: 24px;
}

select.selectnav {
	margin: 20px 0;
	font-size: 18px;
	background-color: rgb(0, 33, 71);
	color: white;
	border: 1px solid white;
	width: 50%;
	text-transform: none !important;
}

.themonic-nav ul.nav-menu {
	border-top: 0;
}
.site-content nav {
	line-height: 1.7;
}
.nav-previous a:hover,
.nav-next a:hover {
	text-decoration: none;
	background-color: rgb(67, 129, 173);
	color: white;
	display: inline-block;
}
.below-title-meta {
	width: 100%;
	margin: 0;
	padding-bottom: 44px;
}
.adt {
	padding: 10px 10px 5px 10px;
	float: none;
}
.below-title-meta {
	padding-bottom: 0;
}
.adt-comment, .meta-sep {
	float: none;
	margin-left: 0.7em;
}
.adt .author:before,
.adt .meta-sep:after,
.adt-comment a:before,
.tags a:before,
.edit-link a:before,
.work-packages a:before {
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'dashicons';
	vertical-align: top;
	color: rgb(255, 153, 0); 
}
.tags a:before {
	color: white;
	font: normal 12px/1 'dashicons';
	vertical-align: text-bottom;
}
.edit-link a:before {
	color: white;
	font: normal 16px/1 'dashicons';
	vertical-align: text-bottom;
}
.work-packages a:before {
	font: normal 16px/1 'dashicons';
	vertical-align: text-bottom;
}
/*  http://wpsites.net/web-design/adding-dashicons-in-wordpress

    https://developer.wordpress.org/resource/dashicons/#editor-paragraph
*/
.adt .author:before {
	content: "\f110"; /*person dashicon*/
}
.adt .meta-sep:after {
	content: "\f508"; /*calendar dashicon*/
}
.adt-comment a:before {
	content: "\f101"; /*comment dashicon*/
}

.wp-caption {
	background-color: rgb(242, 242, 242);
	margin-bottom: 10px;
	max-width: 100%;
	padding: 0;
	border: 0;
	text-align: center;
}
.wp-caption img {
	max-width: 98% !important;
	margin: 6px auto 0 auto;
}
.wp-caption-text {
	margin: 0;
	max-width: 98% !important;
	margin: 0 auto;
}

.comments-area article header {
	float: none;
	margin: 0 0 20px 0;
	background-color: rgb(247, 247, 247);
	padding: 8px;
}

.comments-title {
	font-weight: 800;
}

.link-comments {
	display: inline-block !important;
}


.wmle_post_meta,
.wmle_post_excerpt {
	display: none;
}
#wmle_container .wmle_item .wmle_post_title {
 font-size: inherit; 
 color: inherit; 
 line-height: 1.5;
 padding: 15px;
 border: 0;  
 font-weight: normal; 
}
.wmle_container .wmle_item .wpme_image img {
	margin: 0;
}
#wmle_container .wmle_item {
	border: 1px solid rgb(231, 231, 231);
	background-color: rgb(236, 236, 236);
	margin: 0 12px 12px 0;
	padding: 0;
	box-shadow: none;
	border-radius: 5px;
}
#wmle_container .wmle_item img {
	border-radius: 5px 5px 0 0 !important;
	width: 100%;
}
.wmle_loadmore .wmle_loadmore_btn {
	        box-shadow: none !important;
	-webkit-box-shadow: none !important;
	background-color: rgb(67, 129, 173);
	color: white !important;

}
.wmle_loadmore a {
	padding: 8px 20px !important;
}
.wmle_loadmore {
	display: none; /*by default we do not show the load button. we display it by javascript so only those with browers displaying js will see it */
}
.wc-shortcodes-toggle .wc-shortcodes-toggle-container {
	display: block; /*by default we show the extra detail text. we hide it by javascript so only those with browers using js will use the toggle behaviour */
}
.wmle_container .wmle_item .wmle_post_title a:hover,
a:hover {
	color: rgb(67, 129, 173);
}
.wc-shortcodes-entry-summary {
	display: none;
}
p.lead {
	font-size: 1.2em;
}
strong {
	font-weight: 500 !important;
}

h2.wc-shortcodes-entry-title {
	font-size: 16px;
	line-height: 1.3;
	font-weight: 400;
}
h2.wc-shortcodes-entry-title a:hover,
h2.wc-shortcodes-entry-title a:focus {
	text-decoration: none;
}
.wc-shortcodes-entry-thumbnail img {
	margin: 0;
}

.category-tiles,
.category-content {
	display: block;
	clear: both;
}



/*************  OII typography **********************/

.widget-area .widget a {
    color: #3a86bb;
    font-size: 98%;
    text-decoration: none;
}

body {
	font: 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #2e2c2a;
	/*background: rgb(204, 204, 204) url(img/bg_stripe_ddd.png);*/
}

h1, h2, h3, p {
	text-rendering: optimizeLegibility;}
h1, h2, h3, h4 {
	clear: both;
	font-weight: bold;
	color: #1a1a1a;}
h1 {/*36/36*/
	font-size: 3em;
	line-height: 1;
	margin-bottom: .5em;
	letter-spacing: 0;}
h2 {/*36/36*/
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0;
	letter-spacing: 0;}	
h3 {/*18/18*/
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;}
h4 {/*14/18*/
	font-size: 1.1667em;
	line-height: 1.286;
	margin-bottom: 1.286em;}

p {/*12/18*/
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 1.5em;}
	
a {
	color: #0096fd;
	text-decoration: none;}

b {
	font-weight: bold;}


/* =Change the default blue colour of the background
-------------------------------------------------------------- */
	#searchsubmit,
	.form-submit input {
	    background: rgb(0, 33, 71); 
	    height: 30px;
	    color: white;
	    font-size: 1em;
	    margin-bottom: 0;
	    line-height: 0.4;
	}
	article.format-aside .aside {
	    border-top: 16px solid rgb(0, 33, 71);
	}

	a {
		color: rgb(0, 33, 71);
	}
	a:hover {
		color: rgb(0, 33, 71);
	}

	.themonic-nav li:hover {
			background: rgb(0, 33, 71);
			}

	/* Minimum width of 768pixels. */
	@media screen and (min-width: 769px) {
		.themonic-nav .current-menu-item > a,
		.themonic-nav .current-menu-ancestor > a,
		.themonic-nav .current_page_item > a,
		.themonic-nav .current_page_ancestor > a {
			    background: none repeat scroll 0 0 rgb(0, 33, 71);
		}
		.themonic-nav ul.nav-menu,
		.themonic-nav div.nav-menu > ul {
			border-bottom: 5px solid rgb(0, 33, 71);
		}
	}
#content .dashicons {
	color: rgb(0, 33, 71);
	font-size: 10px;
	line-height: 1;
	display: block;
}
/* = END Change the default blue colour of the background
-------------------------------------------------------------- */


/* OII styles (updated 2016-01-13)
-------------------------------------------------------------- */

.entry-summary a,
.entry-content a,
.work-packages a,
.widget-area .widget a {
	color: rgb(51, 153, 204);
	text-decoration: none;}
.work-packages a {
	color: rgb(51, 153, 204) !important;}

.entry-summary a:hover,
.entry-content a:hover,
.widget-area .widget a:hover {
	color: rgb(255, 102, 0);
}

.themonic-nav {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* A bit of styling for the OII Basics plug-in pieces 
------------------------------------------------------*/

footer[role="contentinfo"] a {
	color: #686868;
	margin-left:0px;
	text-decoration: none;
}

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

.p-3.col.float-right{
	width:100%;
}

.ox-logo-container{
	margin: auto;
    padding-left: 10px;
	float:none!important;
}


	
}

.socialmedia {
    float: left!important;
    padding: 7px 10px;
    text-align: left;
    width: 25%;
    margin-top: 30px;
}

/* VIDEO IFRAMES
---------------------------------------------------------*/

	iframe.embedded-video, iframe.fluidvids-item{
		margin-bottom: 0px;
		width:100%;
		border: 0px;
		float: left;
		height: calc((100vw - 80px )* 9/16);
	}
	
	
	iframe[loading="lazy"]{
		margin-bottom: 30px;
		width: 100%;
		border: 0px;
		float: left;
		height: calc((100vw - 80px )* 9/16);
		margin-left: 0px;
		margin-top: 20px;

	}

@media screen and (min-width:1100px){
	iframe[loading="lazy"] {
		margin-bottom: 30px;
		width: 100%;
		border: 0px;
		float: left;
		height: calc(10500px/16);
		margin-left: 0px;
		margin-top: 20px;
	}

	
}	
	
	

	.inset-video iframe.embedded-video, iframe[width:500]{
		height: calc((100vw - 140px)*9/16);
	}


	.inset-video{
		z-index: 3;
		position: relative;
	}




@media screen and (min-width:992px){

	iframe.embedded-video{
		margin-bottom: 40px;
		width: 100%;
		height: calc((100vw)*9/16);

	}

	.inset-video{
		float: right;
		width: 45%;
		margin-left: 30px;
		margin-bottom: 30px;
	}
	
	.inset-video iframe.embedded-video{
		height:calc((100vw - 180px)*405/1600);
	}

}



@media screen and (min-width:1240px){

	iframe.embedded-video{
		float: right;
		margin-bottom: 40px;
		width: 100%;
		height:652px;

	}

	.inset-video iframe.embedded-video{
		height:270px;
	}

}

	iframe.full-width-video, iframe.fluidvids-item{
		width:calc(100% - 4px);
		height:calc((100vw - 80px )* 9/16);
		margin-top:30px;
	}

@media screen and (min-width:768px){

	iframe.full-width-video, iframe.fluidvids-item{
		height: calc((100vw - 80px )* 9/16);
	}
	
}

@media screen and (min-width:992px){

	iframe.full-width-video, iframe.fluidvids-item{
		height: 500px;
	}
	
}

@media screen and (min-width:1240px){

	iframe.full-width-video, iframe.fluidvids-item{
		height: 618px;
	}
	
}

.inset-video iframe{
	margin-bottom:30px;
}