@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Barlow:400,900&display=swap');

:root {
    --yellow: 		#f5a800;
	--blu: 			#52534a;   /* #005070   */
	--gray: 		#52534a;
	--lightgray: 	#F5F5F5;
	--dark: 		#111;
	--sans-serif:	'Barlow', sans-serif;
}

/* Reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		hyphens: none !important;		
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {	
		line-height: 1;
		-webkit-text-size-adjust: none;
	}
	
	ol, ul {
		/* list-style: none; */
	}

	blockquote, q {quotes: none;}
	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	table a{color: black !important;}
	table thead th{
		font-weight: bolder;
		vertical-align: middle !important;
	}

/* TAG */

	html, body {
		font-family: var(--sans-serif);
    	text-align: left;
		height: 100%;
		background-color:  var(--lightgray);
		color: var(--dark);
		font-size: 11pt;
		-webkit-hyphens: auto;
		 -moz-hyphens: auto;
			  hyphens: auto
	}
	
	p, label {
		line-height: 150%;
		letter-spacing: 1px; 
		text-align: justify;
		font-size: 18px;
		width:100%;
		font-weight:300;
		color: var(--dark);
		clear: both;
		/* margin-bottom:10px; */
	}

	
	strong {font-weight: bold;}
	i {font-style: italic;}
	.shadow {text-shadow: 0 2px 0 #222;}
	
	ul, ol {padding: 0 !important; margin-left: 35px;}
	li {
		line-height: 150%;
		letter-spacing: 1px;
		font-size: 18px;
		font-weight:300;
		color: var(--dark);
	}
	
	h2 {		
		font-family: var(--sans-serif);
		letter-spacing: 2px; 
		color: var(--dark);
		font-size: 40px;
		font-weight: bold;
		/* margin: 20px auto 10px; */
		padding: 10px 0 20px;
		/* text-transform: uppercase;	*/
	}
		
	h3 {
		font-family: var(--sans-serif);
		letter-spacing: 2px; 
		font-weight: bold;
		color: var(--dark);
		padding: 10px 0px;
		font-size: 24px;
	}	

	h4 {
		font-family: var(--sans-serif);
		letter-spacing: 1px; 
		color: var(--dark);
		padding: 10px 0;
		font-size: 20px;
		font-weight: bold;
		float: left;
		width: 100%;
	}

	h5 {
		font-family: var(--sans-serif);
		color: var(--dark);
		margin: 10px 0;
		font-size: 14px;
		font-weight: bold;
		float: left;
		width: 100%;
	}
	
	
	hr {
      display: block;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      border-width: 5px;
    }
    
	
	a {
	 	color: var(--lightgray);	
		transition-property: color;
		transition-duration: 0.2s;
		transition-timing-function: ease-in-out;
	}
	a:hover, a:focus {
		color: var(--yellow);
		opacity: 0.8;
		cursor: pointer !important;
		text-decoration: none !important;	
	}
        
        a.btn{
            text-transform:uppercase;
        }

	footer {
		background-color: var(--dark);
		border-top: 3px solid var(--yellow);
		min-height: 150px;
		padding: 30px 10px;
	}		
	footer p {font-size: 11pt;line-height: 125%;}
    
    #footer-right p,
    #footer-right a,
    #footer-right ul {text-align: right;}

/* Menu Slideout */
	
	.slideout-menu {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 240px;
		min-height: 100vh;
		overflow-y: none;
		-webkit-overflow-scrolling: touch;
		z-index: 9999;
		display: none;
		border: none;
		border-right: 2px solid var(--yellow);
	}
	.slideout-menu ul {margin-left: 0;}
	.slideout-menu-left {left: 1;}
	.slideout-menu-right {right: 0;}
	.slideout-panel {
		position: fixed;
		top: 0;
		width: 100vw;
		min-height: 100vh;
		z-index: 9998;
		will-change: transform;
		background-color: transparent; /* A background-color is required */
		height: 100%;
	}
	.slideout-open,
	.slideout-open body,
	.slideout-open .slideout-panel {
		overflow: hidden;
	}
	.slideout-open .slideout-menu {
		display: block;
	}

	#slidemenu {
		/* background-color: rgb(10,10,10,0.6); */
		background-color: var(--dark);
		padding: 30px 0;
		overflow: hidden;
		margin-top: 40px;	
	}
	#slidemenu a {
		padding: 5px 5px 5px 30px;
		font-family: var(--sans-serif);
		font-size: 14pt;
		color: var(--lightgray);
		text-transform: uppercase;
		line-height: 250%;
		/* max-width: 200px; */
	}
	
	#slidemenu .dropdown-menu a::before {content:"";}
	
	#slidemenu li > ul > li.active > a {background-color: var(--blu);}
	    
	#slidemenu  .active > a {
		background-color: var(--yellow);
		
	}
	#slidemenu a.active {
		cursor: default;
		pointer-events: none;
	}
	#slidemenu .dropdown-menu {
	    background-color: transparent !important;
		position:relative;
		display: block !important;  /* dropdown alwais open */
		margin-top: -7px;
	}
	#slidemenu .dropdown-menu a {
		padding: 0 0 0 40px ;		
		font-size: 10pt;
		/* width: 200px;
		display: block;
		margin: 0 auto;  */
	}

	
	.toggle-button {
		border: none;
		font-size: 20pt;
		background-color: transparent !important;
		border: 1px solid transparent;
		padding: 0 12px !important;
		margin: 5px 0 !important;
                color: var(--yellow);
		text-align: left;
	}
	
	.toggle-button:hover:focus {border: none;	background-color: var(--yellow);}
	.toggle-button i:hover:focus {border: none;}

/* Upper_bar */
	
	#upper_bar {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		max-width: 100%;
		height: 40px;		
		background-color: var(--yellow);
		z-index: 105;
		padding: 0px 10px 0px;
		margin: 0;		
		display: flex;		
		align-items: center;		
	}
	#upper_bar ul {margin: 0;}
	#upper_bar #menu_language li  {float: left;}
	
	#menu_language div.dropdown-menu { left:-100px;}
	#menu_language form { padding:10px;}
        #menu_language form ul {display:inline-block;}
        #menu_language form ul a {color: var(--yellow); padding-left:0 !important;} 
   #menu_language label {color: var(--lightgray);}
   #menu_language button {margin: 0 auto;}
   
/* Header */
	
	header {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		max-width: 100%;
		background: var(--dark);
		z-index: 100;
	}	
	
	#logo {		
		padding: 8px;
		height: 40px;
	}
	
	#logo_footer {	
    	vertical-align: middle;
    	float: left;
    	margin-right: 10px;
	}
	
	/* #menu_language ul {float: right;} */
	
	
	#menu_language a:focus {color: var(--lightgray) !important;}
	#menu_language a {padding: 10px;}
	#menu_language li a {
		font-family: var(--sans-serif);
		font-size: 9pt;
		padding: 10px 25px !important;
		color: var(--lightgray);}
	#menu_language img {
		height: 20px;
		width: 20px;
		border-radius: 1em;
	}
	.mod-languages a {padding: 10px 15px 6px 6px !important;}
	
	
	#menu_pages ul {			
		/* float: right;		 */
	}
	#menu_pages li a {
		font-family: var(--sans-serif);
		letter-spacing: 1px; 
		padding: 11px 20px;
		text-transform: uppercase;
		font-size: 11pt;
		color: var(--lightgray);
		background-color: transparent;
	}
	#menu_pages li.active {
		cursor: default;
		font-weight: bold;
		background-color: var(--yellow);
	}
	
	#menu_pages li.active a { color: var(--dark); border-bottom:4px solid rgb(255,255,255,0.6); }   
	
	
	/*
	#menu_pages li.active a,#menu_pages li.active a:hover{color:var(--dark) !important;	}
	
    ul.dropdown-menu li a {	font-size: 12pt !important; } 
    */
	
	
	.dropdown {		
		cursor: pointer;
		pointer-events: auto;
	}
	.dropdown-menu {
		background-color: var(--dark);
		border: none;
		margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
	}
	.dropdown-menu > li > a { color: var(--lightgray) !important; border:none !important; }
	.dropdown-menu > li > a:hover,
	.dropdown-menu > li > a:focus {
        color: var(--dark) !important;
        background-color: var(--yellow)  !important;
    }
	
	.navbar-nav .dropdown-toggle::after {
		display: inline-block;
		margin-left: .255em;
		vertical-align: .255em;
		content: "";
		border-top: .3em solid;
		border-right: .3em solid transparent;
		border-bottom: 0;
		border-left: .3em solid transparent;
	} 

	

	
/* Social */
	
	.social_circle li a,
	.social_rounded i {font-size: 14pt;color:var(--dark);}
	.social_circle li,
	.social_rounded li {	
		display: inline-block;
	    height: 36px;
		width: 36px;
		margin: 0 5px;
		text-align: center;
		padding-top: 5px;
		transform: rotate(1deg);
            -webkit-transform: rotate(1deg);
            -moz-transform: rotate(1deg);
            -o-transform: rotate(1deg);
            -ms-transform: rotate(1deg); }
	.social_circle li {border-radius: 100em;}
	.social_rounded li {border-radius: 0.6em;}
	
	
	
	
/* Sticky */
	
	.sticky {
	  position: sticky;
	  top: 40px;
	  z-index:98;
	}
	
	#sticky_bar a {
		padding: 15px 15px 10px;
		/* font-size: 16px; */
		float: left;
	} 	
	
	
/* Background */

	.full_background {
		background-position: 0 0;
		background-color: white;
		position:relative;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
	
	#blank_container {padding-top: 42px;} /* is Header Height */
	
	.fill_page {
	    min-height: calc(100% - 190px);  /* is (100% - (FOOTER)px) */
	}	
	
/* Section & Colors */
	
	.blu {background-color: var(--blu) !important;border-color:var(--blu);}
	.yellow {background-color: var(--yellow) !important; border-color:var(--yellow);}
	.lightgray {background:linear-gradient(to bottom,#f5f5f5 0,#d9d6d1 100%) repeat scroll 0 0 rgba(0,0,0,0) !important;}
	.gray {background-color: var(--gray) !important; border-color:var(--gray); color:white;}
	.dark {background-color: var(--dark) !important; color:white;}
	.pattern {background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23222222' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"););}
	
	.text-dark {color: var(--dark) !important}
	.text-yellow {color: var(--yellow) !important}
	.text-gray {color: var(--gray) !important}
	.text-white {color: white !important}
	.white {background-color: white !important;}	
	
	.gray p,
	.gray h2,
	.gray h3,
	.gray h4,
	.gray a,
	.gray label,
	.blu p,
	.blu h2,
	.blu h3,
	.blu h4,
	.blu a,
	.blu label,
	.dark p,
	.dark h2,
	.dark h3,
	.dark h4,
	.dark a,
	.dark label{ color: white; }
	
	.yellow button {		
		background-color: white;
		color: var(--dark);
	}
	
	.blu button:hover {		
		background-color: white;
		color: var(--blu);
	}

	
/* Owl.carousel */

	#owl_1 .owl-item {
		height: 660px;
		padding: 4px;
		border-radius: 4px;
		/* margin: 15px; */
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
	}
	#owl_1 .owl-item p {
		font-size: 14px;
		letter-spacing: auto; 
		font-style: italic;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 10px;
		text-align: justify;
		color: var(--dark);		
	}
	#owl_1 .image {	height: 350px;	}
	#owl_1.one {width: 480px; margin-left: 330px;}
	#owl_1 {padding: 0}
    #slider .image {padding: 70px;}
	
	
	#wall {margin:40px auto; text-align: center}
	
	
/* Button - Input */
	
	label {
		font-size:12px;
		color: var(--dark);
				
	}
	label.invalid, .nav-tabs > li > a:hover { background-color: transparent; border: 1px solid transparent;}
	
	input, select, textarea {
		border: 1px solid var(--blu);
		font-size: 12pt;
		padding: 6px;
		background-color: white;		
	}
	
	
	textarea {height: 7em; width:100%;}

	button, input[type="submit"] {
	    text-transform: uppercase;
		margin: 10px auto !important; 
		padding: 20px;
		font-size: 11pt;
		letter-spacing: 1px; 
		border-radius: 10px;
		background-color: var(--yellow);
		/* border: 2px solid var(--lightgray); */
		border:none;
		box-shadow: 0 6px 12px rgba(0,0,0,.175);
		color: var(--dark);
		font-weight: bold;
		width: auto;
		transition-property: background-color;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
	}
	
	input[type="checkbox"] {
		color: white;
		width: 15px;
		height: auto;
		position: relative !important;
		margin-left: 0 !important;;
	}
	
	button:hover,
	input[type="submit"]:hover, input[type="checkbox"]:hover {
		background-color: var(--blu);
	    /* border: 2px solid var(--lightgray); */
		border:none;
		color: white;
		cursor: pointer;
	}	
	
	#cta button {padding: 20px;}

	.btn:hover {
		color: var(--yellow);
		opacity: 0.8;
		cursor: pointer;
	}

	
/* Utilities */

    .block_center {	display: block; margin: 0 auto; }	
	.h_center {	display: flex; align-items: center; }
	
	.pv50       { padding-top: 50px; padding-bottom: 50px; }
	.p25        { padding: 25px; }
	.p50        { padding: 50px; }
	.no_padding { padding: 0; }
	
	.m10       { margin: 10px !important; }
	.m25       { margin: 25px !important; }
	.mt50       { margin-top: 50px; }
	.mb50       { margin-bottom: 50px; }
	.mv20       { margin-top: 20px; margin-bottom: 20px; }
    .borded     { border: 2px solid var(--yellow); border-radius:5px; padding:10px; }

    .mugshotA   { margin:5px auto; border:5px solid var(--yellow); border-radius:4px;
                  transform: rotate(1deg);
                    -webkit-transform: rotate(1deg);
                    -moz-transform: rotate(1deg);
                    -o-transform: rotate(1deg);
                    -ms-transform: rotate(1deg); }
    .mugshotB   { margin:5px auto; border:5px solid var(--gray); border-radius:4px;
                  transform: rotate(359deg);
                    -webkit-transform: rotate(359deg);
                    -moz-transform: rotate(359deg);
                    -o-transform: rotate(359deg);
                    -ms-transform: rotate(359deg);  }
    .photo      { padding: 50px 150px; }              
    .photo img  { border:5px solid var(--gray); border-radius:4px; }
                    
    .skew-rbyt,
    .skew-lbtb,
    .skew-rbbt,
    .skew-lbyb,
    .skew-lbtg {width: 100%;height: 40px;left:0px;}
    .skew-rbyt {background: linear-gradient(to right bottom, var(--yellow) 48%,  transparent 50%);background-color:#f5f5f5;}
    .skew-rbtb {background: linear-gradient(to right bottom, transparent 48%,  var(--blu) 50%);}
    .skew-rbbt {background: linear-gradient(to right bottom, var(--blu) 48%,  transparent 50%);}
    .skew-lbtb {background: linear-gradient(to left bottom, transparent 48%,  var(--blu) 50%);}
    .skew-rbbt {background: linear-gradient(to right bottom, var(--blu) 48%, transparent 50%);}
    .skew-lbtg {background: linear-gradient(to left bottom, var(--lightgray) 48%,  var(--gray) 50%);}
    .skew-lbyb {background: linear-gradient(to left bottom, var(--blu) 48%,  var(--yellow) 50%);background-color:#f5f5f5;}
	.skew-rtby {background: linear-gradient(to right top, var(--blu) 48%,  var(--yellow) 50%);}
    .skew-rbty {background: linear-gradient(to right bottom, transparent 48%,  var(--yellow) 50%);}

    .rotate-left {
       transform:rotate(359deg);
        -webkit-transform: rotate(359deg);
           -moz-transform: rotate(359deg);
             -o-transform: rotate(359deg);
            -ms-transform: rotate(359deg);   }
    .rotate-right {
       transform:rotate(1deg);
        -webkit-transform: rotate(1deg);
           -moz-transform: rotate(1deg);
             -o-transform: rotate(1deg);
            -ms-transform: rotate(1deg);    }

/* javascript support */
	
	.scrollup, .cartBtn {
        position: fixed;
        display: block;
        z-index: 1000;
        right: -5px;
        width: 45px;
        height: 80px;
        background: var(--yellow);
        border-radius: 4px;
        opacity:0.9;
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
        color: var(--dark);
        text-align: center;
		font-size: 25px;
		font-weight: 700;
		transition-property: right;
		transition-duration: 0.5s;
		transition-timing-function: ease-in-out;	}
        .scrollup:hover, .scrollup:focus { color:var(--dark); }
    
    .scrollup {padding: 18px 0;	bottom: 280px; }
        .scrollup p { text-align: center; font-size:9pt; }
        
    .cartBtn  {padding: 30px 0; bottom: 370px;}
        .cartBtn a { padding:30px 0; color:var(--dark); }
	
	
/* Device responsive */

	@media screen and (max-width: 1023px) {

		.container-fluid {padding-right: 0px; padding-left: 0px;}
        /* p {font-size: 16px;} */
        h2 {font-size: 36px;}
		.h_center {display: block;}
		.banner {max-height: 200px}
	
		#sticky_bar a {clear: both;} 
		
		#owl_1.one { width: auto;margin:0; }
		#owl_1 .image { height: 200px; }
		#owl_1 .owl-item { height: 525px; }
		#owl_1 .owl-item p { font-size: 11pt; }
		
		#cta button { display:block; margin: 0 auto;}
		#carousel h2 {text-align:center;}
		#carousel h4 {font-size: 18px;}
	
		header div.container {padding: 0;}
		/* header, #banner_top {padding: 0 !important; margin-top:40px;} */
	
	    #menu_language ul {
		    float: right;
		    left: -90px;
		    color: var(--lightgray);
		    padding: 5px !important;
		}
		
		#menu_language ul li a {padding: 5px;}
		
		img {max-width: calc(100vw - 50px);}
		img.p50 { padding: 20px 0; }
		
		footer p,
		footer a,
		footer ul {font-size: 14px; text-align:center !important;}
		
		.photo { padding: 20px 0; }
		
		#wall { margin: 10px auto; }
	}



/*    OVERRIDE    */

    .navbar-nav .dropdown-toggle::after {
        display: inline-block;
        vertical-align: 0 !important;
    }

    .alert-info, .alert-danger, .alert-success, .alert-warning, .alert-dismissible {
        background-color: var(--yellow);
        color: var(--dark);
        border: none;
        padding: 10px 30px 10px 10px;
        opacity: 0.9;
    }
   


    
    .well { border: none; background-color: #fff; }
    .login + div { background-color: var(--blu); }
    
    .checkbox label {width:auto;}
    .checkbox input {margin: 10px 0 0;}
    
    #redim-cookiehint {background-color: var(--dark) !important;}
    #redim-cookiehint .cookiebuttons .btn {background-color: var(--yellow) !important;}
    
   
    
    /* Effects */

    
    .icons{display:none;}
    
    
    /* Languages */
    
    .mod-languages .caret {margin: -6px 0 0;}
    .mod-languages .btn.focus,
    .mod-languages .btn:focus,
    .mod-languages .btn:hover,
    #shortcut a:hover,
    #shortcut a:focus{color: var(--yellow);}
    .mod-languages .btn-group,
    .mod-languages .btn-group-vertical {float: right; padding: 0;}
    .mod-languages li {margin: 0 !important;}

    
	
	/* virtuemart */
	
	.form-group {margin-bottom: 5px;}
	#com-form-login a,
	fieldset a {color:var(--blu);font-weight: bold;display:block;margin:10px 0;}
	
	
	.vm-product-container {
	    padding-top:30px;
	 }
	.product-price {
	    font-size: 30pt;
        font-weight: bold;
        float: none;
        text-align: right;
        margin-top: 20px;}
	.vm2-add_quantity_cart,
	.vm2-remove_from_cart {width:30px; height:30px; padding:0 8px; margin:5px !important; vertical-align: middle;}
    .vm2-add_quantity_cart:hover,
    .vm2-remove_from_cart:hover {border:none;}

	input[type="radio"], input.quantity-input {
	    width:auto;
	    height:auto;
	    text-align:center;
	    color:black;}
	    
	.addtocart-area {float:right;}
    .priceColor2 {color:var(--dark);}
    
    .vm-fieldset-pricelist input,
    .vm-fieldset-pricelist span,
    .table > thead:first-child > tr:first-child > th {
        margin:0;
        padding:0;
        font-size:10pt !important;}
    .vmshipment_description {display:none;}
    
    .PriceshipmentTax, .PricesalesPriceShipment,
    .PricebillTaxAmount, .PricebillTotal  {text-align:left;}
    
    .table > thead > tr > th,
    .table > tbody > tr > td {
        vertical-align:top !important;
        padding: 5px 0; }
    
    .table > tbody > tr > td h4 { padding-bottom:0;}
   
   .vm-fieldset-pricelist thead,
   .table > thead > tr > th,
   .table > tbody > tr > td {border-bottom: 2px solid var(--yellow);border-top: none;}
  
    .customer-note{vertical-align:top;}
    
    #facebox .popup {height:70vh;overflow-y: scroll;}
    #facebox .content {width: 70vw;}
    #facebox .close {height:30px;width:30px;background: url("../images/close.png"); opacity:1; }
        #facebox .close img {display:none;}
    
    
    
    span.addtocart-button input.addtocart-button,
	.btn-primary, .control-buttons button,
	.vm-button-correct, a.ask-a-question 	{
        max-width: 98%;
        background: var(--blu);
        color: #fff;
        /* border: 2px solid var(--blu); */
        border: none;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.5;
        vertical-align: middle;
        cursor: pointer;
        text-align: center;
        padding: 10px 15px;
        margin: 15px 0;}
        #CTA2 input.addtocart-button { background: var(--yellow); }
	
	span.addtocart-button input.addtocart-button:hover, 
	.btn-primary:hover, .control-buttons button:hover,
	a.ask-a-question:hover, .vm-button-correct:hover {
	    opacity: 0.9;
	    color: #fff;
            background: var(--blu);
            border-color: var(--blu);}
	
	.control-buttons {margin: 10px;}

	.vm-prices-info, .coupon {font-size: 14pt; margin-top: 12px;font-weight:500;}
	
	.product-fields-ontop .product-fields .product-field {
        width: 100%;
        display: inline-block;
        margin-bottom: 0px;}
    
    #checkoutFormSubmit {
        padding: 15px 20px;
        font-size:14pt;
        float:right;
        margin:15px !important;
        background: var(--yellow);
        border: 2px solid transparent;}
     #checkoutFormSubmit[name="confirm"] {
        background: var(--blu);
        border: 2px solid white;}
    
    .quantity-box, .quantity-controls  {display:none !important}
    
     #userForm input, #adminForm input  {width:100%;}
     table.user-details input,
     table.user-details select {
        border: 1px solid var(--blu) !important;
		border-radius:0 !important;
		padding: 6px !important;
		background-color: white !important;	
     }
     table.user-details {width:auto !important;}
     
     textarea#customer_note_field {width: 100%;}

    @media screen and (max-width: 480px) {
        
        .cart-view h4 { font-size:12pt;}
        .table > thead > tr > th,
        .table > tbody > tr > td,
        .vm-fieldset-pricelist span,
        .vm-fieldset-pricelist input,
        .vm-fieldset-pricelist span{font-size: 9pt !important;}
        #checkoutFormSubmit {float:none;display:block;margin: 15px auto !important;}
        .control-buttons {text-align:center;}
        span.addtocart-button input.addtocart-button,
        .btn-primary, .control-buttons button,
        .vm-button-correct, a.ask-a-question {font-size: 10pt;font-weight:normal;}
        .checkout-button-top {text-align: left;}
    }

    .checkoutStep{
          margin-top: 40px;
        margin-bottom: 20px;
        background: var(--blu);
        color: white;
        padding: 10px;
    }
    .cart-view h5{
        float:inherit;
    }
    .tos a{
        color:var(--dark);
    }
    
    fieldset.vm-payment-shipment-select{
           display:inline-block;
    }
    
       
    /* === card component ====== 
     * Variation of the panel component
     * version 2018.10.30
     * https://codepen.io/jstneg/pen/EVKYZj
     */
    .card{ background-color: #fff; border: 1px solid transparent; border-radius: 6px; }
    .card > .card-link{ color: #333; }
    .card > .card-link:hover{  text-decoration: none; }
    .card > .card-link .card-img img{ border-radius: 6px 6px 0 0; }
    .card .card-img{ position: relative; padding: 0; display: table; }
    .card .card-img .card-caption{
      position: absolute;
      right: 0;
      bottom: 16px;
      left: 0;
    }
    .card .card-body{ display: table; width: 100%; padding: 12px; }
    .card .card-header{ border-radius: 6px 6px 0 0; padding: 8px; }
    .card .card-footer{ border-radius: 0 0 6px 6px; padding: 8px; }
    .card .card-left{ position: relative; float: left; padding: 0 0 8px 0; }
    .card .card-right{ position: relative; float: left; padding: 8px 0 0 0; }
    .card .card-body h1:first-child,
    .card .card-body h2:first-child,
    .card .card-body h3:first-child, 
    .card .card-body h4:first-child,
    .card .card-body .h1,
    .card .card-body .h2,
    .card .card-body .h3, 
    .card .card-body .h4{ margin-top: 0; }
    .card .card-body .heading{ display: block;  }
    .card .card-body .heading:last-child{ margin-bottom: 0; }
    
    .card .card-body .lead{ text-align: center; }
    
    @media( min-width: 768px ){
      .card .card-left{ float: left; padding: 0 8px 0 0; }
      .card .card-right{ float: left; padding: 0 0 0 8px; }
        
      .card .card-4-8 .card-left{ width: 33.33333333%; }
      .card .card-4-8 .card-right{ width: 66.66666667%; }
    
      .card .card-5-7 .card-left{ width: 41.66666667%; }
      .card .card-5-7 .card-right{ width: 58.33333333%; }
      
      .card .card-6-6 .card-left{ width: 50%; }
      .card .card-6-6 .card-right{ width: 50%; }
      
      .card .card-7-5 .card-left{ width: 58.33333333%; }
      .card .card-7-5 .card-right{ width: 41.66666667%; }
      
      .card .card-8-4 .card-left{ width: 66.66666667%; }
      .card .card-8-4 .card-right{ width: 33.33333333%; }
    }
    
    /* -- default theme ------ */
    .card-default{ 
      border-color: #ddd;
      background-color: #fff;
      margin-bottom: 24px;
    }
    .card-default > .card-header,
    .card-default > .card-footer{ color: white; background-color:var(--blu); }
    .card-default > .card-header h3,
    .card-default > .card-footer h3{color: white;};
    .card-default > .card-header{ border-bottom: 1px solid #ddd; padding: 8px; }
    .card-default > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
    .card-default > .card-body{  }
    .card-default > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
    .card-default > .card-left{ padding-right: 4px; }
    .card-default > .card-right{ padding-left: 4px; }
    .card-default p:last-child{ margin-bottom: 0; }
    .card-default .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
    
    
    /* -- price theme ------ */
    .card-price{ border-color: #999; background-color: #ededed; margin-bottom: 24px; }
    .card-price > .card-heading,
    .card-price > .card-footer{ color: #333; background-color: var(--blu); }
    .card-price > .card-heading{ border-bottom: 1px solid #ddd; padding: 8px; }
    .card-price > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
    .card-price > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
    .card-price > .card-left{ padding-right: 4px; }
    .card-price > .card-right{ padding-left: 4px; }
    .card-price .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
    .card-price p:last-child{ margin-bottom: 0; }
    
    .card-price .price{ 
      text-align: center; 
      color: #337ab7; 
      font-size: 3em; 
      text-transform: uppercase;
      line-height: 0.7em; 
      margin: 24px 0 16px;
    }
    .card-price .price small{ font-size: 0.4em; color: #66a5da; }
    .card-price .details{ list-style: none; margin-bottom: 24px; padding: 0 18px; }
    .card-price .details li{ text-align: center; margin-bottom: 8px; }
    .card-price .buy-now{ text-transform: uppercase; }
    .card-price table .price{ font-size: 1.2em; font-weight: 700; text-align: left; }
    .card-price table .note{ color: #666; font-size: 0.8em; }
    
    .productdetails-view .addtocart-bar {margin: 0 !important;}
    .vm-product-container > div {margin-bottom: 0 !important;}
    
    .PricepriceBeforeTax{
    	font-size: 25px;
    	margin-top: 20px;
    	font-style: italic;
    	margin-bottom: -8px;  }
    
    .page-header {
        padding-bottom: 0px;
        margin: 40px 0 0px;
        border-bottom: none;}


    
    .help-block.with-errors{
        font-weight: bolder;
       
    }
    
    .help-block.with-errors ul li::before{
        display:inline-block;
        margin-right: 10px;
        font-size:20px;
        content:'!';
        background: #a94442;
        border-radius:30px;
        padding:5px;
        color:white;
        width:30px;
        height:30px;
        text-align:center;
        -webkit-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);

    }
    
     button.close{border: none; margin: 0 !important; background-color: transparent; font-size:30px;}
    .modal-header {background-color: var(--yellow); padding: 5px 15px;border-radius: 6px 6px 0 0;}
    .modal-dialog { width: 95vw !important;}
    .modal h3 span{
        display:inline-block;
        font-size:18px;
        margin-top: 5px;
        color:var(--yellow);
    }
    .modal-body > p {font-size: 10pt;text-align:left;}
    .modal-body > p > a {color: var(--dark);}
    
    .rapid_contact .intro_text {
        font-size: 16px;
        color: var(--gray);
        margin-bottom:10px;
    }