@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');


:root {

    --text-size: 16px;

}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    font-family: 'Encode Sans', sans-serif, Arial, Helvetica;

    font-size: var(--text-size); line-height: calc(var(--text-size) + 0.2rem);
    /*color: var(--text-black);*/

    box-sizing: border-box;
    color-scheme: normal;/*normal light dark*/
}

body,td,th {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

    /*font-size: var(--text-size); */
    /*color: var(--text-black);*/
    /*line-height: calc( var(--text-size) + 9px ); */
}


.cover {
    width: 100%; min-height: 75vh; padding: 6rem 5% 3rem 5%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: black;
    color: white;
    background: url('../img/cover.jpg'); background-size: cover;  background-position: center;
}

.logo { width: 24%; }

@media screen and (max-width: 600px) {
    :root {
        --text-size: 12px;
    }
    .cover { 
        min-height: auto; padding: 6rem 5% 4rem 5%;
        background: url('../img/cover.jpg'); background-position: 35% center; background-size: cover;}
    .logo { width: 65%; }
}

@media screen and (min-width: 600px){
    :root {
        --text-size: 13px;
    }
}

@media screen and (min-width: 1600px){
    :root {
        --text-size: 14px;
    }
}

@media screen and (min-width: 2300px){
    :root {
        --text-size: 15px;
    }
}


h1 { font-size: 2.4rem; line-height: 3rem; font-weight: 700; } 
h2 { font-size: 2rem; line-height: 2.5rem; font-weight: 700; } 
h3 { font-size: 1.7rem; line-height: 2.2rem; font-weight: 700; } 
h4 { font-size: 1.5rem; line-height: 1.9rem; font-weight: 700; } 
h5 { font-size: 1.3rem; line-height: 1.8rem; font-weight: 700; } 
h6 { font-size: 1.1rem; line-height: 1.5rem; font-weight: 700; } 


.flex { display: flex; align-items: stretch; align-self: flex-start;  }
.flex-mobile { display: flex; align-items: stretch; align-self: flex-start;  }
.flex-center { display: flex; align-items: center; justify-content: center; /*text-align: center;*/ }
.flex-left,.flex-left-center { display: flex; align-items: center; justify-content: left; text-align: left;   }
.flex-right,.flex-right-center { display: flex; align-items: center; justify-content: right; text-align: right; }
.flex-end { display: flex; align-items: flex-end; }
.flex-row { flex-direction: row; align-items: stretch; }
.flex-col { flex-direction: column; align-items: stretch; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-center { justify-content: center!important; }
.justify-content-end { justify-content: end!important; }
.justify-content-right { justify-content: right!important; }
.justify-content-left { justify-content: left!important; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }



.h-inherit { height: inherit; }
.h-auto { height: auto; }
.h-50p { height: 50%!important; }
.h-80p { height: 80%; }
.h-100p { height: 100%!important; }
.h-5 { height: 5px; }
.h-10 { height: 10px; }
.h-15 { height: 15px; }
.h-20 { height: 20px; }
.h-25 { height: 25px; }
.h-30 { height: 30px; }
.h-40 { height: 40px; }
.h-50 { height: 50px; }
.h-60 { height: 60px; }
.h-70 { height: 70px; }
.h-80 { height: 80px; }
.h-90 { height: 90px; }
.h-100 { height: 100px; }
.h-150 { height: 150px; }
.h-200 { height: 200px; }



.px-0 { padding-right: 0 !important;  padding-left: 0 !important; }
.px { padding-right: 0.1rem !important;  padding-left:  0.1rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.px-3 { padding-right: 0.75rem !important; padding-left: 0.75rem !important; }
.px-4 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-5 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.px-6 { padding-right: 2rem !important; padding-left: 2rem !important; }
.px-7 { padding-right: 2.5rem !important; padding-left: 2.5rem !important; }
.px-8 { padding-right: 3rem !important; padding-left: 3rem !important; }
.px-9 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
.px-10 { padding-right: 4rem !important; padding-left: 4rem !important; }
.px-12 { padding-right: 4.5rem !important; padding-left: 4.5rem !important; }

.py-0 {padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-7 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-8 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-9 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.py-10 { padding-top: 4rem !important; padding-bottom: 4rem !important; }



.mx-0 { margin-right: 0 !important;  margin-left: 0 !important; }
.mx { margin-right: 0.1rem !important; margin-left: 0.1rem !important; }
.mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
.mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
.mx-3 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; }
.mx-4 { margin-right: 1rem !important; margin-left: 1rem !important; }
.mx-5 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.mx-6 { margin-right: 2rem !important; margin-left: 2rem !important; }
.mx-7 { margin-right: 2.5rem !important; margin-left: 2.5rem !important; }
.mx-8 { margin-right: 3rem !important; margin-left: 3rem !important; }
.mx-9 { margin-right: 3.5rem !important; margin-left: 3.5rem !important; }
.mx-10 { margin-right: 4rem !important; margin-left: 4rem !important; }  

.my-0 {margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-6 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-7 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.my-8 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-9 { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; }
.my-10 { margin-top: 4rem !important; margin-bottom: 4rem !important; }