#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}



#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222222;
  z-index: 1000;
  -webkit-transform: translateX(0);
  /* Chrome, Opera 15+, Safari 3.1+ */
  
  -ms-transform: translateX(0);
  /* IE 9 */
  
  transform: translateX(0);
  /* Firefox 16+, IE 10+, Opera */
}
#loader-wrapper .loader-section.section-left {
  left: 0;
}
#loader-wrapper .loader-section.section-right {
  right: 0;
}
/* Loaded */

.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  
  -ms-transform: translateX(-100%);
  /* IE 9 */
  
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
  
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  
  -ms-transform: translateX(100%);
  /* IE 9 */
  
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
  
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);
  /* IE 9 */
  transform: translateY(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}
.loaded .loader{display: none}
.loader {
  position: relative;
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 30vh;
  z-index:9999;
}

/* ooo, css circles*/
.circle {
  display: inline-block;
  position: relative;
    margin-left:15px;
  /* key up the animations! */
  -webkit-animation: dotloader 2.5s infinite;
  -moz-animation: dotloader 2.5s infinite;
  -ms-animation: dotloader 2.5s infinite;
  -o-animation: dotloader 2.5s infinite;
  animation: dotloader 2.5s infinite;
}

.circle + .circle {
  margin-left: -25px;
  /* staggered effect cause by delay property */
  -webkit-animation: dotloader 2.5s 0.2s infinite;
  -moz-animation: dotloader 2.5s 0.2s infinite;
  -ms-animation: dotloader 2.5s 0.2s infinite;
  -o-animation: dotloader 2.5s 0.2s infinite;
  animation: dotloader 2.5s 0.2s infinite;
}

.circle + .circle + .circle {
  margin-left: -25px;
  -webkit-animation: dotloader 2.5s 0.4s infinite;
  -moz-animation: dotloader 2.5s 0.4s infinite;
  -ms-animation: dotloader 2.5s 0.4s infinite;
  -o-animation: dotloader 2.5s 0.4s infinite;
  animation: dotloader 2.5s 0.4s infinite;
}

.circle + .circle + .circle + .circle {
  margin-left: -25px;
  -webkit-animation: dotloader 2.5s 0.6s infinite;
  -moz-animation: dotloader 2.5s 0.6s infinite;
  -ms-animation: dotloader 2.5s 0.6s infinite;
  -o-animation: dotloader 2.5s 0.6s infinite;
  animation: dotloader 2.5s 0.6s infinite;
}

/* here be the animations matey! */
@keyframes "dotloader" {
  0%,20% {
    width: 4px;
    height: 4px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    left: 0%;
    background-color: rgba(0, 0, 0, 0);
  }
  
  30%,70% {
    width: 8px;
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }

  80%,100% {
    width: 4px;
    height: 4px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    left: 100%;
    background-color: rgba(0, 0, 0, 0);
  }
}

@-moz-keyframes dotloader {
  0%,20% {
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    left: 0%;
    background-color: rgba(0, 0, 0, 0);
  }
  
  30%,70% {
    width: 8px;
    height: 8px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  80%,100% {
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    left: 100%;
    background-color: rgba(0, 0, 0, 0);
  }
}

@-webkit-keyframes "dotloader" {
  0%,20% {
    width: 4px;
    height: 4px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    left: 0%;
    background-color: rgba(0, 0, 0, 0);
  }
  
  30%,70% {
    width: 8px;
    height: 8px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.5);
  }
  
  80%,100% {
    width: 4px;
    height: 4px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    left: 100%;
    background-color: rgba(0, 0, 0, 0);
  }
}

@-ms-keyframes "dotloader" {
  0%,20% {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    left: 0%;
    background-color: rgba(0, 0, 0, 0);
  }
  
  30%,70% {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  80%,100% {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    left: 100%;
    background-color: rgba(0, 0, 0, 0);
  }
}

@-o-keyframes "dotloader" {
  0%,20% {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    left: 0%;
    background-color: rgba(0, 0, 0, 0);
  }
  
  30%,70% {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  80%,100% {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    left: 100%;
    background-color: rgba(0, 0, 0, 0);
  }
}













.slider{height:280px;}

@media only screen and (max-width: 601px)
{
	.modal{width:100% !important;height:80% !important}
}
body{background:#fff;color:#5b2e30}
nav a {color:#5b2e30}
nav{height:115px;position: absolute;z-index:998}
.container-fluid{z-index: 1;padding-top:115px;position:absolute;width:100%}
nav .button-collapse i{font-size:45px}
.nav-wrapper>a{padding-left:10px}
.nav-wrapper>a.button-collapse>i{line-height:115px}
#menu-601{line-height:115px}
#menu-601>li>a{font-size:0.9em;font-weight:300;
transition:0.3s all ease-in;-webkit-transition:0.3s all ease-in;-moz-transition:0.3s all ease-in;-ms-transition:0.3s all ease-in;
color:#5b2e30;font-weight:600;letter-spacing:0.25em;text-transform:uppercase}
#menu-601>li>a:hover{box-shadow: inset 0px -5px 0px 0 rgba(44,44,44,0.8);}
#product>h2{font-weight:400;text-transform:capitalize;font-size:30px}
#product>h2:after{content: '';background-color: #5b2e30;display: block;height: 2px;margin: 0.325em 0 0.5em 0;width: 100%;}
.slider .indicators .indicator-item.active{background:#263238}
.slider .indicators .indicator-item{background-color:#90a4ae}

.card-content>span{text-transform:capitalize}

.product-detail{display: none}
.modal-footer>.row{margin-bottom:0px}
.modal .modal-footer{height:auto}
.card .card-content{padding:5px;text-align:center}
.card .card-title{font-size:20px}
.modal{width:70%}
.modal-footer>.row{margin-bottom:0px}
.modal-bottom-title{font-size:18px;color:#5b2e30}
.modal .modal-footer{height:49px}
.product-grid>div:hover {cursor:pointer;}
.product-grid>div:hover label{color:#333;text-decoration:underline}
.product-detail{display:none}
.product-detail>div>.product-title{font-size:20px;font-weight:300;color:#333;}
.product-detail>.product-head{border-bottom:1px solid #cdcdcd;padding-bottom:10px;margin-bottom:10px}

.capacity .chip{margin:2px;border:2px solid #5b2e30;border-radius:0px;background:none;color:#5b2e30;font-size:16px}
.capacity .chip:hover{background:#5b2e30;color:#fff;cursor:pointer;}


.card-title>h4{font-weight:300;text-transform:capitalize;letter-spacing: -0.05em;position:relative;z-index: 10;transition:0.2s ease-in;-webkit-transition:0.2s ease-in;}
.overlay-text{background:rgba(44,44,44,0.0);width: 100%;height:100%;position:absolute;top:0;bottom:0;transition:0.2s ease-in;-webkit-transition:0.2s ease-in;}
.card:hover .overlay-text{background:rgba(44,44,44,0.5)}
.card:hover .card-title>h4{border-bottom:3px solid #fff;padding-bottom:3px}
#title-below{text-transform:capitalize;}

.product-grid .card-title{padding-bottom:10px !important}
.card-title>h5{font-weight:300;text-transform:capitalize;letter-spacing: -0.05em;position:relative;z-index: 10;transition:0.2s ease-in;-webkit-transition:0.2s ease-in;}
.card:hover .card-title>h5{border-bottom:3px solid #fff;padding-bottom:3px}


#left-slide,#right-slide{height:280px;width:auto;padding:20px;font-size:50px;transition: 0.5s all ease;-webkit-transition:0.5s all ease}
#left-slide:hover,#right-slide:hover{cursor:pointer;background:rgba(33,33,33,0.4)}
@media only screen and (max-width:768px){
	#left-slide,#right-slide{display: none !important}
	
}
@media only screen and (max-width:601px){
	.bx-viewport{ min-height:95px}
	.bx-viewport img{height:95px !important}
}
.contact-fixed{background:#5b2e30;color:#fff;transform: rotate(90deg);-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);
position:fixed;top:40vh;left:0;padding:15px;font-size:20px;margin-left:-55px;z-index:9999;padding-left:30px;padding-right:30px}
.contact-fixed:hover{cursor:pointer}
.contact-side-tab{position: fixed;top:30vh;left:-10px;z-index:99999;margin-left:-5px !important;
transform:translateX(-1000px);-webkit-transform:translateX(-1000px);-moz-transform:translateX(-1000px);
transition:0.3s all ease;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;}
.contact-side-tab h5{padding-left:10px;}
.contact-side-tab h5 i{color:#5b2e30;font-size:24px;}
.contact-side-tab h5 i:hover{cursor: pointer}