html, body { height:100%; }
body { background-color: #f3d675; background-image: none; margin:0; font-size:1rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
h1, h2 { text-align:center; }
/* Bootstrap controls these with REM (relative EM) Units */ /*
h1 { font-size:2.2rem; margin:10px auto; }
h2 { font-size:1.8rem; } 
h3 { font-size:25px; margin-block-start: .90em; margin-block-end: .90em; }
h4 { font-size:22px; margin-block-start: 1em; margin-block-end: 1em; }
h5 { font-size:19px; margin-block-start: 1.1em; margin-block-end: 1.1em; }
h6 { font-size:17px; margin-block-start: 1.3em; margin-block-end: 1.3em; }
*/

p { text-indent:.5rem;  }
/* body > div:first-child { margin-top:0; border:1px solid red; } */
img { border:none; margin:10px; box-sizing: content-box; }
ul { padding-bottom:8px; }
table { border-collapse:collapse; border-spacing:0; border:0; }
table td { padding:0; margin:0; }
dl { display: inline-grid; grid-template-columns: max-content auto; margin:15px auto; text-transform:capitalize; }
dt { grid-column-start: 1; padding-right:10px; text-align:right; }
dt::after { content:":"; }
dd { grid-column-start: 2; }
dd::after, li::after { content:"."; }
div.ddsmoothmobile { height:270px; }
.mainnav li::after, .submenu li::after { content:none; }
.submenu .breadcrumb { margin-bottom:0; line-height: 2.2rem; }
div.ddsmoothmobile, div.ddsmoothmobile ul, div.ddsmoothmobile div.topulsdiv { background: #2a4b86; }
div.ddsmoothmobile ul li.breadcrumb, div.ddsmoothmobile ul li a:hover { background: #0b2148; }
dl dl { position:relative; left:-4rem; top:1rem; background-color:#f0f4f7; padding:10px; }
ul[title]::before {
	content: attr(title);
	/* then add some nice styling as needed, eg: */ 
	display: block;
	font-weight: bold;
	padding: 5px 5px 5px 0;
	position:relative;
	left:-40px;
}
input.text-input::after, label.error::after { content: "\00000a"; }
label.error { color:red; }

.container { 
	max-width:1140px;
	min-height:100%;
	padding:0 !important;
	background-color:#fff; 
	box-shadow:0 2px 8px grey;
	position:relative;
	z-index:0;
}

.row {  }
.b { font-weight:bold; }
.c, .img-c { text-align:center; }
.ib { display:inline-block; }
.left { text-align:left; }
.right  { text-align:right; }
.fl { float:left; }
.fr { float:right; }
.clrb { clear:both; }
.of-h { overflow:hidden; }
.small { font-size:.8rem; }
.h-6 { height:6rem; }
.usd::before { content:"\0024"; }

.w-25p { width:25px; }
.w-150p { width:150px; }
.mw-140p { max-width:140px; width:100%; }

.blu { color:blue; }
.red { color:red; }
.grey { color:grey; }
.affirm { background:rgba(0, 175, 5, 0.3); text-shadow:0 2px 5px #fff, 0 2px 10px #fff, 0 2px 15px #fff; }

.nbord { border-width:0; }
.bst-10 { border-spacing:15px 0 0; }

.ltbkg { background-color:#f0f4f7; } /* Light (subtle) background color for highlighting */

/* Add links defs */

.pdflink {
    padding: 10px 10px 10px 40px;
    background: url(/media/img/Adobe_PDF_file_icon_32x32.png) left no-repeat;
    margin: 8px 0;
}

/* #header { background:#cde1e8 url('/media/img/nowcaster.png') no-repeat 15px; min-height:80px; } */
#header { background:linear-gradient(#cde1e8,#f1f4f9); }
#header img { display:inline-block; margin:8px 15px; }
#tnav, #bnav { display:flex; background:#2a4b86 linear-gradient(#2e60aa,#273b6b); }

/* Set the following line in ddsmoothmenu.js to control when the mobile nav replaces the web versions: 
	mobilemediaquery: "screen and (max-width: 700px)", // CSS media query string that when matched activates mobile menu (while hiding default) 
*/

@media (max-width: 950px) {
	.sidebar .ddsmoothmenu-v ul { font-size:.8rem; }
	.modal-dialog { max-width:70%; }
}
@media (max-width: 850px) {
	.sidebar .ddsmoothmenu-v ul { font-size:.7rem; }
	.ddsmoothmenu-v ul li a { padding: 10px 15px 10px !important; }
	.ddsmoothmenu-v .rightarrowclass { top:12px;right:5px; }
}
@media (max-width: 768px) {
	#sb-imgs1, #sb-imgs2, #poweredby { display:none; }
	.ddsmoothmobile	ul:nth-of-type(2), .ddsmoothmobile ul:nth-of-type(3) { display:none; }
	#croppedDiv { height:320px; }
	#aboutpg #croppedDiv img { 
		bottom:-70px;
		width:100%;
		animation-name:kburnish-sm; /* The animation declaration for mobile adjustment */
		animation-duration:12s
		;
	}
	.sidebar .ddsmoothmenu-v ul { font-size:.7rem; }
}
@media ( min-width: 768px) {
	/*#main-menu { float: left; width: 12em; }*/
}
@media (max-width: 700px) {
	#tnav, #bnav { display:none; }
}
@media (max-width: 520px) {
	#header img { width:85%; }
}

#maincontent { padding-bottom: 190px; } /* Height of the footer element */
#ttitle { padding:20px 0 0; }

#content { padding:5px 40px 20px 25px; }
#content div { margin-bottom:45px; }

/* .sidebar { background:#cde1e8 linear-gradient(90deg,#cde1e8,#ccccda); } */
.sidebar { text-align:center; position:relative; margin-left:10px; margin-right:-10px; min-width:144px; }
.sidebar img { width:100%; max-width:160px; margin:10px 0; }
.sidebar .ddsmoothmenu-v { text-align:right; margin-left:0; max-width:160px; }
.sidebar .ddsmoothmenu-v ul { min-width:120px; }
#poweredby { margin-bottom:15px; }
.sb-imgs { margin:0; max-width:160px; }
.sb-imgs p { text-indent:0; margin:0 auto 25px; padding:0 3px; }

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 120px;
}

#compTable { border:1px solid #f9eab8; }
#compTable td { padding:5px; border:1px solid #f9eab8; }
#compTable th:only-child { background-color:#f3d675; background-image:linear-gradient(to bottom, #f3d675, #f9eab8); }
table tr:nth-child(odd) { background:#eee; }
#compTable td:first-child { text-align:right; border-width:1px 1px 0 0; }
#compTable img { margin:0; }

#purchase_opt div { margin-bottom:0; display: flex; font-size:.9rem; text-align:center; }
#purchase_opt span.purchtmpl {
	background:#f7e8b8;
	border-radius: 15px;
	display:block;
	margin:1% 1.5% 2%;
	padding:20px 20px 10px;
	width:47%;
	vertical-align:top;
	overflow:auto;
}
#purchase_opt li { text-align:left; }
.purchtmpl .img-c img {
	width:80%; 
	margin:10px auto 15px;
	box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
}

#croppedDiv { height: 270px; overflow:hidden; position:relative !important; margin:20px 0; }

/* ########## The animation code ########## */
#aboutpg #croppedDiv img { 
	position:absolute;
	left:0;
	margin:0;
	bottom:-210px;
	width:130%;
	animation-name:kburnish; /* The animation declaration */
	animation-duration:13s;
	animation-timing-function:ease-in;
}
/* ########## The animation code ########## */
@keyframes kburnish {
	from { bottom:-410px; width:100%; }
	to { bottom:-210px; width:130%; }
}
@keyframes kburnish-sm {
	from { bottom:-210px; width:130%; }
	to { bottom:-70px; width:100%; }
}

/* ########## END animation code ########## */

#ftrrow { position:absolute; bottom:0; left:15px; width:100%; }
#ftrrow .col-sm-12 { padding:0; }
#footer { background:linear-gradient(#fff,#cde1e8); text-align:center; padding:20px 0 10px; height:130px; width:100%; }

#contact_form { padding: 25px 10px; }

/* ########## Lightbox/Carousel Styles ########## */

#content #gallery { margin-bottom:10px; }

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
	/* z-index: 1051;*/ /* Sit on top of menus */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
	overflow-y:hidden; /* Stop jitter from adding scrollbar/removing oin window size, etc. */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
.modal-dialog { max-width:850px; }

/* Modal Content/Box */
.modal-content {
  background-color: rgba(240,240,240,0.9);
  margin: 2rem auto; /* 15% from the top and centered */
  padding: 0 20px 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
	/*z-index:2000;*/
	animation-name: animatetop;
  animation-duration: 0.4s
}
.modal-header { border-bottom:none; padding:0; }
.modal-header .close { font-size:3rem; }
.modal-body { padding:0; }
.carousel-item img { margin:0 0 20px; }

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
	filter: invert(1);
}

/* Position the "next button" to the right */
.next {
  right: 10px;
  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(255,255,255,0.4);
}

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