/*Fonts***************************************/
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');
/*Glogbal Variables***************************************/
/*:root {
    --PrimaryColor: #ff7700;
    --PrimaryColor: #ff8615;
    --PrimaryColor: #c74602;
    --colorbgblack: #161616;
  --fontheader: 'Bebas Neue', sans-serif;
  --fontbody: 'Nunito', sans-serif;
}*/
/*Common Elements***************************************/
body {
    font-family: var(--fontbody);
    letter-spacing: 0.0625em;
}
h1, h2, h3, h4, h5 {
    font-family: var(--fontheader);
}
a {
    color: var(--PrimaryColor);
}
a:focus, a:hover {
    text-decoration: none;
    color: var(--PrimaryColor);
}
iframe {
    width: 100%;
}
img {
    max-width: 100%;
}
/*Button Elements***************************************/
.btn {
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    padding: 1.25rem 2rem;
    font-family: var(--fontheader);
    font-size: 90%;
    text-transform: uppercase;
    letter-spacing: .15rem;
    border: 0;
}
.no-gutters {
  margin-right: -15px;
  margin-left: -15px;
}
/*Main Menu***************************************/
#mainNav {
    min-height: 56px;
    background-color: var(--PrimaryBackgroundColor);
}
#mainNav .navbar-toggler {
    font-size: 80%;
    padding: 0.75rem;
    color: var(--PrimaryTextColor);
    border: 1px solid var(--PrimaryTextColor);
}
#mainNav .navbar-toggler:focus {
    outline: none;
}
#mainNav .navbar-brand {
    color: var(--PrimaryTextColor);
    font-weight: 700;
    padding: .9rem 0;
}
#mainNav .navbar-brand img {
    max-height: 70px;
}
#mainNav .navbar-nav .nav-item:hover {
    color: fade(var(--PrimaryTextColor), 80%);
    outline: none;
    background-color: transparent;
}
#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
    outline: none;
    background-color: transparent;
}
@media (min-width: 992px) {
    #mainNav {
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: none;
        background-color: transparent;
        transition: background-color 0.3s ease-in-out;
    }
    #mainNav .navbar-brand {
        padding: .5rem 0;
        color: var(--PrimaryTextColor);
        opacity: 0.7;
    }
    #mainNav .nav-link {
        transition: none;
        padding: 2rem 1.5rem;
        color: var(--PrimaryTextColor);
        opacity: 0.5;
    }
    #mainNav .nav-link:hover {
        color: var(--PrimaryTextColor);
        opacity: 1;
    }
    #mainNav .nav-link:active {
        color: white;
    }
    #mainNav.navbar-shrink {
        background-color: var(--PrimaryBackgroundColor);
    }
    #mainNav.navbar-shrink .navbar-brand {
        color: var(--PrimaryTextColor);
        opacity: 1;
    }
    #mainNav.navbar-shrink .nav-link {
        color: var(--PrimaryTextColor);
        padding: 1.5rem 1.5rem 1.25rem;
        border-bottom: 0.25rem solid transparent;
    }
    #mainNav.navbar-shrink .nav-link:hover {
        color: var(--PrimaryColor);
    }
    #mainNav.navbar-shrink .nav-link:active {
        color: var(--PrimaryColor);
    }
    #mainNav.navbar-shrink .nav-link.active {
        color: var(--PrimaryColor);
        outline: none;
        border-bottom: 0.25rem solid var(--PrimaryColor);
        opacity: 1;
    }
}
/*Hero Section***************************************/
.hero {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 15rem 0;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    color: var(--PrimaryTextColor);
    background-color: var(--PrimaryBackgroundColor);
}
.hero h1 {
    font-family: var(--fontheader);
    font-size: 100px;
    letter-spacing: 0.8rem;
    background: -webkit-linear-gradient(var(--PrimaryTextColor), rgba(255, 255, 255, 0.5));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.hero h2 {
    font-size: 40px;
}
.hero .btn-primary {
    background-color: transparent;
    border: var(--PrimaryTextColor) 1px solid;
}
.hero .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--PrimaryColor);
    border: var(--PrimaryColor) 1px solid;
}
@media (min-width: 768px) {
    .hero h1 {
        font-size: 4rem;
        line-height: 4rem;
    }
}
@media (min-width: 992px) {
    .hero {
        height: 100vh;
        padding: 0;
    }
    .hero h1 {
        font-size: 6.5rem;
        line-height: 6.5rem;
        letter-spacing: 0.8rem;
    }
    .hero h2 {
        max-width: 40rem;
        font-size: 2rem;
    }
}