.app-theme-white .app-header {
    background: #0099fd;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	background-color: #ffffff;
}
.app-theme-white.fixed-header .app-header__logo {
    background: none;
}
.app-header .app-header__content .header-menu .nav-link i {
    color: #ffffff;
}
.app-header .app-header__content .header-menu .nav-link {
    color: #ffffff;
}
.scrollbar-sidebar {
    background: #00b3fd;
}
ul.vertical-nav-menu.metismenu {
    background: #fff;
}


.f1 {
    background: url(images/fon1.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}
.m-unit-l {
    display: inline-flex;
    margin-bottom: 20px;
}
.m-unit {
	width: 40px;
    height: 40px;
}
.m-unit1{
	background: url(images/01.png); background-size: contain;
}
.m-unit2{
	background: url(images/02.png); background-size: contain;
}
.m-unit3{
	background: url(images/03.png); background-size: contain;
}
.m-unit4{
	background: url(images/04.png); background-size: contain;
}
.m-unit5{
	background: url(images/05.png); background-size: contain;
}
@media screen and (max-width: 1340px){
.responsible-desktop-map{display:none;}
	}
.responsible-mobile-map{display:none;}
@media screen and (max-width: 1340px){
.responsible-mobile-map{display:block;}
div#mainmap {
    background: none !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    margin: 10px !important;
}
div#fancybox-wrap {
	min-width: 360px !important;}
div#fancybox-content {
    width: 100% !important;
	border-width: 3px !important;
}
}
@media screen and (max-width: 796px){
div#fancybox-wrap {
    min-width: 100% !important;
    top: 30px !important;
    left: 0px !important;
}
div#fancybox-content {
    width: 100% !important;
	border-width: 3px !important;
}
#fancybox-wrap {
	padding: 10px !important;}
	}
@media screen and (max-width: 1300px) and (min-width: 992px){
.sidebar .sidebar-inner .sidebar-menu {
    overflow-x: hidden !important;
	}}
@media screen and (max-width: 1300px) and (min-width: 992px){
.is-collapsed .sidebar {
    width: 280px !important;
	}}
#map
	{
		/*background-image: url(images/001.png);
		background-repeat: no-repeat;
		background-position: center center;
		height:inherit;
		background-size: contain;
		/*min-height: 100vh;
		/*min-width: 1600px;*/
		/*position:relative;*/
	}
.iconmap{
	position:absolute;
}
div#mainmap {
    background: url(images/map2.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    width: 1080px;
    height: 757px;
    position: relative;
	margin: 10px auto;
}
#mainmap{
	
}
#mapimg
	{
		width: 1920px;
	}
html{touch-action:none;}
body {
		margin: 0;
		/*background-color:#c6d7be !important;*/
}
.up{
	position: fixed;
	right:100px;
	bottom:100px;
	color: #fff;
	background-color: #6ac7ff;
	width:50px;
	height:30px;
	text-align: center;
	border-radius: 5px;
}
.sidebar {
		background-color: rgba(255,255,255,0.9) !important;}
.sidebar-inner {
    position: relative;
    height: 100%;
}
.sidebar-menu li {
    position: relative;
}
.mT-30 {
    margin-top: 30px!important;
}
.sidebar-menu>li>a {
    display: block;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 15px;
    position: relative;
    white-space: nowrap;
}
.sidebar-menu li a {
    color: #72777a;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.sidebar-menu>li>a .icon-holder {
    border-radius: 6px;
    display: inline-block;
    font-size: 17px;
    height: 35px;
    left: 0;
    line-height: 35px;
    margin-right: 14px;
    position: relative;
    text-align: center;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    width: 35px;
}
.is-collapsed .sidebar .sidebar-inner .sidebar-menu>li>a .title {
    display: none;
}
.sidebar-menu>li>a {
    display: block;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 15px;
    position: relative;
    white-space: nowrap;
}
.sidebar-menu li a {
    color: #72777a;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.sidebar-menu {
    border-right: none !important;
	height: 100% !important;
	list-style: none;
    margin: 0;
    overflow: auto;
    padding: 0;
	}
.sidebar-inner {
    position: relative;
    height: 100%;
}
.is-collapsed .sidebar {
    width: 70px;
}
.sidebar ul {
    list-style-type: none;
}

.ps {
    overflow: hidden!important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
}
.pos-r {
    position: relative!important;
}
	
.dostmenu{
	background-image: url(images/d01.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.pammenu{
	background-image: url(images/d02.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu0{
	background-image: url(images/d00.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu3{
	background-image: url(images/d03.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu4{
	background-image: url(images/d04.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu5{
	background-image: url(images/d05.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu6{
	background-image: url(images/d06.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu7{
	background-image: url(images/d07.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu8{
	background-image: url(images/d08.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu9{
	background-image: url(images/d09.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menu10{
	background-image: url(images/d10.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menukz{
	background-image: url(images/kz.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menuru{
	background-image: url(images/ru.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menuen{
	background-image: url(images/en.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menumain{
	background-image: url(images/menu.png);
    background-size: cover;
    background-repeat: no-repeat;
	height: 35px;
	width: 35px;
}
.visit{
	font-size:30px;
	color:#507aa2;
	margin-top: -8px !important;
}
.is-collapsed .sidebar:hover .sidebar-inner .sidebar-menu>li>a .menumain {
    /*visibility:hidden;*/
}
.is-collapsed .sidebar .sidebar-inner .sidebar-menu>li>a .menumain {
    display: inline-block;
}
.visible-name .name {
	visibility:hidden;
	display: flex;
    justify-content: center;
}
.visible-name:hover .name {
	visibility:visible;
	display: flex;
    justify-content: center;
}

/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/* [6] */
/* Styles: */
span.title {
    margin-top: 7px;
    position: absolute;
}
.icon01 { /*музей өлке*/
	top: 510px;
    left: 818px;
	position: absolute;}
.icon02 { /*парк кирова*/
	top: 444px;
    left: 693px;
	position: absolute;}
.icon35{ /*Дом-музей Е.Пугачева*/
	top: 741px;
    left: 866px;
	position: absolute;}
.icon36{ /*Музей художника С.Гумарова*/
	top: 492px;
    left: 842px;
	position: absolute;}
.icon37{ /*Музей природы и экологии*/
	top: 595px;
    left: 832px;
	position: absolute;}
.icon-t01{ /*Театр*/
	top: 195px;
    left: 232px;
	position: absolute;}
.icon-hr01{ /*Храм Христа Спасителя*/
	top: 457px;
    left: 827px;
	position: absolute;}
.icon-hr02{ /*Центральная мечеть*/
	top: 399px;
    left: 895px;
	position: absolute;}
.icon-p01{ /*Стелла*/
	top: 656px;
    left: 877px;
	position: absolute;}
.icon-p02{ /*Стелла парк Набережная р. Урал*/
	top: 653px;
    left: 895px;
	position: absolute;}
.icon-p03{ /*Площадь Пугачёва*/
	top: 643px;
    left: 852px;
	position: absolute;}
.icon-p04{ /*Площадь Первого президента*/
	top: 92px;
    left: 1194px;
	position: absolute;}
.icon-p05{ /*Сквер Лермонтова*/
	top: 453px;
    left: 805px;
	position: absolute;}
.icon-p06{ /*Ротонда*/
	top: 611px;
    left: 868px;
	position: absolute;}
.icon-p07{ /*Железнодорожный вокзал*/
	top: 308px;
    left: 814px;
	position: absolute;}
.icon-p08{ /*Международный аэропорт*/
	top: 978px;
    left: 1781px;
	position: absolute;}
.icon-p09{ /*Городище Жайык*/
	top: 1003px;
    left: 336px;
	position: absolute;}
.icon-kadyr{ /*Западно-Казахстанский центр культуры и искусства им. Кадыра Мырза Али*/
	top: 115px;
    left: 1174px;
	position: absolute;}
.icon-p10{ /*Памятник природы Садовское озеро*/
	top: 25px;
    left: 692px;
	position: absolute;}
.icon-p11{ /*Туристический лагерь «Атамекен»*/
	top: 100px;
    left: 840px;
	position: absolute;}
.icon-p12{ /*Туристский лагерь «Самал»*/
	top: 68px;
    left: 749px;
	position: absolute;}
.icon-p13{ /*Этно-туристический центр SAYAT*/
	top: 25px;
    left: 644px;
	position: absolute;}
.icon-p14{ /*Западно-Казахстанский областной центр детско-юношеского туризма и экологии*/
	top: 196px;
    left: 891px;
	position: absolute;}
.icon-p15{ /*Площадь Абая*/
	top: 537px;
    left: 831px;
	position: absolute;}
.icon-h01{ /*Гостиница Виктория*/
	top: 157px;
    left: 1152px;
	position: absolute;}
.icon-h02{ /*PUSHKIN hotel & restaurant*/
	top: 639px;
    left: 850px;
	position: absolute;}
.icon-h03{ /*Гостиница Құрмет*/
	top: 486px;
    left: 780px;
	position: absolute;}
.icon-h04{ /*Гостиница Рахат*/
	top: 112px;
    left: 1026px;
	position: absolute;}
.icon-h05{ /*Гостиница CHAGALA*/
	top: 465px;
    left: 832px;
	position: absolute;}
.icon-h06{ /*Park Hotel Ресторанно-гостиничный комплекс*/
	top: 62px;
    left: 715px;
	position: absolute;}
.icon-h07{ /*Гостиница Саяхат*/
	top: 472px;
    left: 807px;
	position: absolute;}
.icon-h08{ /*Гостиница Айдана*/
	top: 347px;
    left: 967px;
	position: absolute;}
.icon-h09{ /*Гостиница Орал*/
	top: 524px;
    left: 870px;
	position: absolute;}
.icon-h10{ /*Гостиница Ереван*/
	top: 136px;
    left: 1176px;
	position: absolute;}
.icon-h11{ /*Гостиница Европа*/
	top: 536px;
    left: 794px;
	position: absolute;}
.icon-r01{ /*Ресторан Ереван*/
	top: 136px;
    left: 1176px;
	position: absolute;}
.icon-r02{ /*Ресторан Алма-ата*/
	top: 549px;
    left: 816px;
	position: absolute;}
.icon-r03{ /*Ресторан Айдана*/
	top: 347px;
    left: 967px;
	position: absolute;}
.icon-r04{ /*Ресторан Айдана*/
	top: 347px;
    left: 967px;
	position: absolute;}
.icon-r05{ /*Ресторан Ақ сарай*/
	top: 161px;
    left: 1220px;
	position: absolute;}
.icon-r06{ /*Ресторан Бибигуль*/
	top: 532px;
    left: 868px;
	position: absolute;}
.icon-r07{ /*Ресторан Белое солнце*/
	top: 164px;
    left: 825px;
	position: absolute;}
.icon-r08{ /*Ресторан Европа*/
	top: 536px;
    left: 790px;
	position: absolute;}
.icon-r09{ /*Ресторан Золотой век*/
	top: 517px;
    left: 835px;
	position: absolute;}
.icon-r10{ /*Ресторан Встреча*/
	top: 652px;
    left: 868px;
	position: absolute;}
.icon-r11{ /*Ресторан Каспий*/
	top: 272px;
    left: 1195px;
	position: absolute;}
.icon-r12{ /*Ресторан Керемет*/
	top: 150px;
    left: 1241px;
	position: absolute;}
.icon-r13{ /*Ресторан Guest*/
	top: 545px;
    left: 843px;
	position: absolute;}
.icon-entert02{ /*Торгово-развлекательный центр Галактика*/
	top: 400px;
    left: 897px;
	position: absolute;}
.icon-entert03{ /*Областной казахский драматический театр им. Хадиши Букеевой*/
	top: 523px;
    left: 815px;
	position: absolute;}
.icon-entert04{ /*Драматический театр им. А.Н. Островского*/
	top: 525px;
    left: 837px;
	position: absolute;}
.icon-entert05{ /*Торгово-развлекательный центр Asia Mall*/
	top: 137px;
    left: 1174px;
	position: absolute;}
.icon-entert06{ /*Торговый центр АТРИУМ*/
	top: 523px;
    left: 854px;
	position: absolute;}
.icon-entert07{ /*Торгово-развлекательный центр Alem Plasa*/
	top: 408px;
    left: 873px;
	position: absolute;}
.icon-entert08{ /*Торговый центр Орал*/
	top: 137px;
    left: 1150px;
	position: absolute;}
.icon-entert09{ /*Торговый центр Променад*/
	top: 242px;
    left: 1186px;
	position: absolute;}
.icon-entert10{ /*Торгово-развлекательный комплекс City Center*/
	top: 376px;
    left: 943px;
	position: absolute;}
.icon-sport01{ /*Фитнес-клуб West Gym*/
	top: 456px;
    left: 858px;
	position: absolute;}
.icon-sport02{ /*Фитнес-центр «Энергия»*/
	top: 525px;
    left: 816px;
	position: absolute;}
.icon-sport03{ /*Пейнтбол*/
	top: 546px;
    left: 798px;
	position: absolute;}
.icon-sport04{ /*Шорт трек*/
	top: 357px;
    left: 988px;
	position: absolute;}
.icon-sport05{ /*Футбольный клуб Юниор*/
	top: 508px;
    left: 797px;
	position: absolute;}
.icon-sport06{ /*Хоккейный Клуб "Акжайык"*/
	top: 465px;
    left: 823px;
	position: absolute;}
.icon-sport07{ /*Футбольный клуб Ак Жайык*/
	top: 361px;
    left: 840px;
	position: absolute;}
.icon-sport08{ /*Арман Спорткомплекс*/
	top: 754px;
    left: 424px;
	position: absolute;}
.icon-sport09{ /*Naryn Спортивный комплекс*/
	top: 399px;
    left: 763px;
	position: absolute;}
.icon-hb01{ /*Санаторий Акжайык*/
	top: 542px;
    left: 830px;
	position: absolute;}
.icon-hb02{ /*Комплекс Отдыха "Ак-жунис"*/
	top: 136px;
    left: 754px;
	position: absolute;}
.icon-hb03{ /*Академия красоты Альбина*/
	top: 573px;
    left: 823px;
	position: absolute;}
.icon-hb04{ /*Центр эстетики и омоложения Merlil*/
	top: 381px;
    left: 930px;
	position: absolute;}
.icon-hb05{ /*Салон красоты Сауле*/
	top: 388px;
    left: 790px;
	position: absolute;}
.icon-hb06{ /*Салон МАРАФЕТ"*/
	top: 465px;
    left: 880px;
	position: absolute;}
.icon-hb07{ /*Салон красоты Bellissimo*/
	top: 407px;
    left: 857px;
	position: absolute;}
.icon-hb08{ /*Салон красоты Эстет*/
	top: 354px;
    left: 797px;
	position: absolute;}
.icon-hb09{ /*Салон красоты Персона*/
	top: 411px;
    left: 885px;
	position: absolute;}
.icon-edu01{ /*Западно-Казахстанский государственный университет им. М. Утемисова (ЗКГУ)*/
	top: 628px;
    left: 856px;
	position: absolute;}
.icon-edu02{ /*Западно-Казахстанский аграрно-технический университет им. Жангир-хана (ЗКАТУ)*/
	top: 759px;
    left: 465px;
	position: absolute;}
.icon-edu03{ /*Западно-Казахстанская гуманитарная академия (ЗКГА)*/
	top: 611px;
    left: 818px;
	position: absolute;}
.icon-edu04{ /*Западно-Казахстанский инженерно-гуманитарный университет (ЗКИТУ)*/
	top: 459px;
    left: 821px;
	position: absolute;}
.icon-edu05{ /*Казахстанский институт информационных технологий и управления (КазИИТУ)*/
	top: 358px;
    left: 859px;
	position: absolute;}
.icon-edu06{ /*Уральская Академия Труда и Социальных Отношений (КазАТиСО)*/
	top: 550px;
    left: 847px;
	position: absolute;}
.icon-edu07{ /*Западно-Казахстанский инженерно-технологический колледж*/
	top: 422px;
    left: 779px;
	position: absolute;}
.icon-edu08{ /*Высший педагогический колледж им. Ж.Досмухамедова*/
	top: 585px;
    left: 836px;
	position: absolute;}
.icon-edu09{ /*Уральский гуманитарно-технический колледж*/
	top: 554px;
    left: 867px;
	position: absolute;}
.icon-edu10{ /*Уральский колледж газа, нефти и отраслевых технологий*/
	top: 516px;
    left: 856px;
	position: absolute;}
.icon-edu11{ /*«BILIM» ОҚУ ОРТАЛЫҒЫ*/
	top: 648px;
    left: 884px;
	position: absolute;}
.icon-med01{ /*Консультативно-диагностическая поликлиника № 1 АО Талап*/
	top: 450px;
    left: 809px;
	position: absolute;}
.icon-med02{ /*Медицинский центр "INTERTEACH" на Сейфуллина*/
	top: 461px;
    left: 826px;
	position: absolute;}
.icon-med03{ /*Городская многопрофильная больница*/
	top: 71px;
    left: 1183px;
	position: absolute;}
.icon-med04{ /*Западно-Казахстанская областная инфекционная больница*/
	top: 203px;
    left: 935px;
	position: absolute;}
.icon-med05{ /*Западно-Казахстанский областной наркологический диспансер*/
	top: 171px;
    left: 1183px;
	position: absolute;}
.icon-med06{ /*Западно-Казахстанский областной центр крови*/
	top: 347px;
    left: 821px;
	position: absolute;}
.icon-med07{ /*Западно-Казахстанский областной консультативно-диагностический центр*/
	top: 310px;
    left: 1143px;
	position: absolute;}
.icon-med08{ /*Медицинский центр "БАТЫС АВИГИП"*/
	top: 461px;
    left: 845px;
	position: absolute;}
.icon-med09{ /*Западно-Казахстанская областная клиническая больница*/
	top: 571px;
    left: 902px;
	position: absolute;}
.icon-med10{ /*Западно-Казахстанский областной онкологический диспансер*/
	top: 275px;
    left: 1095px;
	position: absolute;}
.icon-med11{ /*Медицинский центр "ОРАЛ-СТОМ"*/
	top: 567px;
    left: 877px;
	position: absolute;}
.icon-med12{ /*Центр стоматологии "ЖАЙЫК ДЕНТ"*/
	top: 581px;
    left: 840px;
	position: absolute;}
.icon-med13{ /*Многопрофильная клиника "МЕДИЦИНСКИЙ ЦЕНТР"*/
	top: 227px;
    left: 748px;
	position: absolute;}
.icon-fil01{ /**/
	top: 565px;
    left: 837px;
	position: absolute;}
.icon {
	background-position:center center;
	background-size: contain;
	/*width: 50px;
	height: 50px;*/
	width: 40px;
	height: 40px;
	/*top: 580px;
	left: 300px;
	position: absolute;*/
	cursor: pointer;
	margin: auto;
	color: deepskyblue;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	font-size: 2.75em;
	font-weight: bold;
	transition: 0.24s 0.2s;
}
.icon-z-index{}
.icon-z-index:hover{z-index:999;}
.icon-map{background-image: url(images/icon.png);}
.icon-dost{background-image: url(images/dost.png);}
.icon-park{background-image: url(images/park.png);}
.icon-museum{background-image: url(images/museum.png);}
.icon-teatr{background-image: url(images/teatr.png);}
.icon-hram{background-image: url(images/hram.png);}
.icon-mechet{background-image: url(images/mechet.png);}
.icon-monument{background-image: url(images/pam.png);}
.icon-vokzal{background-image: url(images/vokzal.png);}
.icon-aero{background-image: url(images/aero.png);}
.icon-hotel{background-image: url(images/hotel.png);}
.icon-rest{background-image: url(images/rest.png);}
.icon-torg{background-image: url(images/torg.png);}
.icon-sport{background-image: url(images/sport.png);}
.icon-hb{background-image: url(images/hb.png);}
.icon-edu{background-image: url(images/edu.png);}
.icon-med{background-image: url(images/med.png);}
.icon-tourism{background-image: url(images/tourism.png);}
.icon-tour{background-image: url(images/d09.png);}
.icon-fil{background-image: url(images/fil.png);}

.icon:hover {
  /*background: rgba(255, 255, 255, 0.75);*/
}
.name {
    position: absolute;
	z-index:999;
    display: flex;
    text-align: center;
	line-height: 1;
    min-width: 100px;
    margin-left: -70%;
    color: #000;
	text-shadow: 
		-0   -2px 2px #FFFFFF,
		 0   -2px 2px #FFFFFF,
		-0    2px 2px #FFFFFF,
		 0    2px 2px #FFFFFF,
		-2px -0   2px #FFFFFF,
		 2px -0   2px #FFFFFF,
		-2px  0   2px #FFFFFF,
		 2px  0   2px #FFFFFF,
		-1px -2px 2px #FFFFFF,
		 1px -2px 2px #FFFFFF,
		-1px  2px 2px #FFFFFF,
		 1px  2px 2px #FFFFFF,
		-2px -1px 2px #FFFFFF,
		 2px -1px 2px #FFFFFF,
		-2px  1px 2px #FFFFFF,
		 2px  1px 2px #FFFFFF,
		-2px -2px 2px #FFFFFF,
		 2px -2px 2px #FFFFFF,
		-2px  2px 2px #FFFFFF,
		 2px  2px 2px #FFFFFF,
		-2px -2px 2px #FFFFFF,
		 2px -2px 2px #FFFFFF,
		-2px  2px 2px #FFFFFF,
		 2px  2px 2px #FFFFFF;
}
.menu {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 20px solid transparent;
  /*border: 25px solid transparent;*/
  cursor: default;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 1.4s 0.07s;
  z-index: -5;
}

.spread {
  position: absolute;
  /*top: -45px;
  left: -45px;
  transform-origin: 45px 45px;*/
  top: -37px;
  left: -37px;
  transform-origin: 37px 37px;
  transition: all 0.5s 0.1s;
}
.yes{
	box-shadow: 
		-0   -1px 0   #FFD700,
		 0   -1px 0   #FFD700,
		-0    1px 0   #FFD700,
		 0    1px 0   #FFD700,
		-1px -0   0   #FFD700,
		 1px -0   0   #FFD700,
		-1px  0   0   #FFD700,
		 1px  0   0   #FFD700,
		-1px -1px 0   #FFD700,
		 1px -1px 0   #FFD700,
		-1px  1px 0   #FFD700,
		 1px  1px 0   #FFD700,
		-1px -1px 0   #FFD700,
		 1px -1px 0   #FFD700,
		-1px  1px 0   #FFD700,
		 1px  1px 0   #FFD700;
}
.icon:hover {
  /* Where all the MAGIC happens: */
}
.icon:hover .menu {
  transition: transform 0.4s 0.08s, z-index   0s  0.5s;
  transform: scale(1);
  z-index: 5;
}
.icon:hover .spread, .icon:hover .unit {
  transition: all 0.6s;
}
.icon:hover .spread:nth-child(4) {
  transition-delay: 0.02s;
  transform: rotate(96.42857deg);
}
.icon:hover .spread:nth-child(4) .unit {
  transition-delay: 0.04s;
  transform: rotate(623.57143deg);
}
.icon:hover .spread:nth-child(5) {
  transition-delay: 0.04s;
  transform: rotate(147.85714deg);
}
.icon:hover .spread:nth-child(5) .unit {
  transition-delay: 0.08s;
  transform: rotate(572.14286deg);
}
.icon:hover .spread:nth-child(6) {
  transition-delay: 0.06s;
  transform: rotate(199.28571deg);
}
.icon:hover .spread:nth-child(6) .unit {
  transition-delay: 0.12s;
  transform: rotate(520.71429deg);
}
.icon:hover .spread:nth-child(7) {
  transition-delay: 0.08s;
  transform: rotate(250.71429deg);
}
.icon:hover .spread:nth-child(7) .unit {
  transition-delay: 0.16s;
  transform: rotate(469.28571deg);
}
.icon:hover .spread:nth-child(1) {
  transition-delay: 0.1s;
  transform: rotate(302.14286deg);
}
.icon:hover .spread:nth-child(1) .unit {
  transition-delay: 0.2s;
  transform: rotate(417.85714deg);
}
.icon:hover .spread:nth-child(2) {
  transition-delay: 0.12s;
  transform: rotate(353.57143deg);
}
.icon:hover .spread:nth-child(2) .unit {
  transition-delay: 0.24s;
  transform: rotate(366.42857deg);
}
.icon:hover .spread:nth-child(3) {
  transition-delay: 0.14s;
  transform: rotate(405deg);
}
.icon:hover .spread:nth-child(3) .unit {
  transition-delay: 0.28s;
  transform: rotate(315deg);
}

/* END .icon:hover */
.unit {
  position: absolute;
  background: transparent;
  font-size: 60%;
  text-decoration: none;
  /*width: 35px;
  height: 35px;
  line-height: 35px;*/
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: dodgerblue;
  border-radius: 50%;
  transition: 0.6s;
}
.unit1{
	background-image: url(images/01.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.unit2{
	background-image: url(images/02.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.unit3{
	background-image: url(images/03.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.unit4{
	background-image: url(images/04.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.unit5{
	background-image: url(images/05.png);
    background-size: cover;
    background-repeat: no-repeat;
}
/* Just CodePen layout stuff: */
body, a, ul, li {
  margin: 0;
  outline: 0;
  padding: 0;
  list-style: none;
}

html, body {
  height: 100%;
}

body {
  transform: translate3d(0, 0, 0);
}

/*.icon {
  top: 50%;
  margin-top: -25px;
}*/