@charset "UTF-8";

* {
	margin: 0px;
	padding: 0px;
	font-family: 'Yrsa', serif;
}
.wrapper {
	max-width: 1000px;
	padding: 0px 40px;
	margin: 0px auto;
}
#header {
	height: 300px;
}
#header a {
	text-decoration: none;
}
#headerleft {
	float: left;
	height: 150px;
}
#headerleft img {
	margin: 30px 0 0 0;
	max-height: 100%;
}
#mobiletoggle {
	display: none;
}
#header-cutting-line {
	float: left;
	height: 1px;
	width: 100%;
	margin: 30px 0 20px;
	background-color: white;
}
#header .social {
	float: right;
	line-height: 50px;
	margin-top: 10px;
}
#header .social a {
	text-decoration: none;
	color: white;
	padding: 0 10px;
}



/*****************************/
/** banner **/
/*****************************/
#banner {
	height: 900px;
	width: 100%;
	margin-top: -300px;
}
.inside-page-banner {
	height: 300px !important;
}
[data-slides] {
	background-image: url(../img/background-1.jpg);
	background-position:  left top;
	background-size: cover;
	background-repeat: no-repeat;
	transition: background-image 2s linear;
}
#banner-box-container {
	margin-top: 140px;
}
.banner-box {
	float: left;
	width: 33.3%;
	height: 200px;
	transition: all 0.2s ease-in-out;
}
#banner-box-container a:first-child:hover {
	background-color: rgba(50,101,188,1) !important;
}
#banner-box-container a:nth-child(3):hover {
	background-color: rgba(50,101,188,1) !important;
}
#banner-box-container a:nth-child(6):hover {
	background-color: rgba(50,101,188,1) !important;
}
#banner-box-container a:nth-child(2):hover,  #banner-box-container a:nth-child(4):hover, #banner-box-container a:nth-child(5):hover{
	background-color: rgba(0,0,0,0.5) !important;
}
.banner-title {
	color: white;
	font-size: 40px;
	font-weight: 500;
	margin-top: 55px;
	text-align: center;
}
#banner a{
	text-decoration: none;
	display: inline-block;
}

/*****************************/
/** welcome banner **/
/*****************************/
#welcome-banner {
	float: left;
	width: 100%;
	background-color: white;
	text-align: center;
}
#welcome-banner h1 {
	font-weight: 400;
	font-size: 50px;
	padding: 80px 0 0 0;
}
#welcome-banner p {
	font-weight: 300;
	font-size: 22px;
	padding: 30px 0 80px 0;
}

/*****************************/
/** google map banner **/
/*****************************/
#maps-banner {
	width: 100%;
	float: left;
}
#maps-banner div {
	height: 500px;
}
#maps-banner h2 {
	text-align: center;
	padding: 20px;
	font-weight: 400;
	font-size: 50px;
	background-color: #3265bc;
	color: white;
}

/*****************************/
/** video banner **/
/*****************************/
#video-banner {
	float: left;
	width: 100%;
	height: inherit;
	text-align: center;
	padding: 80px 0px;
}

/*****************************/
/** sign up form banner **/
/*****************************/
#signup-banner {
	float: left;
	width: 100%;
	height: inherit;
	padding: 80px 0px;
	
	background-image: url(../img/bg-signup.jpg);
	background-position:  center center;
	background-size: cover;
	background-repeat: no-repeat;
}
#signup-banner h2 {
	font-weight: 400;
	font-size: 50px;
}
.signup-form {
   	box-sizing: border-box;
	max-width: 600px;
    margin: 30px 0 0px 0;
    padding: 30px;
    background: rgba(255,255,255,0.5);
	border-radius: 6px;
	border: 1px rgba(255,255,255,0.5) solid;	
}

.signup-form input[type="text"],
.signup-form input[type="date"],
.signup-form input[type="datetime"],
.signup-form input[type="email"],
.signup-form input[type="number"],
.signup-form input[type="search"],
.signup-form input[type="time"],
.signup-form input[type="url"],
.signup-form input[type="tel"],
.signup-form textarea,
.signup-form select 
{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 10px;
    border: none;
    padding: 10px;
    color: #555;
	font-size: 18px;
	
	border-radius: 3px;
	box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
}
.signup-form input[type="text"]:focus,
.signup-form input[type="date"]:focus,
.signup-form input[type="datetime"]:focus,
.signup-form input[type="email"]:focus,
.signup-form input[type="number"]:focus,
.signup-form input[type="search"]:focus,
.signup-form input[type="time"]:focus,
.signup-form input[type="url"]:focus,
.signup-form input[type="tel"]:focus,
.signup-form textarea:focus,
.signup-form select:focus
{
    box-shadow: 0 0 5px #43D1AF;
    padding: 10px;
    border: 1px solid #43D1AF;
}

.signup-form input[type="submit"],
.signup-form input[type="button"]{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 10px;
    background: #43D1AF;
    border-bottom-style: none;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;    
    color: #fff;
	border-radius: 3px;
	box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
	font-size: 18px;
	
	background-color:#3265bc;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.signup-form input[type="submit"]:hover,
.signup-form input[type="button"]:hover{
	background-color: #95b1e3;
}

/*****************************/
/** testimonial banner **/
/*****************************/
#testimonial-banner {
	float: left;
	width: 100%;
	text-align: center;
}
#testimonial-banner h2 {
	float: left;
	width: 30%;
	font-weight: 300;
	font-size: 50px;
	color: black;
	margin: 100px 0;
	
	background-image: url(../img/what.png);
	background-position:  center center;
	background-size: contain;
	background-repeat: no-repeat;
	
}
.review-box {
	width: 100%;
	padding: 80px 0;
}
.review-box i.fa-quote-left {
	color: #ccc;
	float: left;
	margin-left: 10%;
}
.review-box p {
	width: 80%;
	display: inline-block;
	text-align: left;
	padding: 20px 20px 0 20px;
	font-weight: 300;
	font-size: 24px;
}


/*****************************/
/** footer **/
/*****************************/
#footer {
	float: left;
	background-color: dimgrey;
	height: 200px;
	width: 100%;
	color: white;
}
#sitemap {
	float: left;
	height: 200px;
	width: 50%;
}
#sitemap ul {
	padding: 50px 0;
}
#sitemap ul li {
	list-style-type: none;
}
#sitemap a {
	text-decoration: none;
	color: white;
	font-size: 18px;
	font-weight: 300;
}
#footercontact {
	float: right;
	height: 200px;
	width: 50%;
	text-align: right;
}
#footercontact div {
	padding: 50px 0 0 0;
	font-size: 18px;
	font-weight: 300;
}
#footercontact div.social {
	padding-top: 20px;
}
#footercontact div.social a{
	text-decoration: none;
	color: white;
	padding: 0 10px;
}
#copyright {
	float: left;
	margin-top: -50px;
	color:  white;
	font-weight: 300;
}
#copyright a{
	text-decoration: none;
	color:  white;
}

/*****************************/
/** inside pages**/
/*****************************/
.picture-right {
	float: right;
	border: 1px #ccc dotted;
	border-radius: 3px;
	padding: 8px;
	margin: 20px 0px 20px 20px;
	text-align: center;
	max-width: 35%;
	overflow: auto;
}
.picture-right img {
	float: left;
	width: 100%;
}

.mapframe {
	float: right;
	border: 1px #ccc dotted;
	border-radius: 3px;
	padding: 8px;
	margin: 20px 0px 20px 20px;
	text-align: center;
	width: 50%;
	overflow: auto;
}
.mapframe iframe {
	width: 100%;
}

.staff .picture-right {
	background-color: white;
}

#content {
	padding: 40px 0px;
	overflow: auto;
	min-height: 500px;
	background-color: white;
}

#content h1 {
	font-size: 36px;
	font-weight: 500;
}

#content h2 {
	font-size: 22px;
	font-weight: 500;
	margin-top: 40px;
}

#content p {
	font-size: 18px;
	font-weight: 300;
	margin-top: 20px;
}

#content ul, #content ol {
	font-size: 18px;
	font-weight: 300;
	margin-top: 20px;
	padding-left: 60px;
}

#content ul li:not(:first-child), #content ol li:not(:first-child) {
	margin-top: 10px;
}

.cluemobileappointment {
	display: none !important;
}

.hours {
	font-size: 14px;
	border-spacing: 0px;
	margin-top: 20px;
}

.hours td {
	padding: 12px;
}

.hours tr:not(:last-child) td {
	border-bottom: 1px rgba(255,255,255,0.2) solid;
}

.hours td:first-child {
	background-color: #5a302d;
	color: white;
	font-weight: bold;
}

.hours td:last-child {
	background-color: rgba(0,0,0,0.05);
	color: #666;
}



/*****************************/
/** Mobile menu**/
/*****************************/
.mobilemenu {
	list-style-type: none;
}

.mobilemenu li {
	border-bottom: 1px rgba(255,255,255,0.2) solid;
}
.mobilemenu li a {
	display: block;
	padding: 12px 0px 12px 8px;
	color: white;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	border-left: 4px rgba(0,0,0,0) solid;
}

.mobilemenu li a:active {
	background-color: rgba(255,255,255,0.05);
	border-left-color: #37a3d7;
}

.mobilemenu li ul li {
	border-top: 1px rgba(255,255,255,0.2) solid;
	border-bottom: none;
}

.mobilemenu li ul li a {
	font-size: 12px;
	padding-left: 28px;
}

/*****************************/
/** Responsive: tablet**/
/*****************************/
@media (max-width: 1024px) {
	#desktopmenu ul li a {	
		font-size: 20px !important;
		padding: 0px 6px !important;
	}
/***** banner *****/
	#banner {
		height: 800px;
	}
	#banner-box-container {
		margin-top: 100px;
	}
	.banner-title {
		font-size: 24px;
		line-height: 34px;
		margin-top: 64px;
	}
/***** welcome banner *****/
	#welcome-banner p {
		padding: 30px 0;
	}
/** testimonial banner **/
	#testimonial-banner h2 {
		width: 80%;
		margin: 100px 10% 0;
	}
	.review-box {
		padding: 30px 0;
	}
	.review-box p {
		font-size: 22px;
	}
/***** signup banner *****/	
	#signup-banner h2 {
		text-align: center;
	}
	.signup-form {
		margin: 30px auto;
	}
}

/*****************************/
/** Responsive: tablet**/
/*****************************/
@media (max-width: 840px) {
	#mobiletoggle {
		display: block;
		color: white;
		font-size: 24px;
		text-align: center;
		line-height: 100px;
	}
	.mobiletoggleswitch {
		float: right;
		margin: 60px 30px 0 30px;
	}
	#desktopmenu {
		display: none;
	}
	#header .social {
		display: none;
	}
	.inside-page-banner {
		height: 240px !important;
	}
}

/*****************************/
/** Responsive: mobile**/
/*****************************/
@media (max-width: 600px) {
/***** header *****/
	#headerleft img {
		max-height: 75%;
	}
	#mobiletoggle {
		font-size: 20px;
	}
	.mobiletoggleswitch {
		margin: 50px 30px 0 30px;
	}
	#header-cutting-line {
		margin-top:10px;
	}
/***** banner *****/
	#banner {
		height: 640px;
	}
	#banner-box-container {
		margin-top: 30px;
	}
	.banner-box {
		width: 50%;
		height: 120px;
	}
	.banner-title {
		margin-top: 30px;
	}
	.cluedesktopappointment {
		display: none !important;
	}
	.cluemobileappointment {
		display: inline-block !important;
	}
/** testimonial banner **/
	.review-box p {
		width: 90%;
		font-size: 18px;
	}
/***** footer *****/
	#footer {
		height: inherit;
		text-align: center;
	}
	#sitemap {
		float: none;
		height: inherit;
		width: 100%;
	}
	#sitemap ul {
		padding: 50px 0 10px 0;
	}
	#footercontact {
		float: none;
		height: inherit;
		width: 100%;
		text-align: center;
	}
	#footercontact div {
		padding: 10px 0 0 0;
	}
	#copyright {
		float: none;
		margin: 20px 0;
	}
/***** inside pages *****/	
	.picture-right, .mapframe {
		float: none;
		margin: 20px 0px;
		max-width: none;
		width: auto;
	}
	.picture-right img {
		float: none;
	}

	.welcome-icons img {
		width: 25%;
		margin: 0 2% 50px 2%;
	}
	.inside-page-banner {
		height: 200px !important;
	}
	
}

/*****************************/
/** Responsive: mobile-small**/
/*****************************/
@media (max-width: 414px) {
	.inside-page-banner {
		height: 180px !important;
	}
/***** header *****/
	#headerleft img {
		max-height: 51%;
	}
	#mobiletoggle {
		font-size: 18px;
	}
	.mobiletoggleswitch {
		margin: 30px 30px 0 30px;
	}
	#banner {
		height: 600px;
	}
	.banner-title {
		font-size: 16px;
	}
	#header-cutting-line{
		margin-top: -20px;
	}
	
	#welcome-banner .wrapper {
		padding: 0px 25px;
	}
	#welcome-banner h1 {
		font-size: 30px;
		padding: 40px 0 0 0;
	}
	#welcome-banner p {
		font-size: 16px;
		padding: 20px 0 40px 0;
	}
	#maps-banner h2 {
		font-size: 30px;
	}
	#maps-banner div {
		height: 300px;
	}
	#testimonial-banner h2 {
		margin-top: 60px;
		font-size: 30px;
	}
	.review-box p {
		font-size: 16px;
	}
	#signup-banner {
		padding: 40px 0px 20px 0px;
	}
	#signup-banner .wrapper {
		padding: 0px 15px;
	}
	#signup-banner h2 {
		font-size: 30px;
	}
	
	#content h1 {
		font-size: 30px;
	}
}