* {margin: 0; padding: 0; font-family: Arial, sans-serif; color: #444447}
html, body {height: 100%}
body {overflow: hidden}

div {position: relative}

.size_w100 {position: absolute; overflow: hidden}
.resizable {position: absolute; background-size: contain !important}

.pointer {cursor: pointer}
.move, .move * {cursor: move !important}

div#loading {position: absolute; display: table; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 10000}
div#loading div {display: table-cell; width: 100%; height: 100%; background-color: #fff; text-align: center; vertical-align: middle; font-size: 20px}

a#f_link {display: block; float: right; width: 19px; height: 19px; background: url('/_img/main/social_icons.png') no-repeat 0 0}
a#f_link:hover {background-position: 0 -22px}
a#vk_link {display: block; float: right; width: 19px; height: 19px; margin-left: 3px !important; background: url('/_img/main/social_icons.png') no-repeat -22px 0}
a#vk_link:hover {background-position: -22px -22px}
a#home_link {display: block; float: left; width: 28px; height: 28px; background: url('/_img/home.png') no-repeat 0 0; background-size: contain}

div.person_glow {background-repeat: no-repeat; background-position: -1000px -1000px; z-index: 20; overflow: hidden}
div.person_active {background-position: 0 0;
                   filter: grayscale(100%) brightness(1000%); -webkit-filter: grayscale(100%) brightness(1000%);
                  }
div.person_active_selected {background-position: 0 0}                  
div.person_name {position: absolute; width: 350px; height: 200px; background-repeat: no-repeat; background-size: contain}

div.button_wave {position: absolute; width: 180px; height: 180px; background: url('/_img/button_wave.png') no-repeat 50% 50%; background-size: 50% !important; opacity: 1; z-index: 2000}
div.button_wave_over {background-size: 100% !important; opacity: 0}

div.info_plus {position: absolute; width: 100px; height: 100px; background: url('/_img/button_bg.png') no-repeat 0 0; cursor: pointer; z-index: 2010}
div.info_plus_plus {position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: url('/_img/button_plus.png') no-repeat 0 0; transition: transform 0.3s}
div.info_text {position: absolute; width: 200px; padding: 50px 20px 50px 20px; background-color: #eff0f4; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.35); z-index: 2005}

div.info_plus_selected {background-image: url('/_img/button_bg_selected.png')}

div.sound {position: absolute; width: 100px; height: 100px; background-repeat: no-repeat; background-position: 0 0; cursor: pointer; z-index: 2005}
div.sound_on {background-image: url('/_img/button_sound_on.png')}
div.sound_off {background-image: url('/_img/button_sound_off.png')}

div.zoom {position: absolute; width: 100px; height: 100px; background: url('/_img/button_zoom.png') no-repeat 0 0; cursor: pointer; z-index: 2005}
div.zoom_lens {position: absolute; display: none; width: 440px; height: 440px; border-radius: 220px; background-repeat: no-repeat; background-position: 0 0; background-size: auto !important; z-index: 2020}
div.zoom_lens div {position: absolute; width: 488px; height: 488px; background: url('/_img/zoom_lens.png') no-repeat 0 0}

div.medium div.info_plus, div.medium div.info_plus_plus {width: 70px; height: 70px}
div.medium div.button_wave {width: 140px; height: 140px; margin: 0.25%}

/* Control */
#selected_person {position: absolute; top: 0; right: 0; background: url('/_img/person_shadow.png') no-repeat 50% 50%; background-size: contain}
#selected_person a {position: absolute; display: block; top: 10%; left: 10%; width: 80%; height: 80%; background-repeat: no-repeat; background-position: 0 0; background-size: contain}
#selected_person div.person_marker {position: absolute; display: block; bottom: 15%; right: 15%; width: 15%; height: 15%; background: url('/_img/person_marker.png') no-repeat 0 0; background-size: contain}
#selected_person.selected div.person_marker {background-image: url('/_img/person_marker_selected.png')}

#page_title {position: absolute; background-size: contain !important}

#info_text_global {position: absolute; top: 0; left: 0; padding: 1% 0 0 1%; z-index: 10}
#info_text_global div.text {width: 220px; padding: 35px 25px 30px 25px; color: #d4d5d6; background-color: #6f6e6c; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.35)}
#info_text_global div.text div {margin-top: 20px; color: #afafb0}
#info_text_global div.text div.info_text_close {position: absolute; top: -10px; right: 10px; width: 26px; height: 26px; background: url('/_img/button_close.png') no-repeat 0 0; background-size: contain; cursor: pointer}

#button_info {position: absolute; top: 0; left: 0; padding: 1% 0 0 1%}
#button_info div {width: 100%; height: 100%; background: url('/_img/info.png') no-repeat 0 0; background-size: contain; cursor: pointer}

#button_map {position: absolute; top: 0; left: 4%; padding: 1% 0 0 1%}
#button_map a {display: block; width: 100%; height: 100%; background: url('/_img/pointer.png') no-repeat 0 0; background-size: contain}

#button_home {position: absolute; top: 0; left: 4%; padding: 1% 0 0 1%}
#button_home a {display: block; width: 100%; height: 100%; background: url('/_img/home.png') no-repeat 0 0; background-size: contain}

#button_video {position: absolute; top: 0; left: 8%; padding: 1% 0 0 1%}
#button_video div {display: block; width: 100%; height: 100%; background: url('/_img/video.png') no-repeat 0 0; background-size: contain; cursor: pointer}


/* Main */
#main_content {font-size: 40px}
#main_menu a {text-decoration: none; color: #787476; margin-left: 20px}
#main_menu a.na {opacity: 0.5}
#main_menu a.na:hover {opacity: 1}
#main_content p {margin-bottom: 20px; line-height: 140%; color: #787476}
#main_content p span {color: #787476; white-space: nowrap}

/* Choice */
div.choice_click {position: absolute; width: 299px; height: 433px; cursor: pointer}
div.choice_info {position: absolute; width: 326px; height: 433px; background-color: #eff0f4; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.35); z-index: 205}
div.choice_visited0 {position: absolute; width: 19px; height: 20px; background: url('/choice/_img/radio0.png') no-repeat 0 0}
div.choice_visited1 {position: absolute; width: 19px; height: 20px; background: url('/choice/_img/radio1.png') no-repeat 0 0}
#arrow_l {background: url('/choice/_img/arrow_l.png') no-repeat 0 0; cursor: pointer}
#arrow_r {background: url('/choice/_img/arrow_r.png') no-repeat 0 0; cursor: pointer}

/* Video */
div#video {display: table; width: 100%; height: 100%; z-index: 6000; background-color: rgba(0, 0, 0, 0.8)}
div#video div {display: table-cell; text-align: center; vertical-align: middle}
div#video div div {display: inline-block; margin: 0 auto; padding: 50px; background: url('/_img/button_close.png') no-repeat 99% 1%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer}
div#video li {display: block; float: left; padding: 20px; color: #fff}