/* SMH: Begin mystyles.css */

.wpvl_auto_thumb_box {
    left: 12px;	/* This helps center the video window better */
}

/* Set the size of the title in the Tagline box used with the videos */
.video_tagline h2 {
	font-size: 14px !important;
}

/* Make the play button on the WP Video Lightbox much smaller */
.wpvl_playbutton {
	width: 20px;
	height: 20px;
}

.wpvl_auto_thumb_play {
  left:100px;
  position:absolute;
  top:70px;
}

/* Make the download link on the checkout/order-received page stand out */
.order_item .product-name small a {
font-size: 14px;
font-weight: bold;
}

/* Make the Proceed to checkout button wider */
.cart_totals .checkout-button {
min-width:200px;
}

/* Make the titles on the sidebar widgets stand out */
#sidebar .widget h3 {
  font-weight: bold !important;
}

/* Override the heading and description defaults for Avada Tagline boxes */
.fusion-reading-box-container .reading-box h2 {
    font-weight: bold !important;
}
.fusion-reading-box-container .reading-box-description {
    font-size: 18px !important;
}



/* WooCommerce style changes */
/* Add a little background color to description panel in product details */
.has-sidebar .woocommerce-tabs .panel { background-color: #f2f2f2; !important;}

/* Required with Avada 3.6 to make sure HTML audio player doesn't hang below Product Description box - see Best Of Chris Spheeris */
.has-sidebar .woocommerce-tabs .panel {
    overflow: hidden;
    margin-left: 5px;	
}


/* Remove the top border on the menu items - only shows during hover */
/* Code found in Avada forum http://theme-fusion.com/forums/topic/remove-the-highlight-border-of-selected-menu-item/#post-100848 */
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a {
border: none !important;
padding-top: 3px !important;
}


/* To use with the "tagline" shortcode */
.largequote { 
	font-size: 30px !important;
	line-height: 34px !important;
	color: #242424;
	text-align: center; 
	}

/* This code makes the tagline smaller on smaller screens */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.largequote	{	line-height:28px !important; font-size:24px !important;	}
}

@media only screen and (min-width: 0px) and (max-width: 479px) {
	.largequote	{	 line-height:20px !important; font-size:16px !important; }
}	

/* Change the top and bottom padding on the tagline box */
.reading-box {
	padding:20px 28px 20px 31px;
}


/* Changes the size of the testimonal font */
.review blockquote q {
	font-size: 16px !important;
	}
	
		


/* Button definitions */
/* Use this shortcode to make a Read More... link: */
/* [button color="blue" size="readmore" link="/writing"]Read More... [/button] */
.button.readmore  {
	font-family: 'PTSansRegular', arial, helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	display: inline !important;
}

.button.readmore:hover {
	text-decoration:underline;
}

.button.readmore.blue  {
	color:#1682E0 !important;	
	border: none;
	background-image: none;
}

.button.readmore.blue:hover {
	color:#1682E0 !important;
	border: none;
	background-image: none;	
}

/* These are necessary so you don't get a blue background on "Read more" in IE */
.no-cssgradients .button.readmore.blue {
	background-color: transparent;
}
.no-cssgradients .button.readmore.blue :hover{
	background-color: transparent;
}		


/* Use this shortcode if you want an actual button */	
/* [button color="darkblue" size="small" link="/photography"]Read More... [/button] */
.button.darkblue{
	color:#ffffff !important;
	background-image: linear-gradient(top, #598fcb 0%, #0663c9 100%);
	background-image: -o-linear-gradient(top, #598fcb 0%, #0663c9 100%);
	background-image: -moz-linear-gradient(top, #598fcb 0%, #0663c9 100%);
	background-image: -webkit-linear-gradient(top, #598fcb 0%, #0663c9 100%);
	background-image: -ms-linear-gradient(top, #598fcb 0%, #0663c9 100%);

	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #598fcb),
		color-stop(1, #0663c9)
	);
	border:1px solid #1172c1;
	text-shadow: 0 1px 0 #000 !important;
	text-transform: none !important;		
}
.button.darkblue:hover{
	color:#ffffff !important;
	background-image: linear-gradient(top, #0663c9 0%, #598fcb 100%);
	background-image: -o-linear-gradient(top, #0663c9 0%, #598fcb 100%);
	background-image: -moz-linear-gradient(top, #0663c9 0%, #598fcb 100%);
	background-image: -webkit-linear-gradient(top, #0663c9 0%, #598fcb 100%);
	background-image: -ms-linear-gradient(top, #0663c9 0%, #598fcb 100%);

	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #0663c9),
		color-stop(1, #598fcb)
	);
	border:1px solid #1172c1;
	text-shadow: 0 1px 0 #000 !important;	
	text-transform: none !important;	
}
.no-cssgradients .button.darkblue{
	background-color:#598fcb;
}
.no-cssgradients .button.darkblue:hover{
	background-color:#0663c9;
}

/* Use this to make embedded YouTube videos responsive */
/* To use: Surround the YouTube embed code with <div class="video-container">...</div> */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* SMH: End mystyles.css */