/*==============================
Cullen J Webb - CSS STYLES
Author: Cullen J Webb
Author URI: https://www.cullenjwebb.com
Version: 1.0
==============================*/

/*==============================
TABLE OF CONTENTS
================================
# Base
    - Variables
    - Bootstrap Items
    - Forms
# Layout
    - Header
    - Navigation
    - Body
    -  - Content
    -  - Sidebar
    -  - Widgets
    - Footer
# Post Types
    - Font Page
    - Blog Home Page
    - Blog Posts
    - Attorney Pages
    - Practice Areas
# Utilities
    - ADA Accessibility
    - Plugins
# Mobile
# Fonts
=============================*/

/*==============================
# Base
================================*/

/* Variables */
:root {
    --primary-color: #1d34a2;
    --primary-alt: #00005b;
    --secondary: #196B91;
    --trinary: #D8E18D;
    --highlight: #EF551F;
}

/* Bootsrap Items */

#wrapper {
    overflow-x: hidden;
}

.btn-primary {
    background-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-alt);
}

.bg-dark {
    background-color: var(--primary-alt)!important;
}

.btn-outline-secondary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn-outline-secondary:hover {
    background-color: #212529;
    border-color: #212529;
}

/* Forms */

/* Fix for CF7 messages being the wrong color */
.wpcf7 .wpcf7-response-output {
    color: inherit;
}


/*==============================
# Layout
================================*/

/* Header */

#navigation-logo {
    height: 55px;
}

#navigation-logo path {
    fill: #fff;
}

/* Navigation */

/* Body */

div#wrapper {
    position: relative;
    z-index: 10;
}

.content {
    background-color: #fff;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

/* Body - Content */

/* Body - Sidebar */

/* Body - Widgets */

/* Footer */

#footer {
    border-top: 10px solid #212529;
}

#footer-logo {
    height: 100px;
}

#footer .menu-item a, #footer .menu-item a[aria-current="page"] {
    color: var(--primary-alt);
}

#footer .menu-item a:hover, #footer .menu-item a:hover[aria-current="page"] {
    color: var(--primary-color);
}



/*==============================
# Post Types
================================*/

/* Front Page */

#billboard-logo {
    width: 50vw;
}

#homepage-billboard-mini::before {
    background-color: var(--primary-alt);
}

.home main#main {
    padding-top: 0 !important;
    margin-top: 0;
}

section#homepage-billboard {
    color: #fff;
    position: relative;
    margin-top: 81px;
}

#homepage-careers .career-card {
    padding: 0 !important;
    height: 100%;
}

#homepage-careers .career-card .btn {
    text-transform: uppercase;
}

#bgvideo {
    position: absolute;
    z-index: -1;
    object-fit: cover;
    top: 0;
    left: 50%;
    transform: translateX( -50%);
    height: 100%;
    width: 100vw;
}

#bgtexture {
    position: absolute;
    z-index: -1;
    background-color: #fff;
    opacity: 0.17;
    top: 0;
    left: 50%;
    transform: translateX( -50%);
    height: 100%;
    width: 100vw;
}

/* #billboard-logo path {
    fill: #fff;
} */

/* Blog Home Page */

/* Blog Posts */

/* Attorney Pages */

/* Practice Areas */

/*==============================
# Utilities
================================*/

/* ADA Accessibility */

/* Plugins */

/* MISC */

img.cjw-bg-image {
    display: block;
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    bottom: 0;
    z-index: 10;
}

.cjw-bg-image-container {
    position: relative;
    overflow: hidden;
}

.cjw-bg-image-container > div {
    position: relative;
    overflow: hidden;
    z-index: 20;
}

.bg-color {
    position: relative;
}

.bg-color::before {
    content: '';
    position: absolute;
    background-color: var(--primary-color);
    top: 0;
    left: 50%;
    transform: translateX( -50%);
    height: 100%;
    width: 100vw;
    z-index: -1;
}

.bg-color.bg-fade::before {
    background: linear-gradient(-45deg, var(--primary-color), var(--primary-alt));
    background-size: 400% 400%;
    animation: fade-animation 5s ease infinite;
}

@keyframes fade-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.bg-blade {
    position:absolute;
    width: 100vw;
    animation: blade-animation 6s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, var(--secondary) 50%, var(--primary-alt) 50%);
    bottom:0;
    opacity:.5;
    top:0;
    z-index:-1;
}
  
.bg-blade2 {
    animation-direction:alternate-reverse;
    animation-duration:8s;
}
  
.bg-blade3 {
    animation-duration:10s;
}
  
  @keyframes blade-animation {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }

/*==============================
# Mobile
================================*/

/* Remove min-width from mobile queries if styles should apply to all mobile devices of that size and smaller */

/* Bootstrap Large - lg
@media screen and (min-width: 1200px) {} */

/* Bootstrap Medium - md */
@media screen and (min-width: 992px) {
    #billboard-logo {
        width: 25vw;
    }
}

/* Bootstrap Small - sm
@media screen and (min-width: 768px) and (max-width: 991px) {} */

/* Bootstrap Extra Small - xs
@media screen and (max-width: 767px) {} */

/*==============================
# Fonts
================================*/

/* When localizing Google Fonts set font-display: to optional or swap and preload in header.php */