/*************************************************
    Core Theme Files 
    Author: Bobbi Martin

--------------------------------------------------
DESC: This is the basic core css needed to to the
basic functionality of the site. This includes:

- Structure
- Modal

--------------------------------------------------

*************************************************/
/* Device Screen Breakpoints */
/* Spacing */
/* Fonts */
.site-header {
  margin: 0;
  padding: 0; }

.site-container {
  max-width: none;
  margin: 0; }

.site-inner {
  margin: 0;
  padding: 0px !important;
  max-width: 100% !important; }

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

section {
  position: relative; }
  section .wrap {
    max-width: 1440px;
    margin: 0 auto;
    z-index: 10;
    position: relative; }

.padding-y {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }
  @media only screen and (min-width: 860px) {
    .padding-y {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem; } }

.padding-top {
  padding-top: 0.5rem; }
  @media only screen and (min-width: 860px) {
    .padding-top {
      padding-top: 1.5rem; } }

.padding-bottom {
  padding-bottom: 0.5rem; }
  @media only screen and (min-width: 860px) {
    .padding-bottom {
      padding-bottom: 1.5rem; } }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-justify {
  text-align: justify;
  text-justify: inter-word; }

.video_background {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  width: 100%;
  heigh: 100%; }
  .video_background iframe, .video_background object, .video_background video, .video_background embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.button_container {
  text-align: center;
  padding: 1.5rem;
  margin: 1.5rem 0; }
  .button_container::after {
    content: "";
    display: table;
    clear: both; }
  .button_container a button.default {
    background-color: #000000;
    color: #ffffff; }
    .button_container a button.default:hover {
      background-color: #0000ff;
      color: white; }
  .button_container a button.inverse {
    background-color: #ffffff;
    color: #000000; }
    .button_container a button.inverse:hover {
      background-color: #0000ff;
      color: white; }
  .button_container a button.icon {
    font-size: 2rem; }

.modal {
  position: fixed;
  opacity: 0;
  width: 80%;
  background: #ffffff;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 900px;
  margin: 0.75rem auto;
  transition: opacity 0.25s 0s, z-index 0s 0.25s;
  z-index: -1;
  padding: 3rem; }
  .modal.modal-show {
    opacity: 1;
    z-index: 400;
    transition: z-index 0s 0s, opacity 0.25s 0s; }
  .modal .close-modal {
    text-decoration: none;
    color: #d3d3d3;
    position: absolute;
    right: 1rem;
    top: 0.5rem; }
    .modal .close-modal .fa {
      font-size: 2.5rem;
      transition: color 0.2s; }
      .modal .close-modal .fa:hover {
        color: #0000b3; }

.modal-cover {
  background-color: #000000;
  opacity: 0;
  position: fixed;
  left: 100%;
  width: 100%;
  height: 100vh;
  top: 0;
  transition: opacity 0.25s;
  z-index: 300; }
  .modal-cover.modal-background {
    opacity: 0.7;
    left: 0; }

.video_thumbnail_container .thumbnail_container {
  position: relative; }
  .video_thumbnail_container .thumbnail_container a {
    width: 100%;
    height: 100%; }
    .video_thumbnail_container .thumbnail_container a .icon_container {
      position: absolute;
      top: 20%;
      width: 100%;
      font-size: 15rem;
      cursor: pointer; }
      .video_thumbnail_container .thumbnail_container a .icon_container.default i {
        color: #ffffff; }
      .video_thumbnail_container .thumbnail_container a .icon_container.inverse i {
        color: #000000; }
      .video_thumbnail_container .thumbnail_container a .icon_container.blank {
        height: 100%;
        top: 0; }