@font-face {
	font-family:'Lato';
	src: url(fonts/Lato.eot); /* For Internet Explorer 6+ */
}
@font-face {
	font-family:'Lato';
	src: url(fonts/Lato.ttf); /* For non-IE browsers */
}
@font-face {
	font-family:'LatoBold';
	src: url(fonts/LatoBold.eot); /* For Internet Explorer 6+ */
}
@font-face {
	font-family:'LatoBold';
	src: url(fonts/LatoBold.ttf); /* For non-IE browsers */
}
@font-face {
	font-family:'LatoLight';
	src: url(fonts/LatoLight.eot); /* For Internet Explorer 6+ */
}
@font-face {
	font-family:'LatoLight';
	src: url(fonts/LatoLight.ttf); /* For non-IE browsers */
}
@font-face {
	font-family:'ArialRounded';
	src: url(fonts/ArialRounded.eot); /* For Internet Explorer 6+ */
}
@font-face {
	font-family:'ArialRounded';
	src: url(fonts/ArialRounded.ttf); /* For non-IE browsers */
}

.left {
	float:left;
	}
	
.right {
	float:right;
	}

a {
	text-decoration:none;
	color:inherit;
	}

html, body {
		height:100%;
   		width: 100%;
   		margin: 0;
   		padding: 0;
  		border: 0;
		}
 
body {
		background-image:url(bg.jpg);
		background-position:center;
		background-attachment:fixed;
		background-repeat:no-repeat;
	    background-color:#000000;
		font-family:'Lato';
		font-size:11px;
		line-height:15px;
		color:#FFFFFF;
		text-align:center;
		position: relative;
		}


.container {
		text-align:center;
	    width:1100px;
	    height:370px;
		top: 50%;
  		left: 50%;
		background-color:#ffffff;
		margin-top: -197px; /* Half the height */
   		margin-left: -550px; /* Half the width */
		position:absolute;
		box-sizing:border-box;
		color:#404040;
		font-size:13px;
}

	.container span {
			background-color:#e74c3c;
			color:#ecf0f1;
			padding:20px;
			box-sizing:border-box;
			width:100%;
			display:inline-block;
			font-family:'LatoBold';
			font-size:24px;
			text-transform:uppercase;
			line-height:30px;
		}
		
	.container b {
		background-color:#c0392b;
		color:#ffffff;
		padding:10px;
		box-sizing:border-box;
		width:100%;
		display:inline-block;
		font-family:'LatoLight';
		font-size:16px;
		}
		
	.container a.website {
		width:100%;
		display:inline-block;
		background-color:#404040;
		color:#ffffff;
		padding:10px;
		box-sizing:border-box;
		text-decoration:none;
		text-align:right;
		font-size:11px;
		position: absolute;
		bottom:-25px;
		left:0;
		}


	.container a.website i {
		margin-left:10px;
		}
		
	.container a img {
		margin-top:30px;
		margin-bottom:20px;
		}
		
	.container em {
		color:#EA701D;
		margin:0px 10px 0px 10px;
		}
		
	.container .services {
		width:100%;
		margin-top:50px;

		text-align:center;
		}
		
		
	.container .services a {
		box-sizing:border-box;
		color:#ffffff;
		padding:10px;
		font-family:'LatoLight';
		margin-right:10px;
		text-transform:uppercase;
		}
		
		.container .services a:hover {
			background-color:#ffffff!important;
			}
		
	.container .services a.web-design {
		background-color:#E5731D;
		border:1px solid #E5731D;
		}
		
		.container .services a.web-design:hover {
			color:#E5731D;
		}
		
		
	.container .services a.ecommerce{
		background-color:#16A085;
		border:1px solid #16A085;
		}
		
		.container .services a.ecommerce:hover {
			color:#16A085;
		}
		
		
		.container .services a.applications{
			background-color:#315C88;
			border:1px solid #315C88;
		}
		
		.container .services a.applications:hover {
			color:#315C88;
		}
		
		.container .services a.marketing{
			background-color:#8E44AD;
			border:1px solid #8E44AD;
		}
		
		.container .services a.marketing:hover {
			color:#8E44AD;
		}
		
		
		.container .services a.mobile {
			background-color:#3598DB;
			border:1px solid #3598DB;
		}
		
		.container .services a.mobile:hover {
			color:#3598DB;
		}
		
		
		.container .services a.graphic {
			background-color:#FCA927;
			border:1px solid #FCA927;
		}
		
		.container .services a.graphic:hover {
			color:#FCA927;
		}

@media screen and (max-width: 1100px) {
		.container {
			width:100%;
			position:static;
			margin-left:0;
			margin-top:0;
			height:auto;
			}
			
		a.website {
			position:static!important;
			bottom:0;
			}
			
		.services {
			padding:0!important;
			display:inline-block;
			}
			
		.services a {
			display:inline-block;
			}

		.container .services a {
			margin-right:0;
			font-size:12px;
			}
}


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

			.services a {
			width:40%;
			margin-bottom:10px;
			font-size:13px;
			}
			

}

@media screen and (max-width: 925px) { 
			.services a {
			width:40%;
			margin-bottom:10px;
			}

}


@media screen and (max-width: 470px) { 
			.services a {
			width:100%;
			margin-bottom:10px;
			font-size:14px!important;
			}
			
			.services a.mobile {
				width:100%;
				}
				
			.container a img {
				width:100%;
				}
				
			.container a.website {
				text-align:center;
				}
				
			.container span i {
				display:none;
				}
}