/**
* All of the CSS for your public-facing functionality should be
* included in this file.
*/


/* Ask the Expert */

/*.ate-question{ border: 1px solid gray; padding: 0 30px; }
.ate-question h2{ border-bottom: 1px solid gray; margin: 0; padding: 15px 0; }
.ate-answer{ margin-top: 30px; padding: 30px; border: 1px solid gray; background-color: darkgrey; }*/




.single-pp-ate #main .ate-question{ border: 1px solid gray; background-color: #e6e6e6; padding: 5px 20px; }
.single-pp-ate #main .ate-question h2{ border-bottom: 1px solid gray; padding-bottom: 10px; }

.single-pp-ate #main .amazon-ad,
.single-pp-ate #main .ate-response{ border: 1px solid gray; padding: 5px 20px 20px; margin-top: 20px; }


/* category section styles */
.fusion-builder-row .category-section-wrapper { margin-bottom: 40px; }

#wrapper .post-content .category-section h2 {
	color: #ffffff !important;
	font-size: 36px;
}

.category-tabs {
	border: 1px solid #333333;
	display: flex; 
}

#main .category-tab {
	border-left: 1px solid #333333;
	color: #333333 !important;
	flex-grow: 1;
	font-size: 16px;
	padding: 10px;
	text-align: center;
}

#main .category-tab:first-child { border: none; }

#main .category-tab:hover {
	background-color: #f58018;
	color: #ffffff !important;
}

/* simple */
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;

	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d; 
	-ms-transform-style: preserve-3d;
}

/*
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: "FlipH";
}
*/


/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

/* END: Accommodating for IE */

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;

	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front img, .back img { max-height: 100%; }

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-moz-transform: rotateY(0deg);

	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-o-transform: rotateY(0deg);

	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	-ms-transform: rotateY(0deg);

	transition: 0.6s;
	transform-style: preserve-3d;
	transform: rotateY(0deg);

	position: absolute;
	top: 0;
	left: 0;
}

.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 2;
}

.back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}