/*
Theme Name: Divi Child
Theme URI: http://www.pawtec.com
Version: 1.0.0
Description: Child theme for Divi.  This theme is to only be used by Pawtec, Inc. for http://www.pawtec.com
Author: Cameron Bambaeerow
Author URI: TBD
Template: Divi
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Updated 9/16/2016 */


/*
 * General Styling Classes for Pages
 * General Color/Space Styling
 * Main Nav Bar Styling
 * Slider and Thumbnail Tests
 * Footer Styling
 * Product Showcase Pages
 * Store Page
 * Reviewer Page
 * Email Newsletter styling
 * Contact Form Styling
 * Facebook like fix
 * Flash Sale Styling
 */


/* SECTION: General Styling Classes for Pages */
/* ---------------------------------------------------------------- */
.fullwidthsection {
	width: 100%;
}


/* Makes text dark on pages with white backgrounds */
.darktext {
	color: #000000;	
}


/* hides element */
.hidethis {
	display: none;
}

/* Removes top and bottom padding (mostly for fullwidth sections) */
.removepadding {
	padding-top: 0px;
	padding-bottom: 0px;
}

/* Removes bottom margin padding */

.reducebottommargin {
	margin-bottom: -80px;

}


/* floats an element to the right */
.floatright {
	float: right;
}

/* Fix admin bar */
body.admin-bar #main-header {
	top: 28px;
} 

body.admin-bar #page-container {
	margin-top: 28px;
}



/* SECTION: General Color/Space Styling */
/* ---------------------------------------------------------------- */
#main-footer {
	background-color: #000000 !important;
}


/* Adds margin spacing for front page slider */

.front-page-slider {
	margin-top: 50px; /* for nivo slider */
	margin-bottom: 90px; 
}


/* Colors text black on search results page */
/* take out if conflicts */
.et_pb_post {
	color: #000000;
}


/* Slider transparent image fixes */
/* NEW, 6/1/2016 */
.sliderspacertransparency {
	width: 50%;
	height: 50%;
}


@media screen and (min-width: 1700px) and (max-width: 1999px){

	.sliderspacertransparency {
		width: 100%;
		height: 600px;
	}

}

@media screen and (min-width: 2000px) and (max-width: 2400px){

	.sliderspacertransparency {
		width: 100%;
		height: 700px;
	}

}


@media screen and (min-width: 2401px) and (max-width: 2799px){

	.sliderspacertransparency {
		width: 100%;
		height: 850px;
	}

}

@media screen and (min-width: 2800px){

	.sliderspacertransparency {
		width: 100%;
		height: 1000px;
	}

}

/* Added to fix the background positions on resizing */
/* NEW, 6/1/2016 */
.et_pb_slider .et_pb_slide {
	background-position: top center;
	/* background-size: 100% auto; CAMERON - removed to fix slider from weird resizing 7-13-2016 */
}

@media screen and (max-width: 490px){
	.et_pb_slider .et_pb_slide {
		background-position: top center;
		background-size: cover;
	}
}

/* Added for new slider module to be full width */
/* NEW, 9/2/2016 */
#meta-home-slider-container {padding: 0px;}
#meta-home-slider-container .et_pb_row {width: 100%; margin: 0px; padding: 0px;}
#meta-home-slider-container .et_pb_text {margin-bottom: 0px;}

/* Sets up nav to stay on screen without a background */
.theme-bar .nivo-controlNav {
	opacity: 1 !important;
	bottom: 0 !important;
	border-top: none !important;
	background: none !important;
}

/* Removes border on whole slider */
.theme-bar.slider-wrapper {
	border: none !important;
}

/* Resizes Next/Prev arrows and spaces them to the center */
.theme-bar .nivo-directionNav a {
	bottom: 50% !important;
	font-size: 40px !important;
}




/* SECTION: Main Nav Bar Styling */
/* ---------------------------------------------------------------- */

/* CHANGES: After having nav bar small and at top */
/* Changes line height of main header, and adds border below */
#main-header {
	line-height: 10px;
	border-bottom: 1px solid #4C4C4E;
	padding-top: 0px;
	min-height: 20px;
	position: fixed; /* makes bar stay at top */
	/* for browsers that can't do rgba */
	background-color: rgb(0,0,0); 
	background-color: rgba(0, 0, 0, .95) !important;
}

div#et-top-navigation {
    margin-top: 10px;
    margin-bottom: -10px;
}

/* Fixes position for mega menus */
#top-menu li.mega-menu > ul, .fullwidth-menu-nav li.mega-menu > ul {
	top: 49px;
}

/* Fixes position for normal nav menus */
.nav li ul {
	top: 30px;
}

#logo {
	margin-top: 15px;
	margin-bottom: -20px;
}

/* Search Form Stuff */
#et_top_search {
	margin-top: 10px;
	float: left;
	margin-left: 10px;
}

.et-search-form {
	top: 30px;
}
/* End Search Form Stuff */

/* END CHANGES */



/* Changes opacity and colors for background of nav menu dropdown and mega menu */
#main-header .nav li ul.sub-menu {
/*	opacity: .9; */
	border-color: #000000;
 	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(40, 40, 41);
	/* RGBa with 0.92 opacity (was .8) */
	background: rgba(40, 40, 41, 0.92);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99404041, endColorstr=#99404041);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99404041, endColorstr=#99404041)";
}

#main-header .nav li.mega-menu ul.sub-menu {
/*	opacity: .9 !important; */
	border-color: #000000;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(40, 40, 41);
	/* RGBa with 0.92 opacity (was .8) */
	background: rgba(40, 40, 41, 0.92);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99404041, endColorstr=#99404041);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99404041, endColorstr=#99404041)";

	
}

/* Makes header color of mega menu orange and large */
#top-menu li.mega-menu > ul > li > a:first-child, .fullwidth-menu-nav li.mega-menu > ul > li > a:first-child {
	font-size: 16px;
	color: #F15C22;
}

/* Centers header link for Learn More section */
.centermenutext {
	text-align: center;
}

/* Changes width of how much space mega menu links take */
#top-menu li.mega-menu li > a, .fullwidth-menu-nav li.mega-menu li > a {
	width: 275px !important;
	/* font-size: 18px !important; */
}

/* Adds spacing to second row of links in Mega Menu */
.spacetop {
	margin-top: 40px !important;
}

/* Added to space menu better */
.menuhidden {
	visibility: hidden;
}

/* Fixes the menubar showing white when resizing */
body.et_cover_background {
	background-color: #000000;
}


/* Removes arrow on dropdown items */
#top-menu .menu-item-has-children > a:first-child::after {
	content: none;
	display: none;
}


/* keeps cursor from changing on menu items that don't have links */
.keepcursor {
	cursor: default;
}


/* Work on the social icons */
div.social-icons {
	float: right;	
}

.et-social-icon a {
	font-size: 16px;
	padding-top: 15px;
}


/* Nav Padding */
/* Centers nav through padding */
div#et-top-navigation { /* was 150 */
	float: left;
	margin-left: 150px;
}

@media only screen and (max-width: 970px)
{
	div#et-top-navigation {		
		margin-right: 0px;
		margin-left: 0px;
		float: right;		
	}
}


/* Added to increase padding on top menu items */
.firstmenupadding { /* was 40 */
	margin-right: 40px !important;
}
.menupadding { /* was 30 */
	margin-right: 30px !important;
}

.lastmenupadding {
	margin-right: 0px !important;
}

/* makes main nav text larger */
.top-menu-styling {
	font-size: 20px !important;
}



/* Added for hover effect on learn more buttons */
.menuhover {
	
}

.menuhover img {
	margin-left: 75px;
	margin-top: -10px;
}

.bottomimage img {
	margin-bottom: -30px;
}


.menuhover img:hover {
/*	width: 100%;
	height: 100%;
*/
	border-radius: 100%;
	overflow: visible;
	position: relative;
	cursor: pointer;
	box-shadow: 
		inset 0 0 0 6px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);	
        /* padding-left:10px; comment this out to keep image from moving on hover */
        -o-transition: overflow, padding-left, border-radius, box-shadow 0.4s ease-in-out;
        -webkit-transition: overflow, padding-left, border-radius, box-shadow 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
}


/* respaces social icons */
.et-social-icons li {
	margin-left: 10px;
}


/* To fix weird spacing at that one resolution */
@media only screen and (max-width: 1100px) {
	li.mega-menu ul li {
		width: 255px !important;
	}

}

/* 980 is when mobile menu becomes active */
@media only screen and (max-width: 980px) {
	.menuhover img {		
		background-color: #222222;
		margin-left: 0px;
		margin-top: 0px;
	}
	
	.menuhover img:hover {		
		border-radius: 0%;
		overflow: hidden;
		margin-left: 0px;
		padding-left: 0px;
	}
	
	.menuhidden {
		display: none;
	}
	
	/* puts social icons in right place in mobile */
	div.social-icons {		
		clear: both;
		min-width:200px;
		float: right;
		padding-right: 8px;
	}
	
	.et-social-icons {
		float:right;
	}
	
	
	/* CHANGES done to respace parts in mobile menu */
	/* fixes line heights in menu */
	#main-header {
		line-height: 23px;
		position: relative; /* Makes bar not stay at top in mobile */
	}	
	
	/* fixes position of logo */
	#logo {
		margin-top: 20px;
	}
	
	/* fixes position of search */
	#et_top_search {
		margin-top: 17px;
		margin-right: 5px;
		float: right;
	}
	
	.et_search_form {
		right: 0px;
	}
}

/* END Main nav styling */




/* SECTION: Slider and Thumbnail Tests */
/* ---------------------------------------------------------------- */


/* Styling for slider test */
div.et_pb_section.fullwidthsection2 {
	padding: 0px;
}

.et-image-slider {
	border: 0px solid black !important;
}

.et_shortcodes_controller_nav {
	background: none !important;
	background-color: #000 !important;
	border: none !important;
	box-shadow: none !important;
}

.et_shortcodes_controls_arrows .et_sc_nav_prev, .et_shortcodes_controls_arrows .et_sc_nav_next {
	border: none !important;
	box-shadow: none !important;
}

.et_shortcodes_controls_arrows a {
	font-size: 0px !important;
}


.fullwidthsection2, div.et_pb_section.fullwidthsection2 div.et_pb_row {
	width: 100%;	
}




/* Styling used for the thumbnails */
/* They decided to use portfolio so we are using it instead of this css*/
div.et_pb_section.fullwidthsection div.et_pb_row {
	width: 95%;		
}

div.et_pb_section.fullwidthsection div.et_pb_row div.et_pb_column_1_3 {
	width: 30%;
	margin-left: 15px;
	margin-right: 15px;
}


div.et_pb_section.fullwidthsection div.et_pb_row div.et_pb_column_1_4 {
	width: 23%;
	margin-left: 10px;
	margin-right: 10px;
}



/* for 1/3, max width is 970 */
@media only screen and (max-width: 1080px) {
	div.et_pb_section.fullwidthsection div.et_pb_row div.et_pb_column_1_3, div.et_pb_section.fullwidthsection div.et_pb_row div.et_pb_column_1_4 {
		width: 100%;
		margin: 0 auto;	
	}

}


/* Centers fullwidth portfolio images */
/* Not needed since I changed Divi/js/custom.js to use 4 columns */
/* 
.et_pb_fullwidth_portfolio .et_pb_portfolio_items {
	padding-left:10%;	
}

@media only screen and (max-width: 1620px) {
	.et_pb_fullwidth_portfolio .et_pb_portfolio_items {
		padding-left:0;	
		
	}	
}
/*


/* Actual Slider css */
/* Controls background of button on slider */
a.et_pb_more_button {
	/* background-color: rgba(0,0,0,.3); */
}

/* Makes hover for background of button gray (light and dark theme */
a.et_pb_more_button:hover, .et_pb_bg_layout_light a.et_pb_more_button:hover {
	background-color: rgba(0,0,0,.2);
}

/* For adding box behind titles (use this later if needed) */
/* 8/11 0 using these for mobile readability */

/* dark text with light box */

.et_pb_slide_description h2, .slider-dark {
	background-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 5px 10px rgba(255, 255, 255, 0.4);
}


/* light text with dark box */

.et_pb_bg_layout_dark .et_pb_slide_description h2, .slider-light {
	background-color: rgba(0, 0, 0, 0.4) !important;
	box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.4);
}


.slider-dark, .slider-light {
	margin-top: 19px;
}


/* Makes slider title disappear in desktop and apppear in mobile */

.et_pb_slide_description h2, .et_pb_bg_layout_dark .et_pb_slide_description h2 {
	display: none;
}

.et_pb_slide_description h2.slider-desktop, .et_pb_bg_layout_dark .et_pb_slide_description h2.slider-desktop {
	display: inline !important;
}

@media only screen and (max-width: 490px) {
	/* dark text, light box */
	.et_pb_slide_description h2 {
		display: block !important;
/*		background-color: rgba(255, 255, 255, 0.3); */
/*		box-shadow: 0 0 5px 10px rgba(255, 255, 255, 0.3); */

	}
	
	/* light text, dark box */
	.et_pb_bg_layout_dark .et_pb_slide_description h2 {
		display: block !important;
/*		background-color: rgba(0, 0, 0, 0.2); */
/*		box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.2); */

	}
	
	.et_pb_slide_description h2.slider-desktop, .et_pb_bg_layout_dark .et_pb_slide_description h2.slider-desktop {
		display: none !important;		
	}
}











/* SECTION: Footer Styling */
/* ---------------------------------------------------------------- */
/* Used to space widgets in footer */
/* 4/10 edit: Using 4 columns now, so removing these /*
/*
.footer-widget {
	float: left;
	width: 333px;
	margin: 0 30px 30px 0;
	color: #fff;
}

/* Used to style footer subscribe widget */
.textwidget .et_pb_newsletter_description {
	float: left;
	padding: 0 10px;
	width: auto;
}
*/

/* Fixing things */
p.footer-text, p.footer-text a {
	color: #BBBDC0 !important;
}

p.footer-text a:hover {
	color: #FFF !important;	
	transition: color 0.2s ease-in-out 0s
}

.textwidget .et_pb_newsletter_form {
	float: left;
	padding-left: 10px;
	padding-right: 0;
	width: auto;
}


/* SECTION: Product Showcase Pages */
/* ---------------------------------------------------------------- */

/* Centers page title */
div.page-title-section {
	text-align: center;
}

div.page-title-container {
	margin-bottom: -85px;
}

/* For styling page titles which aren't populated automatically by the template */
h1.page-title {
	margin-bottom: 20px;
	color: #FFFFFF;
	font-size: 60px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Open Sans", Arial, sans-serif;
}

/* For showcase pages */
h1.showcase-page-title {
	margin-bottom: 20px;
	color: #FF661B;
	font-size: 60px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Open Sans", Arial, sans-serif;
}
	

/* Added for showcase section to have a full width image */
.showcase-fullwidth, .showcase-fullwidth div.et_pb_row {
	width: 100%;	
	text-align: center;
}

.showcase-fullwidth div.et_pb_row img {
	width: 100%;
	height: auto;
	margin: 0 auto;
}



/* Styles div with youtube */ 
div.youtube-video-container {
	margin-top: 0px;
	margin-bottom: -50px;
}


/* Reduces space between sections in showcases */
.showcase-section {
	margin-bottom: -80px;
	font-size: 16px;
}

.showcase-section-bottom {
	font-size: 16px;
}


/* Buy now button css on showcase pages */
.buynowbutton {
   position: fixed;
   right: 0;
   margin-right: 60px;
   z-index: 99999;
}

@media only screen and (max-width: 980px) {
	.buynowbutton {
	   margin-right: 5px;
	}
}



/* SECTION: Store Page */
/* ---------------------------------------------------------------- */

/* styling for Store page menu */
.store-menu-top {
	padding-top: 0px;
	padding-bottom: 0px;
}

.store-menu-top .et_pb_row {
 	padding-bottom: 0px;
 	margin-bottom: -40px;
 }

.store-menu-container {
	display: table;
	width: 95%;
	margin: 0 auto;	
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Open Sans", Arial, sans-serif;
	font-size: 18px;	
}

.store-menu-column {
	display: table-cell;
	width: 17%;	
	/* min-width: 200px !important;	*/
	margin-left: 5px;
	padding-left: 10px;
	padding-right: 10px;	
}

.store-menu-column a {
	color: #000000;
}

.store-menu-column a:hover {
	color: #FF661B;
}

@media only screen and (max-width: 960px) {	
	.store-menu-container {
		display: table;
	}
	
	.store-menu-column {
		display: table-cell;
		float: left;
		width: 40%;
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 610px) {	
	.store-menu-container {
		display: inline;
	}
	
	.store-menu-column {
		display: inline;
		float: left;
		width: 100%;
		padding-left: 20px;
	}
}

.store-product-text {
	text-align: center;
	color: #000;
}

.store-product-text a {
	color: #000;
}


/* SECTION: General Styling Classes for Pages */
/* ---------------------------------------------------------------- */

/* For the image that floats on right */
div.reviewer-image-container {
	width: 40%;
	float: right;
}

div.reviewer-image-container img {
	width: 100%;
	max-width: 381px;
}

@media only screen and (max-width: 770px) {
	div.reviewer-image-container {
		width: 100%;
		margin-bottom: 20px;
	}
	
	div.reviewer-image-container img {
		margin: 0 auto;
	}
}




/* SECTION: Email newsletter styling */
/* ---------------------------------------------------------------- */

/* Widget and popup styling are in bloom */


/* Remove last and first name requirement from footer signup */
/*
input#et_pb_signup_lastname {display: none;}
input#et_pb_signup_firstname {display: none;}


.et_pb_newsletter { 
	padding: 0px;
	margin-bottom: 0px; 
}
*/


/* SECTION: Contact Form Styling */
/* ---------------------------------------------------------------- */

/* Makes form input area wider */
.cf7-contact-form-wideinput {
	width: 70%;
}

input.wpcf7-submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #FFF;
}


/* SECTION: Facebook like fix */
/* ---------------------------------------------------------------- */

/* Fixes Facebook like in widget */
.fb-like span {
	overflow: visible !important;
	z-index: 100000000;
}


/* SECTION: Flash Sale Styling */
/* ---------------------------------------------------------------- */
/* styling taken from shopify docs (https://docs.shopify.com/manual/more/buy-button/add-embed-code) */

.flash-sale-section {
	margin-top: -80px;
	padding-top: 20px;
	padding-bottom: 0px;	
	background-color: #FFFFFF;
}

/* remove these if not using grid 
.my-product-grid {
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
  box-sizing: border-box;
  display: block;
}

.my-product-row {
  display: block;
  width: 100%;
  clear: both;
}

.my-product-embed {
    padding: 0 10px 20px 10px;
    margin: 0;
    width: 25%;
    box-sizing: border-box;
    display: block;
    float: left;
}


@media screen and (max-width: 900px) {
  .my-product-embed {
    width: 33%;
  }
}

@media screen and (max-width: 600px) {
  .my-product-embed {
    width: 100%;
  }
}
*/