/**
 * Referenced often
 */

/** Mobile */
@media only screen and (max-width: 767px) {

    .chompzRedButton {
        padding: 10px 50px 10px 50px !important; /** prevent horizontal overflow */
    }
}

/** Tablet */
@media only screen and (max-width: 991px) {

    #mobileNav {
        display: flex !important;
    }
    #desktopNav {
        display: none;
    }
}

/** Desktop */
@media only screen and (min-width: 767px) {

}

.width100 {
    width: 100%;
}

.textCenter {
    text-align: center;
}

.textRight {
    text-align: right;
}
.textLeft {
    text-align: left;
}

.textShadow {
    text-shadow: 1px 1px 1px black;
}

.boxShadow {
    box-shadow: 2px 2px 5px black;
}

.noWrap {
    white-space: nowrap;
}

.bigCheck {
    height: 24px;
    width: 24px;
    margin-top: 5px;
}

.hoverPoint:hover {
    cursor: pointer;
}

.pad20 {
    padding: 20px;
}
.pad30 {
    padding: 30px;
}
.pad40 {
    padding: 40px;
}

.chompzWhite {
    color: white !important;
}
.chompzWhiteBg {
    background-color: white;
}

.chompzGray {
    /*color: #C3C6C8;*/
    color: #E0E0E0;
}
.chompzGrayBg {
    /*background-color: #C3C6C8;*/
    background-color: #E0E0E0;
}

.chompzRed {
    color: #B80000;
}
.chompzRedBg {
    background-color: #B80000;
}
.chompzRed:hover {
    color: #B80000;
}

.chompzYellow {
    color: #DADD00;
}
.chompzYellowBg {
    background-color: #DADD00;
}

.chompzDark {
    color: #1A1C20;
}
.chompzDarkBg {
    background-color: #1A1C20;
}

.chompzRedButton {
    background-color: #B80000;
    color: white !important;
    border: none;
    border-radius: 50px;
    padding: 10px 75px 10px 75px;
    font-weight: bold;
    white-space: nowrap;
}
.chompzRedButton:hover {
    background-color: darkred;
    cursor: pointer;
}

/*.chompzThickYellowUnderline {*/
    /*text-decoration-line: underline;*/
    /*text-decoration-style: solid;*/
    /*text-decoration-color: #DADD00;*/
    /*text-decoration-thickness: 30px;*/
/*}*/

.chompzThickYellowUnderline {
    background-size: 100px 40px;
    background-image: url('/images/yellow-block.png');
    background-position: bottom;
    background-repeat: repeat-x;
}

h1, h2, h3 {
    font-family: "protipo-compact", sans-serif;
    font-weight: 700;
    color: #2E2A2A;
    font-size: 110px;
}

p, a, div, span {
    font-family: "noto-sans", sans-serif;
    color: #2E2A2A;
}

.protipo {
    font-family: "protipo-compact", sans-serif;
}

.notoSans {
    font-family: "noto-sans, black", sans-serif;
}

.font18 {
    font-size: 18px;
}
.font36 {
    font-size: 36px;
}
.font48 {
    font-size: 48px !important;
}

/** change to font16?? */
.smallText {
    font-size: 16px;
}

#mobileNavItems td {
    padding: 10px;
}



/**
 * Baseplate
 */
html {
    scroll-behavior: smooth;
}

p, li, a, button, div, span, .btn {
    font-size: 28px;
}

a:hover {
    text-decoration: none;
}

footer {
    text-align: center !important;
    padding-top: 50px;
    background: lightslategray;
    width: 100%;
    min-height: 400px;
}

footer .vibrantWebDesign > a {
    font-weight: bold;
    color: white;
}

footer .vibrantWebDesign > a:hover {
    color: deeppink;
}

footer .row {
    min-height: 300px;
}

.modal-header {
    border-bottom: 0 none;
}

.modal-footer {
    border-top: 0 none;
}

.nav-link {
    font-size: 22px;
}
.nav-link:hover {
    color: #B80000;
    text-decoration-color: #B80000;
    text-decoration: underline;
}

.navbar-toggler:focus {
    outline: none;
}

.bolder {
    font-weight: bolder !important;
}

.displayNone {
    display: none;
}


/** Neon Hover */
a.neonHover {
    color: white;
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.neonHover:hover {
    cursor: pointer;
    color: #ffffff;
    -webkit-animation: neonHover 1.5s ease-in-out infinite alternate;
    -moz-animation: neonHover 1.5s ease-in-out infinite alternate;
    animation: neonHover 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes neonHover {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
    }
}
@-moz-keyframes neonHover {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
    }
}
@keyframes neonHover {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
    }
}