/*

Theme Name: speakerphone
Theme URI: http://www.website.co.nz
Description: speakerphone
Author: Wired
Author URI: http://www.wired.co.nz
version: 1.0

*/


/*------------------------------------*\
  RESET
\*------------------------------------*/

@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

html, body {
	height: 100%;
}

body { background:#000; color:#fff; font-family: 'Poppins', sans-serif; font-size:15px; margin:0; padding:0;}

img { border:none; display:block; height:auto; width:100%;}

h1{ color:#0099a5; font-size:3.2em; font-weight:400; line-height:0.9em; margin:10px 0 20px 0; padding:0; text-transform:uppercase;}
h1 span {font-size:0.6em; line-height:0.6em; }
h2 { color:#0099a5; font-size:28px; font-weight:300; line-height:30px; margin:0 0 20px 0; padding:0; text-transform:uppercase;}
h3 { color:#0099a5; font-size:24px; font-weight:300; line-height:26px; margin:0 0 10px 0; padding:0;}
h3 span { font-size:14px;}
h4 { font-size:18px; font-weight:600; line-height:24px; margin:10px 0 ; padding:0;}
h5 { font-size:18px; font-weight:300; line-height:22px; margin:20px 0; padding:0;}
h6 {}

h1 ~ h2 {margin:-20px 0 20px 0;}

p { font-size:15px; font-weight:300; line-height:22px; margin:0 0 18px 0;}

a { color:#0099a5; text-decoration:none;}
a:hover, a:active { color:#2bc2ce; transition:0.3s;}
a.tel {color:#fff; font-size:24px; line-height:30px;}


hr { border-bottom:0; border-left:0; border-right:0; border-top:1px solid #e4e5e8; height:1px; margin:50px 0; }

ul, ol { margin:0 0 20px 0; padding:0;}
ul li, ol li { font-size:14px; margin:0 0 10px 0; padding:0; }

.contentwidth { padding:0 8%;}

.clearfix { clear:both;}
.aligncenter { text-align:center;}



/*----------------------Header Navigation---------------------*/

#nav ul { margin:0; padding:0;}
#nav li { border-bottom:1px solid #000; display:inline-block; list-style:none; margin:0 1% 0 0; padding:5px 0; text-align:center; width:20%; }
#nav li:hover { border-bottom:1px solid #0099a5; transition:0.3s;}

#nav li a { color:#fff; font-size:18px; font-weight:300; text-decoration:none; text-transform:uppercase; }
#nav li:hover a { color:#0099a5; transition:0.3s;}

#nav li.current_page_item { border-bottom:3px solid #0099a5; color:#fff; font-weight:400;}
#nav li.current_page_item:hover { border-bottom:3px solid #0099a5; color:#0099a5;}

#nav input[type="checkbox"], #nav input[type="checkbox"] + label { display:none; }



#nav li ul.children { margin-top:8px; padding:0; position:absolute; transition:0.3s; transition-delay:0.5s; z-index:99; }

#nav li:hover ul.children {transition:0.3s; }

#nav li ul.children li { background:#0099a5; border-bottom:1px solid #000; display:block!important; height:0; margin:0!important; padding:0; overflow:hidden; transition:0.5s; transition-delay:0.5s; text-align:left; width:270px; }
#nav li ul.children li:hover, #nav li ul.children li:active { background:#077a83;}
#nav li ul.children li:first-child { border-top-right-radius:5px}
#nav li ul.children li:last-child { border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-bottom:none;}

#nav li ul.children li a { color:#fff!important; display:block; font-size:15px!important; margin:0!important; padding:4px 20px!important; text-transform:none;  }

#nav li:hover ul.children li { height:32px; margin:0!important; transition-delay:0.5s; transition:0.3s;  }

#nav li:hover ul.children:after { opacity:0.0; transition-delay:0.1s } 






/*----------------------footer Navigation---------------------*/

#footer-menu-wrap { top:33px; left:50%; position:absolute; width:50%;}
#footer-menu-wrap ul { margin:0; padding:0;}
#footer-menu-wrap ul li { float:left; list-style:none; margin:0; padding:0; text-align:center; width:16%;}
#footer-menu-wrap ul li a  { color:#fff; font-size:16px; font-weight:300; margin:0; padding:0;}
#footer-menu-wrap ul li.current_page_item a { color:#0099a5;}

#footer-menu-wrap li ul.children { display:none;}

/*----------------------Unique containers---------------------*/

#site-header { margin:0 0 20px 0; padding:0; position:relative;}

#header-logo { float:left; width:42%;}
#header-logo img { max-width:680px;}

#nav { bottom:30px; left:52%; position:absolute; width:30%; }

#cust-login-btn { position:absolute; top:15px; right:15px;}
#cust-login-btn a { background:#009dc4; border-radius:6px 0 6px 6px; color:#fff; display:block; font-size:13px; line-height:18px; padding:7px 12px 4px 12px;}
#cust-login-btn a:hover {background:#1dd0d7; }

#hello-wrapper { float:left; margin:0 10% 0 0; width:42%;}
#intro-content-wrapper { float:left; margin:0; width:30%}

#cory-wrapper { border-bottom:1px dashed #363636; border-top:1px dashed #363636; margin:20px 0 16px 0; padding:20px 0;}
#cory-wrapper img { border-radius:50%; float:left; margin:-9px 10px 0 0; width:97px;}

#login { text-align:center;}
#login-wrapper { background:#181b1d; border:2px solid #0099a5; border-radius:50%; height:400px; margin:auto; padding:40px; width:400px;}
#login-wrapper h2 { margin-top:60px;}

#site-footer { border-bottom:1px solid #2f2c2d; border-top:1px solid #2f2c2d; margin:50px 0 0 0; padding:2% 0 0 0; position:relative;}
#footer-logo-wrap { float:left; margin:0 0 0 10%; max-width:700px; width:40%;}




/*---------------------Repeated containers---------------------------*/
.sm-icon-wrapper { text-align:center;}
.sm-icon-wrapper a.facebook, .sm-icon-wrapper a.linkedin, .sm-icon-wrapper a.twitter { background:url(/images/public-icon-sprite.png); display:inline-block; height:37px; margin:0 5px; width:37px;}
.sm-icon-wrapper a.facebook { background-position:0 0;}
.sm-icon-wrapper a.linkedin { background-position:-42px 0;}
.sm-icon-wrapper a.twitter  { background-position:-84px 0;}
.sm-icon-wrapper a.facebook:hover, .sm-icon-wrapper a.linkedin:hover , .sm-icon-wrapper a.twitter:hover { opacity:0.6;}


/*---------------------input & anchor button styles-------------------------------*/

input[type="text"], input[type="email"], input[type="phone"], input[type="number"], input[type="password"], textarea { background:#151819; border:1px solid #0099a5; border-radius:4px; color:#fff; font-family: 'Poppins', sans-serif; font-size:16px; font-weight:300; line-height:24px; margin:5px 0; padding:10px 3%; width:94%;}

textarea {height:120px;}

input[type="submit"], a.btn { background:#0099a5; border:0; border-radius:30px; color:#fff; display:inline-block; font-size:16px; font-weight:600; height:47px; line-height:47px; padding:0 25px; text-decoration:none; text-transform:uppercase; }

input[type="submit"]:hover, a.btn:hover { background:#0099a5; cursor:pointer; transition:0.3s;}

div.wpcf7 img.ajax-loader { position:relative; top:-40px; left:180px; width:32px;}
.wpcf7-not-valid { border:2px solid #c90000!important;}
.wpcf7-not-valid-tip {color:#c90000!important; margin:0 10px; }

.wpcf7-not-valid { background:#440b0b!important; border:1px solid #a50000!important;}
span.wpcf7-not-valid-tip { display:none!important;}

div.wpcf7-response-output { border-radius:8px; font-size:14px!important; margin:-30px 0 10px 0!important; padding:6px 9px!important; }
div.wpcf7-validation-errors { border:2px solid #a50000!important;}

/*---------------------icons---------------------------*/









/*---------------------responsive cols---------------------------*/

.row { clear:both; position:relative; }

.col-1o3 { float:left; margin-right:3.5%; width:31%;}
.col-1o3:nth-child(3n) { margin-right:0;}

.col-2o3 { float:left; margin-right:3.5%; width:65.5%;}
.col-2o3 ~ .col-1o3, .col-1o3 ~ .col-2o3 { margin-right:0; text-align:left;}

.col-1o4 {float:left; margin-right:5%; width:20%;}
.col-1o3:nth-child(4n) { margin-right:0;}

.col-2o4 {float:left; margin-right:5%; width:45%;}
.col-1o4 ~ .col-2o4 { margin-right:0;}

.col-1o2 { float:left; margin-right:5%; width:45%;}

.col-auto3 { -webkit-column-count:3; -moz-column-count:3; column-count:3;}




/*---------------------Media queries---------------------------*/

@media only screen and (max-width: 1320px) {
#nav { width:40%; }
#intro-content-wrapper { width:40%}

#site-footer { padding:2% 0 0 0;}
#footer-logo-wrap { margin:0 0 0 5%; width:40%;}
#footer-menu-wrap { margin:0; width:50%;}
}

@media only screen and (max-width: 1000px) {
#header-logo { width:45%;}
#nav { bottom:15px; width:45%; }
#hello-wrapper { margin:0 5% 0 -5%;  width:52%;}
#intro-content-wrapper { width:40%}
}

@media only screen and (max-width: 860px) {
#header-logo { width:45%;}
#nav { bottom:10px; width:50%; }
#hello-wrapper { margin:0 5% 0 -5%;  width:52%;}
#intro-content-wrapper { width:40%}
}

@media only screen and (max-width: 767px) {
#site-header { margin:0 0 70px 0;}
#header-logo { margin:0 0 0 -5%; width:85%;}
#nav { bottom:-40px; left:10%; width:80%; }
#cust-login-btn { display:none;}
#hello-wrapper { display:none;}
#intro-content-wrapper { margin:0 10%; width:80%}

#cory-wrapper a.tel { font-size:16px; line-height:22px;}
#cory-wrapper a.tel:after { content:"0508 773 2537"; display:block; font-size:24px; width:100%; }


#footer-logo-wrap { margin:60px 0 0 5%; width:90%;}
#footer-menu-wrap { left:5%; top:0; width:95%;}
#footer-menu-wrap ul li{ width:20%;}
}

@media only screen and (max-width: 600px) {
#header-logo { margin:0 0 0 -7%; width:95%;}
#nav { width:90%; }
}

@media only screen and (max-width: 420px) {
#cory-wrapper { text-align:center;}
#cory-wrapper img { display:none;}

#footer-logo-wrap { margin:10px 0 0 5%; width:90%;}
#footer-menu-wrap { display:none;}
}

@media only screen and (max-width: 340px) {
#header-logo { margin:0 0 0 -14%; width:110%;}
#nav { left:3%; width:94%; }
#nav li a { font-size:16px; }
#intro-content-wrapper { margin:0 5%; width:90%}
h1{ font-size:2.5em;}
}