@import url("https://fonts.googleapis.com/css?family=Open+Sans|Carrois+Gothic+SC");
* {
  box-sizing: border-box; }

/* purple background color is #564e73
dark grey is #333    */
.header {
  background-color: #151D28;
  text-align: center;
  padding: 20px; }

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #151D28;
  margin: 4%;
  font-size: 12pt; }

/* Mix-ins */
/* End Mix-ins */
@media screen and (max-width: 599px) {
  body {
    margin: 0%; } }

@media screen and (min-width: 600px) {
  body {
    margin: 4%; } }

@media screen and (min-width: 1200px) {
  body {
    margin-left: 6%;
    margin-right: 6%; } }

.logotext {
  font-family: 'Carrois Gothic SC', sans-serif;
  font-size: 24pt;
  text-shadow: #151D28; }

.title {
  font-family: 'Carrois Gothic SC', sans-serif;
  font-size: 16pt; }

a:link {
  color: darkblue; }

.a:link:active a:visited:active {
  color: indianred; }

.active {
  font-style: italic; }

.copyright {
  font-family: 'Carrois Gothic SC', sans-serif;
  color: lightgrey;
  font-size: 8pt;
  text-align: center; }

img {
  width: 100%; }

img.news {
  float: right;
  width: 25%;
  padding: 5px; }

img.center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

img.demo {
  opacity: 0.6; }

.active, .demo:hover {
  opacity: 1; }

img.hover-shadow {
  transition: 0.3s;
  cursor: pointer; }

.navbar {
  overflow: hidden;
  background-color: #151D28; }

.navbar a {
  float: left;
  display: block;
  color: whitesmoke;
  text-align: center;
  padding: 10px; }

.navbar a:hover {
  background-color: #564e73; }

.column {
  float: right;
  background-color: whitesmoke;
  width: 100%;
  min-width: 400px;
  padding: 20px; }

.proccol {
  float: left;
  background-color: whitesmoke; }
  @media (min-width: 600px) {
    .proccol {
      width: 75%;
      padding: 20px; } }
  @media (max-width: 599px) {
    .proccol {
      width: 75%;
      padding: 0;
      float: right; } }

.gallerycolumn {
  float: left;
  width: 33%; }

.thirdcolumn {
  float: right;
  background-color: whitesmoke;
  width: 40%;
  min-width: 400px;
  padding: 20px; }

.leftcolumn {
  float: left;
  background-color: whitesmoke; }
  @media (min-width: 600px) {
    .leftcolumn {
      width: 75%;
      padding: 20px; } }
  @media (max-width: 599px) {
    .leftcolumn {
      width: 100%;
      padding: 0; } }

.rightcolumn {
  float: right;
  background-color: whitesmoke;
  width: 25%;
  max-width: 300px;
  padding: 20px; }

.row:after {
  content: "";
  display: table;
  clear: both; }

.card {
  background-color: white;
  padding: 1%;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 3px 10px 0 rgba(0, 0, 0, 0.02); }

.button {
  background-color: slategrey;
  border: none;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px; }

/* Modal lightbox functionality */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6); }

.modal-content {
  position: relative;
  background-color: black;
  margin: auto;
  padding: 0;
  max-width: 1200px;
  align-content: center; }
  @media (max-width: 599px) {
    .modal-content {
      width: 100%; } }
  @media (min-width: 600px) {
    .modal-content {
      width: 80%; } }

.lbSlides {
  z-index: 15;
  display: none;
  background-color: black; }

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.3); }

.next {
  right: 0;
  border-radius: 3px 0 0 3px; }

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8); }

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold; }

.close:hover, .close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer; }

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0; }

.caption-container {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 2px 16px;
  color: white; }

img.logo {
  padding: 10px;
  max-width: 375px; }

img.mySlides {
  width: 65%;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

iframe {
  position: relative; }

.front {
  background-color: white;
  left: 0; }
  @media (min-width: 600px) {
    .front {
      left: 10%;
      position: absolute;
      top: 30%;
      opacity: .9; } }
  @media (min-width: 900px) {
    .front {
      top: 35%; } }

.carousel-inner > .item > img {
  margin: 0 auto; }

.transbacking {
  background-color: dimgrey;
  opacity: .8; }

@media (max-width: 599px) {
  #map {
    display: none; } }

@media (min-width: 600px) {
  #map {
    height: 100%; } }

/* Text overlay for images */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black; }

.over-container {
  position: relative;
  display: inline-block; }

.over-text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background-color: black; }

.over-container:hover .overlay {
  opacity: .7; }

/* Formatting Classes*/
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }

.clearfix::after {
  content: "";
  clear: both;
  display: table; }

.right {
  text-align: right; }

.third {
  width: 32%; }

.half {
  width: 49%; }

#sidenav {
  position: fixed;
  font-family: 'Carrois Gothic SC', sans-serif;
  font-size: 16pt; }
  @media (min-width: 600px) {
    #sidenav {
      right: 10px; } }
  @media (min-width: 900px) {
    #sidenav {
      right: 40px; } }
  @media (min-width: 1200px) {
    #sidenav {
      right: 60px; } }
  @media (min-width: 1800px) {
    #sidenav {
      right: 200px; } }
  @media (max-width: 599px) {
    #sidenav {
      font-size: 12pt; } }

.sticky {
  position: fixed;
  top: 0; }

.color-primary-0 {
  color: #8683B9; }

/* Main Primary color */
.color-primary-1 {
  color: #CAC8E2; }

.color-primary-2 {
  color: #A8A6CF; }

.color-primary-3 {
  color: #6764A5; }

.color-primary-4 {
  color: #4C4890; }

.color-secondary-1-0 {
  color: #957CB5; }

/* Main Secondary color (1) */
.color-secondary-1-1 {
  color: #D1C5E0; }

.color-secondary-1-2 {
  color: #B4A1CC; }

.color-secondary-1-3 {
  color: #7B5DA0; }

.color-secondary-1-4 {
  color: #62418C; }

.color-secondary-2-0 {
  color: #7892AF; }

/* Main Secondary color (2) */
.color-secondary-2-1 {
  color: #C3CFDE; }

.color-secondary-2-2 {
  color: #9EB2C8; }

.color-secondary-2-3 {
  color: #59789A; }

.color-secondary-2-4 {
  color: #3E6187; }

.color-complement-0 {
  color: #FFEBA8; }

/* Main Complement color */
.color-complement-1 {
  color: #FFF7DD; }

.color-complement-2 {
  color: #FFF1C4; }

.color-complement-3 {
  color: #ECD380; }

.color-complement-4 {
  color: #CFB256; }