/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
 background-color: #333;
}


/* brown bar at top of page */
.bg-gold {
    margin: 0 auto;
    background-color: #A06E20;
    font-size: 21px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    clear: both;
}

.bg-gold ul {
    padding: 10px 0;
    margin: 0 auto;
}

.bg-gold ul li {
    color: #fff;
    text-transform: uppercase;
    display: inline;
   padding: 5px; 50px; 
}

/* CTA for top of page */

.jumbotron {
    padding-top: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#333333+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(51,51,51,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(51,51,51,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(51,51,51,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00333333', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.jumbotron .display-3 {
    font-size: 1.5em;
    font-weight: 600;
    color: #fff;
    padding-top: 5%;
}

.jumbotron .circles {
    margin-top: 5%;
}

.jumbotron .circles img {
    margin-top: 20px;
}


/* offer section withe discount code and table */


/* instant $10 off box floating right */

#offer .instantOffer {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 20px;
    margin-top: 10%;
}

#offer .instantOffer p.save {
    color: #AAA;
    font-size: 14px;
}

#offer .instantOffer p.disclaimer {
    color: #AAA;
    font-size: 12px;
    padding-right: 10px;
}

#offer .instantOffer p.h4 {
    color: #A06E20;
    font-weight: 600;
    font size: 36px !important;
    text-align: center;
}

#offer .instantOffer p.h4 span {
    display: block;
    font-size: 36px;
    font-weight: 800;
}


#offer h2 {
    font-size: 1.3em;
    font-weight: 800;
    color: #A06E20;
}

 #offer table.detail {
     background-color: #fff;
     border-radius: 0px 0px 10px 10px;
     margin-top: 0;
     padding-top: 0;
}

#offer table.detail td {
    padding-left: 20px;
}


#offer table.header {
     background-color: #fff;
     border-radius: 10px 10px 0 0;
    margin-top: 30px;
    margin-bottom: 0;
    padding-bottom: 0;
} 

#offer table.header p.lead {
    color: #AAA;
     font-size: 16px;
}

#offer table.header td, #offer table.header th {
	border-top: none !important;
}

footer {
    background-color: #12171A;
}



@media (min-width: 576px) { ... }


@media (min-width: 768px) { 
    
    /* fix size of headline for larger devices */
        .jumbotron .display-3 {
            font-size: 2.5em;
            font-weight: 600;
            color: #fff;
            padding-top: 5%;
        }

         .jumbotron .circles {
            margin-top: 5%;
            background: url("website-home.jpg") no-repeat center bottom;
        }
    
        .jumbotron img.call, .jumbotron img.share {
            position: absolute;
            bottom: 20%;
        }

        .jumbotron img.text {

        }

        .jumbotron img.email {
            margin-top: 20px;
        }
    
    
        #offer h2 {
            font-size: 2.5em;
            font-weight: 800;
            color: #A06E20;
        }
    
        #offer table.header p.lead {
        color: #AAA;
            font-size: 18px;
        }

    
}


@media (min-width: 992px) { 

         #offer .instantOffer {
            background-color: #fff;
            border-radius: 10px;
            padding: 20px 20px;
            margin-top: -10%;
            margin-right: 10%;
        }
    

}


@media (min-width: 1200px) { 
        
    .jumbotron .display-3 {
    font-size: 2.5em;
    font-weight: 600;
    color: #fff;
    padding-top: 5%;
        margin-left: 10%;
        margin-right: 10%;
}
}