/*
Theme Name: Elgin Farmers' market
Theme URI: http://elginfarmersmarket.com/
Author: EBCLark UX Design
Author URI: http://www.ebclark.co.uk/

*/


@font-face {
    font-family: 'Sunday';
    src: url('../fonts/Sunday-Regular.eot');
    src: url('../fonts/Sunday-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Sunday-Regular.woff2') format('woff2'),
        url('../fonts/Sunday-Regular.woff') format('woff'),
        url('../fonts/Sunday-Regular.ttf') format('truetype'),
        url('../fonts/Sunday-Regular.svg#Sunday-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


* { margin: 0; padding: 0; box-sizing: border-box; }
*:focus { outline: none; }

html { font-size: 100%; }
body { background: #eee; color: #000; font-family: Oswald, sans-serif; font-weight: 300; line-height: 1.4; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }


/* ---------- */
/* GLOBAL */

img { max-width: 100%; height: auto; display: inherit; }
.image-container { background-size: cover; background-position: center; background-repeat: no-repeat; }
.image-container.align-top { background-position: center top; }

.container { max-width: 87.5rem; margin: 0 auto; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px !important; }

.media-size { width: 100px; }

	@media screen and (min-width: 64rem) {
		.media-size { width: 200px; }
	}


/* Set colour variables */
.blue { --fullcolor: #64C6C6; }
.green { --fullcolor: #6F903F; }
.red { --fullcolor: #BA4427; }
.purple { --fullcolor: #922545; }
.grey { --fullcolor: #888; }
.white { --fullcolor: #fff; }
.black { --fullcolor: #000; }


/* Typography */
strong { font-weight: 600; }

h1 { font-family: Sunday; font-size: 2.5rem; font-weight: 300; line-height: 1.2; }
h2 { font-family: Sunday; font-size: 1.8rem; font-weight: 300; }
h3, h4 { font-size: 1rem; font-weight: 600; }

p, li, dt, dd { font-size: 1rem; }
li { position: relative; }

ol { padding-left: 2rem; }

ul { list-style: none; }
ul li { padding-left: 2rem; }
ul li:before { content: '\25CF'; position: absolute; left: .5rem; top: -1px; }

	@media screen and (min-width: 64rem) {
		h1 { font-size: 3rem; }
		h3, h4 { font-size: 1.15rem; }

		p, li, dt, dd { font-size: 1.15rem; }
	}


form,
	form label,
	form label span { width: 100%; display: inline-block; }
form label,
	form label span { padding-top: 1rem; }

textarea,
	input[type="text"],
	input[type="email"],
	input[type="number"] { -webkit-appearance: none; border-radius: 0; width: 100%; border: 1px solid #000; padding: 1rem; font-family: Oswald, sans-serif; font-size: 1rem; }

input[type="button"],
	input[type="submit"] { -webkit-appearance: none; border-radius: 0; border: 0; margin-top: 1rem; display: inline-block; font-weight: 300; font-size: 1rem; text-transform: uppercase; border-bottom: 0; padding: 10px 30px; color: #fff; background: #922545; cursor: pointer; }


/* Calls to action */
a,
	a:link,
	a:visited { text-decoration: none; color: #000; border-bottom: 1px solid #000; }
a:hover,
	a:focus { border-bottom: 1px solid #fff; }

a.button,
	a.button:link,
	a.button:visited { display: inline-block; font-weight: 300; font-size: 1rem; text-transform: uppercase; border-bottom: 0; padding: 10px 30px; color: #fff; background: #000; background: var(--fullcolor); }

	@media screen and (min-width: 64rem) {
		a.button,
			a.button:link,
			a.button:visited { font-size: 1.25rem; }
	}

h1 a, h2 a, h3 a, h4 a { border-bottom: 0 !important; }


/* Header */
header { background: #fff;  max-width: 100rem; margin: 0 auto; }
header .container { padding: 1rem 2rem; }

header a,
	header a:link,
	header a:visited { border-bottom: 1px solid #fff; }
header a:hover,
	header a:focus { border-bottom: 1px solid #000; }
header a.logo { display: inline-block; width: 152px; height: 75px; border: 0; float: left; }

header nav { display: flex; justify-content: space-between; flex-wrap: wrap; }

	@media screen and (min-width: 48rem) {
		header a.logo { width: 205px; height: 100px; grid-column: 1 / 2; grid-row: 1 / span 2; }

		header nav { display: grid; grid-template-columns: 205px auto; grid-template-rows: 50% 50%; }
	}
	@media screen and (min-width: 64rem) {
		header .container { padding: 2rem; }
	}

header nav ul li { display: block; padding-left: 0; text-transform: uppercase; }
header nav ul li:before { content: ''; position: relative; left: 0; top: 0; }

header nav ul.sub { float: right;  text-align: right; margin-top: 2.75rem; }
header nav ul.sub li { display: inline-block; padding-left: .75rem; }
header nav ul.sub li a { display: inline-block; border: 0; }
header nav ul.sub li a:after { font-family: 'icomoon' !important; font-size: 1.5rem; }
header nav ul.sub li.instagram a:after { content: "\e907"; }
header nav ul.sub li.facebook a:after { content: "\e905"; }
header nav ul.sub li.menu a:after { content: "\e90a"; }
header nav ul.sub li.menu.open a:after { content: "\e909"; }

header nav ul.menu { width: 100%; clear: both; display: none; }
header nav ul.menu li { padding: 1rem 0 0; }

	@media screen and (min-width: 48rem) {
		header nav { text-align: right; }

		header nav ul.sub { margin-top: 0; grid-column: 2 / 2; grid-row: 1 / 1; align-self: end; }
		header nav ul.sub li a:after { font-size: 1.75rem; }
		header nav ul.sub li.menu { display: none; }

		header nav ul.menu { display: block; grid-column: 2 / 2; grid-row: 2 / 2; align-self: end; }
		header nav ul.menu li { display: inline-block; padding: 0 0 0 1.5rem; }
	}


/* Main */
main { background: #fff; max-width: 100rem; margin: 0 auto; padding: .1rem 0; }

main.has-menu nav ul li { display: block; padding-left: 0; text-transform: uppercase; }
main.has-menu nav ul li:before { content: ''; position: relative; left: 0; top: 0; }

main.has-menu nav { padding: 0 2rem; margin: 2rem auto 0; }
main.has-menu nav.mobile-hide { display: none; }

main.has-menu nav .section-menu:after { font-family: 'icomoon' !important; content: "\e902"; padding-left: 1rem; }
main.has-menu nav .section-menu.open:after { content: "\e900"; padding-left: .55rem; }

main.has-menu nav h2 { font-size: 1.25rem; margin-bottom: 1rem; }
main.has-menu nav ul { width: 100%; clear: both; display: none; }
main.has-menu nav ul li { padding: 0 0 1rem 0; }

	@media screen and (min-width: 48rem) {
		
		main.has-menu nav { padding: 0 0; margin: 4rem auto; width: 20%; }
	}
	@media screen and (min-width: 64rem) {
		main.has-menu > .container { display: flex; justify-content: space-between; }

		main.has-menu nav.mobile-hide { display: block; }

		main.has-menu nav .section-menu { display: none; }

		main.has-menu nav ul { display: block; }

		main.has-menu .content { text-align: left; width: 75%; }
	}


/* Footer */
footer { background: #000;  max-width: 100rem; color: #fff; margin: 0 auto; }
footer .container { padding: 1rem 2rem; display: flex; justify-content: space-between; }

footer p { align-self: center; }

footer ul li { display: block; padding-left: 0; text-transform: uppercase; }
footer ul li:before { content: ''; position: relative; left: 0; top: 0; }

footer ul { text-align: right; align-self: center; }
footer ul li { display: inline-block; padding-left: .75rem; }
footer ul li a { display: inline-block; border: 0 !important; }
footer ul li a:after { font-family: 'icomoon' !important; font-size: 1.5rem; }
footer ul li.instagram a:after { content: "\e907"; }
footer ul li.facebook a:after { content: "\e905"; }

	@media screen and (min-width: 64rem) {
		footer .container { padding: 2rem; }
	}


/* ---------- */
/* HERO */
.hero { background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; max-width: 100rem; margin: 0 auto; }

.hero .mask { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.4); background: linear-gradient(to left, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.0)); }

.hero .container { padding: 4rem 2rem; position: relative; z-index: 10; display: flex; text-align: center; justify-content: center; }

.hero .copy { display: inline-block; }

.hero h1 { color: #fff; font-size: 4rem; border-top: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; padding-bottom: 1.2rem; }
.hero p { color: #fff; font-size: 1.25rem; margin: 1rem 0; }

	@media screen and (min-width: 48rem) {
		.hero .container { padding: 6rem 2rem; }

		.hero.left .mask {  right: 30%; background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.0)); }
		.hero.right .mask { left: 30%; background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.0)); }
		
		.hero.left .container { text-align: left; justify-content: flex-start; }
		.hero.right .container { text-align: left; justify-content: flex-end; }
	}
	@media screen and (min-width: 64rem) {
		.hero h1 { font-size: 6rem; }
		.hero p { font-size: 1.75rem; }
		.hero.center p { margin: 2rem auto; width: 60%; }
	}

.carousel { background: #fff; position: relative; }
.slick-dots { list-style: none; position: absolute; bottom: 2rem; right: 2rem; }
.slick-dots li { padding-left: 0; display: inline-block; margin-right: .5rem; }
.slick-dots li:before { content: ''; }
.slick-dots li button { width: 1rem; height: 1rem; background: rgba(255,255,255,.5); border: 0; border-radius: 50%; text-indent: -2000rem; }
.slick-dots li.slick-active button { background: rgba(255,255,255,1); }

.carousel.disabled .slick-dots { display: none; }


/* ---------- */
/* BLOCKS */

/* Image block */
.image-block .container { max-width: 67.5rem; padding: 0 2rem; margin: 4rem auto; position: relative; z-index: 10; }

.image-block .copy { margin-bottom: 3rem; }
.image-block .copy h1,
	.image-block .copy h2 { margin-bottom: 2rem; }
main.has-menu .image-block .copy h1,
	main.has-menu .image-block .copy h2 { font-size: 1.5rem; }
.image-block .copy h3,
	.image-block .copy p { margin-bottom: 1rem; }
.image-block .copy a.button { margin-top: 2rem;  }

.image-block img { width: 80%; margin: 0 auto; }

	@media screen and (min-width: 48rem) {
		.image-block .container { margin: 6rem auto; display: flex; text-align: left; justify-content: space-between; align-items: flex-start; }
		main.has-menu .image-block .container { margin: 4rem auto; }
		.image-block.copy-right .container { flex-direction: row-reverse; }

		.image-block .copy { margin-bottom: 0; width: 45%; }
		.image-block.no-image .copy { width: 100%; }

		.image-block img { width: 45%; max-width: 100%; margin: 0 0; }
	}


/* Border heading */
.border-heading .container { max-width: 67.5rem; padding: 0 2rem; margin: 4rem auto; position: relative; z-index: 10; }
.border-heading:first-child .container { margin-top: 1rem !important; }
.border-heading h1,
	.border-heading h2 { border-top: 2px solid #000; padding-top: 2rem; margin: 0; }
.border-heading h1.plain,
	.border-heading h2.plain { border-top: 0; padding-top: 1rem; }
	
	@media screen and (min-width: 48rem) {
		.border-heading .container { margin: 6rem auto; }
		main.has-menu .border-heading .container { margin: 4rem auto; }
	}	
	@media screen and (min-width: 64rem) {
		.border-heading .container { text-align: center; }
		.border-heading h2 { width: 60%; margin: 0 auto; }
		main.has-menu .border-heading .container { text-align: left; }
		main.has-menu .border-heading h1,
			main.has-menu .border-heading h2 { width: 100%; margin: 0 0; }
	}


/* Announcement */
.announcement { background: #000; background: var(--fullcolor); color: #fff !important; }
.announcement .container { padding: 1rem 2rem; position: relative; }
.announcement .container a { color: #fff; border: 0 !important; }

	@media screen and (min-width: 64rem) {
		.announcement .container { text-align: center; }
	}


/* Text */
.text .container { max-width: 57.5rem; padding: 0 2rem; margin: 4rem auto; position: relative; z-index: 10; }
.text * { margin-bottom: 1rem; }
.text :last-child { margin-bottom: 0; }
	
	@media screen and (min-width: 48rem) {
		.text .container { margin: 6rem auto; }
		main.has-menu .text .container { margin: 4rem auto; max-width: 67.5rem;  }
	}
	@media screen and (min-width: 64rem) {
		.text .container { text-align: center; }
		main.has-menu .text .container { text-align: left; }
	}


/* Image */
.image .container { padding: 0 2rem; margin: 4rem auto; position: relative; z-index: 10; text-align: center; }
.image img { width: 100%; }
	
	@media screen and (min-width: 48rem) {
		.image .container { margin: 6rem auto; }
		main.has-menu .image .container { margin: 4rem auto;  }
	}


/* Gallery */
.gallery .container { max-width: 67.5rem; padding: 0 2rem; margin: 4rem auto 1rem; position: relative; z-index: 10; text-align: center; }
.gallery img { width: 100%; }
	
	@media screen and (min-width: 48rem) {
		.gallery .container { margin: 6rem auto 1rem; }
		main.has-menu .gallery .container { margin: 4rem auto 1rem;  }
	}


/* Button */
.button .container { max-width: 67.5rem; padding: 0 2rem; margin: 4rem auto; position: relative; z-index: 10; text-align: center; }
	
	@media screen and (min-width: 48rem) {
		.button .container { margin: 6rem auto; }
		main.has-menu .button .container { margin: 4rem auto; text-align: left; }
	}


/* Map */
.map .container { max-width: 57.5rem; padding: 0 2rem; margin: 4rem auto; position: relative; z-index: 10; }
.map iframe { width: 100%; }
	
	@media screen and (min-width: 48rem) {
		.map .container { margin: 6rem auto; }
		main.has-menu .map .container { margin: 4rem auto; max-width: 67.5rem;  }
	}


/* Shortcode */
.shortcode .container { max-width: 120rem; padding: 0 0; margin: 4rem auto; position: relative; z-index: 10; }
	
	@media screen and (min-width: 48rem) {
		.shortcode .container { margin: 6rem auto; }
		main.has-menu .shortcode .container { margin: 4rem auto;  }
	}


/* Category menu */
.category-menu .container { padding: 0 1.5rem; margin: 2rem auto 0; width: 80%; }

.category-menu ul li { display: block; padding-left: 0; text-transform: uppercase; }
.category-menu ul li:before { content: ''; position: relative; left: 0; top: 0; }

.category-menu .show-menu:after { font-family: 'icomoon' !important; content: "\e902"; padding-left: 1rem; }
.category-menu .show-menu.open:after { content: "\e900"; padding-left: .55rem; }

.category-menu ul { width: 100%; clear: both; display: none; }
.category-menu ul li { padding: 1rem 0 0; }

	@media screen and (min-width: 48rem) {
		.category-menu .container { padding: 0 2rem; margin: 0 auto; width: 100%; text-align: center; }

		.category-menu .show-menu { display: none !important; }

		.category-menu ul { display: block; }
		.category-menu ul li { display: inline-block; padding: .5rem 1rem .5rem 0; }
		.category-menu ul li:after { content: '\25CF'; padding-left: 1rem; }
		.category-menu ul li:last-child:after { content: ''; }
	}


/* GRIDS */
.row { width: 80%; margin: 0 auto; }
.row .item { display: inline-block; margin: .25rem 0; border-bottom: 0; }
.row .item h3 { text-transform: uppercase; padding-top: 1rem; }

	@media screen and (min-width: 42rem) {
		.row { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; }
		.row .item { margin: 0 0; width: 33%; }
	}

.grid-images .container { max-width: 68.5rem; padding: 0 2rem; margin: 4rem auto; position: relative; z-index: 10; text-align: center; }
.grid-images .row .item h3 { width: 90% !important; margin: 0 auto; }

.grid-images.gallery-nav .container { padding: 0 1.75rem; margin: 1rem auto 4rem; }
.grid-images.gallery-nav .row { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; }
.grid-images.gallery-nav .row .item { width: 33.3%; padding: 0 1%; cursor: pointer; }

	@media screen and (min-width: 42rem) {
		.grid-images .row .item { padding: .5%; }

		.grid-images.gallery-nav .row { flex-wrap: nowrap; }
		.grid-images.gallery-nav .row .item { width: auto; padding: 0 .5%; }
	}

	@media screen and (min-width: 64rem) {
		.grid-images.gallery-nav .container { padding: 0 2.1rem; }
	}

.grid-icons .container { max-width: 68.5rem; padding: 0 2rem; margin: 4rem auto; position: relative; z-index: 10; text-align: center; }
.grid-icons .row .item { background: #000; background: var(--fullcolor); margin: .5rem 0; padding: 2rem; display: flex; justify-content: flex-start; color: #fff; border-bottom: 0; }
.grid-icons .row .item span { font-size: 3rem; padding-right: 2rem; }
.grid-icons .row .item h3 { padding-top: 0; align-self: center; text-align: left; }

	@media screen and (min-width: 42rem) {
		.grid-icons .row .item { width: 32%; display: inline-block; margin-left: .5%; margin-right: .5%; }
		.grid-icons .row .item span { font-size: 4rem; padding-right: 0; }
		.grid-icons .row .item h3 { padding-top: 1rem; text-align: center; }

		main .grid-icons .row .item { margin-left: 0; margin-right: 1%; }
	}

.grid-vendors .container { max-width: 100%; margin: 4rem auto 2rem; position: relative; z-index: 10; }
.grid-vendors .container h2 { text-align: center; margin-bottom: 2rem; }
.grid-vendors .container .button { margin: 2rem 0 0 50%; transform: translateX(-50%); }
.grid-vendors .row { width: 100%; }
.grid-vendors .row .item { margin-bottom: 2rem; }
.grid-vendors .row .item .copy { width: 80%; margin: 0 auto; }
.grid-vendors .row .item .copy h3 { font-size: 1.25rem; padding-bottom: 1rem; }

	@media screen and (min-width: 42rem) {
		.grid-vendors .row .item { width: 33.33%; padding-left: .25%; padding-right: .25%; }
		.grid-vendors .row .item:nth-child(1) { padding-left: 0; padding-right: .5%; }
		.grid-vendors .row .item:nth-child(3) { padding-left: .5%; padding-right: 0; }

		main .grid-vendors .row { justify-content: flex-start; }
	}

	@media screen and (min-width: 48rem) {
		.grid-images .container,
			.grid-icons .container,
			.grid-vendors .container,
			.grid-events .container { margin: 6rem auto; }

		.grid-vendors .row,
			.grid-events .row { margin-bottom: -2rem; }
	}


.grid-events .container { max-width: 100%; margin: 4rem auto 2rem; position: relative; z-index: 10; }
.grid-events .container h2 { text-align: center; margin-bottom: 2rem; }
.grid-events .container .button { margin: 0 0 0 50%; transform: translateX(-50%); }
.grid-events .row { width: 100%; }
.grid-events .row .image-block { margin-bottom: 2rem;}
.grid-events .row .image-block .container { display: flex; flex-wrap: wrap-reverse; padding: 0; margin: 0; }
.grid-events .row .image-block .container .copy { width: 80%; margin: 0 auto; }
.grid-events .row .image-block .container .copy h2 { font-size: 1.25rem; font-family: oswald; text-align: left; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; }
.grid-events .row .image-block .container .copy h3 { font-size: 1rem; padding-bottom: 0; margin-bottom: 0; }
.grid-events .row .image-block .container .image-container { width: 100%; margin: 0 0 1rem; position: relative; overflow: hidden; padding-bottom: 64%; background: #eee; }
.grid-events .row .image-block .container img { width: 100%; margin: 0 0; position: absolute; }

	@media screen and (min-width: 42rem) {
		.grid-events .row .image-block { width: 33.33%; padding-left: .25%; padding-right: .25%; }
		.grid-events .row .image-block:nth-child(1) { padding-left: 0; padding-right: .5%; }
		.grid-events .row .image-block:nth-child(3) { padding-left: .5%; padding-right: 0; }

		main .grid-events .row { justify-content: flex-start; }
	}



/* FORMS */
.wpcf7-not-valid-tip { color: #BA4427 !important; font-size: 1.15rem; }
.wpcf7-not-valid-tip:before { content: "\e903"; font-family: 'icomoon' !important; padding-right: .5rem; }

.wpcf7-response-output { font-size: 1.15rem; padding: 1rem !important; margin: 1rem 0 !important; color: #fff; font-weight: 700; border: 0 !important; }
.wpcf7-response-output.wpcf7-mail-sent-ok { background: #6F903F; }
.wpcf7-response-output.wpcf7-validation-errors { background: #BA4427; }



/* Events */
.em-list { margin: 2rem 0; }
.em-list h2 { width: 80%; margin: 0 auto 2rem; }
.em-list .em-event .em-item-info { width: 80%; margin: 1rem auto 0; }
.em-list .em-event .em-item-info h3 { margin-bottom: .5rem; font-size: 1.25rem; }
.em-list .em-event .em-item-info .em-event-meta { margin-bottom: .5rem; font-weight: bold; }
.em-list .em-event .em-item-info .em-icon,
.em-list .em-event .em-item-info .em-event-location { display: none; }

.em-event-meta-location { display: none !important; }

	@media screen and (min-width: 48rem) {
		.em-list { max-width: 67.5rem; margin: 2rem auto; padding: 0 2rem; }
		.em-list h2 { width: 100%; margin: 1rem 0; }
		.em-list .em-event { display: flex; justify-content: space-between; }
		.em-list .em-event .em-item-image { width: 38%; margin-bottom: 1rem; }
		.em-list .em-event .em-item-info { width: 58%; margin: 0; }

		.grid-events .em-list { display: flex; padding: 0; max-width: 100%; }
		.grid-events .em-list .em-event { display: block; width: 33.33%; padding-left: .25%; padding-right: .25%; }
		.grid-events .em-list .em-event:nth-child(1) { padding-left: 0; padding-right: .5%; }
		.grid-events .em-list .em-event:nth-child(3) { padding-left: .5%; padding-right: 0; }
		.grid-events .em-list .em-event .em-item-image { width: 100%; margin-bottom: 0; }
		.grid-events .em-list .em-event .em-item-info { width: 80%; margin: 1rem auto 0; }
	}