@font-face{font-family:"RobotoBold";src:url("../fonts/roboto_bold.ttf");}
@font-face{font-family:"RobotoBlack";src:url("../fonts/roboto_black.ttf");}
@font-face{font-family:"WatchSNum";src:url("../fonts/WatchSNum-3R.ttf");}

* {-webkit-tap-highlight-color: transparent;}

html, body{width: 100%; height: 100%; margin: 0px auto; overflow: hidden; cursor: url(../images/simulator_mouse.png) 18 18, default;}

.hidden{opacity:0; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.visible{opacity:1; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.transparent{opacity:0.5; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}

.temperature{font-size: 14px;}

#settings{position: fixed; z-index: 1000; overflow: hidden; width: 320px; height: 320px; top: 20px; left: 20px; background-image: radial-gradient(rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0)); border-radius: 50%; display: block; transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.settings-opened{transform: scale(1);}
.settings-closed{transform: scale(0);}

#toggle_meteo_mask{position: absolute; z-index: 1030; overflow: hidden; width: 172px; height: 62px; top: 62px; left: 74px; background-image: url('../images/toggle_meteo.png');}
#toggle_meteo_cursor{position: absolute; z-index: 1020; overflow: hidden; width: 58px; height: 58px; top: 64px; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
#toggle_meteo_back{position: absolute; z-index: 1010; overflow: hidden; width: 172px; height: 62px; top: 62px; left: 74px; background-color: #666666;}
#toggle_watch_mask{position: absolute; z-index: 1030; overflow: hidden; width: 172px; height: 62px; top: 129px; left: 74px; background-image: url('../images/toggle_watch.png');}
#toggle_watch_cursor{position: absolute; z-index: 1020; overflow: hidden; width: 58px; height: 58px; top: 131px; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
#toggle_watch_back{position: absolute; z-index: 1010; overflow: hidden; width: 172px; height: 62px; top: 129px; left: 74px; background-color: #666666;}
#toggle_hour_mask{position: absolute; z-index: 1030; overflow: hidden; width: 172px; height: 62px; top: 196px; left: 74px; background-image: url('../images/toggle_hour.png');}
#toggle_hour_cursor{position: absolute; z-index: 1020; overflow: hidden; width: 58px; height: 58px; top: 198px; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
#toggle_hour_back{position: absolute; z-index: 1010; overflow: hidden; width: 172px; height: 62px; top: 196px; left: 74px; background-color: #666666;}
#close{position: absolute; z-index: 1050; overflow: hidden; width: 60px; height: 60px; top: 260px; left: 130px; font-size: 30px; color: #999999; font-family: RobotoBlack; line-height: 60px; text-align: center;}
.toggle_eu{left: 76px;}
.toggle_us{left: 186px;}
.toggle_watch_analog{left: 76px;}
.toggle_watch_digital{left: 186px;}

#colors{position: fixed; z-index: 1000; overflow: hidden; width: 320px; height: 320px; top: 20px; left: 20px; background-image: radial-gradient(rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 75%,  rgba(0, 0, 0, 0) 100%); border-radius: 50%; display: block; transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.colors-opened{transform: scale(1);}
.colors-closed{transform: scale(0);}
#colors_close{position: absolute; z-index: 990; overflow: hidden; top: 120px; left: 120px; width: 80px; height: 80px;}

.bullet_colors{position: absolute; z-index: 980; overflow: hidden; top: 0px; left: 140px; width: 40px; height: 160px;}
.bullet_colors div{width: 40px; height: 40px; border-radius: 50%; margin-top: 30px;}

#bullet_blue{transform: rotate(0deg); transform-origin: bottom center;}
#bullet_grey{transform: rotate(30deg); transform-origin: bottom center;}
#bullet_purple{transform: rotate(60deg); transform-origin: bottom center;}
#bullet_red{transform: rotate(90deg); transform-origin: bottom center;}
#bullet_teal{transform: rotate(120deg); transform-origin: bottom center;}
#bullet_yellow{transform: rotate(150deg); transform-origin: bottom center;}
#bullet_instagram{transform: rotate(180deg); transform-origin: bottom center;}
#bullet_messenger{transform: rotate(210deg); transform-origin: bottom center;}
#bullet_lgbt{transform: rotate(240deg); transform-origin: bottom center;}
#bullet_saphir{transform: rotate(270deg); transform-origin: bottom center;}
#bullet_orange{transform: rotate(300deg); transform-origin: bottom center;}
#bullet_emeraud{transform: rotate(330deg); transform-origin: bottom center;}

#bullet_blue_color{background: linear-gradient(0deg, #002afc, #00ecfb);}
#bullet_grey_color{background: linear-gradient(-30deg, #464545, #d5d4d4);}
#bullet_purple_color{background: linear-gradient(-60deg, #6600aa, #f254f8);}
#bullet_red_color{background: linear-gradient(-90deg, #c30202, #ff8400);}
#bullet_teal_color{background: linear-gradient(-120deg, #015c66, #54f8d3);}
#bullet_yellow_color{background: linear-gradient(-150deg, #fcac00, #fbec00);}
#bullet_instagram_color{background: linear-gradient(-135deg, #fecb56, #feac1c, #fd6801, #ff3e58, #f93597, #8f37c4, #0142e4);}
#bullet_messenger_color{background: linear-gradient(-165deg, #138cfd, #2681fe, #5663ff, #8743fe, #bc3cd9, #f5508c, #ff7060);}
#bullet_lgbt_color{background: linear-gradient(-240deg, #750787, #004dff, #008026, #ffed00, #ff8c00, #e40303);}
#bullet_saphir_color{background: linear-gradient(#015d87, #015d87);}
#bullet_orange_color{background: linear-gradient(#ff6600, #ff6600);}
#bullet_emeraud_color{background: linear-gradient(#015b66, #015b66);}

#bullet_arrow{position: absolute; z-index: 970; overflow: hidden; top: 0px; left: calc(136% / 3.2); width: calc(48% / 3.2); height: 100%; transform: rotate(0deg);}
#bullet_arrow div{width: calc(100% - 4px); height: 44px; border-radius: 50%; margin-top: 26px; background: #000000; border: 2px solid #ff6600;}

#button_meteo{position: absolute; z-index: 500; overflow: hidden; top: 80px; left: 130px; width: 100px; height: 60px;}
#button_heart{position: absolute; z-index: 500; overflow: hidden; top: 150px; left: 30px; width: 100px; height: 60px;}
#button_battery{position: absolute; z-index: 500; overflow: hidden; top: 150px; left: 230px; width: 100px; height: 60px;}
#button_settings{position: absolute; z-index: 500; overflow: hidden; top: 215px; left: 95px; width: 50px; height: 50px;}
#button_calendar{position: absolute; z-index: 500; overflow: hidden; top: 220px; left: 150px; width: 60px; height: 60px;}
#button_colors{position: absolute; z-index: 500; overflow: hidden; top: 215px; left: 215px; width: 50px; height: 50px;}


#mask_main{position: fixed; z-index: 450; overflow: hidden; top: 0px; left: 0px; width: 360px; height: 360px; background-image: url(../images/watch.png);}
#center{position: absolute; z-index: 400; overflow: hidden; top: 165px; left: 165px; width: 30px; height: 30px; background-image: url('../images/center.png');}

#hour_bloc{position: absolute; z-index: 300; overflow: hidden; top: 89px; left: 174px; width: 12px; height: 182px;}
#hour_color_top{position: absolute; z-index: 20; overflow: hidden; top: 2px; left: 2px; width: 8px; height: 68px;}
#hour_black_top{position: absolute; z-index: 10; overflow: hidden; top: 0px; left: 0px; width: 12px; height: 72px; background-color: #000000;}
#hour_color_bottom{position: absolute; z-index: 20; overflow: hidden; top: 112px; left: 2px; width: 8px; height: 14px;}
#hour_black_bottom{position: absolute; z-index: 10; overflow: hidden; top: 110px; left: 0px; width: 12px; height: 18px; background-color: #000000;}
#hour_shadow{display: none; position: absolute; z-index: 290; overflow: hidden; top: 4px; left: 174px; width: 20px; height: 360px; background-image: url('../images/hour_shadow.png');}

#minute_bloc{position: absolute; z-index: 200; overflow: hidden; top: 65px; left: 176px; width: 8px; height: 230px;}
#minute_color_top{position: absolute; z-index: 20; overflow: hidden; top: 2px; left: 2px; width: 4px; height: 92px;}
#minute_black_top{position: absolute; z-index: 10; overflow: hidden; top: 0px; left: 0px; width: 8px; height: 96px; background-color: #000000;}
#minute_color_bottom{position: absolute; z-index: 20; overflow: hidden; top: 136px; left: 2px; width: 4px; height: 24px;}
#minute_black_bottom{position: absolute; z-index: 10; overflow: hidden; top: 134px; left: 0px; width: 8px; height: 26px; background-color: #000000;}
#minute_shadow{display: none; position: absolute; z-index: 190; overflow: hidden; top: 4px; left: 176px; width: 16px; height: 360px; background-image: url('../images/minute_shadow.png');}

#time{position: absolute; z-index: 200; overflow: hidden; top: 157px; left: 110px; width: 140px; height: 46px; opacity: 0; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
#time_hour_d{overflow: hidden; width: 30px; height: 46px; display: inline-block; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
#time_hour_u{overflow: hidden; width: 30px; height: 46px; display: inline-block; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
#time_minute_d{overflow: hidden; width: 30px; height: 46px; display: inline-block; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); margin-left: 20px;}
#time_minute_u{overflow: hidden; width: 30px; height: 46px; display: inline-block; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}

#date_text{position: absolute; z-index: 100; overflow: hidden; top: 240px; left: 157px; width: 46px; height: 26px; line-height: 28px; font-family: RobotoBold; font-size: 22px; color: #ffffff; text-align: center;}

#meteo_icon{position: absolute; z-index: 100; overflow: hidden; top: 88px; left: 132px; width: 46px; height: 46px; background-size: contain; background-repeat: no-repeat; background-position: center;}
#meteo_text{position: absolute; z-index: 100; overflow: hidden; top: 98px; left: 172px; width: 56px; height: 26px; line-height: 28px; font-family: RobotoBold; font-size: 22px; color: #ffffff; text-align: right;}

#heart_text{position: absolute; z-index: 100; overflow: hidden; top: 162px; left: 18px; width: 74px; height: 36px; line-height: 38px; font-family: RobotoBold; font-size: 28px; color: #ffffff; text-align: center;}
#heart_mask{position: absolute; z-index: 90; overflow: hidden; top: 143px; left: 18px;  width: 74px; height: 74px; background-image: url('../images/level_mask.png');} 
#heart_line{position: absolute; z-index: 80; overflow: hidden; top: 143px; left: 18px;  width: 74px; height: 74px; background-image: url('../images/level_line.png'); opacity: 0;}

#battery_text{position: absolute; z-index: 100; overflow: hidden; top: 162px; left: 268px; width: 74px; height: 36px; line-height: 38px; font-family: RobotoBold; font-size: 28px; color: #ffffff; text-align: center;}
#battery_mask{position: absolute; z-index: 90; overflow: hidden; top: 143px; left: 268px;  width: 74px; height: 74px; background-image: url('../images/level_mask.png'); transform: rotate(180deg);} 
#battery_line{position: absolute; z-index: 80; overflow: hidden; top: 143px; left: 268px;  width: 74px; height: 74px; background-image: url('../images/level_line.png'); opacity: 0;} 

#container{position: absolute; z-index: 40; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%;}

#second{position: absolute; z-index: 30; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url('../images/second.png');}

#back_aod_analog{position: absolute; z-index: 20; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url('../images/back_aod_analog.png'); transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); display: none;}
#back_aod_digital{position: absolute; z-index: 20; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url('../images/back_aod_digital.png'); transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); display: none; opacity: 0;}
#back_analog{position: absolute; z-index: 10; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url('../images/back_analog.png'); transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
#back_digital{position: absolute; z-index: 10; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url('../images/back_digital.png'); transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); opacity: 0;}

#watch{position: absolute; z-index: 0; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}