/* General CSS */@media only screen and (min-width: 960px){ .content-area, .content-left-sidebar .content-area{width:100%;} }.page-header, .has-transparent-header .page-header{padding:10px 0px 10px 0px}.page-header .page-header-title, .page-header.background-image-page-header .page-header-title{color:#020000;}.site-breadcrumbs, .background-image-page-header .site-breadcrumbs{color:#ffffff;}.theme-button,input[type="submit"],button[type="submit"],button,.button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button{border-radius:5px;}/* Top Bar CSS */#top-bar{padding:0px}#top-bar-wrap,.oceanwp-top-bar-sticky{background-color:rgba(255,255,255,0.72);}#top-bar-content a:hover,#top-bar-social-alt a:hover{color:#000000;}/* Header CSS */#site-logo #site-logo-inner,.oceanwp-social-menu .social-menu-inner,#site-header.full_screen-header .menu-bar-inner,.after-header-content .after-header-content-inner{height:65px;}#site-navigation-wrap .dropdown-menu > li > a,.oceanwp-mobile-menu-icon a,.after-header-content-inner > a{line-height:65px;}#site-header{border-color:rgba(122,122,122,0.25);}#site-header-inner{padding:5px 0px 5px 0px}#site-header.transparent-header{background-color:rgba(255,255,255,0.7);}#site-header.has-header-media .overlay-header-media{background-color:rgba(0,0,0,0);}#site-logo #site-logo-inner a img, #site-header.center-header #site-navigation-wrap .middle-site-logo a img{max-width:165px;}#site-header #site-logo #site-logo-inner a img, #site-header.center-header #site-navigation-wrap .middle-site-logo a img{max-height:60px;}.effect-one #site-navigation-wrap .dropdown-menu > li > a.menu-link > span:after, .effect-three #site-navigation-wrap .dropdown-menu > li > a.menu-link > span:after, .effect-five #site-navigation-wrap .dropdown-menu > li > a.menu-link > span:before, .effect-five #site-navigation-wrap .dropdown-menu > li > a.menu-link > span:after, .effect-nine #site-navigation-wrap .dropdown-menu > li > a.menu-link > span:before, .effect-nine #site-navigation-wrap .dropdown-menu > li > a.menu-link > span:after{background-color: #000000;}.effect-four #site-navigation-wrap .dropdown-menu > li > a.menu-link > span:before, .effect-four #site-navigation-wrap .dropdown-menu > li > a.menu-link > span:after, .effect-seven #site-navigation-wrap .dropdown-menu > li > a.menu-link:hover > span:after, .effect-seven #site-navigation-wrap .dropdown-menu > li.sfHover > a.menu-link > span:after{color: #000000;}.effect-seven #site-navigation-wrap .dropdown-menu > li > a.menu-link:hover > span:after, .effect-seven #site-navigation-wrap .dropdown-menu > li.sfHover > a.menu-link > span:after{text-shadow: 10px 0 #000000, -10px 0 #000000;}#site-navigation-wrap .dropdown-menu > li > a,.oceanwp-mobile-menu-icon a,#searchform-header-replace-close{color:#666666;}#site-navigation-wrap .dropdown-menu > li > a:hover,.oceanwp-mobile-menu-icon a:hover,#searchform-header-replace-close:hover{color:#000000;}#site-navigation-wrap .dropdown-menu > .current-menu-item > a,#site-navigation-wrap .dropdown-menu > .current-menu-ancestor > a,#site-navigation-wrap .dropdown-menu > .current-menu-item > a:hover,#site-navigation-wrap .dropdown-menu > .current-menu-ancestor > a:hover{color:#666666;}.dropdown-menu .sub-menu{min-width:100px;}.dropdown-menu .sub-menu,#searchform-dropdown,.current-shop-items-dropdown{background-color:rgba(255,255,255,0.95);}.dropdown-menu .sub-menu,#searchform-dropdown,.current-shop-items-dropdown{border-color:#666666;}.dropdown-menu ul li.menu-item,.navigation > ul > li > ul.megamenu.sub-menu > li,.navigation .megamenu li ul.sub-menu{border-color:#666666;}.dropdown-menu ul li a.menu-link{color:#666666;}.dropdown-menu ul li a.menu-link:hover{background-color:rgba(102,102,102,0.15);}.oceanwp-social-menu.simple-social ul li a{color:#666666;}.oceanwp-social-menu.simple-social ul li a:hover{color:#000000!important;}@media (max-width: 769px) {
					#top-bar-nav, #site-navigation-wrap, .oceanwp-social-menu, .after-header-content {display: none;}
					.center-logo #site-logo { float: none; position: absolute; left: 50%; padding: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
					#site-header.center-header #site-logo, .oceanwp-mobile-menu-icon, #oceanwp-cart-sidebar-wrap {display: block;}
					body.vertical-header-style #outer-wrap {margin: 0 !important;}
					#site-header.vertical-header { position: relative; width: 100%; left: 0 !important; right: 0 !important; }
					#site-header.vertical-header .has-template > #site-logo { display: block; }
					#site-header.vertical-header #site-header-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center;
					align-items: center; padding: 0; max-width: 90%; }
					#site-header.vertical-header #site-header-inner > *:not(.oceanwp-mobile-menu-icon) { display: none; }
					#site-header.vertical-header #site-header-inner > * { padding: 0 !important; }
					#site-header.vertical-header #site-header-inner #site-logo { display: block; margin: 0; width: 50%; text-align: left; }
					body.rtl #site-header.vertical-header #site-header-inner #site-logo { text-align: right; }
					#site-header.vertical-header #site-header-inner .oceanwp-mobile-menu-icon { width: 50%; text-align: right; }
					body.rtl #site-header.vertical-header #site-header-inner .oceanwp-mobile-menu-icon { text-align: left; }
					#site-header.vertical-header .vertical-toggle, body.vertical-header-style.vh-closed #site-header.vertical-header .vertical-toggle { display: none; }
					#site-logo.has-responsive-logo .custom-logo-link { display: none; }
					#site-logo.has-responsive-logo .responsive-logo-link { display: block; }
					.is-sticky #site-logo.has-sticky-logo .responsive-logo-link { display: none; }
					.is-sticky #site-logo.has-responsive-logo .sticky-logo-link { display: block; }
					#top-bar.has-no-content #top-bar-social.top-bar-left, #top-bar.has-no-content #top-bar-social.top-bar-right {position: inherit; left: auto; right: auto; float: none; height: auto; line-height: 1.5em; margin-top: 0; text-align: center;}
					#top-bar.has-no-content #top-bar-social li {float: none; display: inline-block;}
					.owp-cart-overlay, #side-panel-wrap a.side-panel-btn { display: none !important; }
				}#mobile-fullscreen{background-color:rgba(255,214,51,0.96);}body .sidr a, body .sidr-class-dropdown-toggle, #mobile-dropdown ul li a, #mobile-dropdown ul li a .dropdown-toggle, #mobile-fullscreen ul li a, #mobile-fullscreen .oceanwp-social-menu.simple-social ul li a{color:#000000;}#mobile-fullscreen a.close .close-icon-inner, #mobile-fullscreen a.close .close-icon-inner::after{background-color:#000000;}body .sidr a:hover, body .sidr-class-dropdown-toggle:hover, body .sidr-class-dropdown-toggle .fa, body .sidr-class-menu-item-has-children.active > a, body .sidr-class-menu-item-has-children.active > a > .sidr-class-dropdown-toggle, #mobile-dropdown ul li a:hover, #mobile-dropdown ul li a .dropdown-toggle:hover, #mobile-dropdown .menu-item-has-children.active > a, #mobile-dropdown .menu-item-has-children.active > a > .dropdown-toggle, #mobile-fullscreen ul li a:hover, #mobile-fullscreen .oceanwp-social-menu.simple-social ul li a:hover{color:#ffffff;}#mobile-fullscreen a.close:hover .close-icon-inner, #mobile-fullscreen a.close:hover .close-icon-inner::after{background-color:#ffffff;}#mobile-fullscreen ul > li > a{background-color:rgba(0,0,0,0);}/* Footer Widgets CSS */#footer-widgets{padding:0px}#footer-widgets{background-color:rgba(129,215,66,0);}/* Footer Bottom CSS */#footer-bottom{padding:10px 0px 10px 0px}@media (max-width: 480px){#footer-bottom{padding:8px 0px 8px 0px}}#footer-bottom{background-color:#4c4c4c;}#footer-bottom,#footer-bottom p{color:#ffd633;}#footer-bottom a,#footer-bottom #footer-bottom-menu a{color:#ffd633;}#footer-bottom a:hover,#footer-bottom #footer-bottom-menu a:hover{color:#ffffff;}/* Typography CSS */body{font-size:15px;color:#54595f;line-height:1.6;}h1,h2,h3,h4,h5,h6,.theme-heading,.widget-title,.oceanwp-widget-recent-posts-title,.comment-reply-title,.entry-title,.sidebar-box .widget-title{font-family:Asap;}h1{font-family:Open Sans Condensed;}h3{font-family:Open Sans Condensed;}#site-navigation-wrap .dropdown-menu > li > a,#site-header.full_screen-header .fs-dropdown-menu > li > a,#site-header.top-header #site-navigation-wrap .dropdown-menu > li > a,#site-header.center-header #site-navigation-wrap .dropdown-menu > li > a,#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a,.oceanwp-mobile-menu-icon a{font-family:Source Sans Pro;font-weight:700;font-size:14px;letter-spacing:0.3px;text-transform:uppercase;}.dropdown-menu ul li a.menu-link,#site-header.full_screen-header .fs-dropdown-menu ul.sub-menu li a{font-family:Source Sans Pro;font-weight:600;line-height:0.8;letter-spacing:0.3px;text-transform:none;}@media (max-width: 480px){#footer-bottom #copyright{font-size:10px;}}/************//* ctlg stands for Catalogue *//************/.ctlg_title{/*text-transform:uppercase;*/line-height:100%;/* color:white;*/text-transform:uppercase}.ctlg_subtitle{line-height:120%;margin:-5pt 0 18pt 0;/* I use this to set lead between h1 and h3 headings (title and subtitle in Catalogue) */}.ctlg_text{/* line-height:300%;*/color:#54595f}a.ctlg_link:link,a.ctlg_link:visited{/*color:#54595f;*/color:#f27f6f}a.ctlg_link:hover{color:black}.home_title{color:rgba(255,255,255,1)}/************//* mobile only *//************//* enable this selector if I choose old carousel with no gradient *//*.home_carousel{background-color:rgba(255,255,255,0.8);border-radius:10px;/* the next two lines allow centring of text and making div flush to content *//* margin:0 auto 0 auto;display:table;padding:1px 3px 1px 3px}*//* enable this selector if I choose new carousel with gradient */.home_carousel{padding:10pt 0 0 0}/* add a little space between title and text in carousel description without using br twice. This applies to mobile only. */.home_carousel br:first-child{display:block;margin:10pt 0 0 0}/* hiding dummy button but keeping it for its size in the block,in Catalogue */#gfhidebutton{visibility:hidden}/* image in carousel appeared blurred on mobile when scaled in elementor. Instead of custom size scaled to h=200px,I now select full size in elementor and scale via CSS here. */img.swiper-slide-image{height:200px !important;max-width:100% !important}/************//* use of media selectors to discriminate between IE/Microsoft Edge and other browsers *//************//* In About,IE/Edge do not support blending *//* Problem is some browsers do not support @supports either in which case both versions are displayed. IE/Edge does not support either! @supports ie:no fx:22 ch:28 sf:9 op:12.1 mix-blend-mode ie:no fx:32 ch:41 sf:8 op:35 */@supports (mix-blend-mode:multiply){#featuredin_ie,#about_ie{display:none}}@supports not (mix-blend-mode:multiply){#featuredin,#about{display:none}}@supports (mix-blend-mode:multiply){#gfthumb{display:none}}/* Internet Explorer 10+,Microsoft Edge Browser *//* this should target ie/edge browsers only and should take precedence over the @supports selector appearing earlier*/_:-ms-lang(x),#featuredin,#about{display:none}/************//* CSS selectors for WPforms:https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ *//************//* Note that email confirmation field not working correctly on mobile. So I use Contact Form Mobile (removed email confirmation) for mobile devices and Contact Form for all other devices. They are distinguished by ID and both share same CSS modifications here that I based on class,not ID *//* there is a default margin around the form container that I can't get rid of it unless I write this custom class property */.wpforms-container-full.contactform_wrapper{margin:0}.wpforms-form{padding:10px;background-color:rgba(84,89,95,0.85);border-radius:10px;/*border:none;*/border:1px solid rgba(0,0,0,0.1)}div.wpforms-container-full .wpforms-form .wpforms-field-label{color:rgba(235,235,235,1)}/* I used the class name contactform_button I entered right into the WPform;this is because without !important;the property was not being accounted for */div.wpforms-container-full .wpforms-form input[type=submit],div.wpforms-container-full .wpforms-form button[type=submit].contactform_button{background-color:#969696;border:none #969696;color:black;font-size:1em;padding:10px 10px;border-radius:5px;/* added text-transform and letter-spacing on 02/23/19 because default plugin had changed it:Send to Pele-Mele Works text in form button was appearing in all caps with slightly spaced letters */text-transform:none;letter-spacing:normal}div.wpforms-container-full .wpforms-form button[type=submit].contactform_button:hover{border:none;color:black;background-color:#ddd;/* added color and background-color too on 02/23/19 because button text had become white and background was blue when focused on */}/* I think this was a test div.wpforms-container-full.contactform_fieldbcg{color:pink !important}*/.wpforms-form input,.wpforms-form textarea{background-color:rgba(220,220,220,1)!important}/* Change colour of background box that displays on site (notification) once email is sent. Originally was light green. I added this but it came from wordpress forum plugin support. */.wpforms-confirmation-container-full{background-color:rgba(240,240,240,1) !important;border:none !important;border-radius:5px}/************//* CSS selectors for mailchimp subscribe form on Contact page *//************/.clear input[type=submit]:hover,.clear input[type=submit]:active{background-color:#ddd !important}/* look at code for WPForms button in MS Edge to see how this works - code for it *//* intervallicfretboard and cheatsheetmusic menu items *//*.extramenuitems a:link,.extramenuitems a:visited{font-weight:normal !important;color:#f27f6f !important}.extramenuitems a:hover{font-weight:normal !important;color:black !important}*//************//* this uses a media query to determine screen size and adjust placement of mailchimp subscribe form to centre,in mobile only https://en.support.wordpress.com/custom-design/custom-css-media-queries/*/@media screen and (max-width:767px){#mc_embed_signup{margin:0 auto 0 auto;display:table}/* this part is to have facebook colours in social menu be the same in desktop and mobile as other menu items. The social menu in WP does not distinguish settings between regular and mobile. This way,I set social menu settings in WP for desktop only and modify them here for mobile */#mobile-fullscreen .oceanwp-social-menu ul li a:link span,#mobile-fullscreen .oceanwp-social-menu ul li a:visited span,#mobile-fullscreen .oceanwp-social-menu ul li a:active span{color:black}#mobile-fullscreen .oceanwp-social-menu ul li a:hover span{color:white}}/* #footer{z-index:10}*//************//* MANUAL STICKY HEADER *//* note that by removing or commenting out this section,I will revert back to original menu/header - I did not change that at all *//************//*HOME page */.page-id-476 #site-header{background-color:rgba(255,255,255,0.2) !important;position:fixed !important;box-shadow:0 1px 4px 0 rgba(50,50,50,0.2);-webkit-box-shadow:0 1px 4px 0 rgba(50,50,50,0.2)}/* .page-id-476 #menu-menu li a:visited,.page-id-476 #menu-menu li a:link,.page-id-476 .oceanwp-facebook a{color:rgba(86,86,86,1) !important}.page-id-476 #menu-menu li a:hover,.page-id-476 .oceanwp-facebook a:hover{color:black !important}*/.page-id-476 #menu-menu li a:visited span,.page-id-476 #menu-menu li a:link span,.page-id-476 #menu-menu li a:active span,.page-id-476 .oceanwp-social-menu.simple-social ul li a:link span,.page-id-476 .oceanwp-social-menu.simple-social ul li a:visited span,.page-id-476 .oceanwp-social-menu.simple-social ul li a:active span{color:rgba(100,100,100,1)}.page-id-476 #menu-menu li a:hover span,.page-id-476 .oceanwp-social-menu.simple-social ul li a:hover span{color:black}/*CATALOGUE page */.page-id-98 #site-header{/*background-color:rgba(76,76,76,0.6) !important;*/background-color:rgba(245,245,245,0.95) !important;position:fixed !important;box-shadow:0 1px 4px 0 rgba(50,50,50,0.2);-webkit-box-shadow:0 1px 4px 0 rgba(50,50,50,0.2)}.page-id-98 #menu-menu li a:visited span,.page-id-98 #menu-menu li a:link span,.page-id-98 #menu-menu li a:active span,.page-id-98 .oceanwp-social-menu.simple-social ul li a:link span,.page-id-98 .oceanwp-social-menu.simple-social ul li a:visited span,.page-id-98 .oceanwp-social-menu.simple-social ul li a:active span{color:rgba(100,100,100,1)}.page-id-98 #menu-menu li a:hover span,.page-id-98 .oceanwp-social-menu.simple-social ul li a:hover span{color:black}/*082419 start. I added this CSS just because WP update or db update seemed to break icons on CATALOGUE page. Remove this CSS later if it is fixed by WP or theme developers. Restored fontawesome instead of fontawesome 5 free. It may be an issue with ocean-extra plugin v1.5.13 because another issue popped up on server for CONTACT page,which I am also fixing here. */.page-id-98 span.fa.fa-facebook,i.icon.before.fa.fa-envelope-o,span.nav-arrow.fa.fa-angle-down{font-family:fontawesome !important;font-weight:400 !important}/*.page-id-98 fas fa{font-weight:400 !important}*/.page-id-51 span.fa.fa-facebook{font-family:fontawesome !important;font-weight:400 !important}/*082419 end *//*ABOUT page */.page-id-13 #site-header{/*background-color:rgba(167,219,187,1) !important;*/background-color:rgba(205,225,215,0.97) !important;position:fixed !important;box-shadow:0 1px 4px 0 rgba(50,50,50,0.1);-webkit-box-shadow:0 1px 4px 0 rgba(50,50,50,0.2)}.page-id-13 #menu-menu li a:visited span,.page-id-13 #menu-menu li a:link span,.page-id-13 #menu-menu li a:active span,.page-id-13 .oceanwp-social-menu.simple-social ul li a:link span,.page-id-13 .oceanwp-social-menu.simple-social ul li a:visited span,.page-id-13 .oceanwp-social-menu.simple-social ul li a:active span{color:rgba(100,100,100,1)}.page-id-13 #menu-menu li a:hover span,.page-id-13 .oceanwp-social-menu.simple-social ul li a:hover span{color:black}/*CONTACT page */.page-id-51 #site-header{background-color:rgba(255,255,255,0) !important;position:fixed !important}.page-id-51 #menu-menu li a:visited span,.page-id-51 #menu-menu li a:link span,.page-id-51 #menu-menu li a:active span,.page-id-51 .oceanwp-social-menu.simple-social ul li a:link span,.page-id-51 .oceanwp-social-menu.simple-social ul li a:visited span,.page-id-51 .oceanwp-social-menu.simple-social ul li a:active span{color:rgba(220,220,220,1)}.page-id-51 #menu-menu li a:hover span,.page-id-51 .oceanwp-social-menu.simple-social ul li a:hover span{color:white;box-shadow:0 0 0 0 rgba(50,50,50,0);-webkit-box-shadow:0 0 0 0 rgba(50,50,50,0)}/*DOWNLOADS page */.page-id-4917 #site-header{background-color:rgba(255,255,255,.4) !important;position:fixed !important;box-shadow:0 1px 4px 0 rgba(50,50,50,0.1);-webkit-box-shadow:0 1px 4px 0 rgba(50,50,50,0.1)}/*SUB MENU same for all */#menu-menu.main-menu.dropdown-menu ul li a.menu-link span.text-wrap{color:rgba(86,86,86,1)}#menu-menu.main-menu.dropdown-menu ul li a.menu-link{padding:8px 5px 8px 5px}/* Reduce left padding for menu subitem arrow from 6px to 4px - THIS IS NOT WORKING */#site-navigation-wrap .dropdown-menu>li>a .nav-arrow{padding-left:4px !important}/* HAMBURGER MENU and text in mobile */.oceanwp-mobile-menu-icon .mobile-menu{/*color:rgba(240,240,240,1);*/color:rgba(100,100,100,1)}/*.page-id-51 .oceanwp-mobile-menu-icon .mobile-menu a:visited,.page-id-51 .oceanwp-mobile-menu-icon .mobile-menu a:active,.page-id-51 .oceanwp-mobile-menu-icon .mobile-menu a:link{color:rgba(220,220,220,1)}*/.oceanwp-mobile-menu-icon a:hover{color:black}/* mobile menu hamburger for CONTACT page */.page-id-51 .oceanwp-mobile-menu-icon .mobile-menu{color:rgba(205,205,205,1)}.page-id-51 .oceanwp-mobile-menu-icon a:hover{color:white}/* added this vertical offset so that these menu anchors in CATALOGUE page do not land behind but right below the sticky header. This can be accomplished with CSS or jquery. https://github.com/pojome/elementor/issues/1389 */#cheatsheets,#musicpaper,#othertitles{position:absolute;top:-85px}/* LIGHTBOX inside Elementor */.wp-caption-text.gallery-caption{background-color:transparent}