@import url('https://fonts.googleapis.com/css?family=Rubik');

.site-menu>ul>li>a {
  letter-spacing: .04em !important
}

@media (max-width: 576px) {
.checkout-steps>a {
    width: 100% !important;
  }
}

.btn-primary.sold:hover {
    background-color: #ff5252 !important;
}

.toolbar .cart {
  padding: 0 12px !important;
}

.toolbar {
  right: 20px !important;
}

@media (max-width: 1070px) {
  .navbar {
    min-height: 84px !important;
}
}

.site-menu ul>li>a {
  padding: 0 20px !important
}

#myVideo{
	right: 0;
	position: absolute;
	bottom: 0;
	top: 0;
	right:0;
	width: 100% !important;
	height: 100% !important;
	background-size: 100% 100%;
		background-image: /* our video */;
		background-position: center center;
		background-size: contain;
 		object-fit: cover; /*cover video background */
 		z-index:3;
}

.js-typeahead {
    width: 100% !important;
    height: 100% !important;
    padding-right: 120px !important;
    padding-left: 30px !important;
    border: 0 !important;
    background-color: #fff !important;
    color: #606975 !important;
    font-size: 16px !important;}

.offcanvas-toggle {
  border: 0 !important;
}

.navbar-stuck .typeahead__container {
  border-bottom: 0; }


body, .form-control, .btn, .tooltip, .popover {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Rubik,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important; }

.truncate {
  overflow: hidden;
  min-height: 205px}
  
.mega-menu {
  z-index: 9999 !important;
}
  
.hero-slider>.owl-carousel.dots-inside .owl-dots {
  padding: 5px 15px 20px !important;
  background-color: transparent !important;
}
  
.sp-buttons .btn.btn-tearsheet {
  width: 36px;
  padding: 0;
  padding-left: 1px;
  border-radius: 50%}

/* Define how SqPaymentForm iframes should look when they have focus */
.form-control--focus {
  border: 1px solid #000}

/* Define how SqPaymentForm iframes should look when they contain invalid values */
.form-control--error {
  border: 1px solid #ff5252}

.card-header, .card-footer {
  background-color: #fff}

.widget.order-summary, .order-summary .table { 
  margin-bottom: 0}
  
.order-summary .table td{
  padding:6px 0;border:0; margin-bottom: 0}
  
.order-summary .table td:last-child{
  text-align:right}
  
.order-summary .table tr:first-child>td{
  padding-top:0}
  
.order-summary .table tr:last-child>td{
  padding-bottom:0}
  
.order-summary .table tr:nth-last-child(3)>td{
  padding-top:12px;
  border-top:1px solid #e1e7ec}
  
.order-summary .table tr:nth-last-child(4)>td{
  padding-bottom:12px}

.scroller-status {
  display: none}
  
.pswp__bg {
  background: #fff !important}
  
.pswp__ui--fit .pswp__top-bar {
  background-color: rgba(255,255,255,.3) !important}

.pswp__ui--fit .pswp__caption, .pswp__ui--fit .pswp__top-bar {
  background-color: rgba(255,255,255,.3) !important}

.pswp__caption,.pswp__top-bar{background-color:rgba(255,255,255,.5) !important}

.pswp__ui--fit .pswp__caption,.pswp__ui--fit .pswp__top-bar{background-color:rgba(255,255,255,.3) !important}

.pswp__caption__center {
  color: #000 !important}

.pswp__counter {
  color: #000 !important;
  opacity: 1 !important}
  
.pswp__img--placeholder--blank {
  background: none !important}

.pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
  background-color: rgba(255,255,255,.3) !important}
  
.thumbnails img{
  border: 1px solid #e1e7ec; border-radius:5px}
  
.thumbnails.active img{
  border: 1px solid #1f1f1f}
  
.widget-title {
  border-bottom: 0px !important;
  padding-bottom: 0 !important}

.site-footer {
  padding-top: 52px !important}

.site-footer .social-button {
  width: 50px !important;
  height: 50px !important;
  font-size: 20px;
  line-height: 48px !important}

ul.three-cols {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3}

.navi-link-2 {
  text-decoration: none}
  
.navi-link-2:hover {
  text-decoration: underline}

.finishes .finish-item {
  display: inline}

.finishes .finish-item .caption {
  display: none}
  
.parsley-error, .parsley-error:focus {
  border-color: #ff5252}

.finishes .img-thumbnail {
  padding: 2px !important}

.card-img-tiles .thumblist img.first {
  margin-bottom: 6px}

.parsley-error + span.input-group-addon {
  color: #ff5252 !important}

.site-logo {
  width: 134px !important;
  padding: 12px 0 12px 0 !important;
}

.offcanvas-toggle {
  width: 65px !important;
}

.page-title-stuck {
  position: fixed;
  top: 0;
  z-index: 5000;
  -webkit-transform:translateY(84px);
  -moz-transform:translateY(84px);
  transform:translateY(84px) -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out}

.page-title {
  padding: 15px 0 !important;
  margin-bottom: 35px !important}
  
.page-title + section {
  margin-top: -35px !important}
  
.csstransforms3d .navbar, .csstransforms3d .topbar {
  transition: -webkit-transform .4s ease-in-out !important;
  transition: transform .4s ease-in-out !important}
 
.navbar-stuck .site-logo { 
  display: none !important}

.navbar-stuck .site-logo.logo-stuck { 
  display: table-cell !important}

.navbar {
  background-color: #1f1f1f !important}
  
.navbar-sticky {
  box-shadow: 0 3px 25px 0 rgba(47,56,68,0.22);
  position: fixed;
}

.navbar-sticky.navbar-stuck {
  background-color: #ffffff !important}

.navbar:not(.navbar-stuck) .offcanvas-toggle{
  border-right-color:rgba(255,255,255,0.15);
  color:#fff}
  
.navbar:not(.navbar-stuck){
  border-bottom: 0 !important}
  
.navbar:not(.navbar-stuck) .offcanvas-toggle:hover{
  color:rgba(255,255,255,0.5)}
  
.navbar:not(.navbar-stuck) .site-menu>ul>li>a{
  color:#fff}
  
.navbar:not(.navbar-stuck) .site-menu>ul>li:hover>a{
  color:rgba(255,255,255,0.5)}

.navbar:not(.navbar-stuck) .site-menu>ul>li.active>a{
  color: rgba(255,255,255,0.5);
  border-top-color: rgba(255,255,255,0.5)}
  
.navbar:not(.navbar-stuck) .toolbar .search,.navbar:not(.navbar-stuck) .toolbar .account,.navbar:not(.navbar-stuck) .toolbar .cart{
  border-color:rgba(255,255,255,0.15);color:#fff}
  
.navbar:not(.navbar-stuck) .toolbar .search:hover,.navbar:not(.navbar-stuck) .toolbar .account:hover,.navbar:not(.navbar-stuck) .toolbar .cart:hover{
  background-color:rgba(255,255,255,0.07)}
  
.navbar:not(.navbar-stuck) .toolbar .cart>.subtotal{
  border-left-color:rgba(255,255,255,0.15)}
  
.navbar:not(.navbar-stuck) .toolbar .toolbar-dropdown-group{
  color:#606975}
  
.offcanvas-container.active {
  background-color: #1f1f1f !important;
  box-shadow: inset -4px 0 17px 0 rgba(0, 0, 0, 1)}

.offcanvas-container a:hover {
  color:rgba(255,255,255,0.5) !important}

.offcanvas-menu ul li.has-children.active>span>a {
  color:rgba(255,255,255,0.5) !important}

.offcanvas-menu li.active>span>a, .offcanvas-menu ul li.active>a {
  color:rgba(255,255,255,0.5) !important}

.offcanvas-menu ul li.back-btn>a {
  background-color: rgba(255,255,255,0.05) !important}
  
.account-link {
  background-color: #1f1f1f !important}
  
.account-link:hover {
  background-color: rgba(255,255,255,0.1) !important}
  
.owl-carousel .item .caption, .section .caption {
  position: absolute;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  bottom: 15px;
  right: 25px}
  
.owl-carousel .item .caption.small, .section .caption.small {
  bottom: 10px !important;
  right: 20px !important;
  font-size: 14px}

.owl-carousel .item img{
  display: block;
  width: 100%}

.navbar.storefront {
  position: fixed !important;
  }  
  
.product-gallery {
  padding-top: 15px !important}
  
.product-gallery .gallery-item {
  top: 35px !important;
  right: 35px !important;
  z-index: 1000}
    
.product-gallery .gallery-item>a {
  background-color: #f5f5f5}
  
.product-gallery .gallery-item>a:hover {
  background-color: #fefefe}
  
.product-gallery .product-thumbnails {
  text-align: left !important}
  
.product-gallery .product-thumbnails>li>a {
  width: 78px !important}
  
.product-gallery .product-thumbnails>li:last-child{
  margin-right: 0;
}

#cylindoViewerWrapper {
    width: 100%;
    min-height:650px;
  }

.hero-slider, .hero-slider>.owl-carousel {
  min-height: calc(100vh - 84px)}
}

@media only screen and (max-width: 768px) {
  #cylindoViewerWrapper {
    width: 100%;
    min-height:350px !important;
  }
}

@media (max-width : 1024px) and (orientation: portrait){
  .hero-slider, .hero-slider>.owl-carousel {
    min-height: 30vh !important}
  }