/*
 *	Shropshire UI Pattern Library
 *
 *	Guidance:
 *	- Use longhand styles so changes between versions are clear
 *	- Always use the lowest possible specificity to make overrides simple
 *	- Always use relative sizes over pixels to make responsive design easier, use min and max-width when necessary
 *	- Always show your working when performing calculations e.g. font-size: 2em; 32px / 16px = 2
 *
 *	Contents
 *	1.	Reset
 *	2.	Base styles
 *	3.	Layout
 *	4.	Content
 *	5.	Buttons
 *	6.	Forms
 *	7.	Messages
 *	8.	Closeable
 *	9.	Tables
 *	10.	Tabs
 *	11.	Hide / reveal
 *	12.	Modal window
 *	13.	Scroll-to
 *  14. Accessibility

 *		Appendix
 */



/* *****************************************************************************************************************************
 *	1. Reset
 *	Level the playing field - global reset courtesy of Eric Meyer
 *	http://meyerweb.com/eric/tools/css/reset/ 
 *	v2.0 | 20110126
 *	License: none (public domain)
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea, button, select, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	border: 0;
	padding: 0;
	margin: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	2. Base styles
 */

body {
	font-size: 16px;
	line-height: 1.25em;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-family: 'Helvetica Neue', Arial, Helvetica, 'Segoe UI', sans-serif;
	color: #333;
}

h1, h2, h3, h4, h5, h6, legend {
	font-family: 'myriad-pro', 'Helvetica Neue', Arial, Helvetica, 'Segoe UI', Sans-serif;
	font-weight: 600;
	color: #555;
}

h1 {
	font-size: 2em;
	line-height: 1.25em;
	margin-bottom: 0.5em;
}

h2 {
	font-size: 1.625em;
	line-height: 1.15em;
	margin-bottom: 0.5em;
}

h3 {
	font-size: 1.375em;
	line-height: 1.13em;
	margin-bottom: 0.5em;
}

h4, h5, h6 {
	font-size: 1.125em;
	line-height: 1.11em;
	margin-bottom: 0.5em;
}

h1 .subtitle,
h2 .subtitle,
h3 .subtitle {
	display: block;
	font-weight: normal;
	color: #555;
	border-bottom: 1px solid #e9e9e9;
}

h1 .subtitle {
	font-size: 1.25em;
}

h2 .subtitle {
	font-size: 1.125em;
}

h3 .subtitle {
	font-size: 1em;
}
p {
	margin-bottom: 1.5em;
}
table, 
address {
	font-size: 0.875em;
	line-height: 1.7145em;
	margin-bottom: 1.5em;
}

a:link {
	color: #2266ca;
	text-decoration: none;
}

a:visited {
    color: #590C5F;
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: #2c2c2c;
}

a:focus {
	outline: 3px solid #eeb92a;
}

small {
	font-size: 0.75em;
	line-height: 1.5em;
}

em {
	font-style: italic; 
}

strong {
	font-weight: bold;
}

legend {
	color: #2c2c2c;
}

input[type="submit"],
input[type="reset"] {
	cursor: pointer;
}

th,td {
	border: 1px solid #ddd;
	border-left: none;
	border-right: none;
	padding: 0.5em;
	word-break: break-word;
}

th {
	font-weight: bold;
	text-align: left;
	border-bottom: 2px solid #ddd;
	border-top: none;
}

code,
pre,
kbd,
tt,
samp {
	font-family: Monaco, 'Andale Mono','Courier New', monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted;
}

caption {
	text-align: center;
}

dl dd {
	margin-left: 1.29em;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

hr {
	height: 0px;
	border-top: 1px solid #e9e9e9;
}

img, object, embed {
	max-width: 100%;
}

*{
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	
}

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	3. Layout
 */

.container {
	position: relative;
	width: 92%;
	max-width: 1024px; 	/* Adjust as needed - e.g. for wider layout */
	margin: 0 auto;
   /*
	* Example resolutions:	
	* - max 1140 min 280 - full responsive (don't use w/o media queries and responsive design layout)
	* - max 1140 min 620 - desktop & tablet fluid (likely to work with most designs and layouts where no absolute values are used)
	* - max 960 min 720 - desktop fluid + iPad portrait/landscape range
	*/
}

.align-right {
	float: right;
	margin-left: 2%;
}

.align-left {
	float: left;
	margin-right: 2%;
}

.first-in-row {
	/* devolved to ie stylesheet */
}

.last-in-row {
	/* devolved to ie stylesheet */
}

/* Styling of "main-features" sections like looked after children */
.main-features {
padding: 1.7em;
}


/* Styling of "hotlinks" sections - these are small blocks of links/content used in generic homepages */

.hotlinks {
    margin-top: 10px;
}


.sectionhotlinks {
    float: left;
    width: 100%;
    border-radius: 7px;
    background-color: #fff;
    padding-top: 15px;
}


.page-content .sectionhotlinks {
    background-color: #fff;
    padding: 5px;
}

.subsection {
	display:block;
    width: 100%;
    padding-top: 15px;
    padding-left: 10px;
    float: left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.subsection:hover, .subsection:focus {
	background-color: #f4f4f4;
	border-bottom:solid 1px #555;
}

.subsection h2, .subsection h3{
	font-size: 1.2em;
	color:#2266ca;
}

.subsection p {
    font-size: 0.9em;
	color:#555555;
}

    .subsection #readmore {
        font-size: 0.85em;
    }


/* Section Hotlinks */

.sectionhotlinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.subsection {
    padding: 15px;
    margin-bottom: 3%;
    border: solid 1px #555;
    border-radius:4px;
}
.subsection h2:after {
    content: "\00A0\00BB";
}


/*-------------
    GALLERY
-------------*/

.gallery-area {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}

    .gallery-area a {
        margin-bottom: 1em;
        flex: 0 0 50%;
        max-width: 100%;
    }
        .gallery-area a:hover, .gallery-area a:focus {
            background-color: #1C89C8;
        }

.gallery-area .image {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background: transparent;
}

    .gallery-area .image *,
    .gallery-area .image:before,
    .gallery-area .image:after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .gallery-area .image img {
        max-width: 100%;
        backface-visibility: hidden;
        vertical-align: top;
    }

    .gallery-area .image:before,
    .gallery-area .image:after {
        content: '';
        background-color: #fff;
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        opacity: 0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .gallery-area .image:before {
        width: 100%;
        height: 2px;
    }

    .gallery-area .image:after {
        height: 100%;
        width: 2px;
    }


    /*.gallery-area .image a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }*/

    .gallery-area .image:hover img, .gallery-area .image:focus img {
        zoom: 1;
        filter: alpha(opacity=25);
        -webkit-opacity: 0.25;
        opacity: 0.25;
    }

    .gallery-area .image:hover:before, .gallery-area .image:focus:before,
    .gallery-area .image:hover:after, .gallery-area .image:focus:after {
        opacity: 1;
    }

    .gallery-area .image:hover:before, .gallery-area .image:focus:before {
        width: 50px;
    }

    .gallery-area .image:hover:after, .gallery-area .image:focus:after{
        height: 50px;
    }

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	4. Content
 *	- Styles anything within a .content class with lovely content styles
 */

.content a:visited {
	color: #590c5f;
}

.content ul ,
.content ol{
	list-style-position: outside;
	list-style-image: none;
	margin: 0 0 1.5em 1.5em;
}

.content ul {
	list-style-type: disc;
}

.content ol {
	list-style-type: decimal;
}

/*
.content blockquote {
	padding-left: 3%;
	border-left: 3px solid #e9e9e9;
	color: #555;
}

.content blockquote p {
	font-family: Georgia, Cambria, Times, 'Times New Roman', Serif;
	margin-bottom: 0;
}

.content blockquote small {
	color: #777;
}

.content img {
	width: auto;
	height: auto;
	margin-bottom: 1.5em;
}
*/
.content iframe {
	width: 100%;
	border: none;
	margin-bottom: 2em;
}

a.external-link {
    background-color: transparent;
    background-image: url(https://images.static.shropshire.gov.uk/newshropshire/v1.4.1/img/external-link.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 16px 16px;
    padding-right: 1.18em;
}

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	5. Buttons
 */

a.button, 
.button {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	padding: 0.33em 1em 0.33em;
	border-radius: 4px;
	-webkit-appearance: none;
}

a.button.primary, 
.button.primary {
	color: #fff;
	background-color: #008a0e;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

a.button.secondary, 
.button.secondary {
	color: #333;
	background-color: #e6e6e6;
}

.button.primary,
.button.secondary {
	font-size: 14px;
	border-width: 2px;
	border-style: solid;
	border-color: rgba(200, 200, 200, 0.25) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(200, 200, 200, 0.25);
}

a.button.primary, 
a.button.secondary {
	border: 0;
}

a.button.tertiary, 
.button.tertiary {
	color: #dd4400;
	background-color: transparent;
	border-color: transparent;
}

a.button.primary:hover, 
.button.primary:hover, 
a.button.primary:focus, 
.button.primary:focus, 
a.button.primary:active, 
.button.primary:active {
	background-color: #2c2c2c;
}

a.button.secondary:hover, 
.button.secondary:hover, 
a.button.secondary:focus, 
.button.secondary:focus, 
a.button.secondary:active, 
.button.secondary:active {
	background-color: #ddd;
}

a.button.tertiary:hover, 
.button.tertiary:hover, 
a.button.tertiary:focus, 
.button.tertiary:focus, 
a.button.tertiary:active, 
.button.tertiary:active {
	text-decoration: underline;
}


/* disabled */
/*
input.button.primary:disabled,
input.button.secondary:disabled,
input.button.tertiary:disabled {
	cursor: default;
}

input.button.primary:disabled, 
input.button.secondary:disabled {
	color: #656565;
	background-color: #bbb;
	text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
}

input.button.tertiary:disabled {
	color: #959595;
	text-decoration: none;
}
*/
/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	6. Forms
 */

.form {
	float: left;
	width: 100%;
}

.form section.form-fields {
	float: left;
	width: 100%;
}

.form fieldset {
	float: left;
	width: 100%;
	border-width: 0 0 1px;
	border-style: solid;
	border-color: #e9e9e9;
	/*padding: 0 2% 1.5em;*/
	margin-bottom: 1.5em;
}

.form fieldset legend {
	float: left;
	width: 100%;
	font-size: 1.25em;
	line-height: 1.5em;
	font-weight: bold;
	color: #555;
	margin-bottom: 1em;
}

.form fieldset div {
	width: 100%;
	float: left;
	margin-bottom: 1em;
}

.form fieldset div ul {
	margin-bottom: 0;
}

.form fieldset label {
	display: block;
	font-size:  0.8125em;
	line-height: 2em;
}

.form fieldset ul label {
	font-size:  0.8125em;
	line-height: 1.5em;
}
.form textarea {
    width: 100%;
}

.form input[type=email],
.form input[type=text],
.form input[type=password],
.form input[type=search],
.form input[type=date],
.form input[type=tel],
.form select,
.form textarea,
.form .uneditable-input {
	display: block;
	font-size:  0.8125em;
	line-height: 1.5em;
	border: 1px solid #ccc;
	padding: 0.33em;
	border-radius: 3px;
}

.form input[type=email],
.form input[type=text],
.form input[type=password],
.form input[type=search],
.form input[type=date],
.form input[type=tel],
.form select,
.form textarea {
	background-color: #fff;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: border linear 0.2s, box-shadow linear 0.2s;
}

.form .large {
	width: 100%;
}

.form .small {
	width: 40.5%;
}

.form select {
	width: auto;
}
aside .form select {
    width: 100%;
}

.form input[type=file] {
	/*border: 1px solid #e9e9e9;*/
}

.form input[type=search] {
	-webkit-appearance: textfield;
}

.form input[type=email]:focus,
.form input[type=text]:focus,
.form input[type=password]:focus,
.form input[type=search]:focus,
.form input[type=date]:focus,
.form input[type=tel]:focus,
.form textarea:focus {
	outline: none;
	border-color: rgba(82, 168, 236, 0.8);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}

.form input[type=email]:disabled,
.form input[type=text]:disabled,
.form input[type=password]:disabled,
.form input[type=search]:disabled,
.form input[type=date]:disabled,
.form input[type=tel]:disabled,
.form textarea:disabled {
	background-color: #f4f4f4;
}

.form .dual-field {
	padding: 0;
	margin-bottom: 0;
}

.form .dual-field div {
	float: left;
	width: 45%;
	margin-right: 5%;
}

.form .help {
	display: block;
	color: #555;
	line-height: 2em;
}

.form .error input, 
.form .error textarea, 
.form input.error, 
.form textarea.error {
	text-indent: 24px;
	border-color: #e62525;
	background-color: transparent;
	background-image: url(https://images.static.shropshire.gov.uk/shared/scuipatternlib/v1.3/img/error.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	background-size: 16px 16px;
}

.form .error .help, 
.form .error.help {
	font-weight: bold;
	color: #e62525;
}

.form label span.required {
	color: #2d5b00;
    position: relative;
    top: 0.3em;
}

.form section.form-guidance {
	float: right;
	width: 96%;
	color: #555;
	background-color: #f4f4f4;
	padding: 1em 2%;
	margin-bottom: 1.5em
}

.form section.form-guidance h1,
.form section.form-guidance h2,
.form section.form-guidance h3,
.form section.form-guidance h4 {
	font-weight: normal;
}

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 * 	7. Messages
 */

.message {
	/* font-size: 14px; */
	border-width: 1px;
	border-style: solid;
	padding: 0.5em 1em;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}

.message.success {
	color: #2b660b;
	background-color: #cdf8b5;
	border-color: #008a0e;
}

.message.warning {
	background-color: #fffeab;
	border-color: #b85e00;
	display: inline-block;
}

.message.error {
	color: #7e0c0c;
	background-color: #f3cccc;
	border-color: #8a1f11;
}

.message.notification {
	background-color: #d9edf7;
	border-color: #007db8;
}

.message.newsflash {
	background-color: #d43531;
	border-color: #bce8f1;
    color: white;
}

.message.newsflash h2 {
	color: white;
}
         


/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	8. Closeable
 */
/*
.closable {
	position: relative;
}
*/
/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	9. Tables
 */

.content table {
	width: 100%;
	border: 0;
	border-spacing: 0;
	table-layout: fixed;
}

.content table thead tr {
	background-color: #e8f4fa;
	word-break: break-word;
}

.content table tr:nth-child(even) {
	background-color: #f4f4f4;
}
 
.content table tr:hover {
	background-color: #e7e7e7;
}

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	10. Tabs
 */

.tabs.enabled {
	float: left;
	width: 99%;
	list-style: none outside none;
	border-bottom: 1px solid #e9e9e9;
	padding: 0 0 0 1%;
	margin-left: 0;
}

.tabs.enabled li a {
	display: block;
	position: relative;
	float: left;
	top: 1px;
	text-decoration: none;
	color: #333;
	background-color: #e9e9e9;
	border: 1px solid #e9e9e9;
	padding: 0.3em 0.5em;
	margin-right: 0.5em;
}

.tabs.enabled li a.active-tab {
	background-color: #fff;
	border-bottom: 1px solid #fff;
}

.tabs.enabled li a:hover, 
.tabs.enabled li a:focus, 
.tabs.enabled li a:active {
	color: #fff;
	background-color: #555;
}

.tabs.enabled li a.active-tab:hover, 
.tabs.enabled li a.active-tab:focus, 
.tabs.enabled li a.active-tab:active {
	color: #333;
	background-color: #fff;
}

.tab {
	float: left;
	width: 98%;
	border-bottom: 1px solid #e9e9e9;
	padding: 0 1%;
}

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	11. Hide / reveal
 */

.hide-reveal.enabled h1,
.hide-reveal.enabled h2,
.hide-reveal.enabled h3,
.hide-reveal.enabled h4,
.hide-reveal.enabled h5,
.hide-reveal.enabled h6 {
	font-size: 18px;
	cursor: pointer;
	background-color: transparent;
	background-image: url(https://images.static.shropshire.gov.uk/shared/scuipatternlib/v1.5.1/img/navigation-right.png);
	background-position: left 0.35em;
	background-repeat: no-repeat;
	padding-left: 24px;
	display: inline-block;
	width: 100%;
	clear: both;
}

.hide-reveal.enabled div {
	padding-left: 24px;
	float: left;
}

.hide-reveal.enabled {
	float: left;
	width: 100%;
}

.hide-reveal.enabled h1.down,
.hide-reveal.enabled h2.down,
.hide-reveal.enabled h3.down,
.hide-reveal.enabled h4.down,
.hide-reveal.enabled h5.down,
.hide-reveal.enabled h6.down {
	background-image: url(https://images.static.shropshire.gov.uk/shared/scuipatternlib/v1.3/img/navigation-down.png);
}

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	12. Modal window
 */

.modal-overlay {
	display: none;
	position: fixed;
	float: left;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 2000;
	background-color: rgba(0, 0, 0, 0.75);
	cursor: pointer;
}

.modal-window {
	display: none;
	position: absolute;
	/* top: 30%;				we need a more intelligent value (done in js) */
	left: 0;
	width: 100%;
	z-index: 3000;
	cursor: pointer;
}

.modal {
	position: relative;
	width: 75%;
	min-width: 300px;
	max-width: 550px;
	cursor: default;
	background-color: #fff;
	padding: 0;
	margin: 0 auto;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.66);
}

.modal-close-x {
	position: absolute;
	display: block;
	top: 16px;
	right: 16px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background-image: url(https://images.static.shropshire.gov.uk/shared/scuipatternlib/v1.3/img/navigation-close.png);
	background-repeat: no-repeat;
}

.modal-header {
	border-bottom: 1px solid #e9e9e9;
	padding: 1em 4%;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4 {
	margin-bottom: 0;
}

.modal-body {
	padding: 1em 4%;
}

.modal-body .form {
	float: none;
	width: auto;
}

.modal-body .form legend {
	display: none;
}

.modal-footer {
	background-color: #f4f4f4;
	border-top: 1px solid #ddd;
	padding: 1em 4%;
	margin-bottom: 0;
	box-shadow: 0 1px 0 #fff inset;
	border-radius: 0 0 3px 3px;
}

.modal-footer p {
	margin-bottom: 0;
}

/* ***************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	13. Scroll-to
 */

ul.scroll-to {
	width: 96%;
	list-style: none outside none;
	color: #555;
	background-color: #fafafa;
	border-top: 1px dotted #e9e9e9;
	border-bottom: 1px dotted #e9e9e9;
	padding: 0.25em 2%;
	margin: 0 0 1.5em 0;
}

ul.scroll-to li {
	display: inline;
	margin-right: 1em;
}

ul.scroll-to li.scroll-to-link {
	background-image: url(https://images.static.shropshire.gov.uk/shared/scuipatternlib/v1.3/img/navigation-down.png);
	background-position: left 50%;
	background-repeat: no-repeat;
	padding-left: 24px;
}

.back-to-top {
	clear: both;
	text-align: right;
	margin-bottom: 0;
}

.back-to-top a {
	background-color: transparent;
	background-image: url(https://images.static.shropshire.gov.uk/shared/scuipatternlib/v1.3/img/navigation-up.png);
	background-position: left 50%;
	background-repeat: no-repeat;
	padding-left: 24px;
}

/* ***************************************************************************************************************************** */

/* ****************************************************************************************************************************
 * 14. ACCESSIBILITY
 */

.accessibility_nfd,
.accessibility_nfd a,
.accessibility_nfd a:hover,
.accessibility_nfd a:visited
 {	
/* Hide content for standard display, but not for screen readers */
	position: absolute;
	left: -999px;	
	z-index: 1001;
}

/* Position content for top of page */
.nfd_top {
	top: 0;
}

/* Position content for bottom of page - centred in footer */
.nfd_bottom { 
	float: left;
	padding-top: 8px;
	position: relative;
	text-align: center;
	width: 100%;
}

.accessibility_nfd  a:focus,
.accessibility_nfd  a:active{	
/* Show links for non-mouse navigation */
	border: 1px solid #FFFFFF;
	background-color: #2C2C2C;
	padding: 6px;
	color: #FFFFFF;
	min-width: 150px;
	outline: none;
	text-align: center;
	
	/* CSS3 enhancements */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	
	-moz-box-shadow: 2px 2px 5px #5F5F5F;
	-webkit-box-shadow: 2px 2px 5px #5F5F5F;
	box-shadow: 2px 2px 5px #5F5F5F;
}

.nfd_top a:focus,
.nfd_top a:active {
	position: absolute;
	left: 1150px; /* relative to container so -999px + 1150px = left: 151px */
	top: 8px;
}

.nfd_bottom a:focus,
.nfd_bottom a:active {
	left: 1000px; /* relative to container so -999px + 1000px = left: 1px */
	position: relative;
}

/* ************************************************************************************************************************** */



/* *****************************************************************************************************************************
 *	Appendix - resuable classes
 */

.hidden {
	/* display: none !important; */
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
}

.visually-hidden {
	display: none;
}

/* ***************************************************************************************************************************** */




/* *****************************************************************************************************************************
		TABLET
 *******************************************************************************************************************************/
@media (min-width:40.063em){

/*  Base styles */

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

h4, h5, h6 {
	font-size: 1.125em;
}

h1 .subtitle {
	font-size: 1.375em;
}

h2 .subtitle {
	font-size: 1.25em;
	margin: 0 4%;
    padding-bottom: 0.333em;
}

h3 .subtitle {
	font-size: 1.125em;
	margin: 0 4%;
    padding-bottom: 0.333em;
}

p,
ul, ol, 
table, 
address {
	font-size: 1em;
	line-height: 1.75em;
}

/* Layout  */

/* Styling of "main-features" sections like looked after children */
.main-features {
    padding: 1em 1.7em;
}
.subsection {
    width: 30%;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 1.5% 3% 1.5%;
}

/* Gallery */
.gallery-area .image {
    flex: 0 0 32%;
    margin-right: 1em;
}
.gallery-area .image:nth-child(3n) {
    flex: 0 0 32%;
    margin-right: 0;
}

/* Buttons  */

.button.primary,
.button.secondary {
	font-size:1em;
}

/* Forms */

.form section.form-fields {
	width: 62%;
	margin-right: 4%;
}

.form section.form-guidance {
	width: 30%;
}

.form fieldset legend  {
	font-size:1.5em;
}

.form fieldset div {
	margin-bottom: 1.5em;
}

.form fieldset label {
	font-size: 1em;
}

.form input[type=email],
.form input[type=text],
.form input[type=password],
.form input[type=search],
.form input[type=date],
.form input[type=tel],
.form select,
.form textarea,
.form .uneditable-input {
	font-size:1em;
}

/*  Hide / reveal */

.hide-reveal.enabled h1.parent-container,
.hide-reveal.enabled h2.parent-container,
.hide-reveal.enabled h3.parent-container,
.hide-reveal.enabled h4.parent-container,
.hide-reveal.enabled h5.parent-container,
.hide-reveal.enabled h6.parent-container {
	font-size: 1.25em;
}

}