/* Скрываем реальный чекбокс */
.checkbox {
	display: none;
}
/* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */
.checkbox-custom {
	position: relative;      /* Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */
	width: 20px;             /* Обязательно задаем ширину */
	height: 20px;            /* Обязательно задаем высоту */
	border: 1px solid #333;
	border-radius: 30px;
	margin-left: 50px;
	z-index: 1;
}
/* Кастомный чекбокс и лейбл центрируем по вертикали. Если вам это не требуется, то вы можете убрать свойство vertical-align: middle из данного правила, но свойство display: inline-block обязательно должно быть */
.checkbox-custom,
.label {
	display: inline-block;
	vertical-align: middle;
	 margin-top: 0.1%;
}
/* Если реальный чекбокс у нас отмечен, то тогда добавляем данный признак и к нашему кастомному чекбоксу  */
.checkbox:checked + .checkbox-custom::before {
	content: "";             /* Добавляем наш псевдоэлемент */
	display: block;			 /* Делаем его блочным элементом */
	position: absolute;      /* Позиционируем его абсолютным образом */
	/* Задаем расстояние от верхней, правой, нижней и левой границы */
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: #1E90FF;     /* Добавляем фон. Если требуется, можете поставить сюда картинку в виде "галочки", которая будет символизировать, что чекбокс отмечен */
	border-radius: 30px;
	z-index: 1;
}
.servf1  {
  position: relative;
  float: left;
  margin-left: -30%;
}
.servl1 {
  position: relative;
  float: right;
  margin-right: -32%;
}
.servf2  {
  position: relative;
  float: left;
  margin-left: -34%;
}
.servl2 {
  position: relative;
  float: right;
  margin-right: -37%;
}
.servf3  {
  position: relative;
  float: left;
  margin-left: -10%;
}
.servl3 {
  position: relative;
  float: right;
  margin-right: -13%;
}
.servf31  {
  position: relative;
  float: left;
  margin-left: -20%;
}
.servf32  {
  position: relative;
  float: left;
  margin-left: -9%;
}
.servf33  {
  position: relative;
  float: left;
  margin-left: -9%;
}
.servl4 {
  position: relative;
  float: right;
  margin-right: -13%;
}
.servl5 {
  position: relative;
  float: right;
  margin-right: -13.2%;
}
.servl6 {
  position: relative;
  float: right;
  margin-right: -6%;
}
.servl7 {
  position: relative;
  float: right;
  margin-right: -11%;
}
.servf6 {
  position: relative;
  float: left;
  margin-left: -2%;
}
.servf7  {
  position: relative;
  float: left;
  margin-left: -5%;
}
.servf71  {
  position: relative;
  float: left;
  margin-left: -29%;
}
.servf72  {
  position: relative;
  float: left;
  margin-left: -5%;
}
.servl8 {
  position: relative;
  float: right;
  margin-right: -11%;
}
.servf8 {
  position: absolute;
  margin-left: -49%;
  width: 100%;
  margin-top: -2%;
}
.servf82  {
  position: relative;
  float: left;
  margin-left: -4%;
}
.servf81  {
  position: relative;
  float: left;
  margin-left: -4%;
}
.servl9 {
  position: relative;
  float: right;
  margin-right: -11%;
  margin-top: 0%;
}
.servf9 {
  position: relative;
  float: right;
  margin-right: 18%;
  width: 100%;
}
.servf91  {
  position: relative;
  float: left;
  margin-left: -10%;
}
.servl10 {
  position: relative;
  float: right;
  margin-right: -11.5%;
}
.servl11 {
  position: relative;
  float: right;
  margin-right: -21%;
}

/*Подсказка 1*/
.pods	{
	margin-left: -7%;
	position: fixed;
}
.tooltip {
  position: fixed;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltip:before,
.tooltip:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltip:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 530px;
  height: 50px;
  font-size: 13px;
  font-weight: 300;
  top: -40px;
  left: -530px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}
.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}
@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}
/*Подсказка 2*/
.tooltip1 {
  position: fixed;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltip1:before,
.tooltip1:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltip1:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 530px;
  height: 60px;
  font-size: 13px;
  font-weight: 300;
  top: -40px;
  left: -530px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}
.tooltip1:hover::before,
.tooltip1:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltip2 {
  position: fixed;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltip2:before,
.tooltip2:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltip2:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 500px;
  height: 5	0px;
  font-size: 13px;
  font-weight: 300;
  top: -40px;
  left: -530px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltip2:hover::before,
.tooltip2:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltip3 {
  position: fixed;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltip3:before,
.tooltip3:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltip3:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 430px;
  height: 100px;
  font-size: 13px;
  font-weight: 300;
  top: -75px;
  left: -430px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltip3:hover::before,
.tooltip3:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltip4 {
  position: fixed;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltip4:before,
.tooltip4:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltip4:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 530px;
  height: 45px;
  font-size: 13px;
  font-weight: 300;
  top: -40px;
  left: -530px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltip4:hover::before,
.tooltip4:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltip5 {
  position: fixed;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-left: 36px;
  margin-top: -10px;
}
.tooltip5:before,
.tooltip5:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltip5:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 530px;
  height: 40px;
  font-size: 13px;
  font-weight: 300;
  top: -40px;
  left: -450px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltip5:hover::before,
.tooltip5:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltip6 {
  position: fixed;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltip6:before,
.tooltip6:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltip6:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 230px;
  height: 30px;
  font-size: 13px;
  font-weight: 300;
  top: -20px;
  left: -230px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}
.tooltip6:hover::before,
.tooltip6:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}
@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Мобильные подсказки*/

.tooltipm {
  position: fixed;
  padding: 5px 12px;
  margin: 0px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltipm:before,
.tooltipm:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltipm:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 300px;
  height: 90px;
  font-size: 13px;
  font-weight: 300;
  top: 0px;
  left: -260%;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}
.tooltipm:hover::before,
.tooltipm:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}
@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}
/*Подсказка 2*/
.tooltipm1 {
  position: fixed;
  padding: 5px 12px;
  margin: 0px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltipm1:before,
.tooltipm1:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltipm1:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 300px;
  height: 110px;
  font-size: 13px;
  font-weight: 300;
  top: 0px;
  left: -275%;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}
.tooltipm1:hover::before,
.tooltipm1:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltipm2 {
  position: fixed;
  padding: 5px 12px;
  margin: 0px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltipm2:before,
.tooltipm2:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltipm2:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 300px;
  height: 70px;
  font-size: 13px;
  font-weight: 300;
  top: 0px;
  left: -347%;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltipm2:hover::before,
.tooltipm2:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltipm3 {
  position: fixed;
  padding: 5px 12px;
  margin: 0px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltipm3:before,
.tooltipm3:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltipm3:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 300px;
  height: 120px;
  font-size: 13px;
  font-weight: 300;
  top: 0px;
  left: -45%;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltipm3:hover::before,
.tooltipm3:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltipm4 {
  position: fixed;
  padding: 5px 12px;
  margin: 0px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltipm4:before,
.tooltipm4:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltipm4:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 300px;
  height: 75px;
  font-size: 13px;
  font-weight: 300;
  top: 0px;
  left: -310%;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltipm4:hover::before,
.tooltipm4:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltipm5 {
  position: fixed;
  padding: 5px 12px;
  margin: 0px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-left: 36px;
  margin-top: -10px;
}
.tooltipm5:before,
.tooltipm5:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltipm5:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 300px;
  height: 55px;
  font-size: 13px;
  font-weight: 300;
  top: 0px;
  left: -20%;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltipm5:hover::before,
.tooltipm5:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

/*Подсказка 3*/
.tooltipm6 {
  position: fixed;
  padding: 5px 12px;
  margin: 0px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
  z-index: 999999x;
  margin-top: -10px;
}
.tooltipm6:before,
.tooltipm6:after {
  position: fixed;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}
.tooltipm6:after {
  content: attr(data-tooltip);
  position: fixed;
  background: #337AB7;
  width: 300px;
  height: 90px;
  font-size: 13px;
  font-weight: 300;
  top: 0px;
  left: -260%;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}
.tooltipm6:hover::before,
.tooltipm6:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}
@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}
.fixlike {
	margin-left: 112%;
	margin-top: -13%;
}
.fixtar {
	margin-left: -20%;
}
.fixtop {
	margin-left: 108%;
	margin-top: -13%;
}
.fixstor {
	margin-left: 114%;
	margin-top: -13%;
}
.fixmass {
	margin-right: 20%;
	margin-top: -13%;
}