/*
Theme Name: JPCASA
Theme URI: http://underscores.me/
Author: Viewport
Author URI: http://viewport.co.za/
Description: Custom Theme for JP Chartered Accountants
Version: 1.0.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jpcasa

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}

/* Common Elements */
a {text-decoration:none; color:#72c54d; outline:none;}
a:hover {text-decoration:underline;}
::-moz-selection {background:#c6d9f1;}
::selection {background:#c6d9f1;}
.clearfix {clear:both;}




/* Fonts  */
body {font-size:95%; background:white; color:#555; font-family:"Raleway", "Helvetica", "Arial", sans-serif; font-weight:400; font-stretch:normal; text-rendering:optimizeLegibility !important; -webkit-font-smoothing:antialiased !important;} 
h1, h2, h3, h4, h5, h6 {color:#333; font-weight:bold; line-height:125%; padding:0.5em 0;}
h1 {font-size:300%; letter-spacing:-0.01em; padding:0.25em 0; margin:auto; max-width:800px;}
h2 {font-size:225%; padding:0.25em 0;}
h3 {font-size:125%;}
	h3 a {color:#333;}
h4 {font-size:150%; line-height:150%; font-weight:normal;}
h6 {font-size:100%; padding:2.5em 0; color:#72c54d; text-transform:uppercase; font-weight:bold; letter-spacing:1px;}
p, ul {line-height:150%; padding:0.5em 0;}
strong {font-weight:bold;} 
small {font-size:90%; color:#999;}
hr {height:1px; border:0; background:#ddd; clear:both; margin:2.5em 0;}
blockquote {color:#333; font-size:150%; line-height:150%; padding:1em 0;}
	
@media screen and (max-width:768px) {
	h1 {font-size:225%;}
}



/* Wrapper */
.wrapper {width:100%; display:block; clear:both; max-width:1300px; margin:0 auto; position:relative;}




/* Header 
- - - - - - - - - - - - */
header {display:block; width:100%; position:relative; z-index:1; color:white; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease}
	header .logo { max-width:217px; position:absolute; top:15px; left:75px; z-index:5;}
	
	@media screen and (max-width:1024px) {
		header .logo {left:25px;}
	}
	@media screen and (max-width:768px) {
		header .logo {max-width:175px;}
	}		
	
	/* Navigation */
	.nav-container {position:absolute; top:55px; right:75px; z-index:10;}
	.toggleMenu {display:none;}
		.toggleMenu:hover, .toggleMenu.active {text-decoration:none; color:white}
		.nav {list-style:none; *zoom:1; font-weight:bold;}
		.nav:before, .nav:after {content:" "; display:table}
		.nav:after {clear:both}	
		.nav a {color:white; -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none; }
		.nav li {position:relative; font-size:125%}
		.nav > li {float:left;}	
			.nav > li > a {display:block; padding:3px 1px; margin-left:1.75em;}
			.nav > li:last-of-type > a {margin-right:0px;}				
		.nav ul {list-style:none; width:12em; padding:3px; z-index:100; background:#72c54d; position:absolute; left:-9999px; }
		.nav > li.hover > ul {left:0px}
		.nav li li.hover ul {left:100%; top:0}
		.nav li.hover li a {text-transform:none; display:block; position:relative; color:white; padding:0.6em 0.8em; border:0; }		
				
		@media screen and (min-width:768px) {			
			.nav a.current, .nav li.current-menu-item a, .nav li.current-page-ancestor a, .nav li.hover a, .nav li.hover li a:hover {text-decoration:none; border-bottom:3px solid #72c54d; -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none;}
			.nav li.hover li a:hover {text-decoration:none; border-bottom:0; background:rgba(255,255,255,0.22); }			
		}
		@media screen and (min-width:768px) and (max-width:1024px) {
			.nav-container {right:25px;}
			.nav > li > a {margin-left:1em;}	
		}		
		@media screen and (max-width:767px) {
			.nav-container {float:none; position:absolute; display:block; top:0px; left:0px; width:100%; margin:0; background:#72c54d; text-align:left;}
			.toggleMenu {position:absolute; z-index:101; right:0px; top:0px; color:white; width:70px; height:70px; text-indent:-9999px; background:url("img/menu-white.png") center center no-repeat; background-size:30px;}
			.toggleMenu.active {background:url("img/close.png") center center no-repeat; background-size:30px;}	    		
			.nav {margin:70px 0 0; padding:0; border-top:1px solid #468836;}
			.nav > li {float:none; border:0}
				.nav ul {display:block; width:100%; padding:0; background-color:#72c54d;}
			.nav > li.hover, .nav > li.hover > ul , .nav li li.hover ul {position:static;}
		
			/* Top Level */
			.nav li a {border:0; color:white; border-top:1px solid #8de865; border-bottom:1px solid #599c3b; padding:0.85em 5%; margin:0; font-size:125%; opacity:1; }
			.nav > li > a {}
			.nav > li > .parent:after, .nav li li .parent:after, .nav > li.hover > .parent:after {content:""; width:15px; height:15px; display:inline-block; background:url("img/downArrow.png") 95% 50% no-repeat; background-size:15px; float:right;}
			.nav > li.hover > .parent:after {background: url("img/upArrow.png") 95% 50% no-repeat; background-size:15px;}
			.nav li a:hover {text-decoration:none;}				
			
				/* 2nd Level */	
				.nav ul {-webkit-box-shadow:none; box-shadow:none; padding:0.5em 0; background:#51a43b}		
				.nav li.hover li a { padding:0.6em 8%; font-size:125%; }
		}
		@media screen and (max-width:480px) {
			.clearHeader .toggleMenu {background:url("img/menu.png") center center no-repeat; background-size:30px;}
			.clearHeader .toggleMenu.active {background:url("img/close.png") center center no-repeat; background-size:30px;}
		}
		



/* Buttons & Links 
- - - - - - - - - - - - */
	
/* Link Transitions */
a, a:hover, .btn, .btn:hover {-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -ms-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease}

.btn, input[type=submit] {border:0; cursor:pointer; font-size:100%; outline:none; padding:0.6em 1.2em; margin:0.25em 0; display:inline-block; font-weight:bold; -webkit-border-radius:3px; border-radius:3px; background:#72c54d; color:white;}

	.btn:hover, input[type=submit]:hover {text-decoration:none; cursor:pointer; color:white; background:#8ce365; }
a.more {font-size:90%; font-weight:bold; text-decoration:none !important;}
	a.more:after {content:'\25BA'; padding-left:3px; font-size:50%; text-decoration:none !important;}	
	a.more:hover {color:#333;}
.btn.large, input[type="submit"] {margin:0.5em 0; font-size:150%; -webkit-box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.25); box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.25); text-shadow:1px 1px 1px rgba(0,0,0,0.25); }
	@media screen and (max-width:768px) {.btn.large {font-size:125%;}}






/* Images 
- - - - - - - - - - - - */
img {max-width:100%; max-height:100%;}	
	
	
	
	

/* Forms 
- - - - - - - - - - - - */
input, textarea {padding:0.5em; border:0; font-size:100%; font-family:Helvetica, Arial, sans-serif; display:block; width:90%; margin:0; border:1px solid #ccc; background:#fafafa; -webkit-border-radius:2px; border-radius:2px;}
input[type="submit"] {width:auto; margin:0; border:0; }
::-webkit-input-placeholder {color:#999}
:-moz-placeholder {color:#999}
::-moz-placeholder {color:#999}
:-ms-input-placeholder {color:#999}
span.req {display:inline-block;  color:red; font-size:80%; padding:0 0 0 10px;}
div.wpcf7-response-output {font-weight:bold; font-size:125%; line-height:140%; border:0 !important; padding:1em 0 !important; margin:0 !important; color:red;}
div.wpcf7-mail-sent-ok {font-size:150%; color:#72c54d; font-weight:bold;}
form.sent p {display:none;}





/* Main Content Area 
- - - - - - - - - - - - */
.main-content {clear:both; display:block; vertical-align:top; }
	@media screen and (min-width:1025px) {.main-content {padding:0 75px;}}
	@media screen and (min-width:769px) and (max-width:1024px) {.main-content {padding:0;}}

	.main-content ul {margin:0 1em 1em;}
		.main-content ul li {margin:0.25em 0;}
		.main-content ul li:before {content:'\25BA'; color:#72c54d; padding-right:10px; font-size:50%; text-decoration:none !important;}
		.half-column {display:inline-block; vertical-align:top; width:47.5%; margin-right:-5px; text-align:left;}
			.half-column:nth-of-type(odd) {padding-right:5%;}

	@media screen and (max-width:1024px) {
		.half-column, .half-column:nth-of-type(odd) {display:block; width:auto; margin-right:0px; padding:0;}
		.half-column p {margin:0 !important;}
	}
	
	

/* Home Page
- - - - - - - - - - - - */

/* services  */
.services {display:block; padding:1em 0; vertical-align:middle; text-align:center; clear:both; float:left; width:100%;}
	.services .service {width:29.3%; padding:1em 2%; margin-right:-5px; display:inline-block; vertical-align:top; text-align:left;}
		.services .service .icon {float:left;}
		.services .service .icon img {max-width:50px;}	
		.services .service h3, .services .service p {float:right; width:calc(100% - 65px); padding:0.25em 0;}	

	@media screen and (min-width:769px) and (max-width:1024px) {
		.services {padding:1em 0;}			
		.services .service {width:46%; padding:1em 2%;}
	}
	@media screen and (max-width:768px) {
		.services {padding:0;}			
		.services .service {width:100%; padding:1em 0;}
	}
	@media screen and (max-width:480px) {
		.services {padding:0 0 2em 0;}			
		.services .service {width:auto; padding:1.5em; display:block; clear:both;}
			.services .service p {padding:0 0 5px;}
	}

	
	
	
	
/* Internal Pages 
- - - - - - - - - - - - */
		
/* Banner Images */
.banner {clear:both; background:#444; min-width:100%; min-height:165px; display:block; position:relative; z-index:1; margin:0;}
	.banner img {margin-bottom:-3px; min-height:165px; width:auto; overflow-x:hidden;}

	@media screen and (max-width:768px) {.banner, .banner img {min-height:120px;}}
	
	
	/* Main Copy Area */
	.body-copy {text-align:center; padding:0 5% 3em;}
	

	/* People  */
	.person {display:inline-block; width:45%; padding:1em 2.5%; margin-right:-5px; vertical-align:top; text-align:left;}
	.person:nth-of-type(3n+3) {margin-right:0;}	
	details summary::-webkit-details-marker {display:none}
	summary {outline:none; cursor:pointer; color:#72c54d; font-weight: bold;}
	summary:before {content: "+"; color:#72c54d; margin-right:5px; display:inline-block; }
	details[open] summary:before {content:"-";}
	
	@media screen and (max-width:768px) {
		.person {display:inline-block; width:45%; padding:2em 2.5% 0; margin-right:-5px; vertical-align:top; text-align:left;}		
	}
	@media screen and (max-width:480px) {
		.person {display:block; width:auto; padding:1em 0; margin-right:0; text-align:center;}		
	}





/* Blog 
- - - - - - - - - - - - */
article {padding:3em 0; border-top:1px solid #ddd;}
article:first-of-type {border-top:0; padding-top:0;}
article:last-of-type {padding-bottom:0;}
article img {padding:1em 0;}
article small {display:block; padding:0.5em 0;}
article p, article h4 {margin:0 auto; max-width:800px; padding:0.75em 0;}





/* Call us 
- - - - - - - - - - - - */
.call-us {display:block; clear:both; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
	.call-us p {font-size:200%; padding:1em;}
	.call-us p strong {color:#333;}

	@media screen and (max-width:768px) {
		.call-us p {font-size:175%;}
	}






/* Accordion 
- - - - - - - - - - - - */
.ui-accordion {text-align:left; margin:2em 4em !important;}
.ui-accordion .ui-accordion-header {outline:none; display:block; font-size:175% !important; padding:0 !important; border-top:1px solid #ddd;}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {top:auto !important; vertical-align:middle; margin-right:25px; left:auto !important; position:relative !important; width:50px !important; height:50px !important; display:inline-block !important; }
.ui-accordion .ui-accordion-icons {padding:25px 0 15px !important;}
.ui-accordion .ui-accordion-header a {color:#333;}
.ui-accordion #ui-id-1 .ui-accordion-header-icon {background:url(http://jpcasa.co.za/wp-content/uploads/2015/09/money-bag.png) center center no-repeat;}
.ui-accordion #ui-id-3 .ui-accordion-header-icon {background:url(http://jpcasa.co.za/wp-content/uploads/2015/09/life-belt.png) center center no-repeat;}
.ui-accordion #ui-id-5 .ui-accordion-header-icon {background:url(http://jpcasa.co.za/wp-content/uploads/2015/09/sums.png) center center no-repeat;}
.ui-accordion #ui-id-7 .ui-accordion-header-icon {background:url(http://jpcasa.co.za/wp-content/uploads/2015/09/table.png) center center no-repeat;}
.ui-accordion #ui-id-9 .ui-accordion-header-icon {background:url(http://jpcasa.co.za/wp-content/uploads/2015/09/chart.png) center center no-repeat;}
.ui-accordion #ui-id-11 .ui-accordion-header-icon {background:url(http://jpcasa.co.za/wp-content/uploads/2015/09/rada.png) center center no-repeat;}
.ui-accordion .ui-accordion-content {padding:0px 75px !important;}
	#accordion h3 {font-size:115%;}

	@media screen and (max-width:768px) {
		.ui-accordion {margin:2em 0 !important;}
		.ui-accordion .ui-accordion-header {font-size:150% !important;}		
		.ui-accordion .ui-accordion-header .ui-accordion-header-icon {margin-right:10px; width:30px !important; height:30px !important; background-size:30px !important; }
		.ui-accordion .ui-accordion-content {padding:0px !important;}
	}
	
	
	


/* Footer 
- - - - - - - - - - - - */
footer {display:block; clear:both; text-align:left; padding:2em 75px;}
	footer ul li {padding:0; display:inline-block; margin-right:20px;}
	footer a {color:#333}	
	footer .social {float:right;}
		footer .social img {max-width:48px; margin:0 0 0 0.6em;}
	footer p {font-size:85%; color:#999}
	
	@media screen and (max-width:1024px) {
		footer {padding:2em 25px;}
	}
	
	@media screen and (max-width:768px) {
		footer {text-align:center;}
		footer .social {float:none; padding:0 0 1em;}
			footer .social img {max-width:48px; margin:0 0.3em;}
	}