@charset "UTF-8";

/*
Theme Name: Rustic Camping Devon from Simon Edwin
Author: Simon Edwin
*/
@font-face{
	font-family:'bakersignet_btroman';
	src:url('fonts/baker_signet_bt-webfont.woff2') format('woff2'),
		url('fonts/baker_signet_bt.ttf') format('truetype'),
		url('fonts/baker_signet_bt-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
* {box-sizing: border-box;}
html,body{
	margin:0;
	padding:0;
	background:#190c0c;
	color:#fff7be;
	font-family: Arial;
	font-size: 16px;
	text-align: center;
	line-height: 1.5em;
}
a{color: #fff7be;outline: none;text-decoration: none;}
a:hover{outline: none;text-decoration: none;color: white;}
figcaption,figure{margin: 0;padding: 0;}
blockquote{margin: 0;padding: 0;}
ul,li{margin: 0;padding: 0;list-style: none;}
img {max-width: 100%;}
html,body{position: relative;overflow-x: hidden;width: 100vw;}
body{background-image: url(/wp-content/themes/rusticcampingdevon/images/background.jpg);background-attachment: fixed;background-position: left top;background-size: 100% auto;}
nav input[type="checkbox"] {transition: all 0.3s;box-sizing: border-box;display: none;}
nav input[type="checkbox"] ~ label .to-close{display: none;}
nav input[type="checkbox"]:checked ~ label ~ #menu{right: 0;width: 100%;}
nav input[type="checkbox"]:checked ~ label .to-close{display: inline;}
nav input[type="checkbox"]:checked ~ label .to-open{display: none;}
label[for="menu-toggle"]{display: inline-block;cursor: pointer;text-transform: uppercase;width: 22%;}
nav{padding-top: 4px;padding-bottom: 4px;position: relative;z-index: 2;font-weight: bold;line-height: 100px;background: black;width: 100vw;}
nav .content{
	max-width: 430px;
	margin: 0 auto;
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}
nav .content a[href^="tel:"]{order: 1;text-align: center;width:45%;}
nav .content .social-header{order: 2;width: 20%;}
nav .content label{order: 3;width: 35%;}
nav .content #menu{order: 4}
nav ul, nav li {display: inline-block;}
nav a, nav img{color: #fff7be}
nav a, .social-header{line-height: 100px;height: 100px;display: inline-block;vertical-align: middle;}
nav a:hover, nav a:hover img{color: white}
/*nav a[href^="tel"]{margin-right: 20px;}*/
.social-header a:first-child{float: left;}
.social-header a:last-child{float: right;}
.social-header:after{display: block;clear: both;content: "";}
.social-header img{top: 3px;position: relative;}
#menu{
	position: absolute;
	right: -100vw;
	top: 100px;
	transition: all 0.3s;
	width: 100vw;
	height: calc(100vh - 100px);
	display: block;
	z-index: 2;
	background: black;
}
#menu li{display: block;height: calc((100vh - 100px)/5);}
#menu a{display: block;line-height: calc((100vh - 100px)/5);height: auto}

article{position: relative;z-index: 1}
h2{margin: 0;padding: 0;font-size: 38px;line-height: 1.2em;font-weight: normal;}
h3{margin: 0;padding: 0;font-size: 24px;font-weight: normal;}

#h1{position: relative;}
#h1 h1{position: absolute;z-index: 1;top: 0;left: 0;font-family: bakersignet_btroman;}
#h1 #img1{position: relative;top: 0;left: 0;width: 100%;z-index: 2;}
#h1 #img2{position: absolute;top: 30%;width: 70%;left: 15%;max-width: 70%;z-index: 3;}

#about h2{padding: 50px 10% 30px;font-family: bakersignet_btroman;}
#about p{margin: 0; padding: 0 10% 30px;font-size: 16px;line-height: 1.5em;}
#about ul,#about li{display: inline-block;vertical-align: top;}
#about ul{padding-top: 40px;}
#about li{width: 50%;}
#about img{display: block;width: 100%;}

#local-attractions h3{padding: 0 0 30px;font-family: bakersignet_btroman;font-size: 36px;}
#local-attractions p{margin: 0; padding: 0 10% 30px;font-size: 16px;line-height: 1.5em;}
#local-attractions header{position: relative;overflow: hidden;}
#local-attractions h2{position: absolute;left: -100%;top: 0;font-size: 0;}
#local-attractions figcaption{background: #7c9c00;padding: 50px 13% 20px;}
#local-attractions .nobg figcaption{background: transparent;}
#local-attractions figcaption p{ padding: 0 0 30px 0;}
#local-attractions img{width: 100%;display: block;}
#local-attractions blockquote p{font-size: 26px;padding: 50px 10% 100px;font-family: bakersignet_btroman;}
.grouped-faqs{text-align: left;}

#gallery h2{padding: 50px 0;font-family: bakersignet_btroman;}
#gallery figure{width: 50%;display: inline-block;position: relative;overflow: hidden;vertical-align: top;}
#gallery figure:first-of-type{width: 100%;}
#gallery img{width: 100%;position: relative;z-index: 2;display: block;}
#gallery figcaption{position: absolute;left: -300%;top: 0;z-index: 1;font-size: 0;line-height: 0;}

#contact{background: #7c9c00;padding: 50px 10%;}
#contact h2{padding: 50px 0 30px;font-family: bakersignet_btroman;font-size: 36px;}
#contact p{font-size: 16px;line-height: 1.5em;}
#contact a{text-decoration: underline;}

#faqs{padding: 50px 13%;}
#faqs h2{text-align: left;font-family: bakersignet_btroman;font-size: 36px;}
#faqs li{list-style: outside;margin-left: 20px;font-size: 16px;line-height: 1.5em;padding-bottom: 15px;}
#faqs h3{padding-top: 50px;padding-bottom: 20px;font-family: bakersignet_btroman;font-size: 30px;line-height: 1.2em;}
#faqs p{font-size: 16px;line-height: 1.5em;padding-top: 0;}
#faqs a{text-decoration: underline;}

footer{padding: 50px 0 80px}
.social-footer a {margin: 0 15px;}
.copyright{font-size: 12px;line-height: 1.5em;max-width: 250px;text-align: center;margin: 0 auto;}

/* bigger sizes */
@media screen and (min-width: 800px) {
	label[for="menu-toggle"]{display: none;}
	nav .content{width: 710px;max-width: 710px;margin: 0 auto;}
	nav input[type="checkbox"]:checked ~ label {visibility: hidden;}
	nav a,#menu a {display: inline-block;line-height: 100px;}
	#menu{position: relative;right: auto;width: auto;top: auto;height: auto;display: inline-block;}
	#menu li{display: inline-block;line-height: 100px;height: auto;padding-left: 10px;padding-right: 10px;}
	nav .content a[href^="tel:"]{order: 3;margin-right: 0;margin-left: 20px;width: auto;}
	nav .content .social-header{order: 2;width: 80px;padding-left: 20px;}
	nav .content label{order: 3}
	nav .content #menu{order: 1}
	.grouped-faqs{column-gap: 40px;-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;padding-top: 50px;}
	#faqs h2{text-align: center;}
	#faqs h3 {padding-top: 0}
	.next{padding-bottom: 30px;display: block;width: 100%}

	#about h2{max-width: 890px;margin: 0 auto;}
	#about p{font-size: 16px;max-width: 890px;margin: 0 auto;}
	#about li{width: 25%}

	/*#local-attractions figure{display: block;width: 100%;text-align: left;overflow: hidden;position: relative;max-height: 380px;}
	#local-attractions figure:nth-child(odd) figcaption{float: left;}
	#local-attractions figure:nth-child(odd) img{position: absolute;right: 0;top: 0}*/
	/*#local-attractions figure:after{display: block;clear: both;content: "";height: 0;line-height: 0;}*/
	#local-attractions h3 {padding-left: 0;padding-right: 0;}
	#local-attractions figcaption{width: 50%;display: block;float: right;text-align: left;padding-left: 80px;padding-right: 80px;min-height: 380px;}
	#local-attractions figcaption p{line-height: 1.5em;font-size: 16px;}
	#local-attractions img{width: 50%;display: inline-block;}
	#local-attractions blockquote p{margin: 0 auto;max-width: 980px;}

	/* new rules */
	#local-attractions figure{text-align: left;overflow: hidden;position: relative;min-height: 380px;display: flex;justify-content:center;}
	#local-attractions figcaption{width: 50%;align-items: center;float: none;display: flex;}
	#local-attractions img{width: 50%;align-self: stretch;float: none;}
	#local-attractions figure:nth-child(odd) figcaption{order: 1}
	#local-attractions figure:nth-child(odd) img{order: 2}
	#local-attractions figure:nth-child(even) figcaption{order: 2}
	#local-attractions figure:nth-child(even) img{order: 1}

	#gallery figure{width: 33.33%;}
	#gallery figure:first-of-type{width: 33.33%;}
}