/* General, site-wide CSS code  */

body {
	background-color:		#edf4fc ;
	font-size:				16px ;
	font-family:			sans-serif ;
}

.boldText{
	font-weight:	bold ;
}

.pointer {
	cursor:	pointer ;
}

.italicTxt {
	font-style			: italic ;
}

.centerTxt {
	text-align			: center ;
}

@font-face {
	font-family: 	Rockwell ;
}

/* CSS code for the banner */

/* Top level div for the banner 
	It is set up as a 12-column grid */
	
#bannerContainer {
	display					: grid ;
	row-gap					: 10px ;
	grid-template-columns	: repeat(12, 1fr) ;
	background-color		: #2369b8 ;
}

#Banner50 {
	grid-column				: 1 / span 12 ;
	max-width				: 100% ;
	height					: auto ;
}

#welcomeDiv {
	grid-column		: 11 / span 2 ;
}

#HdrRVICS {
	grid-column		: 1 / span 12 ;
	color:			#fff8d2 ;
	margin:			0px ;
	padding:		30px 0px 10px 30px ;
	line-height: 	1 ;
	font-family:	/*"Lucida Calligraphy", */Rockwell, Helvetica, serif ;
/*	font-size:		2em ;*/
	text-shadow		: 3px 4px 5px #000000 ;
}

@media (max-width: 750px) {
    #HdrRVICS {
        font-size: 2em; /* Smaller font size for smaller viewports */
    }
}

@media (min-width: 750px) {
    #HdrRVICS {
        font-size: 2.5em; /* Smaller font size for smaller viewports */
    }
}

@media (min-width: 1150px) {
    #HdrRVICS {
        font-size: 4em; /* Smaller font size for smaller viewports */
    }
}

@media (max-width: 750px) {
    #welcomeDiv {
		grid-column		: 8 / span 4 ;
    }
}

@media (max-width: 1150px) {
    #welcomeDiv {
		grid-column		: 10 / span 2 ;
    }
}

#tagline {
	color:			#fff8d2 ;
	margin:			0px ;
	padding-left:	250px ;
	line-height: 	1 ;
	font-family:	Rockwell, "Times New Roman", Times, serif ;
	font-size:		2em ;
}

#servingTime {
	color:			#fff8d2 ;
	margin:			0px ;
	padding-left:	250px ;
	line-height: 	1 ;
	font-family:	Rockwell, "Times New Roman", Times, serif ;
	font-size:		1.4em ;
}

/* ****************** CSS for the slideshow ******************* */
.mySlides {
	display		: none;
}

.SS_Image {
	max-width		: 100% ;
}

/*
img {
	vertical-align: middle;
	width: 100%;
	height:100% ;
}
*/
/* Slideshow container */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
  padding-top: 30px ;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/* ***************** End slideshow CSS code ****************** */

.topDiv {
	display			: flex ;
	flex-direction	: row ;
	flex-wrap		: wrap ;
	max-width		: 1200px ;
	margin			: auto ;
	justify-content	: center ;
	padding			: 30px ;
}

.mainLeft {
	flex			: 60% ;
	max-width		: 800px ;
	padding			: 20px ;
}

.mainRight {
	flex				: 20% ;
	max-width			: 300px ;
	padding				: 10px ;
}

.openStatement {
	font-weight		: bold ;
	color			: #2369b8 ;
	text-align		: center ;
	font-size		: 1.5em ;
}

#hostAside {
	background-color	: #d4e4f7 ;
	padding				: 10px 10px 30px 10px ;
	margin-top			: 20px ;
}

.DecText {
	font-size:		initial ;
	font-weight:	initial ;
	color:			initial ;
}

.noDisplay {
	display:	none ;
}

#trademark {
	text-decoration:	super ;
}

.imageCenter {
  display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  width: 		50%;
}

tr:hover {
	background-color: #f5f5f5;
}

td, th {
	border:		thin dotted gray ;
	padding:	5px 10px ;
}

th {
	background-color: 	#2369b8 ;
	color:				white ;
}

.center {
	text-align:		center ;
}

/* Set styles for the various buttons throughout the site */

/* This is a light button for dark backgrounds  */
.linkButton {
	background-color	: #edf4fc ;
	font-family			: inherit ;
	font-weight			: bold ;
	font-size			: 15px ; 
	border-left			: 2px solid white ;
	border-top			: 2px solid white ;
	border-right		: 2px solid black ;
	border-bottom		: 2px solid black ;
	border-radius		: 5px ; 
	cursor				: pointer ; 
	background-image	: none ; 
	color				: #2369B8 ; 
	text-shadow			: none ; 
	text-decoration		: none ; 
	display				: block ; 
	width				: 170px ;
	margin-top			: 10px ;
	margin-left			: auto ;
	margin-right		: auto ;
}

.linkButton:hover {
	background-color	: #2e0f16 ;
	color				: #edf4fc ;
}

/* This is a darker button for light backgrounds */

.contactButton {
	background-color	: #2369b8 ;
	font-family			: inherit ;
	font-weight			: bold ;
	font-size			: 15px ; 
	border-left			: 2px solid white ;
	border-top			: 2px solid white ;
	border-right		: 2px solid black ;
	border-bottom		: 2px solid black ;
	border-radius		: 5px ; 
	cursor				: pointer ; 
	background-image	: none ; 
	color				: #edf4fc ; 
	text-shadow			: none ; 
	text-decoration		: none ; 
	text-align			: center ;
	display				: block ; 
	width				: 170px ;
	margin-top			: 10px ;
	margin-left			: auto ;
	margin-right		: auto ;
}

.contactButton:hover {
	background-color	: #edf4fc ;
	color				: #2369b8 ;
}