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

/* - - - - - - - - - - - - - - - - - - - - -

Title : Anjie Australia
URL : http://www.anjieaus.com.au/

Author : FOX DESIGN creative
URL: www.foxdesign.com.au

- - - - - - - - - - - - - - - - - - - - - */

/*----------------------------------------------------------------------------- 
Global Styles
-----------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea, blockquote,th,td { 
	margin:0;
	padding:0;
}

 
table {
	border-collapse:collapse;
	border-spacing:0;
}




html,body,div,dl,dt,dd,pre,form,fieldset,input,textarea,blockquote { 
	margin:0; 
	padding:0; 
}

html { 
	margin:0; 
	padding:0; 
	overflow: -moz-scrollbars-vertical;
}

html,body {
	margin:0;
	padding:0;
}

/* Perfect Full Page Background Image*/
html { 
  background: url(../images/body_bg03.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

 

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

body,td,th,p,li {font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:24px; color: #d5d5d5; }
body {
 	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px; 
}

a { text-decoration:none; color: #ffffff; text-decoration:underline; }
a:hover { color: #ff2324;}

h1 { font-size:30px; line-height:30px; color:#cc071e; padding: 0px; padding-right:32px; margin:0px; text-align:left; font-family: 'Raleway', sans-serif; font-weight:400;}

h2 {font-size:37px; line-height:32px;  color:#000000; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:700; }

h3 {font-size:26px; line-height:32px;  color: #fff; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:700;}




h4 {font-size:18px; line-height:18px;  color: #cc071e; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:400;}
 

fieldset { 	border: 0; }

.clear { 
	clear: both; 
	font-size: 0; 
	height: 0; 
	line-height: 0; 
}
a img{ border:none;}
hr {height: 1px; color: #e6e4e2;  }

b{font-size:14px}
p{ padding:0px; color:#ffffff;}

/* end of global*/

#wrap{ float:left; 
width:100%; height:100%; 
min-height:100%; 
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
position:relative;
}

#wrap_product-page
{ float:left; 
width:100%; height:100%; 
min-height:100%; 
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
position:relative;

background-color:#f5f5f6; background-image:url(../images/body_bg.png); background-repeat:no-repeat; background-position:left top; 
}

.wrap_general{ float:left; width:100%; height:10px; min-height:10px;}
html>body .wrap_general{ height:auto;}

.wrap_general h3 {font-size:32px; line-height:60px;  color: #999999; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:700;}


/* header */

#header_wrap{ float:left; width:100%; height:39px; min-height:39px; background: url(../images/header_bg.png);}
html>body #header_wrap{ height:auto;}
#header{ margin:0 auto; width:1360px; height:30px; min-height:30px;}
html>body #header { height:auto;}

#logo{ float:left; width:50%; height:auto; text-align:center; padding:20px 0 10px 0; }

#header-right{ float:right; width:45%; height:40px; padding:30px 0 17px 0;}
#header_phone{ float:right; font-size:27px; color:#FFF; line-height:34px; height:34px; padding-right:25px; border-right:2px solid #cc071e; margin-right:25px;font-family: 'Raleway', sans-serif; font-weight: 700;}
#header_phone a{ color:#FFFFFF; }
#header_phone a:hover{ color:#cc071e; }
#call_icon{ float:right;  width:25px; height:34px; padding-right:15px; border-right:2px solid #cc071e; margin-right:75px; display:none; }


#header_email{ float:right; font-size:18px; color:#FFF; text-align: right;line-height:20px; height:40px; padding-right:25px; border-right:2px solid #cc071e; margin-right:25px;font-family: 'Raleway', sans-serif; font-weight: 400;}
#header_email a{ color:#FFFFFF; }
#header_email a:hover{ color:#cc071e; }
#email_icon{ float:right;  width:34px; height:34px; padding-right:15px; border-right:2px solid #cc071e; margin-right:85px; display:none; }

#header_icons{ float:right; height:34px; width:auto; padding:0 17px;}
.header_icons{ float:right; height:34px; width:34px; padding:0 5px;}

#header_bottom{float:left; width: 100%; height: auto; padding-bottom: 10px;}

#nav_wrap{ float:left; width:73%; height:40px;}
#search_wrap-out{ float:right; margin-right: 2%; width:23%; height:auto;  }

@media screen and (max-width: 1360px) {
#header{width: 95%; padding-right:0;}
	}
 @media screen and (max-width: 1120px) {
#nav_wrap{ float:right; width:100%; }
#search_wrap-out{float:left; width: 70%; padding-left:15%; margin-right: 0;}
	}

@media screen and (max-width:960px) {
#logo{width:60%; padding:20px 0 0 3%;}
#header-right{width:80px;}
#header_phone{display:none;} 
#call_icon{display: block; }
#header_email{display:none; line-height:34px;} 
#email_icon{display: block; }
#header_icons{ display:none;}
#nav_wrap{ float:right; width:100%; height: 0px;}
#search_wrap-out{margin: 20px 0; width: 96%; padding-left:2%; }
	}

/* search section */

#search_wrap{ margin:0 auto; width:100%; height:auto; border-radius: 5px; border:1px #e5e5e5 solid; background:#f7f7f7;  }
#search-bar{ float:left; width:85%; height:auto; padding:0 0;   text-align:center; }
#search-btn{ float:right; width:15%; height:40px; text-align: center; border-radius: 5px;  background: none;}
#search-btn:hover{ background:#f7f7f7; }
 
.searchfield
{ 
 border:none; border-width:0px;
 margin:0px; padding:0px; 
 font:normal 16px/38px Arial, Helvetica, sans-serif;
 text-align:center;
 color:#333;
 height:40px;  
 line-height: 40px;
 background:none;
width: 100%;
}

  
.search_btn
{ 
 margin:0; 
 font:normal 14px/38px Arial, Helvetica, sans-serif;  
 color: #FFF;
 cursor:pointer;
 text-align:center;
 border:none;
 height:40px; width:40px;
 background-image: url("../images/search_btn.png"); background-color: #f7f7f7; background-repeat: no-repeat;
}
.search_btn:hover {color:#f19f1d; text-decoration: underline;
 background-image: url("../images/search_btn-hover.png"); background-color:#f7f7f7;background-repeat: no-repeat;
}
 

/* home page slider show */
#slider-show{ position:relative; float:left; width:100%; height:100vh;}
 
#down-arrow{position:absolute; bottom:200px; height:50px; left:50%; margin-left:-25px; }
.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}


@media screen and (max-width: 800px) {
 
	}
	
/* home page short cut*/
.wrap02_out{ float:left; width:100%; height:40px; min-height:40px; background:#282828;}
html>body .wrap02_out{ height:auto;}

.wrap02{ margin:0 auto;  width:1200px; height:40px; min-height:40px;}
html>body .wrap02{ height:auto;}

.home-shortcut_out{ float:left; width:100%; height:152px; min-height:152px; background:#282828;}
html>body .home-shortcut_out{ height:auto;}

.home-shortcut{ margin:0 auto;  width:1200px; height:152px; min-height:152px;}
html>body .home-shortcut{ height:auto;}

.shortcut_wrap01{ float:left; width:24.7%; border-right:1px solid #3a3a3a; margin:10px 0;}
.shortcut_wrap01:hover{ background:#000000;}
.shortcut_wrap02{ float:left; width:24.7%; border-left:1px solid #070404; border-right:1px solid #3a3a3a; margin:10px 0; }
.shortcut_wrap02:hover{ background:#000000;}
.shortcut_wrap03{ float:left; width:24.7%; border-left:1px solid #070404; margin:10px 0; }
.shortcut_wrap03:hover{ background:#000000;}

.shortcut_img{ float:left; width:100%; text-align:center; height:auto;}
.shortcut_title{ float:left; width:100%; height:30px; line-height:30px; font-size:30px; font-family: 'Raleway', sans-serif; font-weight: 700; text-transform:uppercase; color:#FFF; text-align:center; height:auto;}
.shortcut_title a{color:#FFF;} .shortcut_title a:hover{color:#cc071e;}
.shortcut_des{ float:left; width:100%; height:18px; line-height:18px; font-size:12px; font-family: 'Raleway', sans-serif; font-weight: 400; color:#cc071e; text-align:center; height:auto;}

@media screen and (max-width: 1200px) {
.wrap02{ width:95%; } 
.home-shortcut: {width:95%; }
	}
@media screen and (max-width: 800px) {
.shortcut_wrap01{width:50%; border-right:none; margin:10px 0;}
.shortcut_wrap02{width:50%; border-left:none; border-right:none; margin:10px 0; }
.shortcut_wrap03{width:50%; border-left:none; margin:10px 0; }
	}
@media screen and (max-width: 600px) {
.shortcut_wrap01{width:100%; border-right:none; margin:10px 0;}
.shortcut_wrap02{width:100%; border-left:none; border-right:none; margin:10px 0; }
.shortcut_wrap03{width:100%; border-left:none; margin:10px 0; }
	}
	 	 

/* home page about*/
.wrap03_out{ float:left; width:100%; height:40px; min-height:40px; background:#000;}
html>body .wrap03_out{ height:auto;}
.wrap03{ margin:0 auto;  width:1200px; height:40px; min-height:40px;}
html>body .wrap03{ height:auto;}

#home-about_wrap{ float:left; width:100%; height:20px; min-height:20px; margin:3.167% 0; background:#cc071e;}
html>body #home-about_wrap{ height:auto;}
#home-about_text{ float: left; width:27%; padding:5.83% 2% 1% 2%; height:auto; background:#cc071e;}

#home-about_text h2{font-family: 'Raleway', sans-serif; font-weight: 700; font-size:37px; line-height:37px; color: #ffffff; padding-bottom:24px; text-transform:uppercase;}

.light-red{ color:#eab49a;}

#home-about_img{ float:right; width:67.5%; height:auto; border-left:#000000 solid 10px;}

@media screen and (max-width: 1200px) {
.wrap03{ width:95%; }
#home-about_text{ width:94%; padding:5.58% 3% 1% 3%;}
#home-about_img{ width:100%;  border-left:none; text-align:center;}
	}
 
 

/*-footer-*/
#footer_logo{ float:left; width:38%; height:48px; min-height:48px; text-align:center; margin:50px 0; }
html>body #footer_logo{ height:auto;}
#footer_contact{ float:left; width:30%; height:48px; min-height:48px;  margin:50px 0;}
html>body #footer_contact{height:auto;}

.footer{ font-family: 'Raleway', sans-serif; font-weight:200; color:#959595; font-size:16px; line-height:24px;}
.footer b{ font-family: 'Raleway', sans-serif; font-weight:700; color:#959595;}

#footer_link{ float:right; width:30%; height:48px; min-height:48px; margin:50px 0;}
html>body #footer_link{height:auto;}
.footer-link, .footer-link a{font-family: 'Raleway', sans-serif; font-weight:200; color:#5f5f5f; font-size:16px; line-height:24px;}
.footer-link a:hover{ color: #a6a6a6;}

@media screen and (max-width: 1200px) {
#footer_logo{ width:40%; height:48px; min-height:48px; text-align:center; margin:40px 0;}
#footer_contact{ width:60%; height:48px; min-height:48px;  margin:40px 0;}
#footer_link{ width:100%; height:48px; min-height:48px; margin:0 0 20px 0; text-align:center;} 
	}
@media screen and (max-width: 560px) {
#footer_logo{ width:100%; height:48px; min-height:48px; text-align:center; margin:30px 0 10px 0;}
#footer_contact{ width:100%; height:48px; min-height:48px;  margin:0 0 20px 0; text-align:center;}
	}
/* about us page */
#about_wrap-out{ float:left; width:100%; height:69px; min-height:69px; margin:38px 0;}
html>body #about_wrap-out{height:auto;}
#about_wrap { margin:0 auto; width:1200px; height:20px; min-height:20px; background: url(../images/about_bg.png);}
html>body #about_wrap {height:auto;}
#about { float:left; width:90%; padding:3% 5% 2% 5%;height:20px; min-height:20px;}
html>body #about {height:auto;}
#about h1{font-family: 'Raleway', sans-serif; font-weight: 700; font-size:40px; line-height:40px; color: #cc071e; padding-bottom:24px; }
#about h3 {font-size:26px; line-height:26px;  color: #cc071e; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:200; padding-bottom:20px;}
#about p{font-family: 'Raleway', sans-serif; font-weight: 200; font-size:20px; line-height:28px; color: #ffffff; padding-bottom:24px;}
p a{ color:#ffffff; text-decoration:underline;}
.about-img{ width:24.5%; height:auto; border-image:0;}
@media screen and (max-width: 1200px) {
#about_wrap { width:95%; }
 }
 
 @media screen and (max-width: 960px) {
.about-img{ width:49.5%; height:auto;}
 }
  
 @media screen and (max-width: 640px) {
.about-img{ width:100%; height:auto;}
 }
 
 
 .client{ float:left; width:14.666666%; height:auto; padding:1%;}
 .client:hover{ background:#000000;}
  
 @media screen and (max-width: 960px) {
 .client{ width:23%; height:auto; padding:1%;}
 }
   
 @media screen and (max-width: 760px) {
 .client{ width:31.3333%; height:auto; padding:1%;}
 }
 
/* people page */

/* old versioin
.people{ float:left; width:46%; height:auto; padding:2%;}
.people:hover{ background:#000000;}
.people img{ float:left; width:100%; height:auto; padding-bottom:20px;}
.people h3{ float:left; width:90%; height:auto; padding:0 0 0 5%; color:#ffffff; font-weight:400;}
.people p{ float:left; width:90%; height:auto; padding:0 0 20px 0%;}
 
   
 @media screen and (max-width: 1000px) {
.people{ width:31.3333%; height:auto; padding:1%;}
 }
    
 @media screen and (max-width: 800px) {
.people{ width:47%; height:auto; padding:1.5%;}
 }  

    
 @media screen and (max-width: 600px) {
.people{ width:96%; height:auto; padding:2%;}
 }  
  */
.people{ float:left; width:23%; height:auto; padding:1%;}
.people:hover{ background:#000000;}
.people img{ float:left; width:100%; height:auto; padding-bottom:20px;}
.people h3{ float:left; width:90%; height:auto; padding:0 0 0 5%; color:#ffffff; font-weight:400;}
.people p{ float:left; width:90%; min-height:50px; padding:0 0 20px 0%;}
 
   
 @media screen and (max-width: 1000px) {
.people{ width:31.3333%; height:auto; padding:1%;}
 }
    
 @media screen and (max-width: 800px) {
.people{ width:47%; height:auto; padding:1.5%;}
 }  
 
 
/* services page */
#page-title{ float:left; width:90%; height:auto; padding:3% 5%;}
#page-title h1{font-family: 'Raleway', sans-serif; font-weight: 700; font-size:40px; line-height:40px; color: #cc071e; }
.service_img{ float:left; width:50%; height:50%; text-align:center;}
.service_content-right{float:left; width:50%; height:50%; background:#ffffff;}
.service_content-right_title{float:left; padding:13.83% 3% 6.6% 8.3%; width:88.7%; height:auto;}
.service_content-right_title-left{float:left; margin-left:-16.1%; width:6.83%; height:11.83%; padding-right:8.3%; z-index:1000;}
.service_content-right_title-right{float:left; width:100%; height:auto; padding-top:18px;}
.service_content-right_title-right h2 {font-size:37px; line-height:35px;  color:#000000; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:700; }
.service_content-right p{font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:26px; color:#000000; padding-bottom:20px;}

.service_content-left{float:left; width:50%; height:50%; background:#ffffff; z-index:1000;}
.service_content-left_title{float:right; padding:13.83% 8.3% 6.6% 3%; width:88.7%; height:auto; }
.service_content-left_title-left{float:left; width:100%; height:auto; padding-top:18px;}
.service_content-left_title-left h2 {font-size:37px; line-height:35px;  color:#000000; padding: 0px; margin:0px; font-family: 'Raleway', sans-serif; font-weight:700; text-align:right}
.service_content-left_title-right{float:right; margin-right:-12%; width:6.83%; height:11.83%; }
.service_content-left p{font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:26px; color:#000000; padding-bottom:20px; text-align:right;}


@media screen and (max-width: 800px) {
 .service_content-left{ float:right; border-top: 1px solid #000000;border-bottom: 1px solid #000000;}
 .service_img{width:100%; height:auto; border-top: 1px solid #ffffff;}
 .service_content-right{ width:100%; height:auto; border-top: 1px solid #000000;}
 .service_content-right_title{ padding:5% 1% 6.6% 8.3%;  }
 .service_content-right_title-left{ margin-left:0; width:0; padding-right:0; overflow:hidden;}
 
 .service_content-left{ width:100%; height:auto; }
 .service_content-left_title{ padding:5% 8.3% 6.6% 1%;  }
 .service_content-left_title-right{ margin-left:0; width:0; padding-right:0; overflow:hidden;}
 }


/* ---projects--- */
.project_wrap {float:left; width:50%; height:25%; background:#FFFFFF; margin-bottom:20px; }
.project_icon{float:left; width:50%; height: 218px; max-height:218px; overflow: hidden; position: relative; line-height: 0; }
.project_icon-right{ float:right; width:42%; padding: 10% 3% 0 0; height:40%; }
.project_icon-right h3 {font-size:27px; line-height:27px;  color:#000000; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:700; text-transform:uppercase;}
.project_wrap:hover { background:#cc071e;}
 
@media screen and (max-width: 1200px) {
.project_icon{ height:180px; }
.project_icon-right{padding: 5% 3% 0 0; height:50%; }
 }
 @media screen and (max-width: 800px) {
.project_wrap { width:100%;}
 }
 
/* projects detail page */
.project_img{ float:left; width:72.75%; height:50%; text-align:center;}
.project_right{float:left; width:27.25%; height:50%; background:#ffffff;}
.project_title{float:left; padding:20% 3% 6.6% 8.3%; width:88.7%; height:auto;}
.project_title-left{float:left; margin-left:-16.1%; width:6.83%; height:11.83%; padding-right:8.3%; z-index:1000;}
.project_title-right{float:left; width:100%; height:auto; }
.project_title-right h1 {font-size:37px; line-height:35px;  color:#cc071e; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:700; text-transform:uppercase; margin-bottom:30px;}
.project-right p{font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:26px; color:#000000; padding-bottom:20px;}
.project_title p{font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:26px; color:#000000; padding-bottom:20px;}

@media screen and (max-width: 800px) {
 .project_img{width:100%; height:auto; }
 .project_right{ width:100%; height:auto; }
 .project_title{ padding:5% 1% 6.6% 8.3%;  }
 .project_title-left{ margin-left:0; width:0; padding-right:0; overflow:hidden;}
 }
 
 
/* windows gallery */
#windows-gallery{ float:left; padding:3%; width:94%; height:auto;}
 

/*-contact us-*/

#contact-us_left{float:left; width:50%; height:26px; min-height:26px; color:#FFF;} 
html>body #contact-us_left{ height:auto}
#contact-us_left a {color:#FFF;}


#contact-us_right{float:right; width:45%; height:26px; min-height:26px; margin-bottom:20px; font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:24px; color: #d5d5d5;}
html>body #contact-us_right{ height:auto}

@media screen and (max-width: 850px) {

#contact-us_left{ width:100%;}

#contact-us_right{width:100% }
.inputfield-contact{width:100%}
.inputfield_drop{ width:100%}
.submitBtn{ width:100%}
}

/* contact form */			

.inputfield-contact
{ 
 border-width:0px;
 padding:1px 1% 2px 3%;
 width: 97%;
 background-image: url(image/bg_contact.gif);
 background-repeat:repeat;
 font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:24px; color: #000;
}

.inputfield_drop
{ 
 border-width:0px;
 padding:1px 1% 2px 3%;
font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:24px; color: #000;
 width: 97%;
background: #FFF ;
}

.submitBtn{ width:100%; text-align:center; cursor:pointer; background: #cc071e; border:none;   color: #ffffff; margin-top:10px;font-family: 'Raleway', sans-serif; font-weight: 200; font-size:30px; line-height:40px; color: #FFF;}
.submitBtn:hover{color:#cc071e; background:#FFF; text-align:center; }

/* validate */

#PicValidate { font-size:12px; color:#FF0000; width:32px; line-height:22px;}
#call-submit2 { width:218px; height:22px; cursor:pointer;}

#validate_inputfield{ float:left; width:60px; height:30px; margin-right:20px;}
.inputfield-validate
{ 
 border-width:1px;
 border: thin;
 padding:0px 3px 0px 3px;
 font: normal 12px/30px Arial, Helvetica, sans-serif ;
 width: 60px;
 height:30px;
 color:#1e5692;
 background:#FFF;}
#validete_image{ float:left; width:100px; height:30px; overflow:hidden; overflow:hidden;}
#change-picture{ float:right; height:30px; width:32px; margin-right:16px;}
.change-picture{ width:32px; height:30px; background: url(../images/change-picture.png); cursor:pointer; background-position:center; border:0px;}
.change-picture:hover{background:url(../images/change-picture_hover.png); cursor:pointer; background-position:center;}



/* products */
#products_wrap-out{ float:left; width:100%; height:69px; min-height:69px; margin:38px 0;}
html>body #products_wrap-out{height:auto;}
#products_wrap { margin:0 auto;  max-width:1280px; height:20px; min-height:20px; padding: 20px 50px 50px 50px;  background: url(../images/about_bg.png);}
html>body #products_wrap {height:auto;}


.product-category{padding: 3%; margin:0.5%;  width: 26%; height: auto; border-radius: 20px; display: inline-block;vertical-align:top;}
.product-category:hover{background-color: #cc071e;}
.product-category_img{margin-bottom: 30px;  float: left; width: 70%; height: auto; padding: 15%;  filter: grayscale(0%); overflow: hidden; background-color: #fff; border-radius: 400px;}
.product-category_img:hover { filter: grayscale(100%); transform: scale(1.1); transition: all .5s; display: block; }
.product-category_des{float: left; padding: 25% 5% 2% 5%; width:90%; min-height: 40px; background-image: url("../images/down-arrow.png"); background-position: center top; background-repeat: no-repeat; }

.product-category_des h3{text-align: center;  font-size: 20px; font-weight: 600;  line-height: 19px; color: #fff; }
.product-category_des p{text-align: center;  font-size: 16px; font-weight: 400;  line-height: 16px; color: #fff; }

@media screen and (max-width: 1200px) {
#products_wrap {  padding: 10px 35px 35px 35px; }
 .product-category{float: left; padding: 2%;  width: 45%; height: auto; }
} 
 
@media screen and (max-width: 720px) {
 #products_wrap {  padding: 10px 20px 20px 20px; }
 
} 
 

.product-list{display: inline-block; padding: 3% 1.5% 1.5% 1.5%; margin:0.5%;  width: 29%;  height: auto;   background-color: #333; vertical-align:top;}
.product-list:hover{background-color: #cc071e;}
.product-list_img{float: left; width: 100%;  max-height: 218px; padding-bottom: 30px;  filter: grayscale(0%); overflow: hidden;}
.product-list_img:hover { filter: grayscale(100%); transform: scale(1.1); transition: all .5s; display: block; }
.product-list_des{float: left; padding: 15% 5% 5% 5%; width:90%; min-height: 40px; background-image: url("../images/down-arrow.png"); background-position: center top; background-repeat: no-repeat; }

.product-list_des h3{text-align: center;  font-size: 20px; font-weight: 600;  line-height: 19px; color: #fff; } 
.product-list_des p{text-align: center;  font-size: 16px; font-weight: 400;  line-height: 16px; color: #fff; }
 

@media screen and (max-width: 1200px) {
#products_wrap {  padding: 10px 35px 35px 35px; }
 .product-list{float: left; padding: 2%;  width: 45%; height: auto; }
} 
 
@media screen and (max-width: 720px) {
 #products_wrap {  padding: 10px 20px 20px 20px; }
 .product-list{float: left; padding: 3%;  margin:2% 0;   width: 93%; height: auto; }
} 
 
/* product info */
#product_cover{float: left; width: 100%; height: auto; text-align: center;}
.product-left{float: left; padding: 3%;  width: 64%; background-color: #282828; }
.product-right{float: right; padding: 3% 2%;  width: 26%; background-color:#1b1b1b; }
.product_50{float: left; padding-right: 1%; width: 49%;}
#products_wrap h2{font-size:38px; line-height: 50px; margin: 25px 0 20px 0; color:#cc071e; padding-top: 25px; border-top: 1px solid #000;}
.product-left h3{font-size:28px; line-height: 40px; margin-bottom: 20px; color: #ffffff; font-weight: bold; }
.product-left ul{ list-style: none;}
.product-left  li{ padding:10px  0 10px 24px; background: url("../images/arrow_right02.png"); background-repeat: no-repeat;  font-weight: bold;}
.product-left p{padding: 10px 0;}

.product-right h3 {font-size:26px; line-height:26px;  color: #ffffff; padding: 0px; margin:0px;  text-align:left; font-family: 'Raleway', sans-serif; font-weight: bold;  }
.product-right p{padding: 5px 0;}
   
@media screen and (max-width: 860px) {
.product-left{ padding: 5%;  width: 90%; }
.product-right{float: left; padding: 5%;  width: 90%; } 
} 
   
@media screen and (max-width: 600px) {
.product_50{float: left; padding: 2% 1%; width: 98%;}
} 



/* membe login */
.login_wrap{ float: left; width: 100%;  color:#ffffff; margin: 25px 0;  padding-top: 25px; border-top: 1px solid #000;  }

/* PDF download */
.pdfBtn{float: left; margin:10px 0; padding: 5%;  border-radius: 6px;  border: 2px #585858 solid; width:89%;  font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:18px;  color: #ffffff; text-align:left; cursor:pointer; display: block;}
.pdfBtn a{ color:#fff;}
.pdfBtn:hover{color:#fff; background:#cc071e; text-align:left; border: 2px #cc071e solid;  }

.pdfBtn .left{float: left; width: 18%;}
.pdfBtn .right{float: right; width: 80%;}

.product_inner-wrap{ float: left; width: 100%;  color:#666; margin: 25px 0;  padding-top: 25px; border-top: 1px solid #000;font-family: 'Raleway', sans-serif; font-weight: 600; font-size:24px; line-height:28px;  }

.subBtn{float: left; margin:10px 0; padding: 5%; border: 5px #cc071e solid; width:89%;  font-family: 'Raleway', sans-serif; font-weight: 600; font-size:20px; line-height:18px;  color: #ffffff; text-align:center; cursor:pointer; display: block; text-transform: uppercase; background:#000;   }
.subBtn a{ color:#fff; }
.subBtn:hover{color:#fff; background:#cc071e; text-align:center; }

/* Employment*/
#employment-brief_wrap{float:left; margin-bottom: 20px; width: 100%; height: auto;background-image: url("../images/employment.jpg"); background-position: center center; background-repeat: no-repeat; }
#employment-brief{float:left;padding: 4% 4% 2% 4%;  width:42%; height: auto; background-color: rgba(0, 0, 0, 0.8);}
#employment-brief p {padding-bottom: 20px; font-size: 22px; line-height: 28px;  font-weight: 400}

.employment_wrap{float:left; margin-bottom: 20px; width: 100%; height: auto;
  background-image: url("../images/employment02.jpg"); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;}
.employment{float:right;padding: 4% 4% 2% 4%;  width:42%; height: auto; background-color: rgba(255, 255, 255, 0.98);}
.employment p{font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:26px; color:#000000; padding-bottom:20px;}
.employment h2 {font-size:37px; line-height:35px;  color:#000000; padding: 0 0 0 30px; margin:0 0 30px 0;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:700; cursor: pointer; background-image: url("../images/arrow_right04.png"); background-repeat: no-repeat;}
.employment h3 {font-size:24px; line-height:30px;  color:#000000; padding: 0px; margin:20px 0 10px 0;  text-align:left; font-family: 'Raleway', sans-serif; font-weight:700; }
.employment ul {margin-bottom:30px;}
.employment ul li {padding: 0 0 5px 25px;  color:#000; font-weight: 700; background: url("../images/arrow_right03.png" ); background-position: left top; background-repeat: no-repeat;}

 
 @media screen and (max-width: 960px) {
#employment-brief{float:left;padding: 4%;  width:92%; height: auto; background-color: rgba(0, 0, 0, 0.8);}
.employment{float:left;padding: 4%;  width:92%; height: auto; background-color: rgba(255, 255, 255, 0.95);} 
 }

 
.applyBtn{float: left; margin:10px 0; padding: 4%; border: 5px #cc071e solid; width:50%;  font-family: 'Raleway', sans-serif; font-weight: 600; font-size:26px; line-height:20px;  color: #000; text-align:center; cursor:pointer; display: block; text-transform: uppercase; text-decoration: none; border-radius: 100px;}
.applyBtn a{ color:#fff; }
.applyBtn:hover{color:#fff; background:#cc071e; text-align:center; }



/* products listing test! */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: auto;
  gap: 20px; /* consistent gap */
}

.product-card {
  border: 1px solid #ddd;
  padding: 16px;
  background: #fff;
}