/*
	Theme Name: Dunsop Bridge Wordpress
	Theme URI: http://www.dunsopbridge.com
	Description: Dunsop Bridge Consultation WordPress Theme
	Version: 1.0
	Author: Andrew Whitehead
	Author URI: http://www.andrew-whitehead.co.uk
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}

* {
	box-sizing: border-box;
}

html {
}

body {
	margin: 0;
	padding: 0;
	font: 76%/1.5 'Helvetica', 'Arial', sans-serif;
	background-color: #FFF;
	color: #141414;
    position: relative;
}

a {
	color: #444;
	text-decoration: underline;
}

.wrapper {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

header, .intro {
    text-align: left;
}

header {
    text-align: left;
    background-color: #B8C28E;
    display: flex;
	flex-wrap: wrap;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 15;
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.33);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.33);
	box-shadow: 0px 1px 4px rgba(0,0,0,0.33);
}

hgroup {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0 auto;
}

hgroup h2 {
    flex: auto;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1;
    margin: 0;
    padding-right: 10px;
}

hgroup a {
	text-decoration: none;
}

hgroup .header-byline {
	display: block;
	text-transform: none;
	font-size: .88rem;
	font-weight: normal;
	margin: 4px 0;
}

.mobile-switch {
	list-style-type: none;
	padding: 0;
	margin: 16px 0;
}
.mobile-switch li {
	width: 33px;
	height: 33px;
	float: left;
}
.mobile-switch li a {
	width: 33px;
	height: 33px;
	text-indent: -9999px;
    background-color:#212121;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('assets/mobile-nav.svg');
/*
    background-image: 
	linear-gradient(transparent, transparent),
	url('assets/mobile-nav.svg');
*/
    border-radius: 20%;
	display: block;
}

.mobile-switch #navmenu.live {
	background-image: url('assets/mobile-nav-close.svg');
}

header nav {
	position: relative;
	flex:  1 1 100%;
	justify-content: space-between;
	margin: 0;
	display: none;
}

header nav > ul {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	margin: 4px 0 0;
	padding: 0 20px;
	align-items: flex-start;
	background-color:#212121;
	list-style-type: none;
	line-height: 1;
}

header nav li {
	width: 100%;
	border-bottom: 1px solid #919586;
}

header nav ul > li:first-of-type {
	padding-left: 0;
	border-left: 0;
}

header nav ul > li:last-of-type {
    border-bottom: none;
}

header nav.nav-main a {
	display: block;
	padding: 12px 0;
	text-decoration: none;
	font-size: .88rem;
	color: #fff;
}

hgroup, .content-area {
    width: 100%;
    max-width: 90%;
    text-align: left;
    margin: 0 auto;
}

.logo {
    width: 148px;
    height: 38px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url(assets/dol-logo.svg) no-repeat;
}

.intro {
    background-color: #B8C28E;
    background: #B8C28E url(assets/dunsop-bridge-intro.png) center top no-repeat;
    background-size: 90%;
    text-align: center;
    padding: 66% 0 16px;
}

.title {
    text-transform: uppercase;
    border-bottom: 1px solid #141414;
    padding-bottom: 8px;
}

.custom-html-widget {
    display: flex;
    flex: 1 1 100%;
}

.map {
    margin: 16px auto;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: url(assets/map-sml.png) center center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.map ul {
    position: absolute;    
    list-style-type: none;
    padding: 0;
    width: 55%;
    top: 22%;
    left: 27%;
}

.map li {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.map a {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 40%;
}

footer {
    border-top: 1px solid #B8C28E;
}

footer .content-intro {
    text-align: center;
}

footer .logo {
    margin: 16px auto;
    width: 94px;
}

a.questionnaire {
    display: block;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    background-color: #141414;
    margin: 26px 0;
}

a.questionnaire:hover {
	background-color: #444;
}

.the-old-garage .intro {
    background: url(assets/garage-illustration.png) center top no-repeat;
    background-size: 90%;
    text-align: center;
    padding: 33% 0 16px;
}

.root-farm .intro {
    background: url(assets/root-farm-illustration.png) center top no-repeat;
    background-size: 90%;
    text-align: center;
    padding: 40% 0 16px;
}

.the-old-garage .content-area, .root-farm .content-area {
    display: flex;
    flex-flow: column nowrap;
    }

figure.break-right {
    margin: 20px auto;
    text-align: center;
}

.break-right figcaption {
	margin-top: 16px;
}

.infographic {
/*    margin: 10px auto;*/
}

.updated {
	font-size: .72rem;
	font-style: italic;
}

/* Typography */
p, ul {
    font-size: .88rem;
}

@media screen and (min-width: 400px) {
    hgroup h2 {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 600px) {
    .map {
        background: url(assets/map-lrg.png) center center no-repeat;
        background-size: contain;
    }

    .map ul {
    width: 25%;
    top: 37%;
    left: 45%;
    list-style-type: none;
    padding: 0;
    }

    .map li {
    padding-bottom: 33%;
    text-indent: 100%;
    }

    .map a {
    padding-bottom: 40%;
    }
}

@media screen and (min-width: 1024px) {
    
    .content-area .title {
        width: 100%;
        font-size:1.16rem;
    }

    .the-old-garage .content-area, .root-farm .content-area {
        flex-flow: row wrap;
    }

    .the-old-garage .page-content, .root-farm .page-content {
        flex: 1;
    }

    figure.break-right {
        margin: 20px 0 20px 20px;
        text-align: center;
        flex: 1 1 auto;
        max-width: 558px;
    }

    p, ul {
    font-size: .96rem;
    }
	
	// remembrance

	.intro.remembrance {
		background-color: #000;
		background-image: none;
		color: #fff;
		text-align: center;
	}

    footer .logo {
    margin: 16px auto;
    width: 188px;
    height: 72px;
    background-size: contain;
    }
}