/*******************************************************************************************************************************************************************************
	R & I - Common Site Styling - ristyles.css
	Copyright Reflections and Impressions
	Last Update: Wed-Jan09-2019
********************************************************************************************************************************************************************************/

/***
      General Site Styling Information
      --------------------------------

      1) R&I Site Color Scheme:

			Primary Color - Blue Shades
					Light Purple	/ Hex: #40479d	/ RGB: 64-71-157
					Light Blue		/ Hex: #252d92	/	RGB: 37-45-146
					Medium blue		/ Hex: #171e79	/	RGB: 23-30-121
					Dark blue			/	Hex: #0c1364	/	RGB: 12-19-100
					Royal blue		/	Hex: #060b4a	/	RGB: 6-11-74

			Secondary Color - Orange Shades
					Bright Orange	/	Hex: #e38e47	/	RGB: 227-142-71
					Light Orange	/	Hex: #d36e1c	/	RGB: 211-110-28
					Orange				/	Hex: #af550a	/	RGB: 175-85-10
					Dark Orange		/	Hex: #904100	/	RGB: 144-65-0
					Orange-Brown	/	Hex: #6b3000	/	RGB: 107-48-0

			Secondary Color - Yellow Shades
					Bright Yellow	/	Hex: #e3dd47	/	RGB: 227-221-71
					Light yellow	/	Hex: #d3cc1c	/	RGB: 211-204-28
					Medium yellow	/	Hex: #afa80a	/	RGB: 175-168-10
					Dark yellow		/	Hex: #908800	/	RGB: 144-139-0
					Yellow-Brown	/	Hex: #6b6700	/	RGB: 107-103-0

			Complementary Color - Orange-Yellow-Brown Shades
					Bright 				/	Hex: #e3b947	/	RGB: 227-185-71
					Light					/	Hex: #d3a21c	/	RGB: 211-162-28
					Medium				/	Hex: #af830a	/	RGB: 175-131-10
					Dark					/	Hex: #906a00	/	RGB: 144-106-0
					Shadow				/	Hex: #6b4e00	/	RGB: 107-78-0


      2) ristyles.css (this file) - File Cotents:

      General Element Styles
      Text and Font Styles
      Anchor and Link Styles
      Image Styles
      Contact Form Styles
      Navigation Styles
      Multi-column Layout Styles
      Page Footer Styles
      Slideshow Styles
      Impressions Blog Styles
      Single Post Blog Page Layout Styles
      Responsive Layout Styling for Smaller Devices/Screens
      Lightbox Styles


***/

/*********************************************************************/
/*		R & I - General Element Styles													       */
/*********************************************************************/

/* Force a RESET of styling for ALL elements */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;},
body {line-height: 1;}, ol, ul{list-style:none;}, blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before,
q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/* APPLY border-box to ALL elements to account for margin and padding space in all element size calculations throughout the site */
* {
    box-sizing: border-box;
}

/* Define the default font-size for entire page for better responsive scaling of other elements */
html {
      /*font-size: 4.00em;*/
}

/* APPLY to entire site to CLEAR ALL previously set floats */
div.clear{
    clear:both;
}

/* Main Element Layout Styles */
body {



-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
-o-user-select: none;
user-select: none;


		/* Site Background Image size is 3646x2001 px - Images may be rotated on a seasonal basis or temporarily changed for special events such as an eclipse.
		   The default site background color in case the background image fails to load is set to medium gray */
		background: #888 url("../images/backgrounds/autumn2.jpg") no-repeat fixed top left;

		/* Default site foreground color set to black */
		color: #000;

		/* Default site font setup */
		font-family: Helvetica Neue, Helvetica, Arial;
		font-size: 1.00em;
		line-height: 1.00em;
		font-weight: 400; /* 400 is normal, 700 is bold */
		text-decoration: none;
}

/* Set up the box model for the entire page layout */
#responsive {
		/* Set responsive resizing using inital width, max-width, and auto height properties */
    font-size: 1.00rem; /*This sets the default relative units for the entire box model layout - all other units should be in em's */
		width: 98%;
		max-width: 1536px;
		height: auto;
		/* margin */
		margin: auto;
		margin-top: 1.00em;
		margin-bottom: 1.00em;
		/* padding */
		padding: 0;
		/* border and shadow */
		border: 5px double #e3b947; /* Bright complementary yellow double border around entire layout*/
		border-radius: 2.0em;
    box-shadow: 0px 0px 5em #ff0, 0px 0px 3em #fff; 		/* Yellow sunlight glow around the outside of the main content area */
}

/* Set up main content area as a child element of #responsive */
#maincontent {
		/* Inherit the positioning from parent element #responsive */
		position: relative;
		/* Set width and height */
		width: 100%;
		height: 100%;

		/* Set background */
		background: #060b4a;	/* Royal blue */
		/* Set margin */
		margin: 0;
		/* Set padding */
		padding: 1.0em;
		/* Set border and shadow */
		border: 1px solid #fff;
		border-top: none;
      border: 2px solid #908800;
		/* Round off the bottom-left and bottom-right corners to match the parent element #responsive */
	   border-radius: 1.75em 1.75em 1.75em 1.75em;
     /* Leave a transparent gap between header and the rest of the content to allow background image to show through */
     margin-top: 2.5em;

}
#content-border {
  border: 2px solid #e38e47;
  margin: 0;
}

/* Set up styling for common site page header containing banner with rilogo, tagline, address and phone, a linkable message, and the current date */
#header {
    position: relative;
    top: 0;
    left: 0;
    height: 15.5em;
    background: #060b4a;	/* Royal Blue */
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
	  /* Set border radius so top-left and top-right corners are rounded */
    border-radius: 1.75em 1.75em 0 0;
    /* Set z-index to be a positive value so that the navbar menu may be clicked even if the floating logo is over it */
    z-index: 100;
      border-bottom: 1px solid #fff;

}
/* Set up styling for rilogo.png which is 450px by 250px PNG image file */
#rilogo {
	/* Set positioning to be relative to nearest ancestor (the header) so that the logo moves and can resize along with the header */
	position: inherit;
  float: left;
  margin-top: calc(-5.5vw - 1.3 * ((33vw - 450px) / 2048));
	top: 0;
	left: 0;
	/* Resize the logo image with changes to the viewport size */
  width: calc(42vw - 1.0 * ((33vw - 450px) / 2048));
	max-width: 450px; /* rilogo.png is 450x250px */
	height: auto;
  margin-bottom: -100px;
}
/* Set up styling for the navigation bar */
#navigationbar {
	position: relative;
  /*left: 25.0%;*/
  margin-top: -1.3em;
  margin-right: 0em;
	/*border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-shadow: 5px 5px 30px #0f0;*/
	width: 100%;
	height: 4.0em;
	background: #060b4a;

  z-index: -1000000;  /* this is set so that the logo appears in front of the navigation bar which is sent backward */
}

/* Default styling for various elements throughout the site */
a {
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	/* Change to default link color medium gray */
	color: #888;
}
/* Set default image width and height for all images to be 100% - individual image styling may override if necessary */
img {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;
	width: 100%;
	height: 100%;
}

/* Set default site styles for h1, h2, h3, h4, h5, h6 */
h1 {
	font-size: 2.0em;
	color: #252d92; /*#2262AD;*/
	line-height: 1.15em;
	margin: 1.5em 0 ;
}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/* Set default site styles for paragraphs */
p {
	line-height: 1.00em;
  font-size: 1.25em;
}

/* Set default style for R&I tagline displayed at the top of each page in the header/banner */
p.tagline {
	position: relative;
	text-align: center;
	font-size: calc(1.7em + 8 * ((100vw - 342px) / 768));
	font-family: 'Tangerine', cursive;
	color: #e3b947;
	text-shadow: 1px 1px 1px #000, 1px 1px 5px #fff;
	font-style: italic;
	z-index:-99999;
}

/* Set default styling for R&I address and phone number displayed at the top of each page in the header/banner */
p.address {
	position: relative;
	text-align: center;
	font-family: 'Arial';
  font-size: calc(0.9em + 2 * ((100vw - 342px) / 768));
	color: #888;
	text-shadow: 1px 1px 1px #000, 0 0 1px #fff;
	z-index:-99998;
}
/* Set default styling for current date displayed at the top of each page in the header/banner */
p.currentdate {
	position: inherit;
	top:0;
	right: 0;
	bottom: 0;
	margin-top: 0;
	margin-left: 65%;
	text-decoration: none;
	font-family: 'Arial';
	font-size: calc(0.75em + 2 * ((100vw - 342px) / 768));
	color: #fff;
	text-shadow: 0 0 1px #000, 0 0 5px #000;
}
/* Set default styling for R&I greeting headline displayed at the top of each page in the header/banner */
p.headline {
	margin-top: 0;
	margin-left: 40%;
	text-align: center;
	color: #e38e47;
	text-shadow: 0 0 1px #888, 0 0 5px #000;
	font-size: calc(0.8em + 2 * ((100vw - 320px) / 680));
	font-weight: bold;
	font-style: italic;
}
ul {
    font-size: 1.50em;
    font-weight: bold;
}
.temperature {
	position: inherit;
  float: right;
	top:0;
	right: 3%;
	bottom: 0;
	margin-top: 0;
	margin-left: 65%;
	text-decoration: none;
	font-family: 'Arial';
	font-size: calc(0.75em + 2 * ((100vw - 342px) / 768));
	color: #99f;
	text-shadow: 0 0 1px #000, 0 0 5px #000;
}

/*********************************************************************/
/*		R & I - Text and Font Styles													         */
/*********************************************************************/
.text-regular {
		font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
		font-size: calc(1.0em + 2 * ((100vw - 342px) / 784));
		color: #333;
		text-align: justify;
		padding: 1em;
}

.text-indented {
		font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
		font-size: calc(0.75em + 2 * ((100vw - 342px) / 784));
		color: #333;
		text-align: justify;
		padding: 1em;
    margin-left: 3.5em;
    margin-right: 3.5em;
}
.text-bookmark {
		font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
		font-size: calc(0.75em + 2 * ((100vw - 342px) / 784));
		color: #333;
		text-align: justify;
		padding: 3.5em;
    margin-left: 5.5em;
    margin-right: 5.5em;
}

.text-intro {
		font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
		font-size: calc(0.8em + 2 * ((100vw - 342px) / 784));
		color: #777;
		text-align: justify;
		padding: 1em;
}

.text-large-bold {
		font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
		font-size: calc(0.8em + 2 * ((100vw - 342px) / 784));
		font-weight: 700;
		color: #333;
		text-align: center;
		padding: 1em;
}

.text-small-bold {
		font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
		font-size: calc(0.4em + 2 * ((100vw - 342px) / 784));
		font-weight: 700;
		color: #555;
		text-align: justify;
		padding: 0.3em;
}


.text-contact {
		font-family: "Arial Black", Gadget, sans-serif;
		font-size: calc(0.5em + 2 * ((100vw - 320px) / 680));
		color: #333;
		text-align: center;
		margin-left: 1.5em;
		margin-right: 1.5em;
}
.text-centered-bold {
		font-family: "Arial Black", Gadget, sans-serif;
		font-size: calc(0.5em + 2 * ((100vw - 320px) / 680));
		color: #333;
		text-align: center;
		/*margin-left: 25%;
		margin-right: 25%;*/
}

.text-column {
	font-family: "Arial", Gadget, sans-serif;
	font-size: calc(0.75em + 2 * ((100vw - 342px) / 768));
	font-weight: 450;
	text-align: justify;
	color: #555;
	width: 90%;
	margin: 2em;
}

.text-caption {
	font-size: calc(0.5em + 2 * ((100vw - 342px) / 784));
	margin-top: 1em;
	text-align: justify;
	color: #555;
}

.riheading1 {
		/* Large gold heading with shadow */
		margin-top: 1em;
		margin-left: 1em;
		text-align: left;
		font-size: calc(2.3em + 2 * ((100vw - 342px) / 784));
		font-weight: bolder;
		font-family: serif;
		font-variant: small-caps;
		color: #e3b947;
		text-shadow: 1px 1px 1px #000, 2px 2px 2px #000;
}

.riheading2 {
		/* Smaller gold heading with shadow */
		color: #e3b947;
		text-align: center;
		font-family: "Arial Black", Gadget, sans-serif;
		font-size: calc(1.2em + 2 * ((100vw - 342px) / 784));
		text-shadow: 1px 1px 2px #000, 1px 1px 2px #000;
}

.riheading3 {
		/* Dark blue heading */
		color: #171e79;
		text-align: center;
		font-family: "Times New Roman", Times, serif;
		font-size: calc(1.5em + 2 * ((100vw - 342px) / 784));
		text-shadow: 1px 1px 2px #000, 0px 0px 1px #fff;
}

.riheading4 {
	/* Gold all CAPS heading */
		padding: 0;
		text-align: center;
		font-family: Arial Black;
		font-size: calc(1.0em + 2 * ((100vw - 342px) / 784));
		font-weight: bolder;
		font-variant: small-caps;
		color: #d3a21c;
		text-shadow: 1px 1px 1px #000;
}

.riheading5 {
  	/* Small gold and bold heading */
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: calc(0.8em + 2 * ((100vw - 342px) / 784));
    font-weight: 700;
    color: #d3a21c;
    padding: 1em;
    text-shadow: 1px 1px 2px #000, 0px 0px 1px #fff;
}

.riheading6 {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: calc(0.8em + 2 * ((100vw - 342px) / 784));
    font-weight: 700;
    color: #d36e1c;
    padding: 1em;
    text-shadow: 1px 1px 2px #000, 0px 0px 1px #fff;
}

.riheading7 {
    /* Medium text ALL-CAPS orange-red bold */
		font-family: "Times New Roman", Times, serif;
		font-size: calc(1.0em + 2 * ((100vw - 342px) / 784));
		text-align: center;
		text-transform: uppercase;
    margin-top: 1em;
		color: #e38e47;
		text-shadow: 1px 1px 1px #000;
    margin-bottom: 1em;
}
.riheading8 {
		/* Dark blue heading */
		color: #0a0;
		text-align: center;
		font-family: "Times New Roman", Times, serif;
		font-size: calc(1.5em + 2 * ((100vw - 342px) / 784));
		text-shadow: 1px 1px 1px #000, 0px 0px 1px #fff;
}

.blog-intro {
    font-size: calc(1.0em + 2 * ((100vw - 342px) / 768));
	  margin-top: 1em;
    text-align: justify;
    margin-left: 2em;
    margin-right: 2em;
    color: #555;
}

.blogdate {
    position: relative;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: calc(1.0em + 2 * ((100vw - 342px) / 768));
    text-align: center;
    color: #5f5;
}

/*********************************************************************/
/*		R & I - Anchor and Link Styles													       */
/*********************************************************************/

.list-decorated {
		list-style: none;
		color: #000;
}

.list-decorated li {
		color: #40479d;
		font-size: calc(0.5em + 2 * ((100vw - 342px) / 784));
		text-shadow: 0 0 1px #000;
}

.list-decorated li::before {
		content: "•"; color: #252d92;
	  display: inline-block; width: 1.5em;
		font-size: calc(0.5em + 2 * ((100vw - 342px) / 784));
	  margin-left: 1.0em;
}

.downloadlink {
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: calc(0.9em + 2 * ((100vw - 342px) / 784));
	text-shadow: 0px 0px 1px #000;
	text-decoration: underline;
}

.downloadlink a: {color: #e38e47;}
.downloadlink a:link {color: #e38e47;}
.downloadlink a:visited {color: #d36e1c;}
.downloadlink a:focus {color: #af550a;}
.downloadlink a:hover {color: #e38e47; text-shadow: 1px 1px 3px #e3dd47;}
.downloadlink a:active {color: #904100;}

.readmore {
    position: relative;
    text-align: center;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: calc(1.0em + 2 * ((100vw - 320px) / 680));
    color: #0c1364;
    text-decoration: underline;
}
.bookmark {
    position: relative;
    text-align: center;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: calc(1.0em + 2 * ((100vw - 320px) / 680));
    color: #0c1364;
    padding-bottom: 1.0em;
}
.bookmarktext {
    position: relative;
    text-align: center;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: calc(0.7em + 2 * ((100vw - 320px) / 680));
    color: #999;
    margin: 1.0em;
    padding: 0.25em;
}
.readmore a: {color: #0604ba;}
.readmore a:link {color: #0604ba;}
.readmore a:visited {color: #0604ba;}
.readmore a:focus {color: #af550a;}
.readmore a:hover {color: #40479d; text-shadow: 0px 0px 5px #af830a;}
.readmore a:active {color: #ccf;}

.expressionslink {
  /*position: relative;*/
  text-align: center;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: calc(1.0em + 2 * ((100vw - 320px) / 680));
  color: #0c1364;
  text-decoration: underline;
}
.expressionslink a: {color: #0604ba;}
.expressionslink a:link {color: #0604ba;}
.expressionslink a:visited {color: #0604ba;}
.expressionslink a:focus {color: #af550a;}
.expressionslink a:hover {color: #40479d; text-shadow: 0px 0px 5px #af830a;}
.expressionslink a:active {color: #ccf;}

/*********************************************************************/
/*		R & I - Image Styles				        									         */
/*********************************************************************/

/* sunlight-sheen places a yelow background behind the image, which also serves as a slight border, if the slide container has a margin around it.*/
/* As the image opacity of the slide changes while it fades, the yellow background shows through, giving the impression of a sheen of light falling on the image, */
/* and then fading away  */
.sunlight-sheen {
  /*background-color: #e3dd47;
  margin-left: 2.0em;
  margin-right: 2.0em;
  padding: 1em;
  border: 1px solid #6b4e00;
  margin-top: 0.5em;
  margin-bottom: 0.5em;*/
}

.bordered-feature-image {
    position: inherit;
    display: block;
    max-width: 342px;
    width: 100%;
    /*width: calc(100% - 20 * ((100vw - 342px) / 784));*/
    height: auto;
    background: #1f1a4f;
    box-shadow:
        0 0 0 2px #e3b947,
        0 0 0 3px #555,
        0 0 0 4px #171e79,
        3px 3px 5px #000;
		text-decoration: none;
}

.camera-icon {
	position: static;
	/*float: left;*/
	width: 52px;
	height: 48px;
	/*padding: 5px;*/
	border: 1px solid #888;
	box-shadow: 1px 1px 3px #000;
	/*text-align: center;*/
  margin-left: 45%;
  margin-bottom: 5%;
  padding: 0.5em;
}

.scaledimg-left {
	position: relative;
	height: 20%;
	width: 20%;
	float: left;
	padding: 1em;
  margin-left: 1em;
	margin-right: 1em;
	border: 1px solid #40479d;

	font-size: calc(0.7em + 2 * ((100vw - 342px) / 784));
  font-weight: bold;
  text-align: justify;
}

.scaledimg-right {
	position: relative;
	height: 42%;
	width: 42%;
	float: right;
	padding: 1em;
	margin-left: 1em;
	margin-right: 1em;
	border: 1px solid #40479d;

	font-size: calc(0.7em + 2 * ((100vw - 342px) / 784));
  font-weight: bold;
  text-align: justify;
}
.largeimg-left {
	position: relative;
  width: 50%;
  max-width: 50%;
	height: auto;
	float: left;
	padding: 2.0em;
  margin-left: 25%;
	margin-right: 25%;
	border: 1px solid #40479d;
box-shadow: 0px 0px 5em #ff0, 0px 0px 3em #fff;
  font-size: 1.10em;
  font-weight: bold;
  text-align: justify;
}

.expressions-image {
  position: inherit;
  display: block;
	max-width: 324px;
	width: 75%; /*calc(324px - 1.0 * ((100vw - 342px) / 784));*/
	height: auto;
	border: 1px solid #d3a21c;
	box-shadow: 5px 5px 5px #888888;
	margin-left: 12.5%;/*margin-left: calc(81px + 1.0 * ((100vw - 342px) / 784));*/
	padding: 0.5em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.bookmark-image-vertical {
  position: inherit;
  float: left;
  display: block;
	max-width:113px;
	width:22.5%; /*calc(324px - 1.0 * ((100vw - 342px) / 784));*/
	height: auto;
	border: 1px solid #d3a21c;
	box-shadow: 5px 5px 5px #888888;
	margin-left: 5.0vw;/*margin-left: calc(81px + 1.0 * ((100vw - 342px) / 784));*/
	padding: 0.5em;
	margin-top: 1.0em;
  margin-right: 1.0em;
	margin-bottom: 1.0em;
}
.bookmark-image-horizontal {
  position: inherit;
  float: left;
  display: block;
	max-width: 1275px;
	width: 50%; /*calc(324px - 1.0 * ((100vw - 342px) / 784));*/
	height: auto;
	border: 1px solid #d3a21c;
	box-shadow: 5px 5px 5px #888888;
	margin-left: calc(8.0vw + 1.0 * ((100vw - 342px) / 784));
  margin-top: 0;
	padding: 0.5em;
	/*margin-top: 1em;*/
	margin-bottom: 1em;
}

.bordered-regular-image {
  position: relative;
  margin-left: 1em;
  max-width: 95%;
  width: 95%;
  height: auto;
  background: #e3b947;
  margin-top: 1em;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 3px #171e79;
  text-align: right;
  border: 2px solid #e38e47;
}

.thumbnail {
  position: relative;
  float: left;
  max-width: 70px;
  max-height: 70px;
  width: 70px;
  height: auto;
  margin-left: 3em;
	border: 3px solid #e3b947;
  box-shadow: 1px 1px 2px #000;
}
.lightboxthumb {
  position: relative;
  float: left;




    max-width: 50%;
    width: calc(33vw - 3.5 * ((33vw - 450px) / 768));
    height: auto;

  /*max-width: 171px;
  width: 100%;
  height: auto;*/

  margin-left: 1.0em;
	border: 3px solid #e3b947;
  box-shadow: 1px 1px 2px #000;
}

.largeimg {
  width: 100%;
  height: 100%;
  padding: 1em;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: 0;
	margin-right: 0;
	border: 3px solid #e3b947;
  box-shadow: 1px 1px 2px #000;
}

.smallimg {
  position: relative;
  float: left;
  width: 25%;
  height: 25%;
  padding: 1%;
	margin: 1%;
	border: 3px solid #e3b947;
  box-shadow: 1px 1px 2px #000;
}

.vertical-image-pan {
    width: 15%;
    max-width: 228px;
    height: auto;
    border: 2px solid #af830a;
}
.horizontal-image-pan {
    width: 15%;
    max-width: 342px;
    height: auto;
    border: 2px solid #af830a;
}

.image-group-vertical {
  text-align: center;
  margin-bottom: 1.00em;
}
.image-group-horizontal {
  text-align: center;
  margin-bottom: 1.00em;
}
.image-group-weather {
  text-align: center;
  margin-bottom: 1.00em;
}
.horizontal-weather-image {
    width: 99%;
    padding:3.0em;
    max-width: 855px;  /* increments of 342 ... 342, 684, 1026 */
    height: auto;
    border: 1px solid #af830a;
}
.weather_table {
    margin: 2.5em;
    padding: 3.0em;
    /*border: 5px double #e3b947;*/

}
figure, figcaption {
display: block;
font-style: italic;
font-variant: small-caps;
}
#thumbwrap {
	position:relative;
	margin: 5% auto;
	width:50%; height:50%;
}

.thumb img {
	border:1px solid #000;
	margin:3px;
	float:left;
}

.thumb span {
	position:absolute;
	visibility:hidden;
}

.thumb:hover, .thumb:hover span {
	visibility:visible;
	top:25%; left:-25%;
	margin-top: 50%;
	width: 100%;
	height: 100%;
	z-index:0;
}

.thumbzoom {
    padding: 10px;
    transition: transform .5s; /* Animation */
    width: 125%;
    height: 125%;
    margin: 0 auto;
}

.thumbzoom:hover {
    transform: scale(2.0); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.thumbnail-group {
	/*border: 1px solid #684e00;*/
	margin: 2em;
	position: inherit;
	float: left;
	width: 97%;
}
.fourseasons {
    position: relative;
    margin-left: 5.0em;
    margin-top: 5.0em;
    max-width: 450px;
    width: 100%;
    height: auto;
    border: 1px solid #000;
}

/*********************************************************************/
/*		R & I - Contact Form Styles				        								     */
/*********************************************************************/

#contactform {
	width: 95%;
	max-width: 95vw;
	margin-left: 1.5em;
  margin-right: 1.5em;
	font-family: "Times New Roman", Times, serif;
	font-size: calc(1.0em + 2 * ((100vw - 320px) / 680));
}

#inputbox {
  float: left;
  max-width: 342px;
  width: 50vw;
  height: auto;
  bgcolor: #00f;
  margin-top: 6px;
}



/*********************************************************************/
/*		R & I - Navigation Menu Styles				        								 */
/*********************************************************************/
/* Navigation menu bar styling */
/* Add a black background color to the top navigation */
.topnav {

    overflow: hidden;
		float: right;
		margin-right: 1em;
		margin-top: 1em;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    /*width: 100%;*/
		margin-top: -1.0em;
		font-size: calc(0.6em + 2 * ((100vw - 320px) / 680));
    color: #e3dd47;
    text-align: center;
    padding: 1.0em 1.0em;
    text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {
    /*background-color: #ddd;*/
    color: #e3b947;
		/* Add a highlight on hover */
		text-shadow: 0px 0px 15px #ff0, 0px 0px 20px #fff;
		/*box-shadow: 0px 0px 300px #ff0, 0px 0px 200px #fff;*/
}

/* Add an active class to highlight the current page */
.active {
    /*background-color: #4CAF50;*/
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/*********************************************************************/
/*		R & I - Multi-column Layout Styles                             */
/*********************************************************************/

/* Single column layout */

.single-column {
	clear: both;
	padding: 0px;
	margin: 0px;
	margin-top: 2em;
	background: #fff;
	border-top: 3px double #af830a;
}
.single-column-noborder {
  clear: both;
	padding: 0px;
	margin: 0px;
	margin-top: 2.0em;
  margin-left: 5.0em;
  margin-right: 5.0em;
  text-align: center;
  padding-bottom: 5.0em;
  margin-bottom: 5.0em;
	background: #fff;
}

/* MULTI-COLUMN LAYOUT STYLES */
/*	Following is the same for ALL multi-column layouts, regardless of the number of columns (.section, .col, .col:first-child and 4 lines of code for .group) */

	.col {
		display: block;
		float:left;
		margin: 1% 0 1% 1%;
	}

	.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 */ }

/* 2-column, 3-column, and 4-colum layout structures - Styling for the Individual grid sections and components */

	/*  (2 columns in all, such as the Intro and Slideshow section on index.shtml) */

	.intro-slideshow {
		clear: both;
		padding: 0px;
		margin: 0px;
		background: #fff;
		border: 1px solid #af830a;
    /*border-top: 5px double #af830a;*/
		/*border-top: 3px double #af830a;*/
	}
  .two-column {
    clear: both;
    padding: 0px;
    margin: 0px;
    /*margin-top: 5%;*/
    background: #fff;

    border: 1px solid #af830a;
    /*border-top: 3px double #af830a;*/
  }

/* Individual grid components (2 in all) */

	.span_2_of_2 {
		width: 100%;
	}
	.span_1_of_2 {
		width: 49.5%;
	}

/* Styling for the Individual grid sections and components (3 columns in all, such as the Library, Newsletter, and Blog section on index.shtml) */
	/* 3-column Library, Newletter, and Blog */

	.library-news-blog { /* this was renamed to whitespace but still being  used elsewhere
		clear: both;
		padding: 0px;
		margin: 0px;
		/*margin-top: 5%;*/
		background-color: #f8f8ff;
    border: 1px solid #af830a;
		/*border-top: 5px double #af830a;*/

	}
  .whitespace {
		clear: both;
		padding: 0px;
		margin: 0px;
		/*margin-top: 5%;*/
		background-color: #f8f8ff;
    		border: 1px solid #af830a;
		/*border-top: 5px double #af830a;*/

	}
	.span_3_of_3 { width: 100%; }
	.span_2_of_3 { width: 66%; }
	.span_1_of_3 { width: 32%; }

/* Styling for the Individual grid sections and components (3 columns in all, such as the Library, Newsletter, and Blog section on index.shtml) */
	/* 3-column Library, Newletter, and Blog */

	.photo-row-3, .photo-row-4 {
		clear: both;
		padding: 0px;
		margin: 0px;
		/*margin-top: 5%;*/
		background-color: #fff;
		/*border-top: 3px double #af830a;*/
	}
	.photo-row-4 {
		position: relative;
		float: right;
	}

/* Styling for the Individual grid sections and components (4 columns in all, such as the Gallery section on index.shtml) */
	/* 4-column Image Gallery layout */
	.gallery {
		clear: both;
		background-color: #fff;
		padding: 0px;
		margin: 0px;
		border-top: 5px double #af830a;
	}

	.span_4_of_4 { width: 100%; }
	.span_3_of_4 { width: 74.5%; }
	.span_2_of_4 { width: 49%; }
	.span_1_of_4 { width: 23.7%; }


/*********************************************************************/
/*		R & I - Page Footer Styles                                     */
/*********************************************************************/

/* The footer is arranged in two columns, one for the footer's navigation links (on the left), and the other for the contact information (on the right) */

/* Main Footer Wrapper Class encompasing the entire footer */
.footer-wrapper {
		background: #060b4a;
		padding: 0 0 1.5em 0;
		color: #fff;
}

.section-footer {
		clear: both;
		padding: 0px;
		margin: 0px;
		border-top: 5px double #af830a;
}

.footer-col {
		display: block;
		background-color: #060b4a;
		float:left;
		margin: 0.5em 0 0.5em 0.5em;
		color:#aaa;
}

.footer-col:first-child { margin-left: 0; }

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

/* Individual column structures for each of the 2 footer columns */
.footer-span_2_of_2 {
		width: 100%;
}
.footer-span_1_of_2 {
		width: 49%;
		text-align: center;
}

/* General Footer Styles */
.footeraddress {
		color: #aaa;
		font-size: calc(0.65em + 2 * ((100vw - 342px) / 784));
}
.footer-section-title {
		color:#e3dd47;
		font-size: calc(1.0em + 2 * ((100vw - 320px) / 680));
}
.copyright {
		font-size: calc(0.4em + 2 * ((100vw - 320px) / 680));
		color: #888;
		text-align: center;
}

/* REMOVE - TueOct3018 */

.footerlink {
		padding: 1.5em;
		/*margin: 3em;*/
}

.footerlink a: {color: #999;}
.footerlink a:link {color: #999;}
.footerlink a:visited {color: #999;}
.footerlink a:focus {color: #bbb;}
.footerlink a:hover {color: #ddd;}
.footerlink a:active {color: #fff;}

#footernav {
		font-size: calc(0.50em + 2 * ((100vw - 320px) / 680));
}

#footernav a {
		padding: 1.0em;
}

/*********************************************************************/
/*		R & I - Slideshow Styles	       			        								 */
/*********************************************************************/

/* Container for the rotating images is referred to as the 'slider' */
.slider {

		max-width: 684px;
    max-height: 456px;
    min-width: 256px;
    min-height: 171px;
		/*max-height: 684px;*/
    width: calc(42vw - 1.0 * ((33vw - 684px) / 2048));
		height: calc(0.67*(42vw - 1.0 * ((33vw - 684px) / 2048)));

		margin: 2.0em auto 2.0em auto;
		position: relative;
		/* The following box-shadow is the multi-colored'photo frame' around the images */
		box-shadow:
				0 0 0 2px #000,
				0 0 0 3px #999,
				0 0 0 7px #d36e1c,
				0 0 0 8px #666,
				0 0 0 12px #d3a21c,
				0 0 0 13px #000,
				15px 15px 25px #333;
}

.slide1,.slide2,.slide3,.slide4,.slide5 {
		position: absolute;
		width: 100%;
		height: 100%;
}

.slide1 {
		background: url(../images/frontslides/slide1.jpg)no-repeat center;
		background-size: cover;
		animation:fade 25s infinite;
		-webkit-animation:fade 25s infinite;
}

.slide2 {
		background: url(../images/frontslides/slide2.jpg)no-repeat center;
		background-size: cover;
		animation:fade2 25s infinite;
		-webkit-animation:fade2 25s infinite;
}

.slide3 {
		background: url(../images/frontslides/slide3.jpg)no-repeat center;
		background-size: cover;
		animation:fade3 25s infinite;
		-webkit-animation:fade3 25s infinite;
}

.slide4 {
		background: url(../images/frontslides/slide4.jpg)no-repeat center;
		background-size: cover;
		animation:fade4 25s infinite;
		-webkit-animation:fade4 25s infinite;
}

.slide5 {
		background: url(../images/frontslides/slide5.jpg)no-repeat center;
		background-size: cover;
		animation:fade5 25s infinite;
		-webkit-animation:fade5 25s infinite;
}

@keyframes fade
{
		0%   {opacity:1}
		20% { opacity: 0}
		40% { opacity: 0}
		60% { opacity: 0}
		80% { opacity: 0}
		100% { opacity: 1}
}
@keyframes fade2
{
		0%   {opacity:0}
		20% { opacity: 1}
		40% { opacity: 0}
		60% { opacity: 0}
		80% { opacity: 0}
		100% { opacity: 0}
}
@keyframes fade3
{
		0%   {opacity:0}
		20% { opacity: 0}
		40% { opacity: 1}
		60% { opacity: 0}
		80% { opacity: 0}
		100% { opacity: 0}
}

@keyframes fade4
{
		0%   {opacity:0}
		20% { opacity: 0}
		40% { opacity: 0}
		60% { opacity: 1}
		80% { opacity: 0}
		100% { opacity: 0}
}
@keyframes fade5
{
		0%   {opacity:0}
		20% { opacity: 0}
		40% { opacity: 0}
		60% { opacity: 0}
		80% { opacity: 1}
		100% { opacity: 0}
}


/*********************************************************************/
/*		R & I - Impressions Blog Styles				        								 */
/*********************************************************************/

.blog-wrapper {
		width: 100%;
		margin: 0 auto;
}

#blog-main-content, #blog-sidebar-left, #blog-sidebar-right {
	width: 100%;
	float: left;
}
.index-post {
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background: #eef;
  border: 1px solid #000;
  text-align: left;
  box-shadow: 1px 1px 2px #000;
}
.riblog-title {
	color: #0c1364;
  text-align: center;
	font-size: calc(0.75em + 2 * ((100vw - 320px) / 680));
  /*margin-left: 25%;*/
}

.riblog-location {
	font-size: calc(0.9em + 2 * ((100vw - 320px) / 680));
	color: #6b3000;
  text-align: center;
}

.riblog-date {
	color: #40479d;
	font-size: calc(0.8em + 2 * ((100vw - 320px) / 680));
  text-align: center;
}

.riblog-links {
  text-decoration: none;
  color: #f00;
  font-size: 3.9em;
}

.riblog-img-caption {
	margin-top: 1%;
	color: #684e00;
	font-size: calc(0.5em + 2 * ((100vw - 320px) / 680));
	font-weight: bold;
  text-align: justify;
}

.blog-archive-year {
    text-align: center;
		font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px;
		font-size: calc(0.75em + 2 * ((100vw - 320px) / 680));
		color: #252d92;
		text-decoration: underline;
}
.blog-archive-month {
		font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px;
		font-size: calc(0.75em + 2 * ((100vw - 320px) / 680));
		color: #f00;
}

.archive-post-title {
	font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px;
	font-size: calc(0.50em + 2 * ((100vw - 320px) / 680));
  text-align: center;
	color: #888;
}

#post-nav{
	color: #f00;
}
/* POST nav buttons to previous and next posts */
a.postNavButton {
    border: 2px solid #6b3000;
    background-color: #060b4a;
    color: #fff;
    text-decoration: none;
    margin : 20px;
    padding: 10px 20px 10px 20px;
    display: inline-block;
}

a.postNavButton:hover {
		color: #fff;
    border: 2px solid #904100;
    background-color: #171e79;
}

.post-main-image {
	position: relative;
	float: right;
  max-width: 684px;
	width: 100%;
	height: auto;
	padding: 1%;
	margin: 1%;
	border: 3px solid #e3b947;
	box-shadow: 1px 1px 2px #000;

}

.ri_web_watermark {

  position: absolute;
  display: block;
  max-width: 684px;
	width: 75%;
	height: auto;
	padding: 1%;
  top: 21%;
  left: 11%;

  /*opacity: 0.09;*/

}

/*********************************************************************/
/*		R & I - Sinlge Page Ripost Layout Styles                       */
/*********************************************************************/

	.content .post-wrapper {
		width: 70%;
		float: left;
		min-height: 250px;
	}
	.full-post-div {
    background: #efefff;
		min-height: 300px;
		padding: 20px;
		border: 1px solid #e4e1e1;
		border-radius: 2px;
	}
	.full-post-div h2.post-title {
		margin: 1.0em auto 1.0em;
		font-size: calc(1.3em + 2 * ((100vw - 320px) / 680));
		text-shadow: 0px 0px 1px #000, 1px 1px 3px #000;
		text-align: center;
		color: #e3b947;
	}
	.post-body-div {
		font-family: 'Noto Serif', serif;

		text-align: justify;

    font-size: calc(1.2em + 2 * ((100vw - 342px) / 768));
    margin: 1.0em 0.0em 2.5em 0.0em;

	}
  .post-body-div-summary {
    font-family: 'Noto Serif', serif;

    text-align: justify;

    font-size: calc(0.3em + 2 * ((100vw - 342px) / 768));
    margin: 1.0em 0.0em 2.5em 0.0em;

  }
  .post-main-image {
    margin-top: 1.75em;
    margin-right: 0.25em;

    /*border: 5px solid #0f0;*/
  }
	.post-body-div p {
		/*margin: 1.0em 0.0em 1.5em 0.0em; */
	}
	.post-sidebar {
		width: 24%;
		float: left;
		margin-left: 5px;
		min-height: 400px;
	}
	.content .post-comments {
		margin-top: 25px;
		border-radius: 2px;
		border-top: 1px solid #e4e1e1;
		padding: 10px;
	}
	.post-sidebar .card {
		width: 95%;
		margin: 10px auto;
		border: 1px solid #e4e1e1;
		border-radius: 10px 10px 0px 0px;
	}
	.post-sidebar .card .card-header {
		padding: 10px;
		text-align: center;
		border-radius: 3px 3px 0px 0px;
		background: #3E606F;
	}
	.post-sidebar .card .card-header h2 {
		color: white;
	}
	.post-sidebar .card .card-content a {
		display: block;
		box-sizing: border-box;
		padding: 8px 10px;
		border-bottom: 1px solid #e4e1e1;
		color: #444;
	}
	.post-sidebar .card .card-content a:hover {
		padding-left: 20px;
		background: #F9F9F9;
		transition: 0.1s;
	}



/* LIGHTBOX cut from here on SatJan2619 */


/*********************************************************************/
/*		R & I - Lightbox Styles                                        */
/*********************************************************************/
/************* MODAL Lightbox Styles for clicking on post images to zoom - This is the new code effective January-2019 ***********/

.row > .column {
  padding: 0 8px;
}

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

/* Create seven equal columns that floats next to eachother on the modal for thumbnails */
.column {
  float: left;
  width: 14%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #060b4a; /* Backgound color behind the zommed images */
  opacity: 1.00;
    /*border: 20px solid #e3dd47;
    box-shadow:0px 0px 5px 3px #e3dd47;*/
}

/* Modal Content */
.modal-content {
  position: relative;
  /*background-color: #00fe00;*/
  margin: auto;
  padding: 0;
  width: calc(33vw - 3.5 * ((33vw - 450px) / 768));
/*  height: calc(33vh - 3.5 * ((33vw - 450px) / 768)); */
  /*width: 50%;*/
  max-width: min(33vw, 456px);
  max-height: min(33vh, 456px);


  /*max-height: 684px;*/
  height: auto;
/*  border: 20px solid #6bfe00;
  box-shadow:0px 0px 5px 3px #e3dd47;*/
}
.x-button {
  position: inherit;
  top: 10%;
  right: 10%;
cursor: pointer;
color: white;
border: 1px solid #AEAEAE;
border-radius: 30px;
background: #605F61;
font-size: 31px;
font-weight: bold;
display: block;
line-height: 0px;
padding: 11px 3px;
}
.x-button:before{
 content: "×";
}
/* The Close Button */
.close {
  position: absolute;
  top: 5%;
  right: 5%;
  cursor: pointer;
  color: white;
  border: 1px solid #AEAEAE;
  border-radius: 30px;
  background: #605F61;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
}
.close:before{
 content: "×";
}


.close:hover,
.close:focus {
  color: #9f9;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;

}
.disp_large_img {
  width: 50%;
  height: 50%;
  border 5px double #0f0;
  background: #f00;
  opacity: 1.0;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: #060b4a;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  font-size: calc(1.0em + 2 * ((100vw - 342px) / 784));
  padding: 2px 16px;
  color: white;
  z-index: -1;
/*  border: 2px solid #6b4e00;
  box-shadow:0px 0px 3px 2px #e3dd47;*/
}

img.demo {
  margin-top: 2.0em;
  padding: 1.5em;
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(255, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 255, 0, 0.19);
}

/* END - R&I css Main Code */

/*********************************************************************/
/*		R & I - Responsive Layout Styling for Smaller Devices/Screens  */
/*********************************************************************/
/* Following code collapses the multi-column layout on viewports less than 768px, so that the content of each column ends up being stacked vertically on the page, instead */



  @media only screen and (max-width: 1200px) {
    #rilogo{
        margin-top: calc(-14.3vw - 1.0 * ((33vw - 450px) / 2048));
    }
  }
  @media only screen and (max-width: 1024px) {
    html {
        font-size: 0.75em;
    }
    #rilogo{
        margin-top: calc(-14.3vw - 1.0 * ((33vw - 450px) / 2048));
    }



    .modal-content {

      width: calc(75vw - 3.5 * ((33vw - 450px) / 768));
    /*  height: calc(33vh - 3.5 * ((33vw - 450px) / 768)); */
      /*width: 50%;*/
      max-width: min(75vw, 456px);
      max-height: min(75vh, 456px);


      /*max-height: 684px;*/
      height: auto;
    /*  border: 20px solid #6bfe00;
      box-shadow:0px 0px 5px 3px #e3dd47;*/

/*
      width: calc(42vw - 3.5 * ((33vw - 450px) / 768));
      height: calc(42vh - 3.5 * ((33vw - 450px) / 768));

      max-width: min(42vw, 342px);
      max-height: min(42vh, 342px);*/

    }


  }

  @media only screen and (max-width: 768px) {
      html {
          font-size: 0.20em;
      }
      .col {  margin: 1% 0 1% 0; }
      .span_2_of_2, .span_1_of_2 { width: 100%; }
      .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
      .span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4 { width: 100%; }
      .slider {
        display: block;
        margin: 2.0em auto 1.0em auto;
      }
      #header {
        height: 7.5em;
      }
      #navigationbar {
        height: 2.5em;
      }
      .expressions-image {
        position: inherit;
        display: block;
        max-width: 243px; /*75 percent of original */
        width: 50%; /*calc(324px - 1.0 * ((100vw - 342px) / 784));*/
        height: auto;
        border: 1px solid #d3a21c;
        box-shadow: 5px 5px 5px #888888;
        margin-left: 25%;/*margin-left: calc(81px + 1.0 * ((100vw - 342px) / 784));*/
        padding: 0.5em;
        margin-top: 1em;
        margin-bottom: 1em;
      }
      #rilogo{
          margin-top: calc(-17.3vw - 1.0 * ((33vw - 450px) / 2048));
      }
      .topnav a{
        		font-size: calc(0.4em + 2 * ((100vw - 320px) / 680));
      }
      p.tagline {
	       font-size: calc(0.9em + 8 * ((100vw - 342px) / 768));
      }
      p.address {
        font-size: calc(0.5em + 2 * ((100vw - 342px) / 768));
      }
      p.headline {
        	font-size: calc(0.5em + 2 * ((100vw - 320px) / 680));
      }
      p.currentdate {
        	font-size: calc(0.5em + 2 * ((100vw - 342px) / 768));
      }

      ul {
          font-size: 1.00em;
          font-weight: bold;
      }
      .riheading1 {
      		/* Large gold heading with shadow */
      		font-size: calc(1.1em + 2 * ((100vw - 342px) / 784));
      }

      .riheading2 {
      		/* Smaller gold heading with shadow */
      		font-size: calc(0.7em + 2 * ((100vw - 342px) / 784));
      }

      .riheading3 {
      		/* Dark blue heading */
      		font-size: calc(1.0em + 2 * ((100vw - 342px) / 784));
      }

      .riheading4 {
      	/* Gold all CAPS heading */
      		font-size: calc(0.7em + 2 * ((100vw - 342px) / 784));
      }

      .riheading5 {
        	/* Small gold and bold heading */
          font-size: calc(0.5em + 2 * ((100vw - 342px) / 784));
      }

      .riheading6 {
          font-size: calc(0.5em + 2 * ((100vw - 342px) / 784));
      }

      .riheading7 {
          /* Medium text ALL-CAPS orange-red bold */
      		font-size: calc(0.7em + 2 * ((100vw - 342px) / 784));
      }
      .riheading8 {
      		/* Dark blue heading */
      		font-size: calc(0.9em + 2 * ((100vw - 342px) / 784));
      }
      .text-intro {
        	font-size: calc(0.6em + 2 * ((100vw - 342px) / 784));
      }
      .text-regular {
        		font-size: calc(0.7em + 2 * ((100vw - 342px) / 784));
      }
      .scaledimg-left {
      	height: 33.3%;
      	width: 33.3%;
      	font-size: calc(0.5em + 2 * ((100vw - 342px) / 784));
      }

      .scaledimg-right {
      	height: 42%;
      	width: 42%;
      	font-size: calc(0.5em + 2 * ((100vw - 342px) / 784));

      }
      .thumbnail {
        height: 75%;
      	width: 75%;
          margin-top: -0.5em;
      }

      .post-body-div {
        font-family: 'Noto Serif', serif;

        text-align: justify;

        font-size: 0.9em;
      }
      .post-body-div p {
        margin:1.0em 0px;
      }
      #contactform {
      	font-size: calc(0.7em + 2 * ((100vw - 320px) / 680));
      }





      /* Modal Content */

      .modal-content {
/*
        width: calc(62vw - 3.5 * ((33vw - 450px) / 768));
        height: calc(62vh - 3.5 * ((33vw - 450px) / 768));

        max-width: min(62vw, 214px);
        max-height: min(62vh, 214px);*/





          width: calc(75vw - 3.5 * ((33vw - 450px) / 768));
        /*  height: calc(33vh - 3.5 * ((33vw - 450px) / 768)); */
          /*width: 50%;*/
          max-width: min(75vw, 456px);
          max-height: min(75vh, 456px);


          /*max-height: 684px;*/
          height: auto;
        /*  border: 20px solid #6bfe00;
          box-shadow:0px 0px 5px 3px #e3dd47;*/

    /*
          width: calc(42vw - 3.5 * ((33vw - 450px) / 768));
          height: calc(42vh - 3.5 * ((33vw - 450px) / 768));

          max-width: min(42vw, 342px);
          max-height: min(42vh, 342px);*/

          min-width: min(50vw, 228px);
          min-height: min(50vw, 342px);





      }

  }