@CHARSET "UTF-8";

body { font-size: 62.5%; margin: 0; }
html { background-color: #1c1c26; color: #f6f6f6; font-family: 'Titillium Web', sans-serif; font-size: 2rem; font-weight: 400; width: 100%; }
a { color: #e457d5; text-decoration: none; }
a:hover { text-decoration: none; }
img { border: 0; margin: 0; }

/* ---- Navigation ---- */
#top-navigation { font-family: 'Montserrat', sans-serif; overflow: hidden; padding: 1% 0 1% 0; width: 100%; }
#top-navigation-content { margin: 0 auto; width: 95%; }
#logo { float: left; width: 14%; box-sizing: border-box; }
#navs { float: right; width: 70%;}
.handle { display: none; }
#navs-mobile { display: none; }
.navon, .navon:hover { padding: 2% 2% 0 2%; float: right; color: #e457d5; }
.navon a {}
.navon a:hover {}
.navoff, .navoff:hover { padding: 2% 2% 0 2%; float: right; }
.navoff a {}
.navoff a:hover {}
.phone-number {margin-bottom: 5px; margin-top: 5px;}
#hero-line { height: 5px; margin: 0; width: 100%; }
#wrapper { margin: 0 auto; padding: 1% 0 0 0; width: 85%; }

.full_scr { display: flex; flex-flow: row nowrap; margin: -10px 10px 0 -10px; padding: 0; }
.full_scr div { display: flex; flex-flow: row nowrap; padding: 0 5px; }
.rarrow { margin: 26px auto auto auto; }
.rarrow img { height: 30px; width: 30px; }
.hand_held { display: none; }

/* ------ PRODUCT PAGE ------- */
.accordion { background-color: #8e8eac; cursor: pointer; height: 133px; margin-bottom: 30px; width: calc(50% - 40px); margin-left: 20px; display: inline-block; border: none; outline: none; transition: 0.4s; }
.accordian-title { background-image: url("../images/arrow.png"); background-repeat: no-repeat; height: 130px; width: 80%; }
.title { color: #3c3c44; font-size: 30px; font-weight: 700; padding: 30px 0 0 40px; }
.sign { float: right; margin-right: 40px; margin-top: -45px; width: 50px; }
.catimage { background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; }
.catimage:hover { background-size: 103% 103%; }
.accordion.active, .accordion:hover {}
.panel { background-color: #1c1c26; display: none; overflow: hidden; padding: 2%; width: 96%; }
.panel.show { display: block !important; }
.product-wrapper { float: left; margin: 2%; width: 29.3%; }
.product-image { float: left; width: 100%; background-color: white; text-align: center; }
.product-image img { width: auto; max-width: 300px; max-height: 250px; }
.product-text { background-color: #2e2e3f; box-sizing: border-box; height: 450px; padding: 0 5% 2% 5%; }
select { background-color: #1c1c26; color: #f6e0e7; font-family: 'Titillium Web', sans-serif; font-size: 20px; font-weight: 400; margin-left: 5%; padding: 1%; width: 90%; }
.select-box { width: 100%; background-color: #353548; box-sizing: border-box; padding: 2% 6% 6% 4%; display: none!important;}
.select-box input[type="text"] { background-color: #b7b7ca; border: 1px solid #999; border-radius: 5px 5px 5px 5px; display: inline; height: 25px; width: 20%; margin: 0; }
.select-box input[type="checkbox"] { font-size: 100px; }
.products-form { background-color: #353548; box-sizing: border-box; text-align: right; padding: 2%; width: 100%; }
#get-quote-button { float: right; padding-top: 20px; display: none;}
.myQuoteButton { background: #861a96; border-radius: 5px; color: #fff; font-size: 24px; font-weight: 700; display: inline-block; text-align: center; padding: 16px 50px; }
.myQuoteButton:hover { background: #fff; color: #777; text-decoration: none; }
#delivery_message { display: none; }

/* ------ CHECKOUT PAGE ------ */
#checkout-left {   width: 50%; float: left; }
#checkout-right { width: 50%; float: left; }
table { border-collapse: collapse; width: 95%; }
tr { border-bottom: 2px solid #1c1c26; }
.top { background-color: transparent; color: #e2c1cc; }
.price { font-weight: bold; }
td { background-color: #2e2e3f; color: #fff; font-weight: 400; }

/* ------ FORM ON CHECKOUT -----*/
.checkout { margin: 0 auto; width: 90%; }

/* ------ FORM ON CONTACT PAGE ----- */
form { width: 100%; }
input {margin-bottom: 10px;}
input[type="text"], input[type="email"] { background-color: #b7b7ca; border: 1px solid #999; border-radius: 5px 5px 5px 5px; display: block; height: 40px; width: 99%; padding-left: 10px; }
input[type="radio"] { background-color: #b7b7ca; border: 1px solid #999; border-radius: 5px 5px 5px 5px; display: inline-grid; width: 10%; padding: 10px 0 0 0; text-align: left; }
select { margin-bottom: 10px; background-color: #b7b7ca !important; border: 1px solid #999; border-radius: 5px 5px 5px 5px; display: inline-grid; width: 25%; font-size: 14px; line-height: 14px; padding: 0; }
input[type="submit"] { border: 0; }
form div {margin-top: 10px;}
#address { background-color: #b7b7ca; border: 1px solid #999; border-radius: 5px 5px 5px 5px; display: block; height: 150px; width: 98%; }
.contactform { font-weight: 600; color: #baa9c3; }

/* ------- CONTACT BUTTON -------- */
#contactbutton { float: left; padding-top: 20px; }
#button { margin: auto; padding: 5%; text-align: center; }
.myButton { background: #861a96; border-radius: 5px; color: #fff; font-weight: 700; display: inline-block; text-align: center; padding: 16px 24px; }
.myButton:hover { background: #fff; color: #777; text-decoration: none; }

/*-------- FOOTER --------- */
#footer { background-color: #101016; min-height: 150px; width: 100%; }
#footer-content { box-sizing: border-box; color: #90a8cd; margin: 0 auto; padding: 2%; text-align: center; width: 80%; }
.footer-lower-content { width: 930px; }
.footer-image { float: left; padding-right: 250px; }

/* ------- PAGES CONTER CONTAINERS ------- */
.one-col { background-color: #17171f; box-sizing: border-box; font-size: .55rem; height: 100vh; margin-right: 3%; padding: 2%; width: 100%; }
.two-col-one { background-color: #17171f; box-sizing: border-box; float: left; font-size: .55rem; height: 100vh; margin-right: 3%; padding: 2%; width: 47%; border: 1px solid #000; }
.three-col { position: relative; background-color: #1c1c26; box-sizing: border-box; float: left; font-size: .55rem; margin-right: 3%; padding: 2%; width: 30%; }
.three-col-two { position: relative; background-color: #1c1c26; box-sizing: border-box; float: left; font-size: .55rem;  margin-right: 3%; padding: 2%; width: 64%; }
.three-last { margin: 0; }
.four-col { position: relative; background-color: #2e2e3f; box-sizing: border-box; float: left; font-size: .55rem; margin-top: 4%; margin-right: 3%; padding: 2%; width: 22%; }
.four-col-two { position: relative; background-color: #f1f1f1; box-sizing: border-box; float: left; font-size: .55rem; height: 100vh; margin-right: 3%; padding: 2%; width: 47%; }
.four-col-three { position: relative; background-color: #1c1c26; box-sizing: border-box; float: left; font-size: .55rem; margin-right: 3%; padding: 2%; width: 72%; }
.four-col li:before { color: #dd7d00; content: "\2713\0020"; margin-left: -1em; margin-right: .100em; }
.four-col ul { font-weight: 700; list-style-type: none;  line-height: 2em; text-align: left; list-style-position: outside; }
.clear { clear: both; }
.footer-spacer { height: 90px; width: 40px; }
.spacer { height: 30px; width: 30px; }
.line { border-bottom: 1px #d3d3d3 solid; margin: 0 auto; width: 90%; }

/* ------------ MEDIA QUERIES ------------- */
@media screen and (min-width: 1600px) {
  .product-wrapper { float: left; margin: 1%; width: 23%; }
}



@media screen and (max-width: 1280px) {
   .accordion { height: 133px; margin-bottom: 30px; width: 100%; display: block; margin: 20px auto;}
}

@media screen and (max-width: 1024px) {
  /* ---- Navigation ---- */
  #top-navigation { width: 100%; font-size: 16px; }
  #logo { width: 150px; position: absolute; }
  #navs {width: 75%; }
  .navoff, .navoff:hover, .navon, .navon:hover { padding: 2% 4% 0 2%; }
  
  .full_scr { display: none; }
  .hand_held { display: block; }
  .hand_held ul { padding-left: 0; font-weight: 400; list-style-type: none; }
  .hand_held li { padding-left: 55px; text-indent: -55px; margin-top: 10px; }
  .hand_held li img { height: 30px; vertical-align: middle; padding-right: 5px; }

  .three-col { float: none; width: 100%; }
  .three-col-two { float: none; width: 100%; }
  .four-col { float: none; padding: 3%; width: 100%; }
  .four-col-three { float: none; padding: 3%; width: 98%; }
  .product-wrapper { float: none; width: 98%; }
  .accordian-title { background-size: contain; height: 100px; font-size: 26px; }
  .sign { width: 50px; margin-top: -41px; }
  .title { font-size: 24px; padding: 47px 0 0 30px; }
  #footer-content { box-sizing: border-box; padding: 5%; width: 100%; }
}

@media screen and (max-width: 600px) {
  .sign { width: 40px; margin-right: 20px; margin-top: -32px; }
  .title { font-size: 20px; padding: 48px 0 0 20px; }
  #logo { width: 100px; }
  select { display: block; width: 50%; margin: 10px;}
}

@media screen and (max-width: 359px) {
  .title { font-size: 20px; padding: 50px 0 0 20px; }
}