@font-face {
    font-family: Pacifico;
    src: url("/static/fonts/pacifico/Pacifico-Regular.9b94499ccea3.ttf?63bb48ff97f0");
}
@font-face {
    font-family: PoppinsRegular;
    src: url("/static/fonts/poppins/Poppins-Regular.41e8dead03fb.ttf?63bb48ff97f0");
   
}
@font-face {
    font-family: PoppinsMedium;
    src: url("/static/fonts/poppins/Poppins-Medium.ba95810b56f4.ttf?63bb48ff97f0");
  
}
@font-face {
    font-family: PoppinsSemiBold;
    src: url("/static/fonts/poppins/Poppins-SemiBold.342ba3d8ac29.ttf?63bb48ff97f0");
}
@font-face {
    font-family: PoppinsBold;
    src: url("/static/fonts/poppins/Poppins-Bold.c23534acbedd.ttf?63bb48ff97f0");
}

/* Material Icon classes */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for primary and secondary color */
.material-icons.md-primary { color: var(--primary-color); }
.material-icons.md-secondary { color: var(--secondary-color); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
/* CSS variables */
:root{
    /* colors */
    --primary-color: #104f55;
    --primary-color-darken:#083f44;
    --primary-color-light: #104f5516;
    --primary-hover-color: #0d4449;
    --secondary-color: #dea70f;
    --secondary-hover-color: #cf9906;
    --tertiary-color: #2c7873;
    --text-color: #2e2e2e;
    --light-grey-color: #f7f8f8;
    --white-color: #ffffff;
    --black-color: #000000;
    /* font-family */
    --regular-body-family: PoppinsRegular, Arial, sans-serif;
    --medium-body-family: PoppinsMedium, Arial, sans-serif;
    --semibold-body-family: PoppinsSemiBold, Arial, sans-serif;
    --bold-body-family: PoppinsBold, Arial, sans-serif;
    --brand-title-famify: Pacifico, Arial, sans-serif
}

/* TAGS */

body{
    font-family: var(--regular-body-family);
    margin: 0;
    min-width: 320px;
}
a{
    text-decoration: none;
}
a:link{
    color: initial;
}
a:visited{
    color: initial;
}
.background-color--secondary{
    background-color: var(--secondary-color);
}
button{
    border-radius: 4px;
    text-transform: uppercase;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-style: none;
    font-family: var(--bold-body-family);
    font-size: 0.875rem;
}
button:hover{
    cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
p{
    font-family: var(--semibold-body-family);
    color: var(--primary-color);
}
h1{
    font-size: 3.125rem; 
}
h2 {
    font-size: 2.375rem;
}
h3{
    font-size: 1.625rem
}
p{
    font-size: 1.5rem;
    font-family: var(--medium-body-family);
}
@media only screen and (max-width:1904px ) {
    h1 {
      font-size: 2.625rem;
    }
    h2{
        font-size: 1.975rem;
    }
    h3{
        font-size: 1.425rem;
    }
    p{
        font-size: 1.3rem;
    }
}
@media only screen and (max-width:1264px ) {
    h1 {
        font-size: 2.225rem;
    }
    h2{
        font-size: 1.675rem;
    }
    h3{
        font-size: 1.325rem;
    }
    p{
        font-size: 1.1rem;
    }
}
@media only screen and (max-width:960px ) {
    h1 {
        font-size: 1.925rem;
    }
    h2{
        font-size: 1.475rem;
    }
    h3{
        font-size: 1.225rem;
    }
}
@media only screen and (max-width:600px ) {
    h1 {
        font-size: 1.725rem;
    }
    h2{
        font-size: 1.475rem;
    }
    h3{
        font-size: 1.225rem;
    }
}

section{
    position: relative;
    z-index: 1;
    margin-top: 5vh;
    margin-bottom: 5vh;
}
/* SPACE MANAGEMENT */
.mb-20{
    margin-bottom: 80px;
}
.mb-12{
    margin-bottom: 48px;
}
.my-8{
    margin-top: 32px;
    margin-bottom: 32px;
}
.mt-8 {
    margin-top: 32px;
}
.mb-8{
    margin-bottom: 32px;
}
.mx-8{
    margin-left: 32px;
    margin-right: 32px;
}
.ml-8{
    margin-left: 32px;
}
.mr-8{
    margin-right: 32px;
}
.mt-7 {
    margin-top: 28px;
}
.mb-7{
    margin-bottom: 28px;
}
.ma-6{
    margin: 24px;
}
.my-6{
    margin-top: 24px;
    margin-bottom: 24px;
}
.mt-6{
    margin-top: 24px;
}
.mb-6{
    margin-bottom: 24px;
}
.mx-6{
    margin-left: 24px;
    margin-right: 24px;
}
.ml-6{
    margin-left: 24px;
}
.mr-6{
    margin-right: 24px;
}
.ma-4{
    margin: 16px;
}
.mx-4{
    margin-left: 16px;
    margin-right: 16px;
}
.ml-4{
    margin-left: 16px;
}
.mr-4{
    margin-right: 16px;
}
.mb-4{
    margin-bottom: 16px;
}
.mt-4{
    margin-top: 16px;
}
.my-4{
    margin-top: 16px;
    margin-bottom: 16px;
}
/* Margin 2 */
.ma-2{
    margin: 8px;
}
.mx-2{
    margin-left: 8px;
    margin-right: 8px;
}
.ml-2{
    margin-left: 8px;
}
.mr-2{
    margin-right: 8px;
}
.mb-2{
    margin-bottom: 8px;
}
.mt-2{
    margin-top: 8px;
}
.my-2{
    margin-top: 8px;
    margin-bottom: 8px;
}
.mt-0{
    margin-top: 0px;
}
.pa-3{
    padding: 12px;
}
.px-3{
    padding-left: 12px;
    padding-right: 12px;
}
.py-3{
    padding-top: 12px;
    padding-bottom: 12px;
}
.pa-4{
    padding: 16px;
}
.px-4{
    padding-left: 16px;
    padding-right: 16px;
}
.py-4{
    padding-top: 16px;
    padding-bottom: 16px;
}
.pt-4{
    padding-top: 16px;
}
.pt-4{
    padding-bottom: 16px;
}
.pa-6{
    padding: 24px;
}
.px-6{
    padding-left: 24px;
    padding-right: 24px;
}
.py-6{
    padding-top: 24px;
    padding-bottom: 24px;
}
.pt-2{
    padding-top: 8px;
}

.full-width{
    width: 100%;
}
.full-height{
    height: 100%;
}

/* STYLED BUTTONS */
.white-color-button{
    color: var(--primary-color);
    background-color: var(--white-color);
}
.white-color-button:hover{
    background-color: var(--light-grey-color);
}
.secondary-dark-outline-button{
    color: var(--white-color);
    background-color: var(--secondary-color);
    border: 1px solid var(--white-color);
    transition: 0.3s;
}
.secondary-dark-outline-button:hover{
    color: var(--secondary-color);
    background-color: var(--white-color);
}
.primary-color-outline-button{
    color: var(--white-color);
    background-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--white-color);
}
.primary-color-outline-button:hover{
    box-shadow: inset 0 0 0 2px var(--white-color);
}
.secondary-color-button{
    color: var(--white-color);
    background-color: var(--secondary-color);
}
.secondary-color-button:hover{
    background-color: var(--secondary-hover-color);
}
.secondary-color-outline-button{
    color: var(--secondary-color);
    background-color: var(--white-color);
    box-shadow: inset 0 0 0 1px var(--secondary-color);
}
.secondary-color-outline-button:hover{
    box-shadow: inset 0 0 0 2px var(--secondary-color);
}
/* TEXT COLOR */
.color--white{
    color: white
}
.text-color-text{
    color: var(--text-color)
}
.primary--color{
    color: var(--primary-color)
}
.secondary--color{
    color: var(--secondary-color)
}
/* TEXT ALIGN */
.text-align--center{
    text-align: center;
}
.text-align--justify{
    text-align: justify;
}
.text-align--start{
    text-align: start;
}
/* FONT WEIGHT */
.font-weight--regular{
    font-family:  var(--regular-body-family);
}
.font-weight--medium{
    font-family: var(--medium-body-family);
}
.font-weight--semi-bold{
    font-family: var(--semibold-body-family);
}
/* FONT FAMILY */
.font-brand-title{
    font-family: var(--brand-title-famify);
}
/* FLEX */
.d-flex{
    display: flex;
}
.flex-nowrap{
    flex-wrap: nowrap;
}
.flex--wrap{
    flex-wrap: wrap;
}
.flex-shrink--0{
    flex-shrink: 0;
}
.flex-shrink--1{
    flex-shrink: 1;
}
.flex-grow--0{
    flex-grow: 0;
}
.flex-grow--1{
    flex-grow: 1;
}
.flex-basis--100{
    flex-basis: 100%;
}
.flex-direction--row--reverse{
    flex-direction: row-reverse;
}
.flex-direction--column{
    flex-direction: column;
}
.flex-direction--column--reverse{
    flex-direction: column-reverse;
}
.align-items--center{
    align-items: center;
}
.align-items--flex-end{
    align-items: flex-end;
}
.align-items--stretch{
    align-items: stretch;
}
.justify-content--space-between{
    justify-content: space-between;
}
.justify-content--space-around{
    justify-content: space-around;
}
.justify-content--center{
    justify-content: center;
}
.justify-content--space-evenly{
    justify-content: space-evenly;
}
.justify-content--flex-end{
    justify-content: flex-end;
}
.align-self--start{
    align-self: flex-start;
}
.align-self--center{
    align-self: center;
}
.align-self--end{
    align-self: flex-end;
}
.xl12{
    flex-basis: 100%;
}
.xl10{
    flex-basis: calc( 100% * 10 / 12 );
}
.xl9{
    flex-basis: calc( 100% * 9 / 12 );
}
.xl8{
    flex-basis: calc( 100% * 8 / 12 );
}
.xl7{
    flex-basis: calc( 100% * 7 / 12 );
}
.xl6{
    flex-basis: 50%;
}
.xl5{
    flex-basis: calc( 100% * 5 / 12 );
}
.xl4{
    flex-basis: 33.3333%;
}
.xl3{
    flex-basis:25%
}
.xl2{
    flex-basis: calc( 100% * 2 / 12 );
}
.xl1{
    flex-basis: calc( 100% * 1 / 12 );
}
@media only screen and (max-width:1904px ) {
    .lg12{
        flex-basis: 100%;
    }
    .lg10{
        flex-basis: calc( 100% * 10 /12 );
    }
    .lg8{
        flex-basis: calc( 100% * 8 /12 );
    }
    .lg6{
        flex-basis: 50%;
    }
    .lg5{
        flex-basis: calc( 100% * 5 /12 );
    }
    .lg4{
        flex-basis: 33.3333%;
    }
    .lg3{
        flex-basis:25%
    } 
}
@media only screen and (max-width:1264px ) {
    .md12{
        flex-basis: 100%;
    }
    .md10{
        flex-basis: calc( 100% * 10 /12 );
    }
    .md8{
        flex-basis: calc( 100% * 8 /12 );
    }
    .md6{
        flex-basis: 50%;
    }
    .md5{
        flex-basis: calc( 100% * 5 /12 );
    }
    .md4{
        flex-basis: 33.3333%;
    }
    .md3{
        flex-basis:25%
    }
}
@media only screen and (max-width:960px ) {
    .sm12{
        flex-basis: 100%;
    }
    .sm10{
        flex-basis: calc(100% * 10 / 12);
    }
    .sm9{
        flex-basis: calc(100% * 9 / 12);
    }
    .sm8{
        flex-basis: calc(100% * 8 / 12 );
    }
    .sm7{
        flex-basis: calc(100% * 7 / 12 );
    }
    .sm6{
        flex-basis: 50%;
    }
    .sm5{
        flex-basis: calc( 100% * 5 /12 );
    }
    .sm4{
        flex-basis: 33.3333%;
    }
    .sm3{
        flex-basis:25%
    }
}
@media only screen and (max-width:600px ) {
    .xs12{
        flex-basis: 100%;
    }
    .xs10{
        flex-basis: calc(100% * 10 / 12);
    }
    .xs8{
        flex-basis: calc( 100% * 8 /12 );
    }
    .xs7{
        flex-basis: calc(100% * 7 / 12 );
    }
    .xs6{
        flex-basis: 50%;
    }
    .xs5{
        flex-basis: calc( 100% * 5 /12 );
    }
    .xs4{
        flex-basis: 33.3333%;
    }
    .xs3{
        flex-basis:25%
    }
}
/* BLOCK */
.d-block{
    display: block;
}
/* POSITION */
.absolute{
    position: absolute;
}
.relative{
    position: relative;
}
/* DISPLAY */
.hidden-md-and-up{
    display: none !important;
}
@media only screen and (max-width:1904px ) {
    .hidden-lg-and-down{
        display: none !important;
    }
}
@media only screen and (max-width:1264px ) {
    .hidden-md-and-down{
        display: none !important;
    }
}
@media only screen and (max-width:960px ) {
    .hidden-sm-and-down{
        display: none !important;
    }
    .hidden-md-and-up{
        display: inherit !important;
    }
}
@media only screen and (max-width:600px ) {
    .hidden-xs{
        display: none !important;
    }
}
/* SPECIFIC CLASSES */
.section-one-background{
    position: absolute;
    z-index:-2;
    height: 100%;
    width: 60%;
    left: 20%;
    top: 0%;
    background-color: var(--light-grey-color);
}
.view{
    padding-left: 10vw;
    padding-right: 10vw;
    margin-top:  5vh;
    margin-bottom: 5vh;
}
.primary-band{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: var(--primary-color);
    text-align: center;
}
.secondary-band{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: var(--secondary-color);
    text-align: center;
}
.higthligth{
    position: relative;
}
.higthligth::after{
    z-index: -1;
    content:"";
    position: absolute;
    top: 0;
    left: -3%;
    right: 0;
    width: 106%; 
}
h1 .higthligth::after{
    bottom: 10px;
    border-bottom: 12px solid var(--secondary-color)
}
h2 .higthligth::after{
    bottom: 8px;
    border-bottom: 10px solid var(--secondary-color)
}
@media only screen and (max-width:1264px ) {
    h1 .higthligth::after{
        bottom: 8px;
        border-bottom: 10px solid var(--secondary-color)
    }
    h2 .higthligth::after{
        bottom: 6px;
        border-bottom: 8px solid var(--secondary-color)
    }
}
@media only screen and (max-width:960px ) {
    h1 .higthligth::after{
        bottom:8px;
        border-bottom: 8px solid var(--secondary-color)
    }
    h2 .higthligth::after{
        bottom: 4px;
        border-bottom: 8px solid var(--secondary-color)
    }
}
@media only screen and (max-width:600px ) {
    h1 .higthligth::after{
        bottom: 7px;
        border-bottom: 8px solid var(--secondary-color)
    }
    h2 .higthligth::after{
        bottom: 4px;
        border-bottom: 8px solid var(--secondary-color)
    }
}
#section2 img {
    height: 100%;
    width: 100%;
    display: block;
    margin: auto;
    border-radius: 4px;
    border: 1px solid #EBEBEB;
    object-fit: cover;
}
#section2>div>h2{
    margin-bottom: 48px;
}
@media only screen and (max-width:960px ) {
    #section2 p{
        text-align: justify;
    }
    #section2 .content {
        align-items: center;
    }
    #section1 div div:first-child {
        text-align: center;
    }
}

@media only screen and (max-width:642px ) {
    #section1 {
        min-height: 45vh;
    }
    
}
#section3{
    overflow: hidden;
    padding-bottom: 100px;
    background-image: url("/static/images/random-shapes.fe42e3fbbe49.svg?63bb48ff97f0");
    background-repeat: repeat;
    background-size: 80px auto;
}
#section3>div>div{
    padding: 20px 60px 40px 60px;
    position: relative;
}
.themeItemName{
    position: absolute;
    left: 0;
    right: 0;
}
#section4 p {
    color:var(--text-color);
}
#section5 {
    background-image: url("/static/images/topography.26a13ec955bd.svg?63bb48ff97f0");
} 
#section5 div{
    justify-content: center;
}
@media only screen and (max-width:600px ){
    #section5 div {
        flex-direction: column;
    }
    #section3>div>div{
        padding: 20px 50px;
    }
    p>br{
        display: none;
    }
    .view{
        padding-left: 24px;
        padding-right: 24px;
        margin-top:  5vh;
        margin-bottom: 5vh;
    }
}
header{
    position: sticky;
    top: 0;
    right: 0;
    z-index:10;
    background-color: var(--white-color);
    min-height: 72px;
    border-bottom: 1px solid #ebeaeb;
}
#headerMenu{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 8px;
}
#headerMenu:hover{
    cursor: pointer;
    background-color: var(--primary-color-light);
}
#headerMenuIcon{
    height: 100%;
    width: 100%;
}
.navButton{
    background: none;
}
.navButton:hover{
    color: #00000096;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    background-color: var(--white-color);
    overflow-x: hidden;
    transition: 0.5s;
    border-left: 1px solid #ebeaeb;
}
.sidenav a {
    font-size: 20px;
    transition: 0.3s;
    font-family: var(--semibold-body-family);
}
.sidenav hr {
    border-color: var(--primary-hover-color);
}
.sidenav a:hover {
    color: var(--secondary-hover-color);
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 36px; 
}
@media only screen and (max-width:960px ) {
    header{
        min-height: 56px;
    }
}


footer{
    margin: 24px 56px;
    justify-content: space-between;
}
footer ul{
    padding-left: 0;
}
footer li{
    list-style-type: none;
    color: var(--primary-color);
}
footer a:link{
    color: var(--primary-color);
}
footer a:visited{
    color: var(--primary-color);
}
footer li:hover{
    text-decoration: underline;
}
footer h4{
    position: relative;
    right: 24px;
    padding-left: 24px;
    border-left: 3px solid var(--secondary-color);
}
footer .list{
    margin-left: 30px;
}
footer .footerItem{
    flex-wrap: wrap;
}
@media only screen and (max-width:600px ){
    footer{
        flex-direction: column;
    }
    footer .list{
        margin-left: 0px;
        width: 100%;
    }
}
.member {
    max-width: 344px;
    width: 344px;
}
.member img {
    height: 192px;
    width: 192px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    margin: auto;
    display: block;
}
.member p {
    text-align: center;
    font-family: var(--regular-body-family);
}

#origin img {
  display: block;
  margin: auto;
  max-width:400px;
  max-height:400px;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: rotate(-2deg);
  border-radius: 4px;
  margin-bottom: 24px;
}

.partner img {
  display: block;
  margin: auto;
  max-width:300px;
  max-height:300px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.partner .caption {
    text-align: center;
    padding: 16px 0px;
    color: var(--primary-color);
    font-size: 20px;
}
.picture>div,
.partner>div {
    display: grid;
    height: 100%;
    place-content: center;
}

.picture {
    height: 100%;
    max-height: 300px;
    width: 100%;
    max-width: 300px;
}

.picture>div{
    height: 300px;
    width: 300px;
}
.picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}