/**************
Sitesell version V1.0 
**************/


*{box-sizing:border-box;} /*While using a wildcard like this will slow things a fraction, the performace hit is not 
enough to need to add the box sizing to every single element that uses borders and padding */

body {	
	margin:0;
	padding:0;
	overflow-x:hidden;
	font-size: 1rem;
	line-height:1.5rem;
	font-family:'Open Sans', arial, san-serif;
	color:#000;
	background: url(image-files/2020-bodybg.jpg)#fff top left repeat-x;
}


.left-col .gallery-s figcaption, 
.left-col .gallery-m figcaption, 
.left-col .gallery-l figcaption {
	margin-top:-10px;
}


.left-col .gallery-s, 
.left-col .gallery-m, 
.left-col .gallery-l {
	border:1px solid #eee;
	text-align:center;
	
    margin:20px -150px;
    padding-bottom:10px;
}


.left-col .gallery-s::after,
.left-col .gallery-m::after,
.left-col .gallery-l::after{
  content: "";
  display: table;
  clear:both;
}

 .left-col .gallery-s figure {
     vertical-align: text-top;
     max-width:150px;
     margin-bottom:10px;
}

.left-col .gallery-s img {
    border-radius:5px;
    margin:10px 5px;
    max-width:140px;
    max-height:140px;
    padding:2px;
    border:1px solid #ddd;
    
}

.left-col .gallery-s figcaption {
	max-width:140px;
	
}

.right-col .adbox {
	float:none;
	margin:50px auto;
}



 /************
 MEDIUM SIZED IMAGE GALLERY
 ************/


.left-col .gallery-m img {
    border-radius:5px;
    max-width:200px;
    max-height:200px;
    padding:2px;
    border:1px solid #ddd;
    
}

 .left-col .gallery-m figure {
     vertical-align: text-top;
     max-width:200px;
     margin-bottom:10px;
 }

 .left-col .gallery-m figcaption {
	max-width:190px;
	
}


 /************
 LARGER SIZED IMAGE GALLERY
 ************/

.left-col .gallery-l {	
   /* margin:20px auto; */
}
.left-col .gallery-l img {
    border-radius:5px;
    margin:10px 5px;
    max-width:280px;
    max-height:280px;
    padding:2px;
    border:1px solid #ddd;
    
}

 .left-col .gallery-l figure { 	
     vertical-align: text-top;
     max-width:280px !important;
     overflow:hidden;
     margin-bottom:10px;
     
 }

 .left-col .gallery-l figcaption {
	max-width:270px;

}





h1, h2, h3, h4, h5 { 
	font-family: georgia, serif;
	color:#333;
	text-align:center;
	line-height:2rem;
}

h1{font-size:32px;}
h2{font-size:28px;}
h3{font-size:24px;}
h4{font-size:20px;}
h5{font-size:18px;}
h6{font-size:18px;}

aside h2{font-size:24px;}
aside h3{font-size:20px;}
aside h4{font-size:16px;}
aside h5{font-size:16px;}


.logo h2 {
	font-size:22px;
	color:#fff;
	text-shadow:1px 1px 1px #000000;
	text-align:center;
	margin:10px 0;
	padding:0;
}
.logo h4 {
	font-size:17px;
	color:#000;
	text-align:center;
	margin-top:35px;
}


figure h4 {
	font-size:16px;
	font-weight:700;
	margin-bottom:0;
	padding-bottom:0;
	color:#333;
}

.footer-box h3 {font-size:20px;}

a:link {color:#009; text-decoration:underline;}
a:visited {color:#808; text-decoration:underline;}
a:hover {color:#000; text-decoration:underline;}
a:active {color:#aa0101;text-decoration:underline;}

.footer-box a:link {color:#fff; text-decoration:none;}
.footer-box a:visited {color:#fff; text-decoration:none;}
.footer-box a:hover {color:#ff9; text-decoration:none;}
.footer-box a:active {color:#ff0;text-decoration:none;}

.logo a:link,
footer-box a:visited,
.footer-box a:hover {
	text-decoration:none !important;
}



a:link img{
	opacity:1;
	transition:opacity .25s ease-in-out;
	-moz-transition:opacity .25s ease-in-out;
	-webkit-transition:opacity .25s ease-in-out;
}

a:hover img{opacity:.6;}


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

.clear {
	width:100%;
	height:0;
	clear:both;
}

code {
	font-size:1.2rem;
}


/****************
CONTACT FORM STYLES
****************/

.contact-form a:link, 
.contact-form a:hover {
color: black;
}

.contact-form{
float:left;
min-width:300px; /*so that form can't shrink down below the width of the form fields */
max-width:340px; /* We don't want form to fill an entire column */
margin:20px; 
overflow-x:hidden; /*just in case form is narrower than form fields */
border:1px solid #eee; /* the border around the form */
padding-left:5px;
padding-bottom:5px;
border-radius:6px; /* rounding off the corners */
background:#fff;

box-shadow: 0 3px 3px #999;}

 .contact-form h2 {color:#333;}

.contact-form form table{
width:96%!important; /*set the width of the table that holds the form */
padding:0 2%;
overflow-x:hidden;}

.contact-form label, .contact-form .formbody{ /* this gives  small white text */
width:90%; margin:10px auto;
font-family:lato,san-serif;
color:black;
font-size:14px;
font-weight:normal;}

/**** 
Below is the colors for the privacy policy link in the form 
****/

.contact-form a,
.contact-form a:visited {color:black;}

img.captcha_img {margin-bottom:10px !important; border-radius:3px;}


/*****************
STYLES FOR IMAGE CONTAINERS AND GALLERIES
*****************/

.left {
	border:1px solid #ccc;
	border-radius:3px;
	padding:5px !important;
	float:left;
	margin:0 10px 0 0;
	max-width:50% !important;
	overflow:hidden;
}



.right {
	border:1px solid #ccc;
	border-radius:3px;
	padding:5px !important;
	float:right;
	margin:0 0 0 10px;
	max-width:300px !important;
	overflow:hidden;
}

 .center {
	display:block !important;
	text-align:center;
	margin:20px -150px;
	overflow:hidden;
}

.center img {
	border-radius:5px;
	border:1px solid #ccc;
	padding:2px;
}

/* The overlap class is added to a figcaption tag, to give it some styling and overlapping of the image */
.overlap {
  width:80%;
  max-width:400px;
  margin:0 auto -50px auto;
  border:1px solid #ccc;
  padding:15px 6px;
  background: rgba(255,255,255, .8);
  position: relative;
  top:-50px;
}

.gallery-s figcaption, 
.gallery-m figcaption, 
.gallery-l figcaption {
	margin-top:-10px;
}


.gallery-s, 
.gallery-m, 
.gallery-l {
	border:1px solid #eee;
	text-align:center;
	
    margin:20px -140px;
    padding-bottom:10px;
}

.gallery::after,
.gallery-s::after,
.gallery-m::after,
.gallery-l::after{
  content: "";
  display: table;
  clear:both;
}

/**********************
styles for the full page width gallery
**********************/


.full-width {

  width: 100vw;
  text-align:center;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 5px 0;
  background: radial-gradient(ellipse at bottom, #999,  #101010 ) !important;
}

.full-width p.full-width-text {
	max-width:800px;
	padding:5px;
	margin:5px auto;
	color:white;
	text-align:left;
}

.full-width > .adbox {
	vertical-align: top;
	display:inline-block;
	background:white;
	width:255px;
	border: 1px solid #ccc;
	border-radius:5px;
	box-shadow:2px 2px 2px #999;
	float:none;
	font-size:13px;
	text-align:left;
	margin:5px;
	padding:5px;
}

.full-width > .adbox img {
	max-width:245px;
	height: auto;
	margin: 10px auto;
}

.full-width > figure {
	margin:3px;
}

.wide > img {
	vertical-align: top;
	margin: 0 auto;
	max-width:100% !important;
	padding:0;
	background:transparent;
}

.full-width > figure > img{
	vertical-align: top;
	
	max-width:255px;
	padding:3px;
	background:white;
	border:1px solid #666;
}

 

/*****************/
 .gallery-s figure {
     vertical-align: text-top;
     max-width:160px;
     margin-bottom:10px;
}

.gallery-s img {
    border-radius:5px;
    margin:10px 5px;
    max-width:150px;
    max-height:150px;
    padding:2px;
    border:1px solid #ddd;
    
}

.gallery-s figcaption {
	max-width:150px;
	
}



 /************
 MEDIUM SIZED IMAGE GALLERY
 ************/


.gallery-m img {
    border-radius:5px;
    max-width:200px;
    max-height:200px;
    padding:2px;
    border:1px solid #ddd;
    
}

 .gallery-m figure {
     vertical-align: text-top;
     max-width:200px;
     margin-bottom:10px;
 }

 .gallery-m figcaption {
	max-width:200px;
	
}


 /************
 LARGER SIZED IMAGE GALLERY
 ************/

.gallery-l {	
   /* margin:20px auto; */
}
.gallery-l img {
    border-radius:5px;
    margin:10px 5px;
    max-width:320px;
    max-height:300px;
    padding:2px;
    border:1px solid #ddd;
    
}

 .gallery-l figure { 	
     vertical-align: text-top;
     max-width:330px !important;
     overflow:hidden;
     margin-bottom:10px;
     
 }

 .gallery-l figcaption {
	max-width:330px;

}




/* This class enables a big image to stretch the full width of the main container */
 .wider {
 	margin: 0 -3rem;
 	overflow-x:hidden;
 }


/*****************
GENERAL STYLE SETTINGS. Breadcrumbs, lists, responsive videos, etc
*****************/

/*************
BEADCRUMBS
*************/
/* Style the list */
ol.breadcrumb {
  max-width:1100px;
  margin:5px auto;
  padding: 5px 8px 0 8px;
  list-style: none;
  background-color: transparent;
  border-top:none;
  border-bottom:none;
}


/* Display list items side by side */
ol.breadcrumb li {
  display: inline;
  font-size: 12px;
}

/* Add a slash symbol (/) before/behind each list item */
ol.breadcrumb li+li:before {
  padding: 3px;
  color: black;
  content: "›";
}

/* Add a color to all links inside the list */
ol.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Add a color on mouse-over */
ol.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

/*Style unordered lists within the main content*/

main ul {
    list-style-type: none;
    padding-left: 0px;
    margin-left: auto;
    margin-right: auto;
    border-top:1px dotted #666;
	border-bottom:1px dotted #666;
	padding-top:20px;
	padding-bottom:20px;
	color:#123456;
	font-family: georgia, serif;
	font-size:1.1rem;
	font-weight:400;
}

main ul li {
    background: url(image-files/vt-bullet.png) left center no-repeat;
    padding:10px 30px;
    margin-bottom: 20px;
}

/********************
A different background on odd and even list items helps with readability
********************/
main ul li:nth-child(odd) {
	background-color: #eee;
}

main ul li:nth-child(even) {
	background-color: #FFF;
}




/* These classes makes videos (including ones in an iframe) responsive 
.videowrap{position:relative;padding-bottom:56.25%;padding-top:25px;height:0; }
.video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
*/

.video-wrapper {
	text-align:center;
	width: 640px;
	max-width: 100%;
	margin:20px auto;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*****************
Styles for old type search box
*****************/

.vt-search input{
	padding:5px;
	border-radius:4px;
	margin:10px auto;
}

.vt-search input[type=submit] {
	color: white;
	border:none;
	background:#101010;
}
.vt-search input[type=text] {
 width: 170px;
 -webkit-transition: width .35s ease-in-out;
 transition: width .35s ease-in-out;
}
.vt-search input[type=text]:focus {
  width: 240px;
}



/***************************
STYLING FOR GOOGLE CUSTOM SEARCH
***************************/
.search-social {
	position:absolute;
	top:10px; 
	right:0; 
	width:300px;
	text-align:right;
	} 

.gsc-input-box {
	border-radius: 4px;
    border: 1px solid #999!important;
    background:white;
    padding: 0 !important;
    width:250px;
    float:right;
}

.gsc-search-button-v2, 
.gsc-search-button-v2:hover, 
.gsc-search-button-v2:focus {
    border-color: black !important;
    background-color: black !important; 
    padding:10px !important;
}





/************
THIS IS THE SOCIALIZE IT STYLES
************/

.socializeIt {
	margin:15px 0;
	border:transparent !important;
	color:white;
	float:left;
}

.socializeIt a:link,
.socializeIt a:visited,
.socializeIt a:hover {
	color:white;
}


.socializeIt td span{
	display:none !important;
}

.socializeIt td i{
	margin:5px 10px 5px 0;
	color: #eee !important;
}

.socializeIt td i:hover{
	color:#ffc !important;
}


/************************
THIS IS THE CALLOUT BOX
************************/
.box {
  font-family: georgia, serif;
  color:black;
  background: #f1f1f1;
  background: radial-gradient( #fff,  #f1f1f1 ) !important;
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid #999;
  padding: 10px; 
  border-radius:5px;
  box-shadow: 3px 3px 3px #333;
  margin:50px auto;
 }

.box::after {
  content: "";
  display: table;
  clear:both;
}


.reminder {
   font-family: georgia, serif;
   color:black;
	float:right;
	width:240px;
	display:inline-block;
	
	margin:0 0 0 10px;
	border: 1px solid #ccc;
	border-radius:5px;
	box-shadow:2px 2px 2px #999;
	padding:5px;
}

.reminder h5 {
	margin: 0 auto;
}

.reminder p {
	margin-top:0;
	margin-bottom:.5rem;
}


.clear {
  clear: both;
}



/*****************
this is for the styled button
*****************/
.btn {
	background: #00f;
	box-shadow:1px 1px 2px #666;
	color:white;
	border:transparent;
	border-radius:3px;
	padding:10px;
	font-size:1rem;
	font-weight:bold;
	text-decoration:none;
	cursor:pointer;
}

.btn::after {
  content: ">>";
} 

.btn:hover{
	background: #009;
	color:yellow;
	text-decoration:none;
}


/********************
STYLES FOR QUOTES OR TESIMONIALS
********************/
.quote {
	font-family: georgia, serif;
	font-size:1.3rem;
	line-height:1.8rem;
	color:#666;
	border-top: 1px dotted #666;
	border-bottom: 1px dotted #666;
	width:90%;
	margin:50px auto;
	padding: 40px 20px;
}

.quote .author {
	display:block;
	font-size:1rem;
	color:#666;
}


.quote::first-letter {
  font-size: 300%;
  color: #ccc;
}

/* Styles for the right floated adbox */
.adbox {
	width:300px;
	border: 1px solid #ccc;
	border-radius:5px;
	box-shadow:2px 2px 2px #999;
	float:right;
	margin:0 0 20px 20px;
	padding:10px;
}

/*Styles for the return to top button */

#btnTop{	
display:none;
position:fixed;
bottom:50px;
right:5px;
z-index:99999;
border:none;
outline:none;
background-color: #000;
opacity:0.25;
color:#fff;
font-size:3rem;
line-height: 3rem;
cursor:pointer;
padding:0 5px;
border-radius:5px;
}

#btnTop:hover{
opacity:.7;
background-color:#333;
}

.ajcontact{
float:left;
min-width:300px;
max-width:340px; 
margin:20px;
overflow-x:hidden;

border:1px solid #eee;
padding-left:5px;
padding-bottom:5px;
border-radius:6px;
background:#036;
background:-webkit-linear-gradient(bottom,#0376B4,#024264);
background:-ms-linear-gradient(bottom,#0376B4,#024264);
background:-moz-linear-gradient(bottom,#0376B4,#024264);
background:-o-linear-gradient(bottom,#0376B4,#024264);
box-shadow:3px 3px 5px #666;}



.ajcontact form table{
width:96%!important;
padding:0 2%;
overflow-x:hidden;}

.ajcontact label, .ajcontact .formbody{
width:90%; margin:10px auto;
font-family:lato,san-serif;
color:#fff;
font-size:14px;
font-weight:normal;}

.ajcontact input[type="submit" i] {
	font-size:18px;
	font-weight:bold;
	color:white;
	border:none;
	background:#333;
	padding:5px 10px;
	border-radius:5px;
	cursor:pointer;
}

.ajcontact input[type="submit" i]:hover {
	color:#ffc;
	background:#101010;
}

.ajcontact input[type="text"] {
	line-height:200%;
	border-radius:3px;
	border:none;
}

.ajcontact textarea {
	border:none;
	border-radius:3px;
}

img.captcha_img {margin-bottom:10px !important; border-radius:3px;}

/*****************
STYLE HTML5 SEMANTIC ELEMENTS. This is done because 
IE 10 and 11 do not place these as block by default
******************/

figure { /* this over rides the browser default of 40px margin so we can use our preferred paddings and margins */
    display:inline-block;
	margin:0;
	padding:0;
}

header, 
footer, 
main, 
section {
	display:block;
	height:auto;
}

section::after {
  content: "";
  display: table;
  clear:both;
}

footer {
	text-align:center;
}

details {
	display:block;
	clear:both;
	width:100%;
}
figcaption {
	font-size:13px;
	font-style:italic;
	text-align: center;
	margin-top:0;
}

aside {
	display:inline-block;
}

mark {
	font-size:130%;
	color:#fff; 
	background:transparent;
	text-shadow:1px 1px #000;
	padding:0; 
	border-radius:3px;
}

/********
Start of main pages structure styles
********/

#main-container {
	max-width:1100px;
	background:#fff;
	margin:20px auto;
	padding:20px 150px;
	border:1px solid #ccc; 	
}

#main-container2 {
	max-width:1100px;
	background:#fff;
	margin:20px auto;
	padding:0 50px;
	border:1px solid #ccc; 	
}

#main-container2 .center,
#main-container2 .gallery-l,
#main-container2 .gallery-m,
#main-container2 .gallery-s {
	margin:50px auto;
}



.logo {
	position:relative;
	background: transparent;
	/*background: url(image-files/2020-bodybg.jpg)#aaa top left repeat-x;*/
	width:100%;
	max-width:1100px;
	padding: 5px 0;
	margin:0 auto;
	height:120px;
}






.right-col {
	display:inline-block;
	width: 330px;
	color: black;
	box-sizing: border-box;
	font-size:.9rem;
	vertical-align:top;
	background:transparent;
	padding:0 10px;	
}


 .left-col {
 	border-right:1px dotted #666;
 	padding-top:0;
 	vertical-align:top;	
	background:transparent;
 	display:inline-block;
 	padding-left:10px;
 	padding-right:30px;
 	width: calc(100% - 340px); 
 }



.footer {
	font-size:13px;
	color:white;
	background: radial-gradient(ellipse at bottom, #999,  #101010 ) !important;
	width:100%;
	padding:25px 5px 10px 5px;
	text-align:center;
	margin-top:0;
	bottom:0;
	overflow-y:hidden;

}


/********************
STYLES FOR THE FOOTER BOXES
********************/

.footer-box {
	vertical-align:top;
	font-size: .9rem;
	width:30%;
	max-width:400px;
	background:transparent;
	border:1px solid #333;
	border-radius:5px;
	margin:0 5px;
	padding:5px 10px;
	display:inline-block;
	text-align:left;
}

.footer-box h3 {
	color:white;
	text-align:left;
}




.desktop-only {
	display:initial;
}
.mobile-only {
	display:none;
}


/*****************************
LAYOUT SETTINGS FOR 4K DEVICES THAT USE SCALING
*****************************/
@media only screen 
   and (min-width : 2735px) 
   and (min-height : 1823px) {

   	#main-container {
	max-width:80% !important;
	background:#fff;
	margin:20px auto !important;
	padding:1rem 3rem;
	border:1px solid #aaa; 	
}

.footer-box {
	vertical-align:top;
	font-size: .9rem;
	width:30%;
	max-width:400px;
	background:transparent;
	border:1px solid #333;
	border-radius:5px;
	margin:0 5px;
	padding:5px 10px;
	display:inline-block;
	text-align:left;
}

.footer-box h3 {
	color:white;
	text-align:left;
}

.footer-box a:link {color:#fff; text-decoration:underline;}
.footer-box a:visited {color:#fff; text-decoration:underline;}
.footer-box a:hover {color:#ffc; text-decoration:underline;}
.footer-box a:active {color:#ff0;text-decoration:underline;}


   
} /* End of the Surface 4K media query */




/*****************************
LAYOUT CHANGES FOR SCREEN WIDTHS OF =< 800PX. That is the width used by many Samsung tablets, 
and the reason we are not using the standard 768px breakpoint.
*****************************/
@media only screen and (max-width: 800px) {

.desktop-only {
	display:none;
}
.mobile-only {
	display:initial;
}

#main-container, #main-container2 {
	padding: 10px; 
}

/**********
Once we get down to this size, the 2 columns look better stacked as block level
**********/	

.left-col, .right-col {
	padding-left:0;
 	padding-right:0;
	width:100%;	
	max-width:100%;
	display:block;
	border-right:none;
}


.logo h2, .logo h4 {
	z-index:10000;	
	text-align:right;
	margin-right:10px;
}

.logo h2 {font-size:16px;margin-top:0;}	
.logo h4 {font-size:13px; margin-top:35px;}




/*************
Remove image floats and put to block level
*************/

/*******************
IMAGE STYLES IN MOBILE VIEW
*******************/


.left,
.right {
	border:1px solid #666;
	border-radius:3px;
	padding:2px;
	max-width:200px;
} 

.center {
	margin:20px 0;
}

.gallery-s, 
.gallery-m, 
.gallery-l,
.box {
	margin:20px 0;
}

.overlap { /*styling for the overlapping figcaption */
  width:100%;
  max-width:400px;
  margin:0 auto;
  border:none;
  padding: 10px 0;
  background: rgba(255,255,255, 1);
  position: initial;
  top:0;
}
    

/********************
STYLES FOR THE FOOTER BOXES IN MOBILE VIEW
********************/

footer .footer-box {
	display:block;
	font-size: .9rem;
	width:96%;
	max-width:96%;
	background:transparent;
	border:transparent;
	border-radius:0;
	margin:10px auto;
	padding:10px 10px;
	display:block;
	text-align:center;
}

footer .footer-box h3 {
	color:white !important;
	text-align:center;
}

.socializeIt {
	float:none;
	margin:15px auto;
}


.adbox {
	width:300px;
	display:inline-block;
	float:none;
	margin:20px;
}

} /* End of the tablet/phone breakpoint media query */



/********************
IF WE NEED TO ADJUST LAYOUTS ON SCREEN SMALLER THAN 560PX WIDE, WE DO THAT HERE
********************/
@media screen and (max-width: 560px) {

.adbox {
	width:300px;
	display:block;
	border: 1px solid #ccc;
	border-radius:5px;
	box-shadow:2px 2px 2px #999;
	float:none;
	margin:20px auto;
	padding:10px;
}

figure.left,
figure.right {
	border:1px solid #666;
	padding:2px;
	max-width:100% !important;
	float:none;
	display:block;
	margin:20px auto;
} 

.box figure.left,
.box figure.right {
	border:1px solid #666;
	padding:2px;
	float:none;
	display:block;
	margin-bottom:5px;
	max-width:100% !important;
}

} /* Closing brace for 560px breakpoint */

/********************
IF WE NEED TO ADJUST LAYOUTS ON SCREEN SMALLER THAN 480PX WIDE, WE DO THAT HERE
********************/
@media screen and (max-width: 480px) {


main ul {   
    margin-left: 5px;
    margin-right: 5px;
   }

.adbox {
	width:90%;
	display:block;
	border: 1px solid #ccc;
	border-radius:5px;
	box-shadow:2px 2px 2px #999;
	float:none;
	margin:20px auto;
	padding:10px;
}

.contact-form{
	min-width:400px;
	max-width:400px;
}

.gallery-l figure {
 	float:left;
     vertical-align: text-top;
     max-width:180px;
     padding:5px;
 }


.overlap {
  width:100%;
  max-width:400px;
  margin:0 auto;
  border:none;
  padding: 10px 0;
  background: rgba(255,255,255, 1);
  position: initial;
  top:0;
}

figure.left,
figure.right {
	border:1px solid #666;
	padding:2px;
	max-width:160px !important;
} 

footer .footer-box {
	display:block;
	font-size: .9rem;
	width:96%;
	max-width:96%;
	background:transparent;
	border:transparent;
	border-radius:0;
	margin:10px auto;
	padding:10px 10px;
	display:block;
	text-align:center;
}

footer .footer-box h3 {
	color:white !important;
	text-align:center;
}

.gallery-l figure  {
     max-width:96% !important;
     padding:5px;
     float:none;
     margin:5px auto;
 }

} /* Closing brace for 480px breakpoint */



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

.contact-form{
	min-width:320px;
	max-width:320px;
}

figure.left,
figure.right {
	float:none;
	display:block;
	border:1px solid #666;
	padding:2px;
	max-width:100% !important;
	margin:10px auto;
}  

}

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

.contact-form{
	min-width:300px;
	max-width:300px;
	margin:20px auto;
}

figure.left,
figure.right {
	float:none;
	display:block;
	border:1px solid #666;
	padding:2px;
	max-width:100% !important;
	margin:10px auto;
} 

}


/***************
TOPNAV AND DROPDOWN STYLES
***************/

/***********************
Styles for down arrow (for both desktop and mobile views)
***********************/

.arrow {
	display:inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #fff;
}


.sticky-nav { /*used if we require our nav to be sticky */
	z-index:10000;
	color:#666;
	background: #101010;
    background-image: linear-gradient(#101010, #333, #101010);
	width:100vw;
	height:55px;
	padding:2px;
	text-align:center;
	position:sticky;
	top:0;
	margin-top:0;
}

.table {
    display: table;   /* Allows the navlink centering to work */
    margin: 0 auto;
}

.topnav {
  font-family: georgia, serif;
  font-size: 1rem;
  overflow: hidden;
  background: #101010;
  background-image: linear-gradient(#101010, #333, #101010);
  max-width:100vw;
  margin:1px 20px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  margin-right:5px;
  border-radius:5px;
  text-align: center;
  padding: 13px 8px 11px 8px;
  text-decoration: none;
}


.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #333;
  ;
  font-weight:bold;
}

.topnav .icon {
  display: none;
}




/*************************
BREAKPOINT IS SET TO 800PX RATHER THAN THE TRADITIONAL 768PX. 
REASON: MANY SAMSUNG TABLETS USE THIS WIDTH SO IT MAKES SENSE TO PROVIDE THEM WITH THE MOBILE VIEW.
YOU CAN OF COURSE CHANGE BACK TO 768PX WITHOUT ANY FEAR THAT IS WILL SOMEHOW BREAK THE TEMPLATE!
*************************/
@media screen and (max-width: 800px) {

.hamburger {
display:inline-block;
background: url(image-files/sv-hamburger.png) transparent center no-repeat;
width:29px;
height:15px;
}

.table {
    display: block;   /* Allow the centering to work */
    margin: 0;
}

.active {
  
  padding-bottom:20px;
}

.topnav a:not(:first-child) {
	display: none;
}
  
.topnav a.icon {
    float: right;
    display: block;
}

.topnav.responsive {
	
	position: relative;	
	margin-left:-2px;
	margin-right:-2px;
}


/**************
This stops the nav being "sticky" on phones and tablets. If we have a lot of links, 
we don't want those to be cut off on small screens.

*************/
.sticky-nav {
	position:initial !important;
	height:55px;

	}



.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}

.topnav.responsive a {
	
    float: none;
    display: block;
    text-align: left;
    border:1px solid #666;
border-radius:3px;
margin:5px 5px;
   
}

} /*closing brace for media query */




/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
  margin-top:1px;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-family: georgia, serif;
  font-size: 1rem; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: transparent; 
  border-radius:5px;
  margin: 0 0 2px 0;
}



.dropdown-content > div {
	width:100%;
	background:#eee;
	padding-top:6px;
	padding-left:10px;
	font-size:1rem;
	text-align:left !important;
	font-weight:bold;
	margin:6px 0;
	border-top:1px solid #999;
	color:#000;

}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
 font-family: georgia, serif;
  font-size: 1rem; 
  border-top:2px solid #101010;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 4px 10px;
  margin:4px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: black;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */


.dropdown:hover .dropdown-content {
  display: block;
}


/* The "responsive" class is added to the topnav with JavaScript 
when the user clicks on the icon. This class makes the topnav look
good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {

	/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


.topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    margin:10px 30px 10px 10px;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {
  	position: relative; 
  	background-color:#c1c1c1; 
  	padding: 2px; 
  	margin-top:2px;}

  	
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    font-weight:bold;
    color:#f0f0f0;

  }

  .dropdown-content a:link {
  	background-color: #aaa;
  	display:block;
  	margin-top:10px !important;
  	margin-bottom:10px !important;
  }

  .dropdown-content a:hover {
  background-color: #101010;
  color: white;
}
}










/*************************
MEDIA QUERIES TO TARGET SPECIFIC BROWSERS
*************************/

/* Target IE10 + */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

/* if we need to use IE specific classes, then this is the area to do that */


figure {
	vertical-align:top;
	display:inline-block !important;
	padding:0 !important;
	overflow:hidden !important;
}



.gallery-s figure,
.gallery-m figure,
.gallery-l figure {
	padding:0;
}

/*Position:sticky; does not work in IE11 or earlier, so we would need to use position:fixed; 
As very few people use these browsers,it is better to let the nav scroll, 
than try to find a way to make position:fixed display correctly*/

.sticky-nav { 
	height:62px;
}


.dropdown .dropbtn {
    
    padding: 9px;
    margin: 3px 0 10px 0;
}

 } /* closing brace for IE media query */



/* Target Firefox */
@-moz-document url-prefix() {
/* if we need to use Firefox (any version) specific classes, then this is the area to do that */
 /*#height {min-height: calc(100vh - 94px); } */
}

/* Target Chrome AND Safari  */
@media screen and (-webkit-min-device-pixel-ratio:0) {
   /* CSS rules */
   .footer {background-color:#ccc;}

/* Safari only override. Uncomment out the style rule below to use it, changing details to suit*/
 /*   ::i-block-chrome, .className {property:value; } */

}







/***********************
STYLING FOR PRINT VIEW
***********************/

div.printer-button {
	text-align:center;
	padding:4px;
	width:120px;
	margin:15px auto;
	border:1px solid #aaa;
	border-radius:5px;
	background:#f3f3f3;
	font-weight:normal;
	font-size:14px;
	color: #333;
	cursor:pointer;
}

div.printer-button:hover {
	color: black;
	border-color: black;
	background:#c3c3c3;
}

p.attribution { display:none; }

@media print {

body {
	font-family: georgia, serif;
	font-size: inherit;
	background: transparent;
}

#main-container, 
#main-container2
 {
	padding:0;
	border:none;
}

.full-width p.full-width-text {color:black;}

.gallery-s,
.gallery-m,
.gallery-l,
.center {
	padding:0 140px;
}

.logo,
.footer,
.sticky-nav,
.nav,
.breadcrumb,
.wrapper,
button,
aside,
.printer-button,
.noprint {
	display:none !important;
}



.left-col{
	border-right:none;
	padding-top:10px;
    float:none;
    width:100%;
}


table,  pre, blockquote {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}



h2, h3, h4 {
    page-break-after: avoid;
  }
  
  ul, img {
    display:block;
   page-break-inside: avoid;
}

p.attribution {
	display:block;
	font-size:13px;
	font-style:italic;
	text-align:center;
}

#btnTop {
	color:transparent;
	background:transparent;
}

.quote {
	color:#000;
}

.author {
	color:#333;
}


.center img {
	margin:0 auto !important;
}

}


/***************************
THIS IS THE MINIFIED LIGHTBOX CSS
***************************/
.lb-loader,.lightbox{text-align:center;line-height:0}body:after{content:url(image-files/close.png) url(image-files/loading.gif) url(image-files/prev.png) url(image-files/next.png);display:none}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;border-radius:3px}.lightbox a img{border:none}.lb-outerContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;border-radius:4px}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-container{padding:4px}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(image-files/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(image-files/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(image-files/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em; text-align:center;}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(image-files/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
/* antic-latin-400-normal*/
@font-face {
  font-family: 'Antic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/antic/files/antic-latin-400-normal.woff2') format('woff2'), url('fonts/antic/files/antic-all-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* eagle-lake-latin-ext-400-normal*/
@font-face {
  font-family: 'Eagle Lake';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/eagle-lake/files/eagle-lake-latin-ext-400-normal.woff2') format('woff2'), url('fonts/eagle-lake/files/eagle-lake-all-400-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* eagle-lake-latin-400-normal*/
@font-face {
  font-family: 'Eagle Lake';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/eagle-lake/files/eagle-lake-latin-400-normal.woff2') format('woff2'), url('fonts/eagle-lake/files/eagle-lake-all-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}