/* varela-regular - latin */
@font-face {
  font-family: 'Varela';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/varela-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/varela-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/varela-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/varela-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/varela-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/varela-v16-latin-regular.svg#Varela') format('svg'); /* Legacy iOS */
}

:root {
    --main-fg-color: #fff;
    --header-fg-color: rgba(255, 16, 16, 0.85);
    --main-fg-color-hover: #dbdbdb;
    --main-fg-color2: #FF1010;
    --main-bg-color: #FF1010;
    --main-bg-color-hover: #ea0000;
    --main-bg-color-trans: rgba(255, 16, 16, 0.7);
}


body {
  position: relative;
}

#content-wrapper {
  min-height: 85vh;
}

a#toplink {
  position: fixed;
  bottom: 0;
  right: 25px;
  font-size: 5rem;
  color: var(--main-bg-color-trans);
  mix-blend-mode: difference;
}

a#toplink:hover {
  color: var(--main-bg-color);
}

/*// get rid of unnecessary padding in phone buttons*/
footer .btn-default {
  padding-left: 0;
  padding-right: 0;
}

footer, footer a, footer a.btn-default {
  font-size: .875rem;
}

div.background-image {
    background-size: cover;
    background-repeat: no-repeat;
    text-shadow: #bdb7b7 1px 1px;
}

div.background-image.contain {
    background-size: contain;
}

div.background-image.cover {
    background-size: cover;
    background-repeat: no-repeat;
}

.parallax {
    background-position: center top;
    background-attachment: fixed;
}

.video iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}


/*// ###################### Bootstrap Changes #####################*/

.card {
  border: none;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}

.btn-primary {
  color: var(--main-fg-color);
  background-color: var(--main-bg-color);
  border-color: var(--main-fg-color);
}

.btn-primary:hover {
  color: var(--main-fg-color-hover);
  background-color: var(--main-bg-color-hover);
  border-color: var(--main-fg-color-hover);
}

a, .navbar-light .navbar-nav .nav-link {
  color: var(--main-fg-color2);
}

.navbar-light .navbar-nav .active>.nav-link {
  color: var(--main-bg-color-trans);
}

.carousel-caption {
  background-color: rgba(123, 118, 118, 0.7);
}

h1, h2 {
  color: var(--header-fg-color);
  font-family: 'Varela', sans-serif;
  font-weight: bold;
  text-shadow: var(--main-fg-color-hover) 1px 1px;
}

nav#nav-main {
  font-family: 'Varela', sans-serif;
  font-weight: bold;
}

.transparent-bright {
  background-color: rgba(214,214,214,0.76);
}

/*// #################### Color Schemes ###################
// Palette: http://paletton.com/palette.php?uid=c002P0u3i0kw0w0opysrxwDwArwyooo*/
/*// dark #################################################*/
:root {
    --dark-bg-color: #000;
    --dark-fg-color: #fff;
    --dark-a-color: #FF1010;
}

.color-scheme.dark {
  background-color: var(--dark-bg-color);
  color: var(--dark-fg-color);
}
.color-scheme.dark h1, .color-scheme.dark h2 {
  color: var(--dark-fg-color);
}
.color-scheme.dark a {
  color: var(--dark-a-color);
}

.color-scheme.dark .btn-primary {
  color: var(--dark-a-color) !important;
  background-color: var(--dark-fg-color);
}

/*// light #################################################*/
:root {
    --light-bg-color: #fff;
    --light-fg-color: #000;
    --light-a-color: #131695;
}

.color-scheme.light {
  background-color: var(--light-bg-color);
  color: var(--light-fg-color);
}
.color-scheme.light h1, .color-scheme.light h2 {
  color: var(--light-fg-color);
}
.color-scheme.light a {
  color: var(--light-a-color);
}

.color-scheme.light .btn-default {
  border-color: var(--light-a-color);
}

.color-scheme.light .btn-primary {
  color: var(--main-fg-color) !important;
  background-color: var(--main-bg-color);
}

/*// blue #################################################*/
:root {
    --blue-bg-color: rgba(0, 153, 153, 0.72);
    --blue-fg-color: #f7f7f7;
    --blue-a-color: #f7f7f7;
}

.color-scheme.blue {
  background-color: var(--blue-bg-color);
  color: var(--blue-fg-color);
}
.color-scheme.blue h1, .color-scheme.blue h2 {
  color: var(--blue-fg-color);
}
.color-scheme.blue a {
  color: var(--blue-a-color);
}

/*// dark-red #################################################*/
:root {
    --dark-red-bg-color: rgba(255, 16, 16, 0.86);
    --dark-red-fg-color: #F6F3F4;
    --dark-red-a-color: #990000;
}

.color-scheme.dark-red {
  background-color: var(--dark-red-bg-color);
  color: var(--dark-red-fg-color);
}
.color-scheme.dark-red h1, .color-scheme.dark-red h2 {
  color: var(--dark-red-fg-color);
}
.color-scheme.dark-red a {
  color: var(--dark-red-a-color);
}

.color-scheme.dark-red .btn-primary a {
  color: var(--dark-red-a-color);
  background-color: var(--dark-red-fg-color);
}


/*// red #################################################*/
:root {
    --red-bg-color: rgba(255, 0, 0, 0.72);
    --red-fg-color: #f7f7f7;
    --red-a-color: #f7f7f7;
}

.color-scheme.red {
  background-color: var(--red-bg-color);
  color: var(--red-fg-color);
}
.color-scheme.red h1, .color-scheme.red h2 {
  color: var(--red-fg-color);
}
.color-scheme.red a {
  color: var(--red-a-color);
}

/*// orange #################################################*/
:root {
    --orange-bg-color: rgba(255, 116, 0, 0.72);
    --orange-fg-color: #fdfdfd;
    --orange-a-color: #f7f7f7;
}

.color-scheme.orange {
  background-color: var(--orange-bg-color);
  color: var(--orange-fg-color);
}
.color-scheme.orange h1, .color-scheme.orange h2 {
  color: var(--orange-fg-color);
}
.color-scheme.orange a {
  color: var(--orange-a-color);
}

/*// dark-blue #################################################*/
:root {
    --dark-blue-bg-color: rgba(27, 27, 179, 0.72);
    --dark-blue-fg-color: #f7f7f7;
    --dark-blue-a-color: #f7f7f7;
}

.color-scheme.dark-blue {
  background-color: var(--dark-blue-bg-color);
  color: var(--dark-blue-fg-color);
}
.color-scheme.dark-blue h1, .color-scheme.dark-blue h2 {
  color: var(--dark-blue-fg-color);
}
.color-scheme.dark-blue a {
  color: var(--dark-blue-a-color);
}

/*// green #################################################*/
:root {
    --green-bg-color: rgba(0, 155, 0, 0.84);
    --green-fg-color: rgba(0, 0, 0, 0.83);
    --green-a-color: #f7f7f7;
}

.color-scheme.green {
  background-color: var(--green-bg-color);
  color: var(--green-fg-color);
}
.color-scheme.green h1, .color-scheme.green h2 {
  color: var(--green-fg-color);
}
.color-scheme.green a {
  color: var(--green-a-color);
}

/*// light-gray #################################################*/
:root {
    --light-gray-bg-color: rgba(224, 224, 224, 0.84);
    --light-gray-fg-color: rgba(0, 0, 0, 0.88);
    --light-gray-a-color: rgba(0, 0, 0, 0.76);
}

.color-scheme.light-gray {
  background-color: var(--light-gray-bg-color);
  color: var(--light-gray-fg-color);
}
.color-scheme.light-gray h1, .color-scheme.light-gray h2 {
  color: var(--light-gray-fg-color);
}
.color-scheme.light-gray a {
  color: var(--light-gray-a-color);
}

.color-scheme.light-gray .btn-primary {
  color: var(--light-gray-bg-color) !important;
  background-color: var(--light-gray-fg-color);
}

/* fluid 5 columns */
.grid-sizer,
.grid-item {
    width: 20%;
    margin-bottom: 10px;
    margin-right: 10px;
}
/* 2 columns */
.grid-item--width2 { width: 40%; }

/*// ###################### Media Queries #########################*/

@media (min-width: 768px) {
    /* Only fullscreen on bigger displays */
    .viewport {
        min-height: 100vh;
    }
}

@media (max-width: 1024px) {

  li.nav-item {
    font-size: 0.84em;
  }

  h1, h1.display-3 {
    font-size: 1.5rem;
  }
}
.h2, h2 {
  font-size: 1.2rem;
}

@media (max-width: 768px) {

  h1, h1.display-3 {
      font-size: 1.5rem;
  }

  .h2, h2 {
    font-size: 1.2rem;
  }

    .navbar li a {
        font-size: 0.80rem;
    }
    .navbar-toggleable-sm .navbar-nav .nav-link {
      padding-right: .2rem;
    }
    .dropdown-toggle::after {
      margin-left: .1em;
      border-top: .2em solid;
      border-right: .2em solid transparent;
      border-left: .2em solid transparent;
    }
    .parallax {
        background-attachment: scroll !important;
    }



    a#toplink {
      right: 10px;
      font-size: 3rem;
    }

    .grid-item {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0px;
    }
    /* 2 columns */
    .grid-item--width2 { width: 100%; }
}

@media (max-width: 700px) {
    .grid-item {
        width: 100%;
        margin-bottom: 10px;
    }
    /* 2 columns */
    .grid-item--width2 { width: 100%; }
}

@media (max-width: 425px) {
  .parallax, section>div.background-image {
    background-image: none !important;
    text-shadow: none;
  }

  .navbar.fixed-bottom {
  }

  a#toplink {
    right: 0px;
    font-size: 2rem;
  }

    .grid-item {
        width: 100%;
        margin-bottom: 10px;
    }
    /* 2 columns */
    .grid-item--width2 { width: 100%; }

  .xs-d-block {
    display: block;

  }



}