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

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

Title : All Safe Metal
URL :https://allsafemetal.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;
     box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  -webkit-box-sizing: content-box; 
}

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: #fff; text-decoration:underline;}
a:hover { color: #9e813d;}

h1 { font-size:55px; line-height:55px; color:#9e813d; padding: 0px; margin:0px; text-align:center; font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 700;}

h2 { font-size:45px; line-height:45px; color:#000000; padding: 0px; margin:0px; text-align:center;font-family: 'Barlow Condensed', sans-serif; font-weight:700;  text-transform: uppercase;}

h3 {font-size:26px; line-height:26px;  color:#9e813d; padding: 0px; margin:0px;   font-family: 'Raleway', sans-serif; font-weight:400; text-align: center;}

h4 {font-size:20px; line-height:20px;  color:#000; padding: 0px; margin:0px;  text-align:center; font-family: 'Titillium Web', sans-serif; font-weight:200; padding-bottom: 20px;}
.bold{font-weight:700; }
 

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;}

p a{ color:#ffffff; text-decoration:underline; }

/* 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_general{ float:left; width:100%; height:10px; min-height:10px;}
html>body .wrap_general{ height:auto;}

.wrap_general h2{ font-weight: 700 }

/* header */

#header_wrap{ float:left; width:100%; height:39px; min-height:39px; background:rgba(0,0,0,0.60); position:fixed; left:0; top:0; z-index:1000; }
html>body #header_wrap{ height:auto;}
#header{ margin:0 auto; max-width:1360px; height:30px; min-height:30px;}
html>body #header { height:auto;}

#logo{ float:left; width:30%; height:auto; text-align:center;   margin-bottom: -80px; }

#header-right{ float:right; width:70%; height:39px; padding:20px 0 2px 0;}
#header_phone{ float:right; font-size:27px; color:#fff; line-height:27px; height:27px; padding-right:25px; margin-right:25px; font-family: 'Titillium Web', sans-serif; font-weight:700; }
#header_phone a{ color:#fff; }
#header_phone a:hover{ color:#9e813d; }
#call_icon{ float:right;  width:29px; height:39px; padding-right:8px; margin-right:8px; 

 box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  -webkit-box-sizing: content-box; 

}
  
#nav_wrap{ float:right; width:70%; height:40px; padding-top: 20px;

 box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  -webkit-box-sizing: content-box; 

}


@media screen and (max-width: 960px) {
#header{width: 95%; padding-right:0;}
#logo{width:180px; padding:10px 10px 0px 0px;}
#header-right{width:180px;}
#header_phone{display:none;height:0px;} 
#call_icon{display: block; padding-top: 5px; padding-right:15px; border-right:2px solid #161f24; margin-right:65px; width:29px; 
    }
#header_email{display:none;} 
#nav_wrap{ width:95%; height:10px;padding-right:2.5%; padding-top: 0;}
	}
 

/* home page slider show */
#slider-show{ position:relative; float:left; width:100%; height:100vh;}
 
#down-arrow{position:absolute; bottom:50px; 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 company intro*/
#home-company-intro_wrap{float: left; width: 100%; height: auto; background:#000; padding: 40px 0;}
#home-company_left{float:left; width: 50%; height: auto; }
#home-company_right{float:right; width: 50%; height: auto; }
#home-company-intro{ float: right; padding: 0 3% 0 3%;  width: 44%; max-width: 700px; height: auto;}
#home-company-intro h1{ font-size:60px; line-height:60px; color:#9e813d; padding: 0px; margin:0 0 25px 0; text-align:left; font-weight:700; }
#home-company-intro p{font-family: 'Raleway', sans-serif; font-weight: 400; font-size:20px; line-height:28px; color: #ffffff; padding-bottom:20px; text-align: left;}
@media screen and (max-width: 1200px) {
	#home-company-intro{ width: 90%; }
	#home-company-intro h1{font-size:36px; line-height:34px;}
	#home-company-intro p{font-size:18px; line-height:25px;}
	}
/* home page projects*/
#home-projects_wrap-out{float: left; width: 100%; height: auto; background: #fff; padding: 40px 0;}
#home-projects_wrap{ margin: 0 auto; max-width: 1360px; height: auto;}
#home-projects_wrap h2 { font-size:45px; line-height:45px; color:#000000; padding: 0px; margin:0px; text-align:center; }
.home-projects{float:left; width: 24.2647%; height:auto; margin:2% 0.3676%;}
.home-projects:hover{background-color: #fff; }
.top-img{ float:left; width: 100%; height:100%; margin-bottom: 10px;text-align: center;}
.project-title{ float:left; width: 100%; min-height: 110px; height: 110px; margin:20px 0; color:black; font-size: 24px; line-height: 24px; font-family: 'Titillium Web', sans-serif; font-weight:700;text-transform: uppercase; }
html>body .project-title{height:auto;}
.project-title a{color:#000; display: block; }
.project-title a:hover{color:#9e813d;}
@media screen and (max-width: 1200px) {
	#home-company-intro{ width: 96%; }
	#home-projects_wrap h2{font-size:36px; line-height:34px; padding-bottom: 20px;}
	}
@media screen and (max-width: 720px) {
	#home-company_left{ width: 100%; margin-bottom: 3em;  }
    .home-projects{width: 48%; height:auto; margin:2% 1%;}
	}

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
	background: #222f37;
}

figure.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 3em;
	padding: 0 1em;
	width: 100%;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	max-width:200px;
}

figure.effect-apollo h2 {
	text-align: left; color:#fff; font-weight:normal; line-height:1em;
}

figure.effect-apollo:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

/* home page partners*/
#home-partners_wrap-out{float: left; width: 100%; height: auto; background:#d6d6d4; padding: 40px 0;}
#home-partners_wrap{ margin: 0 auto; max-width: 1200px; height: auto;}
#home-partners_wrap h2 { font-size:45px; line-height:45px; color:#fff; padding: 0px; margin:0px; text-align:center;  font-weight:700;}
.home-partners{ float:left;  width: 100%; height:auto; text-align: center;}
.home-partners img {padding: 5px; }

@media screen and (max-width: 1000px) {
	#home-partners_wrap{ width: 98%; }
	}
@media screen and (max-width: 800px) {
	.home-partners{ width: 98%; height:auto; margin:2%;}
	}
 
 /* project info */
.project-cover-img{float:left; width: 100%; height:auto; text-align: center;}

#project-info_wrap{float: left; width: 100%; height: auto; background:#f2f4f4; padding: 40px 0;}
#project-info{ margin: 0 auto; max-width: 1000px; height: auto;}
#project-info h1{ font-size:45px; line-height:40px; color:#000; padding: 0px; margin:25px 0; text-align:center ; font-weight:700;	 }
#project-info p{font-family: 'Raleway', sans-serif; font-weight: 400; font-size:18px; line-height:24px; color: #000; padding-bottom:18px; text-align: center;}


@media screen and (max-width: 1000px) {
#project-info{ max-width:90%; }
	}

/*-footer-*/
#footer_wrap-out{float:left; width: 100%; height: auto; background:#111111;}
#footer_cover{float:left; width: 100%; height: auto; text-align: center;}
#footer_wrap{ margin: 0 auto; max-width:1360px; height: auto; padding: 30px 0;}
#footer_logo{float:left; width: 25%; height: auto; text-align:center; }
#footer_contact{ float:left; width:55%; height: auto;}
#footer_social-wrap{float: right; width:15%; height: 34px;}
.footer_social {float: right; width: 34px; height:34px;margin-left: 20px; text-align: center;}
.footer_social  img{min-width: 100%;}

.footer{ font-family: 'Raleway', sans-serif; font-weight:400; color:#fff; font-size:18px; line-height:32px;}
.footer a { color:#fff;}
.footer a:hover{ color: #a6a6a6;}
.footer b{ font-family: 'Raleway', sans-serif; font-weight:700; color:#9e813d;}

#footer_link{ float:right; width:100%; height:auto;  background:#333333;}
.footer-link, .footer-link a{font-family: 'Raleway', sans-serif; font-weight:200; color:#fff; font-size:16px; line-height:16px; text-align: center; padding: 17px 0;}
.footer-link a { color:#fff;}
.footer-link a:hover{ color: #a6a6a6;}


@media screen and (max-width: 1359px) {
#footer_wrap{   max-width:92%; }
	}

@media screen and (max-width: 960px) {
#F{ width:60%; text-align:center; margin:0 20% 20px 20%;}
#footer_contact{ width:100%; text-align: center;}
#footer_social-wrap{float:left; width:100%; height: auto;}
.footer_social {width: 34px; height:34px; padding:0;}
#footer_link{  text-align:center;} 

#footer_logo{float:left; margin-left: 25%;  width: 50%; text-align:center; }
	}

 
.cover-img{float:left; width: 100%; height: auto; text-align: center;}

/* ---------------about us---------------- */
#about-us_wrap{float: left; width: 100%; height: auto; background:#242424; padding: 40px 0;}
#about-us{ margin: 0 auto; max-width: 1200px; height: auto;}
#about-us h1{ font-size:45px; line-height:40px; color:#9e813d; padding: 0px; margin:25px 0; text-align:center ;  font-weight:700; }
#about-us p{font-family:'Raleway',sans-serif; font-weight: 400; font-size:20px; line-height:28px;   padding-bottom:20px; }
.about-us_50{float:left; width: 45%; padding:0 2.5%; height: auto;}
.about-us_50 p {color: #fff;}

@media screen and (max-width: 960px) {
.about-us_50{float:left; width: 90%; padding:0 5%; }
	}

/* our team */
#people_wrap{float: left; width: 100%; height: auto; background:#3d3d3d; padding: 40px 0;}
#people{ margin: 0 auto; max-width: 1200px; height: auto;}
#people h2{ font-size:45px; line-height:40px; color:#fff; padding: 0px; margin:25px 0; text-align:center ;  font-weight:700;	text-transform: uppercase;}
.people{ float:left; width:23%; height:auto; padding:1%;}
.people:hover{ background:#9e813d; }
.people img{ float:left; width:100%; height:auto; padding-bottom:20px;}
.people h3{ float:left; width:90%; height:auto; padding:0 0 0 0; color:#ffffff; font-weight:400; text-align: center;}
.people p{ float:left; width:90%; height:auto; padding:0 0 20px 0%; text-align: center;}
 
   
 @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 */
 
#service_wrap{float: left; width: 100%; height: auto; background:#f2f2f2; padding: 40px 0;}
#service{ margin: 0 auto; max-width: 1200px; height: auto;}
#service h1{ font-size:45px; line-height:40px; color:#000; padding: 0px; margin:25px 0; text-align:center ;  font-weight:700;	text-transform: uppercase;}
#service  p{font-family:'Raleway',sans-serif; font-weight: 400; font-size:20px; line-height:28px; color: #000; padding-bottom:20px; }

.service-section{ float:left; width: 100%; height: auto; background:#fff;margin: 20px 0;}
.service-section:hover{background:#fff9f9;}

.service-01_img{ float:left; width:40%; height:auto; text-align:center;  }
.service-01_img:hover{ filter: grayscale(0%); }
.service-01_content{float:right; width:60%; height:auto;}

.service-02_img{ float:right; width:40%; height:auto; text-align:center; }
.service-02_img:hover{ filter: grayscale(0%); }
.service-02_content{float:left; width:60%; height:auto;}
 
.service_content{float:left; padding:5%; width:90%; height:auto;}

.service_content h2 {font-size:36px; line-height:35px;  color:#000; padding: 0px; margin:0px;  text-align:left;  font-weight:700; }
 
.service_content p{font-family: 'Raleway', sans-serif; font-weight: 400; font-size:16px; line-height:26px; color:#000; padding-bottom:20px;}

@media screen and (max-width: 960px) {
.service-01_img{ float:left; width:90%; padding:5%; height:auto; text-align:center;}
.service-01_content{float:right; width:100%; height:auto;}

.service-02_img{ float:left; width:90%; padding: 5%; height:auto; text-align:center;}
.service-02_content{float:right; width:100%; height:auto;}
 }


/* ---projects--- */
.project_wrap {float:left; width:50%; height:25%; background:#fff; margin-bottom:20px;}
.project_icon{float:left; width:50%; height:218px; overflow: hidden;}
.project_icon-right{ float:right; width:42%; padding: 15% 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:#9e813d;}
 
@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:#9e813d; padding: 0px; margin:0px;  text-align:left;   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;}

@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;}
 }
 
 

/*-contact us-*/

#contact-us_wrap{float: left; width: 100%; height: auto; background:#242424; padding: 40px 0;}
#contact-us{ margin: 0 auto; max-width: 800px; height: auto;}
#contact-us h1{ font-size:45px; line-height:40px; color:#9e813d; padding: 0px; margin:25px 0; text-align:center ;   font-weight:700;	text-transform: uppercase;}
#contact p{font-family:'Raleway',sans-serif; font-weight: 400; font-size:20px; line-height:28px; color: #ffffff; padding-bottom:20px; }
.title{color:#9e813d;}

@media screen and (max-width: 800px) {
#contact-us{ max-width:90%; }
	}