:root {
  --blue: #417191;
  --darkgray: #1b1b1b;
  --silver: #C0C0C0;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Arial;
}
.wrap {
  background: rgb(65,113,145);
  background: linear-gradient(187deg, rgba(65,113,145,1) 0%, rgba(27,27,27,1) 100%);
  height:65%;
  display: table;
}

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

.img-logo img { 
  width: 30%;
  height: auto;
}

.header-image {
  background-image: url('/img/bg_xproperty_before.jpg');
  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(--blue);
  color: var(--silver);
  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(--silver);
  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/bg_xproperty_before.jpg');
  }

  .wrap {
    display: block;
    
  }

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

  }
 .img-logo {
    display: inline-block;
    background: rgb(65,113,145);
    background: linear-gradient(187deg, rgba(65,113,145,1) 0%, rgba(27,27,27,1) 100%);

  }

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