@charset "iso-8859-2";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Caveat+Brush|Roboto:300,300i,400,400i,700');
/* typography 

purple #7175b7;

*/
a:link, a:visited, a:active { 	color: #333333; text-decoration: none; font-weight: 400;}
a:hover { color: #7175b7; }
#footer  a:link, #footer a:visited, #footer a:active {  color: #fff; } 
#footer a:hover { color: #7175b7; }
#headerlinks a:link, #headerlinks a:visited, #headerlinks a:active { color: #fff; }
#headerlinks a:hover { color: #7175b7; }
.featureoverlay  a:link,  .featureoverlay  a:visited, .featureoverlay  a:active { color: #fff; text-decoration: underline; }
.featureoverlay  a:hover  { color: #7175b7; }

p, li, td {
font-size: 12pt;
line-height: 20pt;
color:#535353;	
margin-top: 0px;
margin-bottom: 15px;
font-weight: 300;
}
li, td, th, input, select { margin: 0; }
input, select, textarea {
    font-family: 'Roboto', sans-serif;
	padding: 6px;
	margin: 5px;
	border-radius: 4px; 
	border: 1px solid #999;
	color: #898584;
	font-size: 12pt;
}
input[type="submit"], input[type="button"]{
	text-align: right;
	font-family: 'Caveat Brush', cursive;
	color: #898584;
	font-size: 16pt;
}

h1 {
	font-family: 'Caveat Brush', cursive;
	font-size: 26pt;
	line-height: 28pt;
	font-weight: normal;
	color:#7175b7;	

} 

h2 {
	font-family: 'Caveat Brush', cursive;
	font-size: 20pt;
	line-height: 22pt;
	font-weight: normal;
	color:#535353;	

	
}

	#login_info h2, #login_info p, #cartcontents h2, #cartcontents p { margin: 0; }


h3 {
	font-size: 14pt;
	line-height: 15pt;
	color:#535353;	
	margin-top: 0px;
	margin-bottom: 15px;
}

h4 {
	font-size: 12pt;
	line-height: 18pt;
	font-weight: normal;
	color: #666666;
	font-style: italic;
	border-bottom: 1px solid #999999;
	padding-left: 30px;
	width: 180px;
	text-align: right;
	padding-top: 8px;
	margin: 0;

}
#textarea h4 { margin-left: -160px; margin-bottom: 30px; margin-top: 25px}


#contactform h3 {
	margin-top: 0;
}

hr {
height:1px; 
border:none; 
color:#fff; 
background-color:#fff;	
}


/* layout */

html, body  {
	height: 100%;	
	margin: 0;
	padding: 0;
}

body {
	background-color: #ccc;	
    font-family: 'Roboto', sans-serif;

}


	header {
		position: absolute;
		width: 100%;
		margin: 0 auto;
		height: 100px;
		 background: linear-gradient(to right, #000, #000, #4c4c4e);
		z-index: 500;
		-moz-box-shadow:  0px 15px 35px #666;
		-webkit-box-shadow: 0px 15px 35px #666;
		box-shadow: 0px 15px 35px #666;
	}
		header .logo {
			position: relative;
			float: left;
			padding-left: 20px;
			padding-right: 10px;
			padding-top: 10px;
			width: 160px;
			height: 90px;
			background-color: #000;
			z-index: 200;
		}
		header .logo img {
			height: 80px;
			width: auto;
		}
		
		
		#headerlinks {
			position: absolute;
			right: 10px;
			top: 10px;
			height: 80px;
			color: #fff;
		}
		#headerlinks em {
			display: block;
			font-size: 12pt;
			font-style: normal;
		}
		
		#headerlinks a { 
		display: block;
		float: left;
		font-size: 10pt;
		padding-left: 10px;
		padding-right: 10px;
		border-right: 1px solid #fff;
		 }
		#headerlinks  a.locality {
			font-size: 12pt;
			border-right: none;
		}
		#headerlinks img { 
		width: 20px; 
		height: auto; 
		padding-left: 10px;
		vertical-align: top;
		}
		
	#maincontent {
		position: relative;
		width: 100%;
		margin: 0 auto;
		min-height: 75%;
		background-color: #ffffff;
		z-index: 0;
			}
	#textarea {
		padding-top: 140px;
		position: relative;
		width: 80%;
		max-width: 1200px;
		margin: 0 auto;
		padding-bottom: 20px;
	}
	
	#textarea img{
		max-width: 100%; height: auto; 
	}
	

	#counter {
		position: relative;
		width: 100%;
		margin: 0 auto;
		height: 25%;
		
		background-color: #ffffff;	
	}
	#featurearea {
		position: relative;
		width: 100%;
		margin: 0 auto;
		height: 300px;
		background-color: #3d3e3d;
		
	}
	#featurearea .featureimage {
		position: relative;
		float: right;
		width: 40%;
		padding: 20px 5%;
		max-width: 400px;
	}
	#featurearea img {
		width: 100%;
		height: auto;
		border: 1px solid #fff;
	}
	
	#featurearea .featureoverlay {
		position: relative;
		float: right;
		height: 100%;
		width: 40%;
		max-width: 400px;
		padding: 0 5%;
		background-color: rgba(0,0,0,0.4);
	}
		.featureoverlay p {
			font-size: 12pt;
			line-height: 16pt;
			color: #fff;	
			font-weight: 300;
		}
		
		.featureoverlay h3 {
			margin-top: 30px;
			margin-bottom: 20px;
			border-bottom: 1px solid #fff;
			color: #fff;				
		}

	.featuregen { 
		clear: both;
		 }
		
	.featuregen img {
		float: left;
		width: 15%;
		padding-right: 5%;
		padding-bottom: 40px;
		
	}
	.featuregen_content {
		float: left;
		width: 80%;
		padding-bottom: 50px;
	}
	.clear { clear: both; }
	
	#partnerships {
		position: relative;
		width: 100%;
		margin: 0 auto;
		height: 150px;
		background-color: #ffffff;
		}
		
	#partnerships img {
		height: 80px;
		width: auto;		
	}
	/*override swiper.min.css */
	.swiper-container {
    width: 100%;
    height: 100px;
	padding-top: 15px;
	padding-bottom: 15px;
	} 
	
	.swiper-slide {
    width: auto !important;
    } 
	.swiper-button-prev, .swiper-button-next {
		background-image: none !important;
		color: #999;
		font-size: 18pt;
		font-weight: normal;
		top: 110px !important;
	}
	
	#contact {
		position: relative;
		width: 100%;
		margin: 0 auto;
		height: 300px;
		background-color: #231f20;
		background-image: url(../elements/logo-on-tag.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: 250px;
	}

	#contact #contactform {
		position: relative;
		margin: 0 auto;
		width: 600px;
		height: 200px;
		padding-top: 30px;
	}
	
	#social {
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
	#social img {
		width: 30px;
		height: auto;
		padding-right: 10px;
	}

	footer {
		position: relative;
		width: 100%;
		margin: 0 auto;
		height: 100px;
		background-color: #3d3e3d;
	}

	#footer { 
	position: relative;
	margin: 0 auto;
	width: 80%;
	max-width: 1200px;
	padding-top: 25px;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	}
	#footer p { 
		padding: 0 30px;	 
		color: #fff;
		border-right: 1px solid #fff;
		flex-grow: 1;
		text-align: center;	
			
	}
	#footer p:last-of-type { border-right:  none; }

	



/* incidentals */

a img { 	border: none; }

#counterfigure {
	font-family: 'Caveat Brush', cursive;
	font-size: 60pt;
	line-height: 60pt;
	text-align: center;
	position: relative;
	width: 100%;
	margin: 0 auto;
	display: block;
	margin-top: 10px;
	letter-spacing: 15px;
	color: #666;
}
#counterfigure span {
		position: relative;
		display: inline-block;
		height: 70px;
		margin-right: 10px;
		padding-right: 5px;
		padding-bottom: 10px;
		color: #7175b7;	
		width: 5px;	
}
#counterfigure span.number {
		border: 1px solid #ccc;
		-moz-box-shadow: 0 2px 2px 2px #ccc;
		-webkit-box-shadow: 0 2px 2px 2px #ccc;
		box-shadow:0 2px 2px 2px #ccc;
		padding-left: 10px;
		width: 50px;

}

#directform {
		position: relative;
		width: 400px;
		padding: 140px 30px 0px 100px;
		
	}
h1.bubble {
	background-image: url(../elements/Bubble2.png);
	background-repeat: no-repeat;
	background-size: 100%;
	color: #535353;
	text-align: center;
	margin: 0;

}

#directform h1.bubble {
	height: 230px;
	width: 350px;
	font-size: 40pt;
	line-height: 46pt;
	padding: 30px;
}

	
#directform p {  margin-bottom: 0;}	

.floatleft { float: left; }
.floatright { float: right; }
.highlight input { border: 1px solid #F00; }
.highlight2 input, .highlight2 { border: 1px solid #7175b7; }
.highlight3 { border: 2px solid #7175b7; }
.notes { font-size: 9pt; line-height:  9pt; display: inline;}

#contactform input[type="text"] { width: 45%; padding: 1%; margin: 1%; }
#contactform textarea { width: 96%; padding: 1%; margin: 1%; height: 80px; }
#contactform input[type="submit"] {vertical-align: top; width : 9%; text-align: center;  }
#contactform p { margin-bottom: 0; }
#contactform h3 { color: #fff; }

.captcha { vertical-align: top; }


.purplebold, td.purplebold {
	font-family: 'Caveat Brush', cursive;
	font-size: 20pt;
	line-height: 26pt;
	font-weight: normal;
	color:#7175b7;	
}

.hidden { display: none; }

/* adjustments for responsive design */

@media only screen and (min-width: 1920px)  { /* greater than 1920px */


}


@media only screen and (max-width: 1920px)  { 

}


@media only screen and (max-width: 1200px)  { 
#directform { width: 230px; padding-left: 40px; padding-top: 140px;}
#directform h1.bubble {
	height: 150px;
	width: 200px;
	font-size: 24pt;
	line-height: 26pt;
	padding: 15px;
}

}


@media only screen and (max-width: 1024px)  { 
	#contact { background-image: none; }
	#contact #contactform { width: 70%; }

}


@media only screen and (max-width: 900px)  { 
footer { height: 120px; }
#footer { flex-wrap: wrap; padding-top: 10px; width: 95%;  }
#footer p { flex-basis: 40%; border-right: none; text-align: left; padding-left: 0;}
	.featuregen img {width: 30%;}
	.featuregen_content {	width: 65%;	}


}


@media only screen and (max-width: 850px)  { 

#textarea { width: 90%; }
#textarea h4 { margin-left: 0; padding-left: 0; text-align: left; }
	#login_info { margin-top: 30px;}


}



@media only screen and (max-width: 600px)  { 
#counterfigure { 	font-size: 30pt; 	line-height: 30pt; }
#counterfigure span { height: 35px; }
#counterfigure span.number {width: 20px; }
#featurearea { height: 500px; }
#featurearea .featureoverlay {width: 90% ;padding: 10px 5%; height: 240px; max-width: inherit; }
#featurearea .featureimage  {height: 200px; width: 80%; padding: 20px 10%; max-width: inherit;  }
#featurearea img { 	width: 80%; height: auto;	}
	#maincontent { min-height: 100%; }
	#directform { padding-top: 180px;}
#contactform input[type="submit"] { float: none; width: auto; }
#contactform input[type="text"] { float: none; width: 85%; }
	.featuregen img {width: 60%; margin: 0 auto;}
	.featuregen_content {	width: 100%;	}
#headerlinks {
position: absolute;
left: 0px;
top: 100px;
height: 48px;
color: #fff;
background-color: #333;
width: 320px;
border-bottom-right-radius: 10px;
padding-top: 8px;
z-index: 800;
}
}



@media only screen and (max-width: 480px)  { 

footer { height: 180px; }
#footer p { flex-basis: 90%;}
#contact #contactform { width: 90%; }
#headerlinks {width: 290px; }
#featurearea img { 	width: 100%; height: auto;	}
}


@media only screen and (max-height: 450px) and (max-width: 700px)  { 
#counter { min-height: 140px; }

}