/*
Theme Name: Synatel Responsive
Theme URI: synatel.co.uk
Description: Responsive grid system website
Author: Ritchie Sieradzki
Author URI: http://www.s7media.co.uk
Version: 1.0
*/
* {
margin: 0;
}
html, body {
height: 100%;
}
body {background:#fff);
background-size:cover;
margin : 0 auto;
padding : 0;
font : 100%/1.4 'Lato', 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', arial, helvetica, sans-serif; 	
color : #000; 
text-align: center;
height:100%;}

#wrapper {min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -216px; /* the bottom margin is the negative value of the footer's height */}

#page-wrapper {width:100%; background:#fff; text-align:left; margin-top:120px;}
#page-wrapper-home {width:100%; background:none; text-align:left; margin-top:120px;}
#page {width:80%; margin:0 auto; padding:2%;}

#page-wrapper-home #page {
	margin-top:-100px;
	background:#fff;
}

#page article p { width: 300px; margin-bottom: 25px; }

header {width:100%; height:120px; background:#333399; position:fixed; top:0; z-index:50;}
header .left {float:left; width:48%; margin:0 2% 0 0;}
header .right {float:left; width:48%; margin:0 0 0 1%;}
.clear {clear:both;}

footer, .push {height: 216px; /* .push must be the same height as .footer */}
footer {padding:0; background:#000;}
footer {padding:0; background:none;}
#footer-text {width: 100%;
position: absolute;
bottom: 20px;
text-align: center;}

.menu {width:90%; margin:0 auto;}

#logo {width:229px; height:96px; float:left; background:url(images/synatel-logo.png) no-repeat; background-size:contain; background-position:center left;}

/*top menu system*/
#main-menu {display:inherit;}
#mobile-menu {display:none;}
nav {
	background:none;
	margin: 0 auto;
	display:block;
	float:left;
	font-weight:500;
	text-align:center;
	font-size: 14px;
	height:120px;
	position:relative;
	z-index:30;
	width:100%;
}

nav ul {
	list-style: none;
	/*margin: 0;*/
	background:none;
	float:left;
	padding:0;
}
nav li {
	/*float:left;
	position: relative;*/
	display:inline-block;
	
}
nav a {
	display:block;
	text-decoration:none;
	background:none;
	height:120px;
	line-height:120px;
	padding:0 10px 0 10px;
	margin:0 3px 0 0;	
}
nav ul ul {
	display:none;
	position:absolute;
	text-align:center;
	z-index: 99999;
	background:url() repeat;
	margin:0;
	
	
}
nav ul ul li {	
	padding:0 10px 0 10px;
	margin:10px 3px;
	display:block;
	line-height:30px;
}
nav ul ul ul {
	left:100%;
	top:0;
}
nav ul ul a {
	background:none;
	height:auto;
	line-height:1em;
	padding:0;
	color:#fff;
}
nav li:hover > a {
	color: #000;
	
	
}
nav ul ul :hover > a {
	color: #000;
	background:none;
	
}
nav ul li:hover > ul {
	display:block;
}
nav ul li.current_page_item > a,
nav ul li.current-menu-ancestor > a,
nav ul li.current-menu-item > a,
nav ul li.current-menu-parent > a {
	color: #000;
	
	
}

* html nav ul li.current_page_item a,
* html nav ul li.current-menu-ancestor a,
* html nav ul li.current-menu-item a,
* html nav ul li.current-menu-parent a,
* html nav ul li a:hover {
	color: #000;
	
	
}


.full-width {
	width:80%;
	padding:2.5% 10%;
	clear:both;
	display:block}
	
	.full-width-slim {
	width:80%;
	padding:1% 10%;}
	
.half-width {
	width:40%;
	padding:2.5% 10%;}
	
	.half-width-slim {
	width:40%;
	padding:1% 10%;}


.third-width {
	width:30%;
	padding:2.5%;
	float:left;}

/*.menu-top-container {text-align:center; width:90%; margin:0 auto;}*/

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

#sidebar ul {list-style:none; padding:0; margin:0;}
#sidebar #downloads li {border:none; list-style:none; margin:1em 0; background:#333399; color:#fff; padding:1em; transition:0.5s;} 
#sidebar #downloads li .link-icon {color:#fff;}
#sidebar #downloads li a {color:#fff; display:block; width:100%;}
#sidebar #downloads li:hover {background:#3b3b4b;}

#slider {width:100%; height:600px; background:#3b3b4b;}

.product-page-box {
	margin:3em 1em;
}

.product-page-box:first-child {
	margin:0 1em 3em 1em;
}

.products-page table thead th, .products-page table td {
	text-align:center;
}

.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
	padding:0;
	margin:0;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 10px;
    background-color: #ccc;
    border-top: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
	list-style:none;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 2;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #333366;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: 100%;
}

.tab-content {
    width: 100%;
    padding: 20px;
    display: none;
}

#tab-dimensions {
 display: block;   
}


#carousel .flexslider .slides img {
	width:auto;
}

.main-gallery-img {
	display:block;
	position:relative;
}

.enlarge {
	display:block;
	position:absolute;
	left:47%;
	top:1%;
	color:#333;
	text-shadow:1px 1px 1px #ccc;
	font-size:2em;
	opacity:0;
	transition:0.5s;
}

.main-gallery-img:hover .enlarge {
	display:block;
	opacity:0.7;
	left:47%;
	top:40%;
}

/*Icons*/
a.link-icon:before,
a.link-icon.link-file[href]:before {
    content: "\f016"; /* generic file icon */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    width: 20px;
    text-align: right;
    margin-right: 10px;
}
a[href$=".txt"].link-icon:before,
a.link-icon.link-text[href]:before {
    content: "\f0f6"; /*Text*/
}
a[href$=".pdf"].link-icon:before,
a.link-icon.link-pdf[href]:before {
    content: "\f1c1"; /*PDF*/
}
a[href$=".doc"].link-icon:before,
a[href$=".docx"].link-icon:before,
a.link-icon.link-word[href]:before {
    content: "\f1c2"; /*Word*/
}
a[href$=".xls"].link-icon:before,
a[href$=".xlsx"].link-icon:before,
a.link-icon.link-excel[href]:before {
    content: "\f1c3"; /*Excel*/
}
a[href$=".ppt"].link-icon:before,
a[href$=".pptx"].link-icon:before,
a.link-icon.link-powerpoint[href]:before {
    content: "\f1c4"; /*Powerpoint*/
}
a[href$=".gif"].link-icon:before,
a[href$=".jpg"].link-icon:before,
a[href$=".jpeg"].link-icon:before,
a[href$=".png"].link-icon:before,
a[href$=".bmp"].link-icon:before,
a[href$=".tif"].link-icon:before,
a.link-icon.link-image[href]:before {
    content: "\f1c5"; /*Image*/
}
a[href$=".zip"].link-icon:before,
a[href$=".zipx"].link-icon:before,
a[href$=".rar"].link-icon:before,
a[href$=".tar"].link-icon:before,
a[href$=".gz"].link-icon:before,
a[href$=".dmg"].link-icon:before,
a[href$=".iso"].link-icon:before,
a.link-icon.link-archive[href]:before {
    content: "\f1c6"; /*Archive*/
}
a[href$=".wav"].link-icon:before,
a[href$=".mp3"].link-icon:before,
a[href$=".fla"].link-icon:before,
a[href$=".flac"].link-icon:before,
a[href$=".ra"].link-icon:before,
a[href$=".rma"].link-icon:before,
a[href$=".aif"].link-icon:before,
a[href$=".aiff"].link-icon:before,
a[href$=".aa"].link-icon:before,
a[href$=".aac"].link-icon:before,
a[href$=".aax"].link-icon:before,
a[href$=".ac3"].link-icon:before,
a[href$=".au"].link-icon:before,
a[href$=".ogg"].link-icon:before,
a[href$=".avr"].link-icon:before,
a[href$=".3ga"].link-icon:before,
a[href$=".flac"].link-icon:before,
a[href$=".mid"].link-icon:before,
a[href$=".midi"].link-icon:before,
a[href$=".m4a"].link-icon:before,
a[href$=".mp4a"].link-icon:before,
a[href$=".amz"].link-icon:before,
a[href$=".mka"].link-icon:before,
a[href$=".asx"].link-icon:before,
a[href$=".pcm"].link-icon:before,
a[href$=".m3u"].link-icon:before,
a[href$=".wma"].link-icon:before,
a[href$=".xwma"].link-icon:before,
a.link-icon.link-audio[href]:before {
    content: "\f1c7"; /*Audio*/
}
a[href$=".avi"].link-icon:before,
a[href$=".mpg"].link-icon:before,
a[href$=".mp4"].link-icon:before,
a[href$=".mkv"].link-icon:before,
a[href$=".mov"].link-icon:before,
a[href$=".wmv"].link-icon:before,
a[href$=".vp6"].link-icon:before,
a[href$=".264"].link-icon:before,
a[href$=".vid"].link-icon:before,
a[href$=".rv"].link-icon:before,
a[href$=".webm"].link-icon:before,
a[href$=".swf"].link-icon:before,
a[href$=".h264"].link-icon:before,
a[href$=".flv"].link-icon:before,
a[href$=".mk3d"].link-icon:before,
a[href$=".gifv"].link-icon:before,
a[href$=".oggv"].link-icon:before,
a[href$=".3gp"].link-icon:before,
a[href$=".m4v"].link-icon:before,
a[href$=".movie"].link-icon:before,
a[href$=".divx"].link-icon:before,
a.link-icon.link-video[href]:before {
    content: "\f1c8"; /*Video*/
}
a[href$=".css"].link-icon:before,
a[href$=".js"].link-icon:before,
a[href$=".py"].link-icon:before,
a[href$=".git"].link-icon:before,
a[href$=".py"].link-icon:before,
a[href$=".cpp"].link-icon:before,
a[href$=".h"].link-icon:before,
a[href$=".ini"].link-icon:before,
a[href$=".config"].link-icon:before,
a.link-icon.link-code[href]:before {
    content: "\f1c9"; /*code*/
}
a[href$=".exe"].link-icon:before,
a[href$=".jar"].link-icon:before,
a[href$=".dll"].link-icon:before,
a[href$=".bat"].link-icon:before,
a[href$=".pl"].link-icon:before,
a[href$=".scr"].link-icon:before,
a[href$=".msi"].link-icon:before,
a[href$=".app"].link-icon:before,
a[href$=".deb"].link-icon:before,
a[href$=".apk"].link-icon:before,
a[href$=".jar"].link-icon:before,
a[href$=".vb"].link-icon:before,
a[href$=".prg"].link-icon:before,
a[href$=".sh"].link-icon:before,
a.link-icon.link-exe[href]:before {
    content: "\f085"; /*Executable*/
}

a[href$=".com"].link-icon:before,
a[href$=".net"].link-icon:before,
a[href$=".org"].link-icon:before,
a[href$=".edu"].link-icon:before,
a[href$=".gov"].link-icon:before,
a[href$=".mil"].link-icon:before,
a[href$="/"].link-icon:before,
a[href$=".html"].link-icon:before,
a[href$=".htm"].link-icon:before,
a[href$=".xhtml"].link-icon:before,
a[href$=".jhtml"].link-icon:before,
a[href$=".php"].link-icon:before,
a[href$=".php3"].link-icon:before,
a[href$=".php4"].link-icon:before,
a[href$=".php5"].link-icon:before,
a[href$=".phtml"].link-icon:before,
a[href$=".asp"].link-icon:before,
a[href$=".aspx"].link-icon:before,
a[href$=".cfm"].link-icon:before,
a[href*="?"].link-icon:before,
a[href*="#"].link-icon:before,
a.link-icon:not([href*='.']):before,
a.link-icon.link[href]:before {
    content: "\f0c1"; /*link*/
}
@media handheld, screen and (max-width: 1024px) {
	#logo {width:180px; height:75px; float:left;}
nav ul {
	list-style: none;
	/*margin: 0;*/
	background:none;
	float:left;
	padding:0;
}
nav li {
	/*float:left;
	position: relative;*/
	display:inline-block;
	
}
nav a {
	display:block;
	text-decoration:none;
	background:none;
	height:30px;
	line-height:70px;
	padding:0 5px 0 5px;
	margin:0 3px 0 0;	
}
nav ul ul {
	display:none;
	position:absolute;
	text-align:center;
	z-index: 99999;
	background:url() repeat;
	margin:2px 0 0 0;
	
	
}
nav ul ul li {	
	padding:0 5px 0 5px;
	margin:10px 3px;
	display:block;
	line-height:30px;
}
nav ul ul ul {
	left:100%;
	top:0;
}
nav ul ul a {
	background:none;
	height:auto;
	line-height:1em;
	padding:0;
	color:#fff;
}
nav li:hover > a {
	color: #000;
	
	
}
nav ul ul :hover > a {
	color: #000;
	background:none;
	
}
nav ul li:hover > ul {
	display:block;
}
nav ul li.current_page_item > a,
nav ul li.current-menu-ancestor > a,
nav ul li.current-menu-item > a,
nav ul li.current-menu-parent > a {
	color: #000;
	
	
}

* html nav ul li.current_page_item a,
* html nav ul li.current-menu-ancestor a,
* html nav ul li.current-menu-item a,
* html nav ul li.current-menu-parent a,
* html nav ul li a:hover {
	color: #000;
	
	
}

#mobile-menu {display:none;}
#main-menu {display:inherit;}
}
@media handheld, screen and (max-width: 800px) {
	header {
		position:relative;
	}
	#logo {width:180px; height:75px; float:left; margin:0 auto;}
	nav {
	margin: 0 auto;
	display:block;
	float:left;
	font-weight:500;
	text-align:center;
	font-size: 14px;
	height:140px;
	position:relative;
	z-index:30;
	width:100%;
}

nav ul {
	list-style: none;
	/*margin: 0;*/
	background:none;
	float:left;
	padding:0;
}
nav li {
	/*float:left;
	position: relative;*/
	display:inline-block;
	
}
nav a {
	display:block;
	text-decoration:none;
	background:none;
	height:30px;
	line-height:30px;
	padding:0 5px 0 5px;
	margin:0 3px 0 0;	
}
nav ul ul {
	display:none;
	position:absolute;
	text-align:center;
	z-index: 99999;
	background:url() repeat;
	margin:2px 0 0 0;
	
	
}
nav ul ul li {	
	padding:0 5px 0 5px;
	margin:10px 3px;
	display:block;
	line-height:30px;
}
nav ul ul ul {
	left:100%;
	top:0;
}
nav ul ul a {
	background:none;
	height:auto;
	line-height:1em;
	padding:0;
	color:#fff;
}
nav li:hover > a {
	color: #000;
	
	
}
nav ul ul :hover > a {
	color: #000;
	background:none;
	
}
nav ul li:hover > ul {
	display:block;
}
nav ul li.current_page_item > a,
nav ul li.current-menu-ancestor > a,
nav ul li.current-menu-item > a,
nav ul li.current-menu-parent > a {
	color: #000;
	
	
}

* html nav ul li.current_page_item a,
* html nav ul li.current-menu-ancestor a,
* html nav ul li.current-menu-item a,
* html nav ul li.current-menu-parent a,
* html nav ul li a:hover {
	color: #000;
	
	
}
#mobile-menu {display:inherit;}
#main-menu {display:none;}
}