/*
	Theme Name:   The Lifestream v5
	Theme URI:    http://thelifestream.net/wp-content/themes/fraction-theme-child/
	Description:  Fraction child theme for The Lifestream
	Author:       The Lifestream, Orange Themes
	Author URI:   http://thelifestream.net/
	Template:     fraction-theme
	Version:      1.2.4
	Tags: 
	Text Domain:  fraction-theme-child
*/


/* == Site-wide == */

body {
	background: url("/wp-content/themes/fraction-theme-child/images/background.jpg") no-repeat fixed center top black !important; /* Main background image */
	max-width: 100%;
	min-width: 313px !important;
}

body,
div.item-content p {
	color: #b3b3b3 !important; /* Main text color */
}

/* Prevent Fraction from duplicating background */
div.dat-menu-container {
	background: none !important;
}

div.active.boxed,
div.ot-slider {
	background-color: #17191a; /* Main content area background colour */
	max-width: 100%;
}

/* Adjust letter spacing */
body, div, p, a, table, td, div.main-title h2 {
	letter-spacing: normal;
}

/* No idea why there's a 100%-height empty svg on some pages, but let's hide it */
body > svg:last-child {
	display: none;
}

/* Headings */
h1, h2, h3, h4,
h1 a, h2 a, h3 a, h4 a {
	color: #d3d3d3 !important;
	font-weight: 700;
}

/* Link colors - this section could do with refactoring */
body a {
	color: #8ae6e6; /* Main link color */
	transition: all 0.2s ease-in-out;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, section.content a:hover, div.similar-articles-list div.similar-articles div.item a:hover, #footer a.nowrap:hover {
	color: #91f2ef !important;
}

a.archive-button, a.button:hover, a.content-category:hover, a.page-numbers:hover, section.content a.share-body:hover, section.content a.slider-main-link:hover {
	color: #fff !important;
}


/* == Banner == */

/* Show moving banner, hide fixed banner on desktop */
@media only screen and (min-width: 1250px) {
	#lifestream-banner {
		background: url("/wp-content/themes/fraction-theme-child/images/banner.png") no-repeat scroll center top transparent;
		height: 205px;
		margin-bottom: 0;
		overflow: hidden;
		width: 100%;
	}
	
	#lifestream-banner-fixed {
		display: none !important;
	}
 }
 
 /* Show fixed banner, hide moving banner on tablet and mobile */
@media only screen and (max-width: 1249px) {
	#lifestream-banner-fixed {
		display: block;
	}
	
	#lifestream-banner {
		background: none !important;
	}
}

/* Container for the clickable area */
#lifestream-banner-link {
	height: 100%;
	margin: 0 auto;
	max-width: 1250px;
}
/* Clickable area in middle of banner */
#lifestream-banner-click {
	display: block;
	height: 100%;
	margin: 0;
	width: 100%;
}


/* == Main menu == */

header.header {
	padding-top: 0;
	margin-bottom: 0;
}

header.header div.header-right {
	width: 100%;
}

/* Keep menu full-width and prevent it from hiding search on tablet and mobile */
@media only screen and (max-width: 1210px) {
	header.header:not(.makefixed)  div.wrapper {
		left: 0 !important;
	}
	div.search-header {
		display: block !important;
	}
}

/* Menu list */
nav.main-menu ul {
	padding-right: 3.5rem; /* Prevents menu items from overlapping search icon */
	width: auto !important;
}

/* Menu items */
nav.main-menu ul li > a {
	box-shadow: none !important;
}

/* Spacing for first menu item */
nav.main-menu ul li:first-child > a {
	padding: 1rem 1.5vw 1rem 2rem !important;
}

/* Spacing for subsequent menu items */
nav.main-menu ul li:not(:first-child) > a {
	padding: 1rem 1vw !important;
}

/* Hover effect on menu items */
nav.main-menu ul li a:hover {
	background-color: #17191a;
}

/* Search icon max size */
@media only screen and (min-width: 1143px) {
	header.header nav.main-menu ul li > a {
		font-size: 1.1rem !important;
	}
	div.search-header input,
	div.search-header:after {
		font-size: 1.5rem !important;
		height: 3.1rem !important;
		line-height: 3.1rem !important;
	}
}

/* Search icon scaling size */
@media only screen and (max-width: 1142px) {
	header.header nav.main-menu ul li > a {
		font-size: 1.54vw !important;
	}
	div.search-header input,
	div.search-header:after {
		font-size: 2.10158001vw !important;
		height: calc(1.54vw + 2rem) !important;
		line-height: calc(1.54vw + 2rem) !important;
	}
}

/* Fix menu weirdness at small sizes */
@media only screen and (max-width: 800px) {
	a.ot-menu-toggle,
	div.boxed {
		padding: 1rem 0;
		margin-top: -1px !important;
	}
}


/* == Main content area == */

/* All of it */
section.content {
	padding: 2em;
}

/* Inner bit */
div.wrapper {
	margin: 0 !important;
	width: 100%;
}

/* Desktop layout */
@media only screen and (min-width: 801px) {
	div.main-content div.left-content {
		border-right: solid 1px #838383;
		box-sizing: border-box;
		padding-right: 2.345058626%;
		width: 72.5% !important;
	}
}

/* Disable right border here since the sidebar has a left border */
div.main-content.has-sidebar:before { 
	border: 0;
}


/* == Main titles == */

div.main-title {
	padding: 0.5em 0 0.5em 1em;
	margin-bottom: 1.5em !important;
}

/* Archive page titles */
body.page-template-template-archive div.main-title {
	margin-bottom: 0 !important;
}

/* Post titles can be hidden because they're shown below the image */
body.single-post div.main-title {
	display: none !important;
}

/* Adjust title spacing on mobile devices */
@media only screen and (max-width: 600px) {
	div.home-block div.main-title {
		margin: 1.5em 0 !important;
	}
}


/* == Hover-images == */

/* Desktop and tablet: 7% zoom on hover */
@media only screen and (min-width: 601px) {
	a.image-hover:hover img,
	div.ot-slider div.ot-slider-layer a:hover img {
		-moz-transform: scale(1.07);
		-ms-transform: scale(1.07);
		-o-transform: scale(1.07);
		-webkit-transform: scale(1.07); 
		transform: scale(1.07); /* Must be last */
	}
}

/* Apply zoom across the site */
a.image-hover img,
div.ot-slider div.ot-slider-layer a img {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden; /* Fixes jiggle */
	-moz-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1); /* Must be last */
}


/* == Category overlays == */

div.category-placeholder {
	background-color: #fff;
	bottom: 0;
	display: inline-block;
	left: 0;
	position: absolute;
}

a.content-category {
	display: inline-block;
	font-size: 1em !important;
	font-style: normal;
	letter-spacing: normal;
	line-height: 1.2;
	margin-bottom: -1px;
	padding: 0.5em 1em;
	text-shadow: none !important;
	text-transform: uppercase;
}

/* == Social images == */

div.social-images {
	text-align: center;
	width: 100%;
}

div.social-images a {
	display: inline-block !important;
	margin: 0 2.75%;
	padding-top: 15.6%;
	position: relative;
	width: 15.6%;
}

div.social-images a img {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	left: 0;
	position: absolute;
	top: 0;
	transition: opacity 0.3s ease-in-out;
}

/* The next four selectors cover hover effects */
div.social-images a img:first-child {
	opacity: 0;
}

div.social-images a img:last-child {
	opacity: 1;
}

div.social-images a:hover img:first-child {
	opacity: 1;
}

div.social-images a:hover img:last-child {
	opacity: 0;
}

/* == Sidebar == */

#sidebar {
	border-left: 1px solid #838383;
	box-sizing: border-box;
	margin-left: -1px;
	padding-left: 2.345058626%;
	width: 27.5%;
}

/* Hide borders for individual elements in sidebar */
#sidebar div {
	border: 0 !important;
}

/* Condense sidebar elements */
#sidebar div.article-block,
#sidebar div.widget,
#sidebar div.widget div.item,
#sidebar div.textwidget {
	margin-bottom: 0;
	padding-top: 0;
}

/* Sidebar social block */
#sidebar div.social {
	background-color: #154844 !important;
	padding: 1em !important;
}

/* Sidebar social block header */
#sidebar div.social h3 {
	color: #fff !important;
	margin-bottom: 1em;
	text-transform: uppercase;
	word-spacing: 0.1em;
}

#sidebar div.social-images a:first-child {
	margin-left: 0 !important;
}

#sidebar div.social-images a:last-child {
	margin-right: 0 !important;
}

/* Currently the banner ad */
#sidebar div.widget-2 a {
	display: block;
	margin-bottom: 1.785715em;
}

/* Currently the "Final Fantasy VII remake" image */
#sidebar div.widget-3 a {
	margin-bottom: 1em;
	position: relative;
}

/* Logo overlay */
#sidebar div.widget-3 a img:last-child {
	bottom: 0;
	left: 0;
	position: absolute;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	-webkit-transform: none; 
	transform: none; /* Must be last */
}

/* Sidebar articles */
#sidebar div.widget div.item {
	padding-bottom: 1.5em;
}

/* Sidebar article picture containers */
#sidebar div.item-header {
	float: left;
	margin-right: 1em;
	margin-bottom: 0.3em;
}

#sidebar div.item-header a {
	margin-top: 2px;
}

/* Sidebar article images */
#sidebar div.widget div.item-header img {
	width: 112px;
}

/* Sidebar article headers */
#sidebar div.item-content h4 {
	font-size: 1.2em;
	line-height: 135%;
}

/* Sidebar article text container */
#sidebar div.widget div.item-content {
	margin-left: 0;
}

/* Sidebar article text */
#sidebar div.item-content p { 
	clear: left;
	margin-bottom: 0.5em;
}

/* Hide category and date */
#sidebar div.content-category,
#sidebar div.item-content span {
	display: none;
}

/* Responsive font sizing */
@media only screen and (max-width: 1267px) {
	#sidebar div.item-content h4 {
		font-size: 1.32597vw;
	}
}

@media only screen and (max-width: 1080px) {
	/* Reduce number of shown articles on narrow screens to prevent the sidebar being too long */
	#sidebar div.item:nth-child(n+4) {
		display: none;
	}
	/* Layout adjustment */
	#sidebar div.item-content h4 {
		clear: left;
		font-size: 1.25em;
		margin-bottom: 0.25em;
	}
	#sidebar div.widget div.item-header img {
		width: auto;
		max-width: 100%;
	}
	#sidebar div.widget div.item-header {
		margin-right: 0;
	}
}

/* Hide sidebar altogether on small displays */
@media only screen and (max-width: 800px) {
	#sidebar {
		display: none !important; 
	}
}

/* == Footer == */

/* Lots of footer layout stuff */
#footer {
	background: none;
	margin-top: 0;
}

#footer,
#footer table,
#footer tbody,
#footer tr {
	width: 100%;
}

#footer td:not(.center) {
	width: 30%;
	vertical-align: middle;
}

#footer td.center {
	width: 40%;
	vertical-align: middle;
}

#footer td.center div {
	margin: 0 auto;
}

/* Narrow screens only: hide rightmost table cell and expand the other two */
@media only screen and (max-width: 500px) {
	#footer td:last-child {
		width: 0;
		display: none;
	}
	#footer td:not(:last-child) {
		width: 50%;
	}
	#footer div.social-images {
		text-align: right;
	}
}
 /* Very narrow screens only: hide all but the center table cell */
@media only screen and (max-width: 410px) {
	#footer td:not(.center) {
		width: 0;
		display: none;
	}
	#footer td.center {
		width: 100%;
	}
	#footer div.social-images {
		text-align: center;
	}
}

#footer a {
	color: #b3b3b3;
}

/* Non-wrapping links */
#footer a.nowrap {
	font-weight: bold;
	white-space: nowrap;
}

#footer div.footer-widgets {
	padding: 0 !important;
}

#footer div.footer-copyright {
	padding: 1em 2em;
}

/* Social image div */
#footer div.social-images {
	min-width: 19em;
	max-width: 50%;
	text-align: center;
}

#footer div.social-images a {
	width: 10%;
	padding-top: 10%;
	margin: 0 1%;
}

#footer p.right {
	text-align: right;
}


/* == Miscellaneous responsive stuff == */

/* Prevent the admin bar from totally obscuring the banner at small sizes */
@media only screen and (max-width: 782px) {
	#wpadminbar {
		opacity: 0.8;
	}
}

/* Set background colour of mobile menu */
div.dat-menu-setup {
	background-color: #000 !important;
}

/* Fix submenu elements of main-menu */

.main-menu .sub-menu{
    background: none !important;
}

.main-menu > ul > li:not(.has-ot-mega-menu) > ul li > a {
    background: #154844 !important;
    color: #fff !important;
}

.main-menu > ul > li:not(.has-ot-mega-menu) > ul li > a:hover {
    background: #1e1e1e !important;
}

/* Spacing for first menu item */
nav.main-menu ul li:first-child > a {
    padding: 1rem 1.5vw 1rem 1rem !important;
}

/* Menu list */
nav.main-menu ul {
    width: max-content !important;
}