/*

	Theme: Neo
	Author: Mark Pearson
	Date: 05/01/2022
	Version: 1.0.0.2

*/

/* Set font styles */
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=PT+Serif&display=swap');

/* Global styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-size: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { color: #333; font-family: 'PT Serif', sans-serif; word-wrap: break-word !important; letter-spacing: 0.2em; line-height: 2.0em; font-size: 1.0em; }
h1, h2, h3, h4, h5, h6 { font-family: 'Lobster', sans-serif; font-size: 1.2em; letter-spacing: inherit; line-height: inherit; margin-bottom: 20px; }
a { color: #333; text-decoration: none; }
li { list-style: none; }
img { width: 100%; vertical-align: bottom; }
p { margin-bottom: 20px; }

/* Main styles */
#wrapper { width: 100%; }
#main, #about, #widgets, #opening, #reviews, #contact { text-align: center; background: #fff; padding: 150px 20px 150px 20px; }
.main { max-width: 1200px; margin: auto; }
.col-1, .col-2, .col-3 { display: inline-block; vertical-align: top; margin-right: -5px; padding: 20px; }
.col-1 { width: 25%; }
.col-2 { width: 50%; }
.col-3 { width: 75%; }
.col-4 { padding: 20px; }
.btn { border: solid 1px #999; letter-spacing: inherit; font-family: 'Lobster', sans-serif; font-size: 0.7em; display: inline-block; margin-top: 20px; padding: 10px; }

/* Header styles */
header { background: green; }
.logo { width: 180px; height: 100px; display: block; background: url('../../../uploads/svg/logo.svg') center center / 180px no-repeat; text-indent: -9999px; margin: 0 auto 30px; }

/* Navigation styles */
nav { margin: 20px 0 0 20px; }
.burger { width: 40px; height: 40px; position: fixed; left: 30px; top: 30px; border-radius: 100px; cursor: pointer; background: #999 url('../../../uploads/svg/burger.svg') center center / 18px no-repeat; text-indent: -9999px; z-index: 1000; }
.sidenav { width: 0; height: 100%; position: fixed; top: 0; left: 0; transition: 0.2s; background: #333; overflow-x: hidden; padding-top: 30px; z-index: 1001; }
.sidenav a { color: #999; font-size: 0.9em; }
.close-nav { width: 35px; height: 35px; position: absolute; top: 35px; right: 20px; border-radius: 100%; background: #999 url('../../../uploads/svg/close.svg') center center / 18px no-repeat; text-indent: -9999px; }

/* Social styles */
.social { position: fixed; top: 30px; right: 30px; z-index: 1000; }
.social li { display: inline-block; }
.social a { width: 40px; height: 40px; border-radius: 100px; display: block; margin-left: 5px; text-indent: -9999px; }
.facebook { background: #999 url('../../../uploads/svg/facebook.svg') center center / 30px no-repeat; }
.twitter { background: #999 url('../../../uploads/svg/twitter.svg') center center / 30px no-repeat; }
.instagram { background: #999 url('../../../uploads/svg/instagram.svg') center center / 30px no-repeat; }
.linkedin { background: #999 url('../../../uploads/svg/linkedin.svg') center center / 30px no-repeat; }
.youtube { background: #999 url('../../../uploads/svg/youtube.svg') center center / 30px no-repeat; }

/* Carousel styles */
#carousel { font-size: 1.6em; color: #fff; text-align: center; }
#carousel h1 { font-size: 1.8em; }
#carousel div { margin: 300px 0 300px 0; }
#carousel .btn { border-color: #fff; color: #fff; }

/* Carousel styles */
#bg { position: fixed; left: 0; top: 0; min-width: 1920px; min-height: 1080px; background-size: cover; z-index: -9999; }

/* Scroller styles */
#scroller { font-size: 1.6em; color: #fff; text-align: center; }
#scroller div { margin: 150px 0 150px 0; }

/* Parallax styles */
#parallax { height: 300px; }

/* Widget styles */
#widgets img { width: 25%; margin-bottom: 20px; }

/* Ad styles */
#ads { background: #fff; }
#ads div { float: right; margin: 0; padding: 0; }

/* Opening styles */
#opening { clear: both; background: #f0f0f0; }

/* Review styles */
.review { display: none; }
.rating { width: 150px; height: 30px; display: block; margin: 20px auto 0; }
.name { display: block; margin-top: 20px; }

/* Gallery styles */
#gallery { background: #fff; text-align: center; }
.image { margin: 0; padding: 0; }

/* Google map styles */
#map { background: #fff; }
#google-container { width: 100%; height: 500px; }
#zoom-in, #zoom-out { cursor: pointer; margin-left: 20px; text-align: center; font-size: 1.6em; color: #fff; background: #333; padding: 10px 12px 10px 15px; }
#zoom-in { background-position: 50% 0; margin: 20px 0 2px 20px; }
#zoom-out { background-position: 50% -32px; }

/* Form styles */
#contact { background: #f0f0f0; }
form { margin-top: 20px; }
input[type=text], textarea { width: 100%; border: solid 1px #f0f0f0; border-radius: 0; -webkit-appearance: none; font-family: inherit; font-size: inherit; margin-bottom: 20px; padding: 20px; }
textarea { height: 150px; }
input[type="submit"] { cursor: pointer; border-radius: 0; -webkit-appearance: none; padding: 20px 10px 20px 10px; }
.success { width: 100%; position: fixed; left: 0; top: 0; background: green; color: #fff; text-align: center; padding: 20px; }

/* Checkbox styles */
.checkbox { display: block; position: relative; padding-left: 35px; text-align: left; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input[type=checkbox] { display: none; }
.checkmark { border: solid 1px #f0f0f0; background: #fff; position: absolute; top: 0; left: 0; height: 25px; width: 25px; }
.checkmark:after { content: ""; position: absolute; display: none; }
.checkbox input:checked ~ .checkmark:after { display: block; }
.checkbox .checkmark:after { left: 7px; top: 3px; width: 5px; height: 10px; border: solid #333; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* Footer styles */
footer { background: #333; color: #999; font-size: 0.7em; text-align: center; padding: 20px; }
footer a { color: #999; }
footer #contact { padding: 20px; background: transparent; }
.copyright { max-width: 1200px; border-top: solid 1px #444; margin: auto; padding-top: 20px; }

/* Cookie bar styles */
#cookie { width: 100%; position: fixed; left: 0; top: 0; text-align: center; background: rgba(20,20,20,0.8); display: none; padding: 20px; z-index: 1000; }
#close { border: solid 1px #999; display: inline-block; cursor: pointer; transition: 2s; margin: 10px 10px 0 10px; padding: 10px; }
#close:hover { border-color: #f0f0f0; }

/* Back to top styles */
.top { width: 45px; height: 45px; position: fixed; bottom: 30px; right: 30px; display: none; cursor: pointer; border-radius: 100px; box-shadow: 0 0 3px 3px rgba(68,68,68,0.2); background: #fff url('../../../uploads/svg/top.svg') center center / 25px no-repeat; padding: 10px; }

/* Media queries */
@media (max-width: 64em) 
{

	/* Carousel styles */
	#carousel { font-size: 1.0em; }
	#carousel div { margin: 150px 0 150px 0; }
	#carousel h1 { font-size: 1.6em; margin-bottom: 0; }
	#bg { min-width: 400px; }

	/* Main styles */
	#about, #widgets { padding: 150px 0 150px 0; }
	.col-1, .col-2, .col-3 { width: 100%; margin: 0; }

	/* Ad styles */
	#ads { padding: 0 20px 0 20px; }
	#ads div { float: none; margin-bottom: 20px; }

	/* Gallery styles */
	#gallery { padding: 0 20px 0 20px; }
	#gallery img { margin-bottom: 20px; }

	/* Cookie bar styles */
	#close { display: block; }

	/* Navigation styles */
	.burger { left: 20px; top: 20px; }

	/* Social styles */
	.social { top: 20px; right: 20px; }

}