﻿/* ============================================ 
   ================ .switch-wrap ==================== */
.switch-wrap {
  display: inline-block;
}
.switch-wrap .km-switch-background {
  display: none !important;
}
.switch-wrap .km-switch {
  cursor: pointer;
  background: #FFF;
  color: #FFF;
  height: 30px;
  line-height: 30px;
  width: 82px;
}
.switch-wrap .km-switch-on .km-switch-handle {
  transform: translateX(49px) !important;
  box-shadow: none !important;
}
.switch-wrap .km-switch-wrapper {
  display: none !important;
}
.switch-wrap .km-switch-container {
  border-width: 2px;
  padding: 2px;
  border-radius: 16px;
  border-color: #FFA000;
}
.switch-wrap .km-switch-label-on,
.switch-wrap .km-switch-label-off {
  font-family: "LatoBlack", "Arial", "Helvetica", sans-serif;
  font-size: 11px;
  height: 24px;
  line-height: 24px;
  top: -2px;
  color: #234465;
}
.switch-wrap .km-switch-off .km-switch-container {
  border-color: #CCC;
}
.switch-wrap .km-switch-off .km-switch-handle {
  background: #CCC !important;
  background-color: #CCC !important;
}
.switch-wrap .km-switch-off .km-switch-handle .km-switch-label-off {
  color: #CCC;
}
.switch-wrap .km-switch-handle {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  background: #FFA000 !important;
  background-color: #FFA000 !important;
  color: #FFF !important;
  box-shadow: none !important;
  transition: transform 0.5s ease;
}
.switch-wrap .turn-switch-on .km-switch-handle {
  transition: none;
}
.switch-label {
  margin-right: 30px;
  width: 360px;
  padding-bottom: 15px;
  font-family: "LatoBlack", "Arial", "Helvetica", sans-serif;
  font-size: 16px;
  color: #234465;
  border-bottom: 1px solid #CCC;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .switch-label {
    width: 293px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .switch-label {
    width: 530px;
  }
}
@media only screen and (max-width: 767px) {
  .switch-holder {
    margin-right: 15px;
    margin-left: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #CCC;
  }
  .switch-label {
    margin-right: 0px;
    padding-bottom: 0px;
    width: 100%;
    border-bottom: 0px;
  }
}
/* ============================================ 
   ============== vertical switch ============= */
.vertical .km-switch {
  width: 25px;
  height: 55px;
  border: 4px solid #8b95a0;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  background-color: transparent;
}
.vertical .km-switch-background {
  background-color: transparent;
}
.vertical .km-switch-wrapper {
  display: none;
}
.vertical .km-switch-container {
  border: none;
}
.vertical .km-switch-handle {
  width: 13px;
  height: 13px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: #FFF;
  color: #FFF;
  box-shadow: none !important;
  transition: transform 0.5s ease;
}
.vertical .km-switch-on .km-switch-handle {
  -webkit-transform: translateX(1px) translateY(25px) !important;
  -moz-transform: translateX(1px) translateY(25px) !important;
  transform: translateX(1px) translateY(25px) !important;
}
.vertical .km-switch-on + .lang > li.en a {
  font-family: "LatoBlack", "Arial", "Helvetica", sans-serif !important;
  opacity: 1 !important;
}
.vertical .km-switch-off .km-switch-handle {
  -webkit-transform: translateX(1px) translateY(-5px) !important;
  -moz-transform: translateX(1px) translateY(-5px) !important;
  transform: translateX(1px) translateY(-5px) !important;
}
.vertical .km-switch-off + .lang > li.bg a {
  font-family: "LatoBlack", "Arial", "Helvetica", sans-serif !important;
  opacity: 1 !important;
}
/* End vertical switch */