:root {
  --green: #70A742;
  --darkgray: #1b1b1b;
  --silver: #334024;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Arial;
}
.wrap {
  /*background: rgb(65,113,145);*/
  background: linear-gradient(180deg, rgba(126,217,83,1) 10%, rgba(87,133,50,1) 90%);
  height:65%;
  display: table;
}

.img-logo {
  display: table-cell; 
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.img-logo img { 
  width: 70%;
  max-width: 600px;
  height: auto;
}

.header-image {
  background-image: url('/img/header.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 35%; 
  width: 100%;
  /*filter: contrast(1.2) grayscale(1);*/

}

/*.header-image:hover {
  filter: grayscale(0.2);
}*/

.infobox {
  width: 25%;
  background-color: var(--silver);
  color: var(--green);
  display: table-cell;
  vertical-align: top;
  padding: 20px;
}

/*font*/
@font-face {
  font-family: "roxborough";
  src: url("fonts/RoxboroughCF-Regular.eot") format("eot"),
       url("fonts/RoxboroughCF-Regular.woff") format("woff"),
       url("fonts/RoxboroughCF-Regular.woff2") format("woff2"),
       url("fonts/RoxboroughCF-Bold.eot") format("eot"),
       url("fonts/RoxboroughCF-Bold.woff") format("woff"),
       url("fonts/RoxboroughCF-Bold.woff2") format("woff2"),
       url("fonts/RoxboroughCF-RegularItalic.eot") format("eot"),
       url("fonts/RoxboroughCF-RegularItalic.woff") format("woff"),
       url("fonts/RoxboroughCF-RegularItalic.woff2") format("woff2");
}


h1 {
  /*font-family: 'roxborough'; */
  color: #D8D9DA;
}

.day {
  min-width: 30px;
  margin: 5px;
}

.time {
  opacity: 0.7;
  padding: 5px;
}

a {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

a:hover, a:active, a:focus, a:target {
  color: white;
}

/* mobile */

@media (orientation: portrait) {

  .header-image {
    background-size: fill;
    background-image: url('/img/header.png');
  }

  .wrap {
    display: block;
    
  }

  .infobox {
    display: inline-block;
    background-color: var(--silver);
    width: calc(100% - 40px);
    position: relative;

  }
 .img-logo {
    display: inline-block;
    /*background: rgb(65,113,145);*/
    background: linear-gradient(180deg, rgba(126,217,83,1) 10%, rgba(87,133,50,1) 90%);

  }

 .img-logo img {
    display: inline-block;
    width: 80%;
    
       
  }
}