body { color: #fff; font-family: 'Open Sans', sans-serif; overflow-y: scroll; }
a, a:hover, a:active { color: #a7e6f8; text-decoration: none; }
a:hover { color: #B81B13; }
a, button { transition: .25s all ease-in-out; }

body, .footer { background-color: #555; }

.list-group-item { border: none; background-color: rgba(0,0,0,0);}
footer { position: fixed; bottom: 0; z-index: 99; }
footer a {     color: #a7e6f8; }
.fa-stack-1x { color: #000; }

.text-center { text-align: center; }

nav { background-color: #a7e6f8; }

.navbar-nav { width: 100% }

.nav-link img { max-width: 4rem;}

nav i.fa {display: none; }

.navigation { background-color: #d3ecfd; color: #000; position: relative; font-size: 1.25em;  }
.navigation ul { margin: 0; }
.navigation li { width: 50%; position: relative; padding:10px 12px 0; }
.vsp-badge a { display: block; text-align: center; }
.vsp-badge { position: absolute!important; right: 0; top: 50%; margin-top: -70px; }

.separator { margin-top: -5px; height: 5px; position: relative; }
.separator img { display: block; height: auto; max-width: 100%; }

.separator + .box-yellow, .separator + .box-black, .separator + .box-blue, .separator + .box-white, .separator + .box-dark-blue { margin-top: 0px;  }

.box-blue, .box-red, .box-black, .box-white, .box-dark-blue, .box-light-grey { overflow: hidden; padding-bottom: 36px; padding-top: 24px; }
.box-blue { background-color: #c7dce9; }
.box-blue a { color: #d1342c; }
.box-light-grey { background-color: #e1e1e1; }
.btn-red { background-color: #d1342c; color: #fff!important; }
.btn-red:hover { background-color: #EB4E46; border-color: #333; }
.box-blue a, .box-red a { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0); }
.box-red a { color: #c7dce9;  }
.box-red a:hover, .box-blue a:hover { text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); }
.box-red { background-color: #d1342c; color: #fff; }
.box-dark-blue { background-color: #0e76bc; color: #c3d8e4; }
.box-dark-blue a { color: #fff; }
.btn-default { background-color: #c7dce9; color: #222; }
.btn-default:hover { background-color: #AEC3D0; border-color: #333; color: #000; }

.btn-primary { background-color: #a7e6f8; color: #000; }

.top-bar { position: fixed; width: 100%; z-index: 99;}
.masks { background-color: #ee0000; text-align: center; font-size: 2rem; }
.main-landing-page { text-align: center; width: 100%; }

.content { padding-top: 3rem; }

.hero {
  position: absolute;
  left:0;
  top: 0;
  background-color: black;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

.pull {position: absolute; bottom: 2%;  display:block; width: 100%; text-align: center; z-index: 20}

.pull .fa { font-size: 5rem; }

.box-black { background-color: #000; }
.box-white { background-color: #fff; }

.box-offset { padding-top: 0px; }
label.error { background-color: #F2DEDE; border-color: #EED3D7; color: #B94A48; padding: 4px 7px; margin-top: 5px; display: block; }

.header-fadein { width: 100%; height: 0; padding-bottom: 40%; position: relative; }
.header-fadein .slide > img { position: absolute; left: 0; top: 0; }

.featured-sans-serif, .featured-serif { text-align: center; text-transform: uppercase; }
.featured-serif, nav { font-family: 'Open Sans', san-serif; font-weight: 800; font-size: 1.5em; }
.featured-sans-serif { font-family: 'Oswald', sans-serif; }

h2.featured-sans-serif, h2.featured-serif { font-size: 3em; }
h3.featured-sans-serif, h3.featured-serif { font-size: 2em;  }
p.featured-sans-serif { font-size: 1.25em; }
h1.heading { font-size: 3.5em; }
h2.heading { font-size: 2.5em; }

#faq h1 { font-size: 3em; margin-bottom: 10px; }
#faq .faq-container > a { display: block; font-size: 1em; padding: 15px 15px 15px 0; position: relative;}
.faq-overflow { display: none; border-top: 1px solid #eee; padding: 10px 0; }
#faq .lead { margin: 10px auto; }
#faq hr { margin: 0; }

#faq .faq-container > a:before {
  font-size: 15px;
  font-family: 'FontAwesome';
  content: '\f078';
  margin-top: -10px;
  right: 0;
  position: absolute;
  top: 50%;
}

#faq .faq-container.open > a:before {
  content: '\f077';
}

#brands { background-color: #fff; border: 3px solid #000; margin-top: .5em; }
#brands ul { margin: 0; }
#brands li { width: 18%; margin: 1%; float: left; }

.featured-red, .bands-header li { font-weight: 800; color: #fff; text-shadow: 1px 1px 0 #ee0000, -1px -1px 0 #ee0000, 1px -1px 0 #ee0000, -1px 1px 0 #ee0000, 0px 0px 0px #ee0000; }
.spaced-top{ margin-top: 1em; }

.quote-images h5,.quote-images h6 { margin: 5px auto; }

.contact { font-size: 2em; text-align: center; }
.referral { display: none; }

.footer-victory-logo { text-align: center; }
.footer-social-text { margin-top: 25px; }

.footer-social-links { padding: 0; }
.footer-social-links li { float: left; width: 19%; margin: .5%; padding: 0; font-size: .625em; line-height: 1; }
.footer-social-links .fa-circle { color: #fff; }

.product-colors { font-size: 0; margin: 0 -.5%; }
.product-colors > div { float: left; width: 23%; margin: 1%; font-size: 12px; text-align: center; font-weight: bold; }
.product-colors > div:nth-child(4n+1) { clear: both; }

.footer { font-size: 3em; text-align: center; }
.footer-content { margin-top: 6px; padding-top: 30px; }

ul.gallery-thumbnails { list-style: none; padding: 0; margin: 0; }
ul.gallery-thumbnails li { width: 32.333333%; margin: .5%; border: 3px solid #000; float: left; }
ul.gallery-thumbnails.bands-thumbnails li { width: 49%; }
ul.gallery-thumbnails li:hover, ul.gallery-thumbnails li.active { border-color: #B81B13; }
#gallery-modal .modal-dialog { border: 3px solid #000; border-radius: 5px; }
#gallery-modal button { position: absolute; right: .25em; color: #f00; text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.5); opacity: 1; font-size: 2em; transition: text-shadow .25s ease-in-out; }
#gallery-modal button:hover, .gallery-buttons:hover { text-shadow:2px 1px 1px rgba(0, 0, 0, 1); }
.gallery-buttons { position: absolute; top: 45%; padding:.25em .375em; font-size: 5em; color: #72abf4; margin-top: -50px; text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.5); transition: text-shadow .25s ease-in-out; }
.gallery-buttons.prev { left: 0; }
.gallery-buttons.next { right: 0; }

.img-responsive { display: block; margin: auto; }
a.btn, button.btn { border-radius: 0; font-weight: bold; border: 3px solid #000; }
.btn:focus, .btn:active:focus, .btn.active:focus, button:focus, button:active { outline: 0; }

textarea.form-control{height: 6em;}

.fine-print { font-size: 0.75em; line-height: 1.25em; padding: 0 2em; }

.product-color-options li { float: left;width: 25%; height: 60px; padding: 1%; }
.product-color-options a small { color: #ddd; text-align: center; position: absolute; top: 7px; left: 0; right: 0; }
.product-color-options a small.inverse { color: #000; }

.secondary-color {position: absolute;top: 0px;bottom: 0;width: 6px;left: 50%;margin-left: -3px;}
.product-color-options a, .product-gallery a { display: block; height: 100%; border:3px solid #000;background: #fff;position: relative;}

.bordered { border: 4px solid #000; }

#quote-step-two .box-blue-light { padding-top:25px; }
#quote-step-two .box-red > .row { padding: 0 5%; }

.quote-images { font-size: 0; }
.quote-images > div { display: inline-block; text-align: center; width: 33.33333333333%; }

#product-color-selected{ font-size: 1.25em;}
.alert-info { margin: 0 1em; }

.quote-quantity { padding: 6px 0; text-align: center; }
.quote-line-item-details { font-size: 1.5em; text-align: center; }
.quote-line-item-details .sizes-breakdown, .quote-line-item { border-bottom: 1px solid #ddd; padding-bottom: 0.5em; }
.quote-line-item-details .row { padding-top: 0.5em; }
.quote-line-item { padding-top: 1em; }
.quote-line-item-details small { font-size: 0.625em; display: block; }
.sizes-breakdown { font-size: 0.625em; }

.col-margin-bottom { margin-bottom: 12px; }
.input-group-text { min-width: 53px; text-align:center; }

.modal-body, .modal-header, .modal-body a { color: #000; }
.modal-header { padding: 10px; }
.small, small { font-size: 0.75em; }

input, select, textarea { border-radius: 0 !important; }
 
#jobs, #brochure {
  position: absolute;
  right: 0;
  z-index: 999;
  top: 0;
  background-color: #d3ecfd; 
  padding: 1px;
}

#brochure {
  right: auto;
  left: 0;
}

#from-where-other { margin-top: 15px;}
.bands-header ul { font-weight: bold; }
.bands-header h1 { padding: 0;  text-align: right!important; margin: 0; }
.bands-header .fa { color: #0e76bc; border: none; }

.modal-header h4 { margin: 0; font-weight: bold; text-align: center; font-size: 20px; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-size: 25px; }
.modal-header h4 #title { color: #f64d40; text-decoration: underline; }

.monthly-special { margin-top: .5em; }
.nav-link i { padding-left: .5rem; }

@media(max-width: 409px) {

 .content { padding-top: 10rem; }
    .quote-images > div { width: 50%;}
    .vsp-badge { margin-top: -50px; }
    ul.gallery-thumbnails li { width: 49%; }
    .contact { font-size: 1.5em; text-align: center; }
    h1.featured-sans-serif { font-size: 5em; }
    h1.heading { font-size: 3em; }
    h2.heading { font-size: 1.5em; }
    .product-preview { width: auto; }
    ul.merchandise-pricing li { font-size: .75em; }
    ul.merchandise-pricing li span.merch-item { padding-left: .125em; }
    ul.merchandise-pricing li span.merch-price { padding-right: .125em; }
    .box-yellow:first-child { padding-top: 1em; }
    .product-price, .price-estimate-summary { padding: 0; }
    .price-estimate #times { padding: 0 1em; }
    .price-estimate #equals { display: block; height: 0; overflow: hidden; border-bottom: 2px solid #000; margin: .5em 0; }
    .estimate-line { font-size: .825em; }
    .estimate-line strong { display: block; }
    .product-preview-category { margin-top: 10px; font-size: 1em; }
    #product-text, #product-text + h3 { font-size: 1em; margin-top: 10px; padding-right: 1em; }
    #product-color-selected { font-size: .825em; padding-right: 1em; }
    #step-three .input-group-addon { max-width: 38px; padding: 6px 0; text-align: center; }
}

@media (min-width: 768px){
 .content { padding-top: 10rem; }
    .featured-serif, nav { font-family: 'Open Sans', san-serif; font-weight: 800; font-size: 1em; }
    #faq h1 { font-size: 3.5em; }
    #faq .faq-container > a { font-size: 1.125em; }
    .product-color-options li { height: 60px; }
    .box-yellow:first-child, .box-blue:first-child, .box-blue-light:first-child, .box-black:first-child { padding-top: 72px; }
    .navigation { font-size: 1em; }
    .vsp-badge { position: relative!important; margin: 0; }
    .vsp-badge a { position: absolute; left: 0; right: 0; top: 0; z-index: 999; padding: 0 1em; }
    .navigation li { width: 11%; float: left; text-align: center; padding: 12px;}
    #nav-products, #nav-quote { width: 13%; }
    .navigation li#nav-templates, .navigation li.vsp-badge { width: 15%!important; }
    .separator { height: 6px; margin-top: -6px; }
    #product-text{ font-size: 3em;}
    #product-text + h3{font-size: 2em;}
    #product-color-selected{ font-size: 1.5em;}
    select.merch-quote { margin: auto; display: inline-block; }
    .featured-sans-serif { position: relative; }
    .referral { position: absolute; right: 10%; top: 0; display: none; }
    .product-colors > div {  width: 11.5%; margin: .5%; }
    .product-colors > div:nth-child(4n+1) { clear: none; }
    .product-colors > div:nth-child(8n+1) { clear: both; }
    .social-links { font-size: 2em; }
    #jobs {right: -77px;}
    #brochure { left: -80px; }    
}

@media (min-width: 992px) {
     .content { padding-top: 10rem; }
    .navigation li:after { position: absolute; right: -12px; content: url('/images/separator-star-blue.png'); }
    .navigation li:last-child:after, #nav-quote::after, li.vsp-badge::after {content:''}  
    .col-md-offset-1 .contact { text-align: right; }
    .quote-images > div { width: 16.666666666667% }
    .navigation { font-size: 1em; }
    .navigation ul { width: 100%; margin: auto;}
    ul.gallery-thumbnails li { width: 24%; }
    ul.gallery-thumbnails.bands-thumbnails li { width: 19%; }
    .separator { height: 8px; margin-top: -10px; }
    ul.merchandise-pricing { column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; }
    #offered-thumbs h4 { font-size: 18px; }
}


@media (min-width: 1200px) {
    
nav i.fa {display: inline-block; }
     .content { padding-top: 10rem; }
    .featured-serif, nav { font-family: 'Open Sans', san-serif; font-weight: 800; font-size: 1.75em; }
    #faq h1 { font-size: 5em; }
    #faq .faq-container > a { font-size: 1.625em; }
    #quote-step-two .box-red > .row { padding:0;  }
    .product-color-options li { height: 60px; width: 20%; margin-bottom: 1em; }
    .navigation { font-size: 1.25em; }
    .separator + .box-yellow, .separator + .box-black, .separator + .box-blue { margin-top: 2px; }
    .separator { margin-top: -12px; height: 9px; }
    .main-landing-page .image-badge { right: 120px; top: 120px; }
    .alert-info { margin: 0; }
}