/* stylesheet information
File created date: 17.01.2017
By: Sze Wei
Last modified date: 26.04.2017
By: Sze Wei
*/

/* reset */
* {padding:0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
del {text-decoration: line-through;}
abbr[title], dfn[title] {
	border-bottom:1px dotted #ccc;
	cursor:help;
}
.clear {clear:both;}
.clear:after {
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
	content: ".";
}
a img {border:none;}
img {border: 0px; -ms-interpolation-mode: bicubic; vertical-align: middle;}
input:focus, textarea:focus, select:focus {outline: none;}
.hide {display: none;}
.purge > img {clear: both; margin: 0; padding: 0;}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align:
	baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
table button, table input {*overflow: auto;}
/* end */

/* CSS 3 @ fontface */
@font-face {
    font-family: 'ralewaybold';
    src: url('../fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-bold-webfont.woff') format('woff'),
         url('../fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('../fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaylight';
    src: url('../fonts/raleway-light-webfont.woff2') format('woff2'),
         url('../fonts/raleway-light-webfont.woff') format('woff'),
         url('../fonts/raleway-light-webfont.ttf') format('truetype'),
         url('../fonts/raleway-light-webfont.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaymedium';
    src: url('../fonts/raleway-medium-webfont.woff2') format('woff2'),
         url('../fonts/raleway-medium-webfont.woff') format('woff'),
         url('../fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('../fonts/raleway-medium-webfont.svg#ralewaymedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff'),
         url('../fonts/raleway-regular-webfont.ttf') format('truetype'),
         url('../fonts/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaysemibold';
    src: url('../fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-semibold-webfont.woff') format('woff'),
         url('../fonts/raleway-semibold-webfont.ttf') format('truetype'),
         url('../fonts/raleway-semibold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* end */

/* basic structure */
html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'ralewayregular', Helvetica, sans-serif;
	font-size: 62.5%;
	color: #222222;
	background: #fff;
	hyphens: none;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
}
.container {
	width: 100%;
	min-height: 100%;
	position: relative;
	overflow: hidden;
}
.wrapper {
	max-width: 1280px;
	height: auto;
	margin: 0 auto;
	padding: 0 3%;
	position: relative;
}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}

p {
	font-size: 1.6em;
	line-height: 1.6em;
}
/* end */

/*nav*/
.header {
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	padding: 3% 0;

}
.logo {
	width: 30%;
	float: left;
	position: relative;
}

#nav-trigger {
  display: none;
	float: right;
}

#nav-trigger span {
	position: relative;
display: inline-block;
height: 25px;
width: 35px;
/*padding: 10px 30px;*/
/*background-color: #ff0032;*/
color: white;
cursor: pointer;
text-transform: uppercase;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}

#nav-trigger span:after {
	content: "";
	position: absolute;
	top: 10px;
	left: 0px;
	width: 100%;
	border-top: 2px solid #fff;
}

nav {
  /*margin-bottom: 30px;*/
	position: relative;
}

nav#nav-main {
  /*background-color: #ff0032;*/
  /*padding: 10px 0;*/
	width: 70%;
	float: right;
}

nav#nav-main ul {
  list-style-type: none;
  margin: 0;
  padding-top: 2%;
  text-align: center;
	float: right;
}

nav#nav-main li {
  display: inline-block;
  /*border-right: solid 1px #cc0028;*/
	float: left;
	padding-left: 75px;
}

nav#nav-main li:last-child {
  border-right: none;
}

nav#nav-main a {
	font-family: 'ralewaymedium';
	font-size: 1.6em;
  display: block;
  color: #fff;
	text-decoration: none;
}

nav#nav-main a:hover {
  color: #fff600;
}

nav#nav-mobile {
	position: relative;
	display: none;
	clear: both;
	width: 300px;
	float: right;
}

nav#nav-mobile ul {
  display: none;
  list-style-type: none;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: #fff;
}

nav#nav-mobile li {
  display: block;
  padding: 5px 0;
  margin: 0 5px;
  border-bottom: solid 1px #f4f4f4;
}

nav#nav-mobile li:last-child {
  border-bottom: none;
}

nav#nav-mobile a {
  display: block;
	font-family: 'ralewaysemibold';
	font-size: 1.6em;
	text-decoration: none;
  color: #222222;
  padding: 10px 30px;
}

nav#nav-mobile a:hover {
  color: #fff600;
}

/*end nav*/


/*.header {
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	padding: 3% 0;
}

.logo {
	width: 30%;
	float: left;
	position: relative;
}

.nav ul, .footer ul {
    list-style-type: none;
		width: 70%;
		float: right;
}

.nav li, .footer li {
    float: right;
}

.nav li a, .footer li a {
    display: block;
    color: white;
    text-align: center;
    padding: 0 0 0 75px;
    text-decoration: none;
		font-family: 'ralewaysemibold';
		font-size: 1.6em;
}

.nav li a:hover, .footer li a:hover {
	color: #fff600;
}*/
/*footerNav*/
.footer {
	background: #0e0e0e;
	padding: 35px 0;
}

.copyright {
	float: left;
}

.copyright p {
	color: #fff;
	font-family: 'ralewaymedium';
}

.footer ul {
    list-style-type: none;
		float: right;
}

.footer li {
    float: left;
		padding-left: 75px;
}

.footer li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
		font-family: 'ralewaymedium';
		font-size: 1.6em;
}

.footer li a:hover {
	color: #fff600;
}

/*end footerNav*/


.landingSection1 {
	background: url(../images/landingbackground1.jpg) no-repeat center center;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
 	width: 100%;
	/*min-height: 801px;*/
}

.landingRed {
	width: 50%;
	background: rgba(211, 30, 57, 0.8);
	/*min-height: 801px;*/
	position: relative;
}

.landingContent1 {
	padding: 30% 10%;
}

.landingContent1 h1 {
	font-family: 'ralewaylight';
	font-size: 7em;
	color: #fff;
}

.landingContent1 p {
	color: #fff;
	padding-top: 10%;
}

.landingSection2 {
	width: 100%;
	height: auto;
}

.landingImage2 {
	width: 50%;
	float: left;
	position: absolute;
	bottom: 0;
	left: 0;
}

.landingImage2 img {
	width: 100%;
}

.landingContent2 {
	width: 50%;
	float: right;
	/*margin-left: 5%;
	margin-right: 5%;*/
	padding: 8% 0 8% 5%;
	position: relative;
}

.landingContent2 h1 {
	font-family: 'ralewaylight';
	font-size: 7em;
	color: #000;
}

.landingContent2 p {
	color: #000;
	padding-top: 5%;
	padding-bottom: 10%;
}

.landingSection3 {
	background: url(../images/landingbackground2.jpg) center center no-repeat;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
 	width: 100%;
	/*display: block;*/
	/*min-height: 620px;*/
	position: relative;
	/*overflow: hidden;*/
}

.landingContent3 {
	width: 100%;
	display: inline-block;
	padding: 5% 0;
	/*position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);*/
}

.landingContent3 h1 {
	font-family: 'ralewaylight';
	text-align: center;
	padding-bottom: 3%;
	color: #fff;
	font-size: 5.0em;
}

/*.landingService_content {
	width: 100%;
	position: relative;
}

.service {
	width: 33.33%;
	text-align: center;
	float: left;
	padding: 0 2%;
}

.serviceContent {
	width: 100%;
	padding: 3%;
}

.serviceContent img {
	width: 50%;
}

.serviceContent h1 {
	font-family: 'ralewaymedium';
	font-size: 2em;
	color: #fff;
}

.serviceContent p {
	color: #fff;
	margin-top: 15px;
}*/

.service_slider {
	width: 70%;
	margin: 0 auto;
	text-align: center;
}

.service_slider h2 {
	font-family: 'ralewayregular';
	font-size: 2em;
	color: #fff600;
}

.service_slider p {
	color: #fff;
	margin-top: 10px;
}

.landingSection4 {
	width: 100%;
}

.landingContent4 {
	width: 50%;
	min-height: 640px;
	float: left;
	background: #d31e39;
	position: relative;
}

.landingImage4 {
	float: right;
	width: 50%;
	min-height: 640px;
	position: relative;
}

.landingImage4 img, .landingImage5 img {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -47%);
}

.landingSection5 {
	width: 100%;
}

.landingContent5 {
	width: 50%;
	min-height: 640px;
	float: right;
	background: #d31e39;
	position: relative;
}

.landingImage5 {
	float: left;;
	width: 50%;
  min-height: 640px;
	position: relative;
}

/*.landingImage5 img {
	width: 100%;
}*/


.landingContent4 {
	position: relative;
	padding: 10% 5%;
}

.landingContent5 {
	position: relative;
	padding: 6% 5%;
}


.landingContent4 h1, .landingContent5 h1 {
	font-family: 'ralewaylight';
	font-size: 7em;
	color: #fff;
}

.landingContent4 p, .landingContent5 p{
	color: #fff;
	padding-top: 35px;
	padding-bottom: 20%;
}

/*findOutMoreBtn*/
.morebtn {
	width: 205px;
	height: 65px;
	text-decoration: none;
	display: block;
}

.btnborder1, .btnborder2 {
	width: 200px;
	height: 60px;
	border: 1px solid #fff600;
}

.btnborder1 {
	font-family: 'ralewaybold';
	font-size: 1.8em;
	color: #fff600;
	line-height: 60px;
	text-align: center;
	/*padding: 16px 33px;*/
	position: relative;
	display: block;
	/*text-decoration: none;*/
	top: -5px;
	right: -5px;
}

.btnborder2 {
	position: absolute;
	bottom: 0px;
	left: -5px;
}
.animate, .animate div  {
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
.morebtn:hover .btnborder2 {
	bottom: 5px;
	left: 0;
}
.morebtn:hover .btnborder1 {
	top: 0;
	right: 0;
	/*color: #fff;
	background: #fff600;*/
}

.btnborder1.redbtn, .btnborder2.redbtn {
	width: 200px;
	height: 60px;
	border: 1px solid #d31e39;
	color: #d31e39;
}

.morebtn.animate.right {
	float: right;
}

.morebtn.animate.center {
	margin: 0 auto;
	/*margin-top: 30px;*/
}
/*end findOutMoreBtn*/

.landingSection6 {
	background: url(../images/contactbackground.jpg) no-repeat center center;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
 	width: 100%;
	display: block;
	/*min-height: 700px;*/
	position: relative;
}

.landingContact {
	width: 100%;
	display: block;
	position: relative;
	padding-top: 50px;
}

/*tab*/
ul.resp-tabs-list {
	margin: 0 auto;
	text-align: center;
}

.resp-tabs-list li {
	font-family: 'ralewaybold';
	color: #fff;
	font-size: 1.8em;
  display: inline-block;
  padding: 13px 35px;
  list-style: none;
  cursor: pointer;
  /*float: left;*/
}

.resp-tabs-container {
  padding: 0px;
	/*background-color: #fff;*/
  clear: left;
}

h2.resp-accordion {
  cursor: pointer;
  padding: 5px;
  display: none;
}

.resp-tab-content {
  display: none;
  padding: 15px;
}

.resp-tab-active {
	margin-bottom: -1px;
	padding: 12px 14px 14px 14px;
	border-bottom: 2px solid #5AB1D0;
}

/*.resp-tab-active {
  border-bottom: none;
  background-color: #fff;
}*/

.resp-content-active {
  display: block;
}

.resp-tab-content {
  /*border: 1px solid #c1c1c1;*/
	/*border-top: 1px solid #fff;*/
	padding: 7% 5%;
	color: #fff;
	/*border-top-color: #5AB1D0;*/
}
/*end tab*/
.landingContact_content {
	width: 100%;
	position: relative;
}

.contact {
	width: 33.33%;
	text-align: center;
	float: left;
	padding: 0 2%;
}

.contactContent {
	width: 100%;
	padding: 3%;
}

.contactContent img {
	width: 50%;
}

.contactContent h1 {
	font-family: 'ralewaybold';
	font-size: 2em;
	color: #fff;
}

.contactContent p {
	color: #fff;
}

/*form*/
form {
	width: 55%;
	position: relative;
	margin: 0 auto;
}

form .formTextField {
	/*font-family: 'ralewayregular';*/
	width: 100%;
	height: 55px;
	background: #ebebeb;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 30px;
	position: relative;
}
form .formTextField input {
	font-family: 'ralewayregular';
	width: 100%;
	height: 55px;
	padding: 1% 3%;
	font-size: 1.4em;
	line-height: 50px;
	color: #d31e39;
	background: none;
	border: none;
	outline: none;
}
form .formTextArea {
	font-size: 1.2em;
	width: 100%;
	height: 120px;
	background: #ebebeb;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 30px;
	position: relative;
	padding: 10px 0;
}
form .formTextArea textarea {
	font-family: 'ralewayregular';
	width: 100%;
	height: 100px;
	padding: 1% 3%;
	font-size: 1.2em;
	color: #d31e39;
	background: none;
	border: none;
	outline: none;
	resize: none;
}

form .formTextField ::-webkit-input-placeholder {
	color: #d31e39;
	font-style: italic;
}

form .formTextField :-moz-placeholder {
	color: #d31e39;
	font-style: italic;
}

form .formTextField ::-moz-placeholder {
	color: #d31e39;
	font-style: italic;
}

form .formTextField :-ms-input-placeholder {
	color: #d31e39;
	font-style: italic;
}

form .formTextArea ::-webkit-input-placeholder {
	color: #d31e39;
	font-style: italic;
}

form .formTextArea :-moz-placeholder {
	color: #d31e39;
	font-style: italic;
}

form .formTextArea ::-moz-placeholder {
	color: #d31e39;
	font-style: italic;
}

form .formTextArea :-ms-input-placeholder {
	color: #d31e39;
	font-style: italic;
}

form .btnSubmit {
	width: 100%;
	height: 55px;
	line-height: 40px;
	background: #d31e39;
	font-family: 'ralewayregular';
	font-size: 2.0em;
	text-decoration: none;
	text-align: center;
	color: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 30px;
	cursor: pointer;
	display: inline-block;
	border: none;
	outline: none;
	-webkit-appearance: none;
}
/*end form*/

.contact_map {
	width: 60%;
	position: relative;
	border: 3px solid #fff;
	border-radius: 5px;
	height: 430px;
	display: inline-block;
	overflow: hidden;
	left: 20%;
}

/*end landing*/

/*about*/
.aboutSection1 {
	background: url(../images/abouttitle.jpg) no-repeat center center;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
 	width: 100%;
	height: 620px;
	clear: both;
}

.titleContent1 {
	width: 60%;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 0 3%;
}

.titleContent1 h1 {
	font-family: 'ralewaylight';
	font-size: 7em;
	color: #fff;
}

.titleContent1 p {
	color: #fff;
	padding-top: 20px;
}

.aboutHistory {
	width: 100%;
	border-bottom: 1px solid #d7d7d7;
}

/*.aboutContent2 {
	width: 60%;
	position: relative;
	float: left;
	height: auto;
	padding: 0 3%;
	margin-top: 60px;
}*/

.aboutContent2 {
	width: 100%;
	position: relative;
	height: auto;
	padding: 0 3%;
	margin-top: 60px;
}

.aboutContentImg {
	width: 40%;
	position: absolute;
	float: right;
	/*margin-top: 60px;*/
	bottom: 0;
	right: 0;
}

.aboutContentImg img {
	width: 100%;
}

.aboutContent2 h1 {
	font-family: 'ralewaylight';
	font-size: 7em;
	color: #000;
	width: 100%;
}

.aboutContent2_details {
	padding: 2% 0 5% 0;
}

.aboutContent2_details p {
	color: #000;
}

.aboutContent2_details h2 {
	padding-top: 10px;
	font-size: 1.3em;
	font-weight: bold;
	color: #222222;
	padding-bottom: 5px;
}

.productList_Des ol {
	/*font-family: 'ralewaylight';*/
	font-size: 1.6em;
	line-height: 1.6em;
	list-style-type: none;
	counter-reset: item;
	margin: 0;
	padding: 0;
}

.productList_Des li {
  display: table;
  counter-increment: item;
}

.productList_Des li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 5px;
}

.aboutValues {
	width: 100%;
	display: inline-block;
	padding: 5% 0;
	position: relative;
}

.valueContent{
	width: 100%;
	position: relative;
}

.value {
	width: 33.33%;
	float: left;
	padding: 0 2%;
}

.valueContent1 {
	width: 100%;
	padding: 3%;
}

.valueContent1 img {
	width: 50%;
	position: absolute;
	opacity: 0.5;
	top: 0;
	right: 0;
}

.valueContent1 h1 {
	font-family: 'ralewaymedium';
	font-size: 2em;
	color: #222222;
}

.valueContent1 p {
	margin-top: 15px;
}

.aboutSection3 {
	background: url(../images/aboutmore.jpg) no-repeat center center;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
 	width: 100%;
	height: 490px;
}

.aboutContent3 {
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 0 3%;
}

.aboutContent3 h1 {
	font-family: 'ralewaylight';
	font-size: 7em;
	color: #fff;
	padding-bottom: 8%
}

.aboutContent3 p {
	color: #fff;
	width: 50%;
	margin: 0 auto;
	padding-top: 1%;
}

.aboutSection4 {
	width: 100%;
	height: auto;
}

.aboutClient {
	margin: 0 10%;
	height: 100px;
}

.client {
	padding: 5%;
	float: left;
	margin: 0 auto;
	width: 33.33%;
	text-align: center;
}

.client1 {
	width: 100%;
}

.client1 img {
	width: 60%;
}
/*end about*/

/*catalogue*/
.catalogueSection1 {
	background: url(../images/cataloguetitle.jpg) no-repeat center center;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
 	width: 100%;
	height: 620px;
	clear: both;
}

.catalogueSection2, .catalogueSection3 {
	width: 100%;
	height: auto;
	display: inline-block;
}

.catalogueSection2 {
	margin-top: 60px;
}

.catalogueSection3 {
	padding: 4% 0 6% 0;
}

.catalogueContent2, .catalogueImage2 {
	width: 50%;
	float: left;
}

.catalogueImage1, .catalogueContent3 {
	width: 50%;
	float: right;
}

.catalogueContent2 {
	text-align: right;
	padding-top: 10%;
	margin-bottom: 40px;
}

.catalogueImage1 {
	padding-left: 3%;
}


.catalogueContent3 {
	padding-left: 3%;
	padding-top: 10%;
}


.catalogueContent2 h1, .catalogueContent3 h1 {
	font-family: 'ralewaylight';
	font-size: 5em;
	color: #000;
	/*width: 94%;*/
}

.catalogueContent2 p, .catalogueContent3 p{
	color: #000;
	padding-top: 20px;
	/*width: 94%;*/
	margin-bottom: 10%;
}

.catalogueImage1 img, .catalogueImage2 img {
	width: 100%;
}

/*end catalogue*/

/*products*/
.productsSection1 {
	background: url(../images/productstitle.jpg) no-repeat center center;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
 	width: 100%;
	height: 620px;
	clear: both;
}


.productsSection2 {
	width: 100%;
	position: relative;
	margin-top: 8%;
}

.productList {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 80px;
}

.productList_Img {
	width: 55%;
	float: left;
	padding-right: 3%;
}

.productList_Des {
	width: 45%;
	float: right;
	/*display: inline-block;
	position: relative;
	top: 50%;
	transform: translateY(50%)*/
}

.productList_Img img {
	width: 100%;
}

.productList_Des h2 {
	font-size: 2em;
	font-family: 'ralewaymedium';
	padding-bottom: 5px;
}

.productList_Des ol {
	font-size: 1.4em;
	padding-top: 10px;
}

/*.productsSection2 {
	width: 100%;
	position: relative;
}

.bar {
	position: relative;
}

.slider__item p {
	font-family: 'ralewaybold';
	font-size: 2.2em;
	text-align: left;
	padding-top: 4%;
}

.productPop {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	background-color: #fff;
	top: 0;
	left: 0;
	display: none;
}

.btnClosePop {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	padding: 2%;
}

.productPopContainer {
	width: 80%;
	text-align: left;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 3%;
}

.popup_image {
	float: left;
	width: 50%;
	padding: 2%;
}

.popup_image img {
	width: 100%;
}

.popup_description {
	float: right;
	width: 50%;
	padding: 2%;
}

.popup_description h2 {
	font-family: 'ralewaybold';
	font-size: 3.0em;
	color: #222222;
}

.popup_description h3 {
	font-family: 'ralewaymedium';
	font-size: 2.2em;
	color: #222222;
	padding-top: 6%;
}

.popup_description p {
	padding-top: 2%;
}*/

/*end products*/

/* max queries */
@media (max-width: 1280px) {

}

@media (max-width: 1000px) {
	/*nav*/
	#nav-trigger {
	display: block;
	}

	nav#nav-main {
		display: none;
	}

	nav#nav-mobile {
		display: block;
		z-index: 1;
	}
	/*end nav*/

	/*footer*/
	.footer li {
		padding-left: 45px;
	}
	/*end footer*/

	/*landing*/
	.landingRed {
		width: 80%;
	}

	.landingImage2 {
		width: 55%;
	}

	.landingContent2 {
		width: 45%;
		padding: 8% 0 8% 5%;
	}

	.serviceContent img, .contactContent img {
		width: 60%;
	}

	form {
		width: 65%;
	}

	.contact_map {
		width: 84%;
		left: 8%;
	}
	/*end landing*/

	/*category*/
	.catalogueContent2, .catalogueContent3 {
		padding-top: 6%;
	}
	/*end category*/

	/*products*/
	.productPopContainer {
		width: 100%;
	}
	/*end products*/
}

@media (max-width: 850px) {

	.wrapper {
		padding: 0 4%;
	}

	/*landing*/
	.landingRed {
		width: 100%;
	}

	.landingImage2 {
		display: none;
	}

	.landingContent2 {
		width: 80%;
		float: none;
		margin: 0 auto;
		padding: 8% 0;
	}

	.service_slider {
    width: 80%;
	}

	form {
		width: 75%;
	}

	/*end landing*/

	/*about*/
	.titleContent1 {
		width: 70%;
	}

	.aboutContent2 {
		width: 100%;
		float: none;
		height: auto;
		padding: 0 3%;
		margin-top: 60px;
	}

	.aboutContentImg {
		width: 60%;
		position: relative;
		float: none;
		/*margin-top: 60px;*/
		bottom: 0;
		margin: 0 auto;
	}

	.aboutContent3 p {
		width: 70%;
	}

	.client1 img {
		width: 70%;
	}
	/*end about*/

	/*category*/
	.catalogueContent2, .catalogueContent3 {
		padding-top: 0;
	}
	/*end category*/

	/*product*/
	.productList {
		margin-bottom: 50px;
	}
	.productList_Img, .productList_Des {
		float: none;
		width: 100%;
	}

	.productList_Img {
		padding-right: 0;
	}
	/*end product*/
}

@media (max-width: 750px) {
	.wrapper {
		padding: 0 5%;
	}

	.header {
		padding: 5% 0;
	}

	/*footer*/
	.copyright, .footer ul, .footer li {
		float: none;
	}

	.footer li {
		padding-left: 0;
		padding-top: 5%;
	}

	.footer li a {
		text-align: left;
		display: inline-block;
	}
	/*end footer*/

	/*landing*/
	.landingContent4, .landingContent5 {
		width: 100%;
		float: none;
		height: auto;
		display: inline-block;
		padding: 24% 5%;
	}

	.landingImage4, .landingImage5 {
		float: none;
		width: 100%;
	}

	.service_slider {
    width: 90%;
	}

	.serviceContent img, .contactContent img {
		width: 50%;
	}

	.service, .contact {
		float: none;
		width: 60%;
		margin: 0 auto;
		padding: 2% 0;
	}

	.landingContact {
		padding-top: 30px;

	}

	.contactContent {
		padding: 3% 0 8% 0;
	}

	form {
		width: 85%;
	}
	/*end landing*/

	/*about*/
	/*.valueContent1 img {
		display: none;
	}*/
	.titleContent1 {
		width: 90%;
	}

	.valueContent1 img {
		width: 30%;
	}

	.client1 img {
		width: 80%;
	}

	.value {
		float: none;
		width: 100%;
	}
	/*end about*/

	/*catalogue*/
	.catalogueSection3 {
		padding: 4% 0 15% 0;
	}
	.catalogueImage1, .catalogueImage2, .catalogueContent2, .catalogueContent3 {
		float: none;
		padding: 0 3%;
	}

	.catalogueImage1, .catalogueImage2 {
		width: 100%;
	}

	.catalogueImage1 img, .catalogueImage2 img {
		width: 100%;
	}

	.catalogueContent2, .catalogueContent3 {
		width: 100%;
		padding-top: 4%;
	}

	.catalogueContent2 {
		text-align: left;
	}

	.morebtn.animate.right {
		float: none;
	}
	/*end catalogue*/
}

@media (max-width: 560px) {

	/*footer*/
	.footer li {
		padding-top: 7%;
	}
	/*end footer*/

	/*landing*/
	.landingContent1 {
		padding: 30% 0;
	}

	.landingContent1 h1, .landingContent2 h1, .landingContent4 h1, .landingContent5 h1 {
		font-size: 6em;
	}

	.landingContent2 {
		width: 100%;
	}

	.service_slider {
		width: 100%;
	}

	.service, .contact {
		width: 80%;
	}

	form {
		width: 100%;
	}

	.contact_map {
		width: 100%;
		left: 0;
	}
	/*end landing*/

	/*about*/
	.titleContent1 {
		width: 100%;
	}

	.titleContent1 h1,.aboutContent2 h1, .aboutContent3 h1 {
		font-size: 6em;
	}

	.aboutContent2 {
		padding: 0;
	}

	.aboutContent3 p {
		width: 100%;
	}

	.value {
		padding: 0;
	}

	.valueContent1 {
		padding: 3% 0;
	}

	.client1 img {
		width: 90%;
	}
	/*end about*/

	/*products*/
	.productPop {
		overflow-y: scroll;
	}

	.productPop::-webkit-scrollbar {
	  display: none;
	}

	.productPopContainer {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		margin: 0 auto;
	}

	.popup_image {
		float: none;
		width: 100%;
		margin: 0 auto;
	}

	.popup_description {
		float: none;
		width: 100%;
	}
	/*end products*/
}

/* mobile media queries */

/* iPhone 4 and 4S */
/* Portrait and Landscape */
@media only screen
	and (min-device-width: 320px)
	and (max-device-width: 480px)
	and (-webkit-min-device-pixel-ratio: 2) {
			/*body {font-size: 90%;}*/

			.wrapper {
				padding: 0 5%;
			}

			.header {
				padding: 5% 0;
			}

			/*nav*/
			#nav-trigger {
			display: block;
			}

			nav#nav-main {
				display: none;
			}

			nav#nav-mobile {
				display: block;
				z-index: 1;
			}
			/*end nav*/

			/*footer*/
			.copyright, .footer ul, .footer li {
				float: none;
			}

			.footer li {
				padding-left: 0;
				padding-top: 7%;
			}

			.footer li a {
				text-align: left;
				display: inline-block;
			}
			/*end footer*/

			/*landing*/
			.landingRed {
				width: 100%;
			}

			.landingImage2 {
				display: none;
			}

			.landingContent1 {
				padding: 30% 0;
			}

			.landingContent1 h1, .landingContent2 h1, .landingContent4 h1, .landingContent5 h1 {
				font-size: 6em;
			}

			.landingContent2 {
				width: 100%;
				float: none;
				margin: 0 auto;
				padding: 8% 0;
			}

			.landingContent4, .landingContent5 {
				width: 100%;
				float: none;
				height: auto;
				display: inline-block;
				padding: 24% 5%;
			}

			.landingImage4, .landingImage5 {
				float: none;
				width: 100%;
			}

			.service_slider {
				width: 100%;
			}

			.serviceContent img, .contactContent img {
				width: 50%;
			}

			.service, .contact {
				float: none;
				width: 80%;
				margin: 0 auto;
				padding: 2% 0;
			}

			.landingContact {
				padding-top: 30px;

			}

			.contactContent {
				padding: 3% 0 8% 0;
			}

			form {
				width: 100%;
			}

			.contact_map {
				width: 100%;
				left: 0;
			}
			/*end landing*/

			/*about*/
			.titleContent1 {
				width: 100%;
			}

			.titleContent1 h1,.aboutContent2 h1, .aboutContent3 h1 {
				font-size: 6em;
			}

			.aboutContent2 {
				width: 100%;
				float: none;
				height: auto;
				padding: 0;
				margin-top: 60px;
			}

			.aboutContentImg {
				width: 60%;
				position: relative;
				float: none;
				bottom: 0;
				margin: 0 auto;
			}

			.valueContent1 img {
				width: 30%;
			}

			.value {
				float: none;
				width: 100%;
				padding: 0;
			}

			.valueContent1 {
				padding: 3% 0;
			}

			.aboutContent3 p {
				width: 100%;
			}

			.client1 img {
				width: 90%;
			}
			/*end about*/

			/*products*/
			.productList {
				margin-bottom: 50px;
			}
			.productList_Img, .productList_Des {
				float: none;
				width: 100%;
			}

			.productList_Img {
				padding-right: 0;
			}



			.productPop {
				overflow-y: scroll;
			}

			.productPop::-webkit-scrollbar {
				display: none;
			}

			.productPopContainer {
				width: 100%;
				position: relative;
				top: 0;
				left: 0;
				transform: none;
				margin: 0 auto;
			}

			.popup_image {
				float: none;
				width: 100%;
				margin: 0 auto;
			}

			.popup_description {
				float: none;
				width: 100%;
			}
			/*end products*/

}

/* iPhone 6 */
/* Portrait and Landscape */
@media only screen
	and (min-device-width: 375px)
	and (max-device-width: 667px)
	and (-webkit-min-device-pixel-ratio: 2) {
			/*body {font-size: 100%;}*/

			.wrapper {
				padding: 0 5%;
			}

			.header {
				padding: 5% 0;
			}

			/*nav*/
			#nav-trigger {
			display: block;
			}

			nav#nav-main {
				display: none;
			}

			nav#nav-mobile {
				display: block;
				z-index: 1;
			}
			/*end nav*/

			/*footer*/
			.copyright, .footer ul, .footer li {
				float: none;
			}

			.footer li {
				padding-left: 0;
				padding-top: 7%;
			}

			.footer li a {
				text-align: left;
				display: inline-block;
			}
			/*end footer*/

			/*landing*/
			.landingRed {
				width: 100%;
			}

			.landingImage2 {
				display: none;
			}

			.landingContent1 {
				padding: 30% 0;
			}

			.landingContent1 h1, .landingContent2 h1, .landingContent4 h1, .landingContent5 h1 {
				font-size: 6em;
			}

			.landingContent2 {
				width: 100%;
				float: none;
				margin: 0 auto;
				padding: 8% 0;
			}

			.landingContent4, .landingContent5 {
				width: 100%;
				float: none;
				height: auto;
				display: inline-block;
				padding: 24% 5%;
			}

			.landingImage4, .landingImage5 {
				float: none;
				width: 100%;
			}

			.service_slider {
				width: 100%;
			}

			.serviceContent img, .contactContent img {
				width: 50%;
			}

			.service, .contact {
				float: none;
				width: 80%;
				margin: 0 auto;
				padding: 2% 0;
			}

			.landingContact {
				padding-top: 30px;

			}

			.contactContent {
				padding: 3% 0 8% 0;
			}

			form {
				width: 100%;
			}

			.contact_map {
				width: 100%;
				left: 0;
			}
			/*end landing*/

			/*about*/
			.titleContent1 {
				width: 100%;
			}

			.titleContent1 h1,.aboutContent2 h1, .aboutContent3 h1 {
				font-size: 6em;
			}

			.aboutContent2 {
				width: 100%;
				float: none;
				height: auto;
				padding: 0;
				margin-top: 60px;
			}

			.aboutContentImg {
				width: 60%;
				position: relative;
				float: none;
				bottom: 0;
				margin: 0 auto;
			}

			.valueContent1 img {
				width: 30%;
			}

			.value {
				float: none;
				width: 100%;
				padding: 0;
			}

			.valueContent1 {
				padding: 3% 0;
			}

			.aboutContent3 p {
				width: 100%;
			}

			.client1 img {
				width: 90%;
			}
			/*end about*/

			/*products*/
			.productList {
				margin-bottom: 50px;
			}
			.productList_Img, .productList_Des {
				float: none;
				width: 100%;
			}

			.productList_Img {
				padding-right: 0;
			}



			.productPop {
				overflow-y: scroll;
			}

			.productPop::-webkit-scrollbar {
				display: none;
			}

			.productPopContainer {
				width: 100%;
				position: relative;
				top: 0;
				left: 0;
				transform: none;
				margin: 0 auto;
			}

			.popup_image {
				float: none;
				width: 100%;
				margin: 0 auto;
			}

			.popup_description {
				float: none;
				width: 100%;
			}
			/*end products*/

}

/* iPhone 6+ */
/* Portrait and Landscape */
@media only screen
	and (min-device-width: 414px)
	and (max-device-width: 736px)
	and (-webkit-min-device-pixel-ratio: 3) {
			/*body {font-size: 110%;}*/

			.wrapper {
				padding: 0 5%;
			}

			.header {
				padding: 5% 0;
			}

			/*nav*/
			#nav-trigger {
			display: block;
			}

			nav#nav-main {
				display: none;
			}

			nav#nav-mobile {
				display: block;
				z-index: 1;
			}
			/*end nav*/

			/*footer*/
			.copyright, .footer ul, .footer li {
				float: none;
			}

			.footer li {
				padding-left: 0;
				padding-top: 7%;
			}

			.footer li a {
				text-align: left;
				display: inline-block;
			}
			/*end footer*/

			/*landing*/
			.landingRed {
				width: 100%;
			}

			.landingImage2 {
				display: none;
			}

			.landingContent1 {
				padding: 30% 0;
			}

			.landingContent1 h1, .landingContent2 h1, .landingContent4 h1, .landingContent5 h1 {
				font-size: 6em;
			}

			.landingContent2 {
				width: 100%;
				float: none;
				margin: 0 auto;
				padding: 8% 0;
			}

			.landingContent4, .landingContent5 {
				width: 100%;
				float: none;
				height: auto;
				display: inline-block;
				padding: 24% 5%;
			}

			.landingImage4, .landingImage5 {
				float: none;
				width: 100%;
			}

			.service_slider {
				width: 100%;
			}

			.serviceContent img, .contactContent img {
				width: 50%;
			}

			.service, .contact {
				float: none;
				width: 80%;
				margin: 0 auto;
				padding: 2% 0;
			}

			.landingContact {
				padding-top: 30px;

			}

			.contactContent {
				padding: 3% 0 8% 0;
			}

			form {
				width: 100%;
			}

			.contact_map {
				width: 100%;
				left: 0;
			}
			/*end landing*/

			/*about*/
			.titleContent1 {
				width: 100%;
			}

			.titleContent1 h1,.aboutContent2 h1, .aboutContent3 h1 {
				font-size: 6em;
			}

			.aboutContent2 {
				width: 100%;
				float: none;
				height: auto;
				padding: 0;
				margin-top: 60px;
			}

			.aboutContentImg {
				width: 60%;
				position: relative;
				float: none;
				bottom: 0;
				margin: 0 auto;
			}

			.valueContent1 img {
				width: 30%;
			}

			.value {
				float: none;
				width: 100%;
				padding: 0;
			}

			.valueContent1 {
				padding: 3% 0;
			}

			.aboutContent3 p {
				width: 100%;
			}

			.client1 img {
				width: 90%;
			}
			/*end about*/

			/*products*/
			.productList {
				margin-bottom: 50px;
			}
			.productList_Img, .productList_Des {
				float: none;
				width: 100%;
			}

			.productList_Img {
				padding-right: 0;
			}




			.productPop {
				overflow-y: scroll;
			}

			.productPop::-webkit-scrollbar {
				display: none;
			}

			.productPopContainer {
				width: 100%;
				position: relative;
				top: 0;
				left: 0;
				transform: none;
				margin: 0 auto;
			}

			.popup_image {
				float: none;
				width: 100%;
				margin: 0 auto;
			}

			.popup_description {
				float: none;
				width: 100%;
			}
			/*end products*/

}