@import "animate.css";
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
@import url('https://fonts.googleapis.com/css?family=PT+Serif');

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 0;
    /* border: 1px solid red; */
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

img {
    max-width: 100%;
    height: auto;
}

/* ----- Parallax -------------------------------------------------------------------- /*
/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;
}

/* fullscreen setup */
html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
}
.fullscreen,
.content-a {
    width:100%;
    height:100%;
    overflow:hidden;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
    height:auto;
    min-height:100%;
}

/* content centering styles */
.content-a {
    display:table;
}
.content-b {
		display:table-cell;
    position:relative;
		vertical-align:middle;
		text-align:center;
}

section {
	/* background: #f5f5f5; */
}
.not-fullscreen {
    /* height: 50%; */
    height: 40%;
}
/* ----- End Parallax -------------------------------------------------------------------- /*

/* ===== DEFAULT STYLES ============================================================================================= */
body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
}
body,td,th {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 1em;
	color: #333;
}

a {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;	
	color: #084e85;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	color: #ed9621;
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

a.blk:link {
	font-weight: normal;
	color: #000;
	text-decoration: none;
}
a.blk:visited {
	font-weight: normal;
	text-decoration: none;
	color: #000;
}
a.blk:hover {
	font-weight: normal;
	text-decoration: none;
	color: #000;
}
a.blk:active {
	font-weight: normal;
	text-decoration: none;
	color: #000;
}
a.footer:link {
	font-weight: normal;
	color: #084e85;
	text-decoration: none;
}
a.footer:visited {
	font-weight: normal;
	text-decoration: none;
	color: #084e85;
}
a.footer:hover {
	font-weight: normal;
	text-decoration: underline;
	color: #084e85;
}
a.footer:active {
	font-weight: normal;
	text-decoration: underline;
	color: #084e85;
}

.drk-grey {
	background: #999;
}

.grey {
	background: #f5f5f5;
}

.maroon {
	background: #770002;
}

.red-text {
	font-size: 22px;
	color: #770002;
}
.big-red-text {
	font-size: 30px;
    font-weight: bolder;
	color: #770002;
}
.big-white-text {
	font-size: 30px;
	color: #FFF;
}

/* ===== LARGE DESKTOP ============================================================================================== */
@media only screen and (min-width: 1025px) {
	header {
		width: 100%;
		height: 210px;
		top: 0;
		position: fixed;
		z-index: 99999;
		background-image: url(../images/metal-roof2.png);
		background-repeat: repeat-x;
		background-position: top;
	}
		.shrink {
			height: 43px;
		}
		#header {
			width: 70%;
			height: 210px;
			margin: auto;
			/* background-color: #FCF; */
		}	
			#header-col1 {
				float: left;
				width: 20%;
				height: 211px;
			}
				.logo-resize {
					width: 249px;
					height: 196px;
					float: left;
					margin-top: 15px;
					background-image: url(../images/logo.png);
					background-repeat: no-repeat;
				}

			#header-col2 {
				float: left;
				width: 80%;
				height: 211px;
			}

				#best-box {
					height: 74px;
					width: 100%;
				}

					#social-resize {
						float: right;
						width: auto;
						margin: 10px 10px 0 0;
					}

					.best-resize {
						width: 197px;
						height: 74px;
						float: right;
						background-image: url(../images/best-sign-lg.png);
						background-repeat: no-repeat;
					}

				/* ------------------------------ TOP MENU ------------------------------- */
				#nav-wrap {
					float: left;
					margin-top: 0px;
					margin-left: 50px;
					/* background-color:#CCC; */
				}
				
				/* menu icon */
				#menu-icon {
					display: none; /* hide menu icon initially */
				}
				
				#nav, 
				#nav li {
					margin: 0;
					padding: 0;
				}
				#nav li {
					list-style: none;
					float: left;
					margin-right: 5px;
				}
				
				/* nav link */
				#nav a {
					/* padding: 4px 15px; */
					display: block;
					color: #000;
				}
				#nav a:hover {
					/* background: #f8f8f8; */
				}
				
				/* nav dropdown */
				#nav ul {
					background: #fff;
					padding: 2px;
					position: absolute;
					border: solid 1px #ccc;
					display: none; /* hide dropdown */
					width: 200px;
				}
				#nav ul li {
					float: none;
					margin: 0;
					padding: 0;
				}
				#nav li:hover > ul {
					display: block; /* show dropdown on hover */
				}
				
				@media screen and (min-width: 600px) {
				
					/* ensure #nav is visible on desktop version */
					#nav {
						display: block !important;
					}
				
				}
				
				.mobile-icon {
					visibility: hidden;
					float: left;
					width: 0px;
				}
				
				.menu1-resize {
					width: 145px;
					height: 86px;
					margin-top: 0px;
					margin-left: 0px;
					float:left;
					background-image: url(/images/menu-our_menu-off.png);
					background-repeat: no-repeat;
				}
				.menu1-resize:hover {
					background-image: url(/images/menu-our_menu-on.png);
				}
				.menu2-resize {
					width: 91px;
					height: 85px;
					margin-top: 8px;
					margin-left: 40px;
					float:left;
					background-image: url(/images/menu-shop-off.png);
					background-repeat: no-repeat;
				}
				.menu2-resize:hover {
					background-image: url(/images/menu-shop-on.png);
				}
				.menu3-resize {
					width: 146px;
					height: 82px;
					margin-top: 8px;
					margin-left: 40px;
					float:left;
					background-image: url(/images/menu-locations-off.png);
					background-repeat: no-repeat;
				}
				.menu3-resize:hover {
					background-image: url(/images/menu-locations-on.png);
				}
				.menu4-resize {
					width: 157px;
					height: 82px;
					margin-top: 18px;
					margin-left: 40px;
					float:left;
					background-image: url(/images/menu-large_group-off.png);
					background-repeat: no-repeat;
				}
				.menu4-resize:hover {
					background-image: url(/images/menu-large_group-on.png);
				}
				.menu5-resize {
					width: 131px;
					height: 76px;
					margin-top: 18px;
					margin-left: 0px;
					float:left;
					background-image: url(/images/menu-the_talk-off.png);
					background-repeat: no-repeat;
				}
				.menu5-resize:hover {
					background-image: url(/images/menu-the_talk-on.png);
				}
				
				.invisiText {
					opacity: 0.0;
				}
				.invisiText2 {
					opacity: 0.0;
				}
				/* ------------------------------ TOP MENU END ------------------------------- */

	
	#hero {
		width: 100%;
		margin: 145px auto 0 auto;
		text-align: center;
	}
			
	#hero6 {
		width: 100%;
		height: 400px;
		margin: 145px auto 0 auto;
		text-align: center;
		background-image: url(/images/hero06.jpg);
		background-size: cover;
	}
	
	#hero7 {
		width: 100%;
		height: 400px;
		margin: 145px auto 0 auto;
		text-align: center;
		background-image: url(/images/hero07.jpg);
		background-size: cover;
	}

	#hero8 {
		width: 100%;
		height: 400px;
		margin: 145px auto 0 auto;
		text-align: center;
		background-image: url(/images/hero08.jpg);
		background-size: cover;
	}

	#hero9 {
		width: 100%;
		height: 400px;
		margin: 145px auto 0 auto;
		text-align: center;
		background-image: url(/images/hero09.jpg);
		background-size: cover;
	}

	#hero10 {
		width: 100%;
		height: 400px;
		margin: 145px auto 0 auto;
		text-align: center;
		background-image: url(/images/hero10.jpg);
		background-size: cover;
	}

	#hero11 {
		width: 100%;
		height: 400px;
		margin: 145px auto 0 auto;
		text-align: center;
		background-image: url(/images/hero11.jpg);
		background-size: cover;
	}
	
	#content {
			width: 60%;
			margin: auto;
			padding: 50px 0;
			font-size: 1.3em;
			line-height: 1.9;
	}

		.sliderbox {
			width: 60%;
			margin: auto;
			padding: 30px 0 30px 0;
		}
		.sliderbox-mobile {
			width: 0;
			height: 0;
			padding: 0;
			visibility: hidden;
		}

		.testimonialF {
			padding: 10px;
			border-width: 10px;
			border: solid;
			border-color: #770002;
			background-color: #FFF;
			border-radius: 8px;
		}
		.testimonial {
			padding: 8px;
			background-color: #770002;
			border: 18px solid transparent;
			-webkit-border-image: url(../images/border.png) 22 ; /* Safari 3.1-5 */
			-o-border-image: url(../images/border.png) 22 ; /* Opera 11-12.1 */
			border-image: url(../images/border.png) 22 ;
			font-size: 0.95em;
	}

	.menus {
		width: 80%;
		margin: auto;
		padding: 20px 0;
	}
		.menu-col {
			display: inline-block;
			width: 30%;
			padding: 0;
			text-align: center;
			vertical-align: top;
		}

	.menus2 {
		width: 60%;
		margin: auto;
		padding: 30px 0 40px 0;
		text-align: right;
	}
		.menu-col2 {
			display: inline-block;
			width: auto;
			padding-left: 50px;
			text-align: center;
			vertical-align: top;
		}

	.shop {
		width: 60%;
		margin: auto;
		padding: 20px 0;
		text-align: center;
	}

	.locations {
		width: 80%;
		margin: auto;
		padding: 20px 0;
		text-align: center;
	}
		.location-col {
			display: inline-block;
			width: 20%;
            margin: 20px 0 40px 0;
			text-align: center;
			vertical-align: top;
		}

	.content-sub {
		margin: 210px auto 0 auto;
		width: 80%;
		padding: 20px 0;
		text-align: center;
	}

	.footer {
		width: 80%;
		margin: auto;
		padding: 20px 0;
		text-align: center;
		color: #FFF;
	}
}


/* ===== TABLET LANDSCAPE / SMALL DESKTOP =========================================================================== */
@media only screen and (min-width: 992px) and (max-width: 1024px) {
	header {
		width: 100%;
		height: 210px;
		top: 0;
		position: fixed;
		z-index: 99999;
		background-color: #084e85;
		/* 
		-webkit-box-shadow: 0 4px 6px #999;
		-moz-box-shadow: 0 4px 6px #999;
		box-shadow: 0 4px 6px #999;
		-webkit-transition: all 0.6s ease-in-out;
		-moz-transition: all 0.6s ease-in-out;
		 */
		-webkit-box-shadow: 0 4px 4px rgba(0,0,0,.4);
		-moz-box-shadow: 0 4px 4px rgba(0,0,0,.4);
		box-shadow: 0 4px 4px rgba(0,0,0,.4);
		transition: height 700ms ease;
	}
		.shrink {
			height: 43px;
		}
		#header {
			max-width: 1100px;
			height: 210px;
			margin: auto;
			padding: 0 20px;
			background-color: #FFFFFF;
			background-image: url(/images/metal-roof.jpg);
			background-repeat: repeat-x;
				/*
				border-right-width: 1px;
				border-left-width: 1px;
				border-right-style: dashed;
				border-left-style: dashed;
				border-right-color: #CCC;
				border-left-color: #CCC;
				*/
		}
			.logo {
				width: 470px;
				height: 116px;
				float: left;
				background-image: url(../images/logo.png);
				background-repeat: no-repeat;
				background-position: bottom;
			}

}


/* ===== TABLETS PORTRAIT =========================================================================================== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	header {
		width: 100%;
		height: 210px;
		top: 0;
		position: fixed;
		z-index: 99999;
		background-color: #084e85;
		-webkit-box-shadow: 0 4px 4px rgba(0,0,0,.4);
		-moz-box-shadow: 0 4px 4px rgba(0,0,0,.4);
		box-shadow: 0 4px 4px rgba(0,0,0,.4);
		transition: height 700ms ease;
	}
		.shrink {
			height: 43px;
		}
		#header {
			max-width: 1100px;
			height: 210px;
			margin: auto;
			padding: 0 20px;
			background-color: #FFFFFF;
			background-image: url(/images/metal-roof.jpg);
			background-repeat: repeat-x;
		}
			.logo {
				width: 272px;
				height: 116px;
				float: left;
				background-image: url(../images/logo-sm.png);
				background-repeat: no-repeat;
				background-position: bottom;
			}

}


/* ===== SMARTPHONES LANDSCAPE ====================================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	header {
		width: 100%;
		height: 200px;
		top: 0;
		position: fixed;
		z-index: 99999;
		background-color: #084e85;
		-webkit-box-shadow: 0 4px 4px rgba(0,0,0,.4);
		-moz-box-shadow: 0 4px 4px rgba(0,0,0,.4);
		box-shadow: 0 4px 4px rgba(0,0,0,.4);
		transition: height 700ms ease;
	}
		.shrink {
			height: 43px;
		}
		#header {
			max-width: 1100px;
			height: 200px;
			margin: auto;
			padding: 0 20px;
			background-image: url(../images/circ.png);
			background-repeat: no-repeat;
			background-position: right top;
		}
			.logo {
				width: 100%;
				height: 105px;
				margin-bottom: 15px;
				background-image: url(../images/logo-xsm.png);
				background-repeat: no-repeat;
				background-position: center bottom;
			}

}


/* ===== SMARTPHONES PORTRAIT ======================================================================================= */
@media only screen and (max-width: 479px ) {

	header {
		width: 100%;
		height: 210px;
		top: 0;
		position: fixed;
		z-index: 99999;
		background-image: url(../images/metal-roof3.png);
		background-repeat: repeat-x;
		background-position: top;
	}

		#header {
			width: 100%;
			height: 210px;
			margin: auto;
			/* background-color: #FCF; */
		}	
			#header-col1 {
				float: left;
				width: 100%;
				height: 211px;
			}
				.logo-resize {
					width: 150px;
					height: 118px;
					float: left;
					margin: 10px 0 0 10px;
					background-image: url(../images/logo-sm.png);
					background-repeat: no-repeat;
				}

			#header-col2 {
				float: left;
				width: 80%;
				height: 211px;
			}

				#best-box {
					height: 0;
					width: 0;
					visibility: hidden;
				}

					#social-resize {
						float: right;
						width: auto;
						margin: 0;
					}

					.best-resize {
						width: 0;
						height: 0;
						float: right;
						background-image: none;
						background-repeat: no-repeat;
					}

	/* ------------------------------ TOP MENU ------------------------------- */

	/* nav-wrap */
	#nav-wrap {
		z-index: 10000;
		width: 100%;
		position: absolute;
		margin-top: -95px;
	}

	/* menu icon home page */
	#menu-icon2 {
		display: block; /* show menu icon */
		float: right;
		margin: -10px 10px 0 0;
		width: 27px;
		height: 27px;
		/* border: solid 2px #FFF; */
		padding: 0;
		background-color: #7b0008;
		background-image: url(/images/menu-icon.png);
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
	}
	#menu-icon2:hover {
		background-color: #7b0008;
	}
	#menu-icon2.active {
		background-color: #7b0008;
		background-image: url(/images/menu-icon-exit.png);
	}
	
	/* main nav */
	#nav {
		clear: both;
		display: none; /* visibility will be toggled with jquery */
		float: right;
		margin-top: 0%;
		top: 38px;
		width: 100%;
		z-index: 10000;
		padding: 0;
		background: #7b0008;
		border: none;
	}
	#nav li {
		clear: both;
		float: none;
		list-style-type: none;
		padding: 10px;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #CCC;
		margin-right: 0px;
	}
	#nav a, 
	#nav ul a {
		background: none;
		display: inline;
		padding: 0;
		color: #FFF;
		border: none;
		font-family: inherit;
		font-size: 16px;
		font-weight: bold;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}
  
	.menu1-resize {
		width: 250px;
		height: 32px;
		margin: 0;
		background-image: url("");
	}
	.menu1-resize:hover {
		background-image: url("");
	}
	.menu2-resize {
		width: 250px;
		height: 32px;
		margin: 0;
		float:left;
		background-image: url("");
	}
	.menu2-resize:hover {
		background-image: url("");
	}
	.menu3-resize {
		width: 250px;
		height: 32px;
		margin: 0;
		float:left;
		background-image: url("");
	}
	.menu3-resize:hover {
		background-image: url("");
	}
	.menu4-resize {
		width: 250px;
		height: 32px;
		margin: 0;
		float:left;
		background-image: url("");
	}
	.menu4-resize:hover {
		background-image: url("");
	}
	.menu5-resize {
		width: 250px;
		height: 32px;
		margin: 0;
		float:left;
		background-image: url("");
	}
	.menu5-resize:hover {
		background-image: url("");
	}
	
	.invisiText {
		opacity: 1.0;
	}
	/* ------------------------------ TOP MENU END ------------------------------- */

	.non-mobile {
		width: 0;
		height: 0;
		visibility: hidden;
	}

	#hero {
		width: 0;
		margin: 0;
		visibility: hidden;
	}

	#content {
			width: 90%;
			margin: 120px auto 0 auto;
			padding: 50px 0;
			font-size: 1.0em;
			line-height: 1.7;
	}

		.menu-col {
			display: inline-block;
			width: 100%;
			margin-bottom: 20px;
			text-align: center;
		}

		.sliderbox {
			width: 0;
			height: 0;
			padding: 0;
			visibility: hidden;
		}

		.sliderbox-mobile {
			width: 100%;
			margin: auto;
			padding: 40px 0;
		}
	
			.testimonialF {
				padding: 10px;
				border-width: 10px;
				border: solid;
				border-color: #770002;
				background-color: #FFF;
				border-radius: 8px;
			}
			.testimonial {
				padding: 8px;
				background-color: #770002;
				border: 18px solid transparent;
				-webkit-border-image: url(../images/border.png) 22 ; /* Safari 3.1-5 */
				-o-border-image: url(../images/border.png) 22 ; /* Opera 11-12.1 */
				border-image: url(../images/border.png) 22 ;
				font-size: 0.95em;
		}

	.shop {
		width: 90%;
		margin: auto;
		padding: 40px 0 0 0;
		text-align: center;
	}

	.locations {
		width: 90%;
		margin: auto;
		padding: 40px 0;
		text-align: center;
	}
		.location-col {
			display: inline-block;
			width: 100%;
			margin-bottom: 40px;
			text-align: center;
			vertical-align: top;
		}

	.footer {
		width: 90%;
		margin: auto;
		padding: 20px 0;
		text-align: center;
		color: #FFF;
	}

	#hero1, #hero2, #hero3, #hero4, #hero5, #hero6, #hero7, #hero8, #hero9, #hero10 {
		width: 100%;
		height: 100px;
		margin: 0;
		background-image: none;
	}

}