:root{
   --logo-color: #fff;
   --menu-color: #aa8f5c;
   --header-color: #373D20; 
   --footer-color: #373D20; 
   --logo-color: #373D20; 
   --background: #EFF1ED; /*white */
   --dark-text: #BCBD88 ;


   --col-width: 300px;
   --max-width: 1500px;
   --min-width: 375px;
}
 

.filflash {fill:var(--dark-text)}
.filnkyle {fill:var(--dark-text);fill-rule:nonzero}
.filvfx {fill:var(--logo-color);fill-rule:nonzero}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    user-select: none; 
    /* border: 1px solid red;; */
  }

 body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 10px;
    background-color: var(--background);
 }

 h1{
    color: var(--dark-text);
 }

 .container {
   position: relative;
   max-width: var(--max-width);
   margin: auto;
   padding: 0;
   overflow: hidden; 
   min-width: var(--min-width);
 }

 .header-container {
   max-width: none;
 }



 #main-logo{
   width: 100%;
   min-width: var(--min-width);
   overflow: hidden;
   background-color: var(--header-color);
   margin: 0;
   padding: 0;
   border:0;
}


 /* showcase */
#showcase .showcase-content {
   z-index: 1;
   padding: 0 2rem;
   min-height:700px;
   margin: 0.25rem;
   align-items: center;
   justify-content: center;
   
}
 
 #showcase .showcase-content p {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }


  /* FOOTER */
#main-footer {
   padding: 0px 20px;
   min-width: var(--min-width);
   background-color: var(--footer-color);
   color: var(--dark-text);
}

#main-footer h3 {
   padding: 0;
}

#main-footer li {
   list-style-type: none;
}

#main-footer a {
   color: var(--dark-text);
   cursor: pointer;
}

#main-footer a:hover {
   color: var(--white-color);
}

#main-footer .footer-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 1.5rem;
   padding: 1.5rem 0;
   font-size: 0.75rem;
}




.logo{
   box-sizing:content-box;
   height:120px;
   width:400px;
   padding: 0px 0px;
   fill:var(--logo-color);
   float:left;
   
   
}

#about{
   display: block;
}

#term1{
   display: none;
}


#main-nav{
   background-color: var(--menu-color);
   width:100%;
   height:40px;
}
.menu-btn {
   background-color: var(--logo-color);
   padding:4px;
   margin: 4px;
   width:100px;
   float:left;
}

#logoname{
   float:left;
    font-size: 40px;
    width: calc(100% - 400px - 400px);
    text-align: center;
    padding: 20px;
    line-height: 1;
    height: 120px;
}

/* MEDIA QUERIES */
@media screen and (max-width: calc(4 * 300px)){
   #main-footer .footer-container {grid-template-columns: repeat(2, 1fr);}
   #logoname{font-size: 30px;padding: 30px;}
}


@media screen and (max-width: calc(2 * 300px)){
   #main-footer .footer-container {grid-template-columns: repeat(1, 1fr);}
   .logo{float:none;width: 100%;}
   #logoname{width:100%;float: none;font-size: 20pt;}
}