﻿
.nice-scroll #mfn-demo-panel {
   margin-right: 10px
}

#mfn-demo-panel {
   background: #262525;
   color: #dbdbdb;
   position: fixed;
   width: 367px;
   height: 100%;
   right: 50px;
   top: 0;
   z-index: 9000;
   line-height: 21px;
   font-size: 18px;
   font-weight: 300;
   font-family: Roboto, Arial, Helvetica, sans-serif
}

#mfn-demo-panel a {
   color: #dbdbdb;
   text-decoration: none
}

#mfn-demo-panel .control {
   display: block;
   width: 51px;
   height: 65px;
   position: absolute;
   top: 395px;
   left: -51px;
   background: #262525;
   text-align: center;
   font-size: 14px;
   padding-top: 41px
}

#mfn-demo-panel .control i {
   color: #fff;
   position: absolute;
   top: 10px;
   left: 7px;
   font-size: 27px
}

#mfn-demo-panel ul.menu {
   padding: 10px 0;
   text-transform: uppercase
}

#mfn-demo-panel ul.menu li a {
   display: block;
   width: 100%;
   text-align: center;
   line-height: 28px
}

#mfn-demo-panel ul.menu li.buy a {
   color: #2991d6;
   font-style: italic
}

#mfn-demo-panel ul.menu li a:hover {
   background: #363636;
   color: #fff
}

#mfn-demo-panel .header .info {
   text-align: center;
   color: #2991d6;
   background: #363636;
   padding: 5px 0;
   text-transform: uppercase;
   font-weight: 400
}

#mfn-demo-panel .header .info span {
   color: #aaa;
   font-size: 12px;
   font-weight: 300
}

#mfn-demo-panel .demos ul {
   padding-left: 1px
}

#mfn-demo-panel .demos ul li {
   float: left
}

#mfn-demo-panel .demos ul li a {
   margin: 0 1px 1px 0;
   display: block;
   width: 182px;
   height: 155px;
   position: relative
}

#mfn-demo-panel .demos ul li a img {
   opacity: 1
}

#mfn-demo-panel .demos ul li a .mask {
   display: none;
   width: 182px;
   height: 155px;
   line-height: 155px;
   position: absolute;
   top: 0;
   left: 0;
   text-align: center;
   font-size: 20px
}

#mfn-demo-panel .demos ul li a:hover img {
   opacity: .1
}

#mfn-demo-panel .demos ul li a:hover .mask {
   display: block
}

#mfn-demo-panel .demos ul li a .mask .full-demo {
   bottom: -55px;
   font-size: 12px;
   font-style: normal;
   left: 0;
   position: absolute;
   text-transform: uppercase;
   width: 100%
}

@-webkit-keyframes demoflash {

   0%,
   100%,
   50% {
      opacity: 1
   }

   25%,
   75% {
      opacity: .2
   }
}

@keyframes demoflash {

   0%,
   100%,
   50% {
      opacity: 1
   }

   25%,
   75% {
      opacity: .2
   }
}

.faa-flash.animated {
   -webkit-animation: demoflash 4s ease infinite;
   animation: demoflash 4s ease infinite
}

@media only screen and (max-width:768px) {
   #mfn-demo-panel {
      display: none
   }
}

#configurator {
   color: #213442 !important;
   background: #f9f9f9;
   width: 272px;
   position: fixed;
   right: -272px;
   top: 57px;
   z-index: 9000;
   line-height: 21px;
   font-size: 12px;
   text-transform: uppercase
}

#configurator form {
   margin-bottom: 0;
   text-align: center
}

#configurator select {
   background: 0 0;
   box-shadow: 0 0 0;
   margin-bottom: 10px;
   padding: 3px;
   color: #213442
}

#configurator .control {
   display: block;
   width: 51px;
   height: 51px;
   position: absolute;
   top: 280px;
   left: -51px;
   background: url(../images/configurator/ico.png) center no-repeat #f9f9f9;
   text-indent: -9999px
}

#configurator .inside {
   padding: 10px
}

#configurator .header {
   text-align: center;
   padding-bottom: 5px;
   margin-bottom: 5px;
   border-bottom: 1px solid #eee;
   font-size: 18px;
   font-weight: 300
}

#configurator ul.image-select {
   margin-bottom: 5px
}

#configurator ul.image-select li {
   display: block;
   float: left
}

#configurator ul.image-select li a {
   display: block;
   width: 32px;
   height: 32px;
   float: left;
   margin: 5px
}

#configurator ul.image-select li:hover {
   border-color: #ccc
}

#configurator ul.select-color li a {
   text-indent: -9999px
}

#configurator ul.text-select {
   margin-bottom: 15px
}

#configurator ul.text-select li {
   float: left;
   width: 50%;
   font-size: 13px
}

#configurator ul.text-select li.select1 {
   width: 100%
}

#configurator ul.text-select li.select2 {
   width: 50%
}

#configurator ul.text-select li.select3 {
   width: 33%
}

#configurator ul.text-select li.select4 {
   width: 25%
}

#configurator a.minimalist-header:not(.active),
#configurator ul.text-select li:not(.active) a {
   color: #515E6C
}

#configurator a.minimalist-header span {
   font-size: 10px;
   color: #888
}

#configurator ul.pattern-select li a {
   background: url(../images/configurator/patterns.png) top left no-repeat
}

#configurator ul.pattern-select li a.pattern-1 {
   background-position: 0 0
}

#configurator ul.pattern-select li a.pattern-10 {
   background-position: 0 -33px
}

#configurator ul.pattern-select li a.pattern-11 {
   background-position: 0 -66px
}

#configurator ul.pattern-select li a.pattern-12 {
   background-position: 0 -99px
}

#configurator ul.pattern-select li a.pattern-13 {
   background-position: 0 -132px
}

#configurator ul.pattern-select li a.pattern-14 {
   background-position: 0 -165px
}

#configurator ul.pattern-select li a.pattern-15 {
   background-position: 0 -198px
}

#configurator ul.pattern-select li a.pattern-16 {
   background-position: 0 -231px
}

#configurator ul.pattern-select li a.pattern-17 {
   background-position: 0 -264px
}

#configurator ul.pattern-select li a.pattern-18 {
   background-position: 0 -297px
}

#configurator ul.pattern-select li a.pattern-2 {
   background-position: 0 -330px
}

#configurator ul.pattern-select li a.pattern-3 {
   background-position: 0 -363px
}

#configurator ul.pattern-select li a.pattern-4 {
   background-position: 0 -396px
}

#configurator ul.pattern-select li a.pattern-5 {
   background-position: 0 -429px
}

#configurator ul.pattern-select li a.pattern-6 {
   background-position: 0 -462px
}

#configurator ul.pattern-select li a.pattern-7 {
   background-position: 0 -495px
}

#configurator ul.pattern-select li a.pattern-8 {
   background-position: 0 -528px
}

#configurator ul.pattern-select li a.pattern-9 {
   background-position: 0 -561px
}

#configurator .select-dropdown {
   position: relative;
   margin-bottom: 15px
}

#configurator .select-dropdown ul {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background: #f1f1f1;
   padding: 5px 0;
   display: none
}

#configurator .select-dropdown:hover ul {
   display: block
}

#configurator .select-dropdown ul li:not(.active) a {
   color: #515E6C
}

#configurator p {
   font-size: 14px;
   line-height: 16px;
   font-weight: 300;
   margin-bottom: 20px
}

#configurator #colorSelector {
   background-image: url(../images/configurator/colorpicker.png);
   height: 37px;
   width: 37px;
   margin: 0 auto 15px
}

.colorpicker {
   z-index: 9001
}

.colorpicker input {
   width: auto !important
}

@media only screen and (max-width:768px) {
   #configurator {
      display: none
   }
}

.offer_thumb .slider_pagination a img {
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out
}

.offer_thumb .slider_pagination a:after,
.offer_thumb .slider_pagination a:before {
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out
}

@media only screen and (min-width:768px) {
   .offer_thumb .slider_pagination {
      position: absolute;
      left: 0;
      top: 0;
      border-width: 1px;
      border-style: solid
   }

   .offer_thumb .slider_pagination a {
      display: block;
      margin: 0;
      width: 85px;
      height: 85px;
      line-height: 85px;
      text-align: center;
      padding: 8px;
      text-indent: 0;
      border-bottom-width: 1px;
      border-style: solid;
      border-radius: 0;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      background-color: #fff
   }

   .offer_thumb .slider_pagination a:not(.selected):hover img {
      filter: alpha(opacity=60);
      opacity: .6
   }

   .offer_thumb .slider_pagination a.selected {
      top: 0;
      background-color: #fff;
      background-image: url(../images/stripes/stripes_3_b.png)
   }

   .offer_thumb .slider_pagination a:last-child {
      border: 0
   }

   .offer_thumb .slider_pagination a:before {
      content: "";
      display: block;
      width: 5px;
      height: 100%;
      right: -5px;
      top: 0;
      position: absolute;
      filter: alpha(opacity=0);
      opacity: 0
   }

   .offer_thumb .slider_pagination a.selected:before {
      filter: alpha(opacity=100);
      opacity: 1
   }

   .offer_thumb .slider_pagination a:after {
      content: "";
      left: auto;
      right: -9px;
      top: 50%;
      margin-top: -4px;
      width: 8px;
      height: 8px;
      filter: alpha(opacity=0);
      opacity: 0;
      border-radius: 0;
      -moz-border-radius: 0;
      -webkit-border-radius: 0
   }

   .offer_thumb .slider_pagination a.selected:after {
      filter: alpha(opacity=100);
      opacity: 1
   }

   .offer_thumb .slider_pagination a img {
      vertical-align: middle
   }
}