import url('https://fonts.googleapis.com/css?family=El+Messiri');

html, body {

  height: 100%;

  padding: 0;

  margin: 0;

}

body {

  font-family: 'El Messiri', sans-serif;

  background: #444444;

}

#header {

  background: url(https://i.imgur.com/ZmrjWRm.jpg) no-repeat center top;

  background-size: cover;

  position: fixed;

  height: 90%;

  bottom: 10%;

  right: 0;

  left: 0;

  top: 0;

}

#header .center {

  background: rgba(0, 0, 0, 0.25);

  text-align: center;

  position: absolute;

  color: #FFFFFF;

  color: #F5F7FA;

  bottom: 0;

  right: 0;

  left: 0;

  top: 0;

}

#header .center .middle {

  position: absolute;

  margin-top: -8em;

  right: 0;

  left: 0;

  top: 50%;

}

#header .center .middle h1 {

  font-family: 'El Messiri', sans-serif;

  font-weight: normal;

  line-height: 1em;

  font-size: 11em;

  margin: 0;

  text-shadow: -3px 13px 18px black;

}

#header .center .middle span {

  line-height: 5em;

  font-size: 1em;

}

#pageHr {

  background: #FFFFFF;

  position: relative;

  height: 5px;

  display: block;

  right: 0px;

  left: 0px;

  top: 90%;

  z-index: 1;

}

#pageHr > i {

  margin: -25px;

  border: 5px solid #FFFFFF;

  height: 40px;

  width: 40px;

  background: #3c4e69;

  position: absolute;

  display: block;

  left: 50%;

  top: 50%;

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

}

#pageHr > i > i {

  font-family: 'El Messiri', sans-serif;

  line-height: 36.8px;

  font-size: 20px;

  height: 40px;

  width: 40px;

  text-align: center;

  position: absolute;

  color: #FFFFFF;

  display: block;

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg);

}

#page {

  background: #3c4e69;

  position: relative;

  height: 123.45%;

  top: 90%;

}