/*
 * Base structure
 */

 html,
 body {
   background-color: #fff;
 }
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
 
 /*top menu*/
 
 #topmenu {
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #ffff00;
   color: #000;
   position: fixed;
   top: 0;
   width: 100%;
   min-height: 60px;
   z-index: 9999;
 }
 
 #topmenu button {
   height: 60px;
   color: #000;
   border-radius: 0;
   transition: background-color 0.5s ease;
 }
 
 #topmenu button:hover,
 #topmenu button:active {
   height: 60px;
   color: rgb(255, 255, 255);
   background-color: #000;
   border-color: #000;
   border-radius: 0;
 }
 
 nav {
   margin-top: 60px;
 }
 #cartModal.modal{
   z-index:10000!important;
 }
 #searchModal.modal{
  z-index:10000!important;
}
#myError.modal{
  z-index:10000!important;
}
#mySuccess.modal{
  z-index:10000!important;
} 
 /* HEADER video background*/
 
 header {
   position: relative;
   background-color: black;
   height: 100vh;
   min-height: 25rem;
   width: 100%;
   overflow: hidden;
 }
 
 header 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%);
 }
 
 header .bg-image {
   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%);
 }
 
 header .container {
   position: relative;
   z-index: 2;
   font-weight: 700;
 }
 
 header .overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: black;
   opacity: 0.7;
   z-index: 1;
 }
 
 @media (pointer: coarse) and (hover: none) {
   header {
     background: black no-repeat center center scroll;
   }
   header video {
     display: none;
   }
 }
 
 
 /*navigation*/
 
 .nav-item a {
   text-transform: uppercase;
   font-weight: 200;
 }
 
 
 /*button*/
 
 .btn,
 button {
   padding: 7px 30px;
   border-radius: 0px;
   font-weight: 400;
   color: #fff;
   font-size: 13px;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
   display: inline-block;
 }
 
 .btn {
   display: inline-block;
   padding: .375rem 1rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border: 1px solid transparent;
   border-radius: .25rem;
 }
 
 .btn:hover,
 button:hover {
   color: #fff;
 }
 
 .btn-lg {
   padding: 14px 33px;
   text-transform: uppercase;
   font-size: 16px;
 }
 
 .btn-common {
   background: #9C3 none repeat scroll 0 0;
   color: #FFF;
   position: relative;
   border: transparent;
   z-index: 1;
 }
 
 .btn-common:before {
   content: '';
   position: absolute;
   background: #7aa427 none repeat scroll 0 0;
   top: 0;
   left: 0;
   width: 3px;
   height: 100%;
   z-index: -1;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
 }
 
 .btn-common:hover:before {
   width: 100%;
 }
 
 
 /*home*/
 
 #intro-info {
   background-color: #343a40;
 }
 
 #intro-info .card {
   border-radius: 0;
   border: 1px solid rgb(255, 255, 255);
   background-color: transparent;
   color: #ffff00;
 }
 
 
 /*season selection*/
 
 .element-yellow {
   display: inline-block;
   background-color: #ffff00;
   height: 30px;
   width: 20px;
   font-size: 1px;
   padding: 1px;
   color: white;
   margin-right: 2px;
   margin-left: 2px;
   animation: skew 3s infinite;
   transform: skew(-20deg);
   animation-direction: alternate;
   /* opacity: .7;*/
 }
 
 .element-black {
   display: inline-block;
   background-color: #000;
   height: 30px;
   width: 20px;
   font-size: 1px;
   padding: 1px;
   color: white;
   margin-right: 2px;
   margin-left: 2px;
   animation: skew 3s infinite;
   transform: skew(-20deg);
   animation-direction: alternate;
   /* opacity: .7;*/
 }
 
 .element-red {
   display: inline-block;
   background-color: red;
   height: 30px;
   width: 20px;
   font-size: 1px;
   padding: 1px;
   color: white;
   margin-right: 2px;
   margin-left: 2px;
   animation: skew 3s infinite;
   transform: skew(-20deg);
   animation-direction: alternate;
   /* opacity: .7;*/
 }
 
 .element-text {
   display: inline-block;
 }
 
 .badge {
   border-radius: 0;
 }
 
 .badge-multicolor {
   background: red;
   background: linear-gradient(to right, red, black, green, orange);
   color: white;
   font-weight: bold;
 }
 
 .badge-onecolor {
   background: orangered;
   color: white;
   font-weight: bold;
 }
 
 .badge-duocolor {
   background: greenyellow;
   background: linear-gradient(to right, yellow, red);
   color: black;
   font-weight: bold;
 }
 
 .badge-season {
   background: yellowgreen;
   color: black;
   font-weight: bold;
 }
 
 .badge-discount {
   background: red;
   color: white;
   font-weight: bold;
 }
 
 .badge-popular {
   background: purple;
   color: white;
   font-weight: bold;
 }
 
 .bg-multicolor {
   background: red;
   background: linear-gradient(to right, red, black, green, orange);
   color: white;
 }
 
 .bg-onecolor {
   background: orangered;
   color: white;
 }
 
 .bg-duocolor {
   background: greenyellow;
   background: linear-gradient(to right, yellow, red);
   color: black;
 }
 
 .btn-add-to-cart {
   background: #ffff00 none repeat scroll 0 0;
   color: #000000;
   position: relative;
   border: transparent;
   z-index: 1;
 }
 
 .btn-add-to-cart:before {
   content: '';
   position: absolute;
   background: black none repeat scroll 0 0;
   top: 0;
   left: 0;
   width: 3px;
   height: 100%;
   z-index: -1;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
 }
 
 .btn-add-to-cart:hover:before {
   width: 100%;
 }
 
 .btn-view-details {
   background: #000000 none repeat scroll 0 0;
   color: #ffff00;
   position: relative;
   border: transparent;
   z-index: 1;
   border-radius: 0;
 }
 
 .btn-view-details2 {
   background-color: #17a2b8;
   color: #000;
   position: relative;
   border: transparent;
   z-index: 1;
   border-radius: 0;
 }
 
 .notify-badge-discount {
   position: absolute;
   right: 0;
   top: 0;
   background: red;
   text-align: center;
   border-radius: 0;
   color: white;
   padding: 5px;
   font-size: 14px;
 }
 
 .notify-badge-season {
   position: absolute;
   right: 0;
   top: 0;
   background: yellowgreen;
   text-align: center;
   border-radius: 0;
   color: black;
   padding: 5px;
   font-size: 14px;
 }
 .notify-badge-stock {
  position: absolute;
  left: 0;
  top: 0;
  background: #6c757d;
  text-align: center;
  border-radius: 0;
  color: white;
  padding: 5px;
  font-size: 14px;
}
 
 .notify-badge-most-wanted {
   position: absolute;
   right: 0;
   top: 0;
   background: purple;
   text-align: center;
   border-radius: 0;
   color: white;
   padding: 5px;
   font-size: 14px;
 }
 .notify-badge-price {
  position: absolute;
  min-width:30%;
  right: 0;
  bottom: 0;
  background: #ffff00;
  text-align: center;
  border-radius: 0;
  color: black;
  padding: 5px;
  font-size: 18px;
  font-weight:bold;
  border-right:2px solid black;
  text-align:right!important;
}
 
 
 /*opcije sekcija*/
 
 .opcije {
   margin: 0;
   padding: 0;
   background-image: linear-gradient(rgba(52, 58, 64, 0.9), rgba(52, 58, 64, 0.9)), url("../template/media/images/opcije_bg.jpg");
   /*min-height: 100vh;*/
 }
 
 .opcija-slika img {
   opacity: 0.7;
   transition: .5s ease;
   border-radius: 50%;
   -webkit-filter: grayscale(100%);
   /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
 }
 
 .opcija-slika:hover img {
   opacity: 1;
   -webkit-filter: grayscale(0%);
   /* Safari 6.0 - 9.0 */
   filter: grayscale(0%);
 }
 
 .point-out {
   background-color: rgba(0, 0, 0, 0.6);
   color: #e7ff00;
   font-size: 1.2rem;
 }
 
 #point-out {
   background-color: rgba(0, 0, 0, 7);
   color: #e7ff00;
   font-size: 1.2rem;
 }
 
 
 /*why orka*/
 
 #why-orka {
   /* min-height:100vh;*/
   width: 100%;
   background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../template/media/images/why_orka.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   padding-top: 2%;
   padding-bottom: 2%;
   color: #fff!important;
 }
 
 #why-orka span {
   color: #ffff00;
 }
 
 #why-orka h3 {
   font-size: 1.35rem!important;
   color: #a5a5a5!important;
   font-weight: 500!important;
 }
 
 #why-orka h2 {
   font-size: 2rem!important;
   color: #ffff00!important;
   font-weight: 700!important;
   text-transform: uppercase;
 }
 
 
 /*shop by category*/
 
 .slick-slide {
   margin: 0px 0px;
 }
 
 .slick-slide img {
   width: 100%;
 }
 
 .slick-slider {
   position: relative;
   display: block;
   box-sizing: border-box;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;
 }
 
 .slick-list {
   position: relative;
   display: block;
   overflow: hidden;
   margin: 0;
   padding: 0;
 }
 
 .slick-list:focus {
   outline: none;
 }
 
 .slick-list.dragging {
   cursor: pointer;
   cursor: hand;
 }
 
 .slick-slider .slick-track,
 .slick-slider .slick-list {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 
 .slick-track {
   position: relative;
   top: 0;
   left: 0;
   display: block;
 }
 
 .slick-track:before,
 .slick-track:after {
   display: table;
   content: '';
 }
 
 .slick-track:after {
   clear: both;
 }
 
 .slick-loading .slick-track {
   visibility: hidden;
 }
 
 .slick-slide {
   display: none;
   float: left;
   height: 100%;
   min-height: 1px;
 }
 
 [dir='rtl'] .slick-slide {
   float: right;
 }
 
 .slick-slide img {
   display: block;
   padding: 5px;
 }
 
 .slick-slide.slick-loading img {
   display: none;
 }
 
 .slick-slide.dragging img {
   pointer-events: none;
 }
 
 .slick-initialized .slick-slide {
   display: block;
 }
 
 .slick-loading .slick-slide {
   visibility: hidden;
 }
 
 .slick-vertical .slick-slide {
   display: block;
   height: auto;
   border: 1px solid transparent;
 }
 
 .slick-arrow.slick-hidden {
   display: none;
 }
  
 /*shop by categoriy end*/

 
 /*contact*/
 
 #contact {
   background-image: linear-gradient(rgba(0, 98, 204, 0.3), rgba(0, 98, 204, 0.3)), url("../template/media/images/kontakt.jpg");
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
 .contact-form {
   background: #fff;
   margin-top: 10%;
   margin-bottom: 5%;
   width: 100%;
 }
 
 .contact-form .form-control {
   border-radius: 1rem;
 }
 
 .contact-image {
   text-align: center;
 }
 
 .contact-image img {
   border-radius: 6rem;
   width: 11%;
   margin-top: -3%;
   transform: rotate(29deg);
   background-color: white;
   ;
 }
 
 .contact-form form {
   padding: 14%;
 }
 
 .contact-form form .row {
   margin-bottom: -7%;
 }
 
 .contact-form h3 {
   margin-bottom: 8%;
   margin-top: -10%;
   text-align: center;
   color: #0062cc;
 }
 
 .contact-form .btnContact {
   width: 50%;
   border: none;
   border-radius: 1rem;
   padding: 1.5%;
   background: #0062cc;
   font-weight: 600;
   color: #fff;
   cursor: pointer;
 }
 
 .btnContactSubmit {
   width: 50%;
   border-radius: 1rem;
   padding: 1.5%;
   color: #fff;
   background-color: #0043cc;
   border: none;
   cursor: pointer;
 }
 
 
 /*address*/
 
 .mapa {
   width: 100%!important;
   height: 60vh!important;
 }
 
 
 /*social*/
 
 .btn-social {
   position: relative;
   padding-left: 44px;
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 .btn-social :first-child {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 32px;
   line-height: 34px;
   font-size: 1.6em;
   text-align: center;
   border-right: 1px solid rgba(0, 0, 0, 0.2)
 }
 
 .btn-social.btn-lg {
   padding-left: 61px
 }
 
 .btn-social.btn-lg :first-child {
   line-height: 45px;
   width: 45px;
   font-size: 1.8em
 }
 
 .btn-social.btn-sm {
   padding-left: 38px
 }
 
 .btn-social.btn-sm :first-child {
   line-height: 28px;
   width: 28px;
   font-size: 1.4em
 }
 
 .btn-social.btn-xs {
   padding-left: 30px
 }
 
 .btn-social.btn-xs :first-child {
   line-height: 20px;
   width: 20px;
   font-size: 1.2em
 }
 
 .btn-social-icon {
   position: relative;
   padding-left: 44px;
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   height: 34px;
   width: 34px;
   padding: 0
 }
 
 .btn-social-icon :first-child {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 32px;
   line-height: 34px;
   font-size: 1.6em;
   text-align: center;
   border-right: 1px solid rgba(0, 0, 0, 0.2)
 }
 
 .btn-social-icon.btn-lg {
   padding-left: 61px
 }
 
 .btn-social-icon.btn-lg :first-child {
   line-height: 45px;
   width: 45px;
   font-size: 1.8em
 }
 
 .btn-social-icon.btn-sm {
   padding-left: 38px
 }
 
 .btn-social-icon.btn-sm :first-child {
   line-height: 28px;
   width: 28px;
   font-size: 1.4em
 }
 
 .btn-social-icon.btn-xs {
   padding-left: 30px
 }
 
 .btn-social-icon.btn-xs :first-child {
   line-height: 20px;
   width: 20px;
   font-size: 1.2em
 }
 
 .btn-social-icon :first-child {
   border: none;
   text-align: center;
   width: 100% !important
 }
 
 .btn-social-icon.btn-lg {
   height: 45px;
   width: 45px;
   padding-left: 0;
   padding-right: 0
 }
 
 .btn-social-icon.btn-sm {
   height: 30px;
   width: 30px;
   padding-left: 0;
   padding-right: 0
 }
 
 .btn-social-icon.btn-xs {
   height: 22px;
   width: 22px;
   padding-left: 0;
   padding-right: 0
 }
 
 .btn-facebook {
   color: #fff;
   background-color: #3b5998;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-facebook:hover,
 .btn-facebook:focus,
 .btn-facebook:active,
 .btn-facebook.active,
 .open .dropdown-toggle.btn-facebook {
   color: #fff;
   background-color: #30487b;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-facebook:active,
 .btn-facebook.active,
 .open .dropdown-toggle.btn-facebook {
   background-image: none
 }
 
 .btn-facebook.disabled,
 .btn-facebook[disabled],
 fieldset[disabled] .btn-facebook,
 .btn-facebook.disabled:hover,
 .btn-facebook[disabled]:hover,
 fieldset[disabled] .btn-facebook:hover,
 .btn-facebook.disabled:focus,
 .btn-facebook[disabled]:focus,
 fieldset[disabled] .btn-facebook:focus,
 .btn-facebook.disabled:active,
 .btn-facebook[disabled]:active,
 fieldset[disabled] .btn-facebook:active,
 .btn-facebook.disabled.active,
 .btn-facebook[disabled].active,
 fieldset[disabled] .btn-facebook.active {
   background-color: #3b5998;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-google-plus {
   color: #fff;
   background-color: #dd4b39;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-google-plus:hover,
 .btn-google-plus:focus,
 .btn-google-plus:active,
 .btn-google-plus.active,
 .open .dropdown-toggle.btn-google-plus {
   color: #fff;
   background-color: #ca3523;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-google-plus:active,
 .btn-google-plus.active,
 .open .dropdown-toggle.btn-google-plus {
   background-image: none
 }
 
 .btn-google-plus.disabled,
 .btn-google-plus[disabled],
 fieldset[disabled] .btn-google-plus,
 .btn-google-plus.disabled:hover,
 .btn-google-plus[disabled]:hover,
 fieldset[disabled] .btn-google-plus:hover,
 .btn-google-plus.disabled:focus,
 .btn-google-plus[disabled]:focus,
 fieldset[disabled] .btn-google-plus:focus,
 .btn-google-plus.disabled:active,
 .btn-google-plus[disabled]:active,
 fieldset[disabled] .btn-google-plus:active,
 .btn-google-plus.disabled.active,
 .btn-google-plus[disabled].active,
 fieldset[disabled] .btn-google-plus.active {
   background-color: #dd4b39;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-instagram {
   color: #fff;
   background-color: #3f729b;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-instagram:hover,
 .btn-instagram:focus,
 .btn-instagram:active,
 .btn-instagram.active,
 .open .dropdown-toggle.btn-instagram {
   color: #fff;
   background-color: #335d7e;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-instagram:active,
 .btn-instagram.active,
 .open .dropdown-toggle.btn-instagram {
   background-image: none
 }
 
 .btn-instagram.disabled,
 .btn-instagram[disabled],
 fieldset[disabled] .btn-instagram,
 .btn-instagram.disabled:hover,
 .btn-instagram[disabled]:hover,
 fieldset[disabled] .btn-instagram:hover,
 .btn-instagram.disabled:focus,
 .btn-instagram[disabled]:focus,
 fieldset[disabled] .btn-instagram:focus,
 .btn-instagram.disabled:active,
 .btn-instagram[disabled]:active,
 fieldset[disabled] .btn-instagram:active,
 .btn-instagram.disabled.active,
 .btn-instagram[disabled].active,
 fieldset[disabled] .btn-instagram.active {
   background-color: #3f729b;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-linkedin {
   color: #fff;
   background-color: #007bb6;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-linkedin:hover,
 .btn-linkedin:focus,
 .btn-linkedin:active,
 .btn-linkedin.active,
 .open .dropdown-toggle.btn-linkedin {
   color: #fff;
   background-color: #005f8d;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-linkedin:active,
 .btn-linkedin.active,
 .open .dropdown-toggle.btn-linkedin {
   background-image: none
 }
 
 .btn-linkedin.disabled,
 .btn-linkedin[disabled],
 fieldset[disabled] .btn-linkedin,
 .btn-linkedin.disabled:hover,
 .btn-linkedin[disabled]:hover,
 fieldset[disabled] .btn-linkedin:hover,
 .btn-linkedin.disabled:focus,
 .btn-linkedin[disabled]:focus,
 fieldset[disabled] .btn-linkedin:focus,
 .btn-linkedin.disabled:active,
 .btn-linkedin[disabled]:active,
 fieldset[disabled] .btn-linkedin:active,
 .btn-linkedin.disabled.active,
 .btn-linkedin[disabled].active,
 fieldset[disabled] .btn-linkedin.active {
   background-color: #007bb6;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-twitter {
   color: #fff;
   background-color: #55acee;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-twitter:hover,
 .btn-twitter:focus,
 .btn-twitter:active,
 .btn-twitter.active,
 .open .dropdown-toggle.btn-twitter {
   color: #fff;
   background-color: #309aea;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-twitter:active,
 .btn-twitter.active,
 .open .dropdown-toggle.btn-twitter {
   background-image: none
 }
 
 .btn-twitter.disabled,
 .btn-twitter[disabled],
 fieldset[disabled] .btn-twitter,
 .btn-twitter.disabled:hover,
 .btn-twitter[disabled]:hover,
 fieldset[disabled] .btn-twitter:hover,
 .btn-twitter.disabled:focus,
 .btn-twitter[disabled]:focus,
 fieldset[disabled] .btn-twitter:focus,
 .btn-twitter.disabled:active,
 .btn-twitter[disabled]:active,
 fieldset[disabled] .btn-twitter:active,
 .btn-twitter.disabled.active,
 .btn-twitter[disabled].active,
 fieldset[disabled] .btn-twitter.active {
   background-color: #55acee;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-youtube {
   color: #fff;
   background-color: red;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-youtube:hover,
 .btn-youtube:focus,
 .btn-youtube:active,
 .btn-youtube.active,
 .open .dropdown-toggle.btn-youtube {
   color: #fff;
   background-color: red;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 .btn-youtube:active,
 .btn-youtube.active,
 .open .dropdown-toggle.btn-twitter {
   background-image: none
 }
 
 .btn-youtube.disabled,
 .btn-youtube[disabled],
 fieldset[disabled] .btn-youtube,
 .btn-youtube.disabled:hover,
 .btn-youtube[disabled]:hover,
 fieldset[disabled] .btn-youtube:hover,
 .btn-youtube.disabled:focus,
 .btn-youtube[disabled]:focus,
 fieldset[disabled] .btn-youtube:focus,
 .btn-youtube.disabled:active,
 .btn-youtube[disabled]:active,
 fieldset[disabled] .btn-youtube:active,
 .btn-youtube.disabled.active,
 .btn-youtube[disabled].active,
 fieldset[disabled] .btn-youtube.active {
   background-color: #55acee;
   border-color: rgba(0, 0, 0, 0.2)
 }
 
 #footer2 {
   background-color: #242627;
   color: #fff;
   margin: 0!important;
   padding: 5px;
 }
 
 .back-to-top {
   cursor: pointer;
   position: fixed;
   bottom: 20px;
   right: 20px;
   display: none;
 }
 
 
 /*futter orka*/
 
 
 /*footer*/
 
 #footer {
   background-color: #343a40;
 }
 
 #footer ul {
   margin-left: 0;
   padding-left: 0;
   list-style-type: none;
 }
 
 
 /*#footer ul li {
   position: relative;
   margin-left: 1em;
 }
 
 #footer ul li:before {
   position: absolute;
   left: -1em;
   content: "\f18e";
 }*/
 
 #footer ul li a {
   color: white;
 }
 
 
 /*waves*/
 
 .wave {
   opacity: .4;
   position: absolute;
   top: 3%;
   left: 50%;
   background: #0af;
   width: 500px;
   height: 500px;
   margin-left: -250px;
   margin-top: -350px;
   transform-origin: 50% 48%;
   border-radius: 43%;
   animation: drift 3000ms infinite linear;
 }
 
 .wave.-three {
   animation: drift 5000ms infinite linear;
 }
 
 .wave.-two {
   animation: drift 7000ms infinite linear;
   opacity: .1;
   background: yellow;
 }
 
 @keyframes drift {
   from {
     transform: rotate(0deg);
   }
   from {
     transform: rotate(360deg);
   }
 }
 
 .box {
   border-radius: 5px;
   box-shadow: 0 2px 30px rgba(black, .2);
   background: lighten(#f0f4c3, 10%);
   position: relative;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
 }
 
 .box:after {
   content: '';
   display: block;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
   z-index: 11;
   transform: translate3d(0, 0, 0);
 }
 
 .bg-black {
   background-color: black!important;
   color: yellow!important;
 }
 
 .bg-black .close {
   color: yellow!important;
 }
 
 
 /*home page end*/
 
 
 /*shop page start */
 
 
 /* Arrow & Hover Animation */
 
 #more-arrows {
   width: 75px;
   height: 65px;
 }
 
 #more-arrows:hover polygon {
   fill: #FFF;
   transition: all .2s ease-out;
 }
 
 #more-arrows:hover polygon.arrow-bottom {
   -webkit-transform: translateY(-18px);
   transform: translateY(-18px);
 }
 
 #more-arrows:hover polygon.arrow-top {
   -webkit-transform: translateY(18px);
   transform: translateY(18px);
 }
 
 polygon {
   fill: #FFF;
   transition: all .2s ease-out;
 }
 
 polygon.arrow-middle {
   opacity: 0.75;
 }
 
 polygon.arrow-top {
   opacity: 0.5;
 }
 
 .sidebar-kolona {
   color: #5a5a5a;
   background-image: url('https://www.orka-jk.com/assets/front/css/3.png');
   background-color: rgba(170, 170, 15, 0.6);
   background-repeat: repeat;
 }
 
 .active-subcat:disabled {
   background-color: #aaa;
   color: #000;
 }
 
 .badge-1-rem .badge {
   font-size: 100%;
 }
 
 
 /*modal fullscreen*/
 
 .modal-fullscreen {
   padding: 0 !important;
   width: 100%;
   height: 100%;
   z-index: 10000;
 }
 
 .modal-fullscreen .modal-dialog {
   max-width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
 }
 
 .modal-fullscreen .modal-content {
   height: auto;
   min-height: 100%;
   border: 0 none;
   border-radius: 0;
 }
 
 
 /*.modal-fullscreen .modal-body {
   max-height: calc(100vh - 70px);
   overflow-y: auto;
 }*/
 
 .previous-price {
   font-size: 12px;
   text-decoration: line-through;
   color: red;
 }
 
 
 /*loader*/
 
 section.wrapper {
   padding: 40px 0;
 }
 
 section.wrapper.dark {
   background: #313134;
 }
 
 div.spinner {
   -moz-animation: rotate 10s infinite linear;
   -webkit-animation: rotate 10s infinite linear;
   animation: rotate 10s infinite linear;
   position: relative;
   display: block;
   margin: auto;
   width: 142px;
   height: 142px;
 }
 
 div.spinner i {
   -moz-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
   -webkit-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
   animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
   -moz-transform-origin: 50% 100% 0;
   -webkit-transform-origin: 50% 100% 0;
   transform-origin: 50% 100% 0;
   position: absolute;
   display: inline-block;
   top: 50%;
   left: 50%;
   border: solid 6px transparent;
   border-bottom: none;
 }
 
 div.spinner i:nth-child(1) {
   -moz-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
   -webkit-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
   animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
   width: 44px;
   height: 22px;
   margin-top: -22px;
   margin-left: -22px;
   border-color: #2172b8;
   border-top-left-radius: 36px;
   border-top-right-radius: 36px;
 }
 
 div.spinner i:nth-child(2) {
   -moz-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
   -webkit-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
   animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
   width: 58px;
   height: 29px;
   margin-top: -29px;
   margin-left: -29px;
   border-color: #18a39b;
   border-top-left-radius: 42px;
   border-top-right-radius: 42px;
 }
 
 div.spinner i:nth-child(3) {
   -moz-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
   -webkit-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
   animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
   width: 72px;
   height: 36px;
   margin-top: -36px;
   margin-left: -36px;
   border-color: #82c545;
   border-top-left-radius: 48px;
   border-top-right-radius: 48px;
 }
 
 div.spinner i:nth-child(4) {
   -moz-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
   -webkit-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
   animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
   width: 86px;
   height: 43px;
   margin-top: -43px;
   margin-left: -43px;
   border-color: #f8b739;
   border-top-left-radius: 54px;
   border-top-right-radius: 54px;
 }
 
 div.spinner i:nth-child(5) {
   -moz-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
   -webkit-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
   animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
   width: 100px;
   height: 50px;
   margin-top: -50px;
   margin-left: -50px;
   border-color: #f06045;
   border-top-left-radius: 60px;
   border-top-right-radius: 60px;
 }
 
 div.spinner i:nth-child(6) {
   -moz-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
   -webkit-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
   animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
   width: 114px;
   height: 57px;
   margin-top: -57px;
   margin-left: -57px;
   border-color: #ed2861;
   border-top-left-radius: 66px;
   border-top-right-radius: 66px;
 }
 
 div.spinner i:nth-child(7) {
   -moz-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
   -webkit-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
   animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
   width: 128px;
   height: 64px;
   margin-top: -64px;
   margin-left: -64px;
   border-color: #c12680;
   border-top-left-radius: 72px;
   border-top-right-radius: 72px;
 }
 
 div.spinner i:nth-child(8) {
   -moz-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
   -webkit-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
   animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
   width: 142px;
   height: 71px;
   margin-top: -71px;
   margin-left: -71px;
   border-color: #5d3191;
   border-top-left-radius: 78px;
   border-top-right-radius: 78px;
 }
 
 @-moz-keyframes rotate {
   to {
     -moz-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 @-webkit-keyframes rotate {
   to {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 @keyframes rotate {
   to {
     -moz-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 .pointer {
   cursor: pointer;
 }
 
 
 /* Centered text */
 
 .text-over-img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: rgba(0, 0, 0, 0.8);
   color: yellow;
   padding: 5px 15px;
   border-radius: 10px;
   font-size: 1.5rem;
 }
 
 
 /* The snackbar - position it at the bottom and in the middle of the screen */
 
 #snackbar {
   visibility: hidden;
   /* Hidden by default. Visible on click */
   min-width: 250px;
   /* Set a default minimum width */
   margin-left: -125px;
   /* Divide value of min-width by 2 */
   background-color: rgba(0, 0, 0, 0.8);
   /* Black background color */
   color: #fff;
   /* White text color */
   text-align: center;
   /* Centered text */
   border-radius: 2px;
   /* Rounded borders */
   padding: 16px;
   /* Padding */
   position: fixed;
   /* Sit on top of the screen */
   z-index: 99999;
   /* Add a z-index if needed */
   left: 50%;
   /* Center the snackbar */
   bottom: 50%;
   /* 30px from the bottom */
   font-size: 2rem;
 }
 
 
 /* Show the snackbar when clicking on a button (class added with JavaScript) */
 
 #snackbar.show {
   visibility: visible;
   /* Show the snackbar */
   /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
   However, delay the fade out process for 2.5 seconds */
   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }
 
 
 /* Animations to fade the snackbar in and out */
 
 @-webkit-keyframes fadein {
   from {
     bottom: 0;
     opacity: 0;
   }
   to {
     bottom: 50%;
     opacity: 1;
   }
 }
 
 @keyframes fadein {
   from {
     bottom: 0;
     opacity: 0;
   }
   to {
     bottom: 50%;
     opacity: 1;
   }
 }
 
 @-webkit-keyframes fadeout {
   from {
     bottom: 50%;
     opacity: 1;
   }
   to {
     bottom: 0;
     opacity: 0;
   }
 }
 
 @keyframes fadeout {
   from {
     bottom: 50%;
     opacity: 1;
   }
   to {
     bottom: 0;
     opacity: 0;
   }
 }
 .card-img-left {
  border-bottom-left-radius: calc(.25rem - 1px);
  border-top-left-radius: calc(.25rem - 1px);
  float: left;
  padding-right: 1em;
  margin-bottom: -1.25em;
}
.state-button{
  color: #000;
    background-color: #fff;
    border-color: #E9ECEF;
}
.state-button:hover{
  color: #000;
    background-color: #fff;
    border-color: #E9ECEF;
}
.state-button:active{
  color: #000;
    background-color: #fff;
    border-color: #E9ECEF;
}
.card:hover{
 box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15)!important;
 border:0;
  transition: box-shadow .3s ease-out 0s;
}
.card__three::before, .card__three::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale3d(0, 0, 1);
  transition: transform .3s ease-out 0s;
  background: rgba(255, 255, 255, 0.1);
  content: '';
  pointer-events: none;
}
.card__three::before {
  transform-origin: left top;
}
.card__three::after {
  transform-origin: right bottom;
}
.card__three:hover::before, .card__three:hover::after, .card__three:focus::before, .card__three:focus::after {
  transform: scale3d(1, 1, 1);
}
.card__one {
  transition: transform .5s;
}
.card__one::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
  content: '';
  opacity: 0;
  z-index: -1;
}
.card__one:hover, .card__one:focus {
  transform: scale3d(1.006, 1.006, 1);
}
.card__one:hover::after, .card__one:focus::after {
  opacity: 1;
}
.btn-to-top{
  background:rgba(255, 255, 0, 0.7);
  color:black;
  border-radius: 0;
}
.btn-to-top:hover,.btn-to-top:active{
  background:rgba(255, 255, 0, 0.9);
  color:black;
  border-radius: 0;
}