@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(../images/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;
	top: 50%;
	left: 50%;
	background-color:#ffffff;
	box-sizing:border-box;
	color:#404040;
	font-size:13px;
}

.container span {
	background-color:#d40606;
	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 a.domain {
	background-color:#b40001;
	color:#ffffff;
	padding:10px;
	box-sizing:border-box;
	width:100%;
	display:inline-block;
	font-family:'LatoLight';
	font-size:16px;
}

.container a.website {
	display:block;
	background-color:#404040;
	color:#ffffff;
	padding:10px;
	box-sizing:border-box;
	text-decoration:none;
	text-align:right;
	font-size:11px;
}

.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: 1099px) {

	body {
		margin:0px!important;
	}

	body > .flex {
		padding:20px;
	}
		.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;
				}
}