@charset "utf-8";
/*  CSS Document  */
/*  for MPP, Version 2025  */

/*	--------------------------------------------------------------------------------------------------------  VARIABLES  */

:root{
    /*	----------------------------------------------------------  SIZES  */
    --full-width: 100%;
    --inner-width: 1200px;


    /*	---------------------------------------------------------  COLORS  */

    --bg-temp: rgba(30,30,30,1);

    /*	----------------------------------------------------------  FONTS  */
    --montserrat: 'Montserrat', 'Helvetica', 'Helvetica Neue', 'Arial';

    --thin: 		100;
    --extralight: 	200;
    --light: 		300;
    --regular: 		400;
    --medium: 		500;
    --semibold: 	600;
    --bold: 		700;
    --black: 		800;
    --extrablack: 	900;
}

@media screen and (min-width:666px){
    :root{
        --greenfield-width: 300px;
    }
}

/*	---------------------------------------------------------------------------------------------------  GENERIC RESETS  */

h1, h2, h3, h4, h5, h6, p, td, ol, ul, li, figure, button {
    margin:0;
    padding:0;

    font-weight: inherit;

    border:0;
    outline:0;

    background-color:transparent;
}


/*	-----------------------------------------------------------------------------------------------------------  BASICS  */

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: auto;
    min-height: 100vh;
    position: relative;

    padding:0;
    margin:0;

    font-family: var(--montserrat), sans-serif;
    font-style: normal;
    font-weight: var(--light);
    font-size: 93.75%;
    color: white;

    background-color: black;
}

html{
    /*	force scrollbars  */
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body{

}

/*	----------------------------------------------------------------------------------------------------------  FLEXBOX  */
.flx{
    display: flex;
}

.flxR{
    display:flex;
    flex-flow:row;
    flex-wrap:nowrap;
}

.flxC{
    display:flex;
    flex-flow:column;
    flex-wrap:nowrap;
}

.flxJCA	{ justify-content:space-around; }
.flxJCB	{ justify-content:space-between; }
.flxJCC	{ justify-content:center; }
.flxJCE	{ justify-content:flex-end; }
.flxJCS	{ justify-content:flex-start; }

.flxAIC	{ align-items:center; }
.flxAIE	{ align-items:flex-end; }
.flxAIS	{ align-items:flex-start; }
.flxWrp	{ flex-wrap:wrap; }


/*	-------------------------------------------------------------------------------------------------------------  GRID  */

.grd{
    display: grid;
}



/*	------------------------------------------------------------------------------------------------------------  SIZES  */

.fllW{
    width:100%;
    height:auto;
}

.fllH{
    height:100%;
    width:auto;
}

.fllWH{
    width:100%;
    height:100%;
}

.innerWidth{
    width:100%;
    max-width: var(--inner-width);
    margin:0 auto;
}


/*	---------------------------------------------------------------------------------------------------  COMMON CLASSES  */

h1{
    padding: 25px 0;

    font-size: 1.75rem;

    color: white;
}

p, ul, ol{
    padding:0 0 8px 0;

    font-family: var(--montserrat), sans-serif;
    font-weight: var(--light);

    font-size:16px;

    color:#999;
}

ul{ padding:0 0 15px 0; }



/*  -----------------------------------------------------------------------------------------------------------  HEADER  */

header{
    width: 100%;
    max-width: 300px;
    height: auto;

    margin: 0 0 200px;
    padding: 0 25px;
}

