@import url('https://fonts.googleapis.com/css?family=Arbutus+Slab|Open+Sans:400,700');

html {
	height: 100%;
}
body {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
    font-size: 16px;
	color:#333333;
	background-color: #ffffff;
	position: relative;
	
}

h1{
	font-family: 'Arbutus Slab', serif;
	font-size:2.2em;
	margin:1em 0 0;
	color:#fff;
	text-transform:uppercase;
}

h2{
	font-family: 'Arbutus Slab', serif;
	font-size:1.7em;
	text-transform:uppercase;
	text-align:center;
	margin:1.5em 0 0;
}
	.sub-h2{
		color:#666666;
		text-transform:uppercase;
		text-align:center;
		margin:0 0 1.5em;
		font-weight:700;
	}


h3{
	font-size:1.5em;
	margin:1em 0 2.5em;
	text-align:center;
}

p{
	line-height:1.6;
}

.logo{
	text-align:center;
	padding-top: 4em;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.clearfix{
	clear:both;
}

.nobr{
	white-space:nowrap;
}

section {
	position: relative;
}

	.light{
		background:#e9e9e9;
	}
	.gray{
		background:#333333;
		color:#ffffff;
	}
	

#intro {
	position: relative;
	width: 100%;
	height: 75%;
	min-height: 600px;
	text-align: center;
	overflow:hidden;
}

#signup, #features{
	padding:4em 0 5em;
}


	#background {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -100;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		background-size: cover;
	}
	
		.video-background .overlay {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			background: #000000;
			opacity: 0.6;
			filter: alpha(opacity=60);
		}
		

	 .content {
		position: relative;
		width: 100%;
		top: 30%;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		z-index: 3;
	}

	
footer{
	color:#333333;
	background:#e9e9e9;
	padding:1.5em 0;
	text-align:center;
	font-size:0.9em;
	text-transform:uppercase;
}	
	
.action{
	position:absolute;
	left:0;
	right:0;
	bottom:4em;
	padding:0 30px;
	z-index:6;
}	
	.button{
		font-family: 'Arbutus Slab', serif;
		display:block;
		width:100%;
		max-width:400px;
		margin: 0 auto;
		height:60px;
		line-height:60px;
		background:#da4756;
		color:#ffffff;
		font-size:1.7em;
		text-transform:uppercase;
		text-align:center;
		border-radius:30px;
		position:relative;
		transition:all 0.5s;
	}
		 .button:hover{
			color:#ffffff;
			text-decoration:none;
			animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
		}
		.button:active,
		.button:focus{		
			color:#ffffff;
			text-decoration:none;
		}

	@keyframes shake {
	  10%, 90% {
		transform: translate3d(-1px, 0, 0);
	  }
	  
	  20%, 80% {
		transform: translate3d(2px, 0, 0);
	  }

	  30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	  }

	  40%, 60% {
		transform: translate3d(4px, 0, 0);
	  }
	}
.features{
	text-align:center;
}			
	.feature{
		width:20%;
		float:left;
		padding:0 2%;
		margin-top:1em;
	}
		
		.feature .ico{
			width:160px;
			height:160px;
			margin:0 auto;
			background-color:#ffffff;
			border-radius:50%;
			display:block;
			transition:all 1s;
		}
		
			.feature .ico div{
				width:100%;
				height:100%;
				transition:all 1s;
			}
		
			.feature .ico .ondemand{
				background:url('../img/ondemand.png') 50% 50% no-repeat;
			}
		
			.feature .ico .auto{
				background:url('../img/auto.png') 50% 50% no-repeat;
			}
		
			.feature .ico .ubi{
				background:url('../img/ubi.png') 50% 50% no-repeat;
			}
		
			.feature .ico .group{
				background:url('../img/group.png') 50% 50% no-repeat;
			}
		
			.feature .ico .life{
				background:url('../img/life.png') 50% 50% no-repeat;
			}
			
			.feature .ico:hover{
				transform: scale(1.1);
			}	
			
			.feature .ico:hover div{
				transform: scale(0.9);
			}	
		
		.feature p{
			text-align:center;
		}

@media (max-width: 1199px){
	.feature{
		width:32%;
		float:none;
		display:inline-block;
		vertical-align:top;
	}
	
}

@media (max-width: 767px){
	body{
		font-size:14px;
	}
	
	#signup, #features{
		padding:2em 0 3em;
	}
	
	.sub-h2{
		margin:0 0 1em;
	}

	.feature{
		width:100%;
		max-width:370px;
		margin:2em auto 0;
		display:block;
		height: auto !important;
	}
	
}