:root {
  --palette1: #2196F3;
  --palette2: #3a3a3a;
  --palette3: #e74c3c;
  --palette4: #d62c1a;
  --palette5: #46100a;
  --footer-color: #575a5e;
  --orange: #e64c3c;
  --text-color: #f4f1de;
  --text-dark-color: #08090a;
  --light-gray: #a7a2a9;
}

/* General rules */
html,body {
  font-family:Verdana,sans-serif;
  font-size:16px;
  line-height:1;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
body {
  background: url(./img/background.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
h1 {font-size:1.8rem;}
h2 {font-size:1.6rem;}
h3 {font-size:1.4rem;}
h4 {font-size:1.2rem;}
h5 {font-size:1rem;}
h6 {font-size:0.8rem;}
h1, h2, h3, h4, h5, h6 {
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:400;
  margin:10px 0;
}
hr { 
  border:0;
  border-top:1px solid #eee;
  margin:20px 0;
}
img {max-width: 80%; height: auto;}
label, .overlay, .nav a { transition: all .3s;}

/*Section*/
section {
  width: 100%;
  height: 100%;
} 
.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  background: #333;
  background: rgba(51, 51, 51, 0.8);
  opacity: 0;
  visibility: hidden;
}

input {
  display: none;
}
input:checked + label:before {
  content: "\f00d";
}
input:checked ~ .overlay {
  visibility: visible;
  opacity: 1;
}

label {
  position: fixed;
  top: 0.625em;
  right: 0.625em;
  z-index: 99;
  padding: .72em 0;
  width: 3em;
  text-align: center;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  background-size: cover;
}
label:before {
  content: "\f0c9";
  font: 1.55em fontAwesome;
}
label:hover {
  background: #d62c1a;
}

.nav {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 0;
  width: 20em;
  height: 12em;
  list-style-type: none;
}

.nav a {
  display: block;
  padding: .25em 0;
  color: #fff;
  font-size: 1.85em;
  text-align: center;
  text-decoration: none;
}
.nav a:focus, .nav a:hover {
  color: var(--orange);
}
.nav a:active {
  color: #46100a;
}

.button{
  border:2px solid whitesmoke;
  border-radius: 5px;
  display:inline-block;
  padding:8px 16px;
  margin-left: 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:var(--text-color);
  background-color:transparent;
  text-align:center;
  cursor:pointer;
  white-space:nowrap
}
.button:hover {
  color:var(--orange)!important;
  font-weight: bold;
  background-color:var(--text-color)!important;
}

.button2 {
  border:2px solid var(--orange);
  border-radius: 5px;
  display:inline-block;
  padding:8px 16px;
  margin-left: 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:var(--text-dark-color);
  background-color:transparent;
  text-align:center;
  cursor:pointer;
  white-space:nowrap
}
.button2:hover, .button2 a:hover {
  color:var(--text-color)!important;
  font-weight: bold;
  background-color:var(--orange)!important;
}
.button a, .button2 a {
  text-decoration: none;
}
.button a {
  color: var(--text-color);
}
.button2 a {
  color: var(--text-dark-color);
}

.header { grid-area: header;}
.menu {grid-area: menu;}
.main {grid-area: main;}
.footer {grid-area: footer;}
.menu-container {
  display: grid;
  grid-template-areas: 
    'header header header header'
    'menu main main main'
    'footer footer footer footer';
}
.container {
  display: grid;
  grid-template-areas: 
    'header header header'
    'main main main'
    'footer footer footer';
  gap: 10px;
  /*grid-column: auto;
  margin-left: auto;
  margin-right: auto;*/
}
.container > div, .menu-container > div {
  text-align: center;
  padding: 20px 0;
}
.container h1, .menu-container h1 {
  font-size: 3rem;
} 
.container p, .menu-container p {
  font-size: 1rem;
  text-align: justify;
}

.header {
  display: inline-flex;
  flex-direction: row;
}
.header h1 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.8rem;
}


.bar-block .bar-item{width:100%;display:block;padding:16px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.bar-block.block-center .bar-item{text-align:center}.block{display:block;width:100%}
.bar:before,.bar:after{content:"";display:table;clear:both}

.menu {
  background-color: var(--orange);
}
.menu a {
  color: var(--text-color);
  background-color: brown;
  font-weight: bold;
  text-decoration: none;
  width: auto;
}
.menu a:hover {
  width: auto;
  text-align: right;
  color:var(--footer-color);
  background-color: var(--text-color);
}

.main {
  max-width: 100%;
}

.col {
  grid-column: 1;
}
.row {
  display: grid;
  grid-template-columns: 'auto auto auto';
  align-content: center;
}
.footer {
  background-color:var(--footer-color);
  text-align: center;
  align-content: center;
  vertical-align: middle;
}
.footer > img {
  max-width: 20%;
  height: auto;
}

.block-center {
  display:inline-block;
  width:auto;
  text-align: center;
}
/*
@media (min-width:601px){.quarter{width:25%}.third{width:33.33333%}.half{width:49.99999%}.twothird{width:66.66666%}
.threequarter{width:74.99999%}}*/

.hide{display:none!important}.show-block,.show{display:block!important}.show-inline-block{display:inline-block!important}
.show-inline-flex {display: inline-flex; }
.show-flex {display: flex; flex-direction: column; justify-content: stretch;}
.show-grid {display: grid;}

@media (max-width:600px) {
  /*.quarter, .third, .half, .twothird, .threequarter {width: 100%;}*/
  .hide-small{display:none!important}
  .menu-container {grid-template-areas: 'header' 'menu' 'main' 'footer';}
  .container{grid-template-areas: 'header' 'main' 'footer';}
  .show-grid { display: block;}
}
@media (max-width:992px) and (min-width:601px) {
  .quarter, .third, .half {width: 50%;}.twothird, .threequarter{width:100%}
  .show-grid {grid-template-columns: repeat(2, 1fr);}
  .hide-medium{display:none!important}
}
@media (min-width:993px){
  .quarter {width:25%}.third{width:33.33333%}.half{width:49.99999%}.twothird{width:66.66666%}
  .threequarter{width:74.99999%}
  .hide-large{display:none!important}
  .show-grid {
    grid-template-columns: repeat(2, 1fr);}
  .card {
    flex: 4;
  }
}

.top, .bottom{position:fixed;width:100%;z-index:1}.top{top:0}.bottom{bottom:0}
.row-padding,.row-padding>.half,.row-padding>.third,.row-padding>.twothird,.row-padding>.threequarter,.row-padding>.quarter,.row-padding>.col{padding:0 8px}
.container, .menu-container {padding:0.01em 16px}
.card, .card-2 {
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
.card {
  border-radius: 10px;
  font-size: 0.5rem;
}
.card p, .card-2 p {
  padding: 8px;
}
.card-4,hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.font-tiny{font-size:10px!important}.font-small{font-size:12px!important}.font-medium{font-size:15px!important}.font-large{font-size:18px!important}
.font-xlarge{font-size:24px!important}.font-xxlarge{font-size:36px!important}.font-xxxlarge{font-size:48px!important}.font-jumbo{font-size:64px!important}
.text-left-align{text-align:left!important}.text-right-align{text-align:right!important}.text-justify{text-align:justify!important}.block-center{text-align:center!important}
.opacity,.hover-opacity:hover{opacity:0.60}.opacity-off,.hover-opacity-off:hover{opacity:1}
.margin{margin:16px!important}.margin-top{margin-top:16px!important}.margin-bottom{margin-bottom:16px!important}
.margin-left{margin-left:16px!important}.margin-right{margin-right:16px!important}
.padding-small{padding:4px 8px!important}.padding{padding:8px 16px!important}.padding-large{padding:12px 24px!important}
.padding-16{padding-top:16px!important;padding-bottom:16px!important}.padding-24{padding-top:24px!important;padding-bottom:24px!important}
.padding-32{padding-top:32px!important;padding-bottom:32px!important}.padding-48{padding-top:48px!important;padding-bottom:48px!important}
.padding-64{padding-top:64px!important;padding-bottom:64px!important}
.left{float:left!important}.right{float:right!important}

/* Colors */
.blue,.hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.light-blue,.hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.orange,.hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.deep-orange,.hover-deep-orange:hover{color:#fff!important;background-color:var(--orange)!important}
.white,.hover-white:hover{color:#000!important;background-color:#fff!important}
.black,.hover-black:hover{color:#fff!important;background-color:#000!important}
.grey,.hover-grey:hover,.gray,.hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.light-grey,.hover-light-grey:hover,.light-gray,.hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.dark-grey,.hover-dark-grey:hover,.dark-gray,.hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.text-amber,.hover-text-amber:hover{color:#ffc107!important}
.text-blue,.hover-text-blue:hover{color:#2196F3!important}
.text-light-blue,.hover-text-light-blue:hover{color:#87CEEB!important}
.text-white,.hover-text-white:hover{color:#fff!important}
.text-black,.hover-text-black:hover{color:#000!important}
.text-grey,.hover-text-grey:hover,.text-gray,.hover-text-gray:hover{color:#757575!important}
.text-light-grey,.hover-text-light-grey:hover,.text-light-gray,.hover-text-light-gray:hover{color:#f1f1f1!important}
.text-dark-grey,.hover-text-dark-grey:hover,.text-dark-gray,.hover-text-dark-gray:hover{color:#3a3a3a!important}