@font-face { font-family: 'Quicksand';  font-style: normal; font-weight: 400; src: local('Quicksand Regular'), local('Quicksand-Regular'), url('/assets/Quicksand-Regular.ttf');font-display: swap;}
@font-face { font-family: 'Quicksand';  font-style: normal; font-weight: 600; src: local('Quicksand SemiBold'), local('Quicksand-SemiBold'), url('/assets/Quicksand-SemiBold.ttf');font-display: swap;}
:root {
    --red: #0B233F;
    --white: #ffffff;
    --black: #000000;
    --shadow: rgb(0 0 0 / 25%);
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
main {  display: block; }
h1, .h1 { font-size: 2.25rem; margin: 0.67em 0 0.2em; font-weight: normal;text-transform: uppercase;}
h2, .h2{ font-size: 1.75rem; margin: 0.67em 0 0.2em;font-weight: normal;text-transform: capitalize;}
h3, .h3{ font-size: 1.5rem; margin: 0.67em 0 0;font-weight: bold;text-transform: capitalize;}
hr {  box-sizing: content-box; height: 0;  overflow: visible; border: 0;height: 1px; background: #333;background-image: linear-gradient(to right, #ccc, #333, #ccc);}
pre {  font-family: monospace, monospace;  font-size: 1em; }
abbr[title] {  border-bottom: none;  text-decoration: underline;  text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
img {
    max-width: 100%;
    height: auto;
    display: block;
}
button, input, optgroup, select, textarea { font-family: inherit; font-size: 1rem; }
button, input {  overflow: visible; }
button, select {  text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: none; -webkit-border-radius: 0; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {  height: auto;}
[type="search"] {-webkit-appearance: textfield;  outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}  
[hidden] {display: none;}
/**************  GLOBAL BASICS  ****************************************************/
.clear:after { content: " "; display: table; clear: both; }
body { margin: 0; line-height: 1.5; font-family: "Quicksand", "Helvetica Neue", "Helvetica", sans-serif; -webkit-font-smoothing: antialiased;
    /*background-image: url(/content/images/windmill-background.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-attachment: fixed;
    background-size: contain;*/
} 
.container { width:100%; max-width: 1280px; margin: auto; }
.container-padding { width:100%; padding: 0 2%; max-width: 1280px; margin: auto; }
.image {width:100%; height:auto;}
p { margin-top: 5px; }
.smaller { font-size:.8em;}
a:hover { text-decoration:none;color:var(--black)}
a {text-decoration:underline; color:var(--red);}
* { box-sizing: border-box; }
.scroll[id] {scroll-margin-top: 150px;}
ul {margin:0;}
.text-center {text-align:center;}
.text-left {text-align:left;}
.text-right {text-align:right;}
.indent {margin-left:20px;}
.left {float:left;}
.right {float:right;}
.center {margin:auto;}
#topbutton {display: none; position: fixed; bottom: -7px;right: -20px;z-index: 100;padding: 15px 20px;background-color: var(--red);}  /*SCROLL TO TOP*/
iframe {border: none;width: 100%;}
/**************  SYSTEM ERROR PAGE  ****************************************************/
.system-page {padding:60px 10px; text-align:center;}
.system_svg{width:45px;height:45px;margin:0 auto 35px;display:block}

/**************  SECURE ZONE  ****************************************************/
.hidden {display:none!important;}

/**************  YOUTUBE  ****************************************************/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/**************  GRID  ****************************************************/
.grid-group { display: flex; flex-wrap: wrap; gap:20px;}
.grid-center {align-items: center;} 
.grid-justify { justify-content: center;}
.grid-end {justify-content: end;}
.grid-evenly {justify-content: space-evenly;} 
.grid-between {justify-content: space-between;}
.grid-group img {width: 100%;height: auto;}
.grid4-2-1{ flex-basis: calc(25% - 15px);}
.grid3-2-1{ flex-basis: calc(33% - 11px);}
.grid75-1{ flex-basis: calc(75% - 10px);}
.grid25-1{ flex-basis: calc(25% - 10px);}
.grid5-1{ flex-basis: calc(33% - 20px);}
.grid2, .grid2-1{flex-basis: calc(50% - 10px);}
.feature img {width:280px; height:auto;} 
@media screen and (max-width: 1100px) {    
    .grid5-1 {flex-basis: calc(50% - 10px); }
}
@media screen and (max-width: 950px) {
	.grid3-2-1, .grid4-2-1 {flex-basis: calc(50% - 11px);}
}
@media screen and (max-width: 780px) {    
    .grid75-1, .grid25-1, .grid1-1, .grid5-1 {flex-basis: calc(100% - 10px); }
    .grid1-2 {flex-basis: calc(50% - 10px);}
}
@media screen and (max-width: 700px) {
	.grid3-2-1, .grid2-1 {flex-basis: calc(100% - 11px);}
}
@media screen and (max-width: 600px) {
    img {max-width:100%; height:auto;}
    }
@media screen and (max-width: 500px) {    
	.grid4-2-1 {flex-basis: calc(100% - 10px); }
	.grid1-2 {flex-basis: calc(100% - 10px);text-align:center;}
}

/**************  HEADER  ****************************************************/
header { 
background: -moz-linear-gradient(top,  rgba(255 255 255) 0%, rgba(19,19,19,0) 100%); 
background: -webkit-linear-gradient(top,  rgba(255 255 255) 0%,rgba(19,19,19,0) 100%);
background: linear-gradient(to bottom,  rgba(255 255 255) 0%,rgba(19,19,19,0) 100%); 
-webkit-transition: background-color 0.5s ease-in-out ; transition: background-color 0.5s ease-in-out ;
}
.header-backdrop { background-color: #ffffff; -webkit-transition: background-color 0.5s ease-in-out ; transition: background-color 0.5s ease-in-out ;border-bottom: solid thin var(--red);box-shadow:0px 10px 10px var(--shadow);}
.stick { position: fixed; top: 0; width: 100%; z-index:2; }
@media only screen and (max-width: 600px) {
    header {  background-color: #ffffff;}
    .stick { position: unset; } 
}

/**************  NAVIGATION  ****************************************************/
nav.main { color:#000000; font-size:1.1rem; display: flex; align-items: center;justify-content: space-between;  }
nav.main img {height: 132px;width: auto;transition: all 0.3s ease-in-out;padding: .5rem 2rem;}
.mobilenav { display:block!important; }
.nav-dropdown > :first-child:after { content: "\25BE"; padding-left: 4px; }
.selected > :first-child{border-bottom:3px solid var(--red); }
.highlight a { background-color:var(--red);}
.main ul { margin: 0; padding: 0; list-style-type: none; position: relative;}
.main ul li { display: inline-block; -webkit-transition: background-color 0.4s ease-in-out ; transition: background-color 0.4s ease-in-out;  }
.main ul li a { text-decoration: none; display: block; padding: 10px; margin:10px;color:#000000;font-weight:bold;transition: margin .3s ease-in-out;}
/*.main ul li:hover { }*/
.main ul li a:hover { background: var(--red); -webkit-transition: background-color 0.4s ease-in-out ; transition: background-color 0.4s ease-in-out;  color: #ffffff;}
.main ul ul { position: absolute; z-index:2; min-width: 200px; text-align:left; display: none; background: #000000;} 
.main ul ul li { display: block;  }
.main ul ul li a {color:#ffffff;}
.main ul li:hover ul { display: block;}
.main div { font-size: 2.5rem; padding: 0 4%; cursor: pointer; display: none; } /*mobile bar menu color*/

@media(max-width: 1070px) {
   /* .main ul li a { margin:0;}*/
    nav.main img {height: 100px;}
}
@media(max-width: 860px) {
    nav.main {flex-wrap: wrap; }
    nav.main img {height: 80px;}
    .mobilenav { width:100%; }
    .main div {display: block; }
    .main ul { display: none; position: static; background-color:var(--white); }
    .main ul li { display: block;  text-align: center;}
    .main ul ul { position: static; text-align:inherit; }
}
@media(min-width: 1070px) {
    .scroll-img { height: 100px!important;}
}
@media(min-width: 600px) and (max-width: 1070px) {
    .scroll-img { height: 60px!important;}
}
@media(max-width: 600px) {
    nav.main img { height:60px; }
}
/**************  GALLERY  ****************************************************/
.gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
        justify-content: center;
}
.gallery-card {
    flex: 0 1 350px;
    max-height: 300px;
    overflow: hidden;
}


/**************  ACTION BUTTON  ****************************************************/
.action-button  {display: inline-block; padding: 5px 30px; font-size: 1.2rem;cursor: pointer;text-decoration: none;margin: 0 20px 20px 20px;}
.menu-button  {display: inline-block; padding: 5px 30px; font-weight: bold;font-size: 1.2rem;cursor: pointer;text-decoration: none;}
.edit-button   {background-color: #dadada;display: inline-block;padding: 5px;cursor: pointer;text-decoration: none;border: 2px solid #ffffff; font-size:.8rem;font-weight: bold;}
.delete-button {background-color: #000000;color:#ffffff;display: inline-block;padding: 5px;cursor: pointer;text-decoration: none;border: 2px solid #ffffff;font-size:.8rem;font-weight: bold;}
.button-red {border: 2px solid var(--red); background-color: inherit; color: var(--red);}
.button-white  { border: 2px solid #ffffff; background-color: inherit;color: #ffffff;}
.action-button:hover, .menu-button:hover, button[type=submit]:hover, input[type=submit]:hover {  background-color:var(--red); text-decoration:none; color:#ffffff; border: 2px solid var(--red);}
.link-button {display: inline-block;background-color: #f6eeee;min-width: 100px;margin: 10px 5px;text-align: center;}
@media(max-width: 600px) {
    .menu-button { padding: 5px 10px; }
}

/**************  MAIN PAGE  ****************************************************/
.image-wrapper {position:relative; height: 350px; box-shadow:0px 10px 10px var(--shadow); } 
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; } 

.article-container {margin:20px auto; width: 100%;max-width: 1280px;}
@media screen and (max-width: 1280px) {
.article-container {margin:20px 2%; width: 96%;}
}
.section-container{padding: 60px 2%;}
.section-container:nth-child(even) {background-color:#eeeeee; }
.section-wrapper {display: flex;align-items: center;column-gap: 2%;margin: auto;max-width: 1280px;}
.section-text {width: 50%; text-align:center;}

.section-image { width: 50%; max-height: 400px; overflow: hidden;}
.section-image img { width: 100%; height: 100%; object-fit: cover;}
.section-container:nth-child(odd) .section-text {-webkit-order: 1; order:1;}
.section-container:nth-child(odd) .section-image {-webkit-order: 2; order:2;}

.section-backdrop-wrapper {position: relative;}
.section-backtrop-text {position: relative;text-align: center;color: #ffffff;width: 75%;margin: auto;}
@media screen and (max-width: 860px) {
    .section-wrapper {flex-wrap: wrap;}
    .section-text, .section-image  {width: 100%;}
    .section-container:nth-child(odd) .section-text {-webkit-order: 2; order:2;}
    .section-container:nth-child(odd) .section-image {-webkit-order: 1; order:1;}
}
.image-right {float:right; margin:0 0 10px 10px;max-width: 50%;height: auto;}
@media screen and (max-width: 700px) {
    .image-right {float:none; margin:10px 0;max-width: 100%;height: auto;}
}

/**************  CONTACT PAGE  ****************************************************/
.mapicon { width:50px !important; margin: 0 0 20px 40px; }


/**************  FOOTER  ****************************************************/
footer { padding: 10px 0 40px 0; color: #ffffff; background-color: var(--red); }
footer p { margin-left: 2%; }
footer a {color:#ffffff;}
.social-icons {display: flex;column-gap: 20px;margin: 0 2%;}
.social-icons img {width: 30px;height: auto;}
.copyright { text-align:center; font-size: .8em; padding:10px 0 10px 0; }
@media (max-width: 500px) {
    .social-icons { justify-content: center;}
    footer {text-align:center; }
}

/**************  PAGINATION  ****************************************************/
.pagination {    margin: 1rem auto;text-align: center; }
.pagination ul {max-width:100%;padding:0;}
.pagination li { display: inline; margin: 5px; padding: 5px 10px; background-color: var(--red); color:#ffffff; border-radius: 3px; }
.pagination li a { color:#ffffff;text-decoration:none; }
.pagination-inline-next, .pagination-inline-prev, .system_pagination-prev {
    margin: 5px 0 -5px;
    width: 20px;
    height: 20px;
}
.pagination .active { padding: 5px 10px; background-color:#000000; }
.pagination .active a { color:#ffffff;}

/**************  FORM  ****************************************************/
.form-wrapper {width: 100%;margin: auto;max-width: 800px;padding: 10px 2%;}
.edit-wrapper {display:flex;column-gap:10px;}
.tiny-body {padding:10px 1%;}
.tox { margin: 5px 0 20px 2%; width: 96%;}
label {  }
input[type=text], input[type=password], input[type=email], textarea {width: 96%; padding: 10px; margin: 5px 0 20px 2%; border: thin solid #ccc; -webkit-appearance: none; border-radius: 0;transition: border-color .5s ease-out;}

select { width: 96%; padding: 10px; margin: 5px 0 20px 2%; border: thin solid #ccc; background: #ffffff;  -webkit-appearance: none; border-radius: 0; transition: border-color .5s ease-out;}
input[type=datetime-local], input[type=date], input[type=time], input[type=tel], input[type=number]  {width:auto; padding: 10px; margin: 5px 0 20px 2%; border: thin solid #ccc; -webkit-appearance: none; border-radius: 0; transition: border-color .5s ease-out;}
input[type=file] {width: 96%; padding: 10px; margin: 5px 0 20px 2%; -webkit-appearance: none; border-radius: 0; transition: border-color .5s ease-out;}
.form-note {padding-left:20px; font-size: .8em; color: #ff0000; font-weight: 300;}

input:invalid, select:invalid, textarea:invalid {border: 1px solid red;}
input:focus:invalid, select:focus:invalid {border-bottom: 3px solid  salmon;}
input:focus, textarea:focus, select:focus { outline:none; border-bottom: solid 3px #000000;}

button[type=submit]:hover, input[type=submit]:hover {background-color:var(--red); text-decoration:none; color:#ffffff; border: 2px solid var(--red);}
button[type=submit]:focus, input[type=submit]:focus { background-color:var(--red); color:#ffffff; }


/**************  SLIDESHOW  ****************************************************/
.slideshow-container { position: relative; margin: 0; width:100%; height:80vh;box-shadow:0px 10px 10px var(--shadow);}
.mySlides { display: none; height: 80vh; width: 100%; overflow:hidden;background-color: #ffffff;}
.mySlides .res-image { width: 100%; height: 100%; object-fit: cover; opacity: 1;/* filter:  brightness(0.5); */}
.mySlides img {animation: kenburns 7.3s }
.slideshow-text { text-align: center; position: absolute; left: 45%; top:45%; transform: translate(-50%, -50%); width:90%; margin: 5%; animation: textfade 7.3s }
.slideshow-text-line1 { font-size: 4vw; color: var(--red);  text-transform: uppercase;  text-shadow: 1px 1px 1px #ffffff; line-height: 1;}
.slideshow-text-line2 { font-size: 3vw; color: #000000;  text-transform: capitalize; text-shadow: 2px 2px 2px #ffffff; line-height: 1;}
.slideshow-container .next { right: 10px; }
.slideshow-container .prev { left: 10px; }
.slideshow-container .prev, .slideshow-container .next {cursor: pointer; position: absolute; bottom: 50%; /*padding: 10px 20px;*/ color: #f2f2f2;  font-size: 3em;  transition: .6s ease; opacity: .7; }
.slideshow-container .prev:hover, .slideshow-container .next:hover { color: #000000; background-color: #f2f2f2; }
.dot-selector {text-align:center; position: absolute; bottom: 20px; left: 0; width:100%; z-index:1;}
.dot { cursor: pointer;  height: 12px;  width: 12px;  border-radius: 50%;  display: inline-block;     border: thin solid #ffffff; margin:5px; }
.dot-selector .active {  border:thin solid var(--red); }
.dot:hover { background-color: var(--red); border:none;}
.slideshow-container a {text-decoration:none;}
@media screen and (max-width: 1300px) {
    .slideshow-text-line1 { font-size: 5vw;}
    .slideshow-text-line2 { font-size: 3vw;}
}
@media screen and (max-width: 1000px) {
    .slideshow-text-line1 { font-size: 6vw;}
    .slideshow-text-line2 { font-size: 3vw;}
}
@media screen and (max-width: 800px) {
    .slideshow-text-line1 { font-size: 7vw;}
    .slideshow-text-line2 { font-size: 4vw;}
    .slideshow-container { height:60vh;}
    .mySlides { height: 60vh;}
}
@media screen and (max-width: 600px) {
    .slideshow-text-line1 { font-size: 9vw;}
    .slideshow-text-line2 { font-size: 6vw;}
}
@keyframes kenburns {
    0%{transform: scale(1);opacity:0;} 
    10% {opacity:1;} 
    90% {opacity:1;}
    100% {transform: scale(1.1);opacity:0;}
}
@keyframes textfade {
    0%{opacity:0;} 
    20% {opacity:1;} 
    80% {opacity:1;}
    100% {opacity:0;}
}