/*
 Theme Name:   J&J Media Group
 Description:  Divi Child Theme | Custom
 Author:       J. Neufeld & J. Rusnack
 Author URI:   https://www.jjgroup.ca
 Template:     Divi
 Version:      121119
*/


/*-----IMPORTED STYLE SHEETS-----*/

@import url("/wp-content/themes/Divi/style.css");


/*---------------------------------------------------------------------------------------------------------*/	
/*-----FONT & UNIVERSALS-----------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/


/* C2A and Input buttons forced to use brand font */
a.et_pb_button, input.wpcf7-submit {font-family: INSERT, sans-serif;}

/* Apply this class in a span tag to utilize an ET Modules*/
.use-et-font {font-family: 'ETmodules';}

/* Mobile P and LI tag size of 16 - universal for SEO */
@media screen and (max-width: 480px) {p, .entry-content li, .three-column-insert {font-size: 16px !important;}}

/* PAGES - last paragraph and ol and ul fixes */
.entry-content ul {margin: 0px 0px 0px 15px; list-style-position: outside !important;}
.entry-content ol {margin: 0px 0px 0px 15px; list-style-position: outside !important; padding-left: 1em;}
.entry-content p:last-of-type {padding-bottom: 1em !important;}

/* POSTS - last paragraph and ol and ul fixes */
.et_pb_post .entry-content ul {margin: 0px 0px 0px 20px; list-style-position: outside !important; padding-bottom: 1em !important;}
.et_pb_post .entry-content ol {margin: 0px 0px 0px 15px; list-style-position: outside !important; padding-left: 1em !important; padding-bottom: 1em !important;}
.et_pb_post .entry-content p:last-of-type {padding-bottom: 1em !important;}



/*---------------------------------------------------------------------------------------------------------*/	
/*-----PRE PROGRAMMED RESPONSIVENESS-----------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/

/* TABLET RE-ARRANGE*/
@media screen and (min-width: 767px)
	{
		.split-page-left {float: left; width: 50%;}
		.split-page-right {float: right; width: 50%; }
		.three-column-insert {float: left; width: 29%; margin: 2%;}
		.one-fifth-page {float: left; width: 20%;}
		.four-column-insert {float: left; width: 19%; margin: 5px 3%;}
		.eight-column-insert {float: left; width: 10%; margin: 5px 1.25%;}
		.one-third-insert {float: left; width: 29%; margin: 2%;}
		.two-third-insert {float: left; width: 62%; margin: 2%;}
	}

@media screen and (max-width: 767px)
	{
		.split-page-left {float: left; width: 100%;  }
		.split-page-right {float: left; width: 100%; }
		.three-column-insert {width: 100%;}
		.four-column-insert {float: left; width: 80%; margin: 10px 10%;}
		.eight-column-insert {float: left; width: 40%; margin: 10px 5%; min-height: 194px;}
		.one-third-insert, .two-third-insert {float: left; width: 92%; margin: 10px 4%;}
	}

/* MOBILE HIDE & SHOW */
@media screen and (min-width: 480px) {.show-mobile {display: none;}}

@media screen and (max-width: 480px) {.hide-mobile {display: none;}}

	
/*---------------------------------------------------------------------------------------------------------*/	
/*-----LOGO------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/

/* Maximizing size of logo on mobile */
@media screen and (max-width: 1200px) {#logo {max-height: 90px !important; }}
@media screen and (max-width: 980px) {#logo {max-height: 90px !important; }}
@media screen and (max-width: 600px) {#logo {max-width: 79% !important;}}


/*---------------------------------------------------------------------------------------------------------*/	
/*-----HEADER----------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/





/*---------------------------------------------------------------------------------------------------------*/	
/*-----SIDEBAR---------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/


/* Recent entries as a page icon */
#sidebar .widget_recent_entries ul li:before {font-family: 'ETmodules'; content: '\6c  ' ;}

/* Categories as a folder icon */
#sidebar .widget_categories ul li:before {font-family: 'ETmodules'; content: '\6d  ' ;}

/* Spacing fix on Entry, Cat, and Comments Custom Icons */
#sidebar .widget_recent_entries ul li, #sidebar .widget_recent_comments ul li, #sidebar .widget_categories ul li, #sidebar .widget_archive ul li { list-style-position: inside; text-indent: -1.5em; padding-left: 1em; background: none !important;}
#sidebar .widget_recent_entries ul, #sidebar .widget_recent_comments ul, #sidebar .widget_categories ul, #sidebar .widget_archive ul {margin-left: 15px;}

/* Sidebar widget link colours */
#sidebar .et_pb_widget ul li a, #sidebar .et_pb_widget ul li, #sidebar .et_pb_widget {color: #222 !important;}
#sidebar .et_pb_widget ul li a:hover {color: #444 !important;}

/* Class names for custom footer ul li icons */
#sidebar .textwidget ul {margin-left: 15px;}
#sidebar .textwidget ul li {font-size: 13px !important; line-height: 1.3em !important; margin-bottom: 4px !important;}
#sidebar .textwidget li {list-style-position: inside; text-indent: -1.5em; padding-left: 1em;}
#sidebar .textwidget li.location:before {font-family: 'ETmodules'; content: '\e01d  '; border: none !important; top: 0px;}
#sidebar .textwidget li.phone:before {font-family: 'ETmodules'; content: '\e090  '; border: none !important; top: 0px;}
#sidebar .textwidget li.hours:before {font-family: 'ETmodules'; content: '\7d  '; border: none !important; top: 0px;}
#sidebar .textwidget li.fax:before {font-family: 'ETmodules'; content: '\e103  '; border: none !important; top: 0px;}
#sidebar .textwidget li.mail:before {font-family: 'ETmodules'; content: '\e010  '; border: none !important; top: 0px;}
#sidebar .textwidget li.person:before {font-family: 'ETmodules'; content: '\e08a  '; border: none !important; top: 0px;}



/*---------------------------------------------------------------------------------------------------------*/	
/*-----FOOTER----------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/


/* Modifying Superscript CSS in bottom footer */
#footer-bottom sup, sup { bottom: 0.6em; font-size: 0.7em;}


/* Font in Bottom Footer */
@media screen and (min-width: 1100px) {#main-footer #footer-bottom p, span.fn, span.fn a {font-size: 10px !important; line-height: 17px !important; color: #7f7f7f !important;}}
@media screen and (min-width: 480px) {#main-footer #footer-bottom p, span.fn, span.fn a {font-size: 8px; line-height: 11px; color: #7f7f7f !important;}}
@media screen and (max-width: 480px) {#main-footer #footer-bottom p, span.fn, span.fn a {font-size: 10px !important; color: #7f7f7f !important; line-height: 1.3em !important;}}
#main-footer #footer-bottom p, #main-footer #footer-bottom p span.fn {font-weight: lighter !important;}	

/* Bottom Footer Responsiveness */
@media screen and (max-width: 600px)
	{
		.custom-hide-footer {display: none;}
		.custom-show-footer {display: inline;}
	}

@media screen and (min-width: 600px)
	{
		.custom-hide-footer {display: inline;}
		.custom-show-footer {display: none;}
	}

/* Custom ul li Icons in Footer */
.entry-content ul.contact-info li {list-style: none !important; font-size: 18px !important; padding-bottom: 8px !important; padding-left: 20px;}
@media screen and (max-width: 480px) {.entry-content ul.contact-info li {font-size: 12px !important; padding-bottom: 1px !important;}}
.entry-content ul.contact-info li:before {font-family: 'ETmodules'; content: '\68'; border: none !important; position: absolute; left: 15px}

/* Class names for Icons in Footer */
.entry-content ul.contact-info li.location:before {font-family: 'ETmodules'; content: '\e01d  ';}
.entry-content ul.contact-info li.phone:before {font-family: 'ETmodules'; content: '\e090  ';}
.entry-content ul.contact-info li.hours:before {font-family: 'ETmodules'; content: '\7d  ';}
.entry-content ul.contact-info li.fax:before {font-family: 'ETmodules'; content: '\e103  ';}
.entry-content ul.contact-info li.mail:before {font-family: 'ETmodules'; content: '\e010  ';}
.entry-content ul.contact-info li.person:before {font-family: 'ETmodules'; content: '\e08a';}


/*---------------------------------------------------------------------------------------------------------*/	
/*-----NAVIGATION------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/

/*-----CUSTOM STYLING FOR MENU ITEMS-----*/

/* Changing padding on menu items */
#top-menu-nav li a {padding: 8px 8px !important; border-radius: 5px; margin-bottom: 30px;}
#top-menu li.current-menu-item>a, #top-menu li.current-menu-ancestor>a {color: #252525 !important;}
#top-menu li.current-menu-item a {color: #55bc00 !important;}
#top-menu li.current-menu-item ul.sub-menu li a {color: #252525 !important;}

/* Custom hover on generic menu items */
#top-menu-nav li a:hover, #top-menu li.mega-menu>ul>li>a:first-child:hover {background-color: rgba(1,1,1,0.11) !important; opacity: 1 !important; color: #353535 !important;}
#top-menu-nav li ul.sub-menu li a:hover {color: #353535 !important;}

/* Padding below the drop down items fix */
#top-menu-nav li li a {margin-bottom: 1px; font-size: 16px; padding: 4px 10px !important;}

/* Position of drop down box */
ul.sub-menu {top: 30px;}

/* Changing position of arrow next to drop-down items  */
#top-menu li.menu-item-has-children a:after {right: -8px !important; top: 5px !important;}

/* make icon next to dropdown menu item dissappear on hover */
#top-menu li.menu-item-has-children a:hover:after { content: ' ';}

/* size of menu items for small browser */
@media screen and (max-width: 1315px) {#top-menu-nav li a {font-size: 13px !important;} #top-menu-nav li {padding-right: 10px !important;}}
@media screen and (max-width: 1150px) {#top-menu-nav li a {font-size: 11px !important;} #top-menu-nav li {padding-right: 5px !important;}}

/*-----MOBILE FIXES-----*/

/* No background colour on li with children */
.et_mobile_menu .menu-item-has-children > a {background-color: rgba(0,0,0,0);}

/* Mobile button switch */
.mobile_nav.closed .mobile_menu_bar:before {font-size: 32px; content: "\61";}
.mobile_nav.opened .mobile_menu_bar:before {font-size: 32px; content: "\36";}

/* drop down menu item on mobile */
.et_mobile_menu .menu-item-has-children > a {font-weight: 600 !important;}
.et_mobile_menu li li a, .et_mobile_menu li a, .et_mobile_menu li.menu-item-has-children a {font-weight: 400 !important; padding: 2px; font-family: "Open Sans", Arial, sans-serif !important; font-size: 16px;}
.et_mobile_menu li.menu-item-has-children > a, .et_mobile_menu li.menu-item-home a {font-weight: 600 !important;}



/*---------------------------------------------------------------------------------------------------------*/	
/*-----UL LI Icon Customs----------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/


/* CHECKMARK ul li */
ul.checkmark-custom, ul.check-custom {list-style-image: url('/wp-content/uploads/2018/03/INSERT.png') !important;}

/* PLUS ul li */
ul.plus-custom {list-style-image: url('/wp-content/uploads/2018/03/INSERT.png') !important;}


/*---------------------------------------------------------------------------------------------------------*/	
/*-----CONTACT FORM 7 FIXES--------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/

/* Normal input width set*/
input.wpcf7-text, input.wpcf7-captchar, select.wpcf7-select {width: 89%;}
input.wpcf7-file {width: 80% !important;}

/* Text area width set*/
textarea.wpcf7-textarea {width: 89%; font-family: inherit; height: 52px;}

/* Color, size and position of P tags in the form */
.wpcf7-form p {color: #353535; font-size: 14px; padding-bottom: 19px;}

/* Contact form background */
.contact-form-background {background: #e4e4e4; border-radius: 0px; padding: 13px 7px 10px 15px; display: inline-block; width: 100%;}

/* h2 header in contact form */
h2.contact-form-header {text-align: center; background: #353535; color: white; padding: 10px; margin: 0px !important;}


/*-----INPUT CUSTOMS-----*/

input.wpcf7-email, input.wpcf7-text, textarea.wpcf7-textarea, input.wpcf7-number, input.wpcf7-date, select.wpcf7-select, input.wpcf7-captchar {color: #454545; font-size: 14px; padding: 8px 8px; background: rgba(255,255,255,0.9); border-radius: 0px 10px 10px 0px; border: 1px solid rgba(1,1,1,0.5)}

input.wpcf7-email:hover, input.wpcf7-text:hover, textarea.wpcf7-textarea:hover, input.wpcf7-number:hover, input.wpcf7-date:hover, select.wpcf7-select:hover, input.wpcf7-captchar:hover {background: rgba(255,255,255,0.85); -webkit-box-shadow: inset 0 0 25px 0 rgba(50,50,50,0.15); -moz-box-shadow: inset 0 0 25px 0 rgba(50,50,50,0.15); box-shadow: inset 0 0 25px 0 rgba(50,50,50,0.15);}

input.wpcf7-email:focus, input.wpcf7-text:focus, textarea.wpcf7-textarea:focus, input.wpcf7-number:focus, input.wpcf7-date:focus, select.wpcf7-select:focus, input.wpcf7-captchar:focus {background: rgba(255,255,255,0.75); border-radius: 0px; -webkit-box-shadow: inset 0 0 5px 0 rgba(50,50,50,0.45); -moz-box-shadow: inset 0 0 5px 0 rgba(50,50,50,0.45); box-shadow: inset 0 0 5px 0 rgba(50,50,50,0.45); border: 1px inset grey;}


/*-----BUTTON CUSTOMS-----*/

input.wpcf7-submit {text-transform: uppercase; font-size: 20px; padding: 8px; border-radius: 0px 12px 12px 0px; color: black;  background: #9bff24; border: 2px solid white !important; }

input.wpcf7-submit {-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

input.wpcf7-submit:hover {border-color: #383838; color: #fff; background: #adadad; cursor: pointer; text-shadow: none;}


/*-----OUTPUT-----*/

.wpcf7-response-output {text-align: center; color: white; background: grey; border: none !important; padding: 12px; margin: 0px !important;}
.wpcf7-response-output.wpcf7-display-none {display: none;}
.wpcf7-response-output.wpcf7-validation-errors, .wpcf7-response-output.wpcf7-mail-sent-ok {display: inline-block !important;}
.wpcf7-not-valid-tip, .wpcf7 .screen-reader-response {display: none !important;}





/*-------------------------------------------------------------------------------------------------------------*/	
/*-----BLOG FORMATTING-----------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/

/* Changes position of featured image on the PDP blog page */
.et_post_meta_wrapper img {width: 40%; float: right; margin: 0px 0px 20px 20px;}
@media screen and (max-width: 700px) {.et_post_meta_wrapper img {width: 100% !important; margin: 20px 0px !important}}

/* Padding fix at the top of the PDP blog pages */
.et_pb_post .entry-content {padding-top: 2px !important;}

/* Blockquote Customs */
blockquote {padding: 15px; background: #eaeaea !important;}
@media screen and (min-width: 980px) {blockquote {width: 75% !important;}}
blockquote p {padding-bottom: 1em;}
blockquote p:last-of-type {padding-bottom: 0px !important;}



