body {background-color: white; color:black; font-size: 1.2em; margin:0; line-height:auto; font-family: 'Roboto Condensed', sans-serif; display:flex; min-height: 100vh; flex-direction: column;}

h1,h2,h3,h4,.title {font-family: 'Roboto Condensed', sans-serif; font-weight: 300;}

h1 {font-size: 3.0em; margin:1em 0 0.5em;}
h2 {font-size: 2.0em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.2em;}

.hand {cursor: pointer;}
.yellow {color:#FFCC00}
.yellow-line {border-bottom:0.5em solid #FFCC00;}
.bg-lightgray {background-color: #EEE;}

button, input[type="button"], input[type="reset"], input[type="submit"] {font-size: 1em; padding:0.5em 2em;}

img.fit {object-fit:cover; width:100%; height:100%;}
figcaption {font-size: 70%;}

/* .menu-toggle {position:absolute; top:1em; right:1em; z-index:10; display: block; color:black!important; padding: 0 0 1em 1em;} */
.menu-toggle {display: inline-block; color:black!important; padding: 0.8em 0em 0.8em 1em;}

.admin-bar .sticky-header {top: 46px;}
.h-wrap {max-width:1200px; margin:0 auto;}
.mb-10, .my-10 { margin-bottom: 6rem!important; }

/* header */
.top-ribbon-above {height:3em; text-align: right;}
.top-ribbon {position:relative; background-color: #FFCC00; width:100%; height:3em; vertical-align: text-bottom; white-space: nowrap;}
.top-ribbon-below {min-height:4em; text-align:right;}

.site-header {position:relative; overflow:xxxhidden;}
.top-logo {overflow:visible; display:inline-block;  vertical-align: text-bottom; width:7em; height:9em; left:0; margin:-3em 0; z-index:10; background-image: url("Logo Header.png"); background-size: auto 9em; background-repeat: no-repeat;}
.logo-title {display:inline-block; color:white; text-transform: uppercase; font-size:2em; vertical-align: top; text-shadow: 0px 0px 8px #00000040;}
.logo-container a {color:white; text-decoration: none;}
.logo-title a:hover {text-shadow: 0px 0px 8px #00000080;}

nav ul {margin:0; padding:0;}

#primary-menu {display:inline-block; overflow:auto; color:black; text-align:right; position:relative; overflow:visible;}
#primary-menu li {display:inline-block; margin-left:1em;}
#primary-menu a {color:inherit;}

#primary-menu .current-menu-item, #primary-menu .current-page-ancestor {text-decoration: underline;}

#primary-menu .sub-menu {display:none; position:absolute; left:0; color:gray;}
#primary-menu .sub-menu .menu-item {}

#primary-menu .menu-item:hover > .sub-menu, 
#primary-menu .current-menu-item > .sub-menu, 
#primary-menu .current-menu-ancestor > .sub-menu, 
#primary-menu .menu-item .sub-menu:hover {display:block; }

#primary-menu.mobile-menu {position:fixed; top:-0.5em; left:0; z-index:1000; background-color: #eee; height:100vh; text-align:left; box-shadow: 0px 0px 8px #00000040;}
#primary-menu.mobile-menu {background-image: url("Logo.png"); background-size: 30% auto; background-repeat: no-repeat; background-position:2em 2em; padding:12em 2em 2em 1em!important;}
#primary-menu.mobile-menu li,
#primary-menu.mobile-menu .sub-menu {display:block; position:relative;}

/* search form */
/* .top-ribbon-above a {color:gray;} */
.top-ribbon-above .search-icon {padding:0.8em 0em 0.8em 1em;}
.top-ribbon-above .search-form {display:inline-block;}
.top-ribbon-above .search-form label {margin-bottom:0; padding:0.8em 0 0}
.top-ribbon-above .search-field {padding:0; border:none; width:100%; text-align: right;}
.top-ribbon-above input[type=submit] {display:none;}






/* cover */
.cover {position:relative;}
.cover .cover-image {height:20em; background: rgba(0, 0, 0, .5)  url(none); background-size: cover; background-position:center; }

/* cover slides */
#cover-slides {position:absolute; width:100%; height:100%;}
#cover-slides .carousel-inner, #cover-slides .carousel-item {width:100%; height:100%;}
#cover-slides .cover .cover-image {background:none;}

.cover-mask {position:absolute; top:0; z-index:1; width:100%; height:100%; background-image: radial-gradient( ellipse, transparent, #00000040, #000000C0 );}

.home-links {font-size:2em; color:gray;}
.home-links .fas {color:#FFCC00; font-size: 1.5em; padding-right:0.5em;}

/* content */
.content-area {margin:2em auto;}
.content-area a {color: inherit;}
.opening-block {min-height:13em;}

/* page */
#page {flex:1;}
.page {margin: 0;}

article .post-thumbnail img {width:100%;}

.latest-posts-item {margin:1em 0; border-bottom: 1px solid #FFCC00;}
.latest-posts-item .date {color:gray;}

.latest-posts-item .thumbnail {overflow: hidden; display: inline-block; margin-bottom:0.5em;}
.latest-posts-item .thumbnail img {	display: block; transition: transform .4s;   /* smoother zoom */ }
.latest-posts-item .thumbnail:hover img {transform: scale(1.1); transform-origin: 50% 50%; }

/* footer */
.site-footer {font-size:0.9em;}
.site-footer a {color:inherit;}
.site-footer .address {margin:0 auto;}

.footer-strip {padding: 1em 0; text-align: left;}
.footer-logo-container {position:relative;}
.footer-logo {position:absolute; right:0; bottom:0; width:12em; height:18em; opacity:0.2; background-image: url("Logo.png"); background-size: auto 100%; background-repeat: no-repeat;}

/* social links */
.social-links a:hover {text-decoration: none;}
.social-links a svg {fill:white; margin-left:1em;}

.wpcf7 {text-align: center;}
.wpcf7-submit {width:20em; font-size:1em!important; padding:1em 2em; border: none!important; background-color: #5A718F!important; color:white!important; text-transform: uppercase;}



/* getting wordpress and sticky header go well together */
@media screen and (min-width: 783px) {
	.admin-bar .sticky-header {top: 32px;}
}

@media screen and (max-width: 600px){
	#wpadminbar {position: fixed;}
}

/* desktops - XL : default */

/* laptops - LG */
@media screen and (max-width: 1200px){
	.h-pad { padding-left: 1em; padding-right: 1em;}
	#site-navigation {padding-right:1em;}
	body {font-size: 1.2em; }
	.cover .cover-image {height:25em;}
}

/* tablets - MD */
@media screen and (max-width: 992px){
	body {font-size: 1.1em; }
	.cover .cover-image {height:20em;}
	#primary-menu {padding:6em 1em 1em!important;}
}

/* larger phones - SM */
@media screen and (max-width: 767px){
	body {font-size: 1.0em; }
}

/* smaller phones - XS */
@media screen and (max-width: 576px){
}

/* smallest screens */
@media screen and (max-width: 512px){
	body {font-size: 0.9em; }
	.top-ribbon {font-size:0.8em;}
}
@media screen and (max-width: 368px){
	.top-ribbon {font-size:0.7em;}
}