/*
Theme Name: TheWandCompany
Description: The Wand Company's website theme (which is a child of the Vellum theme)
Author: Richard Blakesley
Template: parallelus-vellum
****************************************************************************************************************
*** Update the version number below to force users' browsers to re-load this CSS file (and style-skin-1.css) ***
*** rather than using a cached copy, which could cause issues with the site appearance and/or layout         ***
****************************************************************************************************************
Version: 3.23
Tags:
*/

/* Commenting out the next line, as it's now being loaded by our functions.php file:
@import url("../parallelus-vellum/style.css"); 
*/

.display-play-control { background-repeat: repeat-x }
/* Background images should be aligned with the bottom of the div, to help with footer images */
.bg-layer-2 {background-position: center bottom !important;}

/* Form input fields with the "uppercase" class should show as uppercase */
.uppercase input {text-transform: uppercase}

.drop-shadow {-webkit-box-shadow: 7px 7px 20px 2px rgba(68,68,68,0.6); -moz-box-shadow: 7px 7px 20px 2px rgba(68,68,68,0.6); box-shadow: 7px 7px 20px 2px rgba(68,68,68,0.6);}

.box{ position: relative; width: 50%;}
.box:before{content: ""; display: block; padding-top: 80%;}

.align-right {text-align:right;}
.align-justify {text-align: justify;}

/* Paragraphs with 20px line height and 20px bottom margin */
p.p1 {margin-bottom: 20px; line-height:20px;}

#masthead .site-title { width: auto }
@media (max-width: 959px) {
	/* design overrides to only enforce on small screens */
	#masthead .site-title a.logo-image img {width: auto !important;max-height: 100%;padding-top: 6px;}
}
.masthead-container {margin-top: 0px;  margin-bottom: 0px;}
.full-width .masthead-container { padding: 0px; }
/* Old grey gradient until 2020-11-26:  #masthead { background: linear-gradient(#FEFEFE, #CED0D2); } */
#masthead { background: #FFFFFF; } 
#masthead .site-title { float: left; display: block; min-height: 50px; line-height:1.1; }
/* docked
.dockedNav #masthead .site-title a.logo-image img { max-height: 50px !important; width: 206px !important; }
.dockedNav.boxed #masthead .site-title .logo, .dockedNav.full-width #masthead .site-title .logo { top: -1px; }
*/
#MainNav .ubermenu-responsive-toggle {padding: 5px 5% 0 0; color: #D0D0D0;}
.ubermenu .ubermenu-submenu-drop.ubermenu-submenu-align-full_width, .ubermenu .ubermenu-submenu-drop.ubermenu-submenu-align-left_edge_bar{
	left: auto!important;
	right: 0!important;
}
.ubermenu .ubermenu-submenu-drop.ubermenu-submenu-align-full_width { width: auto!important; }

#Middle .grid-section-1 .grid-row { padding-top: 48px; }    /* Padding at top of content section */

.no-overflow-100px {height:100px; overflow:hidden}
.no-overflow-200px {height:200px; overflow:hidden}

#FooterBottom { background: linear-gradient(#FEFEFE, #CED0D2); }
*[class*='grid-section-']:last-child .grid-row { padding-bottom: 0px; } /* bottom padding */

.woocommerce #content div.product div.thumbnails a, .woocommerce div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a {width: 22%; margin-right: 3.8%;}

body.woocommerce .page-title {margin-bottom: 20px;}

/** Styles for mouse rollover crossfade effects **/
.crossfade {position:relative;}
.crossfade .regular, .crossfade .rollover {-webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in;}
.crossfade .regular {position:static;}
.crossfade .rollover {position:absolute; top:0; left:0;}
.crossfade .rollover, .crossfade .regular:hover {opacity:0;}
.crossfade .regular, .crossfade .rollover:hover {opacity:1;}

.center {text-align: center;}

.buttonwidth {width: 130px;}