/*Theme Name: Perth Concrete Resurfacing

Theme URI: http://www.perthconcretesupplies.com.au;

Description: Custom theme for perth concreteresurfacing

Version: 1.0

Author: Jared Adamson

Author URI: http://www.on-crete.com.au;

Tags: nav, single-page

*/



body, html, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, img {

    margin: 0; padding: 0;

    font-family: 'Lato', sans-serif;

    color: #4D4E50;

}

html, body {

  height: 100%;

  }

a {

  text-decoration: none;

}

a:hover {

  color: #00a4a3;

}

.wrapper {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

}

.page-wrap {

  min-height: 100%;

  /* equal to footer height */

  margin-bottom: -80px;

}

.page-wrap:after {

  content: "";

  display: block;

}

.site-footer, .page-wrap:after {

  height: 80px;

}

h1, h2, h3, h4 ,h5 ,p , ul {

  text-align: center;

}

h1 {

  font-size: 1.8em;

  font-weight: 700;

  margin-top: 20px;

}

h2 {

  font-size: 1.3em;

  font-weight: 700;

  margin-top: 20px;

}

h3 {

  font-size: 1.4em;

  margin-top: 15px;

}

p {

  margin-top: 10px;

  font-size: 0.9em;

  line-height: 1.8em;

}

img {

  display: block;

  margin: 15px auto;

}

ul {list-style-type: square;}

article {

  margin-top: 20px;

}



.clearfix:before,

.clearfix:after {

    content: " ";

    display: table;

}

.clearfix:after {

    clear: both;

}

.clearfix {

    *zoom: 1;

}



.clear-fix {

  clear: both;

}



.font-blue {

  color: #00a4a3;

}



.font-white {

  color: #fff;

}



.font-light {

  font-weight: 300;

}



.text-centre {

  text-align: center;

}



.page {

  padding: 10px 15px 20px 15px;

  overflow: hidden;

}



.h1 {

  font-weight: 800;

  font-size: 34px;

  margin-top: 5px;

}

.h2 {

  font-weight: 700;

  font-size: 24px;

  margin-top: 5px;

}



/* Default Wordpress Styles */



img.alignright { float: right; margin: 0 0 1em 1em; }

img.alignleft { float: left; margin: 0 1em 1em 0; }

img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.alignright { float: right; }

.alignleft { float: left; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }



/* HEADER */

header > div > img {

  display: block;

  margin: 0 auto;

  max-width: 379px;

  width: 100%;

}

.top-contact {

  width: 50%;

  min-width: 184px;

  margin: 0px auto;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

  padding-top: 10px;

  height: 30px;

  background-color: #706f6f;

  color: #fff;

  font-weight: 700;

}

span.phone-icon {

  display: block;

  width: 20px;

  height: 20px;

  float: left;

  margin-left: 30px;

  margin-right: 8px;

  background-image: url('images/phone-icon-white.png');

  background-size: 100% 100%;

  background-repeat: no-repeat;

}



/* Navigation */



nav {

  height: auto;

  width: 100%;

  background: #9a9a9a;

  font-weight: normal;

  position: relative;

}



nav ul {

  width: 100%;

  display: none;

  height: auto;

  list-style: none;

  z-index:9999;

}



nav li {

  width: 100%;

}

nav a {

  display: block;

  width: 100%;

  text-align: left;

  text-indent: 25px;

  color: #fff;

  text-decoration: none;

  line-height: 48px;

  border-bottom: 1px solid #8a8a8a;

}

nav a:hover, nav a:active {

   background-color: white; color: black;

}



nav a#pull {

    display: block;

    background-color: #00a4a3;

    width: 100%;

    position: relative;

}

nav a#pull:after {

    content:"";

    background: url('images/nav-icon.png') no-repeat;

    width: 30px;

    height: 30px;

    display: inline-block;

    position: absolute;

    right: 15px;

    top: 14px;

}



/*Dropdown Nav*/



nav ul ul {

  display: none;

  width: 100%;

  background: #706f6f;

  padding: 0;

}

/*

  nav ul li:hover > ul {

    display: block;

  }

*/

nav ul ul {



}

  nav ul ul li {

    float: none;

    border-bottom: 1px solid #575f6a;

    position: relative;

  }

    nav ul ul li a {

      text-indent: 40px;

    }

      nav ul ul li a:hover {

        background: #fff;

        color: #706f6f;

        border-top: none;

      }



/* Footer */



footer {

  background-color: #4D4E50;

  margin-top: 30px;

}



footer p {

  color: white;

  text-align: center;

}



/* Home page */



#home-banner {

  background-image: url('images/concrete-resurfacing-cover.jpg');

  background-size: auto 100%;

  background-repeat: no-repeat;

  width: 100%;

  height: 300px;

}



.home-banner-inner {

  position: relative;

  width: 100%;

  height: 100%;

}



#home-banner-tagline {

  position: absolute;

  bottom: -280px;

  left: 30px;

  width: 80%;

  height: 90px;

  background-color: rgba(0,0,0,0.5);

  padding: 5px 5px 5px 20px;

}

#home-banner-tagline .h2 {

  display: none;

}



#home-banner-tagline .h4 {

  display: none;

}



#tagline-more {

  display: block;

  width: 90%;

  margin-top: 10px;

}



#home-banner-tagline a {

  display: block;

  width: 90%;

}



.button-black:hover {

  border: 3px solid #00a4a3;

  color: #00a4a3;

}



/* Breadcrumbs */



.breadcrumb {
  display: block;
  margin: 30px 0px 10px 0px;
}

.breadcrumb * {
  background-color: #ddd;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  line-height: 30px;
  color: #4D4E50;
}

.breadcrumb2 {
  display: block;
  margin: 10px 0px 10px 0px;
}

.breadcrumb2 * {
  background-color: #ddd;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  line-height: 30px;
  color: #4D4E50;
}




 /* Buttons */
.button-white {

  color: white;

  font-family: 'Lato', sans-serif;

  font-size: 18px;

  font-weight: 700;

  background-color: rgba(0,0,0,0.0);

  border: none;

  padding:9px;

  text-align: center;

  margin-top: 3px;

  margin-right: 5px;

  text-decoration: none;

  border: 3px solid white;

}



.button-white2 {

  color: white;

  height: 49px;

  font-family: 'Lato', sans-serif;

  font-size: 18px;

  font-weight: 700;

  background-color: rgba(0,0,0,0.0);

  text-align: center;

  text-decoration: none;

  border: 3px solid white;

}



.button-white:hover {

  border: 3px solid #00a4a3;

  color: #00a4a3;

}



.button-black {

  display: block;

  color: #4D4E50;

  font-family: 'Lato', sans-serif;

  font-size: 18px;

  font-weight: 700;

  background-color: rgba(0,0,0,0.0);

  padding:9px;

  text-align: center;

  margin-top: 15px;

  margin-left: 15px;

  margin-right: 10px;

  text-decoration: none;

  border: 3px solid #4D4E50;

}


#epoxy img {
    width: 300px !important;
    float: left;
    height: 240px;
}



.home-banner-contact {

  display: none;

}



#home-contact-p1 {

  margin-top: 20px;

}

.home-banner-contact .h1 {

  margin-bottom: 20px;

}



.home-banner-contact span {

  display: block;

  margin: 0 auto;

}

input {

  width:80%;

  position: relative;

  display: block;

  margin: 10px auto;

  height: 37px;

  font-size: 1em;

  padding-left: 10px;

  padding-right: 10px;

  font-family: 'Lato', sans-serif;

  color: black;

}

input['text'] {



}

textarea {

  width:80%;

  position: relative;

  display: block;

  margin: 10px auto;

  font-size: 1em;

  padding-left: 10px;

  padding-top: 9px;

  padding-right: 10px;

  height: 140px;

  font-family: 'Lato', sans-serif;

  color: grey;

}

button {

  position: relative;

  display: block;

  color: white;

  font-family: 'Lato', sans-serif;

  font-size: 18px;

  font-weight: 700;

  background-color: rgba(0,0,0,0.0);

  border: none;

  padding:9px;

  text-align: center;

  width: 86%;

  margin: 18px auto 0px;

  border: 3px solid white;

}



button:hover {

  border: 3px solid #00a4a3;

  color: #00a4a3;

}



/* Product Category */



.popular-products {

  margin-top: 15px;

  padding-bottom: 15px;

  padding-top: 30px;

  border-top: 1px solid #d6d6d6;

}

.popular-products img {



}



/* Product Navigation */



.product-nav {

  height: auto;

  width: 100%;

  background: #9a9a9a;

  font-weight: 400;

  position: relative;

}



.product-nav ul {

  width: 100%;

  display: none;

  height: auto;

  list-style: none;

}



.product-nav li {

  width: 100%;

}

.product-nav a {

  display: block;

  width: 100%;

  text-align: left;

  text-indent: 25px;

  color: #fff;

  text-decoration: none;

  line-height: 48px;

  border-bottom: 1px solid #8a8a8a;

}

.product-nav a:hover, nav a:active {

   background-color: white; color: black;

}



.product-nav a#pull2 {

    display: block;

    background-color: #706f6f;

    width: 100%;

    position: relative;

}

.product-nav a#pull2:after {

    content:"";

    background: url('images/nav-icon.png') no-repeat;

    width: 30px;

    height: 30px;

    display: inline-block;

    position: absolute;

    right: 15px;

    top: 14px;

}



.product-nav ul li ul {

  display: none;

}



.product-nav ul li ul li a {

  background-color: #706f6f;

  text-indent: 40px;

  border-bottom: 1px solid #9a9a9a;

}



/* Resurfacing Page */



.page-resurfacing img {

  width: 90%;

}



.quick-link {

  display: block;

  width: 80%;

  background-color: #00a4a3;

  color: #fff;

  padding: 8px 20px;

  margin: 20px auto  0px;

}



.quick-links-menu {

  list-style: none;

}



.quick-links-menu li a {

  display: block;

  width: 80%;

  padding: 9px 20px;

  border-bottom: 1px solid #4D4E50;

  margin: 0px auto;

}



/* Colour Chart */



#concrete-resurfacing-colours > div > h2 {

  font-size: 1.8em;

  margin-bottom: 10px;

  margin-top: 50px;

}



#concrete-resurfacing-colours > div > p {

  margin-bottom: 40px;

}



.colour-box{

  position: relative;

  width: 100%;   /* desired width */

}

.colour-box:before{

  content: "";

  display: block;

  padding-top: 75%;  /* initial ratio of 1:1*/

}



article#concrete-resurfacing-colours >div.wrapper > div.col-6 > p {

  text-align: center;

  margin-bottom: 15px;

}



article#concrete-resurfacing-colours >div.wrapper > div.col-6 > p >span {

  margin-left: 20px;

}



/* Overcrete Colours */



#white-iv {

  background-color:#F1F0E8;

}



#cream-iv {

  background-color:#D5CAAC;

}



#sandy-beige-iv {

  background-color:#CFB488;

}



#oyster-iv {

  background-color:#C7A892;

}



#latte-iv {

  background-color:#C0AF9E;

}



#bluegum-iv {

  background-color:#BFBEB7;

}



#light-grey-base {

  background-color:#B0A893;

}



#wheat-iv {

  background-color:#CBB073;

}



#merino-iv {

  background-color:#CFB691;

}



#salmon-iv {

  background-color:#C09572;

}



#nutmeg-iv {

  background-color:#A58C75;

}



#lt-bluestone-iv {

  background-color:#959493;

}



#kakadu-iv {

  background-color:#8D9483;

}



#sandstone-iv {

  background-color:#CBAC5B;

}



#oatmeal-iv {

  background-color:#A58661;

}



#mango-iv {

  background-color:#BB8262;

}



#mocca-iv {

  background-color:#857160;

}



#ash-grey-iv {

  background-color:#737470;

}



#heritage-green-iv {

  background-color:#46593B;

}



#mushroom-iv {

  background-color:#B79B6B;

}



#copper-iv {

  background-color:#AB8A65;

}



#terracotta-iv {

  background-color:#BC7C4C;

}



#walnut-iv {

  background-color:#64482A;

}



#bluestone-iv {

  background-color:#656363;

}



#shale-grey-iv {

  background-color:#7F746B;

}



#apricot-iv {

  background-color:#BF8F45;

}



#caramel-iv {

  background-color:#987852;

}



#sunshine-iv {

  background-color:#AD5D28;

}



#bronze-iv {

  background-color:#71422B;

}



#charcoal-iv {

  background-color:#4A4A48;

}



#cuban-coffee-iv {

  background-color:#63524E;

}



#buff-iv {

  background-color:#A6834B;

}



#cinnamon-iv {

  background-color:#8E613F;

}



#brick-red-iv {

  background-color:#8D2D13;

}



#coffee-brown-iv {

  background-color:#53311F;

}



#gun-metal-iv {

  background-color:#3C3E3F;

}

a.readmore {
  background: #01a4a3;
  padding: 10px 20px;
  margin-top: 40px;
  float: left;
  border-radius: 5px;
  color: #ffffff;
  letter-spacing: 1px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
a.readmore:hover {
    background: #706f6f;
}
.single-post {
    width: 100%;
    display: block;
    vertical-align: middle;
    padding: 20px 0px;
    border-top: 1px solid #dddddd;
    margin-top: 30px;
    float: left;
    min-height: 300px;
}
div#helpnav input {
    border: none;
    float: left;
    text-align: left;
}
.single-post img {
    padding: 0px 40px;
    width: 70%;
    height: auto;
    float: right;
}
.single-post h3 {
    margin-bottom: 30px;
    float: left;
    width: 100%;
}

@media only screen and (min-width : 645px) {

  #home-banner {

  background-size: 100% auto;

  }

}



@media only screen and (min-width : 750px) {



  h1, h2, h3, h4 ,h5 ,p , ul {

  text-align: left;

  }



  header > div {

    height: 129px;

  }



  header > div > img {

  float: left;

  margin: 0;

  width: 379px;

  }



  .top-contact{

  float: right;

  width: 200px;

  margin: 0px 20px 0px 0px;

  padding-top: 8px;

  border-bottom-left-radius: 10px;

  border-bottom-right-radius: 10px;

  border-top-left-radius: 0px;

  border-top-right-radius: 0px;

  }



  #home-banner {

  background-size: auto 100%;

  height: 600px;

  }



  #home-banner-tagline {

  bottom: -550px;

  left: 0px;

  width: 700px;

  }



  #home-banner-tagline .h2 {

  display: block;

  margin-top: 13px;

  width: 50%;

  float: left;

  }



  #home-banner-tagline .h4 {

  display: block;

  font-weight: 300;

  font-size: 22px;

  margin-top: 3px;

  width: 50%;

  float: left;

  }



  #tagline-more {

    width: 50%;

    float: right

  }



  #home-banner-tagline a {

  width: 45%;

  float: right;

  }



  .popular-products {

    max-width: 600px;

    overflow: hidden;

    margin: 15px auto;

  }



  .popular-products img {

    float: left;

    clear: right;

    margin-right: 15px;

  }



  .popular-products .button-black {

    float: left;

    padding-left: 40px;

    padding-right: 40px;

  }



  /*Product List Page */

  .product-list {

    float: left;

    width: 100%;

    margin-top: 30px;

    margin-bottom: 10px;

    min-height: 233px;

    overflow: hidden;

  }

  .product-list img {

    float: left;

    clear: right;

    margin-right: 15px;

  }



  .product-list h3 {

    /*float: left;*/



  }



  .product-list .button-black {

    display: block;

    width: 40%;

    float: right;

    padding-left: 40px;

    padding-right: 40px;

  }



  /* Signle Product */



  .single-product img {

  float: left;

  clear: right;

  margin-right: 20px;

  margin-bottom: 20px;

}

p#product-price {

  font-size: 2.4em;

  font-weight: 700;

  margin-top: 0px;

}



p#product-price span {

  font-size: 14px;

  font-weight: normal;

  margin-right: 40px;

}



p#product-code {

  font-size: 0.8em;

  font-weight: 300;

  margin-top: -9px;

}



p#product-code span {

  font-size: 14px;

  font-weight: normal;

  margin-right: 35px;

}



p#product-tech-sheet {

  font-size: 0.8em;

  font-weight: 300;

  margin-top: 12px;

}



p#product-tech-sheet span {

  font-size: 14px;

  font-weight: normal;

  margin-right: 31px;

}



p#product-safety-sheet {

  font-size: 0.8em;

  font-weight: 300;

  margin-top: 12px;

}



p#product-safety-sheet span {

  font-size: 14px;

  font-weight: normal;

  margin-right: 50px;

}



}





@media only screen and (min-width : 1137px) {



  nav{

    background: #00a4a3;

    border-top: 2px solid #706f6f;

  }



  nav a#pull {

    display: none;

  }



  nav ul {

  display: block;

  height: 48px;

  margin: 0 auto;

  }



  nav ul:after {

    content: ""; clear: both; display: block;

  }



  nav li {

    display: inline;

    float: left;

    width: 14.2%;

    background: #00a4a3;

    position: relative;

  }



  nav a {

    border: none;

    display: inline-block;

    text-align: center;

    text-indent: 0px;

  }



  /* Dropdown Nav */



  nav ul ul {

  display: none;

  }



  nav ul li:hover > ul {

    display: block;

  }



  nav ul ul {

    background: #706f6f; padding: 0;

   position: absolute; top: 100%;

  }



  nav ul ul li {

    float: none;



    position: relative;

  }



  nav ul ul li a {

    display: block;

    padding: 0px 10px;

    color: #fff;

    background: #706f6f;

    text-indent: 0px;

    font-weight: 400;

    border-top: 1px solid #7e7d7d;

    border-bottom: 1px solid #646363;

  }



  nav ul ul li a:hover {

    background: #fff;

    color: #706f6f;

    border-top: none;

  }



  /* Grid Styles */



  .col-2 {

    float: left;

    width: 50%;

  }

  .col-3 {

    float: left;

    width: 33%;

  }

  .col-4 {

    float: left;

    width: 23%;

    margin-right: 2%;

  }

  .col-5 {

    float: left;

    width: 18%;

    margin-right: 2%;

  }

  .col-6{

    float: left;

    width: 14.6%;

    margin-right: 2%;

  }



  /* Home Page */



  .home-banner-contact {

    display: block;

    float: left;

    width: 90%;

    height: 500px;

    margin-top: 50px;

    background-color: rgba(0,0,0,0.5);

  }



  #home-banner .home-banner-contact {

    position: absolute;

    bottom: -550px;

    right: 0px;

    width: 330px;

  }



  .popular-products {

    width: 48%;

    float: left;

    margin-right: 2%;

  }



    .left-col {

  float: left;

  width: 25%;

  }

  .right-col {

  float: right;

  width: 70%;

  margin-left: 5%;

  }



  /*Product Navigation */



  .product-nav {

    background-color: #e0e0e0;

    margin-top: 30px;

  }



  .product-nav a {

    color: #4D4E50;

    border-bottom: 1px solid #d6d6d6;

  }



  #product-nav li ul li a {

    background: #9a9a9a;

    color: #fff;

    border-bottom: 1px solid #8a8a8a;

  }



  .product-nav ul {

    display: block;

  }



  .product-nav a#pull2 {

    color: #fff;

  }



  .product-nav a#pull2:after {

    content:"";

    background: none;

  }



  /* Concrete Resurfacing */



  #overcrete-logo {

    margin-top: 100px;

    width: 80%;

  }



  .quick-link {

    margin-top:  82px;

  }



  #benefits-of-concrete-resurfacing {

    width: 100%;

    background-color: #00a4a3;

    padding-top: 20px;

  }



  #benefits-of-concrete-resurfacing h2 {

    color: #fff;

    font-size: 1.8em;

  }



  #benefits-of-concrete-resurfacing > div > div> p {

    color: #fff;

  }



  #benefits-of-concrete-resurfacing > div > div> img {

    display: block;

    margin: 20px 0px 50px 0px;

  }



  #benefits-of-concrete-resurfacing > div > div> ul {

    margin-left: 120px;

    margin-top: 10px;

    font-size: 0.9em;

    line-height: 1.8em;

  }



  #benefits-of-concrete-resurfacing > div > div> ul > li {

    color: #fff;

    padding-left: 10px;

  }



  #oc-areas-h2 {

  margin-left: 105px;

  }



  #concrete-resurfacing-process{

  margin-top: 0px;

  padding-top: 20px;

  padding-bottom: 20px;

}

#concrete-resurfacing-process h2 {

  font-size: 1.8em;

}



#concrete-resurfacing-process img#img-house {

  margin-top: 20px;

}



#process-s1 {

  width: 65%;

  float: right;

  margin-top: 20px;

}



#process-s1 h3 {

  float: right;

  text-align: right;

  margin-right: 50px;

  margin-top: 46px;

}



#process-s1 h3 > strong {

  margin-right: 30px;

}



#process-s1 p {

  margin-top: 100px;

  margin-right: 120px;

}



.circular {

  border-radius: 50%;

  width: 120px;

  height: 120px;

}



#img-s1 {

  background: url('http://www.perthconcretesupplies.com.au/wp-content/uploads/2015/05/resurfacing-process-s1.jpg');

  background-repeat: no-repeat;

  float: right;

}



#process-s2 {

  width: 80%;

  float: left;

  margin-top: 20px;

}



#process-s2 h3 {

  float: left;

  text-align: right;

  margin-left: 50px;

  margin-top: 46px;

}

.row > div > h4 {

  margin-top: 20px;

}

#process-s2 h3 > strong {

  margin-right: 30px;

}



#process-s2 > div#process-s2-c1 {

  padding-top: 100px;

  margin-left: 170px;

}

.row > div {

  width: 50%;

  float: right;

}



.row > div> img {

  width: 90%;

  margin: 90px 0px;

}



.circular {

  border-radius: 50%;

  width: 120px;

  height: 120px;

}



#img-s2 {

  background: url('http://www.perthconcretesupplies.com.au/wp-content/uploads/2015/05/resurfacing-process-s2.jpg');

  background-repeat: no-repeat;

  float: left;

}



#img-s3 {

  background: url('http://www.perthconcretesupplies.com.au/wp-content/uploads/2015/05/resurfacing-process-s3.jpg');

  background-repeat: no-repeat;

  float: left;

  }



#img-s4 {

  background: url('http://www.perthconcretesupplies.com.au/wp-content/uploads/2015/05/resurfacing-process-s4.jpg');

  background-repeat: no-repeat;

  float: right;

  }



div.row:nth-child(3) > div:nth-child(1) > img:nth-child(1) {

  margin-left: 30px;

}



#process-s4 {

  width: 65%;

  float: right;

  margin-top: 20px;

}



.row2 > h4 {

  margin-top: 20px;

}



.row2 > h4:nth-child(1) {

  margin-top: 0px;

}



#process-s4 > div#process-s4-c1 {

  padding-top: 100px;

  margin-right: 140px;

}



#process-s4 h3 {

  float: right;

  text-align: right;

  margin-right: 50px;

  margin-top: 46px;

}



#process-s4 h3 > strong {

  margin-right: 30px;

}



#concrete-stencil {

  width: 100%;

  background-color: #706f6f;

  padding-top: 20px;

}



#concrete-stencil h2 {

  color: #fff;

  font-size: 1.8em;

}



#concrete-stencil p {

  width: 100%;

  background-color: #4D4E50;

  color: #fff;

  text-align: center;

  padding-top: 2px;

  padding-bottom: 2px;

  margin-bottom: 35px;

}



#concrete-stencil img {

  width: 100%;

}



#concrete-resurfacing-colours > div > h2 {

  font-size: 1.8em;

  margin-bottom: 10px;

  margin-top: 50px;

}



#concrete-resurfacing-colours > div > p {

  margin-bottom: 40px;

}

}



@media only screen and (min-width : 1290px) {



  #home-banner {

  background-size: 100% auto;

  }



}