@charset "UTF-8";

/*

  Journal - Advanced Opencart Theme Framework

  Version 2.9.8

  Copyright (c) 2017 Digital Atelier

  https://www.journal-theme.com/

*/

/******************************

RESET

*******************************/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, small, strong, b, i, dl, dt, dd, form, label, footer, header, menu, nav, section {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0; }



html {

  -webkit-text-size-adjust: none; }



body {

  font-size: 14px;

  line-height: 1.4;

  font-family: Helvetica, Arial, sans-serif;

  overflow-x: hidden; }



article, aside, details, figcaption, figure, footer, header, menu, nav, section {

  display: block; }



textarea:focus, input:focus, select:focus, button:focus {

  outline: none; }



header *, #container *, footer *, #top-modules *, #bottom-modules * {

  box-sizing: border-box; }



* {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-tap-highlight-color: transparent; }



.clearfix {

  clear: both;

  display: block; }



:before, :after {

  font-family: 'journal-icons';

  position: relative;

  font-style: normal;

  font-variant: normal;

  font-weight: normal;

  color: inherit;

  font-size: inherit;

  display: inline-block;

  -moz-osx-font-smoothing: grayscale;

  -webkit-font-smoothing: antialiased; }



i {

  position: relative;

  font-style: normal;

  vertical-align: middle; }

  i img {

    position: relative;

    vertical-align: middle;

    max-width: 100%;

    height: auto; }



body::after {

  position: fixed;

  width: 100%;

  height: 100%;

  z-index: -1;

  display: block;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0; }



/******************************

JOURNAL GRID

*******************************/

.xl-5 {

  width: 5%; }



.xl-10 {

  width: 10%; }



.xl-15 {

  width: 15%; }



.xl-20 {

  width: 20%; }



.xl-25 {

  width: 25%; }



.xl-30 {

  width: 30%; }



.xl-35 {

  width: 35%; }



.xl-40 {

  width: 40%; }



.xl-45 {

  width: 45%; }



.xl-50 {

  width: 50%; }



.xl-55 {

  width: 55%; }



.xl-60 {

  width: 60%; }



.xl-65 {

  width: 65%; }



.xl-70 {

  width: 70%; }



.xl-75 {

  width: 75%; }



.xl-80 {

  width: 80%; }



.xl-85 {

  width: 85%; }



.xl-90 {

  width: 90%; }



.xl-95 {

  width: 95%; }



.xl-100 {

  width: 100%; }



.xl-11 {

  width: 11.11111111111111%; }



.xl-12 {

  width: 12.5%; }



.xl-14 {

  width: 14.28571428571429%; }



.xl-16 {

  width: 16.66666666666666%; }



.xl-33 {

  width: 33.33333333333333%; }



.xl-66 {

  width: 66.66666666666666%; }



.xs-5, .xs-10, .xs-15, .xs-20, .xs-25, .xs-30, .xs-35, .xs-40, .xs-45, .xs-50, .xs-55, .xs-60, .xs-65, .xs-70, .xs-75, .xs-80, .xs-85, .xs-90, .xs-95, .xs-100, .xs-33, .xs-66, .sm-5, .sm-10, .sm-15, .sm-20, .sm-25, .sm-30, .sm-35, .sm-40, .sm-45, .sm-50, .sm-55, .sm-60, .sm-65, .sm-70, .sm-75, .sm-80, .sm-85, .sm-90, .sm-95, .sm-100, .sm-33, .sm-66, .md-5, .md-10, .md-15, .md-20, .md-25, .md-30, .md-35, .md-40, .md-45, .md-50, .md-55, .md-60, .md-65, .md-70, .md-75, .md-80, .md-85, .md-90, .md-95, .md-100, .md-33, .md-66, .lg-5, .lg-10, .lg-15, .lg-20, .lg-25, .lg-30, .lg-35, .lg-40, .lg-45, .lg-50, .lg-55, .lg-60, .lg-65, .lg-70, .lg-75, .lg-80, .lg-85, .lg-90, .lg-95, .lg-100, .lg-33, .lg-66, .xl-5, .xl-10, .xl-15, .xl-20, .xl-25, .xl-30, .xl-35, .xl-40, .xl-45, .xl-50, .xl-55, .xl-60, .xl-65, .xl-70, .xl-75, .xl-80, .xl-85, .xl-90, .xl-95, .xl-100, .xl-33, .xl-66 {

  float: left; }



.xs-11, .xs-12, .xs-14, .xs-16,

.sm-11, .sm-12, .sm-14, .sm-16,

.md-11, .md-12, .md-14, .md-16,

.lg-11, .lg-12, .lg-14, .lg-16,

.xl-11, .xl-12, .xl-14, .xl-16 {

  float: left; }



/******************************

 GENERAL STRUCTURE

*******************************/

.j-min {

  height: 40px; }



.j-med {

  height: 80px; }



.j-tall {

  height: 120px; }



.j-50 {

  height: 50px; }



.j-100 {

  height: 100px; }



.z-0 {

  z-index: 0; }



.z-1 {

  z-index: 1; }



.z-2 {

  z-index: 2; }



.z-3 {

  z-index: 3; }



.z-4 {

  z-index: 4; }



.z-5 {

  z-index: 5; }



.z-6 {

  z-index: 6; }



.z-7 {

  z-index: 7; }



.z-8 {

  z-index: 8; }



.z-9 {

  z-index: 9; }



/******************************

 CONTENT

*******************************/

#container {

  max-width: 1024px;

  position: relative;

  margin: 0 auto;

  background-color: transparent;

  z-index: 3; }



.heading-title, .box-heading {

  line-height: 40px;

  font-size: 15px;

  font-weight: normal;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  position: relative; }



.heading-title {

  margin-bottom: 20px; }



.secondary-title {

  font-size: 17px;

  color: #5C8BA6; }



.extended-layout #container {

  background-color: transparent;

  background-image: none; }



@media only screen and (min-width: 760px) {

  .extended-layout #column-left {

    padding: 20px 0 0 0; }

  .extended-layout #column-right {

    padding: 20px 0 0 0; }

  .extended-layout #column-right + #content {

    padding: 20px 20px 0 0; }

  .extended-layout #column-left + #content {

    padding: 20px 0 0 20px; }

  .extended-layout #column-left + #column-right + #content {

    padding: 20px 20px 0 20px; }

  .extended-layout #content {

    padding: 20px 0 0 0; } }

.home-page #content:empty {

  padding-top: 0 !important;

  padding-bottom: 0 !important; }



#content {

  position: relative;

  z-index: 2;

  padding: 20px 20px 0 20px;

  width:100%;

/*  background-color: transparent;

  -webkit-transform: translate3d(0, 0, 0);*/ }

  #content:after {

    content: ".";

    display: block;

    clear: both;

    height: 0;

    visibility: hidden; }



.box {

  position: relative; }



#content .content ul, #content .content li {

  margin: 0;

  padding: 0;

  list-style: none;

  position: relative; }

#content .content ul {

  margin: 8px 0; }

#content .content > ul > li > a {

  display: inline-block;

  padding: 4px 0 4px 10px;

  font-size: inherit; }



/******************************

 BUTTONS / LINKS

*******************************/

input, textarea, keygen, select, button {

  font-family: inherit; }



a {

  color: #333745;

  text-decoration: none;

  cursor: pointer; }



button {

  border: none;

  background-color: transparent;

  padding: 0; }



.button {

  cursor: pointer;

  font-size: 14px;

  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;

          transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;

  padding: 0 12px;

  border: 0;

  line-height: 32px;

  background-color: transparent;

  display: inline-block;

  -webkit-appearance: none;

  text-align: center;

  position: relative; }

  .button i:before {

    padding: 0 1px; }



.cart {

  position: relative; }



.button-disabled {

  opacity: .5;

  cursor: default; }

  .button-disabled:before, .button-disabled:after {

    display: none !important; }



.buttons {

  overflow: hidden;

  padding: 15px 0;

  line-height: 30px;

  margin: 20px 0 20px 0; }

  .buttons .left {

    padding-top: 2px; }



.buttons .left {

  float: left;

  text-align: left; }



.buttons .right {

  float: right;

  text-align: right; }



.buttons .right a {

  text-decoration: none !important; }



.buttons .center {

  float: left;

  text-align: center;

  margin-left: auto;

  margin-right: auto; }



hr {

  border: 0;

  background-color: #E4E4E4;

  height: 1px;

  margin: 0; }



/******************************

 BREADCRUMB

*******************************/

.breadcrumb {

  margin: 0 auto;

  padding: 0 15px;

  height: 40px;

  line-height: 38px;

  position: relative;

  z-index: 1;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  border: 0; }

  .breadcrumb a {

    color: inherit;

    font-size: inherit;

    -webkit-transition: all .2s ease;

            transition: all .2s ease;

    display: inline-block;

    vertical-align: middle; }

    .breadcrumb a .fa {

      top: -1px; }



ul.breadcrumb {

  list-style: none; }

  ul.breadcrumb li {

    display: inline-block; }

    ul.breadcrumb li a {

      margin: 0 4px; }

    ul.breadcrumb li::before {

      content: "»";

      margin-right: 2px; }

    ul.breadcrumb li:first-of-type a {

      margin-left: 0; }

    ul.breadcrumb li:first-of-type::before {

      display: none; }



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

#content {



  width:100%;

/*  background-color: transparent;

  -webkit-transform: translate3d(0, 0, 0);*/ }}

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

  ul.breadcrumb {

    display: -webkit-box !important;

    display: -webkit-flex !important;

    display: -ms-flexbox !important;

    display: flex !important;

    -webkit-flex-wrap: wrap;

        -ms-flex-wrap: wrap;

            flex-wrap: wrap;

    line-height: 1.4;

    height: auto;

    padding: 10px;

    -webkit-box-align: center;

    -webkit-align-items: center;

        -ms-flex-align: center;

            align-items: center; }

    ul.breadcrumb > li {

      display: -webkit-inline-box;

      display: -webkit-inline-flex;

      display: -ms-inline-flexbox;

      display: inline-flex;

      white-space: normal;

      text-align: left; } }

.extended-container {

  position: relative;

  z-index: 10; }

  .extended-container:before {

    content: "";

    display: block;

    width: 100%;

    height: 40px;

    position: absolute; }



.home-page .extended-container:before,

.maintenance-mode .extended-container:before {

  display: none; }



.home-page #container:before {

  content: "";

  display: block;

  position: absolute;

  left: 50%;

  top: 0; }



.maintenance-message {

  padding-bottom: 20px;

  padding-top: 20px; }

  .maintenance-message h1 {

    line-height: 30px; }

    .maintenance-message h1 br {

      display: none; }



/******************************

 NOTIFICATION

*******************************/

.journal-slider + #container > #notification {

  display: none; }



#notification {

  position: absolute;

  z-index: 2;

  width: 100%; }



.success, .warning, .information, .attention {

  width: 100%;

  position: relative;

  z-index: 2;

  height: auto;

  padding: 10px 15px;

  line-height: 20px; }

  .success a, .warning a, .information a, .attention a {

    color: #428bca; }

  .success img, .warning img, .information img, .attention img {

    float: right;

    margin-top: 6px;

    cursor: pointer;

    display: block; }



.success {

  background-color: #CDECA6; }



.warning {

  background-color: #FBE3A7; }



.attention {

  background-color: #FBE3A7; }



.information {

  background-color: #BFE7F1; }



.fa-exclamation-circle {

  font-size: 17px; }



/******************************

 INPUTS

*******************************/

.required, .cart-info .stock {

  color: #EA2E49;

  font-size: 16px; }



input[type='text'],

input[type='email'],

input[type='password'],

input[type='tel'],

textarea {

  -webkit-appearance: none;

  background: white;

  border-radius: 0;

  border-width: 1px;

  border-style: solid;

  border-color: #EEEEEE;

  padding: 5px 10px;

  width: 100%;

  -webkit-transition: all 0.2s;

          transition: all 0.2s;

  font-size: 13px;

  min-height: 35px;

  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.08); }



textarea {

  width: 100%;

  max-width: 100%;

  resize: none;

  height: 150px; }



input[type='radio'],

input[type='checkbox'] {

  margin: 5px; }



select {

  background: #f4f4f4;

  border: 1px solid #E4E4E4;

  padding: 2px;

  margin: 5px;

  max-width: 100%; }



label {

  cursor: pointer;

  padding-right: 20px; }



span.error,

.text-danger {

  display: inline-block;

  background-color: #EA2E49;

  color: white;

  padding: 3px 4px 2px 4px;

  font-size: 12px;

  position: relative; }



/******************************

 COLORBOX

*******************************/

#cboxLoadedContent h1 {

  padding-bottom: 2px;

  display: inline-block;

  border-bottom: 1px solid #E4E4E4;

  margin: 10px 0 10px 10px;

  font-size: 24px; }

#cboxLoadedContent p {

  padding: 0 10px; }



/******************************

 RESPONSIVE VIDEO

*******************************/

.responsive-video {

  position: relative;

  padding-bottom: 56.25%;

  padding-top: 30px;

  height: 0;

  overflow: hidden; }

  .responsive-video > iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%; }



/******************************

 TOP BOTTOM POSITION

*******************************/

#top-modules, #bottom-modules {

  z-index: 1; }

  #top-modules > div, #bottom-modules > div {

    margin: 0 auto;

    z-index: 1; }

    #top-modules > div > div, #bottom-modules > div > div {

      position: relative;

      margin: 0 auto; }

  #top-modules .box.static-banners,

  #top-modules .multi-modules-wrapper,

  #top-modules .box.journal-carousel

  .box.custom-sections,

  #top-modules .box.cms-blocks, #bottom-modules .box.static-banners,

  #bottom-modules .multi-modules-wrapper,

  #bottom-modules .box.journal-carousel

  .box.custom-sections,

  #bottom-modules .box.cms-blocks {

    padding-bottom: 0 !important; }

  #top-modules .gutter-on.bullets-on, #bottom-modules .gutter-on.bullets-on {

    padding-bottom: 0 !important; }



#top-modules {

  position: relative; }



.ui-menu {

  z-index: 99 !important; }



/******************************

OC 2

*******************************/

.oc2.information-page #content {

  padding-bottom: 20px; }

.oc2 .required {

  color: inherit; }

  .oc2 .required label {

    font-weight: normal; }

    .oc2 .required label:before {

      content: "*";

      color: #EA2E49;

      font-weight: bold;

      font-size: 16px;

      position: relative;

      margin-right: 3px; }

.oc2 fieldset {

  border: none;

  padding: 0;

  margin: 0; }

  .oc2 fieldset > div {

    clear: both;

    margin-bottom: 6px;

    overflow: hidden; }

  .oc2 fieldset .radio {

    padding-top: 7px; }

    .oc2 fieldset .radio label {

      width: 100%;

      padding-top: 0; }

      .oc2 fieldset .radio label:before {

        display: none; }

  .oc2 fieldset label {

    width: 25%;

    float: left;

    display: block;

    padding-top: 7px; }

  .oc2 fieldset label + div, .oc2 fieldset label + input.form-control {

    width: 75%;

    float: right; }

  .oc2 fieldset .radio-inline {

    width: auto; }

    .oc2 fieldset .radio-inline:before {

      display: none; }

.oc2 .form-horizontal .form-group {

  overflow: hidden;

  margin-bottom: 5px; }

  .oc2 .form-horizontal .form-group label {

    width: 25%;

    float: left;

    display: block;

    padding-top: 7px; }

  .oc2 .form-horizontal .form-group label + div {

    width: 75%;

    float: right; }

.oc2 .secondary-title {

  margin-bottom: 10px; }

.oc2 .input-group {

  display: table;

  position: relative; }

  .oc2 .input-group .form-control {

    float: left;

    display: table-cell; }

  .oc2 .input-group.datetime {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    width: 50%; }

.oc2 .input-group-btn {

  font-size: 14px;

  display: table-cell;

  vertical-align: middle; }

  .oc2 .input-group-btn button {

    padding: 6px 12px 9px 12px;

    cursor: pointer;

    font-size: 12px;

    box-shadow: none; }

    .oc2 .input-group-btn button:hover {

      -webkit-transition: all 0.2s;

              transition: all 0.2s; }

.oc2 .date .input-group-btn button, .oc2 .time .input-group-btn button, .oc2 .datetime .input-group-btn button {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0; }

.oc2 .fa {

  font-size: 14px; }

  .oc2 .fa:before {

    font-family: 'FontAwesome'; }

.oc2 .captcha-row .pull-right {

  float: none;

  margin-left: 25%; }

.oc2 .alert {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap; }

  .oc2 .alert button {

    position: absolute;

    right: 10px;

    top: 50%;

    -webkit-transform: translateY(-50%);

            transform: translateY(-50%);

    cursor: pointer;

    opacity: .6; }

  .oc2 .alert i {

    margin-right: 5px; }



.oc2.route-account-register .form-horizontal .radio {

  padding-top: 0; }

  .oc2.route-account-register .form-horizontal .radio label {

    width: auto;

    float: none;

    padding-top: 0;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

        -ms-flex-align: center;

            align-items: center; }

.oc2.route-account-register .form-horizontal label.radio-inline {

  width: auto; }



.modal {

  color: #222; }



.old-browser {

  display: table;

  width: 100%;

  text-align: center;

  font-size: 16px;

  color: #ffffff;

  background-color: #f74558;

  height: 60px;

  line-height: 60px;

  position: fixed;

  z-index: 9999999;

  top: 0; }

  .old-browser a {

    text-decoration: underline;

    color: #fff; }



.oc1 .ui-datepicker {

  z-index: 99999999 !important; }



.i6 body, .ie7 body, .ie8 body {

  padding-top: 60px; }



.tooltip + .tooltip {

  visibility: visible; }



.android:not(.chrome) .product-grid-item .name a {

  display: block; }



.ie:not(.edge) .mini-cart-info table tr td.remove button {

  padding-right: 5px; }



/******************************

Quick Checkout Stripe Payment CSS for OC 1.5.X AND 2.X

*******************************/

.one-page-checkout .confirm-section {

  float: left;

  width: 100%; }



.one-page-checkout .payment-stripe {

  display: block !important; }



.one-page-checkout .checkout-cart .buttons {

  display: none !important; }



/******************************

 Skin Specific

*******************************/

.skin-10 .super-menu > li:first-of-type {

  border-top-width: 0; }



/******************************

 Demo 11

*******************************/

.skin-11 .side-column .box:not(.flyout-menu) {

  overflow: hidden; }

.skin-11 .heading-title,

.skin-11 .refine-image a,

.skin-11 .side-column .box {

  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.05); }

.skin-11 .journal-cms-block-96 .block-content-left {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center; }

.skin-11 .product-grid .product-grid-item .price {

  margin: 7px 0 10px 0; }

.skin-11 .secondary-title, .skin-11 #content #review-title {

  padding-top: 0; }



@media only screen and (min-width: 760px) {

  .skin-11 body:not(.is-sticky) .journal-header-center .journal-search,

  .skin-11 body:not(.is-sticky) .journal-header-center .journal-cart {

    margin-top: 10px; }

  .skin-11 body:not(.is-sticky) .journal-header-center .header-assets:not(.top-bar) {

    top: 10px;

    position: relative; }



  .skin-12 #logo a img {

    top: 45%; }

  .skin-12 .journal-header-center .journal-cart,

  .skin-12 .journal-header-center .journal-search {

    margin-top: 0px; } }

/******************************

 Demo 12

*******************************/

@media only screen and (min-width: 760px) and (max-width: 800px) {

  .skin-12 .journal-header-center #cart .heading {

    right: 10px; } }

.skin-12 .product-grid-item .image .wishlist,

.skin-12 .product-grid-item .image .compare {

  bottom: -3px; }

.skin-12 .product-grid-item .image .wishlist {

  left: -5px; }

.skin-12 .product-grid-item .image .compare {

  right: -5px; }



/******************************

 Demo 14

*******************************/

.skin-14 .product-info .product-options > .cart,

.skin-14 .product-info .product-options > .rating {

  margin-bottom: 0; }



/******************************

 Demo 15

*******************************/

.skin-15 #bottom-modules .journal2_text_rotator .rotator-image.image-center {

  margin: 40px auto 10px auto !important; }

.skin-15 #bottom-modules .journal2_text_rotator .bullets-on .rotator-author {

  margin-bottom: 30px; }

.skin-15 #bottom-modules .journal2_text_rotator .rotator-text {

  padding: 10px 30px; }

.skin-15 #bottom-modules .journal2_text_rotator .text-rotator.bullets-center .quovolve-nav {

  bottom: 20px !important; }