/*
  web fonts from Google:
  Julius Sans One – https://fonts.google.com/specimen/Julius+Sans+One?query=julius
  Libre Baskerville – https://fonts.google.com/specimen/Libre+Baskerville?query=baskerville
 */
 @import url(http://fonts.googleapis.com/css?family=Julius+Sans+One|Libre+Baskerville:400,400italic);

 header {
  background: #2a2a2a 100% 0 url(world_map_blurred.jpeg) no-repeat; /* old IE fallback */
  background-image: url(world_map_blurred.jpeg);
  background-size:  100%, auto, auto, cover;
  box-shadow: inset 100em 0 0 0 rgba(0, 0, 0, 0.25);
  background-attachment: fixed, fixed, fixed, scroll;
  background-repeat: no-repeat repeat;
  text-align: center;
  display:flex;
  width:inherit;
  align-items: center;
}

#banner-header {
  display: inline-flex;
  padding: 20pt;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  /* font-family: 'Julius Sans One', sans-serif; */
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 1.6em;
  font-weight:500;
  color: white;
  /* text-shadow: #2a2a2a; */
  text-transform: uppercase;
}

#banner-icon {
  display: inline-flex;
  /* display: block; */
  /* position: relative; */
  /* vertical-align: baseline; */
  content: "";
  /* margin: -20px 20px 0 0; */
  background: url(icon/ifers_icon_new_clean.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
  /* padding-left: 30pt; */
  padding-right: auto;
  /* opacity: 0.6; */
}

/* for desktop screens */
@media screen and
(min-width:1080px) {
 header {
   height: 180pt;
   background-position: 0 -280px, 0 -40px, -5px -25px, 0 50%;
   padding: 20pt 40pt 20pt 40pt;
 }

 #banner-icon {
  width:180pt;
  height:180pt;
 }

}

/* for small tablet screens */
@media screen and
(max-width:1080px) {
 header {
   height: 140pt;
   background-position: 0 -100px, 0 -40px, -5px -25px, 0 50%;
   padding: 20pt 0 20pt 0;
 }

 #banner-icon {
  width:140pt;
  height:140pt;
 }
}

 /* for mobile screens */
 @media screen and
 (max-width:550px) {
  header {
    height: 120pt;
    background-position: 0 -50pt, 0 -40px, -5px -25px, 0 50%;
    padding: 20pt 0 20pt 0;
  }

  #banner-icon {
    width:120pt;
    height:120pt;
   }
 }

 /* for tiny screens */
 @media screen and
 (max-width:350px) {
  header {
    height: 100pt;
    background-position: 0 -20pt, 0 -40px, -5px -25px, 0 50%;
    padding: 20pt 0 20pt 0;
  }
  
  #banner-icon {
    width:100pt;
    height:100pt;
   }
 }