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

/* © 2016 SYDNEY ONSITE COMPUTER SERVICES */

/*------------------------------------------
 RESET
------------------------------------------*/

body {background-color:#eee; margin:0; padding:0; height: 100%;}
.clearfix {float:none;clear:both;}

#errorpage {padding-top:150px; background:#2067b2;}
#errorpage .container {max-width:700px; text-align:left; }
#errorpage h1 {font-size:26px !important; font-weight:normal; color:#fff !important; text-align:left; letter-spacing:0; margin-bottom:30px;}
#errorpage h1, #errorpage p, #errorpage ul li {font-size:15px;}
#errorpage p, #errorpage ul li, #errorpage a {color:#CADAEC !important; text-align:left; text-decoration:none;}

.loading404:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}
@keyframes ellipsis {to {width: 1.30em;}}
@-webkit-keyframes ellipsis {to {width: 1.30em;}}

/*------------------------------------------
 TYPOGRAPHY
------------------------------------------*/

h1, h2, h3, h4, h5, h6 {font-family: "lato", Arial, Helvetica, sans-serif; font-weight:700; line-height:1.4; color:#000;}
h1 {font-size:38px; letter-spacing:-1px; margin:24px 0 15px 0;}
h2 {font-size:24px;	margin:5px 0 0 0;}
h3 {font-size:16px;	margin:5px 0 0 0;}
h4 {font-size:16px;	margin:0;}

p, ol, ul, li {font-family: "lato", Arial, Helvetica, sans-serif; font-weight:400; color:#424242; line-height:1.4;}
p  {font-size:18px; margin:14px 0 0 0; text-align:left; line-height:26px;}

#legal p, #legal ol li {text-align:justify; font-size:15px !important; line-height: 1.5 !important;}
#legal h2 {font-size: 24px;}
#legal h3 {font-size: 18px; margin-top:20px;}
p.quote {padding-left:35px;	padding-right:35px;}

#legal ol {
    margin-top: 15px;
    margin-left: 0 !important;
    padding-left: 18px;
}
#legal ol li {margin: 7px 0;}

hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }


body.home p.centertext {font-size: 18px !important;}
.centertext {text-align:center !important;}

/* Typekit FOUT Font Events */

.wf-loading .navbar-custom .navbar-nav > li > a {visibility:hidden; font-size:14px;}
.wf-active .navbar-custom .navbar-nav > li > a {visibility:visible;}

/*------------------------------------------
 LINK STYLES & BUTTONS
------------------------------------------*/

a:link {color: #000; text-decoration: underline;}
a:visited {text-decoration: underline; color: #000;}
a:hover {text-decoration: none; color: #666; font-weight:bold;}
a:active {text-decoration: underline; color: #000;}

.btn {background:#ffc300; font-size:18px; font-weight:700 !important; text-decoration:none !important; padding:10px 20px !important; white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */}

.btn:hover {-webkit-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */}
.btn-standard {color:#161616 !important;}
.btn-standard:hover {background:#FFD346;}

.btn-services {background:#7A7A7A; color:#fff !important; width:150px;}
.btn-services:hover {background:#939393;}

.btn-remote {background:#0084d8; color:#fff !important; width:150px;}
.btn-remote:hover {background:#37A6EC;}

.btn-hosting {background:#ffc300; color:#161616 !important; width:150px;}
.btn-hosting:hover {background:#FFD346;}

.btn-design {background:#cc0000; color:#fff !important; width:150px;}
.btn-design:hover {background:#E03434;}

/*------------------------------------------
 LIST STYLES
------------------------------------------*/

#content ul, #content ol, #content li {font-size:15px !important; line-height:1.8;}

/*------------------------------------------
 HEADER
------------------------------------------*/

#header {background:url(../theme/bgpattern2.png) #272727;}

#header .container {/*background:url(header-bg.png);*/ background:url(spotlight_bg.png) no-repeat;}

@media screen and (min-width: 768px) {#headerlogo #mobile-header {display:none;}}

#headerlogo {margin:0 auto; max-width:1170px; padding:10px 25px;}
#headerlogo img {max-width:100%; height:auto;}

#headerphone {text-align:right;}
#headerphone img {padding:35px 25px; max-width:100%; height:auto;}

#header h1, #header h2, #header p {text-indent:-9999px; display:none;}

/*------------------------------------------
 FOOTER
------------------------------------------*/

#footercontainer {background:#FFF; border-top:1px solid #CCC; border-bottom:1px solid #CCC;}
#footer {max-width:1170px; padding:20px 0; margin:0 auto;}
#copyright {background:url(../theme/bgpattern2.png) #272727;}
#copyright p {font-size:13px; color:#A4A4A4 !important;	text-align:center; margin:15px 0;}

#copyright a {color:#838383 !important;	text-decoration:none !important; font-weight:400 !important;}
#copyright a:hover {color:#4D4D4D !important; text-decoration:underline !important;	font-weight:400 !important;}

#footercol {float:left;	margin-right:50px;}

#footer ul {margin:0 0 0 15px; padding:0; text-align:center;}
#footer ul li {list-style-type:none; margin:0 9px; display:inline-block; text-transform:uppercase;}
#footer ul li a {color:#8C8C8C;	font-size:14px;	font-weight:400 !important;	text-decoration:none; display:block; padding:7px 9px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-sizing:border-box; border:1px solid #fff;}
#footer ul li a:hover {text-decoration:none; font-weight:400 !important; border:1px solid #CCC; color:#565656; box-sizing:border-box; -webkit-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */}

/*------------------------------------------
 NAVIGATION
------------------------------------------*/

@media screen and (min-width: 768px) {
    .navbar .navbar-nav {display: inline-block; float: none; vertical-align: top; text-align:center;}
    .navbar .navbar-collapse {text-align: center; max-width:1170px; margin:0 auto;}
	.navbar-custom .navbar-brand {display:none;}
	.navbar-nav li {display: inline-block !important; float: none !important;}
	/*.nav li:first-child a, .nav li:first-child a:hover {border:none !important;}*/
	/*.navbar-right li:first-child a, .navbar-right li:first-child a:hover {border:none !important;}*/
}
@media screen and (min-width:768px) and (max-width: 899px) {.navbar-custom .navbar-nav > li > a {padding-left:16px; padding-right:16px;}}
@media screen and (min-width:900px) and (max-width: 1024px) {.navbar-custom .navbar-nav > li > a {padding-left:24px; padding-right:24px;}}
@media screen and (min-width:1025px) and (max-width: 1169px) {.navbar-custom .navbar-nav > li > a {padding-left:30px; padding-right:30px;}}
@media screen and (min-width: 1170px) {.navbar-custom .navbar-nav > li > a {padding-left:36px; padding-right:36px;}}

.navbar {
	margin-bottom: 0; border-radius: 0;
	-webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.3);
}
.navbar-custom {
	/*ffd100+0,ffbb00+100 */
	background: #ffd100; /* Old browsers */
	background: -moz-linear-gradient(#ffd100 0%, #ffbb00 100%);
	background: -webkit-linear-gradient(#ffd100 0%, #ffbb00 100%);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffd100), to(#ffbb00));
	background: -o-linear-gradient(#ffd100 0%, #ffbb00 100%);
	background: linear-gradient(#ffd100 0%, #ffbb00 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd100', endColorstr='#ffbb00',GradientType=0 ); /* IE6-9 */
	/*background-color:#ffc900;*/
    color:#000;
	border:none !important;
	text-decoration:none;
	text-align:center;
}
.navbar-custom .nav {margin-left:-15px; margin-right:-15px;}
.navbar-custom .navbar-nav li a.nav-first {border-left:1px solid #f5b800;}
.navbar-custom .navbar-nav > li > a {border-right:1px solid #f5b800 !important; color:#000; font-weight:700; font-size:15px; text-decoration:none; margin-left:-2px; outline:none !important;}

.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {color: #000;background-color:#ffd100;}
.navbar-custom .navbar-brand {color:#000; font-weight:700; text-decoration:none; outline:none !important;}
.navbar-custom .nav > li > a:hover, .navbar-custom .nav > li > a:focus {background-color:#ffd100; -webkit-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: all 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */}

/* Mobile Menu Toggle */
.navbar-toggle {border: 1px solid #000 !important;}
.navbar-custom .navbar-toggle .icon-bar {background-color: #000;}

/*------------------------------------------
 IMAGES
------------------------------------------*/

img {max-width:100%; height:auto;}
img a {border:0; outline:none;}

.img-left {float:left;padding-right:15px;}
.img-right {float:right; margin-left:15px;}
.img-center {display:block;	margin:0 auto;}
	
.img-roundedcorners {border:1px solid #CCC; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}

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

#content {padding:15px 0 35px 0; min-height: 65vh;}

/* Home Page */
#hosting {padding-bottom:5px;}
#hosting p {margin-top:10px; text-align:center;}

/* Hide client logos slider on all pages except for homepage */
#logoslider-container {background:#FFF; padding:25px 0;	height:210px; /* Temp style */ border-top:1px solid #CCC; display:none;}
#logoslider {margin:0 auto; max-width:990px; height:100px; text-align:center !important;}
#logoslider h4 {text-align:center; margin:0 0 10px 0 !important;}
#logoslider img {display:block !important; float:left !important;}

/* Intro Tiles */
.hometile_container {margin: 0 auto; text-align:center; padding-top:35px;}
.hometile {
    display:inline-block;
	margin: 0 27px 25px 0;
	padding:0 0 20px 0;
    width: 100%;
	background:#FFF;
	border:1px solid #CCC;
	text-align:center !important;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.hometileheading {
	padding:15px 0;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.hometileheading h3 {font-size:17px !important;	margin:0;padding:0; display:block;}

.hometile .btn {font-size: 14px !important;}

.hometile a {font-family: "lato", Arial, Helvetica, sans-serif;	font-weight:700 !important;	text-decoration:none !important;}
.hometile a:hover {text-decoration:none !important;}

.hometile ul {margin:0;	padding:17px 0 15px 0; list-style-type:none; font-size:15px !important;}
.hometile ul li {margin:13px 0;}

#tile-services {background:#7A7A7A;	color:#FFF !important;} #tile-services h3 {color:#fff;}
#tile-remotesupport {background:#0084d8; color:#FFF !important;} #tile-remotesupport h3 {color:#fff;}
#tile-hosting {background:#ffc300;} #tile-hosting h3 {color:#2a2a2a;}
#tile-design {background:#cc0000; color:#FFF !important;} #tile-design h3 {color:#fff;}


/* Why Choose SOCS */
#choosesocs {background:#ffffff; border-top:1px solid #CCC;}
#choosesocs .container {padding:40px 0 45px 0;}

#choosesocs .item {
	float:left;
	width:100%;
	margin:10px 0 20px 0;
}
#choosesocs .icon {
	float:left;
	width:50px;
	height:50px;
	background-color:#ffc300;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
}
#choosesocs .desc {
	float:left;
	line-height:50px;
	padding-left:10px;
}
#choosesocs .desc p {
	line-height:50px !important;
	font-weight:bold;
	color:#666666;
	text-align:left;
	margin:0;
	padding:0;
}

#choosesocs .testimonials {
	background:url(../images/testimonials_quotesbg.png) #FFF; /* 270px 130px */
	background-repeat:no-repeat;
	background-position:bottom right;
	padding:15px 15px 15px 15px;
	text-align:center !important;
	border:1px solid #CCC;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
}
#choosesocs .testimonials a {
	text-decoration:none;
}
#choosesocs .testimonials a:hover {
	font-weight:normal;
}
#choosesocs .testimonials h2 {
	margin:0 0 10px 0;
}
#choosesocs .testimonials p {
	margin:0 0 14px 0;
	line-height:18px;
	text-align:justify;
	color:#666;
	font-style:italic !important;
}

#choosesocs .testimonials-dynamic {width:100% !important;}





/* Services */
.services-box {text-align:justify; min-height:100px; margin: 0 20px 20px 0;}
.services-box p {margin:0; padding:0; line-height:1.4; font-size:16px;}

/* Service Locations */
#locations {background:#FFF;border-top:1px solid #CCC; padding:35px 15px 36px 15px; margin-top:-25px;}
#locations ul {display:block; margin:20px -15px 0 0;}
#locations ul li {margin:0 0 4px -10px; padding-left:0;}


/* Testimonials */
#testimonials {height:460px; margin-top:10px; padding:20px; overflow:-moz-scrollbars-vertical; overflow-y:auto;}
#testimonials p {margin:14px 0 0 0;	text-align: justify;}

/* END OF YEAR - CLOSED FOR TRADING*/
/*.notice {float:left; padding:14px 0 14px 0; width:661px; height:100px; color:#FFFFFF !important; text-align:center !important; background-color:#0084D8; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
.notice p {text-align:center !important;}
.sitenotice {background:#232323; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; padding:15px 10px; color:#FFF; text-align:center; font-size:18px; margin-top:20px;}*/

#logmein {padding:10px 10px 12px 10px; margin-top:10px; margin-bottom:10px;}

.logmein-heading {font-size:16px;padding:7px;font-weight:700 !important;text-align:center;color:#FFF;background-color:#CC0000;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}


/* Text Modules */
.module {background-color:#ffffff; padding:7px 0 12px 0; text-align:center !important; border:1px solid #CCC; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
.module p {text-align:center !important;}

.rates-container {margin:15px 0 25px 0; text-align: center;}
.rates-container p {text-align:center !important;}

.rates-module {
	display:inline-block;
	width:214px;
	margin:10px 15px 0 0;
	background-color:#ffffff;
	padding:10px 10px 12px 10px;
	text-align:center !important;
	border:1px solid #CCC;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
}

.rates-heading-pensioner h4 {color:#FFF;}
.rates-heading-pensioner {
	padding:7px;
	font-weight:700 !important;
	text-align:center;
	background-color:#7A7A7A;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
}

.rates-heading-home h4 {color:#FFF;}
.rates-heading-home {
	padding:7px;
	font-weight:700 !important;
	text-align:center;
	background-color:#0084d8;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
}

.rates-heading-nfp {
	padding:7px;
	font-weight:700 !important;
	text-align:center;
	color:#333;
	background-color:#FFB600;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
}
.rates-heading-business h4 {color:#FFF;}
.rates-heading-business {
	padding:7px;
	font-weight:700 !important;
	text-align:center;
	color:#FFF;
	background-color:#CC0000;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
}
.rates-price p {
	font-size:48px !important;
	font-weight:700 !important;
	padding:15px 0 10px 0;
	text-align:center;
}
.rates-hour {
	font-size:14px;
}


/* -----------------------------
 MEDIA QUERIES
------------------------------*/
@media print {
	#mobile-header {
		display:none;
	}
	#headerlogo {
	background:url(header.png);
	background-repeat:no-repeat;
	height:130px;
	width:990px;
	margin:0 auto;
}
}

@media screen and (max-width: 767px) {
	
	#choosesocs {display:none;}
	
	#logoslider-container {display:none;}
		
	/* Services */
	#columnleft {
	margin-top:0;
	margin-bottom:7px;
	float:none;
	width:100%;
	}
	#columnright {
	margin-top:0;
	margin-bottom:45px;
	float:none;
	width:100%;
	}
	.services-box {
	text-align:left;
	/*padding-bottom:5px;*/
	min-height:100px;
	margin: 0 0 35px;
}
	.services-box p {
	text-align:left;
	line-height:130%;
	}
	.services-box .img-left {
    float: right;
    padding-left: 15px;
	margin-bottom:10px;
}
	.hometileheading {-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px;}

	/* Service Locations */
	#locations-outercontainer {width:100%;}
	#locations-innercontainer {width:auto; padding:0 15px;}
	#locations-innercontainer ul {margin-bottom:0;}
	
	/* Testimonials */
	
	#testimonials {
	width:auto;
	margin-top:10px;
	padding:10px;
	overflow-y:auto;
}	
	#testimonial-img {display:none;}
	
	
	/* Contact us */
	
.socsform {float:none !important; width: auto !important;}


	
.contactform-sidebar {float: none !important; width: auto !important;}

	#header .container {background:none;}

	#headerlogo {text-align:center;}
	#headerlogo #desktop-header {display:none;}
	#headerlogo #mobile-header {display:block; padding:10px 0; margin-left:-30px; margin-right:-30px;}
	
	#headerphone {display:none;}
	
	



	
	/* content */
	.col3 {
	display:none;
	}
	#reasons-outercontainer {width:100%;}
	#reasons-innercontainer {width:100% !important;}
	#reasons {float:none; margin:0 25px;}
	#reasons .icon {margin: 10px 0 15px 0;}
	#reasons .item {float:none; width:100%; min-width:10px !important; clear:left;}
	#reasons .col1 {float:none;	width:100%;display:block;}
	#reasons .col2 {float:none;	width:100%;display:block;}
	#reasons .col3 {float:none;	width:100%; display:none !important;}
	#content {
    margin: 0 auto;
	padding-top:15px;
    width: 90%;
	clear:both;
	}
	#content h1, #content h2 {
	text-align:center;
	}
	#content p {font-size:18px;}
	.mobile-img {height: auto; width: 100%;}
	/* footer */
	#footer {
	width:100%;
	margin:0 auto;
	border-top:none !important;
	padding-bottom:0;
	padding-top:0;
	text-align:center;
	}
	#footer ul {margin:0 !important;}
	#footer ul li {
	float:none !important;
	display:block;
	clear:both;
	margin-left: 0;
	margin-right: 0;
	background: #fff;
	border-radius: 0;
	border-bottom:1px solid #ededec;
	}
	#footer ul li a {padding: 5px 20px; margin: 15px 0; border: 0 !important;}
	
	#footer p.left {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#999;
	float:none;
	margin-top:5px;
	}
	#footer p.right {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#999;
	float:none;
	margin-top:5px;
	}
	
	/* Services tiles mobile */
	.hometile_container {
	width:100%;
	margin-bottom: 0;
	margin-top:0;
	}
	.hometile {
	display:block;
    margin:1px 0;
	padding:0 0 20px 0;
    width: 100%;
	background:none !important;
	border:none !important;
	text-align:center !important;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
	}
	.hometile ul {display:none;}
	.hometile .btn {display:none;}
	#button-services, #button-remote, #button-onlinestore, #button-hosting {display:none !important;}
/*.hometile {
	display:block;
    margin: 15px 0;
	padding:0 0 20px 0;
    width: 100%;
	background:#FFF;
	border:1px solid #CCC;
	text-align:center !important;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
}*/
/*body.home #logoslider-container {display:none !important;}*/
#copyright {width:auto !important;}
#webdesign {display:none !important;}
.img-roundedcorners-right {display:none;}
.rates-container {width:auto;}
.rates-module {width:auto !important; margin:10px; min-width:215px;}
#abn {display:block !important;}
#abnmobile {display:none !important;}

#boxes .window, #boxes #dialog {width:90% !important;}
#boxes .window, #boxes #dialog {height:auto !important;}
.eoy-wrap {width:100% !important;}
.eoy-left {width:100% !important; float:none !important;}
	.eoy-left p {text-align: center;}
.eoy-right {display:none;}	
	
}/* END MEDIA QUERY */

/* END OF YEAR */
#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
	height: 100%;
}
#boxes .window {
  position: absolute;
	width: 750px;
  height: auto;
  display: none;
  z-index: 9999;
  -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#boxes #dialog {
  width: 750px;
  height: auto !important;
  background-color: #ffffff;
  font-size: 15pt;
}
.eoy-wrap {width:700px; padding:40px;}
.eoy-wrap .btn .btn-standard {margin-top:20px; margin-bottom: 20px;}
.eoy-wrap h1 {margin:0 0 10px 0; font-size:30px; letter-spacing:normal;}
.eoy-wrap p {font-size:18px;}
.eoy-wrap::after {display:block; clear:both; content:"";}
.eoy-left {float:left; width:80%;}
.eoy-left {display: block;}
.eoy-right {float:left; width:20%;}
.eoy-right img {margin-top:-90px; margin-bottom:-90px; max-width: 200px;}