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


/*---------------- NEW AND SITE-SPECIFIC CSS !!! MOVE BELOW WHEN SITE READY------------*/

/*---BEGIN QUOTE BOX---*/


.quotebox {

font-size: 20px;


}


#quote-button {


}

#quote  {

  padding: 25px;
}

#new-quote  {
  background: #000;
      min-height: 25px;
  min-width: 25px;

}

button  {
    background: #000;
    height: 50px;
  width: 50px;
  border-width: 0px;
  border-radius: 50px;
  font-size: 28px;
}


/*---END QUOTE BOX---*/

.z-index-1  {

z-index: 1;
position: absolute;
  
}

.z-index-2  {

z-index: 2;  
position: relative;

}


.height-100 {

height: 100%;
  
}


.social-button  {
  
height: 50px;
width: 50px;

}

/* 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;


}

/*ROTATE STUFF*/

.rotate-1 {

rotate: 2deg;

}

.rotate-2 {

rotate: -1deg;

}

.rotate-3 {

rotate: -2deg;

}

/*TAGLINE STUFF*/

.tagline-main  {

font-size: 32px;
  
}

.tagline-sub {

font-size: 26px;

}



.triplet-header h2 {
  
font-size: 1.62em;

}

.triplet-header h3 {
  
font-size: 1.1em;

}

.tagline-main-mobile {

font-size: 18px;
  
}

.tagline-sub-mobile {

font-size: 16px;

}


.overflow-hidden  {
  
overflow: hidden;

}



/* ---------------------------------- BODY ----------------------------------*/

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

body  {
font-family: Poppins; 
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
width: 100%;
background-color: #d7d7d7;
}

.body-container  {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
width: 100%;
background: url('cement-2.jpg');
}
    

/* ---------------------------------- FONTS ----------------------------------*/
@font-face  {
font-family: Poppins;
src:url('Poppins-Regular.ttf');    
}
@font-face  {
font-family: PoppinsMedium;
src:url('Poppins-Medium.ttf');    
}
@font-face  {
font-family: PoppinsBold;
src:url('Poppins-Bold.ttf');    
}
@font-face  {
font-family: PoppinsBlack;
src:url('Poppins-Black.ttf');    
}

@font-face  {
  
font-family: PoppinsThin;
src:url('Poppins-Thin.ttf');

}

.thin {
  font-family: PoppinsThin;
}

/* ---------------------------------- TEXT, LINE & PARAGRAPH SIZING ----------------------------------*/

.line-1 {
line-height: 1;
}

p {
  text-align-items:justify;
  word-break:keep-all;
}

.font-normal  {  
font-size: 20px;
} 

.font-medium  {  
font-size: 26px;
}  

.font-large  {  
font-size: 38px;
} 

.font-1em {

font-size: 1em;  

}


.font-1point5em {

font-size: 1.5em;  

}

.font-2em {

font-size: 2em;  

}

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

}


/* ---------------------------------- H1 H2 H3 H4 H5, B ----------------------------------*/

h1, h2, h3, h4, h5, b  {
font-family: PoppinsBold;   
}  
 h1, h2, h3, h4, h5  {
line-height: 1;   
} 
h1  {
font-size: 4.2em;
}
h2  {
font-size: 2.8em;
}
h3  {
font-size: 1.9em;
}                            
h4  {
font-size: 1.2em;
}
h5  {
font-size: 1em;
}




/* ---------------------------------- TEXT COLORS & BACKGROUND COLORS ----------------------------------*/


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

.underline a, .underline {

text-decoration: underline;  

} 
    
.black {
background: #000000;  
}
.black-text {
color: #000000;  
}
.almost-black {
background: #262626;  
}
.almost-black-text {
color: #262626;  
}
.white {
background: #ffffff;  
}

.white-2  {

background-color: rgba(250, 250, 250, 0.38);  

}

.white-3  {

background-color: rgba(250, 250, 250, 0.62);  

}

.white-text {
color: #ffffff;  
}
.almost-white {
background: #f9f9f9;  
}
.almost-white-text {
color: #f9f9f9;  
}
.dark-gray-text {
color: #444444;
}
.dark-gray {
background-color: #444444;
}

.dark-gray-2 {
background-color: rgba(68, 68, 68, 0.8);
}

.dark-gray-3 {
background-color: rgba(68, 68, 68, 0.6);
}



.gray-text {
color: #7d7d7d;
}
.gray {
background-color: #7d7d7d;
}


.lite-gray {
background-color: #d7d7d7;
}
.lite-gray-text {
color: #d7d7d7;
}  
    
.text-shadow-white {
text-shadow: 0px 0px 5px #fff;  
}  
.text-shadow-black {
text-shadow: 1px 1px 2px #000;
}



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



/* ---------------------------------- BORDERS ----------------------------------*/

.border-radius-5  {
border-radius: 5px;
}

.border-radius-25  {
border-radius: 25px;
}

.border-white {
border-style: solid;
border-width: 3px;
border-color: #fff;
}

.border-white-2 {
border-style: solid;
border-width: 10px;
border-color: #fff;
}

.border-lite-gray {
border-style: solid;
border-width: 3px;
border-color: #d7d7d7;
}

.border-lite-gray-2 {
border-style: solid;
border-width: 10px;
border-color: #d7d7d7;
}

.border-black  {
border-style: solid;
border-width: 3px;
border-color: #000;  
}

/* ---------------------------------- PADS ----------------------------------*/

.pad  {
padding: 25px;
}
.pad-10 {    
padding: 10px;
}
.pad-0  {
padding: 0;
}
.pad-top  {
padding-top: 25px;  
}
.pad-bottom  {
padding-bottom: 25px;  
}
.pad-left  {
padding-left: 25px;  
}
.pad-right  {
padding-right: 25px;  
}
.pad-horizontal {
padding: 0 25px; 
}
.pad-vertical {
padding: 25px 0;  
}


/* ---------------------------------- MARGINS ----------------------------------*/

.margin  {
margin: 25px;
}
.margin-10 {    
margin: 10px;
}
.margin-0  {
margin: 0;
}
.margin-top  {
margin-top: 25px;  
}
.margin-bottom  {
margin-bottom: 25px;  
}
.margin-left  {
margin-left: 25px;  
}
.margin-right  {
margin-right: 25px;  
}
.margin-horizontal {
margin: 0 25px; 
}
.margin-vertical {
margin: 25px 0;  
}

/* ---------------------------------- WIDTHS ----------------------------------*/



.width-auto {
width: auto;
}
.width-100 {
width: 100%;
max-width: 100%;
} 
.width-62 {
width: 62%;
max-width: 62%;
}  
.width-50 {
width: 50%;
max-width: 50%;
}  
.width-38 {
width: 38%;
max-width: 38%;
} 
.width-33 {
width: 33%;
max-width: 33%;
}   
.width-25 {
width: 25%;
max-width: 25%;
}



.max-width-100 {

max-width: 100%;
} 
.max-width-62 {

max-width: 62%;
}  
.max-width-50 {

max-width: 50%;
}  
.max-width-38 {

max-width: 38%;
} 
.max-width-33 {

max-width: 33%;
}   
.max-width-25 {

max-width: 25%;
}

.max-62-px  {

max-height: 62px;
max-width: 62px;  

}



.max-380-px  {
max-width: 380px;
} 
    
.max-620-px  {
max-width: 620px;
}
.max-1134-px {
max-width: 1134px;
}
.max-1400-px {
max-width: 1400px;
}
.max-1420-px {
max-width: 1420px;
}
.max-1600-px {
max-width: 1600px;
}

.max-20-percent {

max-width: 20%;  

} 


.max-33-percent {  
max-width: 33%;
}



.min-height-380-px {

min-height: 380px;
  
}

.min-height-620-px {

min-height: 620px;
  
}

/* ----------------------------------BUTTONS----------------------------------*/

.button  {
padding: 10px 25px;
color: #090909;
background-color: #d7d7d7;
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 5px;
}
.button-2  {
padding: 10px 25px;
color: #090909;
background-color: #d7d7d7;
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 5px;
}
.button:hover, .button-2:hover, .button b:hover, .button-2 b:hover {
color: #f9f9f9;
background-color: #090909;
border-color: #d7d7d7;
}

.button a, button-2 a  {
color: #f9f9f9;
border-color: #d7d7d7;
}


.button-amazon  {
border-style: solid;
border-width: 2px;
border-color: #090909;
border-radius: 2px;
background: url('button-amazon.jpg');
}
.button-youtube  {
border-style: solid;
border-width: 2px;
border-color: #090909;
border-radius: 2px;
background: url('button-youtube.jpg');
}   
.button-facebook  {
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 5px;
background: url('button-facebook.jpg');
}  
.button-bandcamp  {
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 5px;  
background: url('button-bandcamp.jpg');
}   
.button-spotify  {
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 5px;  
background: url('button-spotify.jpg');
}  
.menu-button {
font-size: 1em;
}
.menu-button:hover {
background: #d7d7d7; 
}
.menu-button:hover b {
color: #090909;
}



/* ---------------------------------- HEADER ----------------------------------*/

.header {

padding: 100px 0;


background: url('header-main.jpg'); 
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
background-color: #000; 



}
.header-film {

padding: 100px 0;

background: url('header-film.jpg'); 
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
background-color: #000;

}
.header-music {

padding: 100px 0;

background: url('header-music.jpg'); 
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
background-color: #000; 
}
.header-about {

padding: 100px 0;
background: url('header-about.jpg'); 
background-repeat: no-repeat;
background-position: left;
background-size: auto 100%;  
background-color: #000;

}
.header-blog {

padding: 100px 0;
background: url('header-blog.jpg'); 
background-repeat: no-repeat;
background-position: left;
background-size: auto 100%;
background-color: #000; 
}
.header-contact {

padding: 100px 0;
background: url('header-contact.jpg'); 
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%; 
background-color: #000;
}
.header-speaking {

padding: 100px 0;
background: url('header-speaking.jpg'); 
background-repeat: no-repeat;
background-position: left;
background-size: auto 100%; 
background-color: #000;
}
.header-text  {

padding-left: 25px;
}
.header-text-2  {

padding-right: 25px;

}



.header-text h1, .header-text-2 h1 {
font-size: 11vw;
}

.header-text h2, .header-text-2 h2 {
font-size: 4vw;
}





/* ----------------------------------ROWS AND FLEXES----------------------------------*/
.row  {
display: flex;
flex-direction: row;
}
.row-reverse  {
display: flex;
flex-direction: row-reverse;
}

.column-reverse {
display: flex;
flex-direction: column-reverse;
}
.column {
display: flex;
flex-direction: column;
}

.flex-initial {
flex: initial;  
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}


.gap, .gap-25  {
gap: 25px;  
}
.gap-50 {
gap: 50px;  
}
.gap-10 {
gap: 10px;  
}
.gap-0  {
gap: 0px;  
}




.align-stretch {
align-items: stretch;  
}   
.align-center {
align-items: center;  
}
.align-start  {  
align-items: flex-start; 
}
.align-end  {
align-items: flex-end;  
}

.justify-stretch {
justify-content: stretch;  
}   
.justify-center {
justify-content: center;  
}
.justify-start  {  
justify-content: flex-start; 
}
.justify-end  {
justify-content: flex-end;  
}
.justify-around {
justify-content: space-around;
}
.justify-between  {
justify-content: space-between;
}



/* ----------------------------------DESKTOP ONLY----------------------------------*/
@media only screen and (min-width: 1120px) {  
/* ----------------------------------VISIBILITY TRICKS----------------------------------*/
.desktop-hide  {
display: none;
}




/* ----------------------------------HEADER----------------------------------*/
.header-text  {

padding-left: 25px;



}
.header-text-2  {

padding-right: 25px;

}


.header-text h1, .header-text-2 h1 {
font-size: 8em;
}

.header-text h2, .header-text-2 h2 {
font-size: 2em;
}


/* ----------------------------------PADS----------------------------------*/
.desktop-pad  {
padding: 25px;
}
.desktop-pad-top  {
padding-top: 25px;  
}
.desktop-pad-bottom  {
padding-bottom: 25px;  
}
.desktop-pad-left  {
padding-left: 25px;  
}
.desktop-pad-right  {
padding-right: 25px;  
}
.desktop-pad-horizontal {
padding: 0 25px; 
}
.desktop-pad-vertical {
padding: 25px 0;  
}
.desktop-pad-0  {
padding: 0;
}




/* ---------------------------------- MARGINS ----------------------------------*/

.desktop-margin  {
margin: 25px;
}
.desktop-margin-10 {    
margin: 10px;
}
.desktop-margin-0  {
margin: 0;
}
.desktop-margin-top  {
margin-top: 25px;  
}
.desktop-margin-bottom  {
margin-bottom: 25px;  
}
.desktop-margin-left  {
margin-left: 25px;  
}
.desktop-margin-right  {
margin-right: 25px;  
}
.desktop-margin-horizontal {
margin: 0 25px; 
}
.desktop-margin-vertical {
margin: 25px 0;  
}



/* ----------------------------------WIDTHS----------------------------------*/

.desktop-width-auto {
width: auto;
}
.desktop-width-100 {
width: 100%;
max-width: 100%;
} 
.desktop-width-62 {
width: 62%;
max-width: 62%;
}  
.desktop-width-50 {
width: 50%;
max-width: 50%;
}  
.desktop-width-38 {
width: 38%;
max-width: 38%;
} 
.desktop-width-33 {
width: 33%;
max-width: 33%;
}   
.desktop-width-25 {
width: 25%;
max-width: 25%;
}


.desktop-max-380-px  {
max-width: 380px;
} 
    
.desktop-max-620-px  {
max-width: 620px;
}
.desktop-max-1134-px {
max-width: 1134px;
}
.desktop-max-1400-px {
max-width: 1400px;
}

.desktop-max-20-percent {

max-width: 38%;  

} 


.desktop-max-33-percent {  
max-width: 33%;
}


.desktop-min-height-380-px {

min-height: 380px;
  
}




/* ----------------------------------ROWS AND FLEXES----------------------------------*/
.desktop-row  {
display: flex;
flex-direction: row;
}
.desktop-row-reverse  {
display: flex;
flex-direction: row-reverse;
}
.desktop-column-reverse {
display: flex;
flex-direction: column-reverse;
}
.desktop-column {
display: flex;
flex-direction: column;
}
.desktop-flex-initial {
flex: initial;  
}
.desktop-flex-1 {
flex: 1;
}
.desktop-flex-2 {
flex: 2;
}
.desktop-gap, .desktop-gap-25  {
gap: 25px;  
}
.desktop-gap-50 {
gap: 50px;  
}
.desktop-gap-10 {
gap: 10px;  
}
.desktop-gap-0  {
gap: 0px;  
}


.desktop-align-stretch {
align-items: stretch;  
}   
.desktop-align-center {
align-items: center;  
}
.desktop-align-start  {  
align-items: flex-start; 
}
.desktop-align-end  {
align-items: flex-end;  
}
.desktop-justify-stretch {
justify-content: stretch;  
}   
.desktop-justify-center {
justify-content: center;  
}
.desktop-justify-start  {  
justify-content: flex-start; 
}
.desktop-justify-end  {
justify-content: flex-end;  
}
.desktop-justify-around {
justify-content: space-around;
}
.desktop-justify-between  {
justify-content: space-between;
}
}

/* ----------------------------------TABLET ONLY----------------------------------*/
@media only screen and (min-width: 769px) and (max-width: 1120px) {  
/* ----------------------------------VISIBILITY TRICKS----------------------------------*/
.tablet-hide  {
display: none; 
}    
.tablet-no-border {
  
border-style: none;

}

.tablet-no-border-radius  {

border-radius: 0;  

}
/* ---------------------------------- H1 H2 H3 H4 H5, B ----------------------------------*/
h1  {
font-size: 9vw;
}
h2  {
font-size: 4vw;
}
h3  {
font-size: 3vw;
}                            
h4  {
font-size: 2vw;
}
h5  {
font-size: 1vw;
}

.header-text h1, .header-text-2 h1 {
font-size: 11vw;
}


.header-text h2, .header-text-2 h2 {
font-size: 4vw;
}






/* ----------------------------------PADS----------------------------------*/
.tablet-pad  {
padding: 25px;
}
.tablet-pad-top  {
padding-top: 25px;  
}
.tablet-pad-bottom  {
padding-bottom: 25px;  
}
.tablet-pad-left  {
padding-left: 25px;  
}
.tablet-pad-right  {
padding-right: 25px;  
}
.tablet-pad-horizontal {
padding: 0 25px; 
}
.tablet-pad-vertical {
padding: 25px 0;  
}
.tablet-pad-0  {
padding: 0;
}


/* ---------------------------------- MARGINS ----------------------------------*/

.tablet-margin  {
margin: 25px;
}
.tablet-margin-10 {    
margin: 10px;
}
.tablet-margin-0  {
margin: 0;
}
.tablet-margin-top  {
margin-top: 25px;  
}
.tablet-margin-bottom  {
margin-bottom: 25px;  
}
.tablet-margin-left  {
margin-left: 25px;  
}
.tablet-margin-right  {
margin-right: 25px;  
}
.tablet-margin-horizontal {
margin: 0 25px; 
}
.tablet-margin-vertical {
margin: 25px 0;  
}




/* ----------------------------------WIDTHS----------------------------------*/


.tablet-width-auto {
width: auto;
}
.tablet-width-100 {
width: 100%;
max-width: 100%;
} 
.tablet-width-62 {
width: 62%;
max-width: 62%;
}  
.tablet-width-50 {
width: 50%;
max-width: 50%;
}  
.tablet-width-38 {
width: 38%;
max-width: 38%;
} 
.tablet-width-33 {
width: 33%;
max-width: 33%;
}   
.tablet-width-25 {
width: 25%;
max-width: 25%;
}

.tablet-max-380-px  {
max-width: 380px;
} 
    
.tablet-max-620-px  {
max-width: 620px;
}
.tablet-max-1134-px {
max-width: 1134px;
}
.tablet-max-1400-px {
max-width: 1400px;
}

.tablet-max-20-percent {

max-width: 38%;  

} 


.tablet-max-33-percent {  
max-width: 33%;
}


.tablet-min-height-380-px {

min-height: 380px;
  
}

 

/* ----------------------------------HEADER ----------------------------------*/
.header-text  {
margin: 11vw 0;
padding-left: 25px;

max-width: 420px;

}
.header-text-2  {
margin: 11vw 0;
padding-right: 25px;

}


/* ----------------------------------ROWS & COLUMNS----------------------------------*/
.tablet-row  {
display: flex;
flex-direction: row;
}
.tablet-row-reverse  {
display: flex;
flex-direction: row-reverse;
}
.tablet-column-reverse {
display: flex;
flex-direction: column-reverse;
}
.tablet-column {
display: flex;
flex-direction: column;
}
.tablet-flex-initial {
flex: initial;  
}
.tablet-flex-1 {
flex: 1;
}
.tablet-flex-2 {
flex: 2;
}

.tablet-flex-inherit  {
flex: inherit;
}



.tablet-gap, .tablet-gap-25  {
gap: 25px;  
}
.tablet-gap-50 {
gap: 50px;  
}
.tablet-gap-10 {
gap: 10px;  
}
.tablet-gap-0  {
gap: 0px;  
}




.tablet-align-stretch {
align-items: stretch;  
}   
.tablet-align-center {
align-items: center;  
}
.tablet-align-start  {  
align-items: flex-start; 
}
.tablet-align-end  {
align-items: flex-end;  
}
.tablet-justify-stretch {
justify-content: stretch;  
}   
.tablet-justify-center {
justify-content: center;  
}
.tablet-justify-start  {  
justify-content: flex-start; 
}
.tablet-justify-end  {
justify-content: flex-end;  
}
.tablet-justify-around {
justify-content: space-around;
}
.tablet-justify-between  {
justify-content: space-between;
}
}


/* ----------------------------------MOBILE ONLY----------------------------------*/
@media only screen and (min-width: 150px) and (max-width: 768px) {






/*---BEGIN QUOTE BOX---*/


button  {

  font-size: 32px;
}


/*---END QUOTE BOX---*/


.mobile-380-px-high {
  
height: 380px;

}

/* ----------------------------------VISIBILITY TRICKS----------------------------------*/
.mobile-hide  {
display: none;
}


.mobile-no-border {
  
border-style: none;

}

.mobile-no-border-radius  {

border-radius: 0;  

}


/* ---------------------------------- H1 H2 H3 H4 H5, B ----------------------------------*/
h1  {
font-size: 4.2em;
}
h2  {
font-size: 2.8em;
}
h3  {
font-size: 1.9em;
}                            
h4  {
font-size: 1.2em;
}
h5  {
font-size: 1em;
}



.header-text h1, .header-text-2 h1 {
font-size: 11vw;
}

.header-text h2, .header-text-2 h2 {
font-size: 4vw;
}








/* ----------------------------------PADS----------------------------------*/
.mobile-pad  {
padding: 25px;
}
.mobile-pad-top  {
padding: 25px 0 0 0;  
}
.mobile-pad-bottom  {
padding: 0 0 25px 0;
}
.mobile-pad-left  {
padding-left: 25px;  
}
.mobile-pad-right  {
padding-right: 25px;  
}
.mobile-pad-horizontal {
padding: 0 25px; 
}
.mobile-pad-vertical {
padding: 25px 0;  
}
.mobile-pad-0  {
padding: 0;
}


/* ---------------------------------- MARGINS ----------------------------------*/

.mobile-margin  {
margin: 25px;
}
.mobile-margin-10 {    
margin: 10px;
}
.mobile-margin-0  {
margin: 0;
}
.mobile-margin-top  {
margin-top: 25px;  
}
.mobile-margin-bottom  {
margin-bottom: 25px;  
}
.mobile-margin-left  {
margin-left: 25px;  
}
.mobile-margin-right  {
margin-right: 25px;  
}
.mobile-margin-horizontal {
margin: 0 25px; 
}
.mobile-margin-vertical {
margin: 25px 0;  
}




/* ----------------------------------WIDTHS----------------------------------*/


.mobile-width-auto {
width: auto;
}
.mobile-width-100 {
width: 100%;
max-width: 100%;
} 
.mobile-width-62 {
width: 62%;
max-width: 62%;
}  
.mobile-width-50 {
width: 50%;
max-width: 50%;
}  
.mobile-width-38 {
width: 38%;
max-width: 38%;
} 
.mobile-width-33 {
width: 33%;
max-width: 33%;
}   
.mobile-width-25 {
width: 25%;
max-width: 25%;
}

.mobile-max-380-px  {
max-width: 380px;
} 
    
.mobile-max-620-px  {
max-width: 620px;
}
.mobile-max-1134-px {
max-width: 1134px;
}
.mobile-max-1400-px {
max-width: 1400px;
}

.mobile-max-20-percent {

max-width: 38%;  

} 


.mobile-max-33-percent {  
max-width: 33%;
}


.mobile-min-height-380-px {

min-height: 380px;
  
}


/* ----------------------------------BUTTONS----------------------------------*/


.mobile-pad-10  {
padding: 10px;
}
.mobile-no-border {
border-style: none;
}





/* ----------------------------------ROWS AND FLEXES----------------------------------*/
.mobile-row  {
display: flex;
flex-direction: row;
}
.mobile-row-reverse  {
display: flex;
flex-direction: row-reverse;
}
.mobile-column-reverse {
display: flex;
flex-direction: column-reverse;
}
.mobile-column {
display: flex;
flex-direction: column;
}
.mobile-flex-initial {
flex: initial;  
}
.mobile-flex-1 {
flex: 1;
}
.mobile-flex-2 {
flex: 2;
}


.mobile-flex-inherit  {
flex: inherit;
}


.mobile-gap, .mobile-gap-25  {
gap: 25px;  
}
.mobile-gap-50 {
gap: 50px;  
}
.mobile-gap-10 {
gap: 10px;  
}
.mobile-gap-0  {
gap: 0px;  
}


.mobile-align-stretch {
align-items: stretch;  
}   
.mobile-align-center {
align-items: center;  
}
.mobile-align-start  {  
align-items: flex-start; 
}
.mobile-align-end  {
align-items: flex-end;  
}
.mobile-justify-stretch {
justify-content: stretch;  
}   
.mobile-justify-center {
justify-content: center;  
}
.mobile-justify-start  {  
justify-content: flex-start; 
}
.mobile-justify-end  {
justify-content: flex-end;  
}
.mobile-justify-around {
justify-content: space-around;
}
.mobile-justify-between  {
justify-content: space-between;
}
}