/*   
Theme Name: Cybermill Base Theme
Theme URI: http://example.co.uk
Description: A Bespoke Wordpress Theme for
Author: The Cybermill
Author URI: http://cybermill.co.uk
Version: 1
*/


/* -------------------------------------------------------------------------------- */
/* Reset */
/* -------------------------------------------------------------------------------- */   
/* Good ol' clearfix */
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; } /* For IE 6/7 only */

.admin-bar { position: static; }

html, body { margin:0; padding:0; }
html { box-sizing: border-box; }
*, *:before, *:after {  box-sizing: inherit; }  

/* -------------------------------------------------------------------------------- */
/* Typography --- 
/* -------------------------------------------------------------------------------- */


body { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.625rem; font-weight: 400; }

h1,h2,h3,h4 { clear:both; padding:0; margin: 0 0 20px 0; line-height: 1.5em; font-family: 'Open Sans', sans-serif;  }

h1 { font-size: 2.25rem; font-weight: 600; text-transform: uppercase; }
h2 { font-size: 1.5rem; font-weight: normal; }
h3 { font-size: 1.125rem; font-weight: 300; text-transform: uppercase; }
h4 { font-size: 1rem; text-transform: uppercase; }
h5, h6 {  font-size: 0.85rem; text-transform: uppercase; }
h1.entry-title, h2.entry-title {
  text-align: center;
  margin: 0 0 10px 0;
  color: #333;
  text-transform: uppercase;
}
 h2.entry-title-left  {
   margin: 0 0 10px 0;
  color: #333;
  text-transform: uppercase;
 }
h3.entry-title {
    text-align: center;
    font-size: 1.5rem;
}
.header-border {
    background: #B4D334;
    height: 2px;
    width: 90px;
    margin: 10px auto 20px auto;
}
.title, .widget_title { border-bottom: 1px solid #b3d334; /*padding-bottom: 1.15%; margin-bottom: 2.3%;*/ padding-bottom: 15px; margin-bottom: 30px; font-weight: 600; }

p { margin: 0 0 10px 0; font-weight: 300; }

/* Link defaults */
a { text-decoration: none; color: #b3d334; font-weight: 600; }
a:hover,a:active { color: #ff9600; } 

/* Lists */
ul,ol { margin: 0; padding: 0; }
.menu-main-menu-container ul:not(.sub-menu) { display: flex; justify-content: space-between; list-style-type: none!important; }
ul li,ol li { list-style: none; }
ul ul {  } 

strong { font-weight: bold; }
em { font-style: italic; }
sub { font-size: 11px; }
small { font-size: .8em; }
del { text-decoration: line-through; }   

blockquote { border-left: none; font-style: italic; text-indent: 60px; position: relative; padding: 2em; margin: 0; }
blockquote:before, q:before, .quote:before {content: "\201C"; font-size: 100px; line-height: 0px; display: block; position: absolute; top: 60px; left: -35px; }
blockquote p { line-height: 2em; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }

hr { clear: both; display: block; height: 1px; border: none; border-top: 1px solid #c6c6c6; border-bottom: 1px solid #fff; margin: 2.3% 0; padding: 0; }


.alignright { float: right; margin: 2% 0 2% 4%; text-align: right; }
.alignleft { float: left; margin: 2% 4% 2% 0; text-align: left; }
.aligncenter { margin: 2% auto; text-align: center; display: block; clear: both; }

p.wp-caption-text { background: #eee; color: #666; font-style: italic; padding: 4% 5%; width: 100%; font-size: 14px; line-height: 18px; }
.wp-caption img { display: block; } 
.wp-caption img, .wp-caption { width:auto !important;  max-width:100% !important; height:auto !important; }

.bullet ul li {
    margin-left: 50px;
    list-style-type: disc;
}

img { max-width: 100%; height: auto; }

/* -------------------------------------------------------------------------------- */
/* Buttons, inputs, Contact form*/
/* -------------------------------------------------------------------------------- */

input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], 
input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], 
input[type="time"], input[type="url"], input[type="color"], textarea { background: #eee; display: block; width: 100%; border: 1px solid #ccc; box-shadow: none; padding: 0.25em 0.5rem;  }

input[type="checkbox"], input[type="radio"] { margin: 10px 5px 10px -16px; }
label { display:inline-block; margin: 10px 0 5px 0;}

.contact-form, .contact-sidebar { display: inline-block; }
.contact-sidebar { float:left; }
.contact-form h2 { border-bottom: 1px solid #b3d334; padding-bottom: 15px; margin-bottom: 30px; }
.contact-sidebar h3 { border-bottom: 1px solid #b3d334; padding-bottom: 5px; margin-bottom: 0px; font-weight: 600; }
.contact-sidebar p { margin: 5px 0 30px 0; }


.req { padding-left: 5px; }

.button { font-size: 1rem; padding: 1em; text-transform: uppercase; background: #b3d334; color: #fff; font-weight: 600; border: none; line-height: 1em; display: block; }
.button:hover { background: #ff9600; color: #fff; } 
.button:after(not: button.single_add_to_cart_button button) { content: "\00BB"; padding-left: 5px; }

.button.add_to_cart_button { background-image: url('_/images/basket.png'); background-position: 95% center; background-repeat: no-repeat; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------- */
/* Layout */
/* ---------------------------------------------------------------------------------------------------------------------------------------------- */
.column, .columns {
	padding: 0em 2em;
}
 .text-center {
    text-align: center;
 }
 body { border-top: 5px solid #b3d334; }
.wrapper { background: #fff; margin: 0px auto; }
.align { margin: 0px auto; max-width: 1190px; }

.no-pad-right { padding-right: 0; }
.no-pad-left{ padding-left: 0; }
.nopadding { padding-left: 0;  padding-right: 0; }
.no-padding-top { padding-top: 0; }
.no-side-pad { padding-left: 0!important;  padding-right: 0!important; } 


.nav-wrapper, .footer-wrapper, .menu-mobile-container { background: #333; }
.copyright-wrapper { background: #111; }
.main-nav a, .footer-wrapper, .copyright-wrapper, .footer-wrapper a, .copyright-wrapper a, .menu-mobile-container .menu-item a, .mobile-nav, .mobile-nav a { color: #fff; }
.header, .footer-wrapper a, .copyright-wrapper { text-transform: uppercase; }  
.footer-wrapper a:after { content: "\00BB"; padding-left: 5px; }
.footer-wrapper ul.social-icons a:after { content: ''; }
.search-bar { background: #333; color: #fff; text-align: center; display: none; }
.main-area-wrapper {
    margin-bottom: 1em;
}
/*.inner { padding: 20px 10px; }*/
.inner { padding: 1.15%; }
.h-inner { padding: 0 1.15%; }


.pipe { padding: 0 2px 0 0; }
.pipe:after { content: "\007c"; padding-left: 2px; color: #b3d334; display: inline-block; vertical-align: top; }

.medium-up, .large-up { display: none; }

.flex-justify { display: flex; justify-content: space-between; }
.flex-left { display: flex; justify-content: flex-start; }
} 

/* -------------------------------------------------------------------------------- */
/* Header */
/* -------------------------------------------------------------------------------- */  

.header ul li { list-style: none; }

.logo-wrapper { float: left; max-width: 90%; }
.logo-wrapper-as { float: left; max-width: 40%; }
.logo { display: block; }
.logo img { max-width: 100%; }
.info-section, .customer-nav { float: right; }

.tag-line { text-align: right; font-size: 0.8rem; }

.search-bar { font-size: 1rem; line-height: 1.5em; }

/* -------------------------------------------------------------------------------- */
/* Menu */
/* -------------------------------------------------------------------------------- */

.menu-mobile-container { height: 100%; width: 260px; position: fixed; top: 0; left: -261px; border-right: 1px solid #b3d334; }
.menu-mobile-container .menu-item { border-bottom: 1px solid #b3d334; }
.menu-mobile-container .menu-item a { display: block; padding: 20px; font-size: 1rem; line-height: 1rem; }

.hamburger { display: inline-block; width: 25px; height: 25px; vertical-align: middle; margin-right: 10px; }
.hb-bar { display: block; height: 4px; background: #fff; width: 25px; position: relative; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; opacity: 0.5; }
.hb-bar + .hb-bar { margin-top: 6px; }                         
        
.hb-bar { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); top: 0; }
.hb-bar:nth-child(2n) { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.hb-bar:nth-child(3n) { opacity: 0.4; }
    
.open .hb-bar { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 10px; }
.open .hb-bar:nth-child(2n) { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); top: 0; }
.open .hb-bar:nth-child(3n) { opacity: 0; }

.mobile-nav { text-align: left; font-size: 0; line-height: 0; }
.menu-click { width: 50%; padding: 0 10px; box-sizing: border-box; display: inline-block; vertical-align: middle; font-size: 1rem; line-height: 1rem; }
.mobile-contact, .mobile-contact li, .mobile-contact li a { display: inline-block; vertical-align: middle; }
.mobile-contact { text-align: right; width: 50%; }
.mobile-contact li a { line-height: 50px; width: 100%; text-align: center; }
.mobile-contact li { width: 50px; height: 50px; max-width: 32%; border-left: 1px solid rgba(180,211,52,0.3); }
.mobile-contact li:last-child { border-right: 1px solid rgba(180,211,52,0.3); }

.mobile-contact .icon, .contact-details-insert .icon { display: inline-block; vertical-align: middle;  background: url('_/images/icons.png') no-repeat -61px -118px; }  
.mobile-contact .hours-icon, .contact-details-insert .hours-icon { 
    display: inline-block;
    vertical-align: middle;
    background: url(_/images/clock.png) no-repeat;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
}
.phone .icon { background-position:  -61px -118px; width: 20px; height: 20px; }
.email .icon{ background-position: -84px -118px; width: 21px; height: 19px; }
.location .icon{ background-position: -109px -118px; width: 16px; height: 24px; }


body { left: 0; }
body, .menu-mobile-container { transition: all 0.2s ease; }
body.push { position: fixed; left: 261px; width: 100%; }
body.push .menu-mobile-container { left: 0; } 

.customer-nav li { display: inline-block; margin-left: 10px; }
.customer-nav li.phone-desktop {
    display: inline-block;
}
.customer-nav li:first-child { margin-left: 0; }
.customer-nav .icon { display: inline-block; width: 51px; height: 51px; background: url('_/images/icons.png') no-repeat -107px -55px; }
.customer-nav .phone-icon {
    display: inline-block;
    width: 51px;
    height: 51px;
    background: url(_/images/s1phone.png) no-repeat;
    background-size: 51px 51px;
}
.customer-nav .basket .icon { background-position: 0 -110px; }
.customer-nav .login .icon { background-position: -161px -55px; }

/* -------------------------------------------------------------------------------- */
/* main menu  */
/* -------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------- */
/* sub-menu */
/* -------------------------------------------------------------------------------- */

.sub-menu .menu-item.menu-item-has-children a {
	padding-right: 0;
	background: none;
}
.menu-item-has-children {
	overflow: visible;
}
.sub-menu {
	background: #b3d334;
	border-top: 2px solid #ff9600;
	/*width: 100%;*/
	z-index: 999999;
	text-align: center;
	position: absolute;
	/*left: 0;*/
	/*top: 100%;*/
	visibility: hidden;
	opacity: 0;
	transition: all 0.5s ease-in-out 0s;
}
.sub-menu .menu-item {
	display: block!important;
	/*width: 25%;*/
	padding: 0;
	margin: 0;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}
.sub-menu .menu-item a {
    display:block;
	width: 100%;
	color: #fff!important;
	font-size: 1rem;
	padding: 1rem;
}
.sub-menu .menu-item:after {
	display: none;
}
.menu-item-has-children a:after {
    color: #b3d334;
    display: inline-block;
    transform: rotate(90deg);
    content: " \00bb";
    padding: 0 4px;
}
.menu-item-has-children:hover .sub-menu {
	visibility: visible;
	opacity: 1;
}
.menu-main-menu-container .menu-item.current-menu-item .sub-menu a {
	color: #fff;
	font-weight: normal;
	border: none;
}

/* -------------------------------------------------------------------------------- */
/* Image slides/banners */
/* -------------------------------------------------------------------------------- */

.slider-outer { position: relative; background: #fff url('_/images/loader.gif') no-repeat center center; }

.sy-box.sy-loading { min-height: 160px; }

.slider { width: 100%; margin: 0; padding: 0; display: block; }
.sy-slide { width: 100%; margin: 0; display: block; list-style: none; }
.slide { width: 100%; height: 100%; background: #eee; margin: 0;  }

.slide-image { height: 100%; }
.slidebg, .slide img { display: block; }
.slide img { margin: 0px auto; }

.sy-controls li { list-style: none; }


/* -------------------------------------------------------------------------------- */
/* CTA Buttons */
/* -------------------------------------------------------------------------------- */

.featured-pages { position: relative; z-index: 99; /*transform: translateY(-50%);*/ }
.featured-pages .inner { }

.button-wrapper.third { padding: 0 1.15%;  margin-bottom:5rem;}
.cta-button { display: block; position: relative; border: 10px solid #b3d334;}
.cta-button, .featured-categories h3   { background: #b3d334; }
.cta-button img { display: block; margin: 0px auto; border: 1px solid #fff; }


.featured-categories h3 { width: 100%; padding: 10px 0; margin: 0; display: block; text-align: center; position: absolute; bottom: 20px; left: 0; color: #fff; font-weight: 600; font-size: 1.5rem; }
.featured-categories h3:after { content: "\00bb"; padding-left: 5px; }
.featured-categories li:hover h3  { background: #FF9600; }

/* 
.cta-button, .cta-button h3, .featured-categories h3   { background: #b3d334; }
.cta-button h3, .featured-categories h3 { width: 100%; padding: 10px 0; margin: 0; display: block; text-align: center; position: absolute; bottom: 20px; left: 0; color: #fff; font-weight: 600; font-size: 1.5rem; }
.cta-button h3:after, .featured-categories h3:after { content: "\00bb"; padding-left: 5px; }

.cta-button h3 { bottom: 60px; }
.cta-button p {margin: 0.5rem; font-weight: 300;color: #fff;bottom: 0px;width: 100%; position: absolute;font-size: 1rem; text-shadow: 2px 2px 4px #000;}

.cta-button:hover { top: 5px; position: relative; }
.cta-button:hover, .cta-button:hover h3, .featured-categories li:hover h3  { background: #FF9600; }
*/

.ctatext { width: 80%; text-align: center; margin: 0 0 -140px 10%;  bottom: 60px; background: #fff; position: absolute; border: 2px solid #b3d334;}
.ctatext h2 {color: #000; text-transform: uppercase}
.ctatext p { color: #333; padding: 0.5rem}
.ctatext h2 { width: 100%; margin: 0; display: block; text-align: center; color: #fff; font-weight: 600; font-size: 1.2rem; background: #b3d334; }
.ctatext h2:after { content: "\00bb"; padding-left: 5px; }
.ctatext h2:hover { content: "\00bb"; padding-left: 5px; background: #FF9600}
.ctatext h2.black { content: ""; padding: 1rem; color: #000; background: #fff}
.ctatext h2.black:after { content: ""; padding-left: 5px; color: #000}


/* -------------------------------------------------------------------------------- */
/* Main Area */
/* -------------------------------------------------------------------------------- */

.home-text .inner { text-align: center; max-width: 850px; margin: 0px auto; }
.home-text img { position: absolute; right: 0.5em; width: 12%; }
.main-area-wrapper .inner, .footer.inner { padding: 4% 3.15%; } 

.featured-categories { background: #eee; }
.featured-categories li { list-style: none; float: left; padding: 0 1.15% 2.3% 1.15%;  }
.featured-categories li a { position: relative; display: block; }
.featured-categories li img { display: block; }

.featured-categories h3 { text-align: left; width: auto; padding: 1.15% 2.3%; bottom: 60px} 
.featured-categories p {margin: 0.5rem; font-weight: 300;color: #fff;bottom: 0px;width: 100%; position: absolute;font-size: 1rem; text-shadow: 2px 2px 4px #000;}

.woocommerce-LoopProduct-link { display: block; margin-bottom: 2.3%; clear: both; }

.f-products li { list-style: none; width: 50%; }
.f-products h2, .f-products .price { text-transform: uppercase; color: #333; line-height: 1.1em; padding: 0; margin: 0; }
.f-products h2 { font-size: 1rem; font-weight: 600; }
.f-products h2:after { content: "\00bb"; padding-left: 5px; }
.f-products .price { font-size: 0.875rem;  }

.f-products img { /*padding: 15px;*/ padding-bottom: 2.3%; margin-bottom: 2.3%; border-bottom: 1px solid #b3d334; }

/* -------------------------------------------------------------------------------- */
/* ---------- framing.css overrides - USED FOR img slider on m2m ------------------ */
/* -------------------------------------------------------------------------------- */ 
.m2m-wrapper {
    display: flex;
    flex-flow: row wrap;
    margin: auto;
    max-width: 80em;
}
.clientimages li {
   width: auto!important;
    height: auto!important;
    padding: 5px;
    margin: 3px 3px 0px 0;
}
.clientimages li img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.img-scroll-wrapper {
    width: 100%;
}
ul.clientimages.siema {
   margin: 1em 0;
   z-index: 99999; 
    
}
ul.lSPager {
    margin: 0.5em 0!important;
}
ul.lSPager li {
    list-style-type: none;
}
.lSAction > a {
    opacity: 1;
}

.clientimages.siema > div > div {
    width: 85px!important;
}
/* -------------------------------------------------------------------------------- */
/* Measuring Guide Page
/* -------------------------------------------------------------------------------- */ 
.measuring-guide-list {

}
.single-measuring-guide, .single-structured-child {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 3em;
    padding: 2em 0;
    background: #eee;
    box-shadow: 0 0 11px -3px #C8C8C8;
    border: 1px solid #B4D334;
}
.measuring-guide, .structured-child {
    padding: 1em;
}
.m-guide-img, .s-child-img {
    margin: auto;
    text-align: center;
}
.m-guide-text {
   border-right: 1px solid #B4D334; 
}

.s-child.right {
   border-right: 1px solid #B4D334; 
}
.s-child.left {
   border-left: 1px solid #B4D334; 
}

/* -------------------------------------------------------------------------------- */
/* Accordion 
/* -------------------------------------------------------------------------------- */ 
.uploadpicture {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.fakeuploadpicture {
   padding: 0.5em;
    background-color: #B4D334;
    border: 1px solid #b4d334;
    font-weight: 600; 
    color: #fff
}
.fakeuploadpicture:hover {
    cursor: pointer;
    background-color: #FF9600;
    border: 1px solid #ff9600;
}
.uploaded-images {
    height: 22em;
    overflow-y: scroll;
    padding: 1em 0;
    margin: 1em 0;
    border: 1px solid #ccc;
    box-shadow: 0 0 11px -3px #C8C8C8;
}
.uploaded-images ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
   
}
.uploaded-images ul li {
    
    margin: 0.25em 0;
    text-align: center;
    border: 1px solid #b3d334;
}
.uploaded-images ul li:hover {
    border: 1px solid #ff9600;
}
.m2m-wrapper .sidebar-content {
    margin-top: 2em;
}
input[type="checkbox"]:name {
    font-weight: bold;
}
#mouldingSelect, #glazingSelect, #finishSelect, #commonsizeSelect {
    width: 100%;
    margin: 0 0 0.5em 0;
    border-radius: 2px;
    
}
#mouldingSelect option, #glazingSelect option, #finishSelect option, #apertureSelect option, #apertureShapes option, #commonsizeSelect option, #uploadSelect option {
    padding: 0.75em 0.5em;
    border-bottom: 1px solid #ccc;
    font-size: 0.9em;
}
#mouldingSelect option:last-child, #glazingSelect option:last-child, #finishSelect option:last-child, #commonsizeSelect option:last-child {
    border: 0;
}
.m2m-accordion h3 {
    margin: 0.5em 0;
}
.panel p button {
    margin-top: 1em;
}
.othumb {
    width: 50%;
    margin: auto;
}

.uploadfile {
   position: relative;
   background: linear-gradient(to right, lightblue 50%, transparent 50%);
   background-size: 200% 100%;
   background-position: right bottom;
   transition:all 1s ease;
}
.uploadfile.complete {
   display: none;
}
.uploadfile.failed {
   background: red;
}
 .uploadfile a {
   display: block;
   position: relative;
   padding: 5px;
   color: black;
}
/* -------------------------------------------------------------------------------- */
/* Select2 css override */
/* -------------------------------------------------------------------------------- */ 

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding: 0.5em 0.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container .select2-selection--single {
    height: unset;
    border-radius: unset;
    outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: absolute;
    top: 43%;
    right: 1.5em;
    left: unset;
    border-color: transparent #B4D334 #B4D334 transparent;
    border-style: solid;
    border-width: 0px 2px 2px 0px;
    transform: rotate(45deg);
    margin: 0 0 0 0;
    width: 15px;
    height: 15px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent #B4D334 #B4D334 transparent;
    border-width: 0px 2px 2px 0px;
    transform: rotate(225deg);
    top: 72%;
}
.select2-search--dropdown {
    display: none;
}
.select2-results__option { 
    list-style: none; 
}
ul.select2-results__options {
    box-shadow: 0px 5px 7px 0px #ddd;
}
.select2-container {
    margin-bottom: 1em;
}
.select2-container--default {
     font-size: 0.9em;
     
}
.select2-results__option {
     border-top: 1px solid #ccc;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: #ccc;
     color: #393A3B;    
}
/* -------------------------------------------------------------------------------- */
/* Competition */
/* -------------------------------------------------------------------------------- */ 
.contact-flex {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;    
}
.comp-img, .comp-contact {
    width: 75%;
    margin: 2em auto;
    padding: 2em;
    border: 1px solid #efefef;
    box-shadow: 0px 5px 7px 0px #ddd;
}
.comp-img img {
    box-shadow: inset 7px 76px 48px 194px #000;
    border-bottom: 2px solid #eee;
    border-left: 3px solid #eee;
    border-top: 3px solid #ddd;
    border-right: 3px solid #eee;
}
.comp-field-half {
    width: 50%;
    padding: 0 1em; 
}
.comp-field-full {
    width: 100%;
    padding: 0 1em; 
}
#wpcf7-f2660-p2651-o1 input[type="submit"] /*, #wpcf7-f2660-p2651-o1 input[type="file"]*/ {
    display: inline-block;
    padding: 0.5em;
    margin-top: 1em;
    background-color: #B4D334;
    border: 1px solid #b4d334;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    width: 20%;
}
#wpcf7-f2660-p2651-o1 input[type="submit"]:hover {
    background-color: #FF9600;
    border: 1px solid #ff9600; 
}

/* -------------------------------------------------------------------------------- */
/* Discount */
/* -------------------------------------------------------------------------------- */ 

.discount-bg {
    display: inline-block;
    color: #fff;
    width: 37%;
    height: 4em;
    line-height: 4em;
    background: url(_/images/green-ticket3.png) no-repeat;
}

.discount-bg h3 {
    display: inline-block;
    margin: 0;
    font-size: 1.5em;
}
.discount-el h4 {
    display: inline-block;
    font-weight: normal;
    margin: 0;
    font-size: 1.3em;
}
.discount-bg h3:after {
    content: "%";
}
.discount-el {
    width: 50%;
    text-align: center;
}
.s1-table {
    border: 4px solid #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 595px;
}
.s1-table thead tr th {
    background: #666666;
    height: 5em;
    color: #fff;
    border: 1px solid #fff;
}
.s1-table tbody tr td {
    /*background: #8e8e8e;*/
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #d5d5d5 100%);
    background: -webkit-linear-gradient(top, #fbfbfb 0%, #d5d5d5 100%);
    background: linear-gradient(to bottom, #fbfbfb 0%, #d5d5d5 100%);
    height: 5em;
    border: 1px solid #fff;
}
/* -------------------------------------------------------------------------------- */
/* List children */
/* -------------------------------------------------------------------------------- */ 
.child-list {
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
}
.single-child-list {
    padding: 0 1em;
    margin: 0 auto;
    text-align: center;
}


/* -------------------------------------------------------------------------------- */
/* Ranges */
/* -------------------------------------------------------------------------------- */
.single article.ranges, .page-template-printing-and-framing article {
    margin: 2rem 0;
    border: none!important;
    display: flex;
    flex-flow: row wrap;
}
.single-range-left {
    padding: 0 1em;
    float: left;
} 
.single-range-right {
    float: right;
}
.range-examples {
    display: flex;
    flex-flow: row wrap;
}
.range-example {
   flex: 1 1 190px;
   padding-left: 0.5em;
}
.one-range {
    position: relative;
    text-align: center;
}
.one-range-inner {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 65%;
    color: #888;
}

h3.order-now {
    margin-top: 1em;
    font-size: 1em;
    min-width: 13em;
    max-width: 95%;
    font-weight: bold;
    color: #fff;
    background: #b3d334;
    padding: 0.4em 0.6em;
    text-align: center;
}
h3.order-now.full-button {
    max-width: 100%;
}
h3.order-now:hover {
    background-color: #FF9600;
    border: 1px solid #ff9600;
    cursor: pointer;
}
.order-button {
    flex-flow: row wrap;
}
.order-button a {
    flex:1;
}
.hide-multibutton, .hide-singlebutton {
    display: none;
}
.one-range-inner h3:after {
    content: "\00bb";
    padding-left: 5px;
}
.range-list {
    display: flex;
    justify-content: stretch;
    flex-flow: row wrap; 
}
.range {
    display: inline-block;
    float: left;
    padding: 0 1em;
    text-align: center;
    margin: 0 auto;
}
.range h4 {
    font-size: 1.2rem;
    color: #888;
    font-weight: normal!important;
}
.range a {
    color: #888;
}

.range a:hover h4, .range h4:hover {
    color: #b3d334;
}
.range a:hover, h4 .range h4:hover {
    color: #b3d334;
} 
.ranges {
    margin: 2rem 0;
}
/* -------------------------------------------------------------------------------- */
/* Mount Images (Non-shop) */
/* -------------------------------------------------------------------------------- */

ul.mount-images {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
}
li.mount-image {
    background: #efefef;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
}
.mount-img-title {
    font-size: 0.9em;
    padding: 0.5em 0;
    color: #666;
}
.mount-img-thumb {
    height: 100%;
}
.mount-img-thumb img {
    height: 100%;
}
.img-wrap {
   position: relative;
   display: flex;
   width: 17%;
}

/* Search   */

#searchform {
    color: #000;
}
/* -------------------------------------------------------------------------------- */
/* Mount/Frame Layouts */
/* -------------------------------------------------------------------------------- */ 
.mount-wrapper {
    display: flex;
    flex-flow: row wrap;
    /* justify-content: space-between; */
}
.mount-h3 {
    padding-left: 1em;
}
.mounts {
    max-width: 20%; 
}
.mount-inner {
    position: relative;
    background: #efefef;
    top: -10px;
    margin: 0;
}

.mounts .mount-inner {
    margin: 10px;
}
.mount-thumb {
    /*position: absolute;
    top: 0;*/
}
.mount-title {
    padding: 0 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: -5px;
}
.mount-detail {
    padding: 0 1rem 0.5rem;
    font-size: 0.8rem;
}

.mount-border {
    background: #B4D334;
    height: 2px;
    width: 95%;
    margin: 10px auto 20px auto;
}
.single-aperture {
    width: 100%;
    max-width: 56em;
    margin: auto;
}
.aperture-inners {
    display: inline-block;
}

/* -------------------------------------------------------------------------------- */
/* Accordion */
/* -------------------------------------------------------------------------------- */ 
.test-m2m-help {
    width: 20em!important;
}
.m2m-help {
    float: right;
    background: #fff;
    border: 1px solid #B4D334;
    border-radius: 50%;
    height: 25px;
    padding: 0 8px;
    width: 25px;
    line-height: 23px;
}
.m2m-help:hover {
    border: 1px solid #FF9600;
    
}
.m2m-help:hover a {
    color: #FF9600;
}

.m2m-accordion {
   /* width: 33.333%;*/
}
.accordion {
    background-image: linear-gradient(to bottom, #bbb, #ccc);
    background-color: #eee;    
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #999;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 1s;
}
.m2m-accordion h5, .m2m-accordion h6 {
    margin: 1.1em 0 0.5em 0
}
.m2m-accordion h6 {
    margin: 0 0 1em 0
}
.active, .accordion:hover {
    background-image: none;
    background-color: #999;
    color: #B4D334;
    font-weight: bold; 
}
.panel {
    padding: 16px;
    display: none;
    background-color: white;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    overflow: hidden;
}
.panel:last-child {
    border-bottom: 1px solid #ccc;
}
.panel.panel-dd {
    padding: 0;
}
.m2m-accordion input[type=checkbox], .m2m-accordion input[type=radio] {
    position: relative;
    margin: 1em 1em 0em 0em;
    width: 20px;
    height: 20px;
    top: 5px;
}
.m2m-accordion input[type=text] {
    margin-left: 1em;
    width: 31%;
    display: inline-block;
}
.dim {
   text-align: left;
   margin: 1em 0; 
   font-size: 0.9em;   
}
.dim-input {
    height: 2.5em;
}
#selectedglass {
    padding: 0 6px;
    font-size: 0.8em;
}
.acc-description, #selectedglazing p, .acc-pad {
    font-size: 0.8em;
    margin-bottom: 1em;
    color: #b3d334;
    font-weight: bold;
}
.apertures select, .uploads select {
    width: 100%;
    outline: none;
}
#selectedmoulding, #selectedaperture {
    text-align: center;
    border: 6px solid #fff;
    box-shadow: 0 0 19px -3px #C8C8C8;
}
#selectedmoulding img, #selectedaperture img {
    width: 100%;
    vertical-align: middle;
    border: 1px solid #fff;  
}
/* -------------------------------------------------------------------------------- */
/* Popup box */
/* -------------------------------------------------------------------------------- */ 

.popup-box { 
    display:none;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.close {
    position: absolute;
    top: 0.4em;
    right: 0.5em;
    font-size: 2.5em;
    color: #666;
}
.close:hover {
    cursor: pointer;
}
.popup-content {
    position: relative;
    background: #fff;
    border: 1px solid #b3d334;
    box-shadow: 0px 0px 5px #999;
    width: 33.33%;
    height: auto;
    margin: 20vh auto;
    padding:2em;
}
.popup-title {
    display: flex;
    justify-content: flex-start;
}
.popup-title img {
    width: 15%;
    height: 15%;
}
.popup-title h2 {
    display: inline-block;
    line-height: 2.4em;
    padding-left: 2em;
}
/* -------------------------------------------------------------------------------- */
/* Gift Vouchers */
/* -------------------------------------------------------------------------------- */
.tcm-custom-fields {
    clear: both;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.tcm-custom-fields-left, .tcm-custom-fields-right {
    width: 50%; 
}
.tcm-custom-fields-left {
    padding-right: 1em;
}
.tcm-custom-fields-right {
    padding-left: 1em;
}
.gift-voucher .flex-row {
    display: flex;
    justify-content: flex-start;
    padding-left: 1em;
}
.woo-gift-radio {
    margin-right: 4em;
}
.page-template-gift-vouchers article {
    margin-top: 2em;
}
li.product_cat-gift-vouchers .add_to_cart_button {
    display: none;
    margin-bottom: 0!important;
}
.tcm-custom-fields label {
    float: left;
}
/* OLD CSS FOR GIFT VOUCHER PRODUCTS
.page-template-gift-vouchers .woocommerce ul li.product {
    border: 1px solid #B4D334;
    padding: 0.5rem;
    box-shadow: 0 0 19px -3px #cfcfcf;
    text-align: center;
}
*/
.gift-voucher .woocommerce ul li.product {
    padding: 0.5rem;
    background: #f5f5f5;
    text-align: center
}
.gift-voucher .woocommerce {
    margin-top: 2em;
}
.page-template-gift-vouchers .woocommerce ul.products li.product-type-simple .price {
    background: #f7f7f7;
    margin: 0.8em auto 0.2em;
}
.page-template-gift-vouchers .single-range-right {
    margin-top: 5rem;
}
.gift-voucher img.zoomImg {
    display: none!important;
}
.email-post {
    display: block;
    float: none!important;
    margin-bottom: 0;
}
.woocommerce div.product.product_cat-gift-vouchers form.cart .button {
   margin-top: 2em;
    margin-left: 30%;
    width: 40%;
    font-size: 1.1em;
} 
/* -------------------------------------------------------------------------------- */
/* Woo Commerce overrides */
/* -------------------------------------------------------------------------------- */
.woocommerce-billing-fields__field-wrapper label, .woocommerce-shipping-fields__field-wrapper label, #custom_checkout_field label {
    float: left;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: #B4D334;
   
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
    background-color: #FF9600;
}
.woocommerce a.checkout-button.button.alt {
     padding: 0 0 1em 0;
}
#custom_checkout_field label.checkbox {
    margin-top: -25px;
}
ul.wc-item-meta li {
    list-style:none;
}
dl.variation dt {
    font-style: italic;
    font-size: 0.85em;
}
.tcm-custom-fields input:not([type='radio']) {
   background: #eee;
    display: block;
    padding: 0.25rem 0.5rem;
    width: 100%;
    border: 1px solid #ccc;
    box-shadow: none; 
}
#checkout-radio label.radio, .register label.radio, .pro label.radio, .pro label.checkbox{
  display: inline!important;
  margin-left: 5px;
}

#woo-ml-subscribe {
text-align: left;
}
#checkout-radio input[type=radio], .register input[type=radio], .pro input[type=radio], .pro input[type=checkbox]{
  margin-left: 15px;
}
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
    
}
.zoom-icon {
    position: absolute;
    display: inline-block;
    top: 5px;
    right: 5px;
    width: 42px;
    height: 40px;
    background: url(_/images/magnify2.png) no-repeat;
    background-size: 43px 40px;
}
form.woocommerce-ordering {
    display: none;
}
.woocommerce ul.products li.product-type-simple .price {
    display: inline-block;
    background: #fff;
    color: #666;
    width: 8em;
    margin: 0.5em auto;
    font-size: 0.9em;
    padding: 0px 10px;
    border-radius: 3px;
    outline: none;
    border: 0px;
    box-shadow: 0px 0px 2px 0px rgba(102,102,102, 0.8);
}
.woocommerce td.product-name dl.variation dt {
    font-weight:600;
    font-size: 1em;
}
.woocommerce nav.woocommerce-pagination {
    float: right;
    margin-bottom: 1rem;
}
.woocommerce-variation-add-to-cart {
    max-height: 4em;
}
.shop-header-border {
    background: #B4D334;
    height: 1px;
    width: 80px;
    margin: 0 auto; 
}
.woocommerce ul.products li.product_cat-samples-frames .price {
    display: none;
}
.woocommerce ul.products li.product_cat-samples table.variations {
    margin: -2em auto 0em; 
}
.woocommerce ul.products li.product_cat-samples {
    background: #f5f5f5;
    text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #666;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 5px;
}

form.variations_form.cart {
    margin-bottom: -5px;
}
form.variations_form.cart p, .woocommerce ul.products li.product a p {
    margin: 0;
}
.woocommerce ul.products li.product a img {
    margin: 0 0 0.5em;
}
 .woocommerce button.single_add_to_cart_button, .page-template-shop-page .woocommerce ul.products li.product .button {
    background: #b4d334;
    color: #fff;
    font-size: 0.9rem;
    padding: 0.5rem;
    width: 69%;
    margin-top: 0.9em;
}
.page-template-shop-page .woocommerce ul.products li.product-type-simple .button {
    margin-top: 0;
    margin-bottom: 7px;
}
 .woocommerce button.single_add_to_cart_button:hover, .page-template-shop-page .woocommerce ul.products li.product .button:hover {
    background: #FF9600;
    color: #fff;
}

select#pa_frame-samples {
    background: #fff;
    color: #666;
    font-size: 0.9em;
    padding: 2px; 
    border-radius: 3px;
    outline: none;
    border: 0px;
    box-shadow: 0px 0px 2px 0px rgba(102,102,102, 0.8);
}
td.label, a.reset_variations {
    display: none!important;
}
.woocommerce div.product form.cart .variations select {
    max-width: unset;
    min-width: unset;
    display: inline-block;
    margin-right: 0em;
    padding: 0.25rem 0.5rem;
}
.price, .variations, .single_variation_wrap {
   
}
.summary.entry-summary button.single_add_to_cart_button  {
    margin-top: 1em;
    font-size: 1em;
    /* display: inline-block; */
    font-weight: bold;
    color: #fff;
    background: #b3d334;
    padding: 0.6em 0.6em;
    text-align: center;
    width: 100%;
}
.woocommerce div.product form.cart .button {
    float: none;
}
button.single_add_to_cart_button {
   
}
.woocommerce-cart table.cart img {
    width: 100px;
    height: auto;
}
.woocommerce-cart table.cart td.actions input#coupon_code {
    width: 200px;
}
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt {
    background:  #B4D334;
 }
.woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:hover {
    background: #FF9600;
 }
 .woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #333;
    font-size: 1.25em;
    font-weight: 600;
}
.woocommerce-account button.button {
    margin: 1em 0 0 0;
}
.pro {
    display: flex;
    flex-flow: row wrap;
}
.pro span.optional {
    display: none;
}
.pro-check {
    margin-left: 1em;
}
.pro-check label {
    margin: 3px 50px 0 0;
}
 .pro-photo {
    padding-right: 2em!important;
}
.pro-artist {
    padding-right: 2em!important;
}
.pro-web-address {
    display: none;
    margin-bottom: 1em;
}
.tcm-user-field {
    flex: auto;
    width: 100%;
}
.gift-message, .hide-message {
    display: none;
}

/* -------------------------------------------------------------------------------- */
/* email subscribe */
/* -------------------------------------------------------------------------------- */
[id^='wpcf7-f1232']  {
    margin-top: 1em;
}
[id^='wpcf7-f1232'] input[type="email"] {
    display: inline-block;
    padding: 0.5em;
    background-color: #5c5c5c;
    border: 1px solid #777;
    width: 70%;
}
[id^='wpcf7-f1232'] input[type="submit"]  {
    display: inline-block;
    padding: 0.5em;
    background-color: #B4D334;
    border: 1px solid #b4d334;
    font-weight: 600;
    float: right;
    width: 20%;
}

[id^='wpcf7-f1232'] input[type="submit"]:hover {
    background-color: #FF9600;
    border: 1px solid #ff9600;
}
#media_image-3 {
    margin-bottom: 2em;
}

div.wpcf7-mail-sent-ok {
    border: 1px solid #B4D334!important;
}

div.wpcf7-response-output {
    margin: 2em 0em 1em;
    padding: 0.2em 1em;
    border: 2px solid #ff0000;
}
/* -------------------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------------------- */ 
.footer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.v-flex {
    display: flex;
    width: 100%;
}


.copyright-wrapper { font-size: 0.75rem; line-height: 1.2em; font-weight: 600; }
.footer-bottom { opacity: 0.3; }
.footer-widget { margin-bottom: 2.3%; padding-right: 1em; }

.copyright-wrapper li { display: inline-block; vertical-align: middle; }
.copyright-wrapper li:after { content: "\2022"; padding: 0 5px; }
.credit { display: block; font-size: 0.7rem; opacity: 0.5; }

.contact-details-insert li { list-style: none; text-transform: uppercase; font-weight: 600; margin-bottom: 2.3%; }
.contact-details-insert .i-wrap { text-align: center; width: 30px; display: inline-block; margin-right: 2.3%; }
.contact-details-insert { margin-top: 2.3%; } 

address { font-style: normal; display: inline-block; width: calc(70% - 50px); }
address, .location .i-wrap { vertical-align: top; }
    
/* -------------------------------------------------------------------------------- */
/* Wordpress Gallery */
/* -------------------------------------------------------------------------------- */
.image-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.image-list li { 
    list-style: none;
    float: left;
    margin: 0 0 1em 0;
    width: 16.66667%; 
}
.image-list li a { 
    width: 30px!important;
    height: 30px!important;
}
.image-list li img { opacity: 0.8; transition: all 0.5s ease; }
.image-list li img:hover { opacity: 1; }

.fix-height { display: none; }



/* -------------------------------------------------------------------------------- */
/* Frame Builder CSS */
/* -------------------------------------------------------------------------------- */
.framingexamples, .framingcontrols {
    margin: 1em 0;
    display: flex;
    justify-content: space-evenly;
}
.framingcontrols .button {
  font-size: 0.9rem; margin: 0.1em; font-weight: 400; padding: 0.5em; white-space: nowrap;
}

.framingexample {
    margin: 1em 0.25em;
    //border: 8px solid #B4D334;
    height: auto;
}

.framingexample img {
    border: 8px solid #B4D334;
}

.fgdrag {
    list-style: none;
}
/* -------------------------------------------------------------------------------- */
/* Portfolio Section */
/* -------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------- */
/* Sidebar */
/* -------------------------------------------------------------------------------- */    

/* -------------------------------------------------------------------------------- */
/* Content */
/* -------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/* Content - Extra */
/* -------------------------------------------------------------------------------- */

.item { float: left; }

.read-more { display: block; clear: both; }

.testimonial-list { margin: 0; padding: 0; }
.testimonial-list li { list-style: none; margin: 0 0 2em 0; padding: 0; }
.testimonial-list li blockquote { padding: 0; }
.testimonial-list li blockquote::before { left: -65px; top: 30px; }   

.testimonial-list .name, .testimonial-list .company { display: block; text-align: right; color: #878786; } 
.testimonial-list .name { font-weight: 600;  } 
.testimonial-list .company { font-size: 0.9333rem; }   



/* -------------------------------------------------------------------------------- */
/* Meet The Team */
/* -------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------- */
/* Latest News*/
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* social media links */
/* -------------------------------------------------------------------------------- */
ul.social-icons {
    display: flex;
    justify-content: flex-start;
    padding: 0 1em 0em 0;
}
.social-icons li {
    list-style: none;
    display: block;
    width: 51px;
    height: 51px;
    background: url(_/images/icons.png) no-repeat 0 0;
    text-indent: -999px;
    overflow: hidden;
    transition: all ease 0.2s;
    float: left;
    margin: 0 10px 10px 0;
}
.social-icons li.twitter {
    background-position: -54px 0;
}
.social-icons li.instagram {
    background-position: -161px 0;
    width: 54px;
}

#uploadspinner {
    display:none;
    background: url(_/images/loading.gif);
    background-size: 100% 100%;
    width: 43px; height: 43px;
    border: 0;
    margin: 0 0 0 10;
}

/* testimonials */
.testimonials {
    padding: 0 0 20px 0;
}
.testmain {
    background-color: #666666;
    height: 525px
}
.testtop {
    padding: 0 0 50px 0;
    border-top: 2px solid #b3d334;
    background: #eee;
}

.testimonials>h1 {
    background-color: #fff;
}
.testimonial {
    background-color: #ccc;
    padding: 15px;
    margin: -50px 0 0 0 ;
    border: 2px solid #b3d334;
    height: 525px;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.1rem; 
}
.testimonial>.thumbnail>img {
    border: 3px solid #b3d334;
    
}
.testimonial>.thumbnail {
    text-align: center;
    margin:10px;
}

/* -------------------------------------------------------------------------------- */
/* fb comp*/
/* -------------------------------------------------------------------------------- */
.fb-comp {
    background: #666666 url(_/images/watermark-fb.png) no-repeat 90% ;
}
.fb-comp-info {
    color: #fff;
}
.fb-comp-info h1 {
    margin: 0;
}
.fb-comp-info h2 {
    margin-bottom: 0.5em;
}
.fb-logo {
    margin-right: 3em;
}
.fb-buttons h3 {
    display: inline-block;
    color: #fff;
    background: #b3d334;
    padding: 0.4em 0.6em;
    margin-right: 1.5em;
}
.fb-buttons h3:hover {
    background: #ff9600;
}
.fb-buttons h3:after {
    content: "\00bb";
    padding-left: 5px;
}



/* -------------------------------------------------------------------------------- */
/* extra text */
/* -------------------------------------------------------------------------------- */
 .extra-text {
    background-image: url(_/images/frame-bg.png);
    background-repeat: no-repeat;
    background-size: 57em;
    background-position: 100% 100%;
    padding-bottom: 2em;
 }




/* -------------------------------------------------------------------------------- */
/* Our Clients */
/* -------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/* Google Map*/
/* -------------------------------------------------------------------------------- */  

.google-map { height: 300px; width: 100%; }



/* -------------------------------------------------------------------------------- */
/* Sidebar Contact Details */
/*-------------------------------------------------------------------------------*/



/* -------------------------------------------------------------------------------- */
/* Blog & Comments */
/*-------------------------------------------------------------------------------*/

.comments { display: none; }
.nocomments {
    display: none;
}

.single article { border: none!important; }

h2#comments, #respond h2 { border-bottom: 1px solid #ccc; padding-bottom: 5px; }

.commentlist li { border-bottom: 1px dotted #ccc; padding: 1em 0; }
.commentlist li:last-child { border: none; }
.pagination {
    display: none;
}

.extra-text h2 {
    text-align: center;
    margin: 1em;
}
.extra-text p {
    max-width: 1160px;
    margin: auto;
    padding: 0 .75em;
}


/* -------------------------------------------------------------------------------- */
/* Media Queries  */
/* -------------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    .m-guide-text {
        border-right: 0px; 
    }
    .rightTriangle {
        display: none;  
    }
    .extra-text {
        background-image: none;
    }
    .img-wrap {
        width: 22%;
    }    
}
@media only screen and (max-width: 1163px) {
  .rightTriangle {
      position: relative;
      width: 780px;
      height: 486px;
      /*background-color: rgba( 43, 43, 43, 0.5);*/
      margin: 0 -50px 0px 25px;
      float: right;
      -webkit-clip-path: polygon(49.35% 13%, 0% 100%, 100% 100%);
      clip-path: polygon(49.35% 13%, 0% 100%, 100% 100%);
      -webkit-shape-outside: polygon(49.35% 13%, 0% 100%, 100% 100%);
      shape-outside: polygon(49.35% 13%, 0% 100%, 100% 100%);
  }
}
@media only screen and (min-width: 1164px) {
  .rightTriangle {  
      position: relative;
      width: 780px;
      height: 400px;
      /*background-color: rgba( 43, 43, 43, 0.5);*/
      margin: 0 -50px 0px 25px;
      float: right;
      -webkit-clip-path: polygon(49.35% 5%, 0% 100%, 100% 100%);
      clip-path: polygon(49.35% 5%, 0% 100%, 100% 100%);
      -webkit-shape-outside: polygon(49.35% 5%, 0% 100%, 100% 100%);
      shape-outside: polygon(49.35% 5%, 0% 100%, 100% 100%);
  }
}

/* Define mobile styles */


@media only screen and (min-width: 30em) {  
}

@media only screen and (min-width: 30em) {
 .tag-line {  font-size: 1rem; } 
.customer-nav li { margin-left: 1.15%; }
.pipe { padding: 0 10px 0 0; }
.pipe:after { padding-left: 10px; }

.info-section { float: none; padding-left: 5px; margin: 1em 0; }
}

@media only screen and (max-width: 740px) {
    .comp-field-half, .comp-field-half label {
        width: 100%;
    }
    .img-wrap {
        width: 30%;
    }
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) { 
    .small-1 {width: 8.33%;}
    .small-2 {width: 16.66%;}
    .small-3 {width: 25%;}
    .small-4 {width: 33.33%;}
    .small-5 {width: 41.66%;}
    .small-6 {width: 49%;}
    .small-7 {width: 58.33%;}
    .small-8 {width: 66.66%;}
    .small-9 {width: 75%;}
    .small-10 {width: 83.33%;}
    .small-11 {width: 91.66%;}
    .small-12 {width: 100%;}
     .img-wrap {
        width: 48%;
    }
    .mounts {
        
        max-width: 50%;
    }
    
 .comp-img, .comp-contact {
    width: 100%;
    } 
  .comp-contact {
    padding: 0.5em;
  } 
   
.tcm-custom-fields-left, .tcm-custom-fields-right {
    width: 100%;
    padding: 0;
}
.range-example-0 {
    padding: 0 0.25em 0 0;
}
.range-example-1 {
    padding: 0 0 0 0.25em;
} 
.range-example-2 {
    padding: 0;
}   
.one-range-inner {
    position: relative;
    margin-top: 2em;
}
.v-flex {
    display: block;
}    
.range-list {
    justify-content: space-around;
}    
.fb-logo {
    display: none;
}
.fb-comp-info {
    padding: 0 1em;
}
.home-text img {
    display: none;
} 
.customer-nav {
    display: flex;
    width: 100%;
    margin: 0.5em 0;
    justify-content: center;
}
.customer-nav li {
    margin: 0 0.5em;
}
.mobile-none {
    display:none;
}
.mobile-show {
    padding: 0 .1em !important;
    font-size: 0.65em;
}

}

@media only screen and (max-width: 500px) {
    .mounts {
       max-width:100%;
    }
    .mount-inner {
        width: 100%;
    }
.mobile-show {
    padding: 0 .1em !important;
    font-size: 0.8em;
}    
} 

 /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) { 

    
.mobile-show {
    padding: 0 .1em !important;
    font-size: 0.8em;
}    

/*.inner { padding: 30px 10px; }*/

body { font-size: 16px; }
.medium-up { display: block; }

.logo { margin-right: 30px; width: auto; }

.customer-nav, .logo-wrapper { float: none; }
.top-nav, .customer-nav { text-align: right; }
.customer-nav {
    width: 15.5em;
    display: flex;
    justify-content: space-between;
    margin: 0.6em 0;
}
.header { font-size: 0; line-height: 0; }
.top-header, .top-navigation, .info-section, .logo-wrapper  { display: inline-block; vertical-align: middle; font-size: 1rem; line-height: 1.2em; }
.top-header { width: 60%; }
.top-navigation  { width: 40%; /*text-align: right; */}

.tag-line, .customer-nav { margin-bottom: 2.3%; }

.call-now { font-size: 1.2rem; font-weight: 600; }

.main-area .column { float: left; width: 60%; }
.main-area .column.last { float: right; width: 30%; padding-left: 10%; }

.third { width: 33.3%; float: left; }

.featured-pages .inner { margin-top: -150px; }
.featured-categories li { padding-bottom: 0; width: 50%; }
.featured-categories li:nth-child(2) { padding-bottom: 2.3%; }

.footer.inner .footer-widget:last-child, .footer.inner .footer-widget:nth-last-child(2) { margin-bottom: 0; } 

.f-products li { width: 25%; padding: 0 1.15%; 2.3% 1.15%; } 
.f-products li:nth-last-child(2), .f-products li:nth-last-child(3), .f-products li:nth-last-child(4), .f-products li:last-child { padding-bottom: 0; }
.f-products img { /*padding: 15px;*/ padding-bottom: 4.6%; margin-bottom: 4.6%; }

}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
.mobile-show {
    padding: 0 .1em !important;
    font-size: 0.8em;
}    

     .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
      float: left;
    margin: 0 3.8% 2.992em 0;
    padding: 0;
    position: relative;
       width: 30.75%;
    margin-left: 0; 
    clear: none;
    
    }
    .woocommerce ul.products li:nth-child(3n+3), .woocommerce-page ul.products li:nth-child(3n+3) {
    margin-right: 0!important;
    float: right!important;
    }
    .woocommerce ul.products li:nth-child(3n+1), .woocommerce-page ul.products li:nth-child(3n+1) {
    clear: both!important;
}
.woocommerce ul.products li:nth-child(3n+2), .woocommerce-page ul.products li:nth-child(3n+2) {
    clear: none;
}
} 

@media only screen and (max-width: 463px) {
.mobile-show {
    padding: 0 .1em !important;
    font-size: 0.8em;
}    
    .range-example {
        padding: 0;
    }
    
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;    
    }
 } 
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
.mobile-show {
    padding: 0 .1em !important;
    font-size: 0.8em;
}    
    .medium-1 {width: 8.33%;}
    .medium-2 {width: 16.66%;}
    .medium-3 {width: 25%;}
    .medium-4 {width: 33.33%;}
    .medium-5 {width: 41.66%;}
    .medium-6 {width: 50%;}
    .medium-7 {width: 58.33%;}
    .medium-8 {width: 66.66%;}
    .medium-9 {width: 75%;}
    .medium-10 {width: 83.33%;}
    .medium-11 {width: 91.66%;}
    .medium-12 {width: 100%;}
    
     .comp-img, .comp-contact {
        width: 95%;
    }
    
    .v-flex {
       /* width: 100%; */
    }
    .mounts {
        max-width: 25%;
    }
 } 


/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) { 

.large-1 {width: 8.33%;}
    .large-2 {width: 16.66%;}
    .large-3 {width: 25%;}
    .large-4 {width: 32.33%;}
    .large-5 {width: 41.66%;}
    .large-6 {width: 50%;}
    .large-7 {width: 58.33%;}
    .large-8 {width: 66.66%;}
    .large-9 {width: 75%;}
    .large-10 {width: 83.33%;}
    .large-11 {width: 91.66%;}
    .large-12 {width: 100%;} 

.v-flex {
    /*display: flex;*/
    width: 50%;
    flex-flow: column;
}


.main-area-wrapper .featured-pages .inner { padding: 0 1.15%; }

.large-up { display: block; }
.mobile-nav, .mobile-only { display: none; }   

.main-nav { font-size: 1rem; line-height: 1.2em; text-align: center; }

.info-nav {
    display: flex;
    justify-content: flex-end;
}

ul#menu-top-menu {
    display: inline-block;
    height: 1.5rem;
    width: 100%;
}
.info-nav { margin-bottom: 1em; }
.top-nav .menu-item, .main-nav .menu-item { display: inline-block; }
.main-nav .menu-item { 
    flex: 1 1 auto;
    border-right: 1px solid #555;
    box-shadow: 2px 0px 0px #222;
}
.main-nav .menu-item:first-child {
    border-left: 2px solid #222;
    box-shadow: -1px 0px 0px #555;
}
.main-nav .menu-item:nth-child(2){
   border-left: 2px solid #222; 
}
ul.sub-menu li.menu-item, ul.sub-menu li.menu-item > * {
    border-left: 0!important;
    border-right: 0;
    box-shadow: none!important;
}
.top-nav .menu-item a { color: #333; }
.top-nav .menu-item { padding: 0 5px; }
.top-nav .menu-item:last-child { padding-right: 0; }
.main-nav .menu-item a { display: inline-block; padding: 12px 1.15%; }
.home-text img { width: 14%; }

.menu-top-menu-container .current-menu-item a:after {
    content: ' ';
    border: solid #b3d334;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 9px;
    position: relative;
    left: -50%;
    vertical-align: bottom;
    transform: translateY(37px) rotate(225deg);
}
                                        
/*.footer-wrapper { font-size: 0; line-height: 0; }*/
.footer-wrapper .inner { padding-left: 0; padding-right: 0; max-width: 1160px; }
.quarter, .half{ width: 25%; padding: 0 1.15%; display: inline-block; vertical-align: top; font-size: 1rem; line-height: 1.5em; }
.half { width: 50%; }

.copyright-wrapper .column { float: left; width: 50%; }
.copyright-wrapper .column.right { text-align: right; }

.woocommerce-LoopProduct-link { margin-bottom: 2.5%; }
.customer-nav {
    width: 40%;                                
} 

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em)  { 
    
} 


/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) { 

.top-nav .menu-item { padding: 0 1.15%; }
/*.main-nav .menu-item a { padding: 20px 20px; }*/
/*.main-nav .menu-item:first-child a { padding-left: 10px; }*/

} 

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { }       

/* min-width 1921px, xxlarge screens */
@media only screen and (min-width: 120.063em) { } 

/*-------- nav marker hacks -----*/

@media only screen and (max-width: 2100px )  {
    .menu-top-menu-container .current-menu-item a:after {
        transform: translateY(35px) rotate(225deg);    
    }
}

@media only screen and (max-width: 1800px )  {
    .menu-top-menu-container .current-menu-item a:after {
        transform: translateY(32px) rotate(225deg);    
    }
}
@media only screen and (max-width: 1603px )  {
    .menu-top-menu-container .current-menu-item a:after {
        transform: translateY(31px) rotate(225deg);    
    }
}
@media only screen and (max-width: 1430px )  {
    .menu-top-menu-container .current-menu-item a:after {
        transform: translateY(29px) rotate(225deg);    
    }
}
@media only screen and (max-width: 1343px )  {
    .menu-top-menu-container .current-menu-item a:after {
        transform: translateY(28px) rotate(225deg);    
    }
}
@media only screen and (max-width: 1256px )  {
    .menu-top-menu-container .current-menu-item a:after {
        transform: translateY(27px) rotate(225deg);    
    }
}
@media only screen and (max-width: 1169px )  {
    .menu-top-menu-container .current-menu-item a:after {
        transform: translateY(26px) rotate(225deg);    
    }
}
@media only screen and (max-width: 1068px )  {
    .menu-top-menu-container .current-menu-item a:after {
        transform: translateY(25px) rotate(225deg);    
    }
}

   input [type="range"] {
        background: red;
   }