:root {
  --dp-header-bg-color: #c9e8f8;
  --dp-header-gradient-bg-from: #E1F4FD;
  --dp-header---gradient-bg-to: #a2d5ed;
  --dp-header-height-responsive: 80px;
  --dp-header-image-width: 210px;
}

div.dp-header-container {
  position: relative;
  min-height: 270px;
  min-height: var(--dp-header-height-responsive);

  background-color: var(--dp-header-bg-color);
  /* IE10+ */
  background-image: -ms-radial-gradient(center, ellipse farthest-corner, var(--dp-header-gradient-bg-from) 0%, var(--dp-header---gradient-bg-to) 100%);
  /* Mozilla Firefox */
  background-image: -moz-radial-gradient(center, ellipse farthest-corner, var(--dp-header-gradient-bg-from) 0%, var(--dp-header---gradient-bg-to) 100%);
  /* Opera */
  background-image: -o-radial-gradient(center, ellipse farthest-corner, var(--dp-header-gradient-bg-from) 0%, var(--dp-header---gradient-bg-to) 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(radial, center center, 0, center center, 286, color-stop(0, var(--dp-header-gradient-bg-from)), color-stop(100, var(--dp-header---gradient-bg-to)));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-radial-gradient(center, ellipse farthest-corner, var(--dp-header-gradient-bg-from) 0%, var(--dp-header---gradient-bg-to) 100%);
  /* W3C Markup */
  background-image: radial-gradient(ellipse farthest-corner at center, var(--dp-header-gradient-bg-from) 0%, var(--dp-header---gradient-bg-to) 100%);
}

div.dp-header-container a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

div.dp-header-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  background-image: url('/sites/default/files/dp-header-image/xbettel_front.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--dp-header-image-width);
}

div.dp-header-bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:  url(/sites/all/modules/dp_header/header_slogan_2018.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


@media screen and (min-width: 768px) {
  :root {
    --dp-header-height-responsive: 120px;
    --dp-header-image-width: 350px;
  }
}
@media screen and (min-width: 992px) {
  :root {
    --dp-header-height-responsive: 200px;
    --dp-header-image-width: 500px;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --dp-header-height-responsive: 270px;
    --dp-header-image-width: 650px;
  }
}