#showThanks{}
*{padding: 0; margin: 0; box-sizing: border-box; font-family: sans-serif;}
body{width: 100vw; min-height: 100vh;
background-image: url("../btl-img/american-flag-history-neighborhood.jpeg");
background-size: cover; background-position: top left;
background-repeat: no-repeat; float: left;
}
#bg-overlay{min-width: 100vw; min-height: 100vh; background-color: rgba(255,255,255, .7); float: left;}
h1{font-size: 34pt;} h2{font-size: 28pt;} h3{font-size: 22pt;}
h4{font-size: 16pt;} p, li, a{font-size: 14pt;}

/*--------HEADER FOOTER FOR ALL PAGES start--------------*/
hgroup{min-width: 50%; float: left;}
h1{width: 100%;line-height: ; min-height: ; text-transform: uppercase; background-color: ; float: left;}
h1 span{text-transform:none;font-weight: 200; color: #9f0103; float: ;}
h3{width: 100%; float: left;}
header{width: 100%; min-height: 50px; padding:10px ; background-color: white; float: left; position: relative;}
footer{width: 100%; min-height: 50px; padding: 10px; background-color: black; color: white; text-align: center; float: left;}
/*--------end of HEADER FOOTER FOR ALL PAGES--------------*/
/*--------MAIN NAVIGATION FOR ALL PAGES start--------------*/
#mobileMainNavInput, #mobileMainNavLabel, #cart-iconInput{display: none;}

#cart h3{font-size: 19pt;}
#cart h4{font-size: 14pt;}
#cart-iconInput{float: right;}
#cart-icon{
        min-width: 70px; height: 50px;
        padding: 5px 10px; border-radius: 5px; margin: 0px ;
        list-style-type: none; text-align: center; line-height: 30px; font-size: 14pt; background-color: #9f0103; color: white; display: flex; align-items: center; align-content: center; justify-content: center;
        float: right;}
#cart-icon img{width: auto; height: calc(100% - 0px);}

#cart{float: right; clear: both; display: none;}

#cart-iconInput:checked~#cart{display: inline-block;} 
#cart-iconInput:checked~#cartBlur{display: inline-block;} 

#main-nav{min-width: 240px; min-height: 50px; margin-top: 10px; border-top: 1px dashed #000;  background-color:; float: right;}
#main-nav-ul{min-height: 50px; float: left;}
#main-nav-ul a{color: #9f0103; text-decoration: none; float: left;}
#main-nav-ul li{min-width: 120px; height: 50px; padding: 10px; margin: 0px 5px; background-color: ; list-style-type: none; display: flex; align-items: center; justify-content: center;}
#main-nav-ul a li:hover {background-color: black; border-radius:0px 0px 5px 5px;}

/*--------end of MAIN NAVIGATION FOR ALL PAGES--------------*/


.main-context{width: 100%; min-height: 300px; padding: 35.0px 12.5% 25.0px 12.5%; float: left;}

.heading-context{width: 75vw; margin-bottom: 20px; border-top: 7.5px solid black; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: rgba(159,1,3,.0); color: ; background-image: linear-gradient(to right, rgba(255,255,255,.1) 0%, white 37.50% , white 50% , white 62.50% , rgba(255,255,255,.1) 100%); float: left;}

.note-p{margin: 10px;}
.note-p span{color: #9f0103; font-weight: ;}

/*firearms-accessories_CLASSES_AND_FIREARMS PAGE STYLING start*/

.products{width: 100%; float: left; display: flex; flex-direction: row;align-content: space-around; align-items: flex-start; flex-wrap: wrap;}
.a-product{width: 240px; height: auto;
    margin-top: 3.36%; margin-bottom: 3.36%; margin-left: calc((100% - (240px * 3)) / 6); margin-right: calc((100% - (240px * 3)) / 6); border-radius: 5px; display: flex; flex-direction: column; justify-content: center; float: left;}

.a-product p{background-color: /*rgba(200,10,99,.90)*/;}

.product-section{width: 100%; min-height: 50px; text-align: center; /*border-bottom: 1px solid black;*/ display: flex; flex-direction: column; justify-content: center; float: left; background-color: rgba(255,255,255,.75);
}

.product-h{background-color: ; color: black; border-top: 2.5px solid black;}
.product-img{width: 100%; min-height: 240px; color: blue; background-color: white;}
.product-img img{min-width: calc(100% - 10px); min-height: 230px; margin: 5px;}

.product-info-descripts{background-color:; display: flex; flex-direction: row; float: left;}
.product-quick-descript, .product-price{width: calc(100% - 35px); min-height: 50px; padding: 10px; font-size: 12pt; text-align: center; display: flex; flex-direction: column; justify-content: center; background-color: ; float: left;}
.product-price{padding-left: 45px; display: flex; flex-direction: row; align-items: center;}
.product-price-price {

}
.product-addXToCart{background-color:#9f0103; display: flex; flex-direction: row; float: ;}
.product-qtyToAdd{width: 35px; height: 50px; padding: 2.5px; margin: ; font-size: 12pt; color: white; background-color: inherit; border: none; float: ;}

.product-addToCart{width: calc(100% - 35px); min-height: 50px; font-size: 12pt; color: white; background-color: inherit; display: flex; flex-direction: row; justify-content: center; align-items: center; float: left; border: 0px; padding-right: 35px;}
.product-addXToCart:hover{background-color:#202020;}
.product-addToCart:active {border-top: 5px solid #fff; border-right: 5px solid #fff; border-bottom: 5px solid #fff;}
.product-addXToCart:active .product-qtyToAdd{border-top: 5px solid #fff; border-bottom: 5px solid #fff; border-left: 5px solid #fff;}

.product-infoButtonHiddenInput{float: left; display: none;}

.product-infoButton{width: 25.0px; height: 25.0px; margin: 10px 10px 10px 0px;
    font-size: 13.5pt; text-align: center; display: flex; flex-direction: column; justify-content: center; align-content: center;
    background-color: white; color: black; border-radius:50px; border: solid 1px black; float: left;}
.product-infoButton:hover{color: #9f0103; cursor:pointer;}

.product-infoButton:before{content: "i";}
.product-infoButton::before{content: "i";}
.product-infoButton:checked{content: "x";}
.product-infoButton:checked{content: "x";}
            
/**think product-info was for these input and label revealing of this element for holding the table extra info on the item before it was changed to javascript onclick function window modal*/
.product-info{min-width: 240px; width: 100%; min-height: 50px; padding: 10px; text-align: left; color: white; background-color: /*#9f0103*/ black; clear: left; display: none;}
#product1-infoButtonInput:checked ~ #product1-info{display: flex; flex-direction: column; justify-content: center;}
#product2-infoButtonInput:checked ~ #product2-info{display: flex; flex-direction: column; justify-content: center;}
#product3-infoButtonInput:checked ~ #product3-info{display: flex; flex-direction: column; justify-content: center;}
#product4-infoButtonInput:checked ~ #product4-info{display: flex; flex-direction: column; justify-content: center;}
#product4-infoButtonInput:checked ~ .product-infoButton:before{content: "x";}


tr{width: 100%; min-height: 50px; background-color: ; display: flex; flex-direction: row;}
.product-characteristic{width: 80px; min-height: 50px; height: 100%; padding: 2.5px; background-color: ; display: flex; flex-direction: column; text-align: center; justify-content: flex-start; align-items: ;}
.product-characteristic-details{width: calc(100% - 80px); min-height: 50px; padding: 5px; background-color: ; display: flex; flex-direction: column; text-align: ; justify-content:flex-start; box-sizing: border-box;}
/*----------------NAV-----------------------*/
#mobileMainNavInputForm, #mobileMainNavLabelForm{margin: 0px 10px 10px 10px; display: none;}
#main-nav-form{min-width: 100%; min-height: 50px; padding: ; margin-bottom: 10px; border-top: 1px dashed #000; float: right; display: none;}
#main-nav-ul-form{width: 100%; min-height: 50px; float: left; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
#main-nav-ul-form a{width: calc(25% - 8px); margin: 0px 1px; color: #9f0103; text-decoration: none; float: left;}
#main-nav-ul-form li{min-width: 50px; max-width: 100%; height: 60px; padding: 10px; font-size: 12pt; list-style-type: none; text-align: center; display: flex; align-items: center; justify-content: center;}
#main-nav-ul-form a li:hover {background-color: black; border-radius:0px 0px 5px 5px;}


/* CONTACT_INFO PAGE STYLING*/
#contact-section{display: ; flex-direction: ; justify-content:space-around;}
.contact-info{min-width: 150px; height: 50px; padding: 10px; margin: 5px 5px 10px 5px; border-radius: 5px; text-decoration: none; color: white; background-color: #9f0103; float: left; display: flex; align-items: center; justify-content: center; text-align: center;}
.contact-info:hover{background-color: black;}
.h3-contacts{font-size: 20pt;}
#form-contact-number{margin-top: -7px;}
#form-contact-number:before{content: "(313) 718-2291";}
#form-contact-number::before{content: "(313) 718-2291";}
#form-contact-e-mail{margin-top: -7px; margin-bottom: 10px;}
#form-contact-e-mail:before{content: "ccwgunclass@gmail.com";}
#form-contact-e-mail::before{content: "ccwgunclass@gmail.com";}
.h-of-o-p{margin-top: -5px;}
#contact-e-m:after{content: "Download Contact Info VCard";}
#contact-e-m::after{content: "Download Contact Info VCard";}

#srvs-form{width: 100vw; height: 100vh; padding: 100px; background-color: rgba(255,255,255,.975); float: left; position: fixed; top: 0; left: 0; display: none;}
#reset-close-srv-form{width: 50px; height: 50px; color: white; background-color: #9f0103; border: 0; float: right; position: ; top: 10px; right: 10px;}
#reset-close-srv-form:hover{background-color: black;}
#form-instruct-note{font-size: 11pt; color: #9f0103;}
/* end of CONTACT_INFO PAGE STYLING*/

/*---------------PRODUCTS-MORE-INFO-STYLING-------*/
#main-context-gal{width: 100%; height:100vh; min-height: 300px; padding: 15.0px 12.5% 25.0px 12.5%; background-color: rgba(255,255,255,.975); position: fixed; top: 0; left: 0; float: left; display: ; overflow: auto; overflow-y: ; z-index:100;
-ms-overflow-style: none; scrollbar-width: 15px;}
#main-context-gal::-webkit-scrollbar {display: none;}

#reset-close-products-gal{width: 50px; height: 50px; color: white; background-color: #9f0103; border: 0; float: right; position: fixed; top: 10px; right: 10px;}
#reset-close-products-gal:hover{background-color: black;}

.heading-context-gal{width: 75vw; margin-bottom: 20px; border-top: 2.5px solid black; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-image: linear-gradient(to right, rgba(255,255,255,.1) 0%, white 37.50% , white 50% , white 62.50% , rgba(255,255,255,.1) 100%); float: left;}

.page-heading-gal{padding: 7.5px; margin-top: 10px 10px 0px 10px; float: left;} 
#product-name-gal{width: 100%; float: left;}

.products-gal{width: 100%; float: left; display: flex; flex-direction: row; justify-content: space-around; align-content: space-around; align-items: flex-start; flex-wrap: wrap;}

.a-product-gal{width: 100%; min-width: 240px; height: auto; position: relative;
    margin: 0px 0px 3.36% 0px; border-radius: 5px;  display: flex; flex-direction: column; justify-content: center; overflow: hidden; float: left;}

.a-product-gal p{background-color: /*rgba(200,10,99,.90)*/;}

.product-section-gal{width: 100%; min-height: 50px; text-align: center; border-bottom: 1px solid black; display: flex; flex-direction: column; justify-content: center; float: left; background-color: rgba(255,255,255,.75);
}
.product-img-gal{width: 100%; height: auto; min-height: 240px; color: blue; background-color:white; display: flex; flex-direction: row; align-content: center;}
.product-img-gal img{width: 62.50%; min-width: 230px; height: auto; margin: 5px; border: ;}

.product-icons-img-gal{width: 100%; min-height: 50px; text-align: center; border-bottom: 1px solid black; display: flex; flex-direction: row; flex-wrap: wrap; float: left; background-color: rgba(255,255,255,.75);
}/*use instead of .product-section-gal*/
#image-icons img{width: 100px; height: auto; float: left; margin: 7.50px 8.50px; border: 1px solid black;}#image-icons img:hover{border: 2px solid black;}

.product-info-descripts-gal{align-items: center; background-color:;}/*holds brief and table on product info*/
#product-brief-gal{background-color: ;}
.table-gal{width: 100%; float: left; color: white; background-color: black;}
.tr-gal{width: 100%; min-height: 25.0px;display: flex; flex-direction: row;}
.product-characteristic-gal{width: 40%; min-width: 80px; min-height: 25.0px; height: 100%;
    padding: 5px 2.5px; display: flex; flex-direction: column; text-align: center; align-items: center; font-weight: bold;}/*row names*/
.product-characteristic-details-gal{width: 60%; min-width: ; min-height: 25.0px; padding: 5px; display: flex; flex-direction: column; text-align: left;}/*row details*/

#product-brief-gal{padding-top: 7.5px; padding-bottom: 7.5px;}
/*---------END-OF-PRODUCTS-MORE-INFO-STYLING-------*/

/*----------RESPONSIVE MEDIA QUERIES below-------*/
@media only screen and (min-width: 601px) and (max-width: 899px){
    #srvs-form{padding: 50.0px 125.0px;}
}/*for srv-form only*/

@media only screen and (min-width: 1288px){
    .products{justify-content:flex-start;}
    .a-product{margin-left: calc((100% - (240px * 4)) / 8); margin-right: calc((100% - (240px * 4)) / 8);}
}/*good*/
@media only screen and (min-width: 644px) and (max-width: 966px ) {
    .a-product{margin: 10px calc(((100% / 2) - 240px) / 2); }
    .a-product-gal{margin: 0px calc(((100% / 2) - 240px) / 2); }
}/*was 639 min-w good*/
@media only screen and (min-width: 121px) and (max-width: 643px){
    /*--MOBILE FOR ALL PAGES start---*/
    h1 {min-width: 20%; float: left;}
    .main-context{padding: 35.0px 7.5% 25.0px 7.5%;}
    .heading-context{width: 100%;}  
    .page-heading-gal{width: 100%;} 
    .heading-context-gal{width: 100%;} 
    #main-context-gal{padding: 35px 7.5% 25px 7.5%; min-height: 100vh; height: 100%;}
    body{position: ;}
    
    /*--MOBILE FOR ALL PAGES start---*/
    /*--------MOBILE MAIN NAVIGATION FOR ALL PAGES start---------*/ 
    #mobileMainNavInput{display: none;}
    #mobileMainNavLabel{list-style-type: none; float: right;}
    #mobileMainNavLabel label{
        min-width: 60px; min-height: 30px;
        padding: 5px; border-radius: 5px;
        margin: 10px 0px 0px 0px ;
        list-style-type: none; text-align: center; line-height: 30px; font-size: 30pt; 
        background-color: #9f0103; color: white;
        float: right;}
    #mobileMainNavLabel label:hover{background-color: black;} 
    #main-nav{min-width: 100%;}
    #main-nav-ul{width: 100%; margin-top: 10px; border: 1px dashed black; border-radius: 0px 0px 5px 5px; background-color: black; display: none;}
    #main-nav-ul a{width: 100%; color: #9f0103; text-decoration: none;}
    #main-nav-ul li{width: 100%; margin: 0px;}
    #main-nav-ul a li:hover{color: black; background-color: white;}
   
    #mobileMainNavLabel{display: block;} 
    #mobileMainNavInput:checked~#main-nav-ul{display: block;} 
    
    #cart-icon{height: 40px; margin: 10px 10px 0px 10px; float: right;}
/*--------end of MOBILE MAIN NAVIGATION FOR ALL PAGES--------------*/
    
    /*--------MOBILE FIREARM PRODUCTS PAGE start---------*/ 
    .a-product{margin: 10px calc((100% - 240px) / 2);}
    .product-section{width: 100%; }
    
    .a-product-gal{margin: 0px calc((100% - 240px) / 2);}
    .product-section-gal{width: 100%; } 
    #image-icons img{width: 62.50px; margin: 7.50px 8.50px;}
    
    /*--------MOBILE CONTACT FORM start---------*/ 
    #srvs-form{padding: 5px 3.0px; margin-top: ;}
    #top-content{margin-top: 0px;}
    
    #mobileMainNavInputForm{display: none;}
    #mobileMainNavLabelForm{list-style-type: none; float: right;}
    #mobileMainNavLabelForm label{
        min-width: 60px; min-height: 30px;
        padding: 5px; border-radius: 5px; margin: 10px 0px 0px 0px ;
        list-style-type: none; text-align: center; line-height: 30px; font-size: 30pt; background-color: #9f0103; color: white;
        float: right;}
    #mobileMainNavLabelForm label:hover{background-color: black;} 
    #main-nav-form{min-width: 100%; background-color: ;}
    #main-nav-ul-form{width: 100%; min-height: 50px; margin-top: 10px;
        border: 1px dashed black; border-radius: 0px 0px 5px 5px; background-color: black; display: none;}
    #main-nav-ul-form a{width: 100%; color: #9f0103; text-decoration: none;}
    #main-nav-ul-form li{width: 100%; margin: 0px;}
    #main-nav-ul-form a li:hover{color: black; background-color: white;}
   
    #mobileMainNavLabelForm{display: block;} 
    #mobileMainNavInputForm:checked~#main-nav-ul-form{display: block;} 
}/*was 240 min-w 600max-w*/

@media only screen and (min-width: 10px) and (max-width: 43px ) {/*was 638 max-w*/

 
    main-context-gal{visibility: hidden; display: flex; flex-direction: column; align-items: center;}/*watches too*/    
}