a{
    font-family: 'Orbitron', sans-serif;
}
h1, h2, h3, h4, h5{
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
}
h5{
    text-align: center;
}
h1, h2{
    font-size: calc(1.5rem + 1.5vw);
}
h2{
    font-size: calc(1.375rem + 1.5vw);
}
#hidden-hr{
    display: none;
}
legend{
    float: none !important;
    width: 15rem;
    text-align: center;
    font-size: 2.5rem;
}
html {
    scroll-padding-top: 1em; /* height of sticky header */
}
/* fieldset{
    max-width: 300px;
    min-width: 300px;
} */
.gold-text{
    background-image: linear-gradient(
	to right,
	#462523 0,
    #cb9b51 22%, 
	#f6e27a 45%,
	#f6f2c0 50%,
	#f6e27a 55%,
	#cb9b51 78%,
	#462523 100%
	);
    color:transparent;
    -webkit-background-clip:text;
    background-clip: text;
}
.gold-border{
    border-color: #462523;
    border-radius: 0.25rem;
    border: 1px solid;
}
.logo{
    width: auto;
    height: 4em;
}     
.centerNav{
    margin-left: -2.5em;
}
.call {
    width: 200px;
    font-family: 'Asap', sans-serif;
    font-size: x-large;
    margin-right: 1em;
    color: #3a3a3aea;
}   
.callus{
    display: none;
    font-family: 'Asap', sans-serif;
    color: #3a3a3aea;
}
.grid{
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
}
.itemDesc {
    font-size: 18px; font-family: 'Asap', sans-serif;
    padding-top: 5%;
}
.addOnDesc{
    margin-top: 3rem;
}
.loc {
    font-family: 'Asap', sans-serif;
    text-align: center;
    padding: 2em 0;
    font-weight: bold;
    display: inline-block;
    width: 300px;            
    margin: auto;
}
.price{
    /* display: inline-block; */
    font-family: 'Asap', sans-serif;
    font-weight: bold;
    font-size: 3em;
    font-style: italic;
    margin-top: -3rem;
}
.oneWayDesc{
    text-align: center;
}
.disc{
    color: gray;
}
.priceGrid {
    width: 50%;
    margin-top: 1em;
    display: grid;
    grid-template-columns: 0.8fr 0.1fr 0.8fr;
    grid-template-rows: 0.3fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "costWithout sep costWith"
        "without . with";
}

.without { grid-area: without; }

.with { grid-area: with; }

.costWithout { grid-area: costWithout; }

.costWith { grid-area: costWith; }

.sep { 
    grid-area: sep;
}
.sep span {
    font-family: 'Asap', sans-serif;
    font-weight: bold;
    font-size: 3em;
    color: gray;
}
div li, div p{
    font-family: 'Asap', sans-serif;
}

/*
    TESTING CSS
*/
.product
{
    display: block;
    float: left;
}
.detail-header{
    text-align: center;
}
.product-text{
    display: inline-block;
    width: 100%;
    margin: auto;
}
.product-text h2{
    text-align: center;
}
.product-text div{
    margin:auto;
    width: 75%;
}
/* .remote{
    margin-top: -4rem;
} */
/* .product.desc{
    text-align: left;
    width: 66%;
} */
.oos{
    background-color: #c3c3c3;
}
#mobile_burger{
    display: none;
}
#mobile_number { display: none; }   /* hide it elsewhere */
#number{ display: block; }

@media (min-width:1201px) and (max-width:1400px) {
    .product
    {
        display: inline-block;
        /*margin-top: 20px;*/
        margin-bottom: 20px;
        /* width: 300px; */
        /* margin-left: 3em; */
    }
    .product.desc{
        text-align: left;
        width: 60%;
    }
    .itemDesc
    {
        padding-top: 2em;
        margin:0;
    }
    .oneWayDesc{
        text-align: left;
    }
    .price{
        font-size: 2em;
        padding: 0;
    }
    .priceGrid{
        padding-bottom: 1em;
    }
    .sep span {
        font-family: 'Asap', sans-serif;
        font-weight: bold;
        font-size: 2em;
    }
    .hideMobile{
        width: 30%;
    }
    .featMobile{
        width: 70%;
    }
}

@media (min-width:1025px) and (max-width:1200px) {
    .nav-link {
        font-size: 1rem !important;
    }
    .product
    {
        display: inline-block;
        /* margin-top: 20px; */
        margin-bottom: 20px;
        /* width: 300px; */
        /* margin-left: 3em; */
    }
    .product.desc{
        text-align: left;
        width: 55%;
    }
    .itemDesc
    {
        padding-top: 1em;
        margin:0;
    }
    .oneWayDesc{
        text-align: left;
    }
    .price{
        font-size: 2em;
        padding: 0;
    }
    .priceGrid{
        padding-bottom: 1em;
    }
    .sep span {
        font-family: 'Asap', sans-serif;
        font-weight: bold;
        font-size: 2em;
    }
    .hideMobile{
        width: 36%;
    }
    .featMobile{
        width: 64%;
    }
    .call {
        margin: 0;
    }
}

/* @media (min-width:992px) and (max-width:1024px) {
    .nav-link {
        font-size: 1rem !important;
    }
    .call{
        margin-left: 3em;
        font-size: 1.25rem;
    }
    .centerNav{
        margin: 0;
    }
    fieldset{
        min-width: 0px;
    }
    .product{
        display: inline-block;
        width: 300px;
        margin-left: 0;
        margin: auto;
    }
    .product.desc{
        width: 80%;
        margin: auto;
    }
    .itemDesc
    {
        padding-top: .8em;
        margin:0;
    }
    .price{
        text-align: center;
        font-size: 1.5em;
        padding: 0;
        margin: 0;
    }
    .sep span {
        font-family: 'Asap', sans-serif;
        font-weight: bold;
        font-size: 1.5em;
    }
    .priceGrid{
        margin: auto;
        width: 100%;
    }
    .hideMobile{
        display: none;
    }
    .featMobile{
        width: 100%;
    }
    .featBtn{
        width: 100%;
        margin: auto;
        margin-bottom: 1em;
    }
} */
@media (min-width:768px) and (max-width:1024px) {
    .nav-link {
        font-size: 1rem !important;
    }
    .call{
        margin-left: 3em;
        font-size: 1.25rem;
    }
    /* .callus{
        display: block;
        margin-left: 3em;
        font-size: 1.25rem;
    } */
    .centerNav{
        margin: 0;
    }
    fieldset{
        min-width: 0px;
    }
    .product{
        display: inline-block;
        /* width: 50%; */
        margin-left: 0;
        /* margin: auto; */
    }
    .product.desc{
        width: 80%;
        margin: auto;
    }
    .itemDesc
    {
        padding-top: .8em;
        margin:0;
    }
    .oneWayDesc{
        text-align: left;
    }
    .price{
        text-align: center;
        font-size: 1.5em;
        padding: 0;
        margin-top: -2.5rem;
    }
    .sep span {
        font-family: 'Asap', sans-serif;
        font-weight: bold;
        font-size: 1.5em;
    }
    .priceGrid{
        margin: auto;
        width: 100%;
    }
    .hideMobile{
        display: none;
    }
    .featMobile{
        width: 100%;
    }
    /* checking btn css stuff */
    .featBtn{
        /* width: 100%; */
        margin: auto;
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 0px) and (max-width: 992px) {
    #mobile_number { display: block; }  /* show it on small screens */
    #number{ display: none; }
    #tablet_burger{
        display: block;
    }
}
@media screen and (min-width: 992px) and (max-width: 1400px) {
    #mobile_number { display: none; }   /* hide it elsewhere */
    #number{ display: block; }
}

@media (min-width:576px) and (max-width: 768px) {
    .logo{
        width: auto;
        height: 2em;
    }
    .call {
        margin: 0;
    }
    /* .callus{
        display: block;
    } */
    .centerNav{
        margin: 0;
    }
    fieldset{
        min-width: 0px;
    }
    .product{
        display: inline-block;
        /* width: 50%; */
        margin-left: 0;
        /* margin: auto; */
    }
    .product.desc{
        width: 80%;
        margin: auto;
    }
    .itemDesc
    {
        padding-top: .8em;
        margin:0;
    }
    .oneWayDesc{
        text-align: left;
    }
    .addOnDesc{
        margin-top: 1rem;
    }
    .price{
        text-align: center;
        font-size: 1.5em;
        padding: 0;
        margin-top: -1.5rem;
    }
    .priceGrid{
        margin: auto;
        width: 100%;
    }
    .sep span{
        font-size: 1.5em;
    }
    .hideMobile{
        display: none;
    }
    .featMobile{
        width: 100%;
    }
    .featBtn{
        font-size: 0.75em;
        /* width: 100%; */
        margin: auto;
        margin-bottom: 1em;
    }
    a.featBtn{
        width: 100%;
    }
}

@media (min-width:481px) and (max-width: 576px) {
    .logo{
        width: auto;
        height: 2em;
    }
    .call {
        margin: 0;
    }
    /* .callus{
        display: block;
    } */
    .centerNav{
        margin: 0;
    }
    fieldset{
        min-width: 0px;
    }
    .product{
        display: inline-block;
        margin-left: 0;
        /* margin: auto; */
    }
    .remote{
        width: 50%;
    }
    .product.desc{
        width: 80%;
        margin: auto;
    }
    .itemDesc
    {
        padding-top: .8em;
        margin:0;
    }
    .addOnDesc{
        margin-top: 1rem;
    }
    .oneWayDesc{
        text-align: left;
    }
    .price{
        text-align: center;
        font-size: 1.5em;
        padding: 0;
        margin-top: -1.5rem;
    }
    .priceGrid{
        margin: auto;
        width: 100%;
    }
    .sep span{
        font-size: 1.5em;
    }
    .hideMobile{
        display: none;
    }
    .featMobile{
        width: 100%;
    }
    .featBtn{
        font-size: 0.75em;
        /* width: 100%; */
        margin: auto;
        margin-bottom: 1em;
    }
    a.featBtn{
        width: 100%;
    }
}

@media (max-width: 480px) {
    #hidden-hr{
        display: block;
        height: .75rem;
        width: 100%;
        color: white;
        /* color: #198754; */
        opacity: .5;
        margin-bottom: 3rem;
    }
    /* .navbar-brand{
        margin: auto;
    } */
    .logo{
        width: auto;
        height: 2em;
    }
    .call{
        margin: auto;
        text-align: center;
        display: none;
    }
    .callus{
        text-align: center;
        display: block;
    }
    .centerNav{
        margin: 0;
    }
    fieldset{
        min-width: 0px;
    }
    .product{
        display: inline-block;
        /* width: 100%; */
        margin-left: 0;
        /* margin: auto; */
        float: none;
    }
    .product.desc{
        width: 80%;
        margin: auto;
    }
    .itemDesc
    {
        padding-top: .8em;
        margin:0;
    }
    .addOnDesc{
        margin-top: 1rem;
    }
    .oneWayDesc{
        text-align: left;
    }
    .price{
        text-align: center;
        font-size: 1.5em;
        padding: 0;
        margin-top: -2rem;
    }
    .priceGrid{
        margin: auto;
        width: 100%;
    }
    .sep span{
        font-size: 1.5em;
        padding-left: .5em;
    }
    .hideMobile{
        display: none;
    }
    .featMobile{
        width: 100%;
    }
    .featBtn{
        font-size: 0.75em;
        margin: 1em 0;
        width: 100%;
    }
}

@media screen and (min-width: 0px) and (max-width: 308px) {
    #mobile_burger{
        display: block;
    }
    #tablet_burger{
        display: none;
    }
    .price{
        text-align: center;
        font-size: 1.5em;
        padding: 0;
        margin-top: -1.5rem;
    }
}