:root{
 
--body-bkg-color:  rgb(38,39,41);
--body-bkg: linear-gradient(180deg, rgba(38,39,41,1) 0%, rgba(114,124,132,1) 100%);
--body-txt-color: #c7c7c7;
--body-txt-font:: "Open Sans", sans-serif;
--border-color: #363a40;

--svg-icon-invert: 50%;
--svg-icon-invert-selected: 100%;
--svg-icon-invert-hover: 100%;


--sub-menu-bkg-color:rgb(45, 47, 53);
--sub-menu-txt-color:#c7c7c7;
--sub-menu-font-size:16px;

}


svg.icon{
    filter: invert( var( --svg-icon-invert ) );
}

svg.icon:hover{
    filter: invert( var( --svg-icon-invert-hover ) );
}

svg.icon:selected{
    filter: invert( var( --svg-icon-invert-selected ) );
}



body
{
    margin: 0;
    padding: 0;
    background: var( --body-bkg ); 
    background-color: var( --body-bkg-color );
    color: var( --body-txt-color );
    font-family: 'Open Sans', sans-serif;
    font-size:16px;
}

a{
    text-decoration: none;
    color:inherit;
}

a.selected
{
    color:#5bdc62;
}

a:hover
{
    color:#5e85ff;
}

a:active
{
    color:#e407a3;
}



img{
    /*width: 100%;*/
    border-radius: 6px;
    max-width: 100%;
    height: auto;
    /*max-height: 700px;*/
    /*max-width: 700px;*/
    /*height: 98%;*/
    /*width: 98%;*/
}


button{
   border-radius: 30px;
    margin-top: 30px;
    border: 3px solid #99b3de;
    cursor: pointer;
    font-size: 20px;
    padding: 10px 40px;
    color: #383838;
}


.button{
    display: inline-block;
    padding: 10px 30px;
    background-color: #2c2f34;
    border-radius: 63px;
    border: 2px solid #49534a;
}





.grid-2
{
    display: inline-grid;
    column-gap: 30px;
    /*row-gap: 30px;*/
    grid-template-columns: auto auto;
    width: 100%;
     max-width: 1360px;
}

.grid-2>*:first-child
{
    text-align:left;

}

.grid-2>*:last-child
{
    text-align:right;
}



@media only screen and ( max-width: 800px)
{
    .grid-2
    {
        grid-template-columns: auto!important;
        row-gap: 30px;
    }
    
    .grid-2>*:last-child
    {
        text-align:center;
    }
    
  
}


.grid-3
{
    display: inline-grid;
    column-gap: 30px;
    row-gap: 30px;
    width: 100%;
        max-width: 1360px;
    
         --min-item-width: 260px;
     grid-template-columns: repeat( auto-fit, minmax( var(--min-item-width) , 1fr) );
    
    /*grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );*/
  
}




h1
{
   font-size: clamp(28px, 4vw, 35px);
       margin-block-start: 0;
    margin-block-end: 0;
}

h2
{
   font-size: clamp(18px, 3vw, 24px);
       margin-block-start: 0;
    margin-block-end: 0;
}

h3
{
   font-size: clamp(17px, 2vw, 21px);
       margin-block-start: 0;
    margin-block-end: 0;
}







.page-body
{
   
}



.page-header
{
    /*background-color: #6d6f75;*/
    /*color: white;*/
    /*line-height:36px;*/
    padding: 50px 5% 0px 5%;
    
  
}






.main-menu>div
{
    line-height:36px;
}

.main-menu>div
{
    display:inline-block;
    padding: 0 0px 0 24px;
    color:inherit;
    text-decoration: none;
}

.main-menu-button
{
    display:none;
}

.main-menu-button:hover ~ .grid-2 .main-menu, .main-menu:hover
{
    display:block;
}


@media only screen and ( max-width: 800px)
{
   
    .main-menu
    {
        position: absolute;
        left: 30px;
        width: 120px;
        background-color: #302e32;
        border-radius: 10px;
        top: 30px;
        display: none;
        padding: 20px;
        color: white;
        text-align: left!important;
        /*line-height: 36px;*/
    }
    
    .main-menu-button
    {
        display:inline;
    }
    
    .grid-2>*:first-child {
        text-align: center;
    }
}


.sub-menu 
{
    padding: 20px;
    background-color: var( --sub-menu-bkg-color );
    color: var( --sub-menu-txt-color );
    font-size: var( --sub-menu-font-size );
    border-radius: 20px;
    height: fit-content;
}

.sub-menu > *
{
   padding: 7px;
}

/*.sub-menu + div[data-module="group"] {*/
/*  max-width: 900px;*/
/*}*/









.page-content {
   min-height: 70vh;
   text-align: center;
}

/*
.page-content>.title {
   padding: 23px 5% 0 5%;
    text-align: right;
    font-size: 20px;
    color:white;
    display: block;
}
*/




.page-content > * {
    padding: 2rem 5% 2rem 5%;;
    /*display: inline-block;*/
    /*max-width: 1360px;*/
}





@media only screen and ( max-width: 800px)
{
   
    .page-content>.title {
      
        text-align: center;
        
    }
}


div[data-module="page-title-container"]
{
    margin-top:-10px;
}

div[data-module="youtube-video"]
{
    height: 559px;
    max-width: 746px;
}

div[data-module="youtube-video"] iframe
{
   width: 100%;
    height: 100%;
    border-radius: 8px;
}





.module-text-image
{
    padding: 50px;
    background-color: #242429;
    text-align: center;
    color:#d4d4d4;
}

.module-text-image .title
{
    font-size:35px;
    font-size: clamp(28px, 4vw, 35px);
    margin-bottom:20px;
}

.module-text-image .description
{
    font-size:16px;
    margin-bottom:20px;
}


/*.module-text-image img*/
/*{*/
/*    max-width: 100%;*/
/*    border-radius: 6px;*/
/*}*/


/*.module-text-image .grid-2*/
/*{*/
/*    grid-template-columns: auto 60%;*/
/*}*/


.item-list{
    /*text-align: center;*/
    /*color:#191919;*/
}

.item
{
   
    padding: 1.25rem;
    background-color: #2b2e33;
    /*border: 1px solid #c8c8c8;*/
    border-radius: 10px;
    text-align: left;
}

.item *[data-module="image"]
{
    margin-bottom: 40px;
}

.item img
{
    width:100%;
}



.item .title
{
    display: block;
    font-size: clamp(18px, 4vw, 26px);
    margin-top:20px;
    margin-bottom:20px;
    color:white;
}

.item .description
{
    font-size:15px;
    margin-bottom:20px;
    /*font-family: 'Open Sans';*/
    /*color:#7b7b7b;*/
}

/*.item-list .grid-3>div:first-child{*/
/*    grid-column-start: 1;*/
/*    grid-column-end: 3;*/
/*}*/


   


@media only screen and ( max-width: 800px)
{
   .item{
       text-align: center;
   }
    
   .item-list .grid-3>div:first-child
   {
        grid-column-start: unset;
        grid-column-end:unset;
    }
    
  /*.item-list .grid-3>div:first-child img{*/
  /*  width: unset;*/
  /*  }*/

}




/*.item-list{*/
/*    text-align: center;*/
/*    color:#191919;*/
/*}*/


/*.item-list > div*/
/*{*/
/*    padding: 1.25rem;*/
/*}*/

/*.item-list > div *[data-module="image"]{*/
/*    margin-bottom: 40px;*/
/*}*/


/*.item-list img*/
/*{*/
/*    border-radius:4px;*/
/*}*/

/*.item-list > div .title*/
/*{*/
/*    display: block;*/
/*    font-size: clamp(18px, 4vw, 26px);*/
/*    margin-top:20px;*/
/*    margin-bottom:20px;*/
/*    color:#5a5a5a;*/
    
/*}*/

/*.item-list > div .description*/
/*{*/
/*    font-size:14px;*/
/*    margin-bottom:20px;*/
/*    font-family: 'Open Sans';*/
/*    color:#b3b3b3;*/
/*}*/

   




/*#paypal-button-container{*/
/*    max-width: 300px;*/
/*    padding-top: 50px;*/
/*}*/

/*@media only screen and ( max-width: 800px)*/
/*{*/
/*    #paypal-button-container{*/
/*    max-width: unset;*/
/*}*/
/*}*/






[data-module="title-description"] .title
{
    display: block;
    font-size:35px;
    font-size: clamp(18px, 4vw, 26px);
    margin-top:20px;
    margin-bottom:20px;
    color: white;
}


[data-module="title-description"] .description
{
    margin-bottom:20px;
    color:#a4a4a4;
}

/*[data-module="title-description"] img*/
/*{*/
    /*max-width: 700px;*/
/*    max-height: 60vh;*/
    /* height: 100%; */
    /*width: auto;*/
/*    object-fit: contain;*/
/*}*/



.main-image-menu{
   width: 100%;
    text-align: center;
    padding: 0;
    margin-top:30px;
}

.main-image-menu>div{
    display: inline-block;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    border: 2px solid #c8c8c8;
    cursor: pointer;
}

.main-image-menu>div.selected{
   background-color: white;
}



.page-footer
{
    padding: 50px;
    background-color: #24242b;
    
    color: white;
    text-align:center; line-height: 26px; font-size: 14px;
}