@import url("html5reset.css");

* {
    box-sizing: border-box;
}

html, body {
  height: 100%;
  font-size: 16px;
  color: #2b2b2b;
  line-height: 1.5em;
  font-family: 'proxima-nova', sans-serif;
}


#Wrapper {
    min-height: 100%;
    position: relative;
    overflow: hidden;
    background-image: url('../_assets/images/PGF-Background.png');
    width: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    min-height: 1030px;
    display: block;
}


/* ----------------------------------------------------
		Start Header
------------------------------------------------------- */

#HeaderWrapper {
  width: 100%;
  min-width: 600px;
  display: block;
}

  #HeaderWrapper .HeaderImage {
    width: 100%;
    background-image: url('../_assets/images/Altair-UpdatedHeroImage.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    /*background-size: cover;*/
    height: 634px;
    display: table;
  }

  #HeaderWrapper .PhotoWrapper {
    width: 992px;
    height: 700px;
    margin: 0 auto;
    position: relative;
    top: -180px;
    display: table;
    margin-bottom:100px;
  }

    #HeaderWrapper .PhotoWrapper .LeftPhoto {
      width: 446px;
      height: 700px;
      background-image: url('../_assets/images/WebsiteImage-Philips-Jonathan.jpg');
      background-repeat: no-repeat;
      background-position: top center;
      float: left;
      text-align: center;
    }

    #HeaderWrapper .PhotoWrapper .RightPhoto {
      width: 446px;
      height: 700px;
      background-image: url('../_assets/images/WebsiteImage-Frantzen-Tanya.jpg');
      background-repeat: no-repeat;
      background-position: top center;
      float: right;
      text-align: center;
    }

    /* ----------------------------------------------------
		End Header
------------------------------------------------------- */

/* ----------------------------------------------------
		Footer
------------------------------------------------------- */

  #HeaderWrapper #Footer {
    text-align: center;
    position: relative;
    top: -200px;
  }



/* ----------------------------------------------------
		Responsive Styles
------------------------------------------------------- */

@media screen and ( max-width: 1700px ) and ( min-width: 1501px ) {
  #HeaderWrapper .PhotoWrapper {
    top: -220px;
  }

  #HeaderWrapper #Footer {
    top: -300px;
  }
}

@media screen and ( max-width: 1500px ) and ( min-width: 1201px ) {
  #HeaderWrapper .PhotoWrapper {
    top: -280px;
  }

  #HeaderWrapper #Footer {
    top: -360px;
  }
}

@media screen and ( max-width: 1200px ) and ( min-width: 1051px ) {
  #HeaderWrapper .PhotoWrapper {
    top: -360px;
  }

  #HeaderWrapper #Footer {
    top: -420px;
  }
}

@media screen and ( max-width: 1050px ) and ( min-width: 0px ) {
  #HeaderWrapper .PhotoWrapper {
    top: -360px;
    width: 40%;
  }

  #HeaderWrapper #Footer {
    top: -420px;
  }

  #HeaderWrapper .HeaderImage {
    min-width: 650px;
    background-position: top center;
  }


  #HeaderWrapper .PhotoWrapper .LeftPhoto {
    width: 446px;
    height: 700px;
    background-image: url('../_assets/images/WebsiteImage-Philips-Jonathan.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    margin: 0 auto;
  }

    #HeaderWrapper .PhotoWrapper .RightPhoto {
      width: 446px;
      height: 700px;
      background-image: url('../_assets/images/WebsiteImage-Frantzen-Tanya.jpg');
      background-repeat: no-repeat;
      background-position: top center;
      margin: 0 auto;
      clear: both;
    }


}


@media only screen and (max-width: 670px) {
  #HeaderWrapper .HeaderImage {
    min-width: initial;
    background-size: 150%;
  }

  #HeaderWrapper {
    width: 100%;
    min-width: initial;
    display: block;
  }
}

@media only screen and (max-width: 500px) {
  #HeaderWrapper .PhotoWrapper .RightPhoto,
  #HeaderWrapper .PhotoWrapper .LeftPhoto {
    width: 350px;
  }
}





/* ----------------------------------------------------
		End Responsive Styles
------------------------------------------------------- */
