/*
Theme Name: Keetah
Theme URL: https://www.keetah.com.au
Author: Adz Power Agencies
Author URI: http://www.adzpower.com.au
 
/*****  Wordpress Generic  *****/

ol, ul{list-style:none;}

.clear{clear: both;}

*{margin:0;padding:0;}

img{border:none;padding:0;display:block;}

img a{border:none;}

img.left{float:left;border:none;padding:6px 0 0 0;}

img.right{float:right;border:none;padding:0 0 0 6px;}

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

img.alignright{padding:4px;margin:0 0 2px 7px;display:inline;}

img.alignleft{padding:4px;margin:0 7px 2px 0;display:inline;}

main img{max-width:100%;height:auto;}

.alignright{float:right;}

.alignleft{float:left}

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

a{text-decoration:none;}

.scroll-text{opacity:0;transform:translateY(75px);transition:1s;}

.scroll-text.fade-in{opacity:1;transform:translateY(0);}

.delayed{transition-delay:.2s;}

@media all and (max-width: 700px){.entry p, ul.nav li {-webkit-text-size-adjust: 100%;}}

/*****  General  *****/	

body, html {
	background: url("images/bg.jpg") no-repeat center fixed;
	background-size:cover;
	font-family: 'Oswald', sans-serif;
}
.wrapper {
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	width:100%;
	height: 100%;
	background-attachment: fixed;
	position: relative;
  min-height: 100vh;
}
h1 {
	color:#131212; /* Select h1 color */
	font-size: 42px;
	font-weight:700;
	padding-bottom:15px;
	background: url("images/underline.gif") bottom left no-repeat;
	margin-bottom: 20px;
}

h2 {
	color:#000; /* Select h2 color */
	font-size: 26px;
	font-weight:600;
	padding-bottom:10px;
	padding-top:25px;
}

h3 {
	color:#000; /* Select h3 color */
	font-size: 22px;
	font-weight:300;
	padding-bottom:15px;
	padding-top:20px;
	text-transform:uppercase;
}

a {
	color:#d72b27;
}
/*****  Header  *****/

header{width:100%; height: 90px; padding:20px;background:#fff;justify-content:space-between;display:flex;align-items:center;box-sizing:border-box;}

.header-inner{width:93%; display:flex;align-items:center;justify-content:space-between;margin:0 auto;box-sizing:border-box;}

.header-logo img{width:231px;height:auto;}

@media all and (max-width: 1000px) {	
	header{padding:15px;}
	.header-logo img{width:185px;}
	nav ul li a{font-size:14px;}	
}
@media all and (max-width: 600px) {header{padding:15px 0;}}

/*****  Menu  *****/

@media all and (min-width: 800px) {	
	
.menu-burger-cont, .nav-overlay, .close-btn{display:none;}
	
nav ul{list-style:none;display:flex;align-items:center;}
		
nav ul li{padding:0 15px;position:relative;text-transform:uppercase;}

nav ul li a{color:#000;font-size:21px;font-weight:400;transition:.4s;}

nav ul li a:hover{color:#d72b27;}

nav ul li:first-child{padding-left:0;}	
	
nav ul li:last-child{padding-right:0;}
	
}
	
@media all and (max-width: 800px) {
	
.menu-burger-cont{display:flex;align-items:center;letter-spacing:1px;color:#d72b27;font-size:12px;text-transform:uppercase;font-weight:700;transition:.3s;}
	
.menu-burger{width:32px;height:22px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;position:relative;z-index:100;padding-left:10px;}
	
.menu-burger:hover{cursor:pointer;}

.menu-burger span{width:100%;height:2px;background:#d72b27;transition:.2s;border-radius:2px;}
	
.menu-burger-cont:hover .menu-burger span{background:#d72b27;}

.menu-burger-cont:hover .menu-burger span.middle{width:75%;}
	
header nav{position:fixed;width:100vw;height:100vh;top:0;z-index:1000;pointer-events:none;}

header nav.opened{pointer-events:all;}	

.menu-cont{display:flex;flex-direction:column;align-items:flex-start;position:fixed;background:#000000;background-size:600px auto;width:325px;height:101%;right:-325px;top:0;z-index:200;transition:.5s;justify-content:flex-start;scrollbar-width:none;-ms-overflow-style:none;opacity:0;overflow-y:scroll;padding:75px 0 10px 0;box-sizing:border-box;}

nav.opened .menu-cont{right:0;box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.25);opacity:1;}	
	
.menu-cont::-webkit-scrollbar{width:0;height:0;}
	
.nav-overlay{position:fixed;right:0;top:0;height:110%;background:rgba(0,0,0,0.5);opacity:0;transition:.5s;z-index:-100;left:0;}
	
header nav.opened .nav-overlay{opacity:1;}
	
.close-btn{position:absolute;top:25px;right:30px;height:25px;width:26px;line-height:100%;border-radius:50%;background:white;color:#161616;font-weight:800;font-size:13px;display:flex;justify-content:center;align-items:center;text-decoration:none;transition:.3s;}

.close-btn:hover{background:#d72b27;}
	
nav ul{display:flex;flex-direction:column;align-items:flex-end;width:100%;opacity:0;transition:.7s;transform:translateX(100px);}

nav ul.page-nav{padding-bottom:25px;}	
	
nav.opened ul{opacity:1;transform:translateX(0);}
	
nav ul li{text-transform:uppercase;width:100%;position:relative;font-size:16px;font-weight:600;box-sizing:border-box;text-align:right;}
	
nav ul li a{color:white;transition:.4s;width:100%;height:50px;box-sizing:border-box;display:flex;align-items:center;text-align:right;line-height:165%;padding:0 30px;justify-content:flex-end;}

nav ul li a:hover{color:#d72b27;background:rgba(255,255,255,0.03);padding-right:40px;}
	
}
/*****  Top Banner  *****/

.top-banner {width:100%; height: auto; min-height: 31%; background: #000;}
.top-banner img {width:100%; height: auto; position: relative;}
.top-banner-text {position:absolute; top:210px; left:6%; font-size:4em; font-weight: bold; color:#fff; line-height: 110%;}

@media all and (max-width: 1180px) {.top-banner-text { top:130px; font-size:2.8em;}}
@media all and (max-width: 700px) {.header-inner{width:90%;}.top-banner-text {font-size:1.8em;}}
@media all and (max-width: 500px) {.top-banner-text {font-size:1.0em; line-height: 120%;} h1 {font-size: 32px;}}

/*****  Content  *****/
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


main {
	width: 70%;
	max-width:820px;
	margin: 0 auto;
	position:relative;
	padding:80px 55px 400px 55px;
}

.text-right {text-align: right;}

main h2 {color:#d72b27; font-weight: 300;}

/*****  Slant Banners and other sections  *****/
.banner-wrapper-red {
  background-image: url(images/transport-gladstone-freight.jpg);
  background-size:contain;
  background-repeat:no-repeat;
  background-color:#000;
  width:100%;
  height:560px;
}
.banner-red {
  width:100%;
  height:560px;
  background-image: -webkit-linear-gradient(-165deg, rgba(215, 43, 39, 100) 48%, rgba(0, 0, 0, 0) 0%);
}
.earthmoving-box {background:#f2f2f2; width:100%; min-height: 200px; padding:60px 55px; box-sizing: border-box; text-align: center; display: flex; justify-content: space-between;}
.earthmoving-box img {margin:0 5px; width:23%; height: auto; max-width:382px;}

.banner-wrapper-black {
  background-image: url("images/transport-gladstone-freight2.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-color: rgba(215, 43, 39,1.00);
	background-position: right top;
  width:100%;
  height:560px;
}
.banner-black {
  width:100%;
  height:560px;
  background-image: -webkit-linear-gradient(165deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 100) 0%);
}

.text-box {
  padding: 80px 90px 0 100px;  
  width: 30%;
  margin: 0 0 0 auto;
}

.text-box > * 
{
  max-width: 570px
}

.text-box h1, .text-box h2, .text-box h3, .text-box p {color:#fff;}  
.text-box p {font-size:19px; font-weight:300;}
.text-box-learn {border:1px solid #fff; padding:10px 25px;text-transform: uppercase;font-size:19px; font-weight:300;color:#fff; width: 140px; margin-top:40px; box-sizing: border-box; text-align: center;}
.text-box-learn:hover {background:rgba(255,255,255,0.4); transition: background 0.5s;}

.banner-black .text-box {margin: 0 auto 0 0;}

.banner-dots {width:100%;height: auto; background:rgba(215, 43, 39, 1.0); position: relative;}
.banner-dots img {width:100%; height:auto;}
.banner-dots h4 {position:absolute; top:70px; left:100px; max-width: 50%; color:#fff; text-transform: uppercase;font-size:35px; font-weight:300; padding-bottom:15px;}
.banner-dots p {position:absolute; top:150px; left:100px; max-width: 470px; color:#fff; font-size:19px;}


@media all and (max-width: 1250px) {.banner-dots h4 {font-size:30px;}}
@media all and (max-width: 1180px) {.text-box {padding: 40px 90px 0 100px; width:40%;}
	.banner-red {background-image: -webkit-linear-gradient(-165deg, rgba(215, 43, 39, 100) 58%, rgba(0, 0, 0, 0) 0%); }
	.banner-black {background-image: -webkit-linear-gradient(165deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 100) 0%);}
	.banner-dots h4 {position:absolute; top:50px; left:70px; font-size:25px; }
	.banner-dots p {position:absolute; top:110px; left:70px;}
}
@media all and (max-width: 1100px) {
}
@media all and (max-width: 1000px) {
	.banner-wrapper-red {background-image: none;}
	.banner-wrapper-black {background-image: none;}
	.banner-red {background-image: -webkit-linear-gradient(-165deg, rgba(215, 43, 39, 100) 78%, rgba(0, 0, 0, 0) 0%);}
	.banner-black {background-image: -webkit-linear-gradient(165deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 100) 0%);}
	.text-box {width:60%;padding: 30px 20px 0 120px;}  
	.earthmoving-box {padding:40px 35px;}
	.banner-dots h4 {top:35px; max-width: 100%;}
	.banner-dots p {top:80px; font-size:14px; max-width: 80%;}
}
@media all and (max-width: 750px) {
	.banner-dots {height: 250px; overflow: hidden;}
	.banner-dots img {height:100%; width:auto; margin: 0 auto;}
	.banner-dots h4 {left:0; right:0; width:90%; margin:0 5%;}
	.banner-dots p {left:0; right:0; width:90%; max-width:90%; margin:0 5%;}
}
@media all and (max-width: 600px) {
	.earthmoving-box {flex-wrap:wrap;}
	.earthmoving-box img {margin:12px 5px; width:46%; max-width:auto;}
	.banner-red {background-image: -webkit-linear-gradient(-165deg, rgba(215, 43, 39, 100) 78%, rgba(215, 43, 39, 100) 0%);}
	.banner-black {background-image: -webkit-linear-gradient(165deg, rgba(0, 0, 0, 100) 78%, rgba(0, 0, 0, 100) 0%);}
	.text-box, .banner-black .text-box {width:90%;padding: 30px 0 0 0;margin: 0 auto 0 auto;}
}

@media all and (max-width: 500px) {.banner-dots h4 {font-size:15px;} main td {padding-right:3px!important;padding-bottom:3px!important;}}

@media all and (min-width: 1720px) {
	.banner-wrapper-red {background-size:60%; background-position: left center;}
	.banner-wrapper-black {background-size:60%; background-position: right center;}
	.earthmoving-box {justify-content: space-around;}
	.earthmoving-box img {width:382px;}
	.banner-dots h4 {max-width: 70%; font-size:50px;}
	.banner-dots p {max-width: 870px; font-size:35px; padding-top:30px;}
}

main ul{
	list-style-type:disc;
	padding-left:20px;
}

.metaslider ul{
	padding-left:0;
}

main p, main li {
	color:#000; /* Select font color */
	margin-bottom:15px;
	font-size:16px;
	line-height:170%;
	font-weight:normal;
}

main li{margin:2px auto;}

main td {vertical-align: top; padding-right:20px; padding-bottom:20px;}

@media all and (max-width: 700px){
	.banner{display:none;}
	main {width:90%; padding:30px 0 400px 0;}
}
/*****  Gallery  *****/

.gallery{
	display:flex;
	flex-wrap:wrap;
	width:calc(100% + 20px);
	margin-left:-10px;
}

.gallery-item{
	padding:10px;
	position:relative;
	text-align:center;
	width:25%; /* Width will define items per row */
	box-sizing:border-box;
}

.gallery-item img{
	transition:.5s;
	width:100%;
	height:auto;
	max-width:100%;
}

.gallery-item:hover img{
	opacity:0.8;
}

.gallery br{
	display:none;
}

@media all and (max-width: 850px){.gallery-item{width:33.33%;}}

@media all and (max-width: 650px){.gallery{width:calc(100% + 10px);	margin-left:-5px;}.gallery-item{width:50%;padding:5px;}}


/*****  Map  *****/

.map {
    -webkit-filter: brightness(0.3) saturate(70%) hue-rotate(330deg) sepia(20%) grayscale(100%);
       -moz-filter: brightness(0.3) saturate(70%) hue-rotate(330deg) sepia(20%) grayscale(100%);
        -ms-filter: brightness(0.3) saturate(70%) hue-rotate(330deg) sepia(20%) grayscale(100%);
         -o-filter: brightness(0.3) saturate(70%) hue-rotate(330deg) sepia(20%) grayscale(100%);
            filter: brightness(0.3) saturate(70%) hue-rotate(330deg) sepia(20%) grayscale(100%);
	
}
/*****  Contact  *****/

#contact{
	background:#e5e5e5; /* Select top footer background colour */
	width:100%;
	min-height:250px;
	position: absolute;
	bottom:0;
	clear: both;
	padding:40px 0;
}

#contact-inner {
	width: 90%;
	max-width:1460px;
	overflow: hidden;
	margin: 0 auto;
	padding:50px 0;
	border-top:1px solid #cfcfcf;
	display: flex;
	justify-content: space-between;
	text-align: right;
	color:#858383;
}
#contact-inner a {color:#858383;}

.footer-nav {text-align:center; text-transform: uppercase; font-weight:300;}


@media all and (max-width: 700px){
	#contact {min-height:280px;}
	#contact-inner {flex-wrap: wrap; padding-top:35px;}
	.contact-logo {width:100%; padding-bottom:20px;}
	.footer-nav {text-align:left;}
}

/* * * 7.0 Footer * * */

footer{position: absolute;bottom: 0; min-height:80px;background:#000000;width:100%;padding:30px 20px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;}

footer ul{display:flex;align-items:center;}

footer ul li{border-right:1px solid rgba(255,255,255,0.7);color:rgba(255,255,255,0.7);padding:0 10px;font-size:13px;line-height:100%;}

footer ul li:first-child{padding-left:0;}

footer ul li:last-child{padding-right:0;border-right:none;}

footer ul li a{color:rgba(255,255,255,0.7);transition:.2s;}

footer ul li a:hover{color:white;}

@media all and (max-width: 800px) {
	footer ul li a {line-height:120%;}
	
}

@media all and (max-width: 500px){
	footer ul {display:block;}
	footer ul li{width:100%; border-right:none; padding-bottom: 15px; padding-left:0px; text-align: left;} 
}
.hours {float:right;}
/* * * Contact form styling * * */
#wpcf7-f9-p14-o1>.wpcf7-form {float:none; min-height: 500px; max-width: 90%; margin: 20px auto;}
#wpcf7-f9-p14-o1>.wpcf7-form p {width:100%; float: none;}

@media all and (max-width: 850px){
#wpcf7-f9-p14-o1>.wpcf7-form p {width:100%; float: none;}}
.wpcf7-form {
	border:1px solid #ababab;
	padding:20px 20px 10px 20px;
	margin: 20px;
	float:right;
  	border-radius: 5px;
}
.wpcf7-form input[type=submit] {
    background:url(images/submit-button.png);
	height: 36px;
	width:150px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    float: right;
	color: #14af35;
}
.wpcf7-form label {
	line-height:145%;
}
.wpcf7-form input, .wpcf7-form textarea {
  	background: rgba(0,0,0,.05);
  	border-radius: 5px;
	border-color: #a1a1a1;
	border-width: 1px;
	margin-top:10px;
	padding: 5px 0 5px 5px;
  	outline: none;
	min-height: 20px;
	color: #000;
	width: 99%;
}
@media all and (max-width: 850px){
.wpcf7-form {
	float:none;
	padding-bottom: 20px;
	}
.wpcf7-form input, .wpcf7-form textarea {
	width:100%;
}
}