@charset "UTF-8";
/* CSS Document */

<style type="text/css">

/* reset */
* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
wrapper, header, footer, section, aside, nav, article {
display: block;
}

body {
margin-right: 1.0%;
	margin-left: 1.0%;
max-width: 100%;
line-height: 1;
font-family: lucinda grande, Arial, Helvetica, sans-serif;
color: #666;
font-size: 1.1em;
font-size: calc (1.1em + 1vw) 
line-height: 18px;
height: auto;

}


	
/* layout */

wrapper {
	width: 940px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 2px;
	background: #fff;
	color: #999999;
	max-width:90%;
	
	

}

nav {
width: 940px;
margin: 0 auto;
background: #999999;
height: 45px;

}

header {
width: 940px;
margin: 0 auto;
padding-bottom: 20px;
background: #fff;
overflow: auto;
max-width:90%;

}

#main {
width: 1000px;
margin: 0 auto;
background: #FFF;

max-width:95%;

}

footer {
width: 940px;
margin-left: 1%;
clear: both;

}

/* basics */

@font-face {
	font-family: optima;
	font-weight: normal;
	font-style: normal;
}

h5, {
display: block;
font-variant: small-caps;
line-height: auto;
padding: 5px;
font-weight: bold;
color: #000;

}



h4 {
display: block;
font-variant: small-caps;
line-height: auto;
padding: 5px 0;
font-weight: light;
color: #555;
text-align: center;
font-size: 1.1em;
}

a:link, a:visited {
color: #000;
text-decoration: none;
}

a:hover, a:active {
color: #A32626;
}

p {
margin-bottom: 18px;
line-height: 1.6; /* Increases vertical space smoothly */
}

li {
padding-left: 0px;
}

/* site title */

h1 {

font-size: 1.6em;
color: #A32626;
visibility: inherit;
	top: auto;
	bottom: auto;
/*	position: relative;*/
	text-align: center;
	font-weight: bold;
	font-family: lucinda grande, Arial, Helvetica, sans-serif; font-variant: small-caps;
	line-height: auto;
	margin: 0 1px 5px 1px;
	margin: 0 auto;
	margin-top: 1px;
	margin-bottom: 1px;

}

h1 a:link, a:visited {
color: #A32626;

}

h1 a:hover, a:active {
color: #000;

}

{
	font-size: 1.5em;
	color: #000000;
	visibility: inherit;
	top: auto;
	bottom: auto;
/*	position: relative;*/
	text-align: center;
	font-weight: normal;
	font-family: lucinda grande, Arial, Helvetica, sans-serif; font-variant: small-caps;
	line-height: auto;
	margin: 0 1px 5px 1px;
	margin: 0 auto;
	margin-top: 1px;
	margin-bottom: 1px;
	
}

.wrapper h5 {
font-size: 2em;
font-variant: small-caps;
line-height: normal;
font-weight: light;
color: #A32626;
max-width: 90%;
}

h6 {

font-weight: bold;
font-family: 'MedioRegular', Verdana, Arial, Helvetica, sans-serif;
font-size: 2em;
padding: 0 0 0 20px;
color: #A32626;



}

h6 a:link, a:visited {
color: #A32626;

}

h6 a:hover, a:active {
color: #000;

}

/* nav */

nav .menu {
font-weight: bold;
}

nav .menu ul {
margin: 0;
padding: 8px 0 0 20px;
list-style: none;
line-height: normal;
}

nav .menu li {
display: block;
float: left;
}

nav .menu a {
display: block;
float: left;
margin-right: 5px;
padding: 0px 5px;
text-decoration: none;
font-size: 1em;
color: #fff;
}

nav .menu a:hover {
text-decoration: underline;
color: #A32626;
}

/** HEADER */

header .headlineimage img {
float: left;
padding: 20px 10px 10px 30px;
width: 300px;
}

header .headline {
margin-left: 70px;
float: left;
width: 500px;
color: #333333;
max-width: 95%;
line-height: 1.2em;
}

header .headline h2 {
font-size: 1.7em;
font-variant: small-caps;
line-height: normal;
text-shadow: 0px 2px 2px #777;
}

header .headline2 {

width: 500px;
color: #333333;
margin-left: auto ;
margin-right: auto ;
max-width: 75%;
}






/** ARTICLES **/

article {
margin-bottom: 10px;
}

article img {
border: none;
}

.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 5px;
}

.alignright, img.alignright {
display: inline;
float: right;
margin-left: 5px;
}

.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

.triplecols {
width: 850px;
margin-left: 40px;
margin-top: 20px;
border-bottom: 1px solid #ddd;

}
.doublecols {
width: 850px;
margin-left: 20px;
margin-top: 10px;

}

/* single blocks of images and captions */

.singleblocks {
	display: inline-block;
	vertical-align: top;
	width: 840px;
	text-align: left;
	color: #222222;
	margin-top: 20px;
	margin-right: 40px;

	margin-left: 40px;
	max-width:95%;

}

.singleleftblock {
	margin-right: 40px;
}

.singlemiddleblock {
	margin-right: 40px;
}
.singlerightblock {
	margin-right: 1px;
}

.singleblocks .thumbnail {
	border: none;
}

.singleblocks .caption {
	display: block;
	font-size: 1.6em;
	font-variant: small-caps;
	color: #A32626;
	text-align: center;
}

.singleblocks .byline {
  font-variant: small-caps;
  color: #000000;
}

.singleblocks p {
margin-top: 5px;
text-align: justify;
line-height: 1.6; /* Increases vertical space smoothly */
}

/* triple blocks of images and captions */


.doubleblocks {
	display: inline-block;
	vertical-align: top;
	align: middle;
	width: 250px;
	text-align: left;
	color: #222222;
	margin-top: 10px;
	
}

.doubleleftblock {
	margin-left: 110px;
	
}

.doublemiddleblock {
	margin-left: 80px;
	
}



.doubleblocks .thumbnail {
	border: none;
}

.doubleblocks .caption {
	display: block;
	font-size: 1.3em;
	font-variant: small-caps;
	color: #A32626;

}

.doubleblocks .byline {
  font-variant: small-caps;
  color: #000000;
}

.doubleblocks p {
margin-top: 5px;
text-align: justify;
line-height: 1.6; /* Increases vertical space smoothly */

}
	

.tripleblocks {
	display: inline-block;
	vertical-align: top;
	width: 250px;
	text-align: left;
	color: #222222;
	margin-top: 20px;

}

.tripleleftblock {
	margin-right: 40px;
	max-width:33%;
}

.triplemiddleblock {
	margin-right: 40px;
	max-width:33%;
}

.triplerightblock {
	margin-right: 1px;
	max-width:33%;
}

.tripleblocks .thumbnail {
	border: none;
}

.tripleblocks .caption {
	display: block;
	font-size: 1.3em;
	font-variant: small-caps;
	color: #A32626;

}

.tripleblocks .byline {
  font-variant: small-caps;
  color: #000000;
}

.tripleblocks p {
margin-top: 5px;
text-align: justify;
line-height: 1.6; /* Increases vertical space smoothly */
}

/* footer widget blocks */

aside h3 {
font-size: 1.2em;
}

aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
}

aside li a {
display: block;
text-decoration: none;
}

aside li a:hover {
text-decoration: underline;
}

#footer-area {
background: #999999;
color: #efefef;
font-size: 100%;
padding: 18px 0;
overflow: hidden;
max-width: 100%;
}

.footer-segment {
float: left;
width: 190px;
max-width: 25%;
}

.first {
margin-right: 20px;
margin-left: 40px;
max-width: 25%;
}

.second {
margin-right: 30px;
max-width: 25%;
}

.third {
margin-right: 30px;
max-width: 25%;
}

.last {
float: center;
margin-right: 20px;
}

footer aside h3 {
color: #000;
}

footer p {
margin-top: -15px;
color: #333;
max-width:90%;
line-height: 1.6; /* Increases vertical space smoothly */
}


h5 {

font-weight: light;
font-family: 'MedioRegular', Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
padding: 30px 0 20px 150px;
color: #A32626;

}

wrapper2 {
	width: 940px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	background: #000;
	max-width:90%;


}
wrapper3 {
	width: 940px;
	margin: 0 auto;
	margin-top: 3px;
	margin-bottom: 3px;
	background: #000;
	color: #88888;
	display: block;
	font-variant: small-caps;
	line-height: 1.5em;
	padding: 10px 0;
	font-weight: bold;
	color: #000;
	max-width:90%;

}








/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	line-height: normal;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 4%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 65.33%; }
.span_1_of_3 { width: 30.66%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }

.section .caption {
	display: block;
	font-size: 1.3em;
	font-variant: small-caps;
	color: #A32626;

}

.section .byline {
  font-variant: small-caps;
  color: #000000;
	
}
}

.enveloper {
	padding: 5px;
	max-width: 960px;
	width: 95%;
	margin: 20px auto;
}
announcer {
	padding: 0 15px;
}

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px 0;
}

.column {
	flex: 1;
	border: 1px solid gray;
	margin: 2px;
	padding: 10px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
	
}

.caption {
	display: block;
	font-size: 1.3em;
	line-height: auto;
	font-variant: small-caps;
	color: #A32626;
}

.byline {
  font-variant: small-caps;
  color: #000000;
}

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 3%;
}.col:first-child { margin-left: 0%; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 48.5%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

.container {
	width: 100%;
	max-width: 950px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 300px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: #FFF;
	margin:auto;
	position:relative;
	text-align: center;
	
}


/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74%;
}
.span_2_of_4 {
	width: 48%;
}
.span_1_of_4 {
	width: 22%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}


.bottomTextOld {
	max-width: 100%;
	height: auto;
	background: #fff;
	margin: 10px 30px 10px 30 px;
	line-height: 18px;
	height: auto;

}

.bottomText {
	max-width: 100%;
	height: auto;
	background: #fff;
	margin: 10px 30px 10px 30 px;
	line-height: auto;
	height: auto;
	font-weight:light;
	text-align:center;
	padding-top:2px;
	padding-bottom: 5px;
	font-family:Arial Narrow, Arial, Helvetica, sans-serif;
	 font-size:1.1em;
	font-color:#A9A9A9;
}


hr { 
 display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-width: 2px;
  align: center;
  max-width: 60%;
} 

h2 {
	max-width: 1200px;
    	width: 90%;
	font-size: 1.6em;
	color: #000000;
	visibility: inherit;
	top: auto;
	bottom: auto;
/*	position: relative;*/
	text-align: center;
	font-weight: normal;
	font-family: lucinda grande, Arial, Helvetica, sans-serif; font-variant: small-caps;
	line-height: auto;
	margin: 0 1px 5px 1px;
	margin: 0 auto;
	margin-top: 1px;
	margin-bottom: 1px;
	
}

h3 {
	font-size: 1.3em;
	font-family: Optima;
	color: #09A7F6;
	visibility: inherit;
	text-align: center;
	position: relative;
	
}
img {
	margin-left:15px;
	margin-top:50px;

}

.centered {
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	font-family: Optima, Arial, sans-serif;
	font-size: 1.2em;
	color: #555;
	text-align: center;
}

.responsive { 
  max-width: 100%;
  height: auto;

 }

.feature-container-centered {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.feature-container-centered h2 {
    margin-bottom: 2rem;
}

.feature-container-centered .feature-block {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.feature-container-centered .feature-image {
    flex: 1;
    max-width: 500px; /* optional cap */
}

.feature-container-centered .feature-image img {
    width: 100%;
    height: auto;
    border: 3px solid black;
    border-radius: 8px;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .feature-container-centered .feature-block {
        flex-direction: column;
        text-align: center;
    }

    .feature-container-centered .feature-image,
    .feature-container-centered .feature-text {
        max-width: 100%;
        margin: 0 auto 1rem auto;
        text-align: center;
    }
}

/* Apply your signature style everywhere */
.blurb img,
.content img,
.imagecenter img {
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin: 1.5rem auto;
}

/* ---------- Blurbs ---------- */
.blurb {
    height:100%;
    width:90%;
    font-family:optima, Arial, sans-serif;
    font-weight:300;
    font-size:1.1em;
    color:#111;
    margin:0 5% 0 5%;
    text-align:center;
}
.blurb a { font-family:optima, Arial, sans-serif; font-size:1.1em; font-weight:bold; color:#111; }


.blurb a:link {
	font-family: Optima;
	font-weight: light;
	font-size: 1.1em;
	text-decoration: none;
	color: #555;
}
.blurb a:visited {
	font-family: Optima;
	font-weight: light;
	font-size: 1.1em;
	color: #555;
}

/* ---------- Colorboxes ---------- */
.colorbox { background-color:#C9E0FF; margin:2% 7%; padding:1% 6% 1.4% 6%; max-width:95%; font-family:"Lucida Grande", Arial, Helvetica, sans-serif; color:#555; text-align:center; border-radius:10px; box-shadow:0 0 10px rgb(127,127,127); }
/* Base colorbox2 styling */
/* Base colorbox2 styling */
.colorbox2 {
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2.5rem;
  background-color: #C9E0FF;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(127,127,127,0.5);

  display: flex;
  align-items: center;   /* vertical centering */
  gap: 2rem;
}

/* Image (THIS is what fixes the huge issue) */
.colorbox2 img {
  flex: 0 0 45%;
  width: 45%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
}

/* Text */
.colorbox2 .colorbox-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering */
  align-items: center;       /* centers stars/headline */
  text-align: center;
}

/* Stars */
.colorbox2 .stars {
  font-size: 2em; 
display: block;
  color: #fcee5d;
  text-shadow: 2px 2px 2px #555;
  white-space: nowrap;
 margin-bottom: 0.5rem;
}

/* Headline above testimonial */
.colorbox2 .headline {
  font-size: 1.3em;  /* slightly bigger */
  font-weight: bold;
  color: #000;
  text-shadow: 1px 1px 2px #E5E4E2;
 margin-bottom: 0.75rem;
}

.colorbox2 .stars,
.colorbox2 .headline {
  display: block;
}



/* Main testimonial text */
.colorbox2 .testimonial-text {
  font-size: 1em;   /* relative to 16px default, ~16px on desktop */
  line-height: 1.5;
  color: #333;
  min-font-size: 14px; /* enforce minimum */
}

.colorbox2 .testimonial-text {
  padding: 0 !important;
  margin: 0.75rem 0 0 0;
  max-width: 600px;
  text-align: left;
}

/* Couple/date/source line */
.colorbox2 .review-source {
  font-size: 1.2em;  /* slightly bigger than text */
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 0.5rem;
}

/* Left / Right variants */
.colorbox2.colorbox-left { flex-direction: row; }
.colorbox2.colorbox-right { flex-direction: row-reverse; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .colorbox2 {
    flex-direction: column;
    text-align: center;
  }

.colorbox2 img {
  flex: 0 0 380px;
  width: 380px;
  max-width: 380px;   /* THIS is the missing lock */
  height: auto;
  border-radius: 8px;
}

  .colorbox2 .colorbox-text {
    margin-top: 1rem;
  }
}

@media (max-width: 480px) {
  .colorbox2 .stars { font-size: 1.5em; }
  .colorbox2 .headline { font-size: 1.1em; }
  .colorbox2 .review-source { font-size: 1.1em; }
  .colorbox2 .testimonial-text { font-size: 0.95em; }
}