@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; border: 0; }

html {
  height: 100%;
  font-family: "Roboto", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
}

body {
  min-height: 100%;
  margin: 0;
  background: url("../images/bkg.jpg") no-repeat fixed center center / cover;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}

#wrap { min-height: 100vh; }
#page { width: 100%; padding-bottom: 50px; }

.site-header { height: 180px; white-space: nowrap; }

.logo-container {
  position: relative;
  z-index: 1001;
  display: inline-block;
  width: 600px;
  height: 180px;
  vertical-align: top;
  background: rgba(13, 99, 150, 0.9);
}

.logo {
  display: block;
  width: 500px;
  height: 180px;
  margin: 0 auto;
  background: url("../images/logo@3x.png") no-repeat center center / contain;
}

.main-navigation {
  position: relative;
  z-index: 1000;
  display: inline-block;
  height: 100px;
  margin-left: -5px;
  vertical-align: top;
  font-size: 0.8em;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}

.main-navigation ul {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-navigation li {
  display: inline-table;
  width: 100px;
  height: 100px;
  transition: background-color 0.2s ease-in-out;
}

.main-navigation a {
  display: block;
  height: 100px;
  padding: 0;
  color: #fff;
  font-weight: 400;
  line-height: 150px;
  text-decoration: none;
}

.btn-home { background: url("../images/home@3x.png") no-repeat center 5px / contain rgba(56, 78, 81, 0.5); }
.btn-info { background: url("../images/info@3x.png") no-repeat center 5px / contain rgba(56, 78, 81, 0.5); }
.btn-about { background: url("../images/about@3x.png") no-repeat center 5px / contain rgba(56, 78, 81, 0.5); }
.btn-pay { background: url("../images/pay@3x.png") no-repeat center 5px / contain rgba(56, 78, 81, 0.5); }
.btn-contact { background: url("../images/contact@3x.png") no-repeat center 5px / contain rgba(56, 78, 81, 0.5); }
.main-navigation li:hover { background-color: rgba(56, 78, 81, 0.7); }
.main-navigation li.current-menu-item { background-color: rgba(0, 0, 0, 0.7); }

#content { display: block; width: 100%; min-height: 500px; margin-top: -5px; }
#primary, #text-2, #text-3 { position: relative; display: block; width: 600px; }
#primary { min-height: 500px; background: rgba(56, 78, 81, 0.5); }
#main { padding: 2.5em; text-align: left; }
.entry-title { display: none; }

#text-2 { margin-top: 2px; background: rgba(13, 99, 150, 0.5); }
#text-3 { height: 75px; margin-top: 2px; background: rgba(13, 99, 150, 0.9); }
#text-3:hover { background: #000; }
.textwidget { padding: 1.5em 2.5em; }
#text-3 a { font-size: 1.5em; }
#text-3 a::after { content: " >"; }

#colophon {
  position: relative;
  z-index: 200;
  width: 100%;
  height: 50px;
  margin: -50px auto 0;
  padding-left: 20px;
  background: rgba(13, 99, 150, 0.3);
  color: #fff;
  font-size: 0.8em;
  line-height: 50px;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 { clear: both; }
h1 { font-size: 2.5em; font-weight: 700; line-height: 1.2em; }
h2 { font-size: 2em; font-weight: 700; line-height: 40px; }
h3 { font-size: 1.7em; font-weight: 400; line-height: 80px; }
p { margin-bottom: 1.5em; font-size: 16px; font-weight: 400; line-height: 1.6em; }
strong { font-weight: 700; }

a { color: #fff; font-weight: 700; text-decoration: none; }
a:hover, a:focus { color: #fbab18; }
a:focus-visible { outline: 3px solid #fbab18; outline-offset: 2px; }

img { max-width: 100%; height: auto; }
.alignright { float: right; margin-left: 1.5em; }
.alignleft { float: left; margin-right: 1.5em; }
ul, ol { margin: 0.2em 0 1em 1em; }
ul { list-style: disc; }
ol { list-style: decimal; }

.program-notice {
  margin: 1.25rem 0;
  padding: 1rem 1rem;
  border: 1px solid rgba(230, 154, 161, 0.72);
  border-radius: 8px;
  background: rgba(76, 28, 34, 0.82);
  color: #ffe2e4;
  font-size: 0.875rem;
  line-height: 1.4;
}
.program-notice p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.notice-prefix { display: block; margin-bottom: 0.35rem; color: #fff4f5; }
.paypal-button { margin: 0 0 2em; }
.paypal-button input[type="image"] { width: auto; max-width: 100%; }
.bkg { width: 94%; padding: 1em; background: #fff; }
.contact-form-slot { min-height: 500px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 5px;
  left: 5px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 15px 23px 14px;
  clip: auto;
  background: #f1f1f1;
  color: #21759b;
}

@media only screen and (min-width: 100px) and (max-width: 900px) {
  #page { margin: 0; }
  .site-header { height: auto; white-space: normal; }
  .logo-container { width: 100%; height: 120px; }
  .logo { width: 100%; max-height: 120px; }
  .main-navigation {
    display: block;
    width: 100%;
    height: 100px;
    margin: -5px auto 12px;
    white-space: nowrap;
  }
  .main-navigation li { width: 19.2%; max-width: 75px; }
  #primary, #text-2, #text-3 { width: 100%; }
  #content { margin-top: 7px; }
  #colophon { height: auto; padding-left: 0; text-align: center; }
  p { font-size: 1em; line-height: 1.2em; }
  h1, h2, h3, h4, h5, h6 { margin-bottom: 1.5em; font-size: 1.2em; line-height: 1.2em; }
  .program-notice { font-size: 1rem; }
}