/* RESET */

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css");

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { 
	font-size: 1em; 
	font-weight: normal; 
	font-style: normal; 
}

ul,ol { 
	list-style: none; 
}

img {
	border: none; 
}

.contactSub {
	padding: 5px 10px;
    background: #80C3EA;
    color: #fff;
}

/* contact us error messages */
#contactus .error
{
   font-family: Verdana, Arial, sans-serif; 
   font-size: 1em;
   color: #fff;
   background: #bfcf4b; 
}
 
button{
    background-color:#107bb3;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0px;
    border:0px solid #107bb3;
    display:inline-block;
    color:#000000;
    font-family:Verdana;
    font-size:12px;
    font-weight:bold;
    font-style:normal;
    width:100%;
    text-decoration:none;
    text-align:center;
}

button:hover {
    background-color:#107bb3;
    cursor: pointer;
    color: #fff;
}

button:active {
    position:relative;
    top:1px;
    border:1px solid #107bb3;
}

#searchsubmit {
	 width: 40px !important;
    float: right;
    /*background: #bfcf4b !important;*/
	
	background: #bfcf4b url(/_img/_logos/search2.png) no-repeat!important;
}

#no_javascript { 
	border-width: 1px; 
	border-color: #E9E5AC; 
	border-style: solid; 
	padding: 10px 40px; 
	background-color: #F9F4B8;
}

#no_javascript p {
	margin: 0; 
}

/* BG IMAGE */
body {
	background: #41afd4 url(/_img/SPIRO_background_3000x2096.jpg) fixed;
}

#content{ /*latestnews_cat.php*/
    margin: 0 auto;
    width: 80%;
    margin-top: 0.1%;
}

.scrollup {
    width: 54px;
    height: 55px;
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    text-indent: -9999px;   
    background-color: #000;
    background: url(https://spiroactivewear.com/_img/icons/arrow_up.png) no-repeat;
}

code { 
	display:block; 
	background-color:#C0C0C0; 
	padding:5px; 
	border:solid 1px #c0c0c0;
}

@font-face {
    font-family: OpenExtraBold;
    src: url(../fonts/OpenSans-ExtraBold.ttf);
}

@font-face {
    font-family: 'open_sansextrabold';
    src: url('../fonts/OpenSans-ExtraBold-webfont.eot');
    src: url('../fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
        url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
        url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
        url('../fonts/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* LAYOUT */
.clear { 
	clear: both; 
	height:1px; 
}

.clearer, .spacer { 
	clear: both; 
	display: block; 
	margin: 20px; 
	padding: 0; 
	height: 0; 
	line-height: 1px; 
	font-size: 1px; 
	width: 100%;
}


#container {
	width: 80%; 
	margin: 0 auto; 
	position: relative; 
	z-index: -1; 
	z-index: 9998;
}

/* BROWSE CATEGORY SECTION STYLE */

/*RIGHT LIST STYLE*/

#b_cat_title{
    margin-bottom: 2%;
}

/* GRID */

.column {
	float: left; 
}

.grid2col, .grid2cola, .grid2colb, .grid3col, .grid3cola, .grid4col, .grid5col, .grid6col { 
	width: 960px; 
	padding: 10px; 
}

.grid2colh { 
	height:160px; 
}

.grid2col .column { 
	width: 480px; 
}

.grid2cola .column { 
	width: 560px; 
}

.grid2cola .column.last { 
	width: 400px;
}

.grid2colb .column { 
	width: 320px; 
	color:#FFFFFF;
}

.grid2colb .column.last { 
	width: 640px;
}

.grid2cold { 
	width: 920px; 
	margin: 10px;
}

.grid2cold .column { 
	width: 440px; 
	color:#FFFFFF; 
}

.grid2cold .column.last { 
	float: right; 
}

.grid2cold .grid2col { 
	width: 440px;
}

.grid2cold .grid2col .column { 
	width: 140px; 
}

.grid2cold .grid2col .column.last { 
	width: 280px; 
	float: right; 
}

.grid3col .column { 
	width: 320px; 
	height:245px; 
	color:#FFFFFF;
}

.grid3cola .column { 
	width: 240px; 
}

.grid3cola .column.first { 
	width: 300px; 
}

.grid3cola .column.last { 
	width: 340px;
}

.grid4col .column { 
	width: 240px; 
}

.grid5col .column { 
	width: 192px;
}

.grid6col .column { 
	width: 160px; 
}

.column.first, .column.last { 
	margin-left: 0 !important; 
}

.column.last { 
	float: right !important; 
}

.margin10 { 
	margin:10px; 
	position: relative;
}

/* TYPE */

body { 
	font: 14px/20px  "Open Sans", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; 
	color: #f7fffc; 
} 

a { 
	color: #ffffff; 
}

a:link, a:visited, a:active { 
	text-decoration: none; 
}

a:hover { 
	text-decoration: underline; 
}

strong, b { 
	font-weight: bold; 
}

em, i { 
	font-style: italic; 
}

.table2{
    width: 75% !important; 
	border: none; 
	table-layout:fixed; 
	border-color:#FFF;  
	color:#FFF; 
	font-weight:bold; 
	border-bottom: 1px solid #eee; 
	padding: 3%;
	border:1px solid;
}

th { 
	border: none; 
	table-layout:fixed; 
	border-color:#FFF;  
	color:#FFF; 
	font-weight:bold; 
	width:58%; 
	text-align:center; 
}

td { 
	border: none; 
	table-layout:fixed; 
	border-color:#FFF;  
	color:#FFF; 
	font-weight:bold; 
	border-bottom: 1px solid #eee; 
	padding: 3% !important;
}

.table2 tr  {
    border: none;
	padding:3%;
}

.border-right:before{
    content: "";
    border-left: 2px solid #F51C40;
    position: absolute;
    top: 135%;
    bottom: -38.4%;
}

.new { /* latestnews.php, newproducts.php, browsecategory.php, search_results.php, teamwear.php  WHEN YOU EDIT STYLING FOR THIS, REMEMBER TO EDIT THE ONE BELOW TOO*/
	display: block;
    width: 76px;
    margin-right: 5px;
	margin-top:9px;
    height: 16px;
    background: #0A76C1 none repeat scroll 0% 0%;
    color: #FFF;
    font-size: 10px;
    text-align: center;
    overflow: hidden;
    float: left;
    border-radius: 4px;
    line-height: 17px;
}

.new-side { /* side_navigation */
	width: 76px;
    margin-right: 2px;
    background: #0A76C1 none repeat scroll 0% 0%;
    color: #FFF;
    font-size: 9px;
    text-align: center;
    overflow: hidden;
    float: left;
	line-height:16px;
    border-radius: 4px;
}

.new-cat-page {
	display: block;
    width: 100%;
    margin-right: 5px;
	margin-top:5px;
    height: 16px;
    background: #0A76C1 none repeat scroll 0% 0%;
    color: #FFF;
    font-size: 10px;
    text-align: center;
    overflow: hidden;
    float: left;
    border-radius: 4px;
    line-height: 17px;
}

.newrange { 
	display: block; 
	width: 55px; 
	margin-right: 5px; 
	height:16px; 
	background: url(/_img/newrange.png) 0px 2px no-repeat; 
	text-indent: -999em; 
	overflow: hidden; 
	float: left;
}

.big_new {
	position: absolute; 
	display: block; 
	width: 95px; 
	height:95px; 
	top: 0; 
	right:0; 
	background: url(/_img/big_new.png) right top no-repeat; 
	z-index: 1;
}

#prdlogos {
	max-width: 70%;
}

/*--------HEADINGS---------*/

@font-face {
	font-family: DeliciousRoman;
    src: url("/fonts/Humanist 970 BT.ttf");
    font-weight:400;
}

h1 { 
	font-weight: bold; 
	font-size: 24px; 
	line-height: 36px; 
	margin-bottom: 18px; 
}

h2 {
	font-weight: lighter; 
	font-size: 70px; 
	line-height: 40px; 
	margin-bottom: 0px; 
	color: #ffffff;
}

h3 {
	font-weight: lighter; 
	font-size: 26px; 
	line-height: 25px; 
	margin-bottom: 8px; 
	color: #ffffff; 
	word-wrap: break-word;
}

h4 {
	font-weight: bold;
    font-size: 21px;
    line-height: 18px;
    color: #fff;
}

h5 {
	font-weight: bold; 
	font-size: 45px; 
	color: #ffffff; 
	word-wrap: break-word;
}

h6 {
	font-weight: lighter; 
	font-size: 25px;  
	line-height: 30px; 
	color: #ffffff; 
	word-wrap: break-word;
}

h7 {
	font-weight: lighter; 
	font-size: 18px;  
	line-height: 20px; 
	color: #ffffff; 
	word-wrap: break-word;
}

.a_nonestyle:hover{
    text-decoration: none;
}

/* HEADER */

#header { /*resource login */
	width: 80%; 
	height: auto; 
	margin:0 auto; 
	position: relative; 
	z-index: 99999; 
	overflow: hidden;
}

#header img{ /*resource login */
	float: left; 
	margin-top: 0.5%; 
	margin-left: 2.5%; 
	width: 17%;
}

/* FORMS */

input { 
	resize:none; 
	font:10px "Lucida Grande",Lucida,Verdana,sans-serif; 
	padding: 0; 
	margin:0; 
	border:none; 
	background: none; 
}

input.field,textarea.textarea { 
	-moz-border-radius:3px; 
	-webkit-border-radius:3px; 
	resize:none; 
	font:10px "Lucida Grande",Lucida,Verdana,sans-serif; 
	padding: 3px 5px 2px 3px; 
	margin:0; 
	border-top:1px solid #8e8e8e; 
	border-left:1px solid #8e8e8e; 
	border-bottom:1px solid #e1e1e1; 
	border-right:1px solid #e1e1e1; 
	background:#fefefe; 
	color: #000 !important;
}

.inset-right::after{
    content: "";
    border-color: transparent #fff;
    border-style: solid;
    border-width: 4px ;
	border-right: 5px solid transparent;
    display: block;
    height: 0;
    width: 0;
    left: 0.5em;
    top: 1.1em;
    position: relative;
    float: right;
}

.inset-left::after{
    content: "";
    border-color: transparent #fff;
    border-style: solid;
    border-width: 3px ;
    border-right: 4px solid transparent;
    display: block;
    height: 0;
    width: 0;
    left: 0.5em;
    top: 7px;
    position: relative;
    float: left;
    margin-right: 2%;
}

ul.sub li {
	padding-top: 2px;
	border-bottom: 1px solid #44434A !important;
}

ul.sub li a {
	padding: 12px 15px 12px 5px !important;
}

/* BREADCRUMBS */

#breadcrumbs {
	margin: 1px 0px; 
	list-style: none; 
	background-color:transparent; 
}

#breadcrumbs li { 
	float: left;  
	margin-right:15px; 
	height:30px;
}

#breadcrumbs li.breadcrumb_home { 
	margin-right: 10px; 
	background: none;
}

#breadcrumbs li a { 
	font: normal 13px/38px Arial, Verdana, sans-serif; 
	color:#fff;
}

#breadcrumbs #home { 
	position: relative; 
	top: 10px; 
	left: 0; 
	width: 16px; 
	height: 16px; 
	background-repeat: no-repeat; 
	background-position: 0 0; 
	z-index: 2; 
}

#breadcrumbs #home span { 
	display: block; 
	text-indent: -5000px; 
}

#breadcrumbs #home span a { 
	display: block; 
	width: 16px; 
	height: 16px; 
}

/* HOMEPAGE */

#airdown { /* techguide? */
	position: relative; 
	background: url(https://spiroactivewear.com/_img/spiro.jpg) -60px -40px no-repeat; 
	height: 237px; 
	width: 400px; 
	display: block;
}

/* PRODUCT PAGE */

#categories p {
	border-bottom: #CCCCCC solid 1px; 
	padding-bottom: 10px; 
	margin-bottom: 15px; 
}

#categories p span {
	font-weight: bold;
	color: #262626; 
}

#categories_main_text {
	/*position: absolute;*/
	bottom:0;
	left: 0;
}

#categories_main_text img { 
	margin: 0; 
	padding: 0; 
	display: block; 
}

#categories_main_text p { 
	color: white; 
	margin: 0; 
}

#categories_main_text.airdown_text {  
}

/* TABS */


.ui-tabs .ui-tabs-hide {
	display: none;
}

.ui-state-active a {
	background: #ccc; 
	-moz-border-radius:5px; 
	-webkit-border-radius:5px; 
	color: #333;
}

/* ITEMS LISTED ABOVE THE TABS */

ul.section { 
	background: none; 
	border: none; 
	margin-bottom: 9px;
}

ul.section li { 
	float: none; 
	margin: 0;
}

ul.section li { 
	float: none; 
	margin: 0; 
	background: url(/_img/bullet.png) 0 8px no-repeat; 
	padding: 3px 0px 3px 12px; 
	line-height: 20px;
}

ul.section li.section_header { 
	background: none; 
	padding-left: 0px; 
	line-height: 30px; 
	font-weight: bold; 
	color: #ffffff; 
	border-bottom: #CCCCCC solid 1px; 
	margin-bottom: 5px;
}

ul.section h3 {
	font-size: 14px;
    line-height: 14px;
    margin-bottom: 0;
}

ul.section li.section_ratings { 
	background: none; 
	padding-left: 0px; 
	font-weight: bold; 
	font-size: 18px;
}

ul.section li span { 
	font-weight: bold;
}

a #sizingpdfs { /* critical sizing pdfs on product.php */
	background: #D31E23;
    width: 50%;
    padding: 1%;
    text-align: center;
    margin: 1%;
	color:#fff;
	font-weight:600;
	text-decoration:none;
}

a #sizingpdfs:hover{
	background:#383232;
	text-decoration:none !important;
}

p.note { /* product.php */
	background: transparent !important; 
	padding: 10px; 
	margin-bottom: 15px;
}


/* These are standard sIFR styles... do not modify */

.sIFR-flash { 
	visibility: visible !important;	
	margin: 0; 
}
.sIFR-replaced { 
	visibility: visible !important; 
}

span.sIFR-alternate { 
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 0; 
	height: 0; 
	display: block; 
	overflow: hidden; 
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */

.sIFR-flash + div[adblocktab=true] { 
	display: none !important; 
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h2 { 
	visibility: hidden; 
	letter-spacing: -9px; 
	font-size: 90px;
}

.sIFR-hasFlash h5 { 
	visibility: hidden; 
	letter-spacing: -9px; 
	font-size: 60px;
}

.sIFR-hasFlash h6 { 
	visibility: hidden; 
	font-size: 30px; 
} 

.sIFR-hasFlash h7 { 
	visibility: hidden; 
	font-size: 20px; 
} 

/* Distributors */	

#map_container{
	padding: 10px; 
}

#left_column #map_container{
	background:none;
	min-height: 350px;
	padding: 10px 0;
	margin-left:10px;
}

#map_canvas {
	border-color: #cfd7dc;
	border-style: solid;
	border-width: 2px;
	/*width: 980px;*/
	height: 450px;
	margin-top:10px;
	margin-left:-10px;
}

#left_column #map_canvas {
	border-color: #000000;
	border-style: solid; 
	border-width: 2px;
	width: 980px;
	height: 450px;
	overflow: hidden;
}

label	{
	width: 200px;
	display: block;
	font: normal 12px/2em Arial, Verdana, sans-serif;
	color:#535353;
}

select {
	width:200px;
}

/* distibutors.php */
#dist_list {
	min-height: 300px;
	padding-left: 10px;
	margin-left:-10px;
}

#dist_list ul {
	margin-top: 15px;
	
}

#dist_list li {
	list-style-type: none;
	height: 40px; 
	border-bottom: solid 1px rgba(83, 83, 83, 1);
	background: #34a4ca8a;
    padding: 3px 5px;
	margin-bottom:5px;
}

#dist_list li .dist_company {
	float: left;
	width: 288px;
}

#dist_list li .dist_company p {
	font: bold 14px/40px Arial, Verdana, sans-serif;
	color: #ffffff;
}

#dist_list li .dist_features_icon_sm {
	/*position: relative;*/
	margin-top: -2px;
	/*top: 10px;
	width: 20px;
	height: 20px;
	float: left;*/
}

#dist_list li .more_info {
	float: right;
	background-image:url(/_img/bullet.gif); 
	background-repeat: no-repeat; 
	background-position: 10px 13px;
}

#dist_list li .more_info p a {
	font: normal 12px/40px Arial, Verdana, sans-serif;
	color: #000;
}

#dist_details {
	height: auto;
	margin-top:40px; 
	width:40%; 
	float:left; 
	overflow: hidden;
}

#dist_details ul {
	margin-top: 15px;
	width: 20%;
}

#dist_details ul#dist_details_left {
	float:left;
}

#dist_details ul#dist_details_right {
	float:right;
	margin-left:10px;
}

#dist_details li {
	list-style: none;
	width: 300px; 
	height: 163px;
}

#dist_details li.dist_details_icon  {
	list-style-type: none; 
	margin-right: 20px;
	width: 260px;
	height: auto;
}

#dist_details li.dist_details_icon p a {
	font: bold 12px/40px Arial, Verdana, sans-serif; 
}

#dist_details li.dist_details_icon p{
	font: normal 12px/40px Arial, Verdana, sans-serif; 
}

.dist_details_title {
	font: bold 16px/2em Arial, Verdana, sans-serif;
	color: #ffffff;
}

.dist_details_tel{
	font: bold 12px/1.6em Arial, Verdana, sans-serif;
}

#tab4 { /* rescources.php */
	width: 100%;	
}

#tab4 td img { /* resources.php */
    margin: 20px;
}

.more_info{ /* distributors.php */
    background-color: #a4cee6;
    border-radius: 0px;
    text-indent: 0px;
    display: inline-block;
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
	text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0px #6db2da; 
    padding-left: 2%;
    padding-right: 2%;
    height: 25px;
    line-height: 25px;
    margin-top: 1%;

}

.more_info a{
    color: #000 !important;
}

/* Stock Availability */	

#login { /*resources.php */
	width: 300px;
	margin-left: auto;
	margin-right:auto;
	margin-top:-20px;
	position: relative;
}


#loginform { /* rescources.php */
	
}

#login p {
    font: bold 25px/3em Arial, Verdana, sans-serif;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

#loginform ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
    float:left;
}

#loginform ul li{
    list-style-type: none;
    padding: 0;
    margin: 0;
    line-height: 25px;
}

#loginform label {
    font: normal 12px/25px Arial, Verdana, sans-serif;
	color:#535353;
    display: block;
    width: 92px;
    float: left;
}

table {
    margin: 10px 10px 30px 10px;
    width: 940px;
    border-collapse: collapse;
}

table tr {
    border-bottom-color: #cccccc;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 50px;
}

table th p {
    font: bold 11px/1.3em Arial, Verdana, sans-serif;
    color:#000000;
}

table td p span {
    font: bold 10px/1.3em Arial, Verdana, sans-serif;
}


/* Media Centre
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#TopMargin {
    height: 80px;
}

#medialogin {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom:10px;
}

#MediaLoginBg {
    background-attachment: scroll;
    background-clip: border-box;
    background-image: url("https://spiroactivewear.com/_img/medialoginbg.jpg");
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-size: auto auto;
    height: 20px;
    padding-left:17px;
}

table td p span {
    font: normal 13px/1.3em Arial, Verdana, sans-serif;
    color: #789CC2;
}

#downloadNav ul li { /* resounces.php */
    float: right;
	margin-right: 10px;
    list-style: none;
    display: inline;
    text-indent: -5000px;
}

#downloadNav ul li a {
    display: block;
    width: 24px;
    height: 19px;
}

.resources_{ /* resources.php */
    width: 16%; 
	border-radius: 2px;
	padding: 5px 5px 4px 5px;
	background-color: #80c3ea; 
	color: #fff; 
	float: left; 
	margin-right: 2%;
	margin-bottom: 2%;
	transition: 0.4s all ease-out;
}

.resources_ img{
    width: 100%;
}

.resources_:hover{
    background-color: #FFF;
	color: #333; 
	transition: 0.3s all ease-in;
}


/* latestnews_detail.php */

ul#news_quickNav { 
    list-style: none;
}
ul#news_quickNav li {
    width: 270px;
    padding-left: 10px;
    border-bottom-color: #cccccc;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    background-image: url("https://spiroactivewear.com/_img/bullet.gif");
    background-repeat: no-repeat;
    background-position: 0 18px;
    padding: 15px;
}

#left_column {
	float:left;
	width: 310px;
	margin-left: 10px;
	border-top-color: #cccccc;
	border-top-style: solid; 
	border-top-width: 1px; 
	color:#FFFFFF;
}

#distributor_container {
	float:left;
	width: 100%;
	color:#FFFFFF; 
	padding-bottom: 5%;
}

/* Environment*/

#enviro_main { /* environment.php, imagepolicy.php */
    color: #FFF;
}
#enviro_main p {
    font: 13px/1.5em Arial,Verdana,sans-serif;
    color: #FF8C00;
}

#enviro_main .left {
    width: 380px;
    float: left;
    padding-bottom: 40px;
    padding-left:0px;
}

#enviro_main .right {
    padding-left: 20px; 
	width: 380px;
    float:left;
    padding-bottom: 40px;
}

#dhtmltooltip{ /*distributors.php */
    position: absolute;
    background-color: #2C2C2C;
    border: 0px solid black;
    padding: 2px;
    width:150px;
    visibility: hidden;
    z-index: 9999;
    text-align:left;
    font: normal 11px/17px "lucida grande", tahoma, arial, verdana, sans-serif;
    color: #FFFFFF;
}

.brochureimage { /* resources.php */
    padding: 10px 10px 10px 10px;
}

/* below is used for toggle mix n match colourways */

.hidden { 
	display: none; 
}

.unhidden { 
	display: block; 
}

.flyers_section{ /* resources.php */
    width: 100%;
}

.flyer_ { /* resources.php */
	color: #eee ;
	min-height: 159px;
	max-height:173px;
    float: left;
    width: 16%; 
}

.flyer_img { /* resources.php */

}
	
}.flyer_img img{ /* resources.php */

}

.flyer_title { /* resources.php */
    color:rgba(219, 219, 219, 1) !important;
}

.flyer_thumb{ /* resources.php */
	width:100%;
    padding: 5%;
    background-color: #d2e5f1;
    margin-bottom: 2%;
    box-shadow: 0px 0px 5px rgba(46, 52, 56);
}

#news_details { /* latestnews_detail.php */
	background-image:url("https://spiroactivewear.com/_img/tabs-bg.jpg");
	background-repeat: no-repeat;
	background-position: top left;
	min-height: 595px;
	padding: 10px;
}

#news_details img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

/** Product page section  */

.OSEB_Extrabold{ /* about.php, browsecategory.php, distributors.php, latestnews.php, latestnews_cat.php */ 
    font-family: "open_sansextrabold";
}

.p18{
    font-size: 18px;
	
}

.OSEB_Bold{
    font-family: "Open Sans" !important;
    font-weight:  600 !important; 
}

.gridleft{ /*latestnews_cat.php */
    width: 65%; 
    float: left;
    height: 100%;
    margin-right: 3%;
	padding:8px;
    background-color: rgba(57, 57, 57, 0.36);
    -webkit-box-shadow: 0px 0px 5px 0px #000;
    -moz-box-shadow: 0px 0px 5px 0px #000;
    box-shadow: 0px 0px 5px 0px #000;
}

.gridright{ /*latestnews_cat.php */
    width: 28%;
    float: right;
    height: 100%;
    margin-bottom: 2%;
	padding:8px;
	background-color: rgba(57, 57, 57, 0.36);
    -webkit-box-shadow: 0px 0px 5px 0px #000;
    -moz-box-shadow: 0px 0px 5px 0px #000;
    box-shadow: 0px 0px 5px 0px #000;
}

.gridright ul{
    list-style: none;
    color: #fff;
    border-bottom: solid 1px #333;
    padding-bottom: 2%;
    margin-top: 2%;
    overflow: hidden;
}

.feature_detail{ /* product.php */

}

.feature_detail li{
    float:left;
    width:48%;
    padding-right: 2%;
}

.feature_detail li img{
    width:100%;
    cursor: url(https://spiroactivewear.com/_img/cursor_zoom.png), auto;
    cursor: url(https://spiroactivewear.com/_img/cursor_zoom.cur), auto;
}

.section_features { /* product.php */
	position: relative;
}

.section_features img{    
}

.resize{   
    width: 90%;
    position: relative;
    height: 100%;
}

.resize .item img{
    transition: 0.3s all ease-in-out;
    cursor: url(https://spiroactivewear.com/_img/cursor_zoom.png), auto;
    cursor: url(https://spiroactivewear.com/_img/cursor_zoom.cur), auto;
}

.resize {}

.image-thumbs{ /* product.php */
    position: absolute;
    float: right;
    top: 0px;
    right: -24.46%;
    width: 23.5%;
    max-height: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
	clear: both;
}

.image-thumbs ul{
    /width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 9999999;
    height: 98.9%;
}

.image-thumbs ul li{
    float: left;
    width: 100%;
    z-index: 9999999;
    margin-bottom: -0.78px;
}

.image-thumbs li img{
    width: 100%;
	z-index: 9;
    cursor: pointer;
}

._related_{ /* class="catalogue.php" */

}

._related_ ul{
    width: 100%;
}

._related_ ul li{
    float:left;
    padding-right:0.5%;
    margin:0;
}

._related_ ul li:hover{
    box-shadow: 0px 5px 0px #888;
    transition: 0.3s all ease-in-out;
}

._related_ ul li p{
    text-align: center;
    padding:0;
    margin:0;
}

._related_ ul li a{
	text-decoration: none;
}

._related_ img{
    width: 100%;
}

.p25px{ /* search_results.php */
    font-family: "Open Sans" !important;
    font-size: 25px;
    color: #eee;
}

.opsan{ /* product.php */
    font-family: "Open Sans" !important;
    color: #eee;
    font-weight:  600 !important; 
}

.p20px{ /* class_catalogue.php, latestnews_cat.php, search_results.php */
    font-family: "Open Sans" !important;
    font-size: 20px;
    color: #eee;
}

.p14px{ /*distributors.php, distributor_details.php, product.php */
    font-family: "Open Sans" !important;
    font-size: 14px;
    text-shadow: 0.5px 0.5px 1px #000;
    font-weight:  600 !important; 
    color: #eee;
}

.p14px-noshadow{ /* product.php */
   color: #ddd;
}

.p14-600px{ /* product.php */
    font-family: "Open Sans" !important;
    font-size: 14px;
    text-shadow: 0.5px 0.5px 1px #000;
    font-weight:  600 !important; 
    color: #eee;
}

.p12px{ /* browsecategory.php, latestnews_cat.php */
    font-family: "Open Sans" !important;
    font-size: 12px;
    
    font-weight:  600 !important; 
    color: #fff;
}

.OpenSan_Yellow{ /* distributors.php, latestnews.php, latestnews_cat.php */
    font-family: "Open Sans" !important;
    font-weight:  600 !important; 
    color: fff;
}

h4.OpenSan_Yellow{
    font-size: 14px;
}

.openSan{ /* latestnews.php */
    font-family: "Open Sans" !important;
    font-weight:  600 !important; 
}

.openSan_500{ /* resources.php */
    font-family: "Open Sans" !important;
    font-weight:  500 !important; 
    color:#ddd;
}

.openSan h3{
    font-size: 18px !important;
    color : #d61d23 !important;
}

p.openSan{
    color: #eee;
}

/** Product page tab section */

#tab_wrapper{
    margin-bottom: 5%;
    height: auto;
}

ul.tabs {
    width:auto;
    margin:0;
    padding:0;
}

ul.tabs li {
    display:block;
    float:left;
    padding-right:0px;
}

ul.tabs li a {
    display:block;
    float:left;
    padding:10px;
    font-size:0.8em;
    background-color: transparent;
    color: #e3eb5a;
    text-decoration:none;
}

.selected { /*   */
    background: #0051996e !important;
    color: #e3eb5a !important;
    padding: 0;
    margin: 0;
}

.tab-content { /* product.php */
    clear:both;    
    padding:10px;
    background-color:#0051996e; 
    color: #eee;
    height: auto;
}

.tab-content li{
    text-decoration: none;
    list-style-type: none;
}

.newsImages{ /* latestnews.php, class_latest_news.php, latestnews_cat.php */
    width:90%;
    max-height: 263px;
}

.news ul{ /* latest_news */
    margin-top: 1%;
	margin-bottom: 5%;
}

.news ul ul li{
    width: 90%;
}

.news ul ul{
    margin-left: 10%;
}

.news img{
    border-radius: 5px;
    padding: 5px;
    background-color: white;
}

#news_categories{ /* latest_news */
}

#news_categories li{
    cursor: pointer;
}

#news_categories li:hover{
	cursor: pointer;
    color: #BFCF4B;
    transition: all 0.3s ease-in
}

.remove_Border{ /* latest_news */
    border:none !important;
}

section p{
    font-size: 11px;
}

section h5{
    font-size: 14px !important;
}

.left_column{ /* latest_news */
    width: 40%;
    float:left;
    clear: left;
    padding: 10px;
    margin-top: 3.5%;
}

.right_column{
    width: 40%;
    float:left;
    margin-top: 5%;
}

#form input, #form select, #form textarea {
    background: none repeat scroll 0 0 #fafafa;
    border: 1px solid #5C5C5C;
    color: #5e5e5e;
    display: block;
    font-family: arial, sans-serif;
    font-size: inherit;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    margin-top: 10px;
    height: 40px;
}

/*SEARCH BUTTON**/

#form-container input, #form-container select, #form-container textarea {
    background: none repeat scroll 0 0 #fafafa;
    color: #000;
    display: block;
    font-family: arial, sans-serif;
    font-size: inherit;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    margin-top: 30px;
    height: 40px;
}

#searchtext { /* menu */
    overflow: hidden;
    padding-top: 0.05%;
}

a.search-submit-button {
    background: none repeat scroll 0 0 #BFCF4B;
    background-image: url(https://spiroactivewear.com/_img/icons/search_icon.jpg);
    border-bottom: 1px solid #6F6F6F;
    border-top: 1px solid #CFCFCF;
    color: #fff !important;
    display: block;
    float: right;
    font-family: inherit;
    font-size: 20px;
    padding: 8px 10px;
    text-align: center;
    width: 45px;
    box-sizing: border-box;
    height: 41px;
    cursor: pointer;
}

#searchtext:focus a.search-submit-button{
    color: #fff
}

#form-container {
}

/* Fixes submit button height problem in Firefox */

.tfbutton::-moz-focus-inner {
    border: 0;
}

.tfclear{
    clear:both;
}

.inplace_button{
	margin-top: 2%;
    width: 100%;
}

.fullGrid{
    width: 100%;
    text-align:center;
    margin-top: 4%;
    position: relative;
}

.expands_{ /* product.php */
    float: left;
    width: 33%; 
    margin-top: 0.5%; 
}

.expands_ img{
    width:96%;
    cursor: url(https://spiroactivewear.com/_img/cursor_zoom.png), auto;
    cursor: url(https://spiroactivewear.com/_img/cursor_zoom.cur), auto;
}

.fullGrid:after{ /* addon */
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;   
    background: url(https://spiroactivewear.com/_img/about/about_background_2.png); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    background-repeat: repeat;
    background-position: 50% 50%;
	background-color: #000;
    width: 100%;
    height: 100%;
    opacity : 0.1;
    border: solid 0.5px #fff; 
    z-index: -1;
}

.fullGrid button{
    width: 30%;
    min-height: 30px;
    margin-top: 4%;
    margin-bottom:4%;
}

.fullGrid ul{
    margin: 0 auto;
    width: 55%;
}

.fullGrid ul li{

}

.fullGrid ul li p{
    color:#B3AFAF;
}
.team_group{    /* addon */
    width: 100%;
    text-align:center;
    margin-top: 4%;
    position: relative;
}

.team_group ul{
    margin-left: 2.7%;
}

.team_group ul li{
    float: left;
    width: 14%;
}

.team_group ul li img{
    width: 100%;
    padding: 0px;
    margin-bottom: -5px;
}

.menu_alt{   /* carousel */ 
    position: absolute;
    top: 5px;
	z-index: 5;
    left: 30px;    
    display:none;
}

.menu_alt img{
    width:20% !important;    
    border: none !important;
    min-width: 5% !important;
}

.year li{

    display: none;

    width: 100%;

}

.info_1{ /* addon */
    cursor: pointer;
}

.info_2{ /* addon */
    cursor: pointer;
    display: none;     
}

.info_3{ /* addon */
    display: none;
    cursor: pointer;
}

.info_4{ /* addon */
    cursor: pointer;
    display: none;     
}

.info_5{ /* addon */
    cursor: pointer;
    display: none;     
}

.info_6{ /* addon */
    cursor: pointer;
    display: none;    
}

.info_7{ /* addon */
    cursor: pointer;
    display: none;    
}

.info_8{ /* addon */
    cursor: pointer;
    display: none;    
}

#tabs1 a:link, #tabs1 a:visited, tabs1 a:active{ /* product.php */
    color: #91F7FF !important;
}

.resizer_{ /* browsecategory.php */
    font-size:12px;
}

.fa { /* addon, menu, font-awesome */
	font: normal normal normal 14px/1 FontAwesome !important;
}

#categories_title { /* browsecategory.php */
	font-size: 35px !important;
}

/* category colour themes */
a#catMen:hover{
	color:#008EE7;
}

a#catWomen:hover{
	color:red;
}

a#catUni:hover{
	color:grey;
}

a#catJun:hover{
	color:yellow;
}

a#catBike:hover{
	color:orange;
}

a#catAcc:hover{
	color:green;
}

a#catFit:hover{
	color:#9656C5;
}

a#catTeam:hover{
	color:#2cf1e9;
}

a#catImp:hover{
	color:pink;
}

a#catBas:hover{
	color:#fff;
}

/*******

********/



.pic_1,.pic_2,.pic_3,.pic_4,.pic_5,.pic_6,.pic_7,.pic_8{ /* addon */
    cursor: pointer;
}

/* navigation */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

ul.topnav li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover, .dropdown:hover .dropbtn {
   
}

ul.topnav li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}


#mixmatch_box{
	background: #fff;
    clear: both;
	margin-bottom:2%;
}

.mixmatch_num {
	background: #504d4d;
    width: 100%;
    float: left;
	text-align:center;
}

.mixmatch_prodRange { 
	float: left;
    width: 95%;
}

.mixmatch_prodRange ul li { 
	width: 25%;
    float: left;  
}