/*
Theme Name: Frictional Games - Twenty Seventeen Child
Theme URI: http://vessinge.se
Description: Frictional Games - Twenty Seventeen Child
Author: Oskar Pålsson
Author URI: http://vessinge.se
Template: twentyseventeen
Version: 1.0.0
License: 
License URI: 
*/

/* Widen content */
body.colors-dark .wrap { max-width:1000px; }
body.colors-dark .page.page-one-column:not(.twentyseventeen-front-page) #primary { max-width:1000px; }
@media screen and (min-width: 48em) {
	body.colors-dark .wrap { max-width: 1000px; }
	
	body.colors-dark #comments { padding-top:1em; }
	body.colors-dark .comments-title { margin-bottom:1em; font-size:22px; }
	
	body.colors-dark textarea, body.colors-dark input { font-size:0.85em; }
}
@media screen and (min-width: 30em) {
	body.colors-dark .page-one-column .panel-content .wrap { max-width: 1000px; }
}

body.colors-dark #comments { padding-top:1em; }
body.colors-dark .comments-title { margin-bottom:1em; font-size:22px; }

body.colors-dark textarea, body.colors-dark input { font-size:0.85em; }

/* Content styling */
body.colors-dark .navigation-top { background-color:#da5f15; }
body.colors-dark .main-navigation ul { background-color:#da5f15; }
body.colors-dark .widget-area { min-width:260px; }
body.colors-dark h2.widget-title { color:#da5f15; font-size:16px; font-family:'Fira Sans'; text-transform:uppercase; font-weight:bold; }
body.colors-dark .widget ul li, body.colors-dark .widget ol li { color:#fff; font-size:16px; font-family:'Lato'; }
body.colors-dark .navigation-top a { font-size:16px; color:#fff; font-family:'Fira Sans'; text-transform:uppercase; font-weight:bold;  }
body.colors-dark .entry-meta a { font-size:14px; color:#fff; font-family:'Lato'; }
body.colors-dark h1.entry-title,
body.colors-dark h1.page-title,
body.colors-dark.home.blog h1.entry-title,
body.colors-dark.home.blog h1.entry-title > a,
body.colors-dark.archive h2.entry-title,
body.colors-dark.archive h2.entry-title > a,
body.colors-dark.home h3.entry-title,
body.colors-dark.home h3.entry-title > a { color:#da5f15; font-size:28px; font-weight:bold; font-family:'Fira Sans'; text-transform:none; letter-spacing:initial; }
body.colors-dark.page:not(.twentyseventeen-front-page) .entry-title { color:#da5f15; font-size:40px; font-weight:bold; font-family:'Fira Sans'; text-transform:none; letter-spacing:initial; }
body.colors-dark h2,
body.colors-dark h2.entry-title,
body.colors-dark h2.entry-title > a { color:#da5f15; font-size:32px; font-weight:normal; font-family:'Fira Sans'; letter-spacing:initial; padding-top:0.5em; }
body.colors-dark h3,
body.colors-dark h3.entry-title,
body.colors-dark h3.entry-title > a { color:#da5f15; font-size:22px; font-weight:normal; font-family:'Fira Sans'; padding-top:0.2em; }
body.colors-dark h4 { color:#da5f15; font-size:16px; font-weight:normal; font-family:'Fira Sans'; }
body.colors-dark .entry-content { font-size:14px; color:#fff; }
body.colors-dark .entry-content ul { padding-left:20px; }
body.colors-dark .main-navigation ul ul { background:#da5f15; }
body.colors-dark .social-navigation + .site-info { color:#fff; font-family:'Lato'; font-size:16px; }
body.colors-dark .site-info a { color:#fff; }
body.colors-dark .site-branding { display:none; }

body.colors-dark.blog .site-main > article, 
body.colors-dark.archive .site-main > article, 
body.colors-dark.search .site-main > article { border-bottom:1px solid #ccc; padding-bottom:1em; margin-bottom:3em; }

body.colors-dark.home .page-header,
body.colors-dark.archive .page-header { display:none; }


body.colors-dark .site-header .navigation-top .menu-scroll-down { color:#fff; }

/* Add padding so dropdowns doesnt disappear */
body.colors-dark .main-navigation ul li.menu-item-has-children:hover { padding-bottom:20px; margin-bottom:-20px; }

/* Navigation */
body.colors-dark .navigation-top .current-menu-item > a, 
body.colors-dark .navigation-top .current_page_item > a { color:#fff; }
body.colors-dark .main-navigation li li:hover, 
body.colors-dark .main-navigation li li.focus { background:#444; color:#fff; }
body.colors-dark .main-navigation li li:hover > a, 
body.colors-dark .main-navigation li li a:hover,
body.colors-dark .main-navigation li li.current_page_item a:hover, 
body.colors-dark .main-navigation li li.current-menu-item a:hover { color:#fff; }
body.colors-dark .main-navigation ul li.menu-item-has-children.focus:before, 
body.colors-dark .main-navigation ul li.menu-item-has-children:hover:before, 
body.colors-dark .main-navigation ul li.menu-item-has-children.focus:after, 
body.colors-dark .main-navigation ul li.menu-item-has-children:hover:after, 
body.colors-dark .main-navigation ul li.page_item_has_children.focus:before, 
body.colors-dark .main-navigation ul li.page_item_has_children:hover:before, 
body.colors-dark .main-navigation ul li.page_item_has_children.focus:after, 
body.colors-dark .main-navigation ul li.page_item_has_children:hover:after { border-bottom-color:#da5f15; }

/* Change column widts */
@media screen and (min-width: 48em) {
	body.colors-dark.has-sidebar #secondary { width:260px; }
	body.colors-dark.has-sidebar:not(.error404) #primary { width:calc(100% - 300px); }
	.site-content { padding: 2.5em 0 0; }
	.page.page-one-column .entry-header { margin-bottom:0; }
}

/* Style tree widget */
body.colors-dark .widget.wpdt-archives a { box-shadow:none; }
body.colors-dark .widget.wpdt-archives a:hover { box-shadow:none; }
body.colors-dark .widget.wpdt-categories a { box-shadow:none; }
body.colors-dark .widget.wpdt-categories a:hover { box-shadow:none; }
.dtNode > img { width:10px; }

/* Hide header image */
body.colors-dark .single-featured-image-header { display:none; }

/* Hide powered by */
body.colors-dark footer .site-info span { display:none; }
body.colors-dark footer .site-info .imprint { display:none; }

/* Footer padding */
body.colors-dark footer.site-footer .widget-area { padding-top:0; padding-bottom:0; }
body.colors-dark footer .widget { padding-bottom:1em; }
body.colors-dark footer h2.widget-title { margin-bottom:1em; }

/* Slider */
.metaslider.custom-header {
	max-height:calc(100vh - 32px);
}

.metaslider.custom-header .caption-wrap {
    width: 904px;
    left: 50%;
    margin-left: -451px;
    position: absolute;
    bottom: initial;
    top: 0;
    background: none;
    opacity:1;
    height:calc(100% - 32px);
    max-height: calc(100vh - 102px);
    display:flex;
    pointer-events:none;
}

.metaslider.custom-header > div {
	max-height: calc(100vh - 102px);
}

.metaslider.custom-header .flexslider {
	max-height: calc(100vh - 102px);
}

.metaslider.custom-header .flexslider .flex-viewport {
	max-height: calc(100vh - 102px);
}

.metaslider.custom-header .caption-wrap .caption {
	padding:0;
	margin:auto 0;
}

.metaslider.custom-header .caption-wrap .caption p:first-child {
	background:#da5f15;
	color:#fff;
	float:left;
	padding:20px;
	font-size:48px;
	line-height:initial;
	font-family:'Fira Sans';
	font-weight:bold;
}

.metaslider.custom-header .caption-wrap .caption p:last-child {
	background:#fff;
	color:#000;
	float:left;
	padding:15px;
	clear:both;
	margin-top:20px;
	font-size:32px;
	line-height:initial;
	font-family: 'Lato';
}

.metaslider.custom-header .flex-control-nav {
	bottom:80px;
}

.metaslider.custom-header .flex-control-paging li a {
	width:26px;
	height:26px;
	background:#fff;
	margin:0 10px;
}

.metaslider.custom-header .flex-control-paging li a.flex-active {
	background:#da5f15;
}

@media screen and (max-width: 1000px){
	.metaslider.custom-header .caption-wrap {
		width: calc(100% - 98px);
		left: 48px;
		margin: auto;
	}
	.metaslider.custom-header .caption-wrap .caption p:first-child {
		font-size:26px;
	}
	.metaslider.custom-header .caption-wrap .caption p:last-child {
		font-size:18px;
	}
}
@media screen and (max-width: 768px){
	.metaslider.custom-header {
		display:block !important;
		height:380px !important;
	}
	.metaslider.custom-header .flexslider {
		height:380px !important;
	}
	.metaslider.custom-header .flexslider .flex-viewport {
		height:380px !important;
	}
	.metaslider.custom-header .flexslider ul.slides {
		height:380px !important;
	}
	.metaslider.custom-header .flexslider ul.slides li {
		height:380px !important;
	}
	.metaslider.custom-header .flexslider ul.slides li img {
		height:380px !important;
		object-fit:cover;
	}
	.metaslider.custom-header .flex-control-nav {
		bottom:40px;
	}
}
@media screen and (max-width: 500px){
	.metaslider.custom-header .caption-wrap .caption p:first-child {
		padding:15px;
		font-size:22px;
	}
	.metaslider.custom-header .caption-wrap .caption p:last-child {
		padding:10px;
		margin-top:10px;
		font-size:14px;
	}
}