/* *************************************** BODY, NAV BARS *************************************** */
body {
	background-color: white;
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	text-align: center;
}
.navbar {
	width: 98%;
	background-color: #45b;
	margin: 0px;
	padding: 6px 1%;
	text-align: center;
	box-shadow: 0px 1px 12px #999;
}
.footerbar {
	margin-top: 36px;
}
.fixedfooterbar {
	position: fixed;
	bottom: 0;
	box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.36);
}
.navtitle {
	font-size: 40px;
	padding: 12px 0px 18px;
	color: white;
	transition: all 0.3s ease;
}
.navtext {
	color: white;
	text-decoration: none;
	display: inline-block;
	padding: 6px 1%;
	transition: all 0.3s ease;
}
.navtext2 {
	color: white;
	text-decoration: none;
	display: inline-block;
	padding: 7px 1.2%;
	transition: all 0.3s ease;
}
.navtext21, .navtext22, .navtext23 {
	color: white;
	text-decoration: none;
	display: inline-block;
	padding: 0;
	margin: 7px 1.2%;
	transition: all 0.3s ease;
}
.navtext23 {
	border-bottom: 1px dotted white;
}
a.navtext:hover, a.navtext2:hover, a.navtext21:hover, a.navtext22:hover, a.navtext23:hover, a.navtitle:hover {
	color: white;
	text-shadow: 0px 0px 7px #fff;
	transition: all 0.3s ease;
}

/* ***************************************** OUTER BOXES ***************************************** */
.normbox, .widebox {
	margin-left: auto;
	margin-right: auto;
}
.normbox {
	max-width: 979px;
}

/* **************************************** CARD MECHANICS **************************************** */
a.card {
	position: relative;
	padding: 0px 0px 0px;
	display: inline-block;
	text-decoration: none;
	color: black;
}
a.card:hover {
	color: black;
	text-shadow: none;
}
.cardpic {
	width: 100%;
	height: auto;
	border: none;
	display: block;
}
.cardcap1 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
}
.cardcap2 {
	margin: 1px;
	background-color: white;	
	opacity: 0.8;
	padding: 3% 2% 4%;
	text-align: center;
	overflow: hidden; 
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* **************************************** GENERIC STUFF **************************************** */

h1 {
	padding: 60px 0px 12px;
	margin: 0px;
	text-align: left;
	font-size: 36px;
	font-weight: normal;
}
h2 {
	padding: 60px 0px 12px;
	margin: 0px;
	text-align: left;
	font-size: 36px;
	font-weight: normal;
}

a.btnwhite {
	display: inline-block;
	padding: 1.5% 2.4%;
	background-color: white;
	color: #45b;
	font-weight: bold;
	border: 1px solid #ccc;
	margin: 1%;
	border-radius: 3px;
}
a.btnwhite:hover {
	box-shadow: 0px 2px 18px #ccc;
	text-shadow: none;
}
a.btn1 {
	display: inline-block;
	box-sizing: border-box;
	border-radius: 3px;
	width: 49%;
	padding: 9px;
	background-color: #45b;
	color: white;
	text-align: center;
	margin-top: 2%;
	margin-right: 1%;	
}
a.btn2 {
	display: inline-block;
	box-sizing: border-box;
	border-radius: 3px;
	width: 49%;
	padding: 9px;
	background-color: #f80;
	color: white;
	text-align: center;
	margin-top: 2%;
	margin-left: 1%;
}
a.btn1:hover {
	color: white;
	box-shadow: 0px 2px 18px #aad;
	text-shadow: none;
}
a.btn2:hover {
	color: white;
	box-shadow: 0px 2px 18px #eb7;
	text-shadow: none;
}

div.contactbar {
	display: inline-block;	
	width: 32%;
	margin: 6px 2% 2.4% 0%;
	background-color: #eee;
	color: #333;
	font-weight: bold;
	text-align: left;
}
div.contactbarlast {
	display: inline-block;	
	width: 32%;
	margin: 0% 0% 2.4%;
	background-color: #eee;
	color: #333;
	font-weight: bold;
	text-align: left;
}
.contactbar img, .contactbarlast img {
	display: inline-block;
	width: 42px;
	vertical-align: middle;
	margin-right: 6px;
}
.cont1 a { color: #19f; }
.cont2 a { color: #e00; }
.cont3 a { color: #45b; }
.cont1 a:hover { color: #19f; text-shadow: 0px 0px 9px #6bf; transition: all 0.3s ease; }
.cont2 a:hover { color: #e00; text-shadow: 0px 0px 9px #f66; transition: all 0.3s ease; }
.cont3 a:hover { color: #45b; text-shadow: 0px 0px 9px #89f; transition: all 0.3s ease; }


.offercard {
	display: inline-block;
	padding: 0px 0px 12px 0px;
	box-sizing: border-box;
}
.offercard:hover {
	display: inline-block;
	padding: 0px 0px 12px 0px;
	box-sizing: border-box;
}
.offername {
	width: 100%;
	font-size: 2em;
	padding: 6px 0px;
}
.offerprice {
	font-size: 2em;
}
.offertext {
	padding: 12px 12px;
}
.offertext hr {
   border: 0;
   border-top: 1px solid #eee;
   margin: 7px 0
}




/******************************************** SIDE QUOTES **************************************** */
.quote, .lquote, .rquote {
	background-color: #eee;
	color: #555;
	padding: 12px 15px 12px;
	margin: 0px 0px 16px;
	text-align: justify;
	line-height: 1.5;
}
.lquote {
	float: left;
}
.rquote {
	float: right;
}

/* ********************************** COLUMNS AND PICTURES BASICS ******************************** */
.onecol, .col1, .col2, .col1p, .col2p {
	display: inline-block;
	padding: 0px;
	vertical-align: top;
}
.vpic1, .vpic2 {
	display: inline-block;
}

/* ************************** MEDIA QUERIES - CARD, CONTENT, COLS, PICS ************************** */

@media screen and (max-width:400px) { /* PHONE */
	a.card, .onecol, .col1, .col2, .col1p, .col2p {
		width: 96%;
		margin: 2%;
	}
	.hpic, .vpic, .vpic1, .vpic2 {
		width: 100%;
		height: auto;
		margin: 0px 0px 2%;
	}
	.normbox, .widebox {
		width: 92%;
	}
	.aboutpic {
		width: 100%;
	}
	/* .fixedfooterbar {
		position: static;
		margin-top: -70px;
	} */
	.navtext2 {
		display: none;
	}
	h2 { font-size: 28px; }
	.navtext21 { display: none; }
	.navtext22 { border-bottom: 1px dotted white; }
	a.btn1, a.btn2 { margin: 3% 0% 0%; width: 100%; }
	div.contactbar, div.contactbarlast { width: 100%; margin: 0 0 2.4%; }
	.offercard { width: 96%; margin: 2%; font-size: 12px; }
	.connectnarrow { display: block; }
	.connectwide { display: none; }
}

@media screen and (min-width:401px) and (max-width:900px) { /* PHONE LANDSCAPE / TABLET PORTRAIT */ 
	a.card {
		width: 46%;
		margin: 2%;
	}
	.onecol, .col1, .col2, .col1p, .col2p {
		width: 96%;
		margin: 0px 2% 0px;
	}
	.hpic, .vpic {
		width: 100%;
		height: auto;
		margin: 0px 0px 2%;
	}

	.vpic1 {
		width: 49%;
		height: auto;
		margin: 0px 1% 2% 0%;
	}
	.vpic2 {
		width: 49%;
		height: auto;
		margin: 0px 0% 2% 1%;
	}
	.aboutpic {
		width: 46%;
		float: right;
		margin-left: 4%;
	}
	a.btn1, a.btn2 { margin: 2% 0% 0%; width: 100%; }
	div.contactbar, div.contactbarlast { width: 100%; margin: 0 0 2.4%; }
	.connectnarrow { display: block; }
	.connectwide { display: none; }
}

@media screen and (min-width:401px) and (max-width:900px) and (max-height:400px) { /* PHONE LANDSCAPE */
	.vpic {
		max-width: 60%;
	}
	.normbox, .widebox {
		width: 86%;
	}
	/* .fixedfooterbar {
		position: static;
		margin-top: -70px;
	} */
	.navtext2 {
		display: none;
	}
	.navtext21 { display: none; }
	.navtext22 { border-bottom: 1px dotted white; }
	.offercard { width: 28.8%; margin: 2%; font-size: 10px; }
	.offertext { padding: 3px; }
}

@media screen and (min-width:401px) and (max-width:900px) and (min-height:401px) { /* TABLET PORTRAIT */
	.normbox, .widebox {
		width: 94%;
	}
	.navtext21 { display: none; }
	.offercard { width: 28.8%; margin: 2%; font-size: 14px; }
}

@media screen and (min-width:901px) { /* TABLET LANDSCAPE / DESKTOP */
	a.card {
		width: 23%;
		margin: 1%;
	}
	.onecol {
		width: 98%;
		margin: 0px 1% 0px;
	}
	.col1 {
		width: 46%;
		margin: 0px 3% 0px 1%;
	}
	.col2 {
		width: 46%;
		margin: 0px 1% 0px 3%;
	}
	.col1p {
		width: 56%;
		margin: 0px 3% 0px 1%;
	}
	.col2p {
		width: 36%;
		margin: 0px 1% 0px 3%;
	}
	.hpic, .vpic {
		width: 100%;
		height: auto;
		margin: 0px 0px 2%;
	}
	.vpic {
		max-width: 60%;
	}
	.vpic1 {
		width: 49%;
		height: auto;
		margin: 0px 1% 2% 0%;
	}
	.vpic2 {
		width: 49%;
		height: auto;
		margin: 0px 0% 2% 1%;
	}
	.normbox, .widebox {
		width: 90%;
	}
	.lquote {
		width: 44%;
		margin-right: 24px;
	}	
	.rquote {
		width: 44%;
		margin-left: 24px;
	}
	.aboutpic {
		width: 23%;
		float: right;
		margin-left: 2%;
	}
	.offercard { width: 31%; margin: 1%; }
	.connectnarrow { display: none; }
	.connectwide { display: block; }
}

@media screen and (max-width:620px) {
	a.buttonview, a.buttonorder { width: 100%; margin-left: 0; margin-right: 0; }
}


/* ************************************* LOWEST LEVEL GOODIES ************************************* */

h3 {
	padding: 48px 0px 12px;
	margin: 0px;
	text-align: left;
	font-size: 24px;
	font-weight: normal;
}
h4 {
	padding: 112px 0px 12px;
	margin: 0px;
	text-align: left;
	font-size: 28px;
	font-weight: normal;
}
p {
	/* padding: 0px 0px 21px; */
	padding: 0px 0px 2.4%;
	margin: 0px;
	text-align: justify;
	line-height: 1.5;
}
a {
	color: #45b;
	text-decoration: none;
	transition: all 0.3s ease;
}
a:hover {
	color: #45b;
	text-shadow: 0px 0px 9px #67c;
	transition: all 0.3s ease;
}
a.textlink {
	border-bottom: 1px dotted #45b;
}
.gray {
	text-decoration: none;
	color: #bbb;
}
.blue {
	text-decoration: none;
	color: #45b;
}
.lightblue {
	text-decoration: none;
	color: #abe;
}
.strong {
	color: #45b;
	font-size: 21px;
	font-weight: bold;
}
.author {
	font-weight: bold;
	color: #45b;
}
.topspace {
	margin-top: 18px;
}

ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
ul li{
	line-height: 1.5;
	margin: 0.7em 0px;
	padding: 0 0 0 33px;
	background:url(check.png) no-repeat 0px 4px;
	text-align: left;
}

.share42init {
	display: inline-block; 
	vertical-align: -12px; 
	margin-left: 15px;
	margin-right: 7px;
}
.balloon {
	background-color: #45b;
	color: white;
	border-radius: 4px;
	padding: 2px 12px;
}

.orderbtn {
	color: white;
	background-color: #45b;
	font-weight: bold;
	text-align: center;
	width: 100%;
	padding-top: 9px;
	padding-bottom: 9px;
	display: inline-block;
	margin-bottom: 2.4%;
}
a.orderbtn:hover {
	color: white;
	text-shadow: 0px 0px 7px #abd;
	transition: all 0.3s ease;
	box-shadow: 0px 2px 14px #999;
}
.footerorderbtn {
	color: white;
	background-color: #45b;
	background: linear-gradient(to top, #34a, #67e);
	font-weight: normal;
	text-align: center;
	padding: 4px 15px;
	margin: 0px 1.2%;
	border: 1px solid #fff;
	display: inline-block;
}
a.footerorderbtn:hover {
	color: white;
	text-shadow: 0px 0px 7px #abd;
	transition: all 0.3s ease;
	box-shadow: 0px 0px 9px #125;
}
.avquote {
	text-align: center;
	margin-top: 40px;
}
.avpic {
	width: 90px;
	margin-top: -40px;
}


/* ***************************************** FEEDBACK FORM ***************************************** */
input, textarea {
	font-family: inherit;
	font-size: 100%;
	width: 100%;
	color: black;
	border: 1px solid #45b;
	margin: 4px 0px 4px;
	padding: 0px;
	-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
	-moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
	box-sizing: border-box;
}
input {
	height: 33px;	
}
textarea {
	height: 124px;
	vertical-align: top;
}
input.submit {
	background-color: #45b;
	color: white;
}


/* ***************************** BLOG INDEX STUFF - POST INFO, PAGING ***************************** */
@media screen and (max-width:400px) { /* PHONE */
	.postinfo1, .postinfo2 {
		text-align: left;
		display: block;
	}
	.postinfobar {
		padding: 15px 0px 0px;
	}

}
@media screen and (min-width:401px) { /* MORE THAN PHONE */
	.postinfo1 {float: left;}
	.postinfo2 {float: right;}
	.postinfobar {
		clear: both;
		padding: 45px 0px 0px;
	}
}

a.pagenum {
	display: inline-block;
	width: 30px;
	height: 24px;
	color: #45b;
	padding: 12px;
	border: 1px solid #45b;
	margin: 0px 3px 0px;
}
a.pagesel {
	display: inline-block;
	width: 30px;
	height: 24px;
	background-color: #45b;
	color: white;
	padding: 12px;
	border: 1px solid #45b;
	margin: 0px 3px 0px;
}