*,:after,:before{box-sizing:border-box}

body {font-size: 16px;  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333;margin:0;padding:0;}
img {width: auto; max-width: 100%; height: auto;}

.clear {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}
a:link, a:active {color: #314db6;}
a:hover, a:visited {color: #294098;}

h1, h2, h3, h4 {font-family: "Raleway", Helvetica, sans-serif; color: #444444;font-weight: 400;
margin: 20px 0;padding: 0;line-height: 1.4;}
.introWrap {text-align: center; max-width: 450px; margin: auto;}
h1 {font-family: "Raleway", Helvetica, sans-serif; font-size: 24px; color: #294098; margin: 20px 0 5px; font-weight: 500; text-align: center;}
h2 {font-size: 19px; }
h2.intro {margin: 0;}
h2 span {background:#6b242f; padding: 6px 2%; border-radius: 8px; color: #fff; font-size: 15px;}
h2.sectionTitle {background: #fbeabc; color: #26549f; text-align: center; padding: 6px; 
text-transform: uppercase; font-weight: 600; margin-top: 20px;}
h3 {font-size: 18px; color: #294098; font-weight: 500; margin-top: 15px;}
 p {color: #333; line-height: 1.5em; max-width: 1000px; margin: 20px 0;}

/* navigation */
.navWrap {background: #eee;}
ul#topnav {background: #eee; color: #333; margin: 10px auto 0;padding: 2px; width: 100%;max-width: 500px;}
ul#topnav li {display: inline-block; padding: 0 4px;}
ul#topnav a {text-transform: uppercase; text-decoration: none;display: inline-block; margin: 4px 0; padding: 8px 22px;
 font-size: 15px; border: 1px solid black;}
ul#topnav a:link, ul#topnav a:visited { color: #333; background: #fff;}
ul#topnav a:hover, ul#topnav a:active {color: white; background: #000;}

/*header */

.header {width: 100%;margin:0 auto;padding: 0; border-top: 3px solid #333; border-bottom: 1px solid #ddd;
background: #fff url(/bg-images/bg-grid.gif);text-align: center; z-index: 100; 
box-shadow: 0 2px 2px #ccc;}
.headerWrap {width: 100%;display: flex; flex-wrap: wrap; margin: 0 auto; text-align: center;}
.headerLeft, .headerRight {width: 98%; padding:  0; margin: 0; flex: 1 1 auto; text-align: center;}

#logo {display: inline-block; margin: 22px 0 0;}

/* end header */

.wrapper {margin:0 auto; }
.content {background:#fff; padding: 0 2%; width: 100%; min-height: 450px;max-width:1100px;}
.links {display:block;margin:0;padding: 1%;}
.hero {background:#fbeabc; background: #f6f6f6; text-align: center; padding: 5px;}
.hero2 {background:#fff;text-align: center; padding: 5px;}

/* footer */

.footer,.sidebar{padding: 1%;}
.footer {border-top: 5px solid #9d9c97; background:#4e2126;padding: 2% 3% 0;}
.footer h3 {color: #fff; text-align: left;}
.footer p {color: #9d9c97; line-height: 1.4em;}
.footer a {color: #9d9c97; display: inline-block; padding: 4px;}

/*flexbox */
.boxWrap {width: 96%;display: flex; flex-wrap: wrap; margin: 1% auto;text-align: center;}
.boxWrap2 {width: 96%;display: flex; flex-wrap: wrap; margin: 0 auto; text-align: center;}
.box, .boxLeft, .boxRight {width: 98%; padding: .5%; margin: 0; flex: 1 1 auto;}
.introLeft, .introRight {width: 98%; padding:  0; margin: 0; flex: 1 1 auto; text-align: center;}
.boxLeft img, .boxRight img, .introLeft img, .introRight img{width: 98%; padding: 0; margin: 0; flex: 1 1 auto; text-align: center;}
.box4 {width: 49%;padding: .5%;flex: 1 1 auto; text-align: center;}
.box3 h3 {margin: 20px 0 0;}
.box p {text-align: left; margin: 10px 0;}
.box3 p {text-align: left; margin: 10px;}
.frame { background: #eee; border-radius: 10px; margin: 2% 1%; padding: 2%; width: 100%;}
.boxWrap p.centered, .boxWrap p.centerAlign {padding: 0; margin: 0;}
.icons {text-align: center; clear: both; background: #f6f6f6; padding: 8px 0; 
display: flex; flex-wrap: wrap; margin: 1% auto;}
.icons2 {text-align: center; clear: both; display: flex; flex-wrap: wrap; margin: 1% auto;}
.icons:hover, .icons2:hover {background: #fff;}

.content ul {margin: 20px 0 20px 24px; padding: 0; list-style-type: square; color: #333; font-size: 16px; text-align: left;}
.content ul li {font-size: 16px; padding: 6px 4px; margin: 0;}
.content ul.details h3 {font-size: 20px; }
.content ul.details p {font-size: 16px; margin: 0;}
.content ul.details li {list-style-type: square; font-size: 16px; padding: 6px 4px; text-align: left;}
ul.contact li {font-size: 16px;}

/* phone info */

body .phoneWrap {margin: 0 auto 10px; background: #ddd;
 border-radius: 3px; max-width: 345px;}
.phoneWrap h2 {font-size: 18px; padding: 3px 0 0;}
.phoneWrap h3 {font-size: 18px; color: #fff; border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;padding: 5px; 
text-align: center;background:#712e31;  margin: 2px auto;}
.phoneWrap h3:hover {background: #294098;}
.phoneWrap a:link, .phoneWrap a:visited {color: #fff;}
.phoneWrap h2 {margin: 5px;}
.phoneWrap a:hover, .phoneWrap a:active {color: #ddd;}

p.phone span{color: #7b372e; font-weight: bold; font-size: 1.1em;display: block; text-transform: uppercase;}
p.phone span.dot {display: none;}
p.buttons {text-align: center;}
p.icons img {display: inline-block;}

.feature {position: relative; min-width: 200px;}
figcaption {text-align: center; text-transform: uppercase; font-size: 1.2em; 
opacity: .8; width: 90%; background: #333; color: #fff; font-weight: bold;
border-radius: 5px; padding: 4px; position: absolute; bottom: 20px; left: 5%;}

.small {font-size: 13px;}
.bold { font-weight: bold}
.boldwhite {font-weight: bold; color: white}
.normal {color: white}
.copyright {font size: 12px;}
.centered {text-align: center; margin: 20px auto;}
p.association {text-align: center; vertical-align: top;}
p.association img {max-width: 200px;}
.testimonial, .checklist {background: #eee; margin: 20px auto; padding: 20px; max-width: 850px;}
.testimonial p.author {color: #294098; text-align: right;}

.hero2 img {display: inline-block; margin: 0 auto;}

img.alignRight {float: none; display: block; margin: 20px auto;}
img.portrait {width: 90%; max-width: 340px; margin: 10px auto;}

table.calculator {margin: 10px auto;}
table.calculator td {border: 1px solid #000; padding: 5px; font-size: 1em;}
table.calculator input {padding: 4px; border: 1px solid #ccc; font-size: 120%;}
.checklist h2 {background-color: #6b242f; color: #fff; padding: 5px;}

/* miscellaneous */

/*GROW*/
.grow img {display: inline-block; margin: 0 3%;
  height: 169.5px;width: 225px;transition: all 1s ease;}


.grow img:hover {transform: scale(1.1);}

a.button, a.button2 {
text-transform: uppercase;
 background: #0d2261;color: white;
 text-decoration: none;
 display: inline-block;
 padding: 10px 12px;margin: 6px;
 font-size: 14px;line-height: 1.4;
 text-align: center;border-radius: 5px;
 transition: all .2s ease-in;
}

a.button2 {background: #000;
padding: 10px 12px; margin: 10px; border-radius: 10px;}

a.button:hover, a.button2:hover {background-color: #6b242f;}
a.button span:after {content: ' \25B6';}
a.button:hover span:after {position: relative; left: 4px;}
 
 /* down arrow*/

a.fa-caret-down { text-decoration: none; }
.arrow {text-align: center;margin: 3% 0;}
.bounce {animation: bounce 2s infinite;}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-20px);}
  60% {transform: translateY(-10px);}
}


/* blockquote */
  
  blockquote {position: relative; text-align: left;
  max-width: 99%;
  background: #f6f6f6;
  border-left: 10px solid #ccc;
  margin: 5px;padding: 1em 10px;
  quotes: "\201C""\201D""\2018""\2019";}
blockquote:before {
  color: #ccc;content: open-quote;
  font-size: 4em;line-height: 0.15em;
  margin-right: 0.15em;
  vertical-align: -0.4em;}
blockquote p {display: inline; text-align: left;}

p.author {display: block; text-align: right; font-weight: bold; padding-bottom: 0; margin: 0;}
p.more {position: absolute; bottom: 0; left: 8px; font-size: 14px;}
p.more a {display: inline-block; padding: 4px; border: 2px solid #fff; text-decoration: none; background: #ccc;}
p.more a:hover, p.more a:active{background: #efb144; color: #fff;}

/* back to top */

#back-to-top {
display: inline-block; background-color: #c03936; width: 50px;height: 45px;
text-align: center;border-radius: 4px;margin: 20px; position: fixed;bottom: 5px; right: 5px;
transition: background-color .3s; z-index: 1000; opacity: 0; visibility: hidden;}

#back-to-top:hover {cursor: pointer;background-color: #d43f3c;}
#back-to-top:active {background-color: #d43f3c;}
#back-to-top.show {opacity: 1;visibility: visible;}

#back-to-top::after {content: "\f077";font-family: FontAwesome;font-weight: normal;
font-style: normal;font-size: 2em;line-height: 45px;color: #fff;}

/* fadeIn */


.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 3s;	
	-webkit-animation-duration: 3s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;		
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}	
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* slideRight */

.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;		

}

@keyframes slideRight {
	0% {transform: translateX(-150%);opacity: 0;}		
	100% {transform: translateX(0%);opacity: 1;}	
}

@-webkit-keyframes slideRight {
	0% {-webkit-transform: translateX(-150%);opacity: 0;}		
	100% {-webkit-transform: translateX(0%);opacity: 1;}
}
.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 3s;	
	-webkit-animation-duration: 3s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;		

}

@keyframes slideLeft {
	0% {transform: translateX(150%);opacity: 0;}		
	100% {transform: translateX(0%);opacity: 1;}	
}

@-webkit-keyframes slideLeft {
	0% {-webkit-transform: translateX(150%);opacity: 0;}		
	100% {-webkit-transform: translateX(0%);opacity: 1;}
}


@media screen and (min-width:600px){
.header {position: fixed; top: 0; left: 0;}
.wrapper {width: 100%; max-width: 1100px; margin-top: 200px;}	
ul#topnav {max-width: 100%;}
ul#topnav a {margin: 4px 0; padding: 8px 12px; font-size: 15px; border: 1px solid #333;}
}
@media screen and (min-width:700px){
.header {position: fixed; top: 0; left: 0;}
.site {display: flex;min-height: 100vh;flex-direction: column;}
ul#topnav {max-width: 100%;}
ul#topnav a {border: 1px solid #eee;margin: 4px 0; padding: 8px;}
.wrapper {width: 100%; max-width: 1100px; margin-top: 200px;}
.boxWrap {width: 98%;display: flex; flex-wrap: wrap; margin: 1% auto; text-align: left;}	
.boxWrap2 {width: 96%;display: flex; flex-wrap: wrap; margin: .5% auto; text-align: left;}
.boxLeft, .boxRight{width: 48%; padding: 1% 0; margin: 0 1%; flex: 1 1 auto;}
.introLeft, .introRight{width: 48%; padding: 1% 0; margin: 0 1%; flex: 1 1 auto; text-align: center;}
.box {width: 30%; padding: .5%; margin: 0; flex: 1 1 auto;}
.box2 {width: 60%; padding: .5%; margin: 0; flex: 1 1 auto;}
.box3 {display: table-cell; width: 50%; padding: 4px;}
.box4 {width: 24%; padding: 1%; margin: 0 auto; flex: 1 1 auto; background: #f6f6f6; text-align: left;}
.box4 img {border: 3px solid #fff;}
.box4 img:hover {border: 3px solid #bbb;}
.box4 img.plain {border: none;}
.frame { background: #eee; border-radius: 10px; margin:  1% 1% 0; padding: 1%;}
img.alignRight {float: right; margin: 20px 0 10px 20px;}
img.portrait {width: 30%;}
p.phone span {color: #7b372e; font-weight: bold; font-size: 1.1em; display: inline-block;}
p.phone span.dot {display: inline-block;}
ul.details h3 {font-size: 18px; }
}

@media screen and (min-width:800px){
.wrapper {width: 100%; max-width: 1100px; margin-top: 125px;}
.headerWrap {width: 96%;display: flex; flex-wrap: wrap; margin: .5% auto;}
.headerLeft {width: 38%; padding: .5% 0 0; margin: 0; flex: 1 1 auto;}
.headerRight {width: 58%; padding: 0 0 .5%; margin: 0; flex: 1 1 auto;}
#logo {margin-top: 0;}	
ul#topnav {margin-top: 33px;}
ul#topnav li {display: inline-block; padding: 0 2px;}
ul#topnav a {padding: 8px 6px; font-size: 14px;}
.frame { background: #eee; border-radius: 10px; margin: 1%;}
}

@media screen and (min-width:900px){
ul#topnav a {padding: 8px 12px; font-size: 14px;}
}

@media screen and (min-width:900px){
h1 {font-size: 26px;}
h2 span {padding: 6px 4%; font-size: 18px;}
.introWrap {width: 96%;display: flex; flex-wrap: wrap; margin: 0 auto; border: 1px solid red;}	
.introLeft, .introRight{width: 49%; padding: 1% 0; margin: 0; flex: 1 1 auto;}
}