@charset "utf-8";

#adv {
background-image:url(../imgs/advbg3.jpg);
background-size:contain;
color:#fff;
background-color: #ededed;
}

#adv .overlay {
padding:30px 0 40px 0;
background-color: rgba(0,0,0,0.80);
}

#adv #mcontainer {
margin:0 auto;
max-width:820px;
}

#adv #mcontainer .l{
float:left;
width:77%;
padding-top: 20px;
}
#adv #mcontainer .l h1{
font-weight:normal;
color:#fafafa;
margin-bottom: 5px
}
#adv #mcontainer .l h2{
font-weight:normal;
color:#fafafa;
margin:0;
margin-bottom: 25px;
}

#adv #mcontainer .r{
float:right;
width:21%;
padding-top: 10px
}

@media (max-width: 780px) {
#adv #mcontainer .l{
float:left;
width:70%;
padding-top: 20px;
}

#adv #mcontainer .r{
float:right;
width:26%;
padding-top: 10px
}
}

@media (max-width: 710px) {
#adv #mcontainer .l{
float:left;
width:72%;
padding-top: 20px;
}

#adv #mcontainer .r{
float:right;
width:26%;
padding-top: 10px
}
}

@media (max-width: 680px) {

#adv #mcontainer .l{
float:left;
width:70%;
padding-top: 10px;
}


#adv #mcontainer .l h2{
font-size:20px;
margin-bottom: 20px;
}

#adv .overlay {
padding:0px;
}

#adv #mcontainer .r{
float:right;
width:26%;
padding-top: 10px
}
}

@media (max-width: 640px) {

#adv #mcontainer .l{
float:none;
width:100%;
padding-top: 10px;
}

#adv #mcontainer .r{
float:none;
margin:0 auto;
width:26%;
padding-top: 10px
}

#adv #mcontainer .l h1{
text-align:center;
padding-bottom: 20px
}
#adv #mcontainer .l h2{
text-align:center
}

#adv {
background-size:cover;
}

}

@media (max-width: 920px) {
#adv .overlay {
padding:30px 30px 40px 30px;
}
}

#why {
padding: 40px 0;
text-align: center
}

#why h2{
font-weight:normal;
font-size:30px;
padding-bottom: 30px
}

#why .box {
background-color:#E8E9E9;
display:inline-block;
vertical-align:top;
width:30%;
max-width:320px;
min-width:300px;
min-height: 170px;
margin:0 1% 30px 1%;
border:1px solid #eee;
border-radius:10px
}

#why .box .inner{
padding:20px
}

#why .box .inner .check{
width:50px;
height:50px;
margin:0 auto;
background-image:url(../imgs/check.png);
background-size:cover;
}
#why .box .inner .info{
font-size:20px;
padding-top: 20px
}

#tools {
background-color: #f5f5f5;
padding:40px 70px;
margin-top: 30px;
margin-bottom:70px;
text-align: center
}

#tools .scw2 {
max-width: 1000px;
}

#tools h3 {
font-weight:normal;
font-size:25px;
padding-bottom:20px
}

#tools .item {
background-color:#fff;
display:inline-block;
vertical-align:top;
padding:5px;
width:140px;
height:140px;
margin:0 1% 30px 1%;
border-radius:50%;
background-size:120px;
background-position:50% 50%;
    background-repeat:no-repeat;    
}


#tools #deluxe {
background-image:url(../imgs/products/Dulux-Trade2.jpg);
}
#tools #leyland {
background-image:url(../imgs/products/Leyland-Trade.jpg);
}
#tools #crown {
background-image:url(../imgs/products/Crown-Trade1.jpg);
}
#tools #johnstones {
background-image:url(../imgs/products/Johnstones-Trade1.jpg);
}
#tools #macpherson {
background-image:url(../imgs/products/macpherson.jpg);
}
#tools #mypaintbrush {
background-image:url(../imgs/products/my-paintbrush.jpg);
}
#tools #axus {
background-image:url(../imgs/products/axus.jpg);
}
#tools #jobman {
background-image:url(../imgs/products/jobman.jpg);
}
#tools #prodec {
background-image:url(../imgs/products/prodec.jpg);
}

/*social*/
#twitter {
text-align: center;
padding-bottom:70px
}

#twitter h3 {
font-weight:normal;
font-size:25px;
padding-bottom:10px
}

#twitter section, #twitter section div {
  /* See it in slo-mo, you can change this */
  transition-duration: .6s;
}

#twitter section, #twitter.button { transition-timing-function: ease; }

#twitter section {
  display: inline-block;
  position: relative;
  padding: .375rem .375rem 0;
  height: 2.5rem;
  background: #A9ADB6;
  border-radius: .25rem;
  perspective: 300;
  box-shadow: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
}


#twitter .button { opacity: 0; }

#twitter .cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}

#twitter .innie, #twitter .outie, #twitter .spine, #twitter .shadow { position: absolute; width: 100%; }

#twitter .innie, #twitter .outie {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
  border-radius: .25rem;
}

#twitter svg {
	width: 40px;
	height: 40px;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.25))
}

#twitter .innie {
  background-color: #67E2FE;
  text-shadow: 0 -2px 4px rgba(0,0,0,.2);
}

#twitter .spine {
  top: .25rem;
  background: #20C7F3;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}

#twitter .shadow {
  top: 100%;
  left: 0;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  z-index: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
  border-radius: .4rem;

}

#twitter .outie {
  background-color: #2EC8FA;
  transform: translateZ(.25rem);
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
}

#twitter section:hover { background: #EBEFF2; }
#twitter section:hover .button { opacity: 1; }

#twitter section:hover .cover, #twitter section:hover .innie, #twitter section:hover .spine, #twitter section:hover .outie, #twitter section:hover .spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }

#twitter section:hover .cover { transform: rotateX(-120deg);  }

#twitter section:hover .innie { background-color: #3ADAFC; }
#twitter section:hover .spine { background-color: #52B1E0; }
#twitter section:hover .outie { background-color: #2174A0; color: rgba(255,255,255,0); }

#twitter section:hover .shadow { 
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}
/* end social */

@media (max-width: 950px) {
#twitter {
text-align: left;
padding-bottom:50px;
padding-left: 40px;
padding-right: 160px;
}

#twitter h3 {
font-size:25px;
padding-bottom:10px
}
}