/* ================== HEADER ================== */

.header-image {

  width: 100vw;

  height: 100vh;

  background: url("../images/static-interactive-bg.jpg");

  -webkit-background-size: cover;

  background-size: cover;

  background-position: center center;

}



.header-interactive {

  position: absolute;

  background: url("../images/glass.png") -25px -50px;

  width: 100vw;

  height: 100vh;

  background-position: center center;

  -webkit-background-size: calc(100% + 50px);

  background-size: calc(100% + 50px);

  z-index: 300;

}



.header-content {

  position: absolute;

  bottom: 120px;

}



.header-content-wrapper {

  height: 100vh;

  position: relative;

}



.jm-greeting {

  font-family: "OswaldBold";

  font-size: 28px;

  line-height: 28px;

  text-transform: uppercase;

  margin-bottom: 10px;

}



.jm-name {

  font-family: "OswaldBold";

  font-size: 80px;

  line-height: 80px;

  text-transform: uppercase;

  margin-bottom: 10px;

}



.jm-career {

  font-family: "OswaldRegular";

  font-size: 34px;

  line-height: 34px;

  text-transform: uppercase;

  margin-bottom: 20px;

}



.jm-start {

  position: relative;

  z-index: 1000;

}



/* FOR VERTICAL SCROLLING + common with horizontal */

.jm-start a {

	font-family: "OswaldRegular";

	font-size: 21px;

	text-transform: uppercase;

	text-decoration: none;

	letter-spacing: 1px;

  outline: none;

}



.jm-start a:after {

	font-family: "icomoon";

	content: "\ee5f";

	speak: none;

	font-size: 16px;

	margin-left: 13px;

  position: relative;

  -webkit-animation: movearrow 1s infinite; /* Safari 4+ */

  -moz-animation:    movearrow 1s infinite; /* Fx 5+ */

  -o-animation:      movearrow 1s infinite; /* Opera 12+ */

  animation:         movearrow 1s infinite; /* IE 10+, Fx 29+ */

}



/* Arrow animation */

@-webkit-keyframes movearrow {

  0%, 100% {

    top: 0px;

  }

  50% {

    top: 7px;

  }

}



@keyframes movearrow {

  0%, 100% {

    top: 0px;

  }

  50% {

    top: 7px;

  }

}



/* FOR HORIZONTAL SCROLLING */

.hor-layout .jm-start a:after {

  content: "\ee5d";

  -webkit-animation: movearrow-hor 1s infinite; /* Safari 4+ */

  -moz-animation:    movearrow-hor 1s infinite; /* Fx 5+ */

  -o-animation:      movearrow-hor 1s infinite; /* Opera 12+ */

  animation:         movearrow-hor 1s infinite; /* IE 10+, Fx 29+ */

}



/* Arrow animation */

@-webkit-keyframes movearrow-hor {

  0%, 100% {

    left: 0px;

  }

  50% {

    left: 7px;

  }

}



@keyframes movearrow-hor {

  0%, 100% {

    left: 0px;

  }

  50% {

    left: 7px;

  }

}



/*==========  Desktop First Method  ==========*/



/* Large Devices, Wide Screens */

@media only screen and (max-width : 1200px) {



}



/* Medium Devices, Desktops */

@media only screen and (max-width : 992px) {

  /* ================== HEADER ================== */

  .header-interactive {

    display: none;

  }

}



/* Small Devices, Tablets */

@media only screen and (max-width : 768px) {







	/*Disable Animation on Mobile Devices*/

	.animated {

		/*CSS transitions*/

		-o-transition-property: none !important;

		-moz-transition-property: none !important;

		-ms-transition-property: none !important;

		-webkit-transition-property: none !important;

		transition-property: none !important;

		/*CSS transforms*/

		-o-transform: none !important;

		-moz-transform: none !important;

		-ms-transform: none !important;

		-webkit-transform: none !important;

		transform: none !important;

		/*CSS animations*/

		-webkit-animation: none !important;

		-moz-animation: none !important;

		-o-animation: none !important;

		-ms-animation: none !important;

		animation: none !important;

	}



}



/* Extra Small Devices, Phones */

@media only screen and (max-width : 480px) {



  /* ================== HEADER ================== */

  .jm-greeting {

    font-size: 22px;

    line-height: 22px;

    margin-bottom: 5px;

  }



  .jm-name {

    font-size: 70px;

    line-height: 70px;

    margin-bottom: 5px;

  }



  .jm-career {

    font-size: 26px;

    line-height: 26px;

    margin-bottom: 10px;

  }



  .jm-start a,

  .jm-start a:visited,

  .jm-start a:focus,

  .jm-start a:hover,

  .jm-start a:link,

  .jm-start a:active {

    font-size: 18px;

    line-height: 18px;

  }



  .jm-start a:after {

    font-size: 14px;

    line-height: 14px;

  }







}



/* Custom, iphone 6 */

@media only screen and (max-width : 375px) {

	/* ================== HEADER ================== */



}



/* Custom, iPhone Retina */

@media only screen and (max-width : 320px) {

	/* ================== HEADER ================== */





}





/*==========  Mobile First Method  ==========*/



/* Custom, iPhone Retina */

@media only screen and (min-width : 320px) {



}



/* Extra Small Devices, Phones */

@media only screen and (min-width : 480px) {



}



/* Small Devices, Tablets */

@media only screen and (min-width : 768px) {



}



/* Medium Devices, Desktops */

@media only screen and (min-width : 992px) {



}



/* Large Devices, Wide Screens */

@media only screen and (min-width : 1200px) {



}



.jm-greeting {

  color: white;

}



.jm-name {

  color: #d5bb8d;

}



.jm-career {

  color: #bababa;

}



.jm-start a,

.jm-start a:visited,

.jm-start a:focus,

.jm-start a:hover,

.jm-start a:link,

.jm-start a:active {

  color: white;

}



.jm-start a:after {

  color: white;

}