* {   /*RESET EVERYTHING*/
margin: 0;
padding: 0;
text-decoration: none;
}

body {
  line-height: 1.5; /*ASSIGNED INHERIT*/
  font-family: PoppinsRegular; /*ASSIGNED BASE FONT*/
  font-size: 16px; /*ASSIGNED BASE FONT SIZE*/    
}


/* DEV TEST TOOLS */  

.test   {
background: #c11;
}
.test-2   {
background: #bb1;
}
.test-3   {
background: #ebe;
}


.test-background-image  {
  background: url('1.jpeg');
  background-size: cover;

}


.test-background-image-2  {
  background: url('2.JPG');
  background-size: cover;

}

/*TEST THIS*/      

a {
  text-decoration: underline;
  color: inherit;
}
a:visited {
  text-decoration: none;
}



/*SITE-SPECIFIC ADDITIONS*/


.menu-button {
font-size: 1em;
}
.menu-button:hover {
background: #d7d7d7; 
}
.menu-button:hover b {
color: #090909;
}



.font-1em {

font-size: 1em;  

}


.font-1point5em {

font-size: 1.5em;  

}

.font-2em {

font-size: 2em;  

}

.font-5-vw {
  
font-size: 5vw;

}




/* DROPDOWN BUTTON jsfiddle.net/alsweeet/ycYg7/  */

#dd ul{
    display: none;
    position: relative;
    top: -100px;
    padding: 100px 0 0 0;
    margin: 0;
}
#dd:hover{
    display: flex; 
}
#dd ul:hover{
    display: block; 
}
#dd li{


    list-style: none;
}
#dd li:hover{ 

    cursor: pointer;
}
#mobile-menu-button{
    display: inline-block;


    color: white;
}
#dd{
    display: flex;

}
#dd:active ul{
    display: block;
} 
#dd:aactive ul:hover{
    display: block;
}
#dd:active #button{
    display: inline-block;


    color: white;
  display: block; 

} 

.hamburger-line {
 
background-color: #000;
height: 5px;


}


.cement {
  
background: url('cement-2.jpg');
}


.background-white-transparent {
background-color: rgba(255, 250, 250, 0.62)   /* red with opacity */  
}


a {
color: #000;
text-decoration: none;
} 

.underline a, .underline {

text-decoration: underline;  

} 


/*-----------UNIVERSAL AESTHETIC----------*/


/*PARAGRAPH LINES OVERFLOW JUSTIFY ETC*/  

.line-1 {  
  line-height: 1;
}
.line-1-point-5 {  
  line-height: 1.5;
}
.line-2 {  
  line-height: 2;
}

.overflow-hidden {  
overflow: hidden;  
}

.justify {    
  text-align: justify;
}

.word-break-normal {
    word-break: normal;
}
.word-break-keep-all {
    word-break: keep-all;
}
.word-break-none  {
    word-break: keep-none;
}

.overflow-wrap-break-word {
  overflow-wrap: break-word;
}
.overflow-wrap-normal {
  overflow-wrap: normal;
}
.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
}



/*BORDER SIZES AND STYLES*/ 
  
  
.border-none  {
  border-style: none;
}
.border-1 {
  border-width: 1px;
  border-style: solid;  
  }
.border-2 {
  border-width: 2px; 
  border-style: solid; 
  }
.border-3 {
  border-width: 3px;
  border-style: solid;  
  }
.border-4 {
  border-width: 4px;
  border-style: solid;  
  }
.border-5 {
  border-width: 5px;
  border-style: solid;    
  }         
  
.border-10 {
  border-width: 10px;
  border-style: solid;    
  }    

.border-radius-none {
  border-radius: 0px; /*none?*/
}
  
.border-radius-25, .border-radius /*inherit*/ {  
border-radius: 25px;  
}
.border-radius-10 {
border-radius: 10px; 
}
.border-radius-5 {
border-radius: 5px; 
}

/*FONT SIZES*/


.font-8 {
  font-size: 8px;  /*FONT-TINY*/
}
.font-12 {
  font-size: 12px;   /*FONT-SMALL*/
}
.font-16 {
  font-size: 16px;  /*FONT-NORMAL*/
}
.font-20 {
  font-size: 20px;  /*FONT-MEDIUM*/ 
}
.font-24 {
  font-size: 24px;  /*FONT-LARGE*/
}
.font-28 {
  font-size: 28px; 
}
.font-32 {
  font-size: 32px;  /*FONT-HUGE*/
}
.font-36 {
  font-size: 36px; 
}

/*ASSIGN H1 H2 ETC?*/


/*---------SITE SPECIFIC AESTHETIC-----------*/


/*FONT-FACE ASSIGNMENTS*/

@font-face {
font-family: PoppinsBlack;
src:url('Poppins-Black.ttf');
}
@font-face {
font-family: PoppinsBold;
src:url('Poppins-Bold.ttf');
}
@font-face {
font-family: PoppinsItalic;
src:url('Poppins-Italic.ttf');
}
@font-face {
font-family: PoppinsLight;
src:url('Poppins-Light.ttf');
}
@font-face {
font-family: PoppinsRegular;
src:url('Poppins-Regular.ttf');
}
@font-face {
font-family: PoppinsThin;
src:url('Poppins-Thin.ttf');  
}
.font-thick {
  font-family: PoppinsBlack;
}
.font-bold {
  font-family: PoppinsBold;
}
.font-italic {
  font-family: PoppinsItalic;
}
.font-light {
  font-family: PoppinsLight;
}
.font-regular {
  font-family: PoppinsRegular;
}
font-thin {
  font-family: PoppinsThin;
}



/*TEXT COLORS*/
.text-white {
  color: #fff;
}
.text-almost-white {
  color: #fbfbfb;
}
.text-black {
  color: #000;
}
.text-almost-black {
  color: #262626;
}
.text-dark-gray {
      color: #444444; 
}
.text-gray {
      color: #7d7d7d; 
}
.text-light-gray {
      color: #e8e8e8; 
}
.text-red {
  color: #b20000;
}
.text-blue {
  color: #4e87f8;
}
.text-green {
  color: #1e781e;
}
.text-yellow {
  color: #ffd943;
}                                  
.text-purple {
  color: #7e2d9b;
}


/*TEXT AND BOX SHADOWS AND EFFECTS*/


.text-shadow-white {
text-shadow: 2px 2px 5px #fff;  
}  
.text-shadow-black {
text-shadow: 2px 2px 5px #000;
}        


.box-shadow-white {
box-shadow: 2px 2px 5px #fff;  
}  
.box-shadow-black {
box-shadow: 2px 2px 5px #000;
}



/*BACKGROUND COLORS*/
.background-white {
  background: #fff;
}
.background-almost-white {
  background: #fbfbfb;
}
.background-black {
  background: #000;
}
.background-almost-black {
  background: #262626;
}
.background-dark-gray {
      background: #444444; 
}
.background-gray {
      background: #7d7d7d; 
}
.background-light-gray {
      background: #e8e8e8; 
}
.background-super-light-gray {
      background: #f3f3f3; 
}
.background-red {
  background: #b20000;
}
.background-blue {
  background: #4e87f8;
}
.background-green {
  background: #1e781e;
}
.background-yellow {
  background: #ffd943;
}                                  
.background-purple {
  background: #7e2d9b;
}



/*BORDER COLORS)*/
.border-white {
  border-color: #fff;
  
  }
.border-almost-white {
  border-color: #fbfbfb;
  
  }
.border-black {
  border-color: #000;
  
  }
.border-almost-black {
  border-color: #262626;
  
  }
.border-dark-gray {
  border-color: #444444;
         
}
.border-gray {
  border-color: #7d7d7d;
         
}
.border-light-gray {
  border-color: #e8e8e8;
         
}
.border-red {
  border-color: #b20000;
  
  }
.border-blue {
  border-color: #4e87f8;
  
  }
.border-green {
  border-color: #1e781e;
  
  }
.border-yellow {
  border-color: #ffd943;
  
  }                                  
.border-purple {
  border-color: #7e2d9b;
  
  } 
  
  


/* ----------------UNIVERSAL FUNCTIONAL--------------- */





/*FLEXBOXES - ROWS COLUMNS ALIGNS JUSTIFYS FLEXES GAPS*/

.row {
  display: flex;
  flex-direction: row;
}
.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}   
.column {
  display: flex;
  flex-direction: column;
}
.column-reverse {
  display: flex;
  flex-direction: column-reverse;
}
.align-start  {
  align-items: flex-start;
}
.align-center  {
  align-items: center;
}
.align-end  {
  align-items: flex-end;
}
.align-stretch  {
  align-items: stretch;
}
.justify-start  {
  justify-content: flex-start;
}
.justify-center  {
  justify-content: center;
}      
.justify-end  {
  justify-content: flex-end;
}
.justify-around {
  justify-content: space-around;
}  
.justify-between  {
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.gap-5  {
  gap: 5px;
}
.gap-10  {
  gap: 10px;
}
.gap-25, .gap /*inherit*/  {
  gap: 25px;
}
.gap-50  {
  gap: 50px;
}

/*PADS AND MARGINS*/

.pad-5  {
  padding: 5px;
}
.pad-10  {
  padding: 10px;
}
.pad-25, .pad /*inherit*/  {
  padding: 25px;
}
.pad-left-5  {
  padding-left: 5px;
}
.pad-left-10  {
  padding-left: 10px;
}
.pad-left-25, .pad-left /*inherit*/  {
  padding-left: 25px;
}
.pad-right-5  {
  padding-right: 5px;
}
.pad-right-10  {
  padding-right: 10px;
}
.pad-right-25, .pad-right /*inherit*/  {
  padding-right: 25px;
}
.pad-top-5  {
  padding-top: 5px;
}
.pad-top-10  {
  padding-top: 10px;
}
.pad-top-25, .pad-top /*inherit*/  {
  padding-top: 25px;
}
.pad-bottom-5  {
  padding-bottom: 5px;
}
.pad-bottom-10  {
  padding-bottom: 10px;
}
.pad-bottom-25, .pad-bottom /*inherit*/  {
  padding-bottom: 25px;
}
.margin-5  {
  margin: 5px;
}
.margin-10  {
  margin: 10px;
}
.margin-25, .margin /*inherit*/  {
  margin: 25px;
}
.margin-left-5  {
  margin-left: 5px;
}
.margin-left-10  {
  margin-left: 10px;
}
.margin-left-25, .margin-left /*inherit*/  {
  margin-left: 25px;
}
.margin-right-5  {
  margin-right: 5px;
}
.margin-right-10  {
  margin-right: 10px;
}
.margin-right-25, .margin-right /*inherit*/  {
  margin-right: 25px;
}
.margin-top-5  {
  margin-top: 5px;
}
.margin-top-10  {
  margin-top: 10px;
}
.margin-top-25, .margin-top /*inherit*/  {
  margin-top: 25px;
}
.margin-bottom-5  {
  margin-bottom: 5px;
}
.margin-bottom-10  {
  margin-bottom: 10px;
}
.margin-bottom-25, .margin-bottom /*inherit*/  {
  margin-bottom: 25px;
}

/*POSITIONS*/

.static {   /*position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page*/
  position: static;
}
.relative {  /*position: relative; positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.*/
  position: relative;
}
.absolute { /*position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).*/
  position: absolute;
}
.fixed { /*position: fixed; is positioned relative to the viewport, which means it always stays in the same place*/
  position: fixed;
}
.sticky-top /*position: sticky; is positioned based on the user's scroll position. You must specify at least one of top, right, bottom or left*/ {
  position: sticky;
  top: 0;
}
.sticky-bottom /*position: sticky; is positioned based on the user's scroll position. You must specify at least one of top, right, bottom or left*/ {
  position: sticky;
  bottom: 0;
}

/*Z-INDEXES*/

/*Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).*/

.z-index-1 {
z-index: 1;  
}
.z-index-2 {  
z-index: 2; 
}
.z-index-3 {  
z-index: 3; 
}
.z-index-negative-1 {
z-index: -1;  
}
.z-index-negative-2 {  
z-index: -2; 
}
.z-index-negative-3 {  
z-index: -3 
}

/*ROTATES*/

/*NOTE: AXIS UNDEFINED, CAN USE X OR Y */

.rotate-1 {
rotate: 1deg;
}
.rotate-2 {
rotate: 2deg;
}
.rotate-3 {
rotate: 3deg;
}
.rotate-negative-1 {
rotate: -1deg;
}
.rotate-negative-2 {
rotate: -2deg;
}
.rotate-negative-3 {
rotate: -3deg;
}


/*WIDTHS*/

      
.width-auto {
  width: auto; 
}

.width-100 {
  width: 100%;
}    
.width-62 {
  width: 62%;
}  
.width-75 {
  width: 75%;
}  
.width-50 {
  width: 50%;
}
.width-38 {
  width: 38%;
}
.width-25 {
  width: 25%;
}
.width-20 {
  width: 20%;
}
.width-10 {
  width: 10%;
}

.max-width-100 {
  width: 100%;
}    
.max-width-62 {
  width: 62%;
}  
.max-width-75 {
  width: 75%;
}  
.max-width-50 {
  width: 50%;
}
.max-width-38 {
  width: 38%;
}
.max-width-25 {
  width: 25%;
}
.max-width-20 {
  width: 20%;
}
.max-width-10 {
  width: 10%;
}
      

/*------------SITE-SPECIFIC FUNCTION, ASSIGNED MAX WIDTH ETC------------*/



.max-width-1080-px {
  max-width: 1080px; /*MAIN CONTENT MAX, THIS SHOULD BE BETWEEN TABLET AND DESKTOP*/
}


.max-width-1134-px {
  max-width: 1134px; /*MAIN CONTENT MAX, THIS SHOULD BE BETWEEN TABLET AND DESKTOP*/
}

.max-width-1400-px {
  max-width: 1400px; /*MAIN CONTENT MAX, THIS SHOULD BE BETWEEN TABLET AND DESKTOP*/
}


.min-height-200-px  {
  min-height: 200px;
}


/*---------DROP DOWN MENU FOR MOBILE jsfiddle.net/alsweeet/ycYg7/ --------- */

#dd ul {
    display: none;
    position: relative;
    top: -50px;
    padding: 50px 0 0 0;
    margin: 0;
}
#dd:hover {
    display: flex; 
}
#dd ul:hover {
    display: block; 
}
#dd li {
    list-style: none;
}
#dd li:hover { 
    cursor: pointer;
}
#mobile-menu-button {
    display: inline-block;
}
#dd {
    display: flex;
}
#dd:active ul {
    display: block;
} 
#dd:active ul:hover {
    display: block;
}
#dd:active {
    display: inline-block;
} 



/*------------VIEWPORTS, ADD HIDDEN FEATURE AND FUNCTIONAL UNIVERSALS / SITE SPECIFICS IF NEEDED-----------*/

@media only screen and (min-width: 1134px) {   

.desktop-hidden {
  display: none;
}


.desktop-border-none  {
  border-style: none;
}
.desktop-border-radius-none {
  border-radius: 0px; /*none?*/
}
/*FONT SIZES*/  /*make mobile font selections*/
.desktop-font-8 {
  font-size: 8px;  /*FONT-TINY*/
}
.desktop-font-12 {
  font-size: 12px;   /*FONT-SMALL*/
}
.desktop-font-16 {
  font-size: 16px;  /*FONT-NORMAL*/
}
.desktop-font-20 {
  font-size: 20px;  /*FONT-MEDIUM*/ 
}
.desktop-font-24 {
  font-size: 24px;  /*FONT-LARGE*/
}
.desktop-font-28 {
  font-size: 28px; 
}
.desktop-font-32 {
  font-size: 32px;  /*FONT-HUGE*/
}
.desktop-font-36 {
  font-size: 36px; 
}
/*FLEXBOXES - ROWS COLUMNS ALIGNS JUSTIFYS FLEXES GAPS*/
.desktop-row {
  display: flex;
  flex-direction: row;
}
.desktop-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}   
.desktop-column {
  display: flex;
  flex-direction: column;
}
.desktop-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}
.desktop-align-start  {
  align-items: flex-start;
}
.desktop-align-center  {
  align-items: center;
}
.desktop-align-end  {
  align-items: flex-end;
}
.desktop-align-stretch  {
  align-items: stretch;
}
.desktop-justify-start  {
  justify-content: flex-start;
}
.desktop-justify-center  {
  justify-content: center;
}      
.desktop-justify-end  {
  justify-content: flex-end;
}
.desktop-justify-around {
  justify-content: space-around;
}  
.desktop-justify-between  {
  justify-content: space-between;
}
.desktop-flex-1 {
  flex: 1;
}
.desktop-flex-2 {
  flex: 2;
}
.desktop-flex-3 {
  flex: 3;
}
.desktop-gap-5  {
  gap: 5px;
}
.desktop-gap-10  {
  gap: 10px;
}
.desktop-gap-25, .desktop-gap /*inherit*/  {
  gap: 25px;
}
.desktop-gap-50  {
  gap: 50px;
}
/*PADS AND MARGINS*/
.desktop-pad-5  {
  padding: 5px;
}
.desktop-pad-10  {
  padding: 10px;
}
.desktop-pad-25, .desktop-pad /*inherit*/  {
  padding: 25px;
}
.desktop-pad-left-5  {
  padding-left: 5px;
}
.desktop-pad-left-10  {
  padding-left: 10px;
}
.desktop-pad-left-25, .desktop-pad-left /*inherit*/  {
  padding-left: 25px;
}
.desktop-pad-right-5  {
  padding-right: 5px;
}
.desktop-pad-right-10  {
  padding-right: 10px;
}
.desktop-pad-right-25, .desktop-pad-right /*inherit*/  {
  padding-right: 25px;
}
.desktop-pad-top-5  {
  padding-top: 5px;
}
.desktop-pad-top-10  {
  padding-top: 10px;
}
.desktop-pad-top-25, .desktop-pad-top /*inherit*/  {
  padding-top: 25px;
}
.desktop-pad-bottom-5  {
  padding-bottom: 5px;
}
.desktop-pad-bottom-10  {
  padding-bottom: 10px;
}
.desktop-pad-bottom-25, .desktop-pad-bottom /*inherit*/  {
  padding-bottom: 25px;
}
.desktop-margin-5  {
  margin: 5px;
}
.desktop-margin-10  {
  margin: 10px;
}
.desktop-margin-25, .desktop-margin /*inherit*/  {
  margin: 25px;
}
.desktop-margin-left-5  {
  margin-left: 5px;
}
.desktop-margin-left-10  {
  margin-left: 10px;
}
.desktop-margin-left-25, .desktop-margin-left /*inherit*/  {
  margin-left: 25px;
}
.desktop-margin-right-5  {
  margin-right: 5px;
}
.desktop-margin-right-10  {
  margin-right: 10px;
}
.desktop-margin-right-25, .desktop-margin-right /*inherit*/  {
  margin-right: 25px;
}
.desktop-margin-top-5  {
  margin-top: 5px;
}
.desktop-margin-top-10  {
  margin-top: 10px;
}
.desktop-margin-top-25, .desktop-margin-top /*inherit*/  {
  margin-top: 25px;
}
.desktop-margin-bottom-5  {
  margin-bottom: 5px;
}
.desktop-margin-bottom-10  {
  margin-bottom: 10px;
}
.desktop-margin-bottom-25, .desktop-margin-bottom /*inherit*/  {
  margin-bottom: 25px;
}
/*WIDTHS*/
.desktop-width-auto {
  width: auto; 
}
.desktop-width-100 {
  width: 100%;
}    
.desktop-width-62 {
  width: 62%;
}  
.desktop-width-75 {
  width: 75%;
}  
.desktop-width-50 {
  width: 50%;
}
.desktop-width-38 {
  width: 38%;
}
.desktop-width-25 {
  width: 25%;
}
.desktop-width-20 {
  width: 20%;
}
.desktop-width-10 {
  width: 10%;
}
.desktop-max-width-100 {
  width: 100%;
}    
.desktop-max-width-62 {
  width: 62%;
}  
.desktop-max-width-75 {
  width: 75%;
}  
.desktop-max-width-50 {
  width: 50%;
}
.desktop-max-width-38 {
  width: 38%;
}
.desktop-max-width-25 {
  width: 25%;
}
.desktop-max-width-20 {
  width: 20%;
}
.desktop-max-width-10 {
  width: 10%;
}
    

}



@media only screen and (max-width: 1133px) and (min-width: 700px) { 
  
.tablet-hidden {
  display: none;
}

.tablet-border-none  {
  border-style: none;
}
.tablet-border-radius-none {
  border-radius: 0px; /*none?*/
}
/*FONT SIZES*/  /*make mobile font selections*/
.tablet-font-8 {
  font-size: 8px;  /*FONT-TINY*/
}
.tablet-font-12 {
  font-size: 12px;   /*FONT-SMALL*/
}
.tablet-font-16 {
  font-size: 16px;  /*FONT-NORMAL*/
}
.tablet-font-20 {
  font-size: 20px;  /*FONT-MEDIUM*/ 
}
.tablet-font-24 {
  font-size: 24px;  /*FONT-LARGE*/
}
.tablet-font-28 {
  font-size: 28px; 
}
.tablet-font-32 {
  font-size: 32px;  /*FONT-HUGE*/
}
.tablet-font-36 {
  font-size: 36px; 
}
/*FLEXBOXES - ROWS COLUMNS ALIGNS JUSTIFYS FLEXES GAPS*/
.tablet-row {
  display: flex;
  flex-direction: row;
}
.tablet-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}   
.tablet-column {
  display: flex;
  flex-direction: column;
}
.tablet-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}
.tablet-align-start  {
  align-items: flex-start;
}
.tablet-align-center  {
  align-items: center;
}
.tablet-align-end  {
  align-items: flex-end;
}
.tablet-align-stretch  {
  align-items: stretch;
}
.tablet-justify-start  {
  justify-content: flex-start;
}
.tablet-justify-center  {
  justify-content: center;
}      
.tablet-justify-end  {
  justify-content: flex-end;
}
.tablet-justify-around {
  justify-content: space-around;
}  
.tablet-justify-between  {
  justify-content: space-between;
}
.tablet-flex-1 {
  flex: 1;
}
.tablet-flex-2 {
  flex: 2;
}
.tablet-flex-3 {
  flex: 3;
}
.tablet-gap-5  {
  gap: 5px;
}
.tablet-gap-10  {
  gap: 10px;
}
.tablet-gap-25, .tablet-gap /*inherit*/  {
  gap: 25px;
}
.tablet-gap-50  {
  gap: 50px;
}
/*PADS AND MARGINS*/
.tablet-pad-5  {
  padding: 5px;
}
.tablet-pad-10  {
  padding: 10px;
}
.tablet-pad-25, .tablet-pad /*inherit*/  {
  padding: 25px;
}
.tablet-pad-left-5  {
  padding-left: 5px;
}
.tablet-pad-left-10  {
  padding-left: 10px;
}
.tablet-pad-left-25, .tablet-pad-left /*inherit*/  {
  padding-left: 25px;
}
.tablet-pad-right-5  {
  padding-right: 5px;
}
.tablet-pad-right-10  {
  padding-right: 10px;
}
.tablet-pad-right-25, .tablet-pad-right /*inherit*/  {
  padding-right: 25px;
}
.tablet-pad-top-5  {
  padding-top: 5px;
}
.tablet-pad-top-10  {
  padding-top: 10px;
}
.tablet-pad-top-25, .tablet-pad-top /*inherit*/  {
  padding-top: 25px;
}
.tablet-pad-bottom-5  {
  padding-bottom: 5px;
}
.tablet-pad-bottom-10  {
  padding-bottom: 10px;
}
.tablet-pad-bottom-25, .tablet-pad-bottom /*inherit*/  {
  padding-bottom: 25px;
}
.tablet-margin-5  {
  margin: 5px;
}
.tablet-margin-10  {
  margin: 10px;
}
.tablet-margin-25, .tablet-margin /*inherit*/  {
  margin: 25px;
}
.tablet-margin-left-5  {
  margin-left: 5px;
}
.tablet-margin-left-10  {
  margin-left: 10px;
}
.tablet-margin-left-25, .tablet-margin-left /*inherit*/  {
  margin-left: 25px;
}
.tablet-margin-right-5  {
  margin-right: 5px;
}
.tablet-margin-right-10  {
  margin-right: 10px;
}
.tablet-margin-right-25, .tablet-margin-right /*inherit*/  {
  margin-right: 25px;
}
.tablet-margin-top-5  {
  margin-top: 5px;
}
.tablet-margin-top-10  {
  margin-top: 10px;
}
.tablet-margin-top-25, .tablet-margin-top /*inherit*/  {
  margin-top: 25px;
}
.tablet-margin-bottom-5  {
  margin-bottom: 5px;
}
.tablet-margin-bottom-10  {
  margin-bottom: 10px;
}
.tablet-margin-bottom-25, .tablet-margin-bottom /*inherit*/  {
  margin-bottom: 25px;
}
/*WIDTHS*/
.tablet-width-auto {
  width: auto; 
}
.tablet-width-100 {
  width: 100%;
}    
.tablet-width-62 {
  width: 62%;
}  
.tablet-width-75 {
  width: 75%;
}  
.tablet-width-50 {
  width: 50%;
}
.tablet-width-38 {
  width: 38%;
}
.tablet-width-25 {
  width: 25%;
}
.tablet-width-20 {
  width: 20%;
}
.tablet-width-10 {
  width: 10%;
}
.tablet-max-width-100 {
  width: 100%;
}    
.tablet-max-width-62 {
  width: 62%;
}  
.tablet-max-width-75 {
  width: 75%;
}  
.tablet-max-width-50 {
  width: 50%;
}
.tablet-max-width-38 {
  width: 38%;
}
.tablet-max-width-25 {
  width: 25%;
}
.tablet-max-width-20 {
  width: 20%;
}
.tablet-max-width-10 {
  width: 10%;
}


}


@media only screen and (min-width: 150px) and (max-width: 699px) { 

  
.mobile-hidden {
  display: none;    } 
  
  
  .mobile-border-none  {
  border-style: none;
}
.mobile-border-radius-none {
  border-radius: 0px; /*none?*/
}
/*FONT SIZES*/  /*make mobile font selections*/
.mobile-font-8 {
  font-size: 8px;  /*FONT-TINY*/
}
.mobile-font-12 {
  font-size: 12px;   /*FONT-SMALL*/
}
.mobile-font-16 {
  font-size: 16px;  /*FONT-NORMAL*/
}
.mobile-font-20 {
  font-size: 20px;  /*FONT-MEDIUM*/ 
}
.mobile-font-24 {
  font-size: 24px;  /*FONT-LARGE*/
}
.mobile-font-28 {
  font-size: 28px; 
}
.mobile-font-32 {
  font-size: 32px;  /*FONT-HUGE*/
}
.mobile-font-36 {
  font-size: 36px; 
}
/*FLEXBOXES - ROWS COLUMNS ALIGNS JUSTIFYS FLEXES GAPS*/
.mobile-row {
  display: flex;
  flex-direction: row;
}
.mobile-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}   
.mobile-column {
  display: flex;
  flex-direction: column;
}
.mobile-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}
.mobile-align-start  {
  align-items: flex-start;
}
.mobile-align-center  {
  align-items: center;
}
.mobile-align-end  {
  align-items: flex-end;
}
.mobile-align-stretch  {
  align-items: stretch;
}
.mobile-justify-start  {
  justify-content: flex-start;
}
.mobile-justify-center  {
  justify-content: center;
}      
.mobile-justify-end  {
  justify-content: flex-end;
}
.mobile-justify-around {
  justify-content: space-around;
}  
.mobile-justify-between  {
  justify-content: space-between;
}
.mobile-flex-1 {
  flex: 1;
}
.mobile-flex-2 {
  flex: 2;
}
.mobile-flex-3 {
  flex: 3;
}
.mobile-gap-5  {
  gap: 5px;
}
.mobile-gap-10  {
  gap: 10px;
}
.mobile-gap-25, .mobile-gap /*inherit*/  {
  gap: 25px;
}
.mobile-gap-50  {
  gap: 50px;
}
/*PADS AND MARGINS*/
.mobile-pad-5  {
  padding: 5px;
}
.mobile-pad-10  {
  padding: 10px;
}
.mobile-pad-25, .mobile-pad /*inherit*/  {
  padding: 25px;
}
.mobile-pad-left-5  {
  padding-left: 5px;
}
.mobile-pad-left-10  {
  padding-left: 10px;
}
.mobile-pad-left-25, .mobile-pad-left /*inherit*/  {
  padding-left: 25px;
}
.mobile-pad-right-5  {
  padding-right: 5px;
}
.mobile-pad-right-10  {
  padding-right: 10px;
}
.mobile-pad-right-25, .mobile-pad-right /*inherit*/  {
  padding-right: 25px;
}
.mobile-pad-top-5  {
  padding-top: 5px;
}
.mobile-pad-top-10  {
  padding-top: 10px;
}
.mobile-pad-top-25, .mobile-pad-top /*inherit*/  {
  padding-top: 25px;
}
.mobile-pad-bottom-5  {
  padding-bottom: 5px;
}
.mobile-pad-bottom-10  {
  padding-bottom: 10px;
}
.mobile-pad-bottom-25, .mobile-pad-bottom /*inherit*/  {
  padding-bottom: 25px;
}
.mobile-margin-5  {
  margin: 5px;
}
.mobile-margin-10  {
  margin: 10px;
}
.mobile-margin-25, .mobile-margin /*inherit*/  {
  margin: 25px;
}
.mobile-margin-left-5  {
  margin-left: 5px;
}
.mobile-margin-left-10  {
  margin-left: 10px;
}
.mobile-margin-left-25, .mobile-margin-left /*inherit*/  {
  margin-left: 25px;
}
.mobile-margin-right-5  {
  margin-right: 5px;
}
.mobile-margin-right-10  {
  margin-right: 10px;
}
.mobile-margin-right-25, .mobile-margin-right /*inherit*/  {
  margin-right: 25px;
}
.mobile-margin-top-5  {
  margin-top: 5px;
}
.mobile-margin-top-10  {
  margin-top: 10px;
}
.mobile-margin-top-25, .mobile-margin-top /*inherit*/  {
  margin-top: 25px;
}
.mobile-margin-bottom-5  {
  margin-bottom: 5px;
}
.mobile-margin-bottom-10  {
  margin-bottom: 10px;
}
.mobile-margin-bottom-25, .mobile-margin-bottom /*inherit*/  {
  margin-bottom: 25px;
}
/*WIDTHS*/
.mobile-width-auto {
  width: auto; 
}
.mobile-width-100 {
  width: 100%;
}    
.mobile-width-62 {
  width: 62%;
}  
.mobile-width-75 {
  width: 75%;
}  
.mobile-width-50 {
  width: 50%;
}
.mobile-width-38 {
  width: 38%;
}
.mobile-width-25 {
  width: 25%;
}
.mobile-width-20 {
  width: 20%;
}
.mobile-width-10 {
  width: 10%;
}
.mobile-max-width-100 {
  width: 100%;
}    
.mobile-max-width-62 {
  width: 62%;
}  
.mobile-max-width-75 {
  width: 75%;
}  
.mobile-max-width-50 {
  width: 50%;
}
.mobile-max-width-38 {
  width: 38%;
}
.mobile-max-width-25 {
  width: 25%;
}
.mobile-max-width-20 {
  width: 20%;
}
.mobile-max-width-10 {
  width: 10%;
} 
  
    
}