/*
Theme Name: Total Control Drilling
Theme URI: http://totalcontroldrilling.co.nz/
Description: A bespoke responsive WordPress theme for Total Control Drilling. Built on Bootstrap 3.3.7, completed in November 2016.
Version: 1.0
Author: Hodgeman Web & Design
Author URI: http://www.hodgeman.co.nz

DARK GREY:	#363636
RED:				#ed1c24
*/


/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

@import url('https://fonts.googleapis.com/css?family=Arvo');

body {
  background-color:#363636;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #333;
}

a{color:#ed1c24;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;}
a:hover,
a:active,
a:visited{color:#ed1c24}


.btn,
a.btn,
.navbar-toggle {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  font-weight: bold;
}
a.btn:hover,
a.btn:active,
a.btn:visited{color:#FFF}


h1,h2,h3,h4,h5,h6{margin-top:10px;margin-bottom:20px}
h1{font-family: 'Arvo', sans-serif;}
h2,h3,h4,.btn-lg{font-family: 'Arvo', sans-serif;font-weight:300}

.vc_btn3,#header .quote{font-family: 'Arvo', sans-serif;font-weight:700}

h1{font-size:3em}
h2{font-size:2em;color:#363636}
h3{font-size:1.6em;color:#ed1c24}

hr{border-color:#666}

h3.widgettitle{margin-bottom:20px;color:#363636}

#header{
	background:#363636;
	position:relative;
	height:auto;
	z-index:10;
	-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
	}
#header.stuck{
	background:#363636;
	position:fixed;
	width:100%;
	z-index:100;
	}
#header #logo>img{margin:10px 0}
#header.stuck #logo>img{max-height:100px;margin:5px 0}
#header.stuck #mainnav{margin-top:0}

#menu-bar{background-color:#5f5d5c}

.nav>li>a{padding:5px 5px;color:#ed1c24;font-size:1em;
-webkit-transition:none;
	-moz-transition:none;
	-ms-transition:none;
	-o-transition:none;}
	
.nav-pills>li>a,
.navbar-nav>li>a{color:#FFF;font-family:'Arvo', sans-serif;font-weight:700}
.nav-pills>li>a{border-radius:0}

.nav-pills>li>a:hover{
	color:#ed1c24;
	background-color:transparent;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover,
.nav-pills>li.current-menu-item>a,
.nav-pills>li.current-menu-parent>a{
	color:#ed1c24;
	background-color:transparent;
}

.navbar-nav>li>a{color:#FFF}
.navbar-nav>li>a:hover,
.navbar-nav>li>a:active,
.navbar-nav>li>a:focus,
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{color:#ed1c24;}
.navbar-nav>li.current-menu-item>a,
.navbar-nav>li.current-menu-parent>a{color:#ed1c24}


.dropdown-menu>.current-menu-item>a,
.dropdown-menu>.current-menu-item>a:focus,
.dropdown-menu>.current-menu-item>a:hover{background-color:#ed1c24}

.dropdown-menu>li.active.current-page-parent>a{background-color:#5f5d5c}


.dropdown-menu{background-color:#5f5d5c}
.dropdown-menu>li>a{color:#FFF}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>li.active.current-page-parent>a:focus,
.dropdown-menu>li.active.current-page-parent>a:hover{background-color:#ed1c24;color:#FFF}

.navbar-toggle {
  display: inline-block;
  padding: 12px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border: none;
  cursor: pointer;
  user-select: none;
  background-color: #ed1c24;
}
.navbar-toggle .lines {
  display: inline-block;
  width: 21px;
  height: 3px;
  background: #FFF;
  transition: 0.5s;
  position: relative;
  vertical-align: middle;
}
.navbar-toggle .lines:before,
.navbar-toggle .lines:after {
  display: inline-block;
  width: 21px;
  height: 3px;
  background: #FFF;
  transition: 0.5s;
  position: absolute;
  left: 0;
  content: '';
}
.navbar-toggle .lines:before{
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  -moz-transform: rotate3d(0, 0, 1, 45deg);
  -ms-transform: rotate3d(0, 0, 1, 45deg);
  -o-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
}
.navbar-toggle .lines:after{
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  -moz-transform: rotate3d(0, 0, 1, -45deg);
  -ms-transform: rotate3d(0, 0, 1, -45deg);
  -o-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);	
}
.navbar-toggle.collapsed .lines:before {
  top: 6px;
}
.navbar-toggle.collapsed .lines:after {
  top: -6px;
}
.navbar-toggle.collapsed:hover {
  opacity: 1;
}
.navbar-toggle.collapsed:hover .lines:before {
  top: 7px;
}
.navbar-toggle.collapsed:hover .lines:after {
  top: -7px;
}
.navbar-toggle:active {
  -webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  transition-duration: 0;
  background: rgba(0, 0, 0, 0.1);
}
.navbar-toggle .lines {
  background: transparent;
}
.navbar-toggle .lines:before, .navbar-toggle .lines:after {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  top: 0;
  width: 21px;
}
.navbar-toggle.collapsed .lines {
  background: #FFF;
}
.navbar-toggle.collapsed .lines:before{
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -ms-transform: rotate3d(0, 0, 1, 0deg);
  -o-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
}
.navbar-toggle.collapsed .lines:after{
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -ms-transform: rotate3d(0, 0, 1, 0deg);
  -o-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);	
}

#content{background-color:#e6e6e6;}
#content .container{padding-top:30px;padding-bottom:30px}
#content #carousel-tabs.container{padding-top:0;padding-bottom:0}
.home #content .container{position:relative}
.home #content h1{margin-bottom:30px}

.pager li>a,
.pager li>span{border-radius:4px}

.navbar-toggle{background-color:#ed1c24;border-color:#ed1c24;color:#FFF}
.navbar-toggle:hover{background-color:#ed1c24;border-color:#ed1c24;color:#FFF}

.btn-lg{padding: 10px 45px}

.pager li>a,
.btn-primary{background-color:#ed1c24;border-color:#ed1c24;color:#FFF;border-radius:0;}

.pager li>a:focus,
.pager li>a:hover,
.btn-primary:focus,
.btn-primary:hover,
.btn-grey:focus,
.btn-grey:hover{background-color:#ed1c24;border-color:#ed1c24;color:#FFF}

.btn-grey{position:relative;border:none;background-color:#646464;border-radius:0px;color:#fff}
.btn-grey:before{
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-bottom: 20px solid #e6e6e6;
    border-left: 30px solid transparent;
    z-index: 10;
}

#searchform{margin-top:15px;margin-bottom:15px}

#breadcrumbs{
	padding: 0 0 10px;
	margin-bottom: 20px;
}

.nav-tabs.nav-justified>li>a{border-radius:0}
#carousel-tabs>.nav-justified>li>a{background-color:#e6e6e6;color:#000;padding-top:0px;border:none}
#carousel-tabs>.nav-justified>li>a:before{
	content: "";
	transition: 0s;
	border-bottom: 14px solid #e6e6e6;
	border-left: 19px solid transparent;
	position: absolute;
	top: -14px;
	left: 1px;
}
#carousel-tabs>.nav-justified>li>a:after{
	content: "";
	transition: 0s;
	display: block;
	background: #e6e6e6;
	height: 14px;
	position: absolute;
	top: -14px;
	left: 20px;
	right: 0px;
}
#carousel-tabs>.nav-justified>li.active>a{background-color:transparent;color:#FFF}
#carousel-tabs>.nav-justified>li.active>a:before{
	border-bottom: none;
}
#carousel-tabs>.nav-justified>li.active>a:after{
	background:none;
}

.carousel-caption{text-align:right;bottom:0px}
.carousel-caption h2{color:#FFF;font-size:3em}
.carousel-caption p{padding-left:0%;font-size:1.2em}
	
.carousel-control.left,
.carousel-control.right{background-image:none}

.carousel-inner>.item{
	background-size:cover;
	height:300px;
}

.make-responsive {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.make-responsive.widescreen { padding-bottom: 57.25%; }
.make-responsive.vimeo { padding-top: 0; }

.make-responsive iframe,
.make-responsive object,
.make-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .make-responsive { padding-top: 0; }
}

img.pull-left{margin:0 20px 20px 0}
img.pull-right{margin:0 0 20px 20px}

blockquote {
	color:#999;
  border-left: none;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #999;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
	margin-right:5px;
}
blockquote:after {
  color: #999;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
	margin-left:5px;
}
blockquote p {
  display: inline;
}

.latest-posts>div>a{
	background-color: #f2f2f2;
	padding: 15px 15px 30px;
	display: block;
	position: relative;
}
.latest-posts>div>a small{color:#000}
.latest-posts>div>a:hover{
	text-decoration:none;
}	
.latest-posts>div>a:before {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	border-bottom: 30px solid #e6e6e6;
	border-right: 30px solid transparent;
	z-index: 10;
}


.post h3{margin:10px 0 5px}

#filters{margin-bottom:30px}
#filters a{color:#505050;margin:0 20px;text-transform:uppercase;font-size:1.2em}
#filters a:hover,
#filters a:focus{text-decoration:none}
#filters a.active{border-bottom:2px solid #505050;color:#000;}
#filters a:hover{color:#666;border-bottom:2px solid #666;}

.testimonial{margin-bottom:30px}
.testimonial .box{background-color:#f2f2f2;padding:15px;font-size:0.9em;font-style:oblique}
.testimonial .arrow{margin:0 0 0 20px;
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;	
	border-top: 10px solid #f2f2f2;}
.testimonial .author{margin:0 0 0 15px;font-weight:bold;margin-bottom:0}
.testimonial .role{margin:0 0 0 15px;font-size:0.8em;color:#333}

#footer{padding:30px 0;color:#CCC}
	#footer a,
	#footer a:hover{color:#ed1c24}
	#footer h3.widgettitle{color:#ed1c24;font-size:1.4em}
	#footer .btn-primary{background-color:transparent}
	#menu-footer-menu{list-style:none;padding-left:0}
	#menu-footer-menu>li{float:left;margin-left:10px}
	
	#footer .btn-primary:hover{background-color:#ed1c24}
	
.widget{margin-bottom:30px}

#credit{color:#CCC;font-size:0.7em;padding:20px 0 10px}
#credit a{color:#EEE}

a[href$=".pdf"]:before {padding:0 0 0 25px;content:"";background:url(images/pdf.png) bottom left no-repeat}


.wpb_row{margin-bottom:0}

.vc_btn3.vc_btn3-size-sm.vc_btn3-style-outline{font-size:1em}
.vc_btn3.vc_btn3-size-md.vc_btn3-style-outline {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 35px;
	padding-right: 35px;
	font-size: 1.6em;
}

.vc_tta-color-black.vc_tta-style-flat .vc_tta-panel.vc_active .vc_tta-panel-heading{
	border-color: #ed1c24;
	background-color: #ed1c24;
}
.vc_tta-color-black.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-body {
  background-color: #444;
}


.bg_center{background-position: 50% 50% !important}

#offer .wpb_text_column{margin-bottom:10px}

img.aligncenter{display:block;margin:0 auto}


ul.nobullet{list-style:none;padding-left:0}
ul.nobullet>li{margin-bottom:15px}

a.btn-ghost, .btn-ghost {
	background: none;
	border: 1px solid #076a2c;
	color: #fff !important;
	padding: 8px 20px;
	vertical-align: middle;
}
a.btn-ghost:hover, .btn-ghost:hover {
  background: #02451b;
  border: 1px solid #02451b;
  color: #fff;
}

#tiles{margin-top:30px}
#tiles>div{margin-bottom:15px}
#tiles .has-post-thumbnail>a:hover>img{opacity:0.7}

#slideshow{margin-top:30px}
#carousel-markers ul{
	list-style:none;
	text-align: center;
	padding: 0;}
#carousel-markers li {
	margin: 0 6px;
	display: inline-block;
	zoom: 1;
}
#carousel-markers li a {
  width: 30px;
  height: 8px;
  background: #F2f2f2;	
	display:block;
}

#carousel-markers li a.active {
  background: #5b6e0e;
}


.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
	border: 1px solid #666;
}
.table-hover > tbody > tr:hover {
  background-color: #777;
}

.table>tbody>tr>th,
.table>tbody>tr>th:hover,
.table>tbody>tr>th:hover{
  background-color:#000;
	font-size:24px;
	color:#ed1c24;
}

.greybox{background-color:#CCC;}
.redbox{background-color:#ed1c24;}

.redbox a{
	color: #FFF;
	font-size: 3em;
	display: block;
	padding-top:25px;
}
.redbox a:hover{text-decoration:none}

.blockbox>.vc_column-inner{
	height: 100% !important;
	background-size: cover !important;
}


@media print {
	#footer,
	#credit{display:none}
}

.blockbox{height:200px}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
	h1{font-size:3.8em}
	h2{font-size:1.8em}
	h3{font-size:1.6em}
	#instagram h3{font-size:2.8em}
	#logo{margin:5px 0}
    .nav>li>a{padding:10px 10px;font-size:1em}
    .navbar-right {margin-right:0}
	#mainnav{margin-top:30px}
	#searchform{margin-bottom:0}
	#tiles{margin-top:0}
	.tread{height:40px}
	
	.home #content .container>.row{padding-top:30px}

	ul#headlinks{margin-top:20px;list-style:none}
	ul#headlinks>li{float:right;margin-left:10px}
	ul#headlinks a{color:#ed1c24}
	
	#carousel-tabs>.nav-justified{margin-top:-30px}
	.nav-tabs.nav-justified>li{padding: 0px 1px}
	
	.carousel-inner>.item{height:350px}
	.carousel-caption{bottom:40px}
	.carousel-caption h2{font-size:4em}
	.carousel-caption p{font-size:1.4em}
}

@media (min-width: 992px) {
	h1{font-size:4em}
	h2{font-size:2em}
	h3{font-size:1.8em}
	#instagram h3{font-size:3.2em}
	#logo{margin:10px 0}
	.vc_btn3.vc_btn3-style-outline, .vc_btn3.vc_btn3-style-outline:hover, .vc_btn3.vc_btn3-style-outline:focus {border-width:3px}
	#googlemap{height:350px}
    .nav>li>a{font-size:1.4em}
	.tread{height:50px}
	.blockbox{height:220px}
	.redbox a{font-size:2.5em}
	.noheader{padding-top:165px}
	
	.carousel-inner>.item{height:400px}
	.carousel-caption h2{font-size:4.5em}
	.carousel-caption p{padding-left:20%;font-size:1.8em}
}

@media (min-width: 1200px){
	h1{font-size:4.4em}
	h2{font-size:2.2em}
	h3{font-size:2em}
	#instagram h3{font-size:3.5em}
	#logo{margin:15px 0}
	ul#headlinks{margin:20px 0px 17px}
	#googlemap{height:400px}
	.blockbox{height:240px}
	.redbox a{font-size: 3em}
	
	.carousel-inner>.item{height:500px}
	.carousel-caption{bottom:50px}
	.carousel-caption h2{font-size:5em}
	.carousel-caption p{padding-left:50%;font-size:2em}
}