/*
= IMPORTING STUFF AND SETTING DEFAULT STYLES
-------------------------------------------------------------------------------------- */
@import url("reset.css");

/*
= COMMON
-------------------------------------------------------------------------------------- */

body {
	font-family:"Open Sans", Arial, Helvetica sans-serif;
	background:#0a0a0a;
	}

h1,
h2 {font-size:30px; font-weight:300; line-height:46px; font-style:italic; text-align:center; color:#fff;}
h3 {
	margin-bottom:10px;
	font-size:20px; font-weight:600; color:#fff;
	}
p {font-size:15px; line-height:19px; color:#fff; font-weight:300;}


.button {
	display:inline-block; zoom:1; *display:inline;
	height:30px;
	padding:0 22px;
	font-size:17px; color:#fff; text-decoration:none; text-align:center; line-height:30px; font-weight:300;
	background:#3a87c3;
	border:0;
	}
	.button:hover {background:#2e7bb6;}


.three-columns-outer {background:#0a0a0a; padding:54px 0 0;}
	.three-columns {margin:0 auto 67px; width:960px; list-style-type:none;}
		.three-columns li {
			float:left; position:relative;
			width:300px; min-height:300px;
			margin:0 10px; padding:75px 30px 0 ;
			text-align:center;
			background-color:#030303; background-position:50% 50%; background-repeat:no-repeat;
			box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
			}
			.three-columns.img-backgrounds li {padding-top:135px;}
		.three-columns li:after {
			content:"";
			position:absolute; left:0; bottom:-15px;
			width:100%; height:31px;
			background:url(../img/icon-blue-romb.png) 50% 0 no-repeat;
			}
			.three-columns li.trusted-by {background-image:url(../img/box-bgr-trusted-by.jpg);}
			.three-columns li.all-in-one {background-image:url(../img/box-bgr-all-in-one.jpg);}
			.three-columns li.latest-tech {background-image:url(../img/box-bgr-latest-tech.jpg);}

.wrapper,
section {width:940px; margin:0 auto;}


/*
= HEADER
-------------------------------------------------------------------------------------- */
header {
	position:relative; z-index:10;
	height:75px;
	background:#000;
	box-shadow:0 2px 8px rgba(0,0,0,0.75);
	}
	header .logo {
		position:absolute; left:50%; top:0;
		width:154px; height:152px;
		margin-left:-77px;
		text-indent:-9999px;
		background:url(../img/logo.png) 0 0 no-repeat;
		}
	header ul {
		width:820px;
		margin:0 auto;
		list-style-type:none;
		}
		header ul li {
			float:left;
			width:160px;
			font-family:"Old Standard TT", "Times New Roman", Times, serif;
			font-size:18px; line-height:75px; font-style:italic; text-align:center;
			}
		header ul li:nth-child(2) {margin-right:160px;}
			header ul li a {color:#fff; text-decoration:none;}
				header ul li a:hover {text-decoration:underline;}

/*
= CONTENT
-------------------------------------------------------------------------------------- */

/* Home top
----------------------- */
.home-top {
	min-height:777px;
	margin-top:-75px;
	background:url(../img/home-top-bgr.png) 50% 0 no-repeat;
	}
	.top-slogan {height:636px; text-align:center;}
		.top-slogan h1 {
			padding-top:310px; margin-bottom:20px;
			text-align:center;
			}
	
	.top-logos {
		margin:0; padding:14px 0;
		text-align:center; list-style-type:none;
		background:#000; background:rgba(0,0,0,0.78);
		}
		.top-logos li {
			width:220px;
			display:inline-block; zoom:1; *display:inline;
			}


.wide-list {
	margin:0 0 20px;
	list-style-type:none;
	}
	.wide-list li {
		height:386px;
		margin-bottom:30px;
		text-align:right;
		background-position:50% 0; background-repeat:no-repeat;
		}
		.wide-list li.hospitality {background-image:url(../img/wide-box-bgr-hospitality.jpg);}
		.wide-list li.eftpos {background-image:url(../img/wide-box-bgr-eftpos.jpg);}
		.wide-list li.cables {background-image:url(../img/wide-box-bgr-cables.jpg);}
		
		.wide-list li:nth-child(2n) {text-align:left;}
		
		.wide-list li div {
			width:940px;
			padding:145px 0 0 560px;
			margin:0 auto;
			box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
			}
			.wide-list li:nth-child(2n) div { padding-left:0; padding-right:560px;}
			
			.wide-list li div p {margin-bottom:10px; font-size:19px; line-height:normal;}


/* Articles
----------------------- */
section {padding-top:43px;}
article {
	position:relative;
	padding-top:14px; margin-bottom:60px;
	border-top:#fff dotted 1px;
	}
	article img {
		display:block;
		margin-bottom:20px;
		}
	article hgroup {
		position:absolute; left:-27px; top:73px;
		width:320px;
		padding:20px;
		text-align:right;
		box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
		}
		article:nth-child(2n) hgroup {left:auto; right:-27px; text-align:left;}
	article h3,
	.contact-info li hgroup h3 {margin:0; font-size:25px; font-weight:700;}
	article h4,
	.contact-info li hgroup h4 {font-size:23px; color:#fff; font-weight:300;}
	article ul {
		float:right;
		width:320px;
		margin:0 0 0 50px;
		list-style-type:none;
		}
		article:nth-child(2n) ul {float:left; margin-left:0; margin-right:50px;}
		article ul li {
			padding:15px; margin-bottom:4px;
			font-size:20px; color:#fff; line-height:normal; font-weight:300; text-align:right;
			}
		
	article p {
		overflow:hidden;
		font-size:20px; color:#fff; line-height:normal; font-weight:300; text-align:left;
		}
		article:nth-child(2n) p {text-align:right;}
		
		/* Colors */
		article.violet hgroup {background:#5f1e6f; background:rgba(95,30,111,0.78);}
		article.violet ul li {background:#43174e;}
		
		article.green hgroup {background:#175a34; background:rgba(23,90,52,0.78);}
		article.green ul li {background:#134026;}
		
		article.red hgroup {background:#511717; background:rgba(81,23,23,0.78);}
		article.red ul li {background:#3a1313;}
		
		article.yellowgreen hgroup {background:#656020; background:rgba(101,96,32,0.78);}
		article.yellowgreen ul li {background:#474419;}
		
		article.brown hgroup {background:#7d3816; background:rgba(125,56,22,0.78);}
		article.brown ul li {background:#572912;}


/* Customer list */
.customers-list article hgroup {
	right:13px; left:auto; top:55px;
	width:300px; height:300px;
	padding-top:130px;
	text-align:center;
	background:url(../img/romb-title-bgr.png) 50% 50% no-repeat;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	}
	.customers-list article:nth-child(2n) hgroup {left:13px; right:auto; text-align:center;}
.customers-list article ul {float:none; overflow:hidden; width:auto; margin:0 0 15px;}
	.customers-list article ul li {
		float:left;
		width:25%; height:46px;
		padding:0;
		text-align:center; line-height:46px; font-size:17px;
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
		}
	.customers-list article ul.three-items li {width:33%;}
	.customers-list article ul.three-items li:nth-child(2) {width:34%;}
		.customers-list article ul li.pos {background:#43174e;}
		.customers-list article ul li.eftpos {background:#134026;}
		.customers-list article ul li.network {background:#474419;}
		.customers-list article ul li.support {background:#572912;}
.customers-list article blockquote p {text-align:center; font-size:23px; padding:0 150px; font-style:italic;}



/* Contact */
.contact-info {margin:0 0 70px; list-style-type:none;}
	.contact-info li {
		position:relative;
		min-height:64px;
		padding:45px 0 45px 320px;
		border-bottom:#fff dotted 1px;
		}
	.contact-info li:first-child {padding-top:0;}
		.contact-info li hgroup {position:absolute; left:12px; top:45px;}
		.contact-info li:first-child hgroup {top:0;}
		.contact-info li p {font-size:16px; line-height:21px;}
	
		.contact-info fieldset {padding-top:30px;}
			.contact-info fieldset input[type=text],
			.contact-info fieldset input[type=tel],
			.contact-info fieldset input[type=email],
			.contact-info fieldset input[type=password],
			.contact-info fieldset textarea {
				width:100%; height:40px;
				padding:0 20px; margin-bottom:12px;
				font-size:20px; color:#fff; font-weight:300;
				background:#2a2a2a;
				border:0;
				box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
				}
			.contact-info fieldset textarea {padding:10px 20px; height:182px; resize:none;}
			
			.contact-info fieldset .button {height:40px; text-transform:uppercase; padding:0 50px;}
			.contact-info fieldset p {line-height:40px;}
				.contact-info fieldset p a {color:#fff; font-weight:400; text-decoration:none;}
					.contact-info fieldset p a:hover {text-decoration:underline;}
		
		.contact-info dl {overflow:hidden;}
			.contact-info dl dt {
				float:left; clear:left;
				width:160px;
				margin-bottom:12px;
				font-size:16px; color:#fff; font-weight:300; line-height:26px;
				}
			.contact-info dl dd {
				overflow:hidden;
				margin-bottom:12px;
				font-size:24px; color:#3a87c3; font-weight:300; line-height:26px;
				}



.center-slogan,
.client-logos {
	padding:50px 0 40px;
	text-align:center;
	border-top:#fff dotted 1px;
	}
	.center-slogan h2,
	.client-logos h2 {
		margin-bottom:20px;
		font-style:normal; line-height:normal;
		}
	
	.client-logos ul {margin:0; padding-top:10px; list-style-type:none; overflow:hidden;}
		.client-logos ul li {
			float:left; width:25%;
			margin-bottom:25px;
			}


/*
= FOOTER
-------------------------------------------------------------------------------------- */
footer {background:#223441; padding:80px 0;}
	footer p {
		float:left;
		}
	footer ul {
		float:right;
		margin:0;
		list-style-type:none;
		}
		footer ul li {
			display:inline-block; zoom:1; *display:inline; position:relative;
			margin-left:15px;
			}
			footer ul li:after {
				content:"|";
				position:absolute; left:-12px; top:-1px;
				}
				footer ul li:first-child:after {display:none;}
			footer ul li a {color:#fff; text-decoration:none;}
				footer ul li a:hover {text-decoration:underline;}
	
	footer p,
	footer ul li {font-size:14px; color:#fff; line-height:30px; font-weight:300;}

/*
= Mobile devices
-------------------------------------------------------------------------------------- */
@media all and (orientation:portrait) {

}
@media all and (orientation:landscape) {

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

/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

/*
= Print
-------------------------------------------------------------------------------------- */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}