*{padding: 0; margin: 0; height: ; float: 0; clear: 0; font-family: sans-serif;}

body{background-color: #456; color: #def;}

#screens{
    width: 100vw;
    height: auto;
    min-height: ;
    background-color:;
}

{background-color: #abc #def #123 #456}

/*can you do at max-w calc screen(-)max then /2=padding
now can you do this in js to get the w of an item and (-)
to be exact and not rely on queries individually fixed one for less and higher than 1280px or any px other than that else */

.margin-container-body{
    margin: auto; 
    background-color:  ;
}               
#heading-nav{
    width: 100%;
    height: auto;
    padding-top: 12.5px;
    padding-bottom: 12.5px;
    box-sizing: border-box;
    color: #def;
    background-color: ;
    position: relative;
    float: left;
}

#footing-nav{
    width: 100%;
    height: auto;
    min-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 12.5px;
    padding-bottom: 12.5px;
    box-sizing: border-box;
    background-color: #930 ;
    position: relative;
    float: left;
}
#footing-nav ul{
    margin: 10px 20px;
    display: inline-block;
    float: left;
}

#footing-nav p{
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color:;
    box-sizing: border-box;
    float: left;
}

#main-second-nav{
    
}

#main-second-nav li{
    /*display: inline-block;
    margin: 20px 10px;*/
}

#logo-icon{
    min-width: 40px;
    width: 12.5%;
    padding-top: 12.5%;
    max-width: 80px;
    min-height: 40px;
    height: 100%;
    max-height: 80px;
    margin-right: 5px;
    box-sizing: border-box;
    background-color: #930;
    position: relative;
    float: left;
}
#logo-icon img{height: auto; width: 100%; margin:1px; position: absolute; top: 0; left: ;}

#nav-icon{
    min-width: 40px;
    width: 12.5%;
    max-width: 80px;
    padding-top:12.5%;
    min-height: 40px;
    max-height: 80px;
    box-sizing: border-box;
    background-color: #930;
    border-radius: 5px;
    position: relative;
    float: right;
}
#nav-icon img{height: auto; width: 100%; position: absolute; top: 0; left: 0;}


.marg-auto{}

header{
    min-width: 320px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    padding: 10px;
    background-color: ;
    float: left;
}

header h1{border-bottom: 1px solid #930;}

#sub-pg-header{
    min-width: 320px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    padding: 10px;
    background-color: ;
    text-align: center;
    position: /*relative*/;
    float: right;
}

#sub-pg-header>h2{margin-top: 15px; margin-left: 25px;}
#sub-pg-header>h3{margin-top: 20px; margin-left: 30px;}

#adjust-body-for-screen-calc{
    width: 100%;
    height: auto;
    max-width: 1280px;
    padding: 25px 0px;
    box-sizing: border-box;
    background-color: ;
    float: left;
}

.half-mob-size{
    width: 158px;
    height: 198px;
    margin: 10px calc((100% - 632px)/8);
    overflow: ;
    background-color:;
    float: left;
}
.half-mob-size div{border-radius: 5px;}

.half-mob-size:hover{background-color: #935;}
.half-mob-size img{height: 100%; width: auto; margin: auto; align-content: center;background-color: #def;}
.half-mob-size img:hover{opacity: .8;}

.img-holder{
    width: 100%;
    height: 158px;
    background-color: grey;
    float: left;
}

.text-caption-holder{
    width: 100%;
    height: 40px;
    padding: 7.5px;
    text-align: center;
    box-sizing: border-box;
    background-color: ;
    float: left;
}

#counter-holder{
    width: 100%;
    height: auto;
    padding-left: calc((100% - 640px) / 2);/*still works for all/mob for 0/2=0*/
    padding-right: calc((100% - 640px) / 2);
    padding-top: 25px;
    padding-bottom: 25px;
    box-sizing: border-box;
    text-align: center;
    background-color: #abc;
    float: left;
}
#counter-resize{
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 320px;
    border: 5px solid #392; /*try to get greens 442 342 362 392 for neon green*/
    margin-bottom: 10px;
    text-align: center;
    box-sizing: border-box;
    background-color: ;
    float: left;
}
#counter-title{font-size: 2.5em; color: #930;}
#counter-context{background-color: ; text-align: center; margin: 10px; float: left;}

#tier{width: 100%; height: auto; margin: auto; float: left;}
.promo-tier{
    width: 160px;
    min-height: 40px;
    padding: 7.5px;
    margin: 10px calc((100% - 480px) / 6);
    text-align: center;
    box-sizing: border-box;
    border-radius: 5px;
    background: linear-gradient(to right, #456, #930); 
    float: left;
}

#tier-one{
    border: 5px solid #392; /*greens 692 592 442 342 362 392 for neon green*/
}
#tier-one:hover{
    background-color: rgba(43,138,27,.5);
}
#tier-two{
    border: 5px solid #4169e1; /*blues 442 342 362 392 for neon blue*/
}
#tier-two:hover{
    background-color: rgba(50,79,217,.5); /*blues 442 342 362 392 for neon blue*/
}
#tier-tre{
    border: 5px solid #ff0000; /*reds ff100a ff0000 502 602 702 802 902 for neon red*/
}
#tier-tre:hover{
    background-color: rgba(245,0,6,.5); /*reds ff100a ff0000 502 602 702 802 902 for neon red*/
}
/*--------------------DESKTOP MONITORS-----------------------------------------------*/

@media only screen and (min-width:1281px) and (max-width: 2600px){
    .margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
        margin-left: calc((100vw - 1280px)/ 2);
        margin-right: calc((100vw - 1280px)/ 2);
    }

}

/*---------------------LAPTOP---------------------------------------------------*/

@media only screen and (min-width:960px) and (max-width: 1279px){
    .margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
        margin-left: calc((100vw - 960px)/ 2);
        margin-right: calc((100vw - 960px)/ 2);
    }
}

/*--------------------TABLET----------------------------------------------------*/

@media only screen and (min-width:640px) and (max-width: 959px){
    .margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
        margin-left: calc((100vw - 640px)/ 2);
        margin-right: calc((100vw - 640px)/ 2);
    }

}

/*--------------------MOBILE----------------------------------------------------*/

@media only screen and (min-width:320px) and (max-width: 639px){
    .margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
        margin-left: calc((100vw - 320px)/ 2);
        margin-right: calc((100vw - 320px)/ 2);
    }
    
    #sub-pg-header{
    text-align: left;
    }

    #sub-pg-header>h2{margin-top: 7.5px; margin-left: 5px;}

    .half-mob-size{
        margin: 1px;
    }
    
    #counter-context{text-align: left;}
    
    .promo-tier{margin: 10px calc((100% - 160px) / 2); clear: both;}
}