/* - colors for CSAA
:root {

    --brand-accent: 228,51,51;
    --brand-color2: 42, 71, 132;
}
*/

/* - colors for Sutter
:root {

    --brand-accent: 87,155,142;
    --brand-color2: 134,134,134;
}
*/

/* - colors for BAC
:root {

    --brand-accent: 201,79,42;
    --brand-color2: 144,144,144;
}
*/


/* - colors for Amazon
:root {

    --brand-accent: 255,145,1;
    --brand-color2: 0,0,0;
}
*/

/* - colors for Oakland A's
:root {

    --brand-accent: 234,181,26;
    --brand-color2: 1,56,50;
}
*/

/* - default seatrobot */
:root {
    --sr-color-1: 70,53,79;
    --sr-color-2: 108,117,125;
    --body-color: 70,53,79;
    --sr-accent-color: 142,107,157;
}

body {
    margin-top: 70px;
    background-color: rgba(0, 0, 0, 0.02);
    color: rgba(var(--body-color), 1.0);
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
}

a {color: rgba(var(--sr-accent-color), 1.0) !important;
    text-decoration: none;
    background-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}
/*universal styles*/

.animated-loader {
    background-color: #ffffff;
    left: 50%;
    opacity: 1.0;
    padding: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    z-index: 9999;
}

.loader-style {
    height: 3rem;
    opacity: 1;
    width: 3rem;
    z-index: 10000;
}

.navbar-brand-public {
    display: inline-block;
    padding-top: 0.2125rem;
    padding-bottom: 0.2125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}


.navbar-default {
    border-color: transparent;
    background-color: rgba(var(--sr-color-1), 1.0);
}

.navbar-default .navbar-brand {
    font-family: "Roboto",Helvetica,Arial,sans-serif;
    color: #ffffff;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: rgba(111, 163, 125, 0.5);
}

.navbar-default .navbar-collapse {
    border-color: rgba(255,255,255,.02);
}

.navbar-default .navbar-toggle {
    border-color: rgba(119, 119, 119, 0.6);
    background-color: rgba(var(--sr-color-1), 1.0);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: rgba(var(--sr-color-1), 1.0);
}



.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:focus {
    outline: 0;
    color: rgba(var(--sr-color-1), 1.0);
}

.navbar-default .navbar-nav>.active>a {
    border-radius: 0;
    color: #fff;
    background-color: rgba(var(--sr-color-1), 1.0);
}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #6fa373;
}

.index-navbar-img {max-height: 30px;}


.crash-text {
    font-size:12vw;
}

.crash-sub-text {
    font-size:2.5vw;
}

@media(min-width:768px) {
    .navbar-default {
        padding: 15px 0;
        border: 0;
        background-color: rgba(var(--sr-color-1), 1.0);
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-default .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-default .navbar-nav>.active>a {
        border-radius: 3px;
    }

    .navbar-default.navbar-shrink {
        padding: 10px 0;
        background-color: rgba(var(--sr-color-1), 1.0);
    }

    .navbar-default.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }

    .navbar-float {float: none;}
}

.ticket-row {
    padding-top: 20px;
}

.btn-purchase-td {max-width: 50%;}

a.teaser-link {
    color: rgba(var(--sr-accent-color), 1.0) !important;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a.teaser-link:link {
    color: rgba(var(--sr-accent-color), 1.0) !important;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a.teaser-link:hover {
    color: rgba(var(--brand-color2), 1.0);
    text-decoration: none;
}

a.social-link:link {
    color: rgba(var(--brand-color2), 1.0) !important;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a.social-link:hover {
    color: rgba(var(--brand-accent), 1.0);
    text-decoration: none;
}

.btn-register {
    background-color: transparent;
    border-color: rgba(var(--brand-accent), 1.0);
    color: rgba(var(--brand-accent), 1.0);
}

.btn-waitlist {
    background-color: transparent;
    border-color: #856404;
    color: #856404;
}

.btn-public {
    background-color: transparent;
    border-color: rgba(var(--brand-color2), 1.0);
    color: rgba(var(--brand-color2), 1.0);
}

.btn-2021 {
    background-color: #FFFFFF;
    border-color: rgba(var(--brand-accent), 1.0);
    color: rgba(var(--brand-accent), 1.0);
}

.linked-teaser-text {font-size: 0.8rem;}

.text-brand-accent {color: rgba(var(--brand-accent), 1.0);}

.text-brand-color2 {color: rgba(var(--brand-color2), 1.0);}

.public-green {color: #3c763d;}

.text-archive {color: #9f242f;}

.alert-header {padding-bottom: 1rem;}

.fa-lg-align {margin-top:0.2em;}

.fa-xlg-align {padding-top:0.2em;}

.fa-2x-align {margin-top:-0.1em;}

.border-top-sr {
    border-top: 1px solid #963fa3 !important;
}



.event-title {
    font-weight: normal;
    color: rgba(var(--brand-color2), 1.0);
}

.event-page-title {
    font-weight: lighter;
}

.nav-org-logo {max-height: 40px;}

.btn-brand:hover {
    color: rgba(var(--brand-color2), 1.0);
    background-color: rgba(var(--brand-color2), 0.1);
    border-color: rgba(var(--brand-color2), 0.1);
}

.footer-brand {
    background-color: rgba(var(--brand-color2), 0.75);
    color: white;
}

.alert-brand {
    color: rgba(var(--brand-color2), 1.0);
    background-color: rgba(var(--brand-color2), 0.1);
    border: 1px solid rgba(var(--brand-color2), 0.2);
    padding: 24px;
}
.alert-brand-accent {
    color: rgba(var(--brand-accent), 1.0);
    background-color: #fff;
    border: 1px solid rgba(var(--brand-accent), 1.0);
}
.gradient {
    background-image: linear-gradient(to right, rgba(var(--brand-color2), 0.1), white, white)
}

.btn-brand {
    color: rgba(var(--brand-color2), 1.0);
    background-color: rgba(var(--brand-color2), 0.1);
    border-color: rgba(var(--brand-color2), 0.1);
}

.btn-brand:hover {
    color: rgba(var(--brand-color2), 1.0);
    background-color: rgba(var(--brand-color2), 0.1);
    border-color: rgba(var(--brand-color2), 0.1);
}

.btn-brand:focus, .btn-brand.focus {
    color: rgba(var(--brand-color2), 1.0);
    background-color: rgba(var(--brand-color2), 0.1);
    border-color: rgba(var(--brand-color2), 0.2);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-color2), 0.2);
}

.btn-brand.disabled, .btn-brand:disabled {
    color: rgba(var(--brand-color2), 1.0);
    background-color: rgba(var(--brand-color2), 0.1);
    border-color: rgba(var(--brand-color2), 0.1);
}

.btn-brand:not(:disabled):not(.disabled):active, .btn-brand:not(:disabled):not(.disabled).active,
.show > .btn-brand.dropdown-toggle {
    color: rgba(var(--brand-color2), 1.0);
    background-color: rgba(var(--brand-color2), 0.2);
    border-color: rgba(var(--brand-color2), 0.2);
}

.btn-brand:not(:disabled):not(.disabled):active:focus, .btn-brand:not(:disabled):not(.disabled).active:focus,
.show > .btn-brand.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-color2), 0.2);
}

.brand-background {
    background-color: rgba(var(--sr-accent-color), 1.0);
    color: #ffffff;
}

/*register and ticket pages styles*/

.page-header-card {
    min-height: 175px;
}

.guest-header-card {
    min-height: 175px;
}

.myevents-header-card {
    min-height: 50px;
}

.event-header-img {
    height: auto;
    max-height: 300px;
    max-width: 50%;
}

.org-header-img {
    height: auto;
    max-height: 175px;
    max-width: 50%;
}

.linked-event-img {
    border-radius: 4px;
    height: auto;
    width: 35%;
}

.register-date-badge {
    background-color: inherit;
    border: 1px solid rgba(var(--brand-accent), 1.0);
    color: rgba(var(--brand-accent), 1.0);
    min-width: 30px;
    padding: 5px;
}

.register-date {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: lighter;
}


/*events page styles*/


.events-date-badge {
    background-color: inherit;
    border: 1px solid rgba(var(--brand-accent), 1.0);
    color: rgba(var(--brand-accent), 1.0);
    min-width: 25px;
    padding: 5px;
}

.events-date {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: lighter;
}

.events-event-card:hover {
    background: #fff !important;
    border: 1px solid #936fa3;
    -moz-box-shadow: #46354f;
    -webkit-box-shadow: #46354f;
    box-shadow: 0 0.5rem 1rem #46354f !important;
}

.events-feature-title {
    font-size: 2vw;
}

.events-feature-card:hover {
    background-image: linear-gradient(to right, rgba(var(--brand-color2), 0.1), white, white);
    border: 1px solid rgba(var(--brand-color2), 0.2);
    -moz-box-shadow: 0 0 2px rgba(var(--brand-color2), 0.2);
    -webkit-box-shadow: 0 0 2px rgba(var(--brand-color2), 0.2);
    box-shadow: 0 1rem 2rem rgba(var(--brand-color2), 0.2) !important;
}

.events-feature-img {
    height: auto;
    max-width: 50%;
}

.events-feature-link {
    position: absolute;
    bottom: 10%;
    right: 5%;
}
.events-filter-bar {
    border: 0;
    border-radius: 4px;
}

.events-filter-bar > .btn-link.dropdown-toggle:focus {
    box-shadow: 0 0 0 0;
}

.events-filter-row {
    background-color: white;
    border: 1px solid rgba(var(--brand-color2), 0.2);
    padding: 0;
}

.events-filter-badge {
    border: 1px solid rgba(var(--brand-accent), 0.5);
    background-color: inherit;
    color: rgba(var(--brand-accent, 1.0));
    border-radius: 0;
}

.linked-events-card:hover {
    background: #fff !important;
    border: 1px solid rgba(var(--brand-color2), 0.2);
    -moz-box-shadow: 0 0 2px rgba(var(--brand-color2), 0.2);
    -webkit-box-shadow: 0 0 2px rgba(var(--brand-color2), 0.2);
    box-shadow: 0 1rem 2rem rgba(var(--brand-color2), 0.2) !important;
}
.toast-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}
.toast-img {
    width: 20px;
    height: 20px;
}

.badge-brand {
    color: #fff;
    background-color: rgba(var(--brand-accent, 1.0));
}

.text-error {
    padding-top: 100px;
    padding-bottom: 300px;
    text-align: center;
    color: #fff;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 20px;
    z-index: 10;
    color: #ffffff;
    padding-bottom: 30px;
    padding-left: 20px;
    background-color: rgba(70,53,79,0.5);
}
.carousel-caption p {
    bottom: 0;
    padding-bottom: 0;
}
/*.carousel-caption h1 {
    font-size:4vw;
}*/

.caption-container {
    background-color: #ffffff;
}
/* Declare heights because of positioning of img element */
.carousel-item {
    height: 60vh;
    background-color: rgba(0, 0, 0, 0.02);
}
.carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}
.marketing h2 {
    font-weight: 400;
}
.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
    border-top: 1px solid #936fa3;
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
}

/*small screen styles*/

@media screen and (max-width: 768px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
    }
    .event-title {
        font-size: 1.5em;
    }

    .events-feature-title {
        font-size: 1.5em;
    }
    .register-date-badge {
        min-width: 20px;
        padding: 5px;
    }

    .register-date {
        font-size: 1.2rem;
        font-style: normal;
        font-weight: lighter;
    }

    .teaser-text {margin-bottom: 2px;}

    .gradient {
        background-image: linear-gradient(rgba(var(--brand-color2), 0.2), white, white);
    }
    .events-feature-card:hover {
        background-image: linear-gradient(rgba(var(--brand-color2), 0.2), white, white);
        border: solid 1px;
        -moz-box-shadow: 0 0 3px rgba(var(--brand-color2), 0.2);
        -webkit-box-shadow: 0 0 3px rgba(var(--brand-color2), 0.2);
        box-shadow: 0 1rem 2rem rgba(var(--brand-color2), 0.2) !important;
    }

    .page-header-card:hover {
        background-image: linear-gradient(rgba(var(--brand-color2), 0.1), white, white);
        border: 1px solid rgba(var(--brand-color2), 0.2);
        -moz-box-shadow: 0 0 2px rgba(var(--brand-color2), 0.2);
        -webkit-box-shadow: 0 0 2px rgba(var(--brand-color2), 0.2);
        box-shadow: 0 1rem 2rem rgba(var(--brand-color2), 0.2) !important;
    }

    .event-header-img {
        height: auto;
        width: 100%;
    }

    .org-header-img {
        height: auto;
        width: 100%;
    }
    .carousel-item {
        height: 35vh;
        background-color: rgba(0, 0, 0, 0.02);
    }

    .carousel-caption h1 {
        font-size: 6vw;
    }

}




/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {


    .featurette-heading {
        font-size: 50px;
    }

}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 1rem;
    }

}

.pricing-header {
    max-width: 700px;
}

.card-deck .card {
    min-width: 220px;
}

.rotate:hover  {
    transform: scale(1.15) rotate(-1.25deg);
    -webkit-transform: scale(1.15) rotate(-1.25deg);
    -moz-transform: scale(1.15) rotate(-1.25deg);
    -ms-transform: scale(1.15) rotate(-1.25deg);
    -o-transform: scale(1.15) rotate(-1.25deg);
}
.container-buffer {
    margin-top: 125px
}