/*
Theme Name:     Canvas Child
Theme URI:      http: //example.com/
Description:    Child theme for the Canvas theme 
Author:         Kincade Pavich - Concept Design Studios
Author URI:     http: //conceptdesignstudios.com
Template:       canvas
Version:        0.1.0
*/

@import url("../canvas/style.css");

/***************************************
STYLE DEFAULTS: NAVIGATION, HEADER, ETC.
***************************************/

#wrapper {padding:0}
#inner-wrapper {padding:0}
.nav-toggle {margin:0}
#header {background-size:cover}
#logo {width:450px;margin:0 auto;float:none;max-width:80%}
#footer {padding:1em 2em}
#footer img.cds {width:40px}
.entry img, img.thumbnail, #portfolio .group.portfolio-img img {border:0px solid #ffffff}
.push { clear:both;}
.tl {text-align: left;}
.tc {text-align: center;}
.tr {text-align: right;}
.uc {text-transform: uppercase;}
.third {width:29.33%;float:left;box-sizing:border-box;display:block;margin: 3% 2%;}
.fourth {width:21%;float:left;box-sizing:border-box;display:block;margin: 3% 2% 3%;}
.half{width:46%;float:left;box-sizing:border-box;display:block;margin:3% 2%;}
.entry img {background: transparent;}
.center {margin:0 auto; display:block;float: none;}
a:hover { text-decoration: none;}
#boundingBox {overflow:hidden; }
@media screen and (max-width: 767px) {
	.half {width:90%;float:none;margin: 5% auto; }
	.third {width:70%;float:none;margin: 5% auto;}
	.fourth {width:70%;float:none;margin: 7% auto !important; }
	.show-nav #inner-wrapper { left: 0 !important; }
	#navigation .nav-home, #navigation .nav-close, #navigation ul.rss li a, #navigation ul.cart a.cart-contents, #navigation ul.nav-search a.search-contents { 
		pointer-events: none !important; top: 200px !important; right: 6px !important;
		background: #fff !important; color: #000 !important; display: none !important; }
	#navigation { 
		left: -100% !important; display: block !important; transform: none !important;
		background: transparent !important; position: fixed !important; transition: 0.25s ease-in-out !important; overflow: auto !important; z-index: 5 !important; width: 100%; !important; 
	}
	.show-nav #navigation { left: 0 !important; }
	.show-nav .nav-toggle:before { content: "\2573" !important; }
	#navigation .menus h3 { display: none !important; }
	#navigation #main-nav { 
		background: rgba(255, 255, 255, 0.95) !important; padding: 10px 0 !important; margin: -15px 0 0 !important; 
		border-bottom: 1px solid #000 !important; position: absolute !important; overflow: auto !important; 
		box-sizing: border-box !important; 
	}
	.nav-toggle {
		position: fixed !important; width: 100%; z-index: 999; padding: 5px 0 !important;
	}
	#main-nav li a {
		text-transform: uppercase !important; background: transparent !important; border-bottom: 1px solid #d3d3d3 !important;
		margin: 0 20px !important; padding: 15px 10px !important; font-family: 'Dosis', sans-serif !important; letter-spacing: 1px;
	}
	#main-nav li.current_page_item a, #main-nav li.current-cat a, #main-nav li.current-menu-item a { color: #000 !important; font-weight: bold !important; }
	ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a { color: #666 !important; }
	#main-nav .current-menu-item .sub-menu li a { color: #666 !important; font-weight: normal !important; }
	#main-nav li:last-child a { border-bottom: none !important; }
	#main-nav li .sub-menu li:last-child a { border-bottom: 1px solid #d3d3d3 !important; }
	#main-nav li:last-child .sub-menu li:last-child a { border-bottom: none !important; }
	#main-nav li:last-child .sub-menu li a { border-top: 1px solid #d3d3d3 !important; }
	#main-nav li a:hover { text-decoration: none !important; font-weight: bold !important; }
	.menu-item-has-children { position: relative; }
	#main-nav li .toggle { position: absolute; top: 0; right: 0; padding-right: 30px !important; border-bottom: none !important; border-top: none !important; width: 30px; cursor: pointer; text-align: right; }
}
@media screen and (max-width: 475px) {
	.third, .fourth {width:90%;float:none;margin: 8% auto}
}

@media screen and (min-width:768px) {
     #main {padding:0;max-width:1280px;margin:0 auto}
     #navigation {width:100%}
    #navigation ul#main-nav, #top-nav {display: -webkit-box;display: flex;flex-direction: row;margin: 0;
        padding: 0;float:none;max-width:960px;margin:0 auto}
    ul.nav li {list-style: none;flex-grow: 1;text-align: center;float:left;-webkit-box-flex:1}
    .toggle { display: none !important; }
	.sub-menu { height: auto; }
	#navigation ul.nav > li a:hover {background:transparent}
	#navigation ul.nav > li:hover {background:transparent}
}

/***************************
GENERAL
***************************/
.pink { color: #ea80ae; font-weight: bold; }
h3.nav-toggle { font-size: 1em !important; }
.title { text-align: center; font-family: 'Dosis', sans-serif !important; color: #9c1b43 !important; padding: 0 20px; box-sizing: border-box; }
a:link, a:visited { color: #ea80ae; transition: all 0.25s ease-in-out; text-decoration: none !important; }
a:hover { color: #9c1b43; }
#content { padding-left: 0 !important; padding-right: 0 !important; }
.outerContainer { overflow: auto; display: block; width: 100%; }
.innerContainer { max-width: 1280px; overflow: auto; display: block; margin: 0 auto; }
.button { border-radius: 0 !important; background: #9c1b43 !important; color: #fff !important; transition: all 0.25s ease-in-out; font-size: 16pt !important; border: solid 2px #9c1b43 !important; display: block !important; margin: 10px auto; }
.button:hover { background: #fff !important; color: #9c1b43 !important; }
h1, h2, h3, h4, h5, h6 { color: #9c1b43 !important; font-weight: normal !important; }
h2 { color: #9c1b43 !important; padding-bottom: 15px; }
@media screen and (min-width: 768px) {
	h1 { font-size: 26pt !important; }
	h2 { font-size: 24pt !important; }
	h3 { font-size: 22pt !important; }
	h4 { font-size: 20pt !important; }
	p, .std, ul { font-size: 16pt !important; line-height: 1.4 !important; }
	#content { padding-top: 40px; padding-bottom: 0; }
}
@media screen and (max-width: 767px) {
	h1 { font-size: 22pt !important; }
	h2 { font-size: 21pt !important; }
	h3 { font-size: 20pt !important; }
	h4 { font-size: 19pt !important; }
	p, .std, ul { font-size: 13pt !important; line-height: 1.4 !important; }
	#content { padding-bottom: 0; }
}
.entry { max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
#contactButton { position: relative; padding: 0 20px; box-sizing: border-box; }
#contactButton .button { max-width: 350px; position: relative; z-index: 2; background: #fff !important; color: #9c1b43 !important; }
#contactButton .button:hover { color: #fff !important; background: #9c1b43 !important; }
#contactButton hr { background: #9c1b43; position: absolute; bottom: 20%; height: 3px; z-index: 1; width: calc(100% - 40px); left: 20px; right: 20px; } 
#phone { text-align: right; font-size: 18pt; color: #fff !important; padding: 20px; box-sizing: border-box; width: 100%; float: right; background-image: url("../../uploads/2018/02/footer.jpg"); background-color: #ea80ae; background-size: cover; margin-bottom: 40px; margin-top: -100px; padding-top: 120px; z-index: 5; position: relative; }
.home #phone { background: none; }
@media screen and (max-width: 1200px) {
	#phone { margin-top: -130px; padding-top: 150px; }
}

/***************************
HEADER AND NAVIGATION
***************************/
#header-container { background: rgba(156, 27, 67, 0.8) !important; position: relative; z-index: 6; border-bottom: 2px solid #fff; }
@media screen and (min-width: 768px) {
	#logo { float: left; max-width: 250px; padding: 0 20px; box-sizing: border-box; }
	#nav-container { max-width: 900px; float: right; margin: 10px auto 0 !important; }
	#nav-container, #navigation, #menus { background: transparent !important; }
	#navigation li a { text-transform: uppercase; color: #fff !important; transition: all 0.25s ease-in-out; background: transparent !important; }
	#navigation li a:hover { color: #ea80ae !important; }
	#navigation .current-menu-item a { color: #ea80ae !important; font-weight: bold; }
	#header { max-width: 1600px !important; margin: 0 auto; display: block; padding: 0 !important; }
}
@media screen and (max-width: 1200px) {
	#logo, #nav-container { float: none; margin: 0 auto; display: block; width: 100%; box-sizing: border-box; }
	#logo { padding-top: 10px; }
	ul.nav li a { padding: .5em 1px; }
}
@media screen and (max-width: 767px) {
	#header { padding: 50px 0 20px !important; }
	#logo img { display: block; margin: 0 auto; }
}

/***************************
SUBMENU DETAILS
***************************/
@media screen and (min-width: 768px) {
	#main-nav li.menu-item { padding-bottom: 10px; }
	#navigation .current-menu-item a, #navigation .current-menu-parent a { color: #ea80ae !important; font-weight: bold !important; }
	#navigation .current-menu-parent ul li a { color: #fff !important; font-weight: normal !important}
	#navigation .current-menu-parent ul li.current-menu-item a { font-weight: bold !important; color: #ea80ae !important; }
	.page-id-8 #navigation .current-menu-item.menu-item-has-children ul li a { font-weight: normal !important; color: #fff !important; }
	#navigation .current-menu-item.menu-item-has-children ul li a:hover { color: #ea80ae !important; }
	.sub-menu {
		background: #9c1b43	!important; 
		border: solid 2px #fff !important;
		border-top: none !important;
		margin-left: -1px !important;
		display: block !important;
		visibility: hidden !important;
		position: absolute;
		left: -30px !important;
		left: initial !important;
		z-index: -1 !important;
		transition: opacity 0.25s ease-in-out;
		opacity: 0 !important;
		max-width: 200px;
		top: 54px !important;
	}
	.sub-menu li a { margin: 0 !important; font-size: 10pt !important; text-decoration: none !important; }
	#main-nav .menu-item-has-children:hover ul {
		opacity: 1.0 !important;
		visibility: visible !important;
	}
}

/***************************
FOOTER
***************************/
#copyright p { color: #fff !important; font-size: 13pt !important; }
#footer-container { background: #9c1b43; }
#footer { max-width: 1600px !important; margin: 0 auto; display: block; }
#credit, #copyright { padding: 0; box-sizing: border-box; }
#credit p, #copyright p { margin: 0; }
#copyright { float: left; margin-top: 15px;}
#credit { float: right; }
#footer-widgets-container { background-image: url("../../uploads/2018/02/footer.jpg"); background-color: #ea80ae; background-size: cover; margin-top: 100px; }
#footer-widgets-container .std { color: #fff; }
#footer-widgets-container .widget { margin: 0 0 15px 0; }
#electrology { margin-top: -100px; max-width: 150px; padding-bottom: 10px; }
@media screen and (max-width: 560px) {
	#credit, #copyright {
		float: none !important; margin: 0 auto;
		display: block; width: 100%; text-align: center;
	}
}

/***************************
HOME
***************************/
.home #content { background: #fff;}
.home .title { display: none; }
#ptLogo { margin: 30px auto 20px; max-width: 300px; padding: 0 10px; box-sizing: border-box; }
#homeHero { background-size: cover; background-position: center center; max-width: 900px; width: 80%; padding: 50px 20px; margin: 0 auto -100px; overflow: hidden; background-image: url("../../uploads/2018/02/platinum-homepage.jpg"); }
.home .parallax-window { border-bottom: 100px solid #fff; }
#homeHero .half { float: right; }
#ptHomeInfo { display: flex; align-items: center; }
#ptHomeInfo img.half { width: 50%; margin: 0 auto; max-height: 400px; object-fit: cover; }
#homeTestimonials .third img { max-width: 70px; padding-bottom: 15px; }
#homeTestimonials p { color: #9c1b43 !important; }
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.home #header-container { background: #9c1b43 !important; }
}
@media screen and (min-width: 768px) {
	#homeHero { max-height: 400px !important; }
	.home #content { padding-bottom: 40px; }
}
@media screen and (max-width: 767px) {
	.home #header { padding: 50px 0 0 !important; }
	.home #logo { display: none; }
	#homeHero .half { float: none; background: rgba(255, 255, 255, 0.8); padding: 20px; box-sizing: border-box; width: 95%; }
	#homeHero { width: 100%; box-sizing: border-box; }
	#ptHomeInfo { display: block !important; }
	#ptHomeInfo img.half { width: 60%; margin: 0 auto 40px; max-height: 300px; }
}
.home #phone { margin-bottom: 0; }
#homeCategories img { height: auto; width: 100%; transition: all 0.25s ease-in-out; }
#homeCategories .third { position: relative; border: 2px solid #9c1b43; background: #9c1b43; }
#homeCategories .third h4 { font-weight: normal !important; text-align: center; text-transform: uppercase; width: 100%; padding: 20px 10px; box-sizing: border-box; background: #fff; transition: all 0.25s ease-in-out; }
#homeCategories .third:hover h4 { background: #9c1b43; color: #fff !important; }
#homeCategories .third:hover img { opacity: 0.5; }

/***************************
FAQ
***************************/
.page-id-16 h3 { cursor: pointer; transition: all 0.25s ease-in-out; }
.page-id-16 h3:hover { color: #ea80ae !important; }
.page-id-16 .answer { visibility: hidden; height: 0; }
.page-id-16 .button { max-width: 120px; margin-bottom: 20px; }
.page-id-16 hr { background: #ea80ae; margin: 40px 0; }
.page-id-16 .entry h3::after {
	content: '▼';
	font-size: 12pt;
	padding-left: 10px;
	padding-top: 1px;
	position: absolute;
}

/***************************
TESTIMONIALS
***************************/
.testimonial { max-width: 800px; background: #9c1b43; color: #fff !important; padding: 20px; box-sizing: border-box; margin: 40px auto 0; text-align: center; }

/****************************
	CONTACT
****************************/
.page-id-18 #main { max-width: 900px !important; }
.page-id-18 #input_1_3 { font-size: 14pt; }
#gform_confirmation_message_1 { text-align: center; }
.page-id-18 #content input.button { transition: all 0.25s ease-in-out; margin: 0 auto; }
.page-id-18 .gform_body input, .page-id-18 .gform_body textarea, .page-id-18 .gform_body select { border: solid 2px #222; border-radius: 0; }
.page-id-18 .gfield_label { color: #696969; }
.page-id-18 #gform_wrapper_2 {
	padding: 10px 20px 20px;
	box-sizing: border-box;
}
.page-id-18 ul li label { font-size: 14pt !important; }
.gform_wrapper.gf_browser_chrome .gform_body { width: 100% !important; }
@media screen and (max-width: 767px) {
	.page-id-18 #content input.button { margin: 0 auto; display: block; }
	.page-id-18 iframe { height: 275px; }
}
.page-id-18 iframe { border: 2px solid #222 !important; box-sizing: border-box; }

/****************************
	POSTS
****************************/
#comments, #respond, .post-meta, .post-entries { display: none; }
.single .innerContainer { padding: 20px; box-sizing: border-box; max-width: 960px; }
.single .innerContainer img.center { margin-bottom: 20px; }
.single .innerContainer h3 { margin-bottom: 0.5em; }
.single h1 { width: 100%; display: inline-block; padding: 0 20px; box-sizing: border-box; }

/****************************
	TREATMENT AREAS PAGE
****************************/
th { background: #9c1b43 !important; color: #fff; text-align: center !important; }
table, table * { border-color: #222 !important; border-style: solid !important; }
table { width: 100%; border-collapse: collapse; }
tr:nth-of-type(odd) { background: #eee; }
th { background: #333; color: white; font-weight: bold; }
td, th { padding: 6px; text-align: left; }
@media screen and (max-width: 550px) {
	table, thead, tbody, th, td, tr { display: block; }
	thead tr { position: absolute; top: -9999px; left: -9999px;	}
	td { 
		position: relative;
		padding-left: 70% !important; 
		border-right: none !important;
	}
	td:before { 
		position: absolute;
		top: 12px;
		left: 6px;
		width: 70%; 
		padding-right: 10px; 
		font-weight: bold;
	}
	td:nth-of-type(1):before { content: "Region"; }
	td:nth-of-type(2):before { content: "Duration of Treatment"; }
	td:nth-of-type(3):before { content: "Time for First Clean Up"; }
	td:nth-of-type(4):before { content: "Time for Full Process"; }
	.entry table tbody tr:last-child td { border-bottom: 1px solid #222 !important; }
	.entry table tbody tr:last-child td:last-child { border-bottom: 0 !important; }
}