:root{
  --clr-primary:#f2e6d9;
  --clr-secondary:#604020;
   --clr-third:#333;
/*
--clr-primary:#ff80bf;
*/
}
body{
  background-color: var(--clr-primary);
}
* {
    box-sizing: border-box;
     margin: 0;
     padding: 0;
    }
    .burgerMenu{
      padding:0.7rem;
      float: right;
    }
    
    .nav_layout{
      margin-top: 4.5rem;
        width: 100%;
        
        display:none;
        background-color:var(--clr-dark);
    }
    .top-nav{
      width:100%;
      position:fixed;top:0;
      background-color:var(--clr-secondary);
    }
    .logo{
      padding: 0.5rem;
    
      
    }
    .top-nav-bar{
      display:inline;
      margin-left:1.5rem;
      margin-top: 0.5rem;
    
    }
    .top-nav-bar-right{
      display:inline;
      margin-top: 0.5rem;
      margin-right: 0.5rem;
      float: right;
    }
    .page_layout{
        margin-top: 4.5rem;
        width: 100%;
        min-height: 90vh;
       
    }
    .show{display:block!important}
    .hide{display:none}
     /* Remove default margin */
     body,
     h1,
     h2,
     h3,
     h4,
     p,
     figure,
     blockquote,
     dl,
     dd {
       margin: 0;
       font-family:'Poppins',Arial, sans-serif;
        font-weight: bold;   
     }
     /* fonts */
     h1{
        color:var(--clr-secondary);
        font-size: 2.1rem;
        font-weight: 900;    
     }
     h2{
    color:var(--clr-secondary);
     font-size: 1.8rem;
     font-weight: 900;
     }
     h3{
      color:var(--clr-secondary);
       font-size: 1.4rem;
       font-weight: 900;
       }         
     p{
       font-size: 1rem;
       padding: 0.5rem;
       color:var(--clr-secondary);
     }
     .p-menu{
      font-size: 1rem;
      padding: 0.5rem;
      color:var(--clr-secondary);
    }
    .p-title{
      color:var(--clr-primary);
       font-size: 1.5rem;
       font-weight: 900;
       padding: 0.5;
       text-align: center;
    }
   .shadow{  text-shadow: 2px 2px #ffff00;}
     /* links btns */
     .a:link, .a:visited {
      background-color:var(--clr-secondary);
      color: white;
      padding: 14px 25px;
      text-align: center;
      font-weight: bold;
      font-size: 1.2rem;
      text-decoration: none;
      display: inline-block;
      border-radius: 0.5rem;
    }  
    .a:hover, .a:active {
      background-color:var(--clr-primary);
      color:var(--clr-secondary);
      border:1px solid var(--clr-third);
    }
    .a-dark:link, .a-full:visited {
      color: white;
      padding: 0.7rem;
      text-align: center;
      font-weight: bold;
      font-size: 1.1rem;
      text-decoration: none;
      display: inline-block;
   
    } 
    .a-dark:hover, .a-dark:active {
      background-color:var(--clr-primary);
      color:var(--clr-secondary);
      border:1px solid var(--clr-third);
    }
    .a-light:link, .a-light:visited {
      color:var(--clr-secondary);
      padding: 0.7rem;
      text-align: center;
      font-weight: bold;
      font-size: 1.1rem;
      text-decoration: none;
      display: inline-block;
   
    } 
    .a-light:hover, .a-light:active {
      background-color:var(--clr-secondary);
      color:var(--clr-primary);
      border:1px solid var(--clr-third);
    }
    .btn-clear{border:none;border-radius: 0.5rem;display:inline-block;padding:0.7rem 1rem;vertical-align:middle;overflow:hidden;text-decoration:none;font-weight:bold;font-size:1rem;color:#604020;background-color:#f2e6d9;text-align:center;cursor:pointer;white-space:nowrap}
    .btn-close{width: min-content;border:none;display:inline-block;padding:0.3rem 0.5rem;vertical-align:middle;overflow:hidden;text-decoration:none;font-weight:bold;font-size:1rem;color:#fff;background-color:red;text-align:center;cursor:pointer;white-space:nowrap}
    .btn-green{border:none;border-radius: 0.5rem;display:inline-block;padding:0.7rem 1rem;vertical-align:middle;overflow:hidden;text-decoration:none;font-weight:bold;font-size:1rem;color:#000;background-color:rgb(55, 177, 55);text-align:center;cursor:pointer;white-space:nowrap}
    .btn-yellow{width: min-content;border:none;border-radius: 0.5rem;display:inline-block;padding:0.7rem 1.4rem;vertical-align:middle;overflow:hidden;text-decoration:none;font-weight:bold;font-size:1rem;color:#000;background-color:yellow;text-align:center;cursor:pointer;white-space:nowrap}
    .btn-red{width: min-content;border:none;border-radius: 0.5rem;display:inline-block;padding:0.7rem 1.4rem;vertical-align:middle;overflow:hidden;text-decoration:none;font-weight:bold;font-size:1rem;color:#fff;background-color:red;text-align:center;cursor:pointer;white-space:nowrap}
    button{border:none;border-radius: 0.5rem;display:inline-block;padding:0.7rem 1.4rem;vertical-align:middle;overflow:hidden;text-decoration:none;font-weight:bold;font-size:1rem;color:var(--clr-primary);background-color:var(--clr-secondary);text-align:center;cursor:pointer;white-space:nowrap}
    button:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}    
/* table */
.table,.table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.table-all{border:1px solid #ccc}
.bordered tr,.table-all tr{border-bottom:1px solid #ddd}.striped tbody tr:nth-child(even){background-color:#f1f1f1}
.table-all tr:nth-child(odd){background-color:#fff}.table-all tr:nth-child(even){background-color:#f1f1f1}
.hoverable tbody tr:hover,.ul.hoverable li:hover{background-color:#ccc}.centered tr th,.centered tr td{text-align:center}
.table td,.table th,.table-all td,.table-all th{padding:0.5rem 0.5rem;display:table-cell;text-align:left;vertical-align:top;font-size: 1.1rem;color: #604020}
.table th:first-child,.table td:first-child,.table-all th:first-child,.table-all td:first-child{padding-left:0.5rem;font-size: 1.1rem;;}
/*  img*/
img{
  vertical-align: middle;
  max-width: 100%;

}
.img-full{
  max-width: 100%;
  margin: 0;
}
.img-box{
  height:400px;
  object-fit:cover;
  aspect-ratio: 1/1;
}     
/*  pos*/
.display-container{position:relative}
.top,.bottom{position:fixed;width:100%;z-index:1}.top{top:0}.bottom{bottom:0}
.overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.display-topleft{position:absolute;left:0;top:0}.display-topright{position:absolute;right:0;top:0}
.display-bottomleft{position:absolute;left:0;bottom:0}.display-bottomright{position:absolute;right:0;bottom:0}
.display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-container:hover .display-hover{display:block}.display-container:hover span.display-hover{display:inline-block}.display-hover{display:none}
/* animations */


/* m & pad */   
.pd{
  padding: 0.5rem;
}
.ml{
  margin-left:1rem;
}
.mr{
  margin-right:1rem;
}
.container{
  padding: 1rem;
}
.clear{
	clear:both;
}

/* colors */
.bg-white{
  background-color: #fff;
}
  .bg-one{
  background-color:var(--clr-secondary);
  }
  .bg-two{
  background-color:var(--clr-primary);
  }
  .bg-border{
    border: solid 1px var(--clr-secondary);
    border-radius: 0.5rem;
    }
  .f-dark{
    color:var(--clr-secondary)!important;
    }
	
.red{
	color: red!important;
}
.brown{
  color: var(--clr-secondary)!important;
  } 
  .wt{
  color: #fff!important;
  } 
.alert{ border:solid 1px red;
}
.bd-left{
  border-left: 1px dashed #ccc;
}
.bd-btm-dotted{
  border-bottom: 1px dashed #ccc;
}
 /* widths */
.page-993{
    max-width: 80rem;
    margin: 0 auto;  
} 
.page-1400{
    max-width: 105rem;
    margin: 0 auto;  
}
.page-1920{
  max-width: 120rem;
  margin: 0 auto;
}

/* elements */
label{
font-size: 1.2rem;
color:var(--clr-secondary);
  }
.input{margin-bottom: 1rem;padding:1rem;display:block;border:1px solid #ccc;width:100%}
.panel{
  padding: 1rem;
  margin: 0.8rem;
}    


.v-container{
    display: flex;
    flex-direction: column;    
}
.h-container{
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;

}
.half{
  width: 50%;
  float: left;
}
.top-sep{
  margin-top: 4rem;
}   
/* end main menu*/ 
main{
  margin: 0.1rem 0.5rem; 
}     

    .box-v{
      display:flex;
      flex-direction: column;
  
      padding: 0.5rem;
    }
    /* Menu-Grid */
    .grid-menu {
      margin: 0.7rem 0.5rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 0.5rem;
      padding: 0.5rem;
    }
    /* Grid-4 */
    .grid-four {
      margin: 0.7rem 0.5rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 1rem;
      padding: 0.5rem;
    }
    .grid-four > div {
      border:1px solid var(--clr-secondary);
      border-radius: 0.5rem;
       padding: 1rem 0;
    }
   /* Grid-3 */
   .grid-three {
    margin: 0.7rem 0.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    padding: 0.5rem;
  }
  .grid-three > div {
    border:1px solid var(--clr-secondary);
    border-radius: 0.5rem;
     padding: 1rem 0;
  }
    /* Grid-2 */   
     .grid-two {
      margin: 0;
      display: grid;

      grid-template-columns: repeat(2, 1fr);
      grid-gap: 1rem;
      padding: 0.5rem;
      align-items: center;
    }
    .grid-two > div {
    padding: 0.1rem;
    }
   
    /* Contact-Grid */ 
    .grid-contact {
      display: grid;
      margin: 0.7rem 0.5rem;
      grid-template-areas: 'myArea myArea myArea myArea';
      grid-gap: 1rem;
    
    }
    .grid-contact > div {
      border:1px solid var(--clr-secondary);
      border-radius: 0.5rem;
       padding: 2rem 0;
    }
/* Extra small devices (phones, 600px and down) */
@media (max-width:600px) {
  .top-nav-bar{
    display:none;
  }
.grid-menu{
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 1rem;
  padding: 0.5rem;
  }
  .grid-four {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem;
    padding: 0.5rem;
  }
  .grid-three {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem;
    padding: 0.5rem;
  }
  .grid-two {
    margin: 0.7rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 0.5rem;
    padding: 0.5rem;
    align-items: center;
    border:1px solid #333;
    border-radius: 0.5rem;
  }
  .grid-contact {
  display: grid;
  margin: 0.7rem;
  grid-template-areas: 'myArea';
  grid-gap: 0.7rem;
  
  }
}
    
/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) and (max-width:768px) {
  .top-nav-bar{
    display:none;
  }
 .grid-menu{
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 1rem;
  padding: 0.5rem;
 } 
  .grid-four {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem;
    padding: 0.5rem;
  }
  .grid-three {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem;
    padding: 0.5rem;
  }
  .grid-two {
    margin: 0.5rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 0.5rem;
    padding: 0.5rem;
    align-items: center;
    border:1px solid #333;
    border-radius: 0.5rem;
  }

   .grid-contact {
    display: grid;
    margin: 0.7rem;
    grid-template-areas: 'myArea myArea';
    grid-gap: 0.7rem;
  
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 769px) and (max-width:1280px)  {
  .top-nav-bar{
    display:none;
  }
.grid-menu{
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 1rem;
  padding: 0.5rem;
  }
  .grid-four {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 1rem;
    padding: 0.5rem;
  }
  .grid-three {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem;
    padding: 0.5rem;
  }
  .grid-two {
    margin: 0.7rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 0.5rem;
    padding: 0.5rem;
    align-items: center;
    border:1px solid #333;
    border-radius: 0.5rem;
  }

   .grid-contact {
    display: grid;
    margin: 0.7rem;
    grid-template-areas: 'myArea myArea';
    grid-gap: 0.7rem;
  
  }
}
@media print {
   .noprint {
	  /* visibility: hidden; */
	  display:none;
   }
   .top-sep{margin-top:0;}
}