body {
  background: #000!important;
  font-family: 'Open Sans', sans-serif; 
  font: 'Open Sans', sans-serif;
}
#main, .site_wrapper {background-color: #000!important;}
.content_fullwidth {padding: 0px!important;}

/*type &amp; links*/
p, label {
  line-height: 1.3!important; 
  font-family: 'Open Sans', sans-serif; 
  font: 'Open Sans', sans-serif;
}
h1 {line-height:1.1!important;}
h2 {line-height:1.2!important; text-transform:none!important}
h3, h4, h5 {line-height:1.3!important; letter-spacing: 1.1em}
h5 {text-transform:uppercase}
p a {color:#FA71EC!important}
.copyright a {color:#9e3393!important}
/*a:hover {color:#ab389f}*/
/*alt-color for text boxes on purple backgrounds*/
.alt-color a {color:#a0ce67}
.alt-color a:hover {color:#ffffff!important}

/*nav*/
/*top nav after scrolling down*/
.compact .header {background: rgba(0,0,0,0.9)!important;}
/*side nav*/
.sb-slidebar {
  width: 30%!important; 
  min-width:100px!important;
  background-color: #222!important;
}
.sb-slidebar ul.nav > li > a {
    background-color: #63205c!important;
    border-bottom: 1px solid #812a78!important;
}
.sb-slidebar ul.nav > li > a:hover {
    background-color: #812a78!important;
}
.navbar-brand, .navbar-nav > li > a {text-shadow: none!important;}
.navbar-nav > li > a {box-shadow: none!important;}

/*home page*/
/*replacement for slider*/
.home-top-text {width:700px!important; max-width:90vw!important; margin-left:auto; margin-right:auto}
.home-top-logo {width:500px!important; max-width:70vw!important; margin-left:auto; margin-right:auto}
.no-space, .no-space p, .no-space img, .no-space p img {
  padding:0!important; 
  margin:0!important; 
  line-height:0px
}

#home-headline h2 {color: #fff; }
#home-headline h2 b {
  color: #000!important; 
  font-size:120%; 
  text-shadow: 5px 5px 10px #ab389f, -5px 5px 10px #ab389f, 5px -5px 10px #ab389f, -5px -5px 10px #ab389f
}
#home-headline h2 br {line-height: 130%}

.homepage-redbox h3 {text-transform:uppercase}
/*prevent image of glasses from becoming too short in height on small screens*/
#home-glasses {min-height:50vw}

/*because the king composer rules won't override a larger size or something*/
@media screen and (max-width: 767px) {
.homepage-321 {width:100%!important}
}

/*services page*/
/*contain bar colors slider in column*/
#services-content .master-slider {
  max-width: 75vw !important; /*keep slider from pushing right side of column off screen*/
  width:700px!important; 
  margin-left:auto!important; 
  margin-right:auto!important;
}
@media all and (max-width: 479px) {
  #services-content .master-slider {
  margin-left:0px!important; 
  margin-right:0px!important;
  }
}
/*spacer images*/
.spacer-image-large {width:100%; padding-top: 62.57%; margin-bottom:18px;}
#services1 {background: url(http://primobar.net/wp-content/uploads/2016/10/700px-wide-1.jpg); background-size:contain;  background-repeat:no-repeat}
#services2 {background: url(http://primobar.net/wp-content/uploads/2016/10/700px-wide-2.jpg); background-size:contain;}

/*logo slider*/
.logo-slider .owl-item {text-align:center}

/*faq page*/
/*spacer images*/
.spacer-image {width:100%; padding-top: 28.57%; margin-bottom:18px;}
#faq1 {background: url(http://primobar.net/wp-content/uploads/2016/10/spacer-image-1.jpg); background-size:contain; background-repeat:no-repeat}
#faq2 {background: url(http://primobar.net/wp-content/uploads/2016/10/spacer-image-2.jpg); background-size:contain; background-repeat:no-repeat}

/*contact page*/
.contact-photo-box h3 {font-size:30px!important}
.contact-photo-box a {color:#000!important}
.contact-photo-box a:hover {color:#9e3393!important}
.contact-page-form-box-wrapper {text-align:center!important}
.contact-page-form-box {
  display:inline-block!important; 
  width:auto!important; 
}

/*footer*/
.footer-logo {width: 100%; max-width:360px!important; margin: 0 auto;}
.footer-tagline p {
  font-family:"Roboto",sans-serif; 
  color: #9e3393; 
  font-weight:700; 
  font-size:24px; 
  line-height:1.2; 
  text-transform:uppercase; 
}
.footer-phone, .footer-phone a, .footer-phone h3 {
  color:#a0ce67!important; 
  font-size:30px!important
} 
.kc-multi-icons-wrapper a {padding: 5px!important;}

/*oops*/
.my-wht-bg {
  display: inline-block;
  background: rgba(255,255,255,0.85);
  padding:30px 10px 0px;
}
/*button*/
.my-button {
  background: #9e3393!important;
  padding: 10px 30px;
  text-transform:uppercase;
  color:#fff!important;
  transition: background 0.3s ease;
  display: inline-block;
}
.my-button:hover {
  background: #72256a!important;
}

/*plugins*/

/*slider*/
/*homepage slider - force primo bar logo to maintain aspect ratio*/
#slider-logo-layer {
  width:100%;
  height:auto!important;
}

/*forms*/
#formcenter {
  display:inline-block; 
  margin: 0 auto; 
  text-align:left; 
  /*background-color:#f0f;*/  /*for testing*/
}
/*1 container per row, if empty it forces a line break*/
.formboxinline-fullwidth {
  display:inline-block; 
  white-space:nowrap;
  min-width:30%; 
  float:left; 
  clear:left; 
  margin-right:3px; 
  margin-left:3px; 
  /*background-color:#ccc;*/  /*for testing*/
}
/*2 containers per row*/
.formboxinline {
  display:inline-block; 
  white-space:nowrap; 
  min-width:30%; 
  float:left; 
  margin-right:3px; 
  margin-left:3px; 
  /*background-color:#ccc;*/  /*for testing*/
}

label {font-weight: normal!important;}
input, textarea, select {
  font: 15px 'Open Sans', sans-serif;
  line-height: 23px;
  color: #444;
  margin-top:3px!important;
  margin-bottom:10px!important;
  border:none!important;
  padding: 3px 6px;
}
input, textarea {
  max-width:250px;
  min-width: 200px;
}

.cf7-quiz input {min-width: 30px;}
.cf7-quiz {white-space:normal; margin-top:15px}

/*override input min-width, which applies to radio buttons &amp; checkboxes*/
input[type="checkbox"], input[type="radio"] {min-width: 10px;}

.wpcf7-radio .wpcf7-list-item {white-space: nowrap}
.wpcf7-time, #guest-count {width: 90px; min-width:80px;}

/*submit button*/
input[type="submit"] {
 color:#fff;
 background-color:#9e3393; 
 padding: 3px 12px 1px!important;
 min-width: 40px;
}

input[type="submit"]:hover {background-color:#72256a;}
/*alerts*/
div.wpcf7-response-output {
   border: none!important;
   margin: 0!important;
   padding: 0!important;
}

/*form alerts*/
.wpcf7 span.wpcf7-not-valid-tip {
  display: block!important; 
  margin-top:-7px!important
}

/*datepicker*/
.ui-datepicker {
  border: 1px solid #666; /*outer border*/
  background: #000; /*background for entire datepicker*/
  color: #fff; /*S M T W Th F S*/}

.ui-widget {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1.1em;
}

.ui-corner-all {
  border-bottom-right-radius: 0px!important;
  border-bottom-left-radius: 0px!important;
  border-top-right-radius: 0px!important;
  border-top-left-radius: 0px!important;
}
/*header where the month and nav arrows are displayed*/
.ui-datepicker .ui-widget-header {
  border: none;
  background: #222;
  color: #fff;
}
/*month arrows*/
.ui-widget-header .ui-state-hover {
border:1px solid transparent!important;
background:transparent!important;
}
.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon {
  background-size:contain;
  background-position: center center;
}
/*prevent arows from moving up on hover*/
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top: 0px;}
/*.ui-datepicker .ui-datepicker-prev {left: 2px;}
.ui-datepicker .ui-datepicker-next {right: 2px;}*/

/*replace ugly arrows*/
.ui-datepicker-prev .ui-icon  {background-image: url("http://primobar.net/wp-content/uploads/2018/09/left-arrow.png");}
.ui-datepicker-next .ui-icon {background-image: url("http://primobar.net/wp-content/uploads/2018/09/right-arrow.png");}

a.ui-datepicker-prev, 
a.ui-datepicker-next,
a.ui-datepicker-prev:hover, 
a.ui-datepicker-next:hover {
  cursor:pointer;
}
/*arrows size*/
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
    width: 1.5em;
    height: 2em;
}

.wpcf7-form table thead tr, table tbody tr {border: none;}
.ui-datepicker table {margin: 0px 0px 0.2em;}

/*dates on calendar*/
/*all days except current day and hover*/
.ui-datepicker .ui-state-default, 
.ui-datepicker .ui-widget-content .ui-state-default, 
.ui-datepicker .ui-widget-header .ui-state-default {
  border: 1px solid transparent; 
  background: #222; 
  color: #fff; 
}
/*current day and hover*/
.ui-state-highlight, 
.ui-widget-content .ui-state-highlight, 
.ui-state-hover, 
.ui-widget-content .ui-state-hover {
  background: #9e3393; 
  border: 1px solid transparent; 
}

.ui-datepicker td span, .ui-datepicker td a {text-align: center; /*alignment of day number in square*/}
.ui-datepicker table {border-bottom: none;}

/*for text fields replacing datepicker when datepicker broke*/
#hours-text input {min-width:40px!important; width:98px!important}/*overrides input css above*/

/*paypal button*/
/*overrides form input field rules*/
.paypal-row input, .paypal-row h5 {margin: 0px!important}

/*popup maker*/
.pum-theme-22559, .pum-theme-default-theme {
    background-color: rgba( 0, 0, 0, 0.9 )!important;
}
.pum-theme-22559 .pum-container, 
.pum-theme-default-theme 
.pum-container {padding: 0px!important;}
.pum-theme-22559 .pum-content {background-color:#000; text-align:center}
#bar-color-slider-box {
  box-shadow: 0px 0px 30px #72256a!important;
  box-shadow: 0px 0px 20px #72256a!important;
}
#bar-color-slider-box img {
  width:100%!important; 
  height:auto!important; 
  margin:0!important; 
}
.pum-close {background-color:#9e3393!important;}
.pum-close:hover {background-color:#72256a!important;}

/*responsive*/
@media all and (max-width: 479px) {
  h1 {font-size:64px!important}
  h2 {font-size:50px!important}
}
@media all and (min-width: 768px) {
.full-height {height: 100%;}
  .mobile-only {display:none}
}
@media all and (max-width: 767px) {
  h1 {font-size:70px!important}
  h2 {font-size:54px!important}
  .mobile-only {display:block}
}
@media all and (min-width: 1000px) {
  .show-under-999 {display:none!important;}
  .hide-under-999 {display:block!important;}
}
@media all and (max-width: 999px) {
/*.kc_col-sm-10 {width: 100%!important;}*/
.show-under-999 {display:block!important;}
.hide-under-999 {display:none!important; width:0px!important; height:0px!important}
}