/* @import url(//fonts.googleapis.com/css?family=Open+Sans);  */
@import url("//fonts.googleapis.com/css?family=Alegreya Sans SC");
@import url("//fonts.googleapis.com/css?family=Raleway");


html,
body,
h1 {
	color: #444;
	color: gray;
	/*	font-family: 'Alegreya Sans SC', sans-serif; */
	font-family: 'Raleway', sans-serif;
	font-size: 1.05em;
	font-weight: 300;
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* Replace Raleway's text figures (letters which reach below the line) with Lining figures */
	/* See https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals */
	-webkit-font-feature-settings: "lnum";
	-moz-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
	scroll-behavior: smooth;
}



html,
body {
	background-color: #E0E0E0;
	background-color: #444;
	background-color: #333;
}

#titleDiv {
	font-size: 1.5vw;
}

.container {
	text-align: justify;
	height: 100%;
	border-color: white;
}

.container {
	margin: 0 auto;
	width: 1000px;
}


.centerColumnWithBorder {
	margin: auto;
	/*width: 80%;*/
	margin-top: 25px;
	/*padding:15px;*/
	box-shadow: 0 0 1.1rem #000;
	background: #333;
	max-width: 1100px;
}

.thumbnails img {
	/*	
	min-width:100px;
	max-width:300px;	
	box-shadow: 2px 2px 5px #444;		
	border: 12px solid white;
	margin: 10px;  
*/
	max-width: 300px;
	border: none;
	transition: 0.3s
}

thumbnails image:active {
	width: 100%;
}

.thumbnailSubmitButton {
	max-width: 300px;
	box-shadow: 2px 2px 5px #444;		
	border: 3px solid white;
	margin: 10px;
	transition: 0.3s  
}

.thumbnailSubmitButton:hover {
	transition: 0.3s;
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	border:5px solid red;
}

.thumbnailSubmitButton:active {
	width: 100%;
}

.growingImage:hover {
	transition: 1.6s ease-in;
	scale(1.3);
}

/* This handles when hover is over: it slowly restores image to original size */
.growingImage {
	transition: 0.2s ease-in;
	scale(1.0);
}

.noUnderline {
	text-decoration: none
}

.centered {
	text-align: center
}

p.quote {
	color: Black
}

.niceyNice {
	color: Black;
	font-size: 125%;
}



h1.fontWeightNormal {
	font-weight: 100
}

h1.centeredAndFontWeightNormal {
	font-weight: 100;
	text-align: center
}

h2.fontWeightNormal {
	font-weight: 100
}

h2.centeredAndFontWeightNormal {
	font-weight: 100;
	text-align: center
}

h3.fontWeightNormal {
	font-weight: normal
}

/* This is the correct order: Link, Visited, Hover, Active */
a {
	font-weight: 400;
}

a:link {
	color: #703730;
	text-decoration: none;
}

a:visited {
	color: #703730;
	text-decoration: none;
}

a:hover {
	color: Red;
	text-decoration: none;
}

a:active {
	color: Red;
	text-decoration: none;
}

/* Place this after the other link-related tags */
.currentLink a:link,
.currentLink a:visited,
.currentLink a:hover,
.currentLink a:active {
	color: Red;
}


a.noImageBorder img {
	border: none;
}

a.green {
	color: green;
}

a.red:hover {
	color: Black;
	text-decoration: none;
}

a.red:active {
	color: #DDD;
	text-decoration: none;
}

a.grayWithBlackHover {
	font-size: 1.5vw;
	color: gray;
	border: none;
}

a.grayWithBlackHover:hover {
	font-size: 1.5vw;
	color: black;
	border: none;
	font-weight: 900;
}

.redHover {
	color: black;
}

.redHover:hover {
	color: red;
}

p.test {
	margin: 50px;
}

td.centerJustify {
	text-align: center;
}

img.leftMargin {
	float: right;
	margin-left: 10px;
	max-width: 25%;
	height: 85vh;
	/* Important or tall images will get squeezed */
}

img.rightMargin {
	float: left;
	margin-right: 10px;
	max-width: 25%;
	max-height: 85vh;
	/* Important or tall images will get squeezed */
}

img.rightAndBottomMargin,
img.far-left {
	float: left;
	margin-right: 10px;
	margin-bottom: 7px;
	max-width: 25%;
	max-height: 85vh;
	/* Important or tall images will get squeezed */
}

table.leftAndBottomMargin {
	margin-left: 10px;
	margin-bottom: 7px;
	max-width: 25%;
	max-height: 85vh;
	/* Important or tall images will get squeezed */
}

img.leftAndBottomMargin,
img.far-right {
	float: right;
	margin-left: 10px;
	margin-bottom: 3px;
	max-width: 25%;
	max-height: 85vh;
	/* Important or tall images will get squeezed */
}

img.noBorder {
	border: none;
}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-height: 85vh;
	/* Important or tall images will get squeezed */
}


.indented {
	margin-left: 50px;
	line-height: 150%;
}


h2 {
	color: #CCCCCC;
	font-size: 1.2em;
}

h3 {
	color: Black;
	font-size: 1.2em;
}

h4 {
	color: Black;
	font-size: 1.2em;
}

table.center {
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}

table.centerSmaller {
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
}

.justified {
	text-align: justify;
}

.leadIn {
	color: Black;
	font-size: 150%;
}


.fatImageBorder {
	box-shadow: 15px 15px 50px #000;
	border: 5vw solid white;
}


.niceImageBorder img {
	box-shadow: 15px 15px 50px #000;
	border: 20px solid white;
}


.niceImageBorderSmall img {
	box-shadow: 10px 10px 5px #000;
	border: 15px solid white;
	margin-bottom: 10px;
}

.noImageBorder img {
	border: none;
}

.imageStretchMax img {
	max-width: 75%;
}

.growOnHover img {
	transition: all 0.4s;
}

.growOnHover img:hover {
	transform: scale(4.0);
}

.growOnHover img a {
	color: black;
}


.growOnHover img a:hover {
	color: black;
}


.quote {
	color: Black
}

.highleading {
	line-height: 200%
}

.smallText {
	font-size: 9pt
}

.redText {
	color: red;
	font-size: 14pt
}

.goldText {
	color: Black;
}


.wrapper {
	min-height: 100%;
	height: auto;
	height: 100%;
	margin: 0 auto -20px;
	/* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
	height: 20px;
	/* .push must be the same height as .footer */
}

.footer {
	text-align: center;
}


blockquote {
	margin: 15px auto;
	padding: 10px 10px 10px 50px;
	font-style: normal;
	background: url(https://www.scorm.com/wp-content/themes/cabedge/images/blockquote_bg.jpg) 5px 5px no-repeat #333333;
	width: 70%;
	font-style: italic;
}

.quotation {
	color: #666;
	font-style: italic;
	line-height: 120%;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	font-size: 90%;
}


.transparent {
	/*      filter:alpha(opacity=50); */
	opacity: 0.5;
}

.dialogTarget {
	color: #673427;
	font-weight: 600;
}

.fadeIn {
	animation: myFadeIn 4s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
	/* Firefox */
	-moz-animation: myFadeIn 4s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	/* Safari and Chrome */
	-webkit-animation: myFadeIn 4s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	/* Opera */
	-o-animation: myFadeIn 4s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: 1;
	-o-animation-direction: normal;
}


@keyframes myFadeIn {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0.1;
	}

	/* this lets the image load */
	100% {
		opacity: 1;
	}
}

@-moz-keyframes myFadeIn

/* Firefox */
	{
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0.1;
	}

	/* this lets the image load */
	100% {
		opacity: 1;
	}

	/*	
	0% {opacity:0; -moz-transform: scale(0,0);}
	70% {opacity:0.2; -moz-transform: scale(0.4,0.4);}  
	100% {opacity:1; -moz-transform: scale(1,1); }
*/
}

@-webkit-keyframes myFadeIn

/* Safari and Chrome */
	{
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0.1;
	}

	/* this lets the image load */
	100% {
		opacity: 1;
	}
}

@-o-keyframes myFadeIn

/* Opera */
	{
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0.1;
	}

	/* this lets the image load */
	100% {
		opacity: 1;
	}
}


.blurIn {
	animation: myBlurIn 3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
	/* Firefox */
	-moz-animation: myBlurIn 3s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	/* Safari and Chrome */
	-webkit-animation: myBlurIn 3s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	/* Opera */
	-o-animation: myBlurIn 2s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: 1;
	-o-animation-direction: normal;
}


@keyframes myBlurIn {
	0% {
		filter: blur(4px);
	}

	25% {
		filter: blur(3px);
	}

	/* this lets the image load */
	50% {
		filter: blur(2px);
	}

	75% {
		filter: blur(1px);
	}

	100% {
		filter: blur(0px);
	}
}

@-moz-keyframes myBlurIn

/* Firefox */
	{
	0% {
		-moz-filter: blur(4px);
	}

	25% {
		-moz-filter: blur(3px);
	}

	/* this lets the image load */
	50% {
		-moz-filter: blur(2px);
	}

	75% {
		-moz-filter: blur(1px);
	}

	100% {
		-moz-filter: blur(0px);
	}
}

@-webkit-keyframes myBlurIn

/* Safari and Chrome */
	{
	0% {
		-webkit-filter: blur(4px);
	}

	25% {
		-webkit-filter: blur(3px);
	}

	/* this lets the image load */
	50% {
		-webkit-filter: blur(2px);
	}

	75% {
		-webkit-filter: blur(1px);
	}

	100% {
		-webkit-filter: blur(0px);
	}
}

@-o-keyframes myBlurIn

/* Opera */
	{
	0% {
		blur(3px);
	}

	20% {
		blur(1px);
	}

	/* this lets the image load */
	100% {
		blur(0px);
	}
}


.headingTintBar {
	background-color: #EEE;
	background-image: none;
	padding: 12px;
	padding-left: 10px;
	padding-top: 10px;
	margin-top: 20px;
	margin-bottom: -5px;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	text-shadow: 5px 5px 6px #AAA;
	border-radius: 5px;
}

#header {
	height: 35px;
}

.thickListItem {
	margin-top: 12px;
}

input.rounded {
	padding: 3px;
	background: #DDD;
	border-radius: 4px;

}

.inputButton {
	height: 25px;
	;
	box-shadow: 2px 2px 5px #444;
	font-weight: bold;
}

.inputButton:hover {
	font-weight: normal;
	box-shadow: none;
}

.niceImageBorder img.arrows {
	height: 30px;
	height: 8vw;
	border: none;
	box-shadow: none;
	opacity: .3;
}

.niceImageBorder img.arrows:hover {
	opacity: 1;
	transition: 0.3s
}

a.grayButton {
	font-size: 2.5vw;
	background-color: #CCC;
	padding: 0.3vw;
	padding-left: 3vw;
	padding-right: 3vw;
	text-align: center;
	display: inline-block;
	/* to get the width to take */
	color: black;
	text-decoration: none;
	border-radius: 7px;
	box-shadow: 4px 4px 8px #000;
	font-weight: bold;
}

a.grayButton:hover, .graySubmitButton:hover {
	background-color: #FFF;
	color: black;
	transition: 0.4s
}

/* Style the Copyright button to look like the anchor tags */
.graySubmitButton {
	font-weight:normal;
	border:none;
	border-radius: 7px;
	box-shadow: 4px 4px 8px #000;
	font-size: 2.5vw;
	background-color: #CCC;
	padding: 0.3vw;
	padding-left: 3vw;
	padding-right: 3vw;
}

/* Style the Copyright button to look like the anchor tags */
.graySubmitButton:hover {
	cursor:pointer;
}

.menuImageTable {
	text-align: center;
	/* padding:100px; */
	table-layout: fixed;
	width: 100%;
}

.menuImageTable td {
	font-size: 200%;
	font-size: 2.8vw;
	text-align: center;
}

.menuImageTable img {
	box-shadow: 10px 10px 10px #000;
	border: 2px solid Gray;
	margin-top: 25px;
	margin-bottom: 20px;
	/*	margin-right: 25px; */
	max-width: 75%;
}


/*.menuImageTable td:hover {*/
/*	transition: 0.3s;*/
/*	transform: scale(1.1);*/
/*	color: white;*/
/*}*/

.galleryImageTable {
	text-align: center;
	table-layout: fixed;
	width: 100%;
	background-size: contain;
}


.galleryImageTable img {
	margin-top: 25px;
	margin-bottom: 5px;
	margin-right: 25px;
	max-width: 85%;
	box-shadow: 8px 8px 30px #555;
	border: 100px solid white;
}


.brightenOnHover {
	opacity: 0.55;
}


.brightenOnHover:hover {
	opacity: 1.0;
}

.pageBuilderImage {
	max-width: 98%;
	box-shadow: 8px 8px 30px black;
	border: 2px solid gray;
}

.centerColumn {
	max-width: 80%;
	margin-left: 10%;
	margin-right: 10%;

}

.centerColumnWide {
	max-width: 94%;
	margin-left: 3%;
	margin-right: 3%;

}

.linkImageForm img:hover {
	cursor: pointer;
}

.caption {
	margin-left:auto;margin-right:auto;margin-top:15px;text-align:center;
}

.tableForHeader {
	display:table;
	width:100%;
}

.trForHeader {
	display:table-row;
}

.d1ForHeader {
	display:table-cell;
	width:10%;
	line-height:1.6em;
	font-weight:300;
	font-size:2.3vw;
	text-align:center;
	vertical-align:middle;
}


.d2ForHeader {
	display:table-cell;
	text-align:center;
	width:80%;
	line-height:1.6em;
	color:gray;
	letter-spacing:1.1vw;
	text-indent: 1.1vw; // needed to get text to center
	font-weight:300;
	font-size:3.3vw;
	vertical-align: middle;
}

.d3ForHeader {
	display:table-cell;
	width:10%;
}