html, body {margin: 0; padding: 0;}

@font-face {font-family: 'OpenSans'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('open-sans-400.woff2') format('woff2'), url('open-sans-400.woff') format('woff');
}
@font-face {font-family: 'OpenSans'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('open-sans-600.woff2') format('woff2'), url('open-sans-600.woff') format('woff');
}

body {font-family: 'OpenSans', Arial, Verdana, Geneva; font-variant-ligatures: none;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; background-color: #FF0;}
a, a:visited, a:hover {outline: none; color: #2E3FE1;} a {text-decoration: none; cursor: pointer;}
* {-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
img {border: 0; image-rendering: -webkit-optimize-contrast;} #phone a {white-space: nowrap;}

/*------------------------------------*/

/*HEADER*/

/*#headback {border: 1px solid blue} header {border: 1px solid green} #headtext {border: 1px solid orange} #headtext h1 {border: 1px solid #666;}*/

header {position: absolute; z-index: 100; width: 100%; margin: 0 auto; z-index: 1; padding-bottom: 80px; background-image: linear-gradient(to top, rgba(66,84,116,0), rgba(66,84,116,.82) 45%);}
#headtext h1 {text-align: center; margin: 0 auto; font-size: 45px; font-family: 'Courgette', cursive; font-weight: normal; line-height: 1.2; padding: 20px 20px 10px 20px; color: #FFF;}
#dates {text-align: center; padding: 0 30px; font-size: 1.3em; color: #FFF;}

@media (max-width: 690px) and (min-width: 541px) {#headtext h1 {font-size: 6vw;}}
@media (max-width: 540px) {header {background-image: linear-gradient(to top, rgba(66,84,116,0), rgba(66,84,116,1) 45%);}}
@media (max-width: 480px) and (min-width: 401px) {#headtext h1 {font-size: 9vw;}}
@media (max-width: 400px) {#headtext h1 {font-size: 40px;}} @media (max-width: 330px) {#headtext h1 {font-size: 11.7vw;}}

/*-----------------------------------------------*/

/*Big Pic*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #B3B3B3;}
#homepic img {width: 500px; height: 300px; width: 100%; max-height: 850px; object-fit: cover; display: block;}

@media (min-width: 1701px) {#homepic img {object-position: 55% 26%;}} @media (max-width: 1700px) {#homepic img {object-position: 55% 10%;}}
@media (max-width: 1300px) {#homepic img {object-position: 55% 0%;}}
@media (min-width: 1201px) {#homepic img {height: calc(80px + 50vw);}}
@media (max-width: 1200px) {#homepic img {height: 650px;}} @media (max-width: 615px) {#homepic img {height: 600px;}}
@media (max-width: 540px) {#homepic {padding-top: 70px;}} @media (max-width: 400px) {#homepic {padding-top: 90px;}}

/*-----------------------------------------------*/

/*BODY AREA*/

.bodyarea {position: relative; padding: 30px 0 35px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2 {font-size: 20px; line-height: 1.7; font-weight: 400 !important;}

/*-----------------------------------------------*/

/*Waves*/

#topwave {margin-top: -40px; background-color: #FFF; overflow: hidden;}
#topwave svg {fill: #FFF; width: 125%; height: 45px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); z-index: 100000 !important; margin-top: -1px;}
#btmwave {background-color: #3A4353; overflow: hidden;} #btmwave svg {fill: #FFF; width: 130%; height: 40px; margin-top: -1px;}

/*-----------------------------------------------*/

/*BOTTOM AREA*/

#bottomarea {font-size: 14px; line-height: 1.6; padding: 0px 25px 22px 25px; text-align: center; clear: both;}
#bottomarea a {white-space: nowrap;}
.web, .web a {font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #BBB !important;}
.web a {font-style: italic; text-decoration: none;} .web a:hover {text-decoration: underline;}

/*====================================================*/

/*COLORS*/

body {color: #444; background-color: #FFF;} #bottomarea {background-color: #3A4353;} #bottomarea, #bottomarea a {color: #FFF;}
