.lineBreak{
width:100%;
float:left;  
background-color:black;
height:3px;
}

/* -- CONTENT JUSTIFICATION START --*/

/* --
put these in your  divs to dictate
how child elemnts will be justified
-- */
.center-content{
text-align:center;
}

.left-justify-content{
text-align:left;
}

.right-justify-content{
text-align:right;
}
/* -- CONTENT JUSTIFICATION END --*/

/* -- PADDING -- */
/* -- 
Be careful how you use these; 
text should be fine but remember .cont-XX_XX, .child-XX_XX are
100/70/66/50/33/30/20/10 so you must account for that
or blocks wont flow right 

**remember .respWrp !

-- */

.pad_0-5{
padding:.5rem;
}

.pad_1{
padding:1rem;
}

.pad_2{
padding:2rem;
}

.pad_3{
padding:3rem;
}

.padLeft_0-5{
padding-left:.5rem;	
}

.padLeft_1{
padding-left:1rem;	
}

.padLeft_2{
padding-left:2rem;	
}

.padLeft_3{
padding-left:3rem;	
}

.padRight_0-5{
padding-right:.5rem;	
}

.padRight_1{
padding-right:1rem;	
}

.padRight_2{
padding-right:2rem;	
}

.padRight_3{
padding-right:3rem;	
}

.padTop_0-5{
padding-top:.5rem;	
}

.padTop_1{
padding-top:1rem;	
}

.padTop_2{
padding-top:2rem;	
}

.padTop_3{
padding-top:3rem;	
}

.padBottom_0-5{
padding-bottom:.5rem;	
}

.padBottom_1{
padding-bottom:1rem;	
}

.padBottom_2{
padding-bottom:2rem;	
}

.padBottom_3{
padding-bottom:3rem;	
}

.padTopBot_0-5{
padding-top:.5rem;
padding-bottom:.5rem;	
}

.padTopBot_1{
padding-top:1rem;
padding-bottom:1rem;	
}

.padTopBot_2{
padding-top:2rem;
padding-bottom:2rem;	
}

.padTopBot_3{
padding-top:3rem;
padding-bottom:3rem;	
}

.padLeftRight_0-5{
padding-left:.5rem;
padding-right:.5rem;	
}

.padLeftRight_1{
padding-left:1rem;
padding-right:1rem;	
}

.padLeftRight_2{
padding-left:2rem;
padding-right:2rem;	
}

.padLeftRight_3{
padding-left:3rem;
padding-right:3rem;	
}

/* -- MARGINS -- */
/* -- Be careful how you use these; 
text should be fine but remember .cont-XX_XX, .child-XX_XX are
100/70/66/50/33/30/20/10 so you must account for that
or blocks wont flow right -- */

.margin_0{
margin:0;
}

.margin_0-5{
margin:.5rem;
}

.margin_1{
margin:1rem;
}

.margin_2{
margin:2rem;
}

.margin_3{
margin:3rem;
}

.marginLeft_0{
margin:0;
}

.marginLeft_0-5{
margin-left:.5rem;
}

.marginLeft_1{
margin-left:1rem;	
}

.marginLeft_2{
margin-left:2rem;	
}

.marginLeft_3{
margin-left:3rem;	
}

.marginRight_0{
margin:0;
}

.marginRight_0-5{
margin-right:.5rem;
}

.marginRight_1{
margin-right:1rem;	
}

.marginRight_2{
margin-right:2rem;	
}

.marginRight_3{
margin-right:3rem;	
}

.marginTop_0{
margin:0;
}

.marginTop_0-5{
margin-top:.5rem;
}

.marginTop_1{
margin-top:1rem;	
}

.marginTop_2{
margin-top:2rem;	
}

.marginTop_3{
margin-top:3rem;	
}

.marginBottom_0{
margin:0;
}

.marginBottom_0-5{
margin-bottom:.5rem;
}

.marginBottom_1{
margin-bottom:1rem;	
}

.marginBottom_2{
margin-bottom:2rem;	
}

.marginBottom_3{
margin-bottom:3rem;	
}

.marginTopBot_0{
margin-top:0;
margin-bottom:0;	
}

.marginTopBot_0-5{
margin-top:.5rem;
margin-bottom:.5rem;
}

.marginTopBot_1{
margin-top:1rem;
margin-bottom:1rem;	
}

.marginTopBot_2{
margin-top:2rem;
margin-bottom:2rem;	
}

.marginTopBot_3{
margin-top:3rem;
margin-bottom:3rem;	
}

.marginLeftRight_0{
margin-left:0;
margin-right:0;
}

.marginLeftRight_0-5{
margin-left:.5rem;
margin-right:.5rem;
}

.marginLeftRight_1{
margin-left:1rem;
margin-right:1rem;	
}

.marginLeftRight_2{
margin-left:2rem;
margin-right:2rem;	
}

.marginLeftRight_3{
margin-left:3rem;
margin-right:3rem;	
}


/* -- 
RESPONSIVE BLOCKS 

These % ratios are starter ratios but
you can tweak them to your liking 
and needs.

margin:0; is used to "butt together" blocks
as this removes the annoying inherent margin
between the divs

Be care when using the margin and padding
class styles in the html tag; you may cause
box flow errors

one example of how to use .elem-100_100 and .marginTopBot_1:

<div class="elem-100_100 marginTopBot_1"

the order is important as class elem-100_100 has margin:0;	
and class .marginTopBot_1 creates margins of 1rem both top and bottom,
thus since it is read last, it will overide the margin:0;

.cont-xxxx  can be used for the parent .container class
.child-xxxx  can be used for children div's .container class

***THESE ARE BASED ON 2 media states!!!!
screen size is wider than 575px
screen size width is less than 575px

QUICK EXAMPLE:

<div class="container cont-100_100">

    <div class="child-100_100">
       ...
    </div>

    <div class="child-50_100">
       ...
    </div>

    <div class="child-50_100">
       ...
    </div>

</div>

will look like this on desktop
(screen size is bigger than 575px)
--------------------------------------
| ---------------------------------- |
| |                                | |
| |                                | |
| |          child-100_100         | |
| |                                | |
| ---------------------------------- |
| ---------------------------------- |
| |               | |              | |
| |     50_100    | |   50_100     | |
| |               | |              | |
| ---------------------------------- |
--------------------------------------

and on mobile
(screen size width is less than 575px)
--------------------------
| ---------------------- |
| |                    | |
| |   child-100_100    | |
| |                    | |
| |                    | |
| ---------------------- |
| ----------- ---------- |
| |         | |        | |
| | 50_100  | | 50_100 | |
| |         | |        | |
| ----------- ---------- |
--------------------------
--*/

/* -- RESPONSIVE BLOCKS --*/
/* --
.cont- are for containers
.child- are for child elements in the container div

.cont-XX_XX and .child-XX_XX breakpoints:

the first XX is for screen > 992px
the second XX is for screen < 576px

.cont-XX_XX_XX and .child-XX_XX_XX breakpoints:
the first XX is for screen > 992px
the second XX is for   993 < screen < 575px
the third XX is for screen < 576px
-- */

/* -- 100_XX -- */
.cont-100_100, .child-100_100{
width:100%;
float:left;
margin:0;	
}

.cont-100_90, .child-100_90{
width:100%;
float:left;
margin:0;	
}

.cont-100_80, .child-100_80{
width:100%;
float:left;
margin:0;	
}

.cont-100_75, .child-100_75{
width:100%;
float:left;
margin:0;	
}

.cont-100_70, .child-100_70{
width:100%;
float:left;
margin:0;	
}

.cont-100_66, .child-100_66{
width:100%;
float:left;
margin:0;	
}

.cont-100_60, .child-100_60{
width:100%;
float:left;
margin:0;	
}

.cont-100_50, .child-100_50{
width:100%;
float:left;
margin:0;	
}

.cont-100_40, .child-100_40{
width:100%;
float:left;
margin:0;	
}

.cont-100_33, .child-100_33{
width:100%;
float:left;
margin:0;	
}

.cont-100_30, .child-100_30{
width:100%;
float:left;
margin:0;	
}

.cont-100_25, .child-100_25{
width:100%;
float:left;
margin:0;	
}

.cont-100_20, .child-100_20{
width:100%;
float:left;
margin:0;	
}

.cont-100_10, .child-100_10{
width:100%;
float:left;
margin:0;	
}

/* -- 75_XX -- */
.cont-75_100, .child-75_100{
width:75%;
float:left;
margin:0;	
}

/* -- 50_XX -- */
.cont-50_100, .child-50_100{
width:50%;
float:left;
margin:0;	
}

.cont-50_50, .child-50_50{
width:50%;
float:left;
margin:0;	
}

.cont-50_25, .child-50_25{
width:50%;
float:left;
margin:0;	
}

/* -- 33_XX -- */
.cont-33_100, .child-33_100{
width:33%;
float:left;
margin:0;	
}

/* -- 25_XX -- */
.cont-25_100, .child-25_100{
width:25%;
float:left;
margin:0;	
}

/* -- 100_XX_XX -- */
.cont-100_50_50, .child-100_50_50{
width:100%;
float:left;
margin:0;	
}

.cont-100_50_25, .child-100_50_25{
width:100%;
float:left;
margin:0;	
}

/* -- 50_XX_XX -- */
.cont-50_100_100, .child-50_100_100{
width:50%;
float:left;
margin:0;	
}

.cont-50_100_100, .child-50_100_100{
width:50%;
float:left;
margin:0;	
}

.cont-50_50_100, .child-50_50_100{
width:50%;
float:left;
margin:0;	
}

/* -- 33_XX_XX -- */
.cont-33_100_100, .child-33_100_100{
width:33%;
float:left;
margin:0;	
}

.cont-33_33_100, .child-33_33_100{
width:33%;
float:left;
margin:0;	
}


/* -- 25_XX_XX -- */
.cont-25_100_100, .child-25_100_100{
width:25%;
float:left;
margin:0;	
}

.cont-25_50_100, .child-25_50_100{
width:25%;
float:left;
margin:0;	
}

.cont-25_50_50, .child-25_50_50{
width:25%;
float:left;
margin:0;	
}

.cont-25_25_50, .child-25_25_50{
width:25%;
float:left;
margin:0;	
}


/* -- STANDARD NON-RESPONSIVE BLOCK WIDTHS  --*/
/* -- 
if you use these, they will remain the same
no matter what screen width you are using 
-- */

.cont-100, .child-100{
width:100%;
float:left;
margin:0;	
}

.cont-90, .child-90{
width:90%;
float:left;
margin:0;	
}

.cont-80, .child-80{
width:80%;
float:left;
margin:0;	
}

.cont-75, .child-75{
width:75%;
float:left;
margin:0;	
}

.cont-70, .child-70{
width:70%;
float:left;
margin:0;	
}

.cont-66, .child-66{
width:66%;
float:left;
margin:0;	
}

.cont-60, .child-60{
width:60%;
float:left;
margin:0;	
}

.cont-50, .child-50{
width:50%;
float:left;
margin:0;	
}

.cont-40, .child-40{
width:40%;
float:left;
margin:0;	
}

.cont-33, .child-33{
width:33%;
float:left;
margin:0;	
}

.cont-30, .child-30{
width:30%;
float:left;
margin:0;	
}

.cont-20, .child-20{
width:20%;
float:left;
margin:0;	
}

.cont-12-5, .child-12-5{
width:12.5%;
float:left;
margin:0;	
}

.cont-10, .child-10{
width:10%;
float:left;
margin:0;	
}

/* -- ******************************************************** -- */
/* -- ********************** MEDIA QUERY ********************* -- */
@media screen and (min-width: 576px) and (max-width: 992px){

/* -- RESPONSIVE BLOCKS --*/
.cont-100_100, .child-100_100{
width:100%;
float:left;
margin:0;	
}

.cont-100_90, .child-100_90{
width:100%;
float:left;
margin:0;	
}

.cont-100_80, .child-100_80{
width:100%;
float:left;
margin:0;	
}

.cont-100_75, .child-100_75{
width:100%;
float:left;
margin:0;	
}

.cont-100_70, .child-100_70{
width:100%;
float:left;
margin:0;	
}

.cont-100_66, .child-100_66{
width:100%;
float:left;
margin:0;	
}

.cont-100_60, .child-100_60{
width:100%;
float:left;
margin:0;	
}

.cont-100_50, .child-100_50{
width:100%;
float:left;
margin:0;	
}

.cont-100_40, .child-100_40{
width:100%;
float:left;
margin:0;	
}

.cont-100_33, .child-100_33{
width:100%;
float:left;
margin:0;	
}

.cont-100_30, .child-100_30{
width:100%;
float:left;
margin:0;	
}

.cont-100_25, .child-100_25{
width:100%;
float:left;
margin:0;	
}

.cont-100_20, .child-100_20{
width:100%;
float:left;
margin:0;	
}

.cont-100_10, .child-100_10{
width:100%;
float:left;
margin:0;	
}

/* -- 75_XX -- */
.cont-75_100, .child-75_100{
width:75%;
float:left;
margin:0;	
}

/* -- 50_XX -- */
.cont-50_100, .child-50_100{
width:50%;
float:left;
margin:0;	
}

.cont-50_50, .child-50_50{
width:50%;
float:left;
margin:0;	
}

.cont-50_25, .child-50_25{
width:50%;
float:left;
margin:0;	
}

/* -- 33_XX -- */
.cont-33_100, .child-33_100{
width:33%;
float:left;
margin:0;	
}

/* -- 25_XX -- */
.cont-25_100, .child-25_100{
width:25%;
float:left;
margin:0;	
}


/* -- 100_XX_XX -- */
.cont-100_50_50, .child-100_50_50{
width:50%;
float:left;
margin:0;	
}

.cont-100_50_25, .child-100_50_25{
width:50%;
float:left;
margin:0;	
}

/* -- 50_XX_XX -- */
.cont-50_100_100, .child-50_100_100{
width:100%;
float:left;
margin:0;	
}

.cont-50_50_100, .child-50_50_100{
width:50%;
float:left;
margin:0;	
}

/* -- 33_XX_XX -- */
.cont-33_100_100, .child-33_100_100{
width:100%;
float:left;
margin:0;	
}

.cont-33_33_100, .child-33_33_100{
width:33%;
float:left;
margin:0;	
}

/* -- 25_XX_XX -- */
.cont-25_100_100, .child-25_100_100{
width:100%;
float:left;
margin:0;	
}

.cont-25_50_100, .child-25_50_100{
width:50%;
float:left;
margin:0;	
}

.cont-25_50_50, .child-25_50_50{
width:50%;
float:left;
margin:0;	
}

.cont-25_25_50, .child-25_25_50{
width:25%;
float:left;
margin:0;	
}

}

/* -- ******************************************************** -- */
/* -- ********************** MEDIA QUERY ********************* -- */
@media screen and (max-width: 575px){


/* -- RESPONSIVE BLOCKS --*/
.cont-100_100, .child-100_100{
width:100%;
float:left;
margin:0;	
}

.cont-100_90, .child-100_90{
width:90%;
float:left;
margin:0;	
}

.cont-100_80, .child-100_80{
width:80%;
float:left;
margin:0;	
}

.cont-100_75, .child-100_75{
width:75%;
float:left;
margin:0;	
}

.cont-100_70, .child-100_70{
width:70%;
float:left;
margin:0;	
}

.cont-100_66, .child-100_66{
width:66%;
float:left;
margin:0;	
}

.cont-100_60, .child-100_60{
width:60%;
float:left;
margin:0;	
}

.cont-100_50, .child-100_50{
width:50%;
float:left;
margin:0;	
}

.cont-100_40, .child-100_40{
width:40%;
float:left;
margin:0;	
}

.cont-100_33, .child-100_33{
width:33%;
float:left;
margin:0;	
}

.cont-100_30, .child-100_30{
width:30%;
float:left;
margin:0;	
}

.cont-100_25, .child-100_25{
width:25%;
float:left;
margin:0;	
}

.cont-100_20, .child-100_20{
width:20%;
float:left;
margin:0;	
}

.cont-100_10, .child-100_10{
width:10%;
float:left;
margin:0;	
}

/* -- 75_XX -- */
.cont-75_100, .child-75_100{
width:100%;
float:left;
margin:0;	
}

/* -- 50_XX -- */
.cont-50_100, .child-50_100{
width:100%;
float:left;
margin:0;	
}

.cont-50_50, .child-50_50{
width:50%;
float:left;
margin:0;	
}

.cont-50_25, .child-50_25{
width:25%;
float:left;
margin:0;	
}

/* -- 33_XX -- */
.cont-33_100, .child-33_100{
width:100%;
float:left;
margin:0;	
}

/* -- 25_XX -- */
.cont-25_100, .child-25_100{
width:100%;
float:left;
margin:0;	
}

/* -- 100_XX_XX -- */
.cont-100_50_50, .child-100_50_50{
width:50%;
float:left;
margin:0;	
}

.cont-100_50_25, .child-100_50_25{
width:25%;
float:left;
margin:0;	
}

/* -- 50_XX_XX -- */
.cont-50_100_100, .child-50_100_100{
width:100%;
float:left;
margin:0;	
}

.cont-50_50_100, .child-50_50_100{
width:100%;
float:left;
margin:0;	
}

/* -- 33_XX_XX -- */
.cont-33_100_100, .child-33_100_100{
width:100%;
float:left;
margin:0;	
}

.cont-33_33_100, .child-33_33_100{
width:100%;
float:left;
margin:0;	
}

/* -- 25_XX_XX -- */
.cont-25_100_100, .child-25_100_100{
width:100%;
float:left;
margin:0;	
}

.cont-25_50_100, .child-25_50_100{
width:100%;
float:left;
margin:0;	
}

.cont-25_50_50, .child-25_50_50{
width:50%;
float:left;
margin:0;	
}

.cont-25_25_50, .child-25_25_50{
width:50%;
float:left;
margin:0;	
}


}