/*
Theme Name: HH Theme
Theme URI: http://www.holtonhomegrown.co.nz
Description: HH Theme
Author: Wired
Author URI: http://www.wired.co.nz
version: 1.0
*/

body { color:#1b1b1b; font-family: 'Roboto', sans-serif; margin:0; padding:0; }

#header { background:url(/image/header-bg.png) left bottom repeat-x; height:330px; position:relative; z-index:99; }

#header div#logo { display:inline-block; margin:0; padding:0; text-align:center; width:48%; }
#header div#logo img { max-width:400px; padding:0 0 8px 0; }

#header ul#menu-header { display:inline-block!important; font-family: 'Neuton', serif; font-size:22px; line-height:24px; margin:0 0 0 5%; padding:0; }
#header ul#menu-header li { background:url(/image/top-nav-bg.png) 0 0 no-repeat; float:left; height:258px; list-style:none; margin:0 5px; padding:0; text-align:center; width:140px;}
#header ul#menu-header li a:link, #header ul#menu-header li a:visited { background:url(/image/top-nav-bg-on.png) 0 -300px no-repeat; color:#1b1b1b; display:block; height:140px; padding:118px 25px 0 25px; text-decoration:none; transition:0.3s; }
#header ul#menu-header li a:hover, #header ul#menu-header li a:active, #header ul#menu-header li.current-menu-item a {background:url(/image/top-nav-bg-on.png) 0 0 no-repeat;}

#banner { margin-top:-60px; position:relative; z-index:1; }
#banner div{ background:rgba(0,0,0,0.8); color:#fff; max-width:450px; padding:60px; position:absolute; top:20%; right:5%; width:50%; }
.page-template-page-contact #banner div { right:initial; left:5%;}
.page-template-page-direction #banner div { right:initial; left:5%; max-width:none; width:60%; }


#banner div dl { margin:0; padding:0;}
#banner div dl dt, #banner div dl dd { float:left; margin:0; padding:0; width:50%;}

#content { margin:40px 0;}

#footer { margin:0; padding:0;}
#footer ul#menu-header-1 { font-family: 'Neuton', serif; font-size:18px; line-height:18px; margin:auto; padding:30px 0 0 0; text-align:center; }
#footer ul#menu-header-1 li  { border-right:2px solid #94bfba; display:inline-block; padding:0 9px; text-align:center;}
#footer ul#menu-header-1 li a:link, #footer ul#menu-header li a:visited { color:#b5b5b5;}
#footer ul#menu-header-1 li a:hover, #footer ul#menu-header li a:active, #footer ul#menu-header li.current-menu-item a  { color:#94bfba;}
#footer div#logo { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #e7e5d7 100%); background: -webkit-linear-gradient(top, #ffffff 0%,#e7e5d7 100%); background: linear-gradient(to bottom, #ffffff 0%,#e7e5d7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e5d7',GradientType=0 ); height:200px; text-align:center; }

#footer div#logo img { max-width:260px; }
#footer hr.dots { margin:40px 0; }

#wired { background:#c5c3b3; font-size:12px; padding:10px; text-align:center; }
#wired a:link, #wired a:visited { color:#fff; }

img {height:auto; width:100%;}

h1, h2, h3 { font-family: 'Neuton', serif; }
h1 { font-size:40px; line-height:42px; margin:0 0 20px 0; padding:0;}
h2 { font-size:30px; line-height:32px; margin:0; padding:0; }
h3 { font-size:22px; line-height:24px; margin:0; padding:0;}
h4 { font-size:20px; line-height:24px; margin:0 0 5px 0; padding:0;}
h5 {}
h6 {}
p { font-size:18px; margin:15px 0; padding:0; position:relative;}

a:link, a:visited { color:#63b5c7; text-decoration:none; transition:0.3s; }
a:hover, a:active { color:#82c741; }

hr { border-color:#e8e6d6; border-style:dotted; border-width:0 0 2px; clear:both; margin-bottom:40px; padding-top:30px; }

hr.dots { background:url(/image/dots.png); border-width:0; clear:both; height:6px; margin:50px 0; padding:0;}

.contentwidth { margin:auto; width:1200px; padding:0; }

.clear { clear:both;}

.rippedframe { background:url(/image/ripped-frame.png) 0 0 no-repeat; clear:both; overflow:hidden; padding:22px 25px 25px 22px; position:relative; z-index:0; }
.rippedframe:after { background:url(/image/ripped-frame.png) right bottom no-repeat; content:""; display:block; position:absolute; right:0; bottom:0; height:95%; width:95%; z-index:-1; }
.rippedframe img { border:2px solid #fff; display:block; }
.rippedframe img, .rippedframe p { margin:-2px 0 0 -2px; z-index:999;}

.icon:before {background:url(/image/iconsprite.png) 0 0 no-repeat; content:""; display:block; position:absolute;}
.youtube:before { background-position:-452px -36px; height:41px; width:54px; top:-9px; left:0; }
.youtube { margin:30px 0; padding:0 0 0 60px;}
.vintage-camera { background:url(/image/iconsprite.png) -366px -20px; display:block; float:left; height:72px; margin:9px 15px 0 9px; width:43px;}

.top-flag, .map-icon {background:url(/image/iconsprite.png) 0 0 no-repeat; position:absolute;}
.top-flag { top:-20px; left:50px; height:182px; width:205px; z-index:1000;}
.map-icon { background-color:#87c6d4; background-position:-215px -2px; border:2px solid #fff; border-radius:50%; height:130px; top:15px; left:32px; width:130px;  z-index:1001;}

.top-flag ~ .rippedframe { margin-top:60px; padding:32px 35px 35px 32px; }

.greytext { color:#737373;}

p.headingflag, p.headingflag-big  { background:#63b5c7; color:#fff; display:inline-block; height:60px; line-height:60px; margin:15px 0 -12px -14px; padding:0 20px; position:relative; z-index:5; }
p.headingflag:before, p.headingflag-big:before  { background:url(/image/iconsprite.png) -558px 0 no-repeat; content:""; display:block; height:60px; position:absolute; top:-10px; left:-28px; width:42px; z-index:-1; }
p.headingflag:after, p.headingflag-big:after { content:""; width:0; height:0; border-style:solid; border-width:30px 0 30px 15px; border-color:transparent transparent transparent #63b5c7; position:absolute; top:0; right:-15px;} 

p.headingflag-big { height:89px; line-height:89px; margin-bottom:30px;}
p.headingflag-big:before { background:url(/image/iconsprite.png) -540px -61px no-repeat; height:89px; top:-15px; left:-40px; width:60px; }
p.headingflag-big:after { border-width:45px 0 44px 20px; border-color:transparent transparent transparent #63b5c7; right:-20px;} 

.wp-caption { color:#606060; font-size:16px; padding:8px 0; text-align:center; }

ul.arrowlist { margin:0; padding:0; list-style:none; }
ul.arrowlist li { margin:0; padding:5px 0 9px 30px; position:relative; }
ul.arrowlist li:before { background:url(/image/iconsprite.png) -210px -154px no-repeat; content:""; display:block; height:20px; position:absolute; top:3px; left:0; width:20px; }

ul.colist { list-style:none;}
ul.colist li { float:left; margin:0; padding:5px 0 9px 0; width:33%;}
ul.colist li strong {font-family: 'Neuton', serif; font-size:20px; }

.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%;}

/*--Custom cols--*/

.col-1of2 { float:left; width:48%; }
.col-1of2:nth-child(1) { margin-right:4%; }

.col-1of3 { float:left; width:30%; }
.col-1of3 ~ .col-2of3 { margin-left:5%; }
.col-1of3:nth-child(2) { margin:0 5%; }
.col-2of3 { float:left; width:65%; }
.col-2of3 ~ .col-1of3 { margin:0 0 0 5%; }
.overtext .col-1of3 { background:#fff; padding:1em 10% 2em 0; position:absolute; top:10%; width:50%; }
.overtext .col-2of3 { margin-left:35%; }

.col-1of6 { float:left; margin:0 0 0 0.6%; width:16%; }
.col-1of6:nth-child(1) { margin-left:0;}

.row { clear:both; margin:0 0 1.8em 0; position:relative; width:100%; }

.menu-header-container {display:initial;}

@media only screen and (max-width:1280px) {
.contentwidth { width:94%; padding:0 3%; }
#banner div { max-width:none; padding:40px;}
#header div#logo { width:45%;}
.page-template-page-direction #banner div { width:80%; }
}

@media only screen and (max-width:1000px) {
#banner div { top:15%; width:75%; }
#header div#logo { width:34%;}
#header div#logo img { padding:0 0 50px 0;}
.page-template-page-direction #banner div { top:0; left:0; padding:20px 5%; width:90%; }
}

@media only screen and (max-width:800px) {
#header { height:auto; padding:30px 0;}
#header div#logo { display:block; width:45%}
#banner img {Display:none;}
#banner div { top:0; right:0; padding:30px 5% 60px 5%;; position:relative; width:90%; }
.page-template-page-contact #banner div { left:0;}
.col-1of2, .col-1of3, .col-2of3 { padding:0 5%; width:90%; }
.col-1of2:nth-child(1) { margin-right:0; }
.col-1of3 ~ .col-2of3 { margin-left:0; }
.col-1of3:nth-child(2) { margin:0; }
.col-2of3 ~ .col-1of3 { margin:0; }
ul.colist li { width:50%;}
}

@media only screen and (max-width:600px) {
#header div#logo { width:55%}
.top-flag { display:none;}
.top-flag ~ .rippedframe { padding:20px 20px 20px 20px; }
#banner div dl dt, #banner div dl dd { width:100%;}
}
@media only screen and (max-width:500px) {
ul.colist li { width:100%;}
}