@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);

/*
Theme Name: Mastercraft Kitchens
Theme URI: http://mastercraft.co.nz/kitchens
Description: A custom responsive WordPress theme for mastercraft.co.nz/kitchens built on Twitter Bootstrap mobile front-end framework. Launched in May 2015, designed by <a href="http://www.iconadvertising.co.nz/">Icon Advertising</a>.
Version: 1.0
Author: Hodgeman Web &amp; Design
Author URI: http://www.hodgeman.co.nz/
Tags: Clean, Modern, Responsive, Bootstrap, Navy, Aqua, Grey

AQUA: #008DA8
NAVY: #002D62
GREY: #c3c3c3
BG:		#EBEBEB
RED:  #FF0000

*/

/* Apply CSS to iOS affected versions only */
body.modal-open{ position: fixed; width: 100%; }

body{background:#008da8;line-height:170%;font-family:'Myriad Pro', Myriad, Arial, Helvetica, sans-serif;color:#c3c3c3}
a{color:#002d62}
a:hover, a:focus{color:#008da8}

h1,h2,h3,h4,h5,h6{font-family: 'Raleway', sans-serif;}

h1{margin:0 0 30px;font-size:1.8em}
h2{font-size:1.6em}
h3{font-size:1.4em}
h4{font-size:1.2em}

hr{border-color:#CCC}


#nav{background: #c3c3c3;}
.white{background-color:#ebebeb;color:#333;padding:30px 0}

#logo{margin:36px 0}

.nav>li>a{color:#FFF;padding:13px 10px}
.nav>li.current-menu-item>a,
.nav>li.current-menu-item>a:hover,
.nav>li.current-menu-ancestor>a,
.nav>li.current-menu-ancestor>a:hover,
.nav>li.current-page-ancestor>a,
.nav>li.current-page-ancestor>a:hover,
.nav>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover{background-color:#002d62}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover,
.nav>li>a:hover{background-color:#008da8; border:none}

.dropdown-menu{background-color:#008da8;border:none}
.dropdown-menu>li>a{color:#FFF}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus{background-color:#ebebeb;color:#002d62}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:active>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

header{background-color:#002d62;border-top:18px solid #008da8;}
	header a.link{font-size:2em;color:#FFF}
	header a.link:hover{text-decoration:none;color:#008da8}
  header .btn{margin:30px 0 0 20px}
  header .row.mobile .btn{margin:0 0 15px 0}

footer{color:#FFF;padding:20px 0;font-size:12px}
	footer a, footer a:hover, footer a:focus, footer a:visited{color:#FFF}
	footer hr{border-color:#48535B;margin:10px 0}
	footer span{color:#969696}
	footer ul.list-inline li{border-right:2px solid #5f6467;padding-left:5px}
	footer ul.list-inline li:last-child{border:none}
	footer img.pull-left{margin-bottom:0}
	
#breadcrumbs{background:#ebebeb;border-bottom:1px solid #e1e1e1;padding:12px 0}	
	
	
.btn-primary{
	color: #ffffff;
	background-color: #002D62;
	border-color: #002D62;
}
.btn-primary:hover{
	color: #ffffff;
	background-color: #008DA8;
	border-color: #008DA8;
}
.btn-info{
	color: #ffffff;
	background-color: #008DA8;
	border-color: #008DA8;
}
.btn-info:hover{
	color: #ffffff;
	background-color: #00778F;
	border-color: #00778F;
}

.marginR20{margin-right:20px}
.marginT70{position:absolute;z-index:100}
.marginB20{margin-bottom:20px}
.marginB30, 
.makecolumn img.img-responsive{margin-bottom:30px}

.carousel-indicators {left:auto;right:20px;margin-bottom:0;width:auto;bottom:10px}
.carousel-indicators li{background-color:#828282;border:none;width:15px;height:15px}
.carousel-indicators .active {background-color:#dcdcdc;width:15px;height:15px}

.date{color:#999}

.widget ul{list-style:none;padding-left:0}
.widget h3{color:#008DA8}
.widget li{border-bottom:1px dotted #999;margin-bottom:5px;padding-bottom:5px}

#sidebar .widget{margin-bottom:30px}

.alignright,
img.pull-right{margin:0 0 30px 20px;float:right}
.alignleft,
img.pull-left{margin:0 20px 30px 0;float:left}

.wp-caption>img{margin-bottom:10px}
.wp-caption-text{font-size:12px;font-style:italic;line-height:130%}

.case_studies h3{margin-top:0}
.consultants, .staff{margin-bottom:30px}

.border{border:1px solid #c3c3c3}
.border:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } 
.border img.pull-left{margin-bottom:0}



#mapcontainer{height:600px}
#locationcontainer{height:600px;overflow:auto}
#locationList{list-style:none;background-color:#FFF;padding-left:0}
.locationItem{position:relative;border-bottom:1px solid #CCC;margin-bottom:20px;padding-bottom:20px;font-size:12px}
.locationItem h4{width:60%;color:#000;font-weight:bold;margin-bottom:5px;font-size:16px}
.locationItem .distance{font-style:italic;font-size:12px;color:#999;position:absolute;top:0;right:0}
.locationItem p.address{color:#777}
.locationItem p{margin:0}

#map {width:100%;height:100%}



.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%;
}

.type-post h2{margin-top:0}
.type-post img.pull-left{margin-bottom:0}

.single-locations h1{margin-bottom:5px}
.single-locations h2{margin-top:5px}
.single-locations #sidebar h3{margin-top:5px}
.single-locations .carousel{margin-top:20px}

.type-locations h2,
.type-locations h3{margin:0}
.type-locations h4{margin-top:0}


.map-preload {
  display: none;
}
span.large{font-size:2em}
.btn.btn-danger.btn-block{white-space:normal}

.btn-square, 
.btn-lg.btn-square,
.btn-group-lg>.btn.btn-square{border-radius:0}

#carousel-thumbnails{margin:30px -5px}
#carousel-thumbnails .carousel-thumbnail{padding:0 5px;margin-bottom:10px}
#carousel-thumbnails .carousel-thumbnail img{opacity:0.5}
#carousel-thumbnails .carousel-thumbnail.active img,
#carousel-thumbnails .carousel-thumbnail img:hover{opacity:1}


/* ~~~ === LINKS'S PAGE ============================================================================ ~~~ */
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

input.errorField, select.errorField{border:1px solid red;}
	
@media (max-width: 768px) {	
	img.alignright{margin:0 0 30px 0;float:none}
	img.alignleft{margin:0 0 30px 0;float:none}	
	}
	
@media (min-width: 992px){
	.nav>li>a{padding:15px 10px}
}	
@media (min-width: 1200px){
	.nav>li>a{padding:15px 15px}
}