@charset "utf-8";
/* CSS Document */

/*------------------------------MainBody------------------------------*/
#MainBody {
	z-index:1;
	height: auto;
	width:100%;
	text-align:center;
	animation-duration: 1.5s;
	animation-delay:1s;
	transition-timing-function: ease-in;
	transition:all 5s ease-out;
}
#MainBody.bye {
	opacity:0;
	animation:1s;
	transition:all 5s ease-out;
	transform: translate3d(0, 800%, 0);
}

.MainBody--fadeinup {
	animation-name: fadeInUp;
}

/* CSS FOR SCROLLING - START */  

.AfterTitle {
	position:absolute;
	z-index:2;
}

.FeatureBox {
	height:auto;
	background-attachment:fixed;
	background: rgba(255,255,255,1);
	background: -webkit-linear-gradient(rgba(250,250,250, 1), rgba(255,255,255, 1) 15%, rgba(250,250,250, 1) 85%);
    background: -o-linear-gradient(rgba(250,250,250, 1), rgba(255,255,255, 1) 15%, rgba(250,250,250, 1) 85%);
    background: -moz-linear-gradient(rgba(250,250,250, 1), rgba(255,255,255, 1) 15%, rgba(250,250,250, 1) 85%);
    background: linear-gradient(rgba(250,250,250, 1), rgba(255,255,255, 1) 15%, rgba(250,250,250, 1) 85%);
	width:100%;
	display:block;
	text-align:center;
	padding:5% 0 5% 0;
	box-shadow:-5px -5px 15px rgba(0,0,0,0.5);
	color:#000;
}

.Feature {
	height: auto;
	width: 80%;
	margin: 5% 0 5% 0;
	display:inline-block;
	text-align:center;
	transition: all 0.4s ease-out;
	transform: translateX(0);
	opacity:1;
}

.ImageSocket {
	height: 300px;
	display: inline-block;
    width: 40%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: all 0.1s ease-out;
	z-index:6;
	border:solid 5px rgba(255,255,255,1);
}

.FeatureImage1 {
	background-image:url(Images/FeatureImage1.jpg);
	background-position: 50% 75%;
}

.FeatureImage2 {
	background-image:url(Images/FeatureImage2.jpg);
}

.FeatureImage3 {
	background-image:url(Images/FeatureImage3.jpg);
}

.FeatureImage4 {
	background-image:url(Images/FeatureImage4.jpg);
	background-position: 50% 20%;
}

.TextSocket {
	height: auto;
	display: inline-block;
    vertical-align:top;
    width: 30%;
	padding: 0 1% 0 1%;
	font-family:'Oswald', san-serif;
	text-align:center;
	transition: all 0.1s ease-out;
	-webkit-text-size-adjust: 100%;
	z-index:5;
}

.TextSocket h2 {
	font-weight: 1000;
	margin:0;
	font-size:30px;
	line-height:33px;
}

.TextSocket p {
	font-weight: 300;
	font-size: 20px;
	margin:0;
	padding: 3% 0 0 0;
}

.FeatureImageLeft {
	box-shadow: -60px 60px 10px 0 rgba(170, 17, 17, 0.1);
}

.FeatureImageRight {
	box-shadow: 60px 60px 10px 0 rgba(170, 17, 17, 0.1);
}

.FeatureTextLeft {
	text-align:left;
	text-shadow: 60px 60px 10px rgba(170, 17, 17, 0.1);
}

.FeatureTextRight {
	text-align:right;
	text-shadow: -60px 60px 10px rgba(170, 17, 17, 0.1);
}

.FeatureTextGo {
	display:none;
}


.Quote-parallax {
	text-align:center;
	font-family: 'Oswald', san-serif;
	height:auto;
	padding: 50px 0;
	background-color:#000;
	color:#FFF;
	width:100%;
	font-size: 22px;
	overflow: hidden;
	position: relative;
	transition: all 0.5s ease-out;
}

.Quote-parallax2 {
	text-align:center;
	font-family: 'Oswald', san-serif;
	height:auto;
	padding: 50px 0;
	background-color:#000;
	color:#FFF;
	width:100%;
	font-size: 22px;
	overflow: hidden;
	position: relative;
	transition: all 0.5s ease-out;
}

.bcg {
	background: url(Images/Work.jpg) no-repeat;
	background-size: cover;
	background-position: 0 85%;
	filter:brightness(50%);
	-ms-filter:brightness(50%);
	position: absolute;
	width:100%;
	height: 200%;
	top: -30%;
	z-index: 1;
	opacity:1;
	transition: all 0.5s ease-out;
}

.Quote-parallax2 .bcg {
	top:-5%;
	transition: all 0.5s ease-out;
}

.content-wrapper {
	width:60%;
	margin: 0 auto;
	max-width: 1140px;
	position: relative;
	z-index: 2;
	opacity:1;
	text-align:center;
	transform: translateY(0px);
	transition: all 0.5s ease-out;
}

/* CSS FOR SCROLLING - END */

.bannerimg{
	opacity:1;
	height: 100vh;
	overflow:hidden;
	z-index:1;
}

.bannerShader {
	width:15000px;
	height:100%;
	z-index:3;
}

.tech-slideshow {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  background: url(Images/HomeBanner.jpg);
  position:absolute;
  background-position: top left;
  background-size: auto 100vh;
  background-repeat: repeat-x;
  height: 100vh;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 60s linear infinite;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}

.bannerBody{
	z-index: 1;
	width:100%;
	height:100vh;
	position:fixed;
	padding: 5% 0 0 2%;
	top:0;
	left:0;
	animation-duration: 1.5s;
	animation-delay:1s;
	transition-timing-function: ease-in;
	animation-fill-mode: both;
	box-sizing:border-box;
	background: linear-gradient(270deg, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 15%), linear-gradient(110deg, rgba(30,30,30,1) 50%, rgba(255,255,255,0.2) 50.1%, rgba(255,255,255,1) 50.2%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 80%);
	overflow:hidden;
}

.bannerBody--fadeinright {
	animation-name:fadeInRight;
}

.MainTitle {
	width:50%;
	height:auto;
	text-align:left;
	opacity:0;
	color:rgba(250,250,250,1);
}

.MainTitleBig{
	font-family: 'Oswald', san-serif;
	font-size: 80px;
	font-weight: 800;
}

.MainTitleSmall{
	font-family: 'Oswald', san-serif;
	font-size: 35px;
	font-weight: 500;
	line-height: 45px;
}

.downarrow{
	width:50%;
	height:auto;
	padding: 20px 5px 20px 5px;
	margin:2% 0 2% 0;
	display:inline-block;
	text-decoration:none;
	background-color:rgba(30,30,30,1);
	color:rgba(255,255,255,1);
	border:5px solid rgba(249, 223, 42, 1);
	box-shadow:20px 20px rgba(50,50,50,1);
	font-family:'Oswald', san-serif;
	transition: all 0.1s ease-in-out;
	text-align:center;
	font-size: 25px;
	letter-spacing:2px;
	font-weight:300;
	line-height:25px;
}

.downarrowhover:hover {
	background-color:rgba(255,255,255,1);
	color:rgba(30,30,30,1);
	box-shadow:5px 5px rgba(249, 223, 42, 1);
	font-weight:1000;
	border:5px solid rgba(30,30,30,1);
}
  
			/* ABOUT BODY */

.AboutProductBody {
	width:100%;
	height:auto;
	background-attachment:fixed;
	background: rgba(255,255,255,1);
	background: -webkit-radial-gradient(60%,rgba(245,245,245, 1) 40%, rgba(255,255,255, 1) 70%);
    background: -o-radial-gradient(60%,rgba(245,245,245, 1) 40%, rgba(255,255,255, 1) 70%);
    background: -moz-radial-gradient(60%,rgba(245,245,245, 1) 40%, rgba(255,255,255, 1) 70%);
    background: radial-gradient(at 60%,rgba(245,245,245, 1) 40%, rgba(255,255,255, 1) 70%);
	font-family: 'Oswald', san-serif;
	text-align:center;
	color:#000;
}

.AboutProductTitle{
	font-weight: 1000;
	font-size: 50px;
	margin-bottom:0;
	width:100%;
	height:auto;
	transition: all 0.5s ease;
}

.AboutProductMiddle {
	width:100%;
	height:auto;
}

.AboutProductText {
	width:30%;
	display:inline-block;
	transition: all 0.5s ease;
	margin: 0 3% 0 10%;
	vertical-align: middle;
}

.AboutProductSub {
	font-size:30px;
	width:100%;
	opacity: 0.3;
	text-align:left;
	text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
}

.AboutProductSub span {
	margin-left: 130px;
	transition: all 0.5s ease;
}

.AboutProductSubText {
	margin: 5% 0 5% 0;
	width:100%;
	text-align:left;
	transition: all 0.5s ease;
}

.AboutProductSubText h2{
	font-weight:1000;
	line-height:18px;
	font-size:30px;
}

.AboutProductSubText p {
	padding-top:5%;
	padding-bottom:5%;
	border-top: 1px solid rgba(0,0,0,0.2);
	font-weight:300;
	font-size:20px;
}

.AboutProductSubLink {
	width:auto;
	text-decoration:none;
	border: 1px solid rgba(200,200,200,1);
	background-color:rgba(230,230,230,1);
	text-align:center;
	border-radius:5px;
	color:rgba(50,50,50,1);
	padding:5% 30% 5% 30%;
	font-size:20px;
}

.AboutProductSubLink:hover {
	background-color:rgba(220,220,220,1);
	border: 1px solid rgba(170,170,170,1);
	color:#000;
}

.AboutProductImage {
	width:45%;
	display:inline-block;
	transition: all 0.5s ease;
	vertical-align: middle;
	text-align:left;
}

.AboutProductImage img {
	width: 50%;
	height:auto;
	padding:15%;
}
	
.RestrictWidth {
	max-width:1200px;
	text-align:center;
	margin:0 auto;
	width:85%;
}	

.AboutBody {
	width:100%;
	height:auto;
	background-attachment:fixed;
	background: rgba(255,255,255,1);
	background: -webkit-linear-gradient(rgba(250,250,250, 1), rgba(255,255,255, 1) 15%, rgba(250,250,250, 1) 85%);
    background: -o-linear-gradient(rgba(250,250,250, 1), rgba(255,255,255, 1) 15%, rgba(250,250,250, 1) 85%);
    background: -moz-linear-gradient(rgba(250,250,250, 1), rgba(255,255,255, 1) 15%, rgba(250,250,250, 1) 85%);
    background: linear-gradient(rgba(250,250,250, 1), rgba(255,255,255, 1) 15%, rgba(250,250,250, 1) 85%);
	padding: 5% 0 5% 0;
	font-family: 'Oswald', san-serif;
	text-align:center;
	color:#000;
}

.AboutBodyTitle{
	font-weight: 1000;
	font-size: 50px;
	margin-bottom:0;
	width:100%;
	height:auto;
	transition: all 0.5s ease;
}

.AboutBodyText {
	width:35%;
	display:inline-block;
	transition: all 0.5s ease;
	margin: 0 5% 0 5%;
	vertical-align: middle;
	text-align:left;
}

.AboutBodyInfo h2{
	font-weight:500;
	line-height:18px;
}

.AboutBodyInfo p{
	padding:2% 0 2% 0;
	border-top: 1px solid rgba(0,0,0,0.2);
	font-weight:300;
}

.AboutBodyImage {
	width:40%;
	display:inline-block;
	transition: all 0.5s ease;
	vertical-align: middle;
}

.AboutBodyImage img {
	width:100%;
	text-align:center;
}

@media all and (max-width: 1250px) {

	.Feature {
		max-width:800px;
		width: 90%;
	}
	
	.FeatureImageLeft {
		box-shadow: -30px 30px 10px 0 rgba(150,150,150,0.1);
	}

	.FeatureImageRight {
		box-shadow: 30px 30px 10px 0 rgba(150,150,150,0.1);
	}

	.FeatureTextLeft {
		text-align:left;
		text-shadow: 30px 30px 10px rgba(150,150,150,0.2);
	}

	.FeatureTextRight {
		text-align:right;
		text-shadow: -30px 30px 10px rgba(150,150,150,0.2);
	}
	
	.ImageSocket {
		width:43%;
	}
	
	.TextSocket {
		width: 43%;
	}
	
	.bannerBody {
		padding: 6% 0 0 2%;
	}
	
	.MainTitleBig {
		font-size:60px;
	}
	
	.MainTitleSmall {
		font-size:25px;
		font-weight:300;
		line-height:35px;
	}
	
	.downarrow{
		padding: 15px 5px 15px 5px;
		margin:4% 0 4% 0;
		display:inline-block;
		text-decoration:none;
		background-color:rgba(30,30,30,1);
		color:rgba(255,255,255,1);
		border:5px solid rgba(249, 223, 42, 1);
		box-shadow:20px 20px rgba(50,50,50,1);
		font-family:'Oswald', san-serif;
		transition: all 0.1s ease-in-out;
		text-align:center;
		font-size: 20px;
		letter-spacing:2px;
		font-weight:300;
		line-height:20px;
	}
	
	.topBannerButton {
		margin:0 0 4% 0;
	}

	.downarrowhover:hover {
		background-color:rgba(255,255,255,1);
		color:rgba(30,30,30,1);
		box-shadow:5px 5px rgba(249, 223, 42, 1);
		font-weight:1000;
		border:5px solid rgba(30,30,30,1);
	}
}

/* IPAD */

@media all and (min-width: 737px) and (max-width: 1024px) {

	.bannerimg{
		background-attachment: fixed;
		background-position: 230% -40%;
		background-repeat: no-repeat;
		background-size: 90%;
		opacity:1;
		height: 100vh;
		overflow:hidden;
		z-index:1;
	}
	
	.bannerBody {
		padding: 8% 0 0 2%;
	}
	
	.MainTitle {
		width:60%;
	}
	
	.FeatureTextGo {
		display:inline-block;
	}
	
	.FeatureTextHere {
		display:none;
	}
	
	.TextSocket {
		width:60%;
	}
	
	.ImageSocket {
		width:60%;
	}
	
	.FeatureTextLeft {
		margin-top: 5%;
	}

	.AboutProductSub {
		font-size:20px;
	}
	
	.AboutProductSubText {
		font-size:15px;
	}
	
	.AboutProductSub span {
	margin-left: 80px;
	transition: all 0.5s ease;
	}
	
	.AboutProductText {
		width:60%;
		display:inline-block;
		transition: all 0.5s ease;
		margin: 5% 0 0 0;
		text-align:center;
	}

	.AboutProductImage {
		text-align:center;
		margin: 0 0 5% 0;
	}

	.AboutProductImage img {
		width:75%;
	}
	
	.AboutBody {
		height: auto;
	}
	
	.AboutBodyText{
		width:60%;
		text-align:left;
		float:none;
		margin:0;
	}
	
	.AboutBodyText p {
		font-size:15px;
	}
	
	.AboutBodyImage img {
		width:100%;
	}
	
	.AboutBodyImage {
		width:60%;
		float:none;
	}

}

/* IPHONE LANDSCAPE */
@media all and (max-width:736px) {
	
	.bannerimg{
		background-attachment: fixed;
		background-position: 0% -40%;
		background-repeat: no-repeat;
		background-size: 170%;
		opacity:1;
		height: 100vh;
		overflow:hidden;
		z-index:1;
	}
	
	.content-wrapper {
		font-size:12px;
	}
	
	.TextSocket h2 {
		text-align:left;
	}
	
	.FeatureTextGo {
		display:inline-block;
	}
	
	.FeatureTextHere {
		display:none;
	}
	
	.TextSocket {
		width:80%;
	}
	
	.ImageSocket {
		width:80%;
	}
	
	.FeatureTextLeft {
		margin-top: 5%;
	}
	
	.bannerBody {
		padding: 10% 0 0 2%;
	}
	
	.MainTitle {
		width:80%;
	}
	
	.MainTitleBig {
		font-size:40px;
	}
	
	.MainTitleSmall {
		font-size:15px;
		line-height:25px;
	}
	
	.downarrow {
		font-size:15px;
		width:30%;
		padding: 5px 5px 5px 5px;
		margin:2% 30% 2% 0;
		border:3px solid rgba(249, 223, 42, 1);
		box-shadow:10px 10px rgba(50,50,50,1);
	}
	
	.downarrowhover:hover {
	background-color:rgba(255,255,255,1);
	color:rgba(30,30,30,1);
	box-shadow:2px 2px rgba(249, 223, 42, 1);
	font-weight:1000;
	border:3px solid rgba(30,30,30,1);
}
	
	.topBannerButton {
		margin: -4% 30% 2% 0;
	}
	
	.AboutProductMiddle {
		height:auto;
	}
	
	.AboutProductTitle {
		font-size: 30px;
	}
	
	.AboutProductText {
		width:60%;
		margin: 0 5% 0 5%;
	}
	
	.AboutProductSub {
		font-size:20px;
		text-align:center;
	}
	
	.AboutProductSubText {
		font-size:12px;
	}
	
	.AboutProductSub span {
	margin-left: 65px;
	transition: all 0.5s ease;
	}
	
	.AboutProductSubLink {
	margin: 5% 0 5% 0;
	}

	.AboutProductImage {
		text-align:center;
		width:40%;
		transition: all 0.5s ease;
	}
	
	.AboutProductImage img {
		width:75%;
	}
	
	.RestrictWidth {
	max-width:1200px;
	text-align:center;
	margin:0 auto;
	width:90%;
	}	

	.AboutBody {
		height: auto;
	}
	
	.AboutBodyText{
		width:60%;
		text-align:center;
		float:none;
	}
	
	.AboutBodyText p {
		font-size:12px;
	}
	
	.AboutBodyImage img {
		width:100%;
	}
	
	.AboutBodyImage {
		width:60%;
		float:none;
	}
	
	.SecondJump {
		margin:5% 0 5% 0;
	}
}

/* IPHONE PORTRAIT */
@media all and (max-width: 414px) {
	
	.bannerimg{
		background-attachment: fixed;
		background-position: 20% -90%;
		background-repeat: no-repeat;
		background-size: 230%;
		opacity:1;
		height: 100vh;
		overflow:hidden;
		z-index:1;
	}
	
	.content-wrapper {
		font-size:15px;
	}
	
	.bannerBody{
		z-index: 1;
		width:100%;
		position:fixed;
		animation-duration: 1.5s;
		animation-delay:1s;
		transition-timing-function: ease-in;
		animation-fill-mode: both;
		box-sizing:border-box;
		margin:0 auto;
		color:#000;
		background: linear-gradient(180deg, rgba(30,30,30,0.5) 0%, rgba(30,30,30,0.5) 30%, rgba(30,30,30,0) 100%);
		padding:15% 0 0 0;
	}
	
	.MainTitle {
		text-align:center;
		margin: 0 auto;
	}
	
	.MainTitleSmall {
		font-size:20px;
	}
	
	.downarrow {
		width:50%;
		margin:2%;
		padding:20px;
	}
	
	.FeatureTextGo {
		display:inline-block;
	}
	
	.FeatureTextHere {
		display:none;
	}
	
	.TextSocket {
		width:90%;
	}
	
	.ImageSocket {
		width:90%;
	}
	
	.FeatureTextLeft {
		margin-top: 5%;
	}
	
	.RestrictWidth {
	max-width:1200px;
	text-align:center;
	margin:0 auto;
	width:100%;
	}	
}