body {font-family:Arial, Helvetica, sans-serif; color:#868686; padding:0; margin:0; font-size:14px;}
#wrapper {clear:both; width:1190px; margin:0 auto; padding: 250px 5px 10px 5px;}
#fixed-header {width:100%; position:fixed; top:0; background:#ffffff; padding-top:10px; /*height:270px;*/ z-index: 5000}
#header {width:1190px; margin:0 auto;}
#header h3 {color:#ffffff; padding:0; margin:0; font-size:18px; font-weight:normal;}
#header a {color:#ffffff;}
.logo {width:200px; display:block; padding-bottom:15px; margin:0 auto;}
.telephone {position:absolute; right:250px;}
.email {position:absolute; left:250px;}
h1, h2, h3, h4, h5 {font-family:'Nunito', sans-serif; color:#3f54b1;}
h2 {clear:both}
p {font-size: 14px; margin:0 0 12px 0; line-height:24px;}
.link_text {font-weight:bold; color:#454545;}
.clear {clear:both;}
.centered {text-align:center;}
ul li {font-size: 14px; margin:0 0 12px 0; line-height:18px;}
ol li {font-size: 14px; margin:0 0 12px 0; line-height:18px;}
h1 {font-size:24px;}
h2 {font-size:20px; padding:10px 0px 6px 0px;}
h3 {font-size:18px; padding:10px 0px 6px 0px;}
h4 {font-size:16px; padding:10px 0px 6px 0px;}
h5 {font-size:14px; padding:10px 0px 6px 0px;}
a {text-decoration:none;}
#content a, #content a link, #content a:hover, #content a:visited {color:#348d37}
#news a, #news a link, #news a:hover, #news a:visited { color:#348d37; margin-left:0; font-size:14px; }
em {font-weight:bold;}
.section {clear:both; padding:25px 0 25px 0; overflow:hidden;}
.section h1, .section_outlined h1 {text-align:center; text-transform:uppercase}
.section h1 a, .section_outlined a {color:#204388;}
.section a, .section_outlined h1 a {color:#204388;}
.section span, .section_outlined span  {color:#204388;}
.section_outlined {width:calc(100% - 5%); margin:20px 0 20px 4%; border:2px solid #EDEDED;}
#splash_container {width:100%;}
#wowslider_container {float:right; width:55%; margin-right:10px; box-shadow: 10px 10px 5px #888888;}
.intro_detail {float:left; width:40%;}
.intro_detail {text-align:center; /*color:#4e5944; font-family:'Source Sans Pro', sans-serif;*/}
.intro_detail h1 {font-size:30px; font-weight:normal; line-height:36px; padding:15px 10px; margin: 0 0 20px 0; text-transform: none;}
.intro_detail p {font-size:25px; line-height:35px; margin:15px 0 0 0;}
.news_item {width:80%; margin:0 auto; background:#EDEDED; padding:2%;}
.col_1_product_only {width:40%; background:#EDEDED; padding:2%; margin:0 auto;}
.col_1_1_narrow {width:40%; background:#EDEDED; padding:2%; margin:0 auto;}
.col_1_1_wide {width:80%; background:#EDEDED; padding:2%; margin:0 auto;}
.col_1_1 h2 {text-align:center;}
.col_1_1 img {width:20%; margin-left:40%;}
.col_1_2, .col_2_2 {width:40%; background:#EDEDED; float:left; padding:2%;}
.col_1_2 {margin:0 0 0 4%}
.col_2_2 {margin:0 0 0 4%;}
.full_width img {width:100%;}
.col_1_3, .col_2_3, .col_3_3 {width:25%; /*height:250px;*/ background:#EDEDED; float:left; padding:2%;}
.col_1_3 {margin:0 0 0 4%}
.col_2_3 {margin:0 0 0 4%;}
.col_3_3 {margin:0 0 0 4%;}
.flex_container {display:flex;}
.fixed_height_1 {/*height:255px;*/}
.fixed_height_2 {/*height:375px;*/}
.fixed_height_3 {/*height:300px;*/}
.col_1_4, .col_2_4, .col_3_4, .col_4_4 {width:16%; /*height:170px;*/ background:#EDEDED; float:left; padding:0 2%;}
.col_1_4 img, .col_2_4 img, .col_3_4 img, .col_4_4 img {width:70%; padding:15%;}
.col_1_4 {margin:0 0 0 4%}
.col_2_4 {margin:0 0 0 4%;}
.col_3_4 {margin:0 0 0 4%;}
.col_4_4 {margin:0 0 0 4%;}
.tennis_icon, .muga_icon, .netball_icon, .gym_icon, .play_icon, .line_marking_icon, .innovation_icon, .service_icon, .manufacturing_icon {background-position:center; background-repeat:no-repeat;}
.muga_icon {background-image:url(../images/muga_icon_01.png);}
.tennis_icon {background-image:url(../images/tennis_icon_01.png);}
.netball_icon {background-image:url(../images/netball_icon_01.png);}
.gym_icon {background-image:url(../images/gym_icon_01.png);}
.play_icon {background-image:url(../images/play_icon_01.png);}
.line_marking_icon {background-image:url(../images/line_marking_icon_01.png);}
.manufacturing_icon {background-image:url(../images/manufacturing_icon_01.png);}
.innovation_icon {background-image:url(../images/innovation_icon_01.png);}
.service_icon {background-image:url(../images/service_icon_01.png);}
.col_1_5, .col_2_5, .col_3_5, .col_4_5, .col_5_5 {width:14%; height:160px; background:#EDEDED; float:left; padding:0 0.6%;}
.col_1_5 img, .col_2_5 img, .col_3_5 img, .col_4_5 img, .col_5_5 img {width:70%; padding:15%;}
.col_1_5 {margin:0 0 0 4%}
.col_2_5 {margin:0 0 0 4%;}
.col_3_5 {margin:0 0 0 4%;}
.col_4_5 {margin:0 0 0 4%;}
.col_5_5 {margin:0 0 0 4%;}
.col_1_2_narrow {width:23.3%; /*height:250px;*/ background:#EDEDED; float:left; padding:2%; margin:0 0 0 4%;}
.col_2_2_narrow {width:23.3%; /*height:250px;*/ background:#EDEDED; float:right; padding:2%; margin:0 0 0 4%;}
.col_1_2_narrow img, .col_2_2_wide img {width:90%; margin-left:5%;}
.col_1_2_wide {width:56.7%; /*height:250px;*/ background:#EDEDED; float:left; padding:2%; margin:0 0 0 4%;}
.col_2_2_wide {width:56.7%; /*height:250px;*/ background:#EDEDED; float:right; padding:2%; margin:0 0 0 4%;}
.col_2_2_wide img, .col_2_2_narrow img {width:94%; padding:3%;}
.featured_image {float:right; width:50%;}
.featured_image img {width:95%; padding:0 0 0 5%;}
.product_image_left {float:left; width:45%; padding:5% 0 0 0;}
.product_image_right {float:right; width:45%; padding:0 0 0 5%;}
.news_item img {}
.image_1, .image_2 {float:left; padding:0 15px 10px 0;}
.image_3 {float:right; padding:0 0 10px 15px;}
.download {width:95%; background:#1d3969; color:#ffffff; margin:20px 0 0 0; padding:4px; overflow:hidden; padding:2.5%;}
.download img {display:block; margin:0 auto; padding-bottom:12px;}
.download_title {padding-bottom:8px;}
.download_frame {float:left; width:33%;}
.download_caption {color:#ffffff; text-align:center;}
.address_block {line-height:20px; padding-top:10px;}
.address {margin-left:125px;}
.address_title {float:left; text-align:right; width:115px;}
/* FORM FORMATTING BEGINS */
#contactform input {width:400px; border:#C4C4C4 solid 1px; color:#666666; height:15px; padding:2px; margin-bottom:10px;}
#contactform textarea {width:400px; height:100px; border:#C4C4C4 solid 1px; padding:2px; margin-bottom:10px;}
#contactform input#sendbtn {height:28px; width:100px;}
.form_input {float:left; clear:left;}
label {display:block; float:left; width:150px; text-align:right; margin:5px 5px 0 0; padding-right:5px;}
textarea {/*width:190px; height:60px;*/}
input {width:400px; height:25px; border:#C4C4C4 solid 1px; margin-bottom:5px;}
input[type=checkbox] {/*transform:scale(2)*/; vertical-align:middle;}
textarea {width:398px; height:200px; border:#C4C4C4 solid 1px; margin-bottom:5px;}
.boxes{width:1em;}
#button2 {width:300px; border:1px solid #C4C4C4; color:#666666; background:#ffffff; margin:7px 0px 10px 160px;}
#button2:hover {border: 1px solid #636363; background:#ffffff; }
span.error {color:red;}
.redbold {font-weight:bold; color:red; margin-bottom:15px;}
.geegees {position:absolute; top:0px; left:200px; width:50px; height:50px; border:solid 1px #C4C4C4;}
#recaptcha_widget_div {padding-top:8px; padding-bottom:8px;}
.address_block {padding-top:10px;}
.address {margin-left:125px;}
.address_title {float:left; text-align:right; width:115px;}
#main {float:left; margin:0 0 10px 10px; padding:0px 10px 10px 10px; width:40%;}
/* FORM FORMATTING BEGINS */
#formright {width:50%; float:right;}
#formright input {clear:left; width:230px; border:#666666 solid 1px; color:#666666; height:15px; padding:2px; margin-bottom:10px;}
#formright select {width:230px; border:#666666 solid 1px; color:#666666; height:23px; padding:2px; margin-bottom:10px;}
#formright textarea {width:230px; height:100px; border:#666 solid 1px; padding:2px; margin-bottom:10px;}
#formright input#sendbtn {height:28px; width:100px;}
#formright label{float:left; clear:left; width:220px; /*font-weight:bold;*/ text-align:left; margin-right:5px;}
input#postcode {width:80px;}
input, textarea{/*width:180px; margin-bottom:5px;*/}
#your_source {float:left; margin-bottom:10px;}
.boxes{width:1em;}
#submit1 {margin-left:220px; margin-top:15px; width:190px;}
#submit {color:black; width:135px; float:right; margin:15px 30px 0px 0px;}
#formright #button2 {border:1px solid #8B98D5; color:#ffffff; font-weight:bold; width:230px; height:30px;padding:0; background:#3f54b1; margin:7px 0px 10px 0;}
#formright #button2:hover {border:1px solid #445ABB; background:#5367C1;}
.circles {position:absolute; top:46px; left:80px; width:75px; height:75px; border:solid 1px black;}
.captcha {position:relative; height:130px; clear:both;}
#redsmall {font-size:12px; color:red; padding:0px 0px 7px 15px;}
.error {color:red;}
/* FORM FORMATTING ENDS */
#footer_outer {clear:both; width:100%; overflow:hidden; background:#fff; border-top: 5px solid #b0b0b0; border-bottom: 5px solid #b0b0b0;}
#footer {/*color:white;*/ padding:4px 0 4px 4px; width:1200px; /*height:200px;*/ margin-left:calc(50% - 600px); background:#ffffff;}
#footer h3 {color:#ffffff;}
#footer_col_1 {float:left; width:calc(25% - 15px); padding-left:15px;}
#footer_col_2 {float:left; width:calc(25% - 50px); margin-top:75px; padding-left:50px;}
#footer_col_2 a, #footer_col_3 a {color:#868686}
#footer_col_3 {float:left; width:calc(25% - 50px); margin-top:75px; padding-left:50px;}
#footer_col_4 {float:left; width:25%; margin-top:75px;}
#footer_accreditations {width:500px; margin:0 auto; padding:200px 0 30px 0; text-align:center;}
#footer_accreditations img {display:inline-block; height:75px; margin:0 10px;}
/*NAVIGATION*/
#menu {width:100%; background-color:#b0b0b0; height:40px;} /*This is the bar behind the menu items*/
#menu ul {list-style-type:none; margin:0; padding:0; position:absolute; left:calc(50% - 225px);} /*Strip the ul of padding and list styling*/
#menu ul li {margin:0; display:inline-block; float:left; border-right:1px solid white;}/*Create a horizontal list with spacing*/
.menu_first_item {border-left:1px solid white;} /* Adds vertical white line on left */
/*Style for menu links*/
#menu ul li a {display:block; padding-left:12px; padding-right:12px; height:40px; text-align:center; line-height:40px; font-family:Arial, Helvetica, sans-serif; color:#fff; background:#b0b0b0; text-decoration:none;}
#menu ul li:hover a {background:#3f54b1;} /*Hover state for top level links*/
#menu ul ul li {/*background:#3065CF !important; color:#C1D1F0; height:40px; line-height:40px;*/} /*Style for dropdown links*/
#menu ul ul li a {background:#224791 !important; color:#C1D1F0; height:40px; line-height:40px;} /*Style for dropdown links*/
#menu ul li ul li a:hover  {background:#2853A9; color:#ffffff; height:40px; line-height:40px;} /*Style for dropdown links*/
#menu ul li:hover #menu ul ul li a:hover {background:#1D3D7C; color:#fff;} /*Hover state for dropdown links*/
#menu ul li ul {display:none;} /*Hide dropdown links until they are needed*/
#menu ul li ul li {border-bottom:1px solid #ffffff; display:block; float:none;}/*Make dropdown links vertical*/
.first_dropdown_item {border-top:1px solid #ffffff;} /*Adds white line to top of li box*/
#menu ul li ul li a {width:auto; min-width:100px; padding:0 20px;} /*Prevent text wrapping*/
#menu a:hover + .hidden, .hidden:hover {display:block;}
#menu ul li ul:hover {display:block;}/*Display the dropdown on hover*/
/*Style 'show menu' label button and hide it by default*/
.show-menu {font-family:Arial, Helvetica, sans-serif; text-decoration:none; color:#fff; border-bottom:1px solid white; background:#1d3969; text-align:left; padding:10px 5px;	display:none; background-image: url(../images/menu_icon_1.gif);	background-repeat:no-repeat; background-position:95% 6px;}
/*Hide checkbox*/
input#show-menu[type=checkbox] {display:none;}
/*Show menu when invisible checkbox is checked*/
input#show-menu[type=checkbox]:checked ~ #mobile_menu_list {display:block;}
#mobile_menu {display:none;}
/*Offsets for dropdowns*/
#menu .first_item {margin-left:64px;}
#menu .second_item {margin-left:239px;}
#menu .third_item {margin-left:271px;}
#menu .fourth_item {margin-left:513px;}

/*Responsive Styles*/
@media all and (min-width: 1000px) and (max-width: 1199px){
#wrapper {width:990px; padding:200px 5px 10px 5px;}
#fixed-header {/*width:990px; padding-top:10px; height:192px;*/}
#header {width:990px;}
#header h3 {font-size:14px;}
.logo {width:160px;}
.telephone {margin-right:150px;}
.email {margin-left:150px;}
/*NAVIGATION*/
#menu {height:30px;} /*This is the bar behind the menu items*/
#menu ul {left:calc(50% - 215px);}
/*Style for menu links*/
#menu ul li a {height:30px; line-height:30px;}
#menu ul ul li a {height:30px; line-height:30px;} /*Style for dropdown links*/
#menu ul li ul li a:hover  {height:30px; line-height:30px;} /*Style for dropdown links*/
#menu ul li ul li a {width:auto; min-width:100px; padding:0 20px;} /*Prevent text wrapping*/
/*Offsets for dropdowns*/
#menu .first_item {margin-left:53px;}
#menu .second_item {margin-left:214px;}
#menu .third_item {margin-left:271px;}
#menu .fourth_item {margin-left:583px;}
#footer {width:1000px; margin-left:calc(50% - 500px);}
}

/*Responsive Styles*/
@media all and (min-width: 800px) and (max-width: 999px){
#wrapper {width:790px; padding:180px 5px 10px 5px;}
#fixed-header {/*width:790px; padding-top:0px; height:154px;*/}
#header {width:790px;}
.logo {width:150px;}
.telephone, .email {display:none;}
.intro_detail h1 {font-size:24px; line-height:28px;}
.intro_detail p {font-size:20px; line-height:24px;}
/*NAVIGATION*/
#menu {height:30px;}
#menu ul {left:calc(50% - 220px);}
/*Style for menu links*/
#menu ul li a {height:30px; line-height:30px;}
#menu ul ul li a {height:30px; line-height:30px;} /*Style for dropdown links*/
#menu ul li ul li a:hover  {height:30px; line-height:30px;} /*Style for dropdown links*/
#menu ul li ul li a {width:auto; min-width:100px; padding:0 20px;} /*Prevent text wrapping*/
/*Offsets for dropdowns*/
#menu .first_item {/*margin-left:9px;*/}
#menu .second_item {margin-left:248px;}
#menu .third_item {/*margin-left:271px;*/}
#menu .fourth_item {margin-left:470px;}
.col_1_4, .col_2_4, .col_3_4, .col_4_4 {/*height:120px;*/ padding:0 1%;}
.col_1_4 h1, .col_2_4 h1, .col_3_4 h1, .col_4_4 h1 {font-size:18px;}
#footer {width:800px; margin-left:calc(50% - 400px);}
}
@media screen and (min-width:480px) and (max-width:799px){
#wrapper {width:470px; padding:170px 5px 10px 5px;}
#fixed-header {/*width:480px; padding-top:10px; */height:120px;}
#header {width:480px;}
.logo {width:120px;}
.telephone, .email {display:none;}
#wowslider_container {float:right; width:calc(100% - 17px); margin-right:10px; box-shadow: 7px 7px 5px #888888;}
.intro_detail {width:100%; padding-top:15px;}
.intro_detail h1 {width:100%; font-size:20px; line-height:24px; padding:10px 0; margin:0}
.intro_detail p {font-size:16px; line-height:18px; margin:0;}
#menu {display:none; height:0;}/*This hides the bar*/
.menu_first_item {border:none;}
#mobile_menu {display:block; margin:0 auto; width:480px;}
#mobile_menu ul {padding:0; position:static; display:none; width:480px; list-style-type:none; background:#b0b0b0;}
#mobile_menu .show-menu {display:block; }
#mobile_menu ul li {margin:0; color:#ffffff; border-top:2px solid #ffffff; background:#b0b0b0;}
#mobile_menu ul li a {display:block; color:#ffffff; padding:5px;}
/*Displays Clickable Mobile Menu */
.show-menu {width:calc(100% - 5px); color:white; background-color:#b0b0b0; height:20px; padding:4px 0 0 5px; margin-top:5px; border-bottom:2px solid white; text-align:left; cursor:pointer;}
.sub_menu {clear:both; width:100%; display:block;}
.sub_menu ul {padding:0;}
.sub_menu li {float:left; width:50%; background-color: #1d3969; border-bottom: 1px solid white; text-align:center; margin:0; padding:5px;}
.sub_menu ul li {}
.sub_menu li a {color:white; font-weight:bold; text-decoration:none; display:block; width:100%; height:100%; }
.section {width:480px; padding:0; margin:25px 0;}
.flex_container {display:block;}
.col_1_1 img {width:40%; display:block; margin-left:0; margin-right:0; margin:auto;}
.col_1_2, .col_2_2 {width:90%; margin-top:25px;}
.col_1_1_narrow, .col_2_2_wide, .col_1_2_narrow {width:90%; margin-top:25px;}
.col_1_2_narrow img, .col_2_2_wide img {display:block; margin-left:0; margin-right:0; margin:auto; width:45%; margin-top:15px;}
.col_1_3, .col_2_3, .col_3_3 {width:90%; margin-bottom:15px;}
.col_1_3 h2, .col_2_3 h2, .col_3_3 h2 {padding:1%;}
.col_1_4, .col_2_4, .col_3_4, .col_4_4 {width:90%; margin-bottom:15px;}
.col_1_4 h1, .col_2_4 h1, .col_3_4 h1, .col_4_4 h1 {font-size:18px;}
.col_3_4, .col_4_4 {margin-top:35px;}
.col_1_5, .col_2_5, .col_3_5, .col_4_5, .col_5_5 {width:40%; height:185px;}
.col_3_5, .col_4_5, .col_5_5 {margin-top:15px;}
#formright {width:100%; float:left;}
#main {width:100%;}
#formright {float:left;clear:both;}

#footer {width:480px; margin-left:calc(50% - 240px);}
#footer p, #footer h3 {text-align:center;}
#footer_social, #footer_col_1, #footer_col_2, #footer_col_3, #footer_col_4 {width:480px; padding:0 0 10px 0; margin:0;}

}
@media screen and (max-width:479px){
#wrapper {max-width:350px; margin:0 auto; margin-top:200px; padding:0;}
#fixed-header {/*width:360px; padding-top:0; height:160px;*/}
#header {width:360px; margin:0 auto;}
#header h3 {font-size:14px;}
.logo {width:120px;}
.telephone, .email {display:none}
#wowslider_container {float:right; width:calc(100% - 17px); margin-right:10px; box-shadow: 7px 7px 5px #888888;}
.intro_detail {width:100%; padding-top:15px;}
.intro_detail h1 {width:100%; font-size:20px; line-height:24px; padding:10px 0; margin:0}
.intro_detail p {font-size:16px; line-height:18px; margin:0;}
#menu {display:none; height:0; border:solid 1px red;}/*This hides the bar*/
.menu_first_item {border:none;}
#mobile_menu {display:block; margin:0 auto; width:360px; margin-top:33px;}
#mobile_menu ul {padding:0; margin:0; position:static; display:none; width:360px; list-style-type:none;}
#mobile_menu .show-menu {display:block; }
#mobile_menu ul li {margin:0; color:#ffffff;background: #b0b0b0;  border-top:2px solid #ffffff;}
#mobile_menu ul li a {display:block; color:#ffffff; padding:5px;}
/*Displays Clickable Mobile Menu */
.show-menu {width:calc(100% - 5px); color:white; background-color:#b0b0b0; height:20px; padding:4px 0 0 5px; margin-top:5px; border-bottom:2px solid white; text-align:left; cursor:pointer;}
.sub_menu {clear:both; width:100%; display:block;}
.sub_menu ul {padding:0;}
.sub_menu li {float:left; width:50%; background-color: #1d3969; border-bottom: 1px solid white; text-align:center; margin:0; padding:5px;}
.sub_menu ul li {}
.sub_menu li a {color:white; font-weight:bold; text-decoration:none; display:block; width:100%; height:100%; }
.section {width:347px; padding:0; margin:25px 0;}
.flex_container {display:block;}
.col_1_1 img {width:40%; display:block; margin-left:0; margin-right:0; margin:auto;}
.col_1_2, .col_2_2 {width:90%; margin-top:25px;}
.col_2_2_wide, .col_1_2_narrow {width:90%; margin-top:25px;}
.col_1_2_narrow img, .col_2_2_wide img {display:block; margin-left:0; margin-right:0; margin:auto; width:45%; margin-top:15px;}
.col_1_3, .col_2_3, .col_3_3 {width:90%; margin-bottom:15px;}
.col_1_3 h2, .col_2_3 h2, .col_3_3 h2 {padding:1%;}
.col_1_4, .col_2_4, .col_3_4, .col_4_4 {width:90%; margin-bottom:15px;}
.col_1_4 h1, .col_2_4 h1, .col_3_4 h1, .col_4_4 h1 {font-size:18px;}
.col_3_4, .col_4_4 {margin-top:35px;}
.col_1_5, .col_2_5, .col_3_5, .col_4_5, .col_5_5 {width:40%; height:185px;}
.col_3_5, .col_4_5, .col_5_5 {margin-top:15px;}
#main {width:100%;}
#formright {float:left;clear:both;}
#footer {width:347px; margin:0;}
#footer p, #footer h3 {width:347px; text-align:center;}
#footer_social, #footer_col_1, #footer_col_2, #footer_col_3, #footer_col_4 {width:360px; padding:0 0 10px 15px; margin:0;}
#footer_social {padding-left:140px;}
#footer_accreditations{width:347px; margin: 0 auto;}
#footer_accreditations img {display:block; margin: 0 auto;}
}