/**** TABLE OF CONTENTS
*---GLOBAL
*---Homepage
*---Navagation
*/


/*************************
GLOBAL
*************************/

/* Button Corrections | need to update in the scss file | */
/* TODO: Also make sure the font is a variable so if it changes in the future I only need to change it in one place */

.btn {
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: 500;
}


/*************************
Homepage banner
*************************/
/* adjusting the size to be a little bigger so its proportional with other elements*/

/* TODO 
* Rename this file so its clear that this is the custom file that takes priority
*/
.carousel-inner > .item .wrapper {
    max-width: 1350px;
    margin: auto;
}

.carousel-caption .btn.btn-primary {
    border: 1px solid #2b2b2b;
}

/* use nested styles to scope styling */
/* Stick to Variables */
.homepage-banner {
    .btn-default {
        background-color: #FFF;
        border-color: #FFF;
        font-weight: normal;
        color: var(--primary-text, #2b2b2b);
    }
    .btn-default:hover, .btn-default:focus, .btn-default:active {
        background-color: var(--color-palette-light-gray, #777777);
        border-color: var(--color-palette-light-gray, #777777);
        color: #FFF;
    }
    .btn-default:hover use, .btn-default:focus use, .btn-default:active use {
        stroke: #fff;
        fill: #fff;
    }
    .btn-default use {
        stroke: var(--primary-text, #2b2b2b);
        fill: var(--primary-text, #2b2b2b);
    }
    
    .btn-primary {
        background-color: var(--secondary-button, #2b2b2b);
        border-color: var(--secondary-button, #2b2b2b);
        color: #fff;
        font-weight: normal;
    }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--color-palette-light-gray, #777777);
        border-color: var(--color-palette-light-gray, #777777);
        color: #fff;
    }
    .btn-primary:hover use, .btn-primary:focus use, .btn-primary:active use {
        stroke: #fff;
        fill: #fff;
    }
    .btn-primary use {
        stroke: #fff;
        fill: #fff;
    }
}

/* Temp for max width on homepage */
.max-width1360 {
	max-width: 1360px;
    margin: 0px auto;
}

.story-banner .btn-primary, .story-cards .btn-primary {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

/* Correct Button Style */



/*************************
Navagation
*************************/

/* TODO 
 * Replace the Font with a variable 
 * Look into changing the text size and should also be a variable...
*/
.dropdown-toggle p.ng-binding {
    font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 18.2px !important;
	margin-bottom: 0px !important;
}



.dem-staging {
    display: none;
}