* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}
body {
    font-size: 16px;
    line-height: 1.5;
    font-family: Poppins;
}



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


.underline, .underline a {
    text-decoration: underline;
} 

 
.display-none {
  display: none;
} 

.overflow-hidden  {
  overflow: hidden;
}   



.background-logo {
  
  background: url('logo-test.png');
  background-repeat: no-repeat;  

}


.height-75 {
  height: 75px;
}


/* FOR MOBILE ONLY*/

.menu-container {
  height: 75px;
  width: 75px; 
  overflow: hidden;
}

.menu-container:hover  {
  width: 100%;
  max-height: auto;
  height: auto;
  align-items: stretch;


}

.menu-button {
  height: 75px;
  width: 75px;
}        
    
.white-line {
  height: 3px;
  background: #fff;
}






@font-face  {
font-family: Poppins;
src:url('Poppins-Regular.ttf');    
}      
.text-regular {
  font-family: Poppins;
}

@font-face  {
font-family: PoppinsBold;
src:url('Poppins-Bold.ttf');    
}
.text-bold {
  font-family: PoppinsBold;
}

@font-face  {
font-family: PoppinsBlack;
src:url('Poppins-Black.ttf');    
}
.text-thick {
  font-family: PoppinsBlack;
}

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




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


.text-huge {
  font-size: 32px;
}


.text-large {
  font-size: 24px;
}

.text-medium  {
  font-size: 20px;
}

.text-normal {
  font-size: 16px;
}

.text-small  {
  font-size: 14px;
}

.text-tiny {
  font-size: 12px;
}




.text-icon-email  {
  font-size: 2.23em;
}




.mobile-text-button {
  font-size: min(2.8vw, 16px);
}


.text-grid  {
font-size: min(2.8vw, 16px);
}

.text-grid-small  {
font-size: min(2.3vw, 10px);
}


.text-black {
  color: #000;
}

.text-almost-black  {
  color: #444;
}

.text-white {
  color: #fff;
}          

.text-almost-white  {
  color: #f8f8f8;
}

.text-gray-blue  {
  color: #565682;
}

.text-dark-gray  {
  color: #3e3e3e;
}

.text-gray  {
  color: #8e8e8e;
}


.text-light-gray  {
  color: #d2d2d2;
}

.text-super-light-gray  {
  color: #e8e8e8;
}
        
    
.text-red {
  color: #CC0000;
}

.text-green {
  color: #1a6834;
}

.text-blue {
  color: #2850a0;
}

.text-purple {
  color: #622183;
}


.text-yellow {
  color: #ecec00;
}

.text-orange {
  color: #d45500;
}

.text-dark-teal {
  color: #114955;
}


.text-teal {
  color: #2397b1;
}





.background-black {
  background: #000;
}

.background-almost-black  {
  background: #444;
}

.background-white {
  background: #fff;
}          

.background-almost-white  {
  background: #f8f8f8;
}

.background-gray-blue  {
  background: #565682;
}

.background-dark-gray  {
  background: #3e3e3e;
}

.background-gray  {
  background: #8e8e8e;
}


.background-light-gray  {
  background: #d2d2d2;
}

.background-super-light-gray  {
  background: #e8e8e8;
}
        
    
.background-red {
  background: #CC0000;
}

.background-green {
  background: #1a6834;
}

.background-blue {
  background: #2850a0;
}

.background-purple {
  background: #622183;
}


.background-yellow {
  background: #ecec00;
}

.background-orange {
  background: #d45500;
}

.background-teal {
  background: #2397b1;
}

.background-light-teal {
  background: #2397b1;
}


.background-brown {
  background: #3b220d;
}


.background-test-1  {
  background: url('test1.jpg');
  background-size: cover;
  background-position: center;
}


.background-test-2  {
  background: url('test2.jpg');
  background-size: cover;
  background-position: center;
}


.background-test-3  {
  background: url('test3.jpg');
  background-size: cover;
  background-position: center;
}


.background-test-4  {
  background: url('test4.jpg');
  background-size: cover;
  background-position: center;
}

.background-test-5  {
  background: url('test5.jpg');
  background-size: cover;
  background-position: center;
}








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

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

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

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

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

.border-radius-top-left {
  border-radius: 25px 0 0 0;
}

.border-radius-top-right {
  border-radius: 0 25px 0 0;
}

.border-radius-bottom-left {
  border-radius: 0 0 0 25px;
}

.border-radius-bottom-right {
  border-radius: 0 0 25px 0;
}

.border-none {
  border: none;
}



.border-almost-white {
  border-style: solid;
  border-width: 5px;
  border-color: #f8f8f8;
}

.border-gray-blue {
  border-style: solid;
  border-width: 5px;
  border-color: #565682;
}

.border-light-gray {
  border-style: solid;
  border-width: 5px;
  border-color: #d2d2d2;
}
                  




/*ADD BORDERS*/


                      
.height-100  {
  min-height: 100dvh;
}


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

.max-width-180  {
  max-width: 180px;
}

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

.min-width-400  {
  min-width: 400px;
}


.width-100  {
  width: 100%;
}

.width-62  {
  width: 62%;
}

.width-50  {
  width: 50%;
}

.width-30  {
  width: 30%;
}

.width-25  {
  width: 25%;
}

.width-20  {
  width: 20%;
}



.width-auto {

  min-width: auto;
  max-width: auto;
  width: auto;  
}



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


.max-width-100 {
  max-width: 100px;
}



.max-width-150  {
  max-width: 150px;
}

.max-width-420 {
  max-width: 420px;
}


.max-width-600 {
  max-width: 600px;
}



.max-width-800 {
  max-width: 800px;
  max-width: 800px;
}



.max-width-1134 {
  max-width: 1134px;
}



.max-width-1400 {
  max-width: 1400px;
}







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

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

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

.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;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}


.flex-wrap {
  flex-wrap: wrap;
}


.gap-100 {
  gap: 100px;
}

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




.static  {
  position: static;
}

.relative  {
  position: relative;
}

.absolute  {
  position: absolute;
}

.sticky  {
  position: sticky;
}

.fixed  {
  position: fixed;
}


.left  {
  left: 0;
}


.right  {
  right: 0;
}


.top  {
  top: 0;
}


.bottom  {
  bottom: 0;
}


.z-index-1  {
  z-index: 1;
}

.z-index-2  {
  z-index: 2;
}

.z-index-3  {
  z-index: 3;
}



.pad-50 {
  padding: 50px;
}
.pad, .pad-25 {
  padding: 25px;
}
.pad-10 {
  padding: 10px;
}
.pad-5 {
  padding: 5px;
}


.pad-3  {
  padding: 3px;
}


.pad-1  {
  padding: 1px;
}



.pad-top-50 {
  padding-top: 50px;
}
.pad-top, .pad-top-25 {
  padding-top: 25px;
}
.pad-top-10 {
  padding-top: 10px;
}
.pad-top-5 {
  padding-top: 5px;
}    

.pad-bottom-50 {
  padding-bottom: 50px;
}
.pad-bottom, .pad-bottom-25 {
  padding-bottom: 25px;
}
.pad-bottom-10 {
  padding-bottom: 10px;
}
.pad-bottom-5 {
  padding-bottom: 5px;
}

.pad-left-50 {
  padding-left: 50px;
}
.pad-left, .pad-left-25 {
  padding-left: 25px;
}
.pad-left-10 {
  padding-left: 10px;
}
.pad-left-5 {
  padding-left: 5px;
}      

.pad-right-50 {
  padding-right: 50px;
}
.pad-right, .pad-right-25 {
  padding-right: 25px;
}
.pad-right-10 {
  padding-right: 10px;
}
.pad-right-5 {
  padding-right: 5px;
}


.pad-horizontal-50 {
  padding-right: 50px; 
  padding-left: 50px;
}
.pad-horizontal, .pad-horizontal-25 {
  padding-right: 25px;
  padding-left: 25px;  
}
.pad-horizontal-10 {
  padding-right: 10px;
  padding-left: 10px;
}
.pad-horizontal-5 {
  padding-right: 5px;  
  padding-left: 5px;
}


.pad-vertical-50 {
  padding-top: 50px; 
  padding-bottom: 50px;
}
.pad-vertical, .pad-vertical-25 {
  padding-top: 25px;
  padding-bottom: 25px;  
}
.pad-vertical-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pad-vertical-5 {
  padding-top: 5px;  
  padding-bottom: 5px;
}







.menu-hover-1:hover {
  color: #8e8e8e;
}



.menu-hover-2:hover {
  color: #2397b1;
  background: #e8e8e8;
}


.menu-selected-page {
  color: #8e8e8e;
}





.test, .test-1 {
  background: #bca80c;
}
.test-2 {
  background: #a818b0;
}
.test-3 {
  background: #706c58;
}












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

.desktop-hidden    {
  display: none;
} 




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



.desktop-text-large {
  font-size: 24px;
}

.desktop-text-medium  {
  font-size: 20px;
}

.desktop-text-normal  {
  font-size: 16px;
}

.desktop-text-small {
  font-size: 12px;
}





.desktop-text-black {
  color: #000;
}

.desktop-text-almost-black  {
  color: #444;
}

.desktop-text-white {
  color: #fff;
}          

.desktop-text-almost-white  {
  color: #f8f8f8;
}

.desktop-text-gray-blue  {
  color: #565682;
}

.desktop-text-dark-gray  {
  color: #3e3e3e;
}

.desktop-text-gray  {
  color: #8e8e8e;
}


.desktop-text-light-gray  {
  color: #d2d2d2;
}

.desktop-text-super-light-gray  {
  color: #e8e8e8;
}
        
    
.desktop-text-red {
  color: #CC0000;
}

.desktop-text-green {
  color: #1a6834;
}

.desktop-text-blue {
  color: #2850a0;
}

.desktop-text-purple {
  color: #622183;
}


.desktop-text-yellow {
  color: #ecec00;
}

.desktop-text-orange {
  color: #d45500;
}

.desktop-text-teal {
  color: #2397b1;
}





.desktop-background-black {
  background: #000;
}

.desktop-background-almost-black  {
  background: #444;
}

.desktop-background-white {
  background: #fff;
}          

.desktop-background-almost-white  {
  background: #f8f8f8;
}

.desktop-background-gray-blue  {
  background: #565682;
}

.desktop-background-dark-gray  {
  background: #3e3e3e;
}

.desktop-background-gray  {
  background: #8e8e8e;
}


.desktop-background-light-gray  {
  background: #d2d2d2;
}

.desktop-background-super-light-gray  {
  background: #e8e8e8;
}
        
    
.desktop-background-red {
  background: #CC0000;
}

.desktop-background-green {
  background: #1a6834;
}

.desktop-background-blue {
  background: #2850a0;
}

.desktop-background-purple {
  background: #622183;
}


.desktop-background-yellow {
  background: #ecec00;
}

.desktop-background-orange {
  background: #d45500;
}

.desktop-background-teal {
  background: #2397b1;
}


.desktop-max-width-600 {
  max-width: 600px;
}


.desktop-max-width-420 {
  max-width: 420px;
}






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

.desktop-border-radius-10 {
  border-radius: 10px;
}

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

.desktop-border-radius-top  {
  border-radius: 25px 25px 0 0;
}

.desktop-border-radius-bottom  {
  border-radius: 0 0 25px 25px;
}

.desktop-border-radius-top-left {
  border-radius: 25px 0 0 0;
}

.desktop-border-radius-top-right {
  border-radius: 0 25px 0 0;
}

.desktop-border-radius-bottom-left {
  border-radius: 0 0 0 25px;
}

.desktop-border-radius-bottom-right {
  border-radius: 0 0 25px 0;
}

.desktop-border-none {
  border: none;
}



.desktop-border-almost-white {
  border-style: solid;
  border-width: 5px;
  border-color: #f8f8f8;
}

.desktop-border-gray-blue {
  border-style: solid;
  border-width: 5px;
  border-color: #565682;
}

.desktop-border-light-gray {
  border-style: solid;
  border-width: 5px;
  border-color: #d2d2d2;
}
                  




/*ADD BORDERS*/


                      
.desktop-height-100  {
  min-height: 100vw;
}


.desktop-min-height-280 {
  min-height: 280px;
}


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

.desktop-min-width-400  {
  min-width: 400px;
}


.desktop-width-100  {
  width: 100%;
}

.desktop-width-62  {
  width: 62%;
}

.desktop-width-50  {
  width: 50%;
}

.desktop-width-30  {
  width: 30%;
}

.desktop-width-25  {
  width: 25%;
}

.desktop-width-100  {
  width: 100%;
}


.desktop-width-auto {

  min-width: auto;
  max-width: auto;
  width: auto;  
}


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

.desktop-row {
  display: flex;
  flex-direction: row;
}        
.desktop-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}            

.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-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;
}

.desktop-flex-1 {
  flex: 1;
}

.desktop-flex-2 {
  flex: 2;
}


.desktop-flex-wrap {
  flex-wrap: wrap;
}


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




.desktop-static  {
  position: static;
}

.desktop-relative  {
  position: relative;
}

.desktop-absolute  {
  position: absolute;
}

.desktop-sticky  {
  position: sticky;
}

.desktop-fixed  {
  position: fixed;
}


.desktop-left  {
  left: 0;
}


.desktop-right  {
  right: 0;
}


.desktop-top  {
  top: 0;
}


.desktop-bottom  {
  bottom: 0;
}


.desktop-z-index-1  {
  z-index: 1;
}

.desktop-z-index-2  {
  z-index: 2;
}

.desktop-z-index-3  {
  z-index: 3;
}



.desktop-pad-50 {
  padding: 50px;
}
.desktop-pad, .desktop-pad-25 {
  padding: 25px;
}
.desktop-pad-10 {
  padding: 10px;
}
.desktop-pad-5 {
  padding: 5px;
}


.desktop-pad-3  {
  padding: 3px;
}


.desktop-pad-1  {
  padding: 1px;
}



.desktop-pad-top-50 {
  padding-top: 50px;
}
.desktop-pad-top, .desktop-pad-top-25 {
  padding-top: 25px;
}
.desktop-pad-top-10 {
  padding-top: 10px;
}
.desktop-pad-top-5 {
  padding-top: 5px;
}    

.desktop-pad-bottom-50 {
  padding-bottom: 50px;
}
.desktop-pad-bottom, .desktop-pad-bottom-25 {
  padding-bottom: 25px;
}
.desktop-pad-bottom-10 {
  padding-bottom: 10px;
}
.desktop-pad-bottom-5 {
  padding-bottom: 5px;
}

.desktop-pad-left-50 {
  padding-left: 50px;
}
.desktop-pad-left, .desktop-pad-left-25 {
  padding-left: 25px;
}
.desktop-pad-left-10 {
  padding-left: 10px;
}
.desktop-pad-left-5 {
  padding-left: 5px;
}      

.desktop-pad-right-50 {
  padding-right: 50px;
}
.desktop-pad-right, .desktop-pad-right-25 {
  padding-right: 25px;
}
.desktop-pad-right-10 {
  padding-right: 10px;
}
.desktop-pad-right-5 {
  padding-right: 5px;
}


.desktop-pad-horizontal-50 {
  padding-right: 50px; 
  padding-left: 50px;
}
.desktop-pad-horizontal, .desktop-pad-horizontal-25 {
  padding-right: 25px;
  padding-left: 25px;  
}
.desktop-pad-horizontal-10 {
  padding-right: 10px;
  padding-left: 10px;
}
.desktop-pad-horizontal-5 {
  padding-right: 5px;  
  padding-left: 5px;
}


.desktop-pad-vertical-50 {
  padding-top: 50px; 
  padding-bottom: 50px;
}
.desktop-pad-vertical, .desktop-pad-vertical-25 {
  padding-top: 25px;
  padding-bottom: 25px;  
}
.desktop-pad-vertical-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.desktop-pad-vertical-5 {
  padding-top: 5px;  
  padding-bottom: 5px;
}





.desktop-test, .desktop-test-1 {
  background: #bca80c;
}
.desktop-test-2 {
  background: #a818b0;
}
.desktop-test-3 {
  background: #706c58;


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


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



.tablet-text-large {
  font-size: 24px;
}

.tablet-text-medium  {
  font-size: 20px;
}

.tablet-text-normal  {
  font-size: 16px;
}

.tablet-text-small {
  font-size: 12px;
}





.tablet-text-black {
  color: #000;
}

.tablet-text-almost-black  {
  color: #444;
}

.tablet-text-white {
  color: #fff;
}          

.tablet-text-almost-white  {
  color: #f8f8f8;
}

.tablet-text-gray-blue  {
  color: #565682;
}

.tablet-text-dark-gray  {
  color: #3e3e3e;
}

.tablet-text-gray  {
  color: #8e8e8e;
}


.tablet-text-light-gray  {
  color: #d2d2d2;
}

.tablet-text-super-light-gray  {
  color: #e8e8e8;
}
        
    
.tablet-text-red {
  color: #CC0000;
}

.tablet-text-green {
  color: #1a6834;
}

.tablet-text-blue {
  color: #2850a0;
}

.tablet-text-purple {
  color: #622183;
}


.tablet-text-yellow {
  color: #ecec00;
}

.tablet-text-orange {
  color: #d45500;
}

.tablet-text-teal {
  color: #2397b1;
}





.tablet-background-black {
  background: #000;
}

.tablet-background-almost-black  {
  background: #444;
}

.tablet-background-white {
  background: #fff;
}          

.tablet-background-almost-white  {
  background: #f8f8f8;
}

.tablet-background-gray-blue  {
  background: #565682;
}

.tablet-background-dark-gray  {
  background: #3e3e3e;
}

.tablet-background-gray  {
  background: #8e8e8e;
}


.tablet-background-light-gray  {
  background: #d2d2d2;
}

.tablet-background-super-light-gray  {
  background: #e8e8e8;
}
        
    
.tablet-background-red {
  background: #CC0000;
}

.tablet-background-green {
  background: #1a6834;
}

.tablet-background-blue {
  background: #2850a0;
}

.tablet-background-purple {
  background: #622183;
}


.tablet-background-yellow {
  background: #ecec00;
}

.tablet-background-orange {
  background: #d45500;
}

.tablet-background-teal {
  background: #2397b1;
}


.tablet-max-width-600 {
  max-width: 600px;
}


.tablet-max-width-420 {
  max-width: 420px;
}






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

.tablet-border-radius-10 {
  border-radius: 10px;
}

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

.tablet-border-radius-top  {
  border-radius: 25px 25px 0 0;
}

.tablet-border-radius-bottom  {
  border-radius: 0 0 25px 25px;
}

.tablet-border-radius-top-left {
  border-radius: 25px 0 0 0;
}

.tablet-border-radius-top-right {
  border-radius: 0 25px 0 0;
}

.tablet-border-radius-bottom-left {
  border-radius: 0 0 0 25px;
}

.tablet-border-radius-bottom-right {
  border-radius: 0 0 25px 0;
}

.tablet-border-none {
  border: none;
}



.tablet-border-almost-white {
  border-style: solid;
  border-width: 5px;
  border-color: #f8f8f8;
}

.tablet-border-gray-blue {
  border-style: solid;
  border-width: 5px;
  border-color: #565682;
}

.tablet-border-light-gray {
  border-style: solid;
  border-width: 5px;
  border-color: #d2d2d2;
}
                  




/*ADD BORDERS*/


                      
.tablet-height-100  {
  min-height: 100vw;
}


.tablet-min-height-280 {
  min-height: 280px;
}


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

.tablet-min-width-400  {
  min-width: 400px;
}


.tablet-width-100  {
  width: 100%;
}

.tablet-width-62  {
  width: 62%;
}

.tablet-width-50  {
  width: 50%;
}

.tablet-width-30  {
  width: 30%;
}

.tablet-width-25  {
  width: 25%;
}

.tablet-width-100  {
  width: 100%;
}


.tablet-width-auto {

  min-width: auto;
  max-width: auto;
  width: auto;  
}


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

.tablet-row {
  display: flex;
  flex-direction: row;
}        
.tablet-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}            

.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-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;
}

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

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


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


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




.tablet-static  {
  position: static;
}

.tablet-relative  {
  position: relative;
}

.tablet-absolute  {
  position: absolute;
}

.tablet-sticky  {
  position: sticky;
}

.tablet-fixed  {
  position: fixed;
}


.tablet-left  {
  left: 0;
}


.tablet-right  {
  right: 0;
}


.tablet-top  {
  top: 0;
}


.tablet-bottom  {
  bottom: 0;
}


.tablet-z-index-1  {
  z-index: 1;
}

.tablet-z-index-2  {
  z-index: 2;
}

.tablet-z-index-3  {
  z-index: 3;
}



.tablet-pad-50 {
  padding: 50px;
}
.tablet-pad, .tablet-pad-25 {
  padding: 25px;
}
.tablet-pad-10 {
  padding: 10px;
}
.tablet-pad-5 {
  padding: 5px;
}


.tablet-pad-3  {
  padding: 3px;
}


.tablet-pad-1  {
  padding: 1px;
}



.tablet-pad-top-50 {
  padding-top: 50px;
}
.tablet-pad-top, .tablet-pad-top-25 {
  padding-top: 25px;
}
.tablet-pad-top-10 {
  padding-top: 10px;
}
.tablet-pad-top-5 {
  padding-top: 5px;
}    

.tablet-pad-bottom-50 {
  padding-bottom: 50px;
}
.tablet-pad-bottom, .tablet-pad-bottom-25 {
  padding-bottom: 25px;
}
.tablet-pad-bottom-10 {
  padding-bottom: 10px;
}
.tablet-pad-bottom-5 {
  padding-bottom: 5px;
}

.tablet-pad-left-50 {
  padding-left: 50px;
}
.tablet-pad-left, .tablet-pad-left-25 {
  padding-left: 25px;
}
.tablet-pad-left-10 {
  padding-left: 10px;
}
.tablet-pad-left-5 {
  padding-left: 5px;
}      

.tablet-pad-right-50 {
  padding-right: 50px;
}
.tablet-pad-right, .tablet-pad-right-25 {
  padding-right: 25px;
}
.tablet-pad-right-10 {
  padding-right: 10px;
}
.tablet-pad-right-5 {
  padding-right: 5px;
}


.tablet-pad-horizontal-50 {
  padding-right: 50px; 
  padding-left: 50px;
}
.tablet-pad-horizontal, .tablet-pad-horizontal-25 {
  padding-right: 25px;
  padding-left: 25px;  
}
.tablet-pad-horizontal-10 {
  padding-right: 10px;
  padding-left: 10px;
}
.tablet-pad-horizontal-5 {
  padding-right: 5px;  
  padding-left: 5px;
}


.tablet-pad-vertical-50 {
  padding-top: 50px; 
  padding-bottom: 50px;
}
.tablet-pad-vertical, .tablet-pad-vertical-25 {
  padding-top: 25px;
  padding-bottom: 25px;  
}
.tablet-pad-vertical-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.tablet-pad-vertical-5 {
  padding-top: 5px;  
  padding-bottom: 5px;
}





.tablet-test, .tablet-test-1 {
  background: #bca80c;
}
.tablet-test-2 {
  background: #a818b0;
}
.tablet-test-3 {
  background: #706c58;

}



}

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








.mobile-hidden {
  display: none;
} 
    
  


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



.mobile-text-large {
  font-size: 24px;
}

.mobile-text-medium  {
  font-size: 20px;
}

.mobile-text-normal  {
  font-size: 16px;
}

.mobile-text-small {
  font-size: 12px;
}


.mobile-text-dynamic {

font-size: min(2.8dvw, 16px);
  
}


.mobile-text-black {
  color: #000;
}

.mobile-text-almost-black  {
  color: #444;
}

.mobile-text-white {
  color: #fff;
}          

.mobile-text-almost-white  {
  color: #f8f8f8;
}

.mobile-text-gray-blue  {
  color: #565682;
}

.mobile-text-dark-gray  {
  color: #3e3e3e;
}

.mobile-text-gray  {
  color: #8e8e8e;
}


.mobile-text-light-gray  {
  color: #d2d2d2;
}

.mobile-text-super-light-gray  {
  color: #e8e8e8;
}
        
    
.mobile-text-red {
  color: #CC0000;
}

.mobile-text-green {
  color: #1a6834;
}

.mobile-text-blue {
  color: #2850a0;
}

.mobile-text-purple {
  color: #622183;
}


.mobile-text-yellow {
  color: #ecec00;
}

.mobile-text-orange {
  color: #d45500;
}

.mobile-text-teal {
  color: #2397b1;
}





.mobile-background-black {
  background: #000;
}

.mobile-background-almost-black  {
  background: #444;
}

.mobile-background-white {
  background: #fff;
}          

.mobile-background-almost-white  {
  background: #f8f8f8;
}

.mobile-background-gray-blue  {
  background: #565682;
}

.mobile-background-dark-gray  {
  background: #3e3e3e;
}

.mobile-background-gray  {
  background: #8e8e8e;
}


.mobile-background-light-gray  {
  background: #d2d2d2;
}

.mobile-background-super-light-gray  {
  background: #e8e8e8;
}
        
    
.mobile-background-red {
  background: #CC0000;
}

.mobile-background-green {
  background: #1a6834;
}

.mobile-background-blue {
  background: #2850a0;
}

.mobile-background-purple {
  background: #622183;
}


.mobile-background-yellow {
  background: #ecec00;
}

.mobile-background-orange {
  background: #d45500;
}

.mobile-background-teal {
  background: #2397b1;
}




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

.mobile-border-radius-10 {
  border-radius: 10px;
}

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

.mobile-border-radius-top  {
  border-radius: 25px 25px 0 0;
}

.mobile-border-radius-bottom  {
  border-radius: 0 0 25px 25px;
}

.mobile-border-radius-top-left {
  border-radius: 25px 0 0 0;
}

.mobile-border-radius-top-right {
  border-radius: 0 25px 0 0;
}

.mobile-border-radius-bottom-left {
  border-radius: 0 0 0 25px;
}

.mobile-border-radius-bottom-right {
  border-radius: 0 0 25px 0;
}

.mobile-border-none {
  border: none;
}



.mobile-border-almost-white {
  border-style: solid;
  border-width: 5px;
  border-color: #f8f8f8;
}

.mobile-border-gray-blue {
  border-style: solid;
  border-width: 5px;
  border-color: #565682;
}

.mobile-border-light-gray {
  border-style: solid;
  border-width: 5px;
  border-color: #d2d2d2;
}
                  




/*ADD BORDERS*/


                      
.mobile-height-100  {
  min-height: 100vw;
}


.mobile-min-height-280 {
  min-height: 280px;
}


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

.mobile-min-width-400  {
  min-width: 400px;
}


.mobile-width-100  {
  width: 100%;
}

.mobile-width-62  {
  width: 62%;
}

.mobile-width-50  {
  width: 50%;
}

.mobile-width-30  {
  width: 30%;
}

.mobile-width-25  {
  width: 25%;
}

.mobile-width-100  {
  width: 100%;
}


.mobile-width-auto {

  min-width: auto;
  max-width: auto;
  width: auto;  
}


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

.mobile-row {
  display: flex;
  flex-direction: row;
}        
.mobile-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}            

.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-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;
}

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

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


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


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




.mobile-static  {
  position: static;
}

.mobile-relative  {
  position: relative;
}

.mobile-absolute  {
  position: absolute;
}

.mobile-sticky  {
  position: sticky;
}

.mobile-fixed  {
  position: fixed;
}


.mobile-left  {
  left: 0;
}


.mobile-right  {
  right: 0;
}


.mobile-top  {
  top: 0;
}


.mobile-bottom  {
  bottom: 0;
}


.mobile-z-index-1  {
  z-index: 1;
}

.mobile-z-index-2  {
  z-index: 2;
}

.mobile-z-index-3  {
  z-index: 3;
}



.mobile-pad-50 {
  padding: 50px;
}
.mobile-pad, .mobile-pad-25 {
  padding: 25px;
}
.mobile-pad-10 {
  padding: 10px;
}
.mobile-pad-5 {
  padding: 5px;
}


.mobile-pad-3  {
  padding: 3px;
}


.mobile-pad-1  {
  padding: 1px;
}



.mobile-pad-top-50 {
  padding-top: 50px;
}
.mobile-pad-top, .mobile-pad-top-25 {
  padding-top: 25px;
}
.mobile-pad-top-10 {
  padding-top: 10px;
}
.mobile-pad-top-5 {
  padding-top: 5px;
}    

.mobile-pad-bottom-50 {
  padding-bottom: 50px;
}
.mobile-pad-bottom, .mobile-pad-bottom-25 {
  padding-bottom: 25px;
}
.mobile-pad-bottom-10 {
  padding-bottom: 10px;
}
.mobile-pad-bottom-5 {
  padding-bottom: 5px;
}

.mobile-pad-left-50 {
  padding-left: 50px;
}
.mobile-pad-left, .mobile-pad-left-25 {
  padding-left: 25px;
}
.mobile-pad-left-10 {
  padding-left: 10px;
}
.mobile-pad-left-5 {
  padding-left: 5px;
}      

.mobile-pad-right-50 {
  padding-right: 50px;
}
.mobile-pad-right, .mobile-pad-right-25 {
  padding-right: 25px;
}
.mobile-pad-right-10 {
  padding-right: 10px;
}
.mobile-pad-right-5 {
  padding-right: 5px;
}


.mobile-pad-horizontal-50 {
  padding-right: 50px; 
  padding-left: 50px;
}
.mobile-pad-horizontal, .mobile-pad-horizontal-25 {
  padding-right: 25px;
  padding-left: 25px;  
}
.mobile-pad-horizontal-10 {
  padding-right: 10px;
  padding-left: 10px;
}
.mobile-pad-horizontal-5 {
  padding-right: 5px;  
  padding-left: 5px;
}


.mobile-pad-vertical-50 {
  padding-top: 50px; 
  padding-bottom: 50px;
}
.mobile-pad-vertical, .mobile-pad-vertical-25 {
  padding-top: 25px;
  padding-bottom: 25px;  
}
.mobile-pad-vertical-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.mobile-pad-vertical-5 {
  padding-top: 5px;  
  padding-bottom: 5px;
}





.mobile-test, .mobile-test-1 {
  background: #bca80c;
}
.mobile-test-2 {
  background: #a818b0;
}
.mobile-test-3 {
  background: #706c58;

  
}

}