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

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

Title : Hero Plaster
URL :http://heroplaster.com.au/ 

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

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

/*----------------------------------------------------------------------------- 
Global Styles
-----------------------------------------------------------------------------*/
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;
}

 

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

body,td,th,p,li { font-family: "Titillium Web", sans-serif; font-weight: 400; font-size:20px; line-height:26px; color: #ffffff; }
body {
 	margin: 0px; 
	padding:0px;
}

a { text-decoration:none; color: #e7e7e7;}
a:hover { color: #c8c8ca;}

.titillium-web-light {
  font-family: "Titillium Web", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.titillium-web-regular {
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.titillium-web-bold {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-style: normal;
}


h1 { font-size:50px; line-height:45px; color:#fff; padding: 0px; margin:0px; padding-bottom:30px; text-align:left; text-transform:uppercase; font-weight: 700; }
h1 {
    position: relative;
    opacity: 0;  
    animation: fly-in 1.5s ease-out forwards;
}
 
@keyframes fly-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

h2 { font-size:50px; line-height:45px; color:#285daa; padding: 30px 0; margin:0px;  text-align:left; text-transform:uppercase; font-weight: 700; }
h2 {
    position: relative;
    opacity: 0;  
    animation: fly-in 1.5s ease-out forwards;
}


h3 {font-size:32px; line-height:32px;  color: #fff; padding: 0px; margin:0px;  text-align:left;  font-weight: 700;}

h4 {font: bold 14px/14px Verdana, Geneva, sans-serif; color: #292929; padding: 0px; margin:0px; text-align:left;}
 

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:20px}
p{ padding:0px; margin:0px 0px 30px 0px;}

.wrap_general{ float:left; width:100%; height:auto;}
.wrap_50{ float:left; width:50%; height:auto;}
@media screen and (max-width: 1200px) {
	.wrap_50{  width:100%;}
}


.about-col2 {
  column-count: 2;
  column-gap: 40px;
}
@media screen and (max-width: 900px) {
.about-col2 {
  column-count: 1;
  column-gap: 0px;
}
}

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


/* left nav */
#left_wrap{position:fixed; z-index:1000; float:left; width:282px; height:auto;  padding:20px 30px 20px 20px; }

#logo{ float:left; width:100%; height:auto; padding-bottom:43px; text-align: center;}

#nav_wrap {float:left; width:282px; height:auto; }
 
.left_phone a{ float:left; font-size:27px; color:#ffffff; line-height:34px; height:34px; width:80%; padding:20px 0 0 20px; text-shadow: 1px 1px #223551;}
.left_phone a:hover{color: #fff;}
#call_icon{ float:right; width:34px; height:34px; padding-right:28px; margin-right:85px; border-right:2px solid #333; margin-top:22px;  display:none; }


@media screen and (max-width: 768px) {
#left_wrap{width:96%; height:auto; padding:2% 2% 0 2%; background:#000000;}

#logo{float:left; width:100px; padding-bottom:0; margin-bottom: 0px; }

#nav_wrap { float:left; width:96%; height:auto; margin:0 2%;}

.left_phone{display:none; height:0px;} 
#call_icon{display: block; width:34px !important; height:34px !important;}
 
}
 
 
/*----------------------------------------------------------------------------- 
right wrap
-----------------------------------------------------------------------------*/
#right_wrap{float:right; height:100%;   width:100%; margin-left:-332px; z-index:0;}
#right-content{ margin-left:332px; height:100%; min-height:90vh;}
@media screen and (max-width: 768px) {
	#right_wrap{float:left; height:auto;  margin-left:0; }
	#right-content{ float:left; width:100%; height:auto; margin:0; margin-top:130px;}
	}

/*-slideshow-*/
#slideshow{ margin:0 auto;  width:auto; height:auto;}
.centeredImage
    {
    text-align:center;
    display:block;
    }
 
/*-inner contents-*/
#inner_contnet{float:right; width:100%; height:100%;   margin-top:0px; margin-left:-312px; z-index:0; }
#inner-detail{ float:left; padding:4%; width:92%;  min-height:70vh; 	background:rgba(0%, 0% , 0%, 0.6);}
@media screen and (max-width: 768px) {
	#inner_contnet{ float:left; width:100%; height:100%; margin:0;}
    #inner-detail{ float:left; width:92%; padding:4%; }
	}


 
#inner_wrap {
        height:522px; 
		width:600px; 
        position:relative;
        top:60%;
        left:50%;
        margin:-261px 0 0 -300px;
		}
/*-services-*/
.gap{float:left; margin: 40px 0; width: 100%; height: 5px; background: #1c1c1c}


 .services_00{ float:left; width:100%; height:26px; min-height:26px; padding-bottom:15px; margin-bottom:15px; border-bottom:dashed 1px #666; line-height:13px;}
html>body .services_00{ height:auto}

.services_image{  float:left; width:35%; height:200px; overflow:hidden; margin-right:3%;} 

.services_right{float:left; width:62%; height:26px; min-height:26px;}
html>body .services_right{height:auto}

.services_title{float:left; width:100%; height:20px; min-height:20px; color:#ffffff; display:block;margin-bottom:10px;}
html>body .services_title{ height:auto}

.services_title-des{float:left; width:100%; font-size:16px; line-height:17px; height:17px; min-height:17px; color:#ffffff; display:block;margin-bottom:25px;}
html>body .services_title-des{ height:auto}

.services_raw{float:left; width:100%; height:26px; min-height:26px; margin-bottom:10px;}
html>body .services_raw{height:auto}

.services_01{ float:left; width:40%; height:26px; min-height:26px; font-size:21px; line-height:20px; color:#CCC; display:block; }
html>body .services_01{height:auto}

.services_02{ float:right; width:20%; height:26px; min-height:26px; font-size:25px; line-height:20px; color:#223551; text-align:right; display:block;}
html>body .services_02{ height:auto}

.services_03{ float:right; width:30%; height:26px; min-height:26px; font-size:25px; line-height:20px; color:#223551; text-align:right; display:block;}
html>body .services_03{ height:auto}

.services_des{float:left; width:100%; font-size:16px; line-height:17px; height:17px; min-height:17px; color:#ffffff; display:block;margin-bottom:10px;}
html>body .services_des{ height:auto}

@media screen and (max-width: 768px) {
.services_image{  float:left; width:100%; height:180px; overflow:hidden; margin-right:0; margin-bottom:15px;} 

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


/*-contact us-*/
#contact-us{float:left; width:660px; height:26px; min-height:26px; padding-top:10px;}
html>body #contact-us{ height:auto}

#contact-us_left{float:left; width:395px; 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:245px; height:26px; min-height:26px; }
html>body #contact-us_right{ height:auto}

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


#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:1px;
 border-style:solid;
 border-left-color:#d3d3d3;
 border-top-color:#d3d3d3;
 border-right-color:#d3d3d3;
 border-bottom-color:#d3d3d3;
 padding:1px 2px 2px 2px;
 color: #232521;
 font-size: 12px;
 width: 280px;
 background-image: url(image/bg_contact.gif);
 background-repeat:repeat;
}

.inputfield_drop
{ 
 border-width:1px;
 border-style:solid;
 border-left-color:#d3d3d3;
 border-top-color:#d3d3d3;
 border-right-color:#d3d3d3;
 border-bottom-color:#d3d3d3;
 padding:1px 2px 2px 2px;
 color: #666666;
 font-size: 12px;
 width: 255px;
background-image:url(images/bg_contact.gif);
}

.submitBtn{ width:245px; height:25px; text-align:center; cursor:pointer; background: #691f80; border:none; line-height:25px; color: #ffffff; margin-top:10px;}
.submitBtn:hover{color:#fff; background:#223551; text-align:center; text-transform:uppercase;}

/* 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;  }
#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;}


/* top right  */
#top-right{ float:right; width:220px; height:50px; min-height:50px; margin-top:-100px;}
html>body #top-right{ height: auto;}


@media screen and (max-width: 800px) {
#top-right{width:100%;  margin-top:-150px; margin-bottom:-50px;}

	}
  
/* team  */
 
.team_left{ float:left; width:47%; height:auto;  }
.team_left h3{line-height: 30px; color:#285daa;} 

.team_right{ float:left; width:47%; height:auto;   padding: 0 0 0 5%; }
.team_right h3{line-height: 30px;color:#285daa;} 


@media screen and (max-width: 1200px) {
.team_left { float:left; width:96%; padding: 2%; }
.team_right { float:left; width:96%; padding: 2%; }
	}
	

 #login_wrap{ margin:0 auto; width:70%; height:28px; min-height:28px; margin-bottom:20px; }
 html>body  #login_wrap{ height:auto }
 
@media screen and (max-width: 768px) {
 #login_wrap{ margin:0 auto; width:100%; height:28px; min-height:28px; margin-bottom:20px; }
 html>body  #login_wrap{ height:auto }
	}
	
/*grid-a-licious css*/ 	
.example { margin-bottom: 60px;}

#example1 {
  padding: 20px 0 0 0;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  margin-bottom: 10px;
}

.item {
  background: #223450;
  color: #ffffff;
  border:1px solid #1c1c1c;
  border-radius: 3%;
  padding: 14px;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  font-family: 'Marvel', sans-serif; font-weight: 400; 
  margin:20px 0px;
  font-size: 26px; line-height: 32px; text-transform: capitalize;
    display: block;
}

.item:hover {
  background:#245bac;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
   color: #f29f0f; font-weight: 700;
}

.item img{ margin-bottom:17px;  border-bottom-right-radius:4%;  }
.item img:hover  {  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);}
.700 { font-weight:700;}
.product-price { font-size:27px; line-height:40px; color:#e30023; font-weight:400;  }
/*end of grid-a-licious css*/ 

.back{ float:left; width:100%; height:30px; margin:30px 0; }

/*clients*/ 

.client {
  margin:20px 1%;
  padding: 1%;
 float: left; 
  width: 20%;
  background: #1c1c1c;
  color: #ffffff;
  border:1px solid #1c1c1c;
  border-radius: 3px;
border-bottom-right-radius: 20%;
  display: block;
}

.client:hover {
  background: #223551;
  filter: grayscale(30%);
  -webkit-filter: grayscale(30%);
  -moz-filter: grayscale(30%);
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
}

.client img{border-bottom-right-radius: 20%;}


@media screen and (max-width: 1200px) {
.client {
  margin:20px 1%;
  padding: 1%;
 float: left; 
  width: 28%;
  background: #1c1c1c;
  color: #ffffff;
  border:1px solid #1c1c1c;
  border-radius: 3px;
border-bottom-right-radius: 20%;
  display: block;
}
	}

@media screen and (max-width: 768px) {
.client {
  margin:20px 1%;
  padding: 1%;
 float: left; 
  width: 45%;
  background: #1c1c1c;
  color: #ffffff;
  border:1px solid #1c1c1c;
  border-radius: 3px;
border-bottom-right-radius: 20%;
  display: block;
}
	}




/*footer*/ 

#footer{padding:2% 0; float:left; width:92%;}

@media screen and (max-width: 768px) {
#footer{ text-align:center;  padding:2% 3%; float:left; width:94%;}
	}
	
	
/* home page downarrow _2020--01-30 */
#home_wrap{ position:relative; float:left; width:100%; height:100vh;}
 
#down-arrow{position:absolute; bottom:100px; height:50px; left:50%; margin-left:-170px; }


@media screen and (max-width: 1200px) {
#down-arrow{position:absolute; bottom:200px;}
	}

@media screen and (max-width: 768px) {
#down-arrow{ 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);
  }
}
  
 
	
	
/* services_2020--02-12 */
.services_wrap {
  float:left; width:29.333%; margin:1%; padding:1%; 
  background: #1c1c1c;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
.services_img{ margin:0 auto; width:100%; height:auto;}
.services_title {margin:0 auto; width:90%; height:auto; padding:5%; text-align:center; 
   font-weight: 400; color: #ffffff;
}

.services_wrap:hover {
  background: #c8c8ca;
}
@media screen and (max-width: 1360px) {
.services_wrap {
  float:left; width:29.333%; margin:1%; padding:1%; 

}
	}
	
@media screen and (max-width: 960px) {
.services_wrap {
  float:left; width:42%; margin:2%; padding:2%; 

}
	}
	
	
@media screen and (max-width: 760px) {
.services_wrap {
  float:left; width:84%; margin:4%; padding:4%; 

}
	}
	
.page-cover{float:left;  margin: 0; padding: 0;  width: 100%; height: auto;}
.page-cover img{ border-bottom-right-radius: 50px 50px;}
	
@media screen and (max-width: 760px) {
 .page-cover img{ border-bottom-right-radius: 20px 20px;}
}


/* page partners*/
#partners_wrap{ float: left; padding: 40px 0 0 0; max-width: 100%; height: auto;}
 
@media screen and (max-width: 1000px) {
	#partners_wrap{ width: 98%; }
	}
@media screen and (max-width: 800px) {
	.partners{ width: 98%; height:auto; margin:2%;}
	}

.QuoteSubmit { width:100%;overflow: hidden; padding: 10px 0;  height:40px; line-height:40px; display:block; border:none; font-size: 36px;   color:#fff; text-decoration:none; text-transform:capitalize; text-align: center; background-color:#223551; cursor:pointer;border-bottom-right-radius: 20px; }
.QuoteSubmit:hover  { background: #fff; color: #223551; }


	
/*----------------------------------------------------------------------------- 
news page
-----------------------------------------------------------------------------*/

.news_left{ float:left; width:46%; height:20px; min-height:20px; padding-left:3%;}
html>body .news_left{ height:auto;}

.news_right{ float:right; width:48%; height:20px; min-height:20px;}
html>body .news_right{ height:auto;}

#news_title{ float:left; width:100%; height:auto; border-bottom:12px solid #335aa6; margin-bottom:40px;}
#news_title h1 {text-align: center;}

@media screen and (max-width: 560px) {
.news_left{ width:94%;padding:3%;}

.news_right{width:94%;padding:3%;}
	}




/* Client Logo Auto Slider_2025 */
 body {
            display: flex;
            justify-content: center;
            align-items: center;
   
            margin: 0;
        }

        .slider-container {
            overflow: hidden;
            width: 100%;
            background: none;
            padding: 20px 0;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .logo-slider {
            display: flex;
            width: 5120px; /* Adjust based on the number of logos */
            animation: slide 25s linear infinite;
            transition: transform 0.3s ease-in-out; /* Smooth transition */
        }

        .logo-slider img {
            width: 150px; /* Adjust logo size */
            height: auto;
            margin: 0 5px;
            transition: transform 0.3s;
        }

        .logo-slider img:hover {
            transform: scale(1.15);
        }

        /* Hover over the whole slider to pause the animation */
        .slider-container:hover .logo-slider {
            animation-play-state: paused;
        }

        /* Animation to slide logos */
        @keyframes slide {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* Moves half the width */
        }

        /* Duplicating the logos to create a seamless effect */
        .logo-slider .logo {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
        }