/*==============================
GLADIATOR LAW MARKETING - HELMET STYLES
Author: Gladiator Law Marketing
Author URI: https://gladiatorlawmarketing.com
Version: 1.0
==============================*/

/*==============================
# TABLE OF CONTENTS
#
# Variables
# Base Helmet Styles
# Helmet Specific Styles
=============================*/

/*==============================
# Variables
================================*/

:root {
    --glm-bgcolor-1: var(--glm-primary-color);
    --glm-bgcolor-2: var(--glm-primary-alt);
    --glm-direction: 0deg;
    --glm-helmet-width: var(--glm-content-width);
}

.glm-color-reversed {
    --glm-bgcolor-1: var(--glm-primary-alt);
    --glm-bgcolor-2: var(--glm-primary-color);
}

.glm-color-secondary {
    --glm-bgcolor-1: var(--glm-secondary-color);
    --glm-bgcolor-2: var(--glm-secondary-alt);
}

.glm-color-secondary.glm-color-reversed {
    --glm-bgcolor-1: var(--glm-secondary-alt);
    --glm-bgcolor-2: var(--glm-secondary-color);
}

.glm-color-mixed {
    --glm-bgcolor-1: var(--glm-primary-color);
    --glm-bgcolor-2: var(--glm-secondary-color);
}

.glm-color-mixed.glm-color-reversed {
    --glm-bgcolor-1: var(--glm-secondary-color);
    --glm-bgcolor-2: var(--glmprimary-color);
}

.glm-direction-0, .glm-direction-360 {
    --glm-direction: 0deg;
}

.glm-direction-45 {
    --glm-direction: 45deg;
}

.glm-direction-90 {
    --glm-direction: 90deg;
}

.glm-direction-135 {
    --glm-direction: 135deg;
}

.glm-direction-180 {
    --glm-direction: 180deg;
}

.glm-direction-225 {
    --glm-direction: 225deg;
}

.glm-direction-270 {
    --glm-direction: 270deg;
}

.glm-direction-315 {
    --glm-direction: 315deg;
}

/*==============================
# Base Helmet Styles
================================*/

section.glm-helmet-wrapper {
    width: 100vw;
    left: 50%;
    transform: translateX( -50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    overflow: hidden;
}

section.glm-helmet-wrapper:not(.glm-helmet-wrap-0) .glm-helmet-content-wrapper {
    max-width: var(--glm-helmet-width);
    margin: auto;
}

/*==============================
# Helmet Specific Styles
================================*/

/* == Background - Image == */

section.glm-helmet-bg-image {
    position: relative;
    overflow: hidden;
}

img.glm-helmet-bgimage {
    display: block;
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

/* == Background - Color == */

section.glm-helmet-bg-color {
    background-color: var(--glm-bgcolor-1);
}

/* == Background - Gradient == */

section.glm-helmet-bg-gradient01:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX( -50%);
    height: 100%;
    width: 100vw;
    z-index: -1;
    background: var(--glm-bgcolor-1);
    background: linear-gradient(var(--glm-direction), var(--glm-bgcolor-1) 0%, var(--glm-bgcolor-2) 100%);
}

/* == Background - Animation 01 (BLADES) == */

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

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

/* == Background - Animation 02 (COLOR FADE) == */

section.glm-helmet-bg-animation02::before {
    content: '';
    position: absolute;
    background-color: var(--glm-bgcolor-1);
    background: linear-gradient(-45deg, var(--glm-bgcolor-1), var(--glm-bgcolor-2));
    background-size: 400% 400%;
    top: 0;
    left: 50%;
    transform: translateX( -50%);
    height: 100%;
    width: 100vw;
    z-index: -1;
    animation: glm-fade-animation2 10s ease infinite;
}

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