/** Monitor MysticLight Animation by Mia**/
/** 2018 / 6 / 1 v1 **/
.mysticLight_monitor {
	background-color: #000
}
.btu_bar {
	position: relative;
	z-index: 99;
	margin: -6% auto 150px;
	width: 80%
}
.btu_bar .btu_icon {
	display: block;
	float: left;
	width: 10%;
	color: #fff;
	text-align: center;
	opacity: .3;
	padding: 10px 0;
	text-decoration: none;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}
.btu_bar .btu_icon:hover {
	opacity: .8
}
.btu_bar .btu_icon.active {
	opacity: 1
}
.btu_bar .btu_icon .icon {
	display: block;
	background-size: cover;
	width: 40px;
	height: 40px;
	margin: 0 auto 5px
}
.btu_bar .btu_icon span {
	color: #fff
}
.section_rgb_monitor {
	background: #000
}
.kbg {
	max-width: 960px;
	width: 100%;
	padding-top: 60%;
	position: relative;
	z-index: 1;
	margin: 30px auto 0
}
.kbg #color_bg {
	position: absolute;
	width: 90%;
	height: 50%;
	top: 20%;
	right: 5%;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}
.kbg #color_bg.off {
	background-color: #000
}
.kbg #color_bg.static {
	background-color: red
}
.kbg #color_bg.flashing {
	background-color: red;
	-webkit-animation: flashing 1s infinite;
	animation: flashing 1s infinite
}
.kbg #color_bg.breathin {
	background-color: red;
	-webkit-animation: breathin 4.8s infinite;
	animation: breathin 4.8s infinite
}
.kbg #color_bg.rainbow {
	background: -webkit-repeating-linear-gradient(325deg, red 0%, yellow 7.14%, lime 14.28%, cyan 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
	background: -o-repeating-linear-gradient(325deg, red 0%, yellow 7.14%, lime 14.28%, cyan 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
	background: repeating-linear-gradient(125deg, red 0%, yellow 7.14%, lime 14.28%, cyan 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
	background-size: 70vw 100vw;
	-webkit-animation: rainbow-slide 35s infinite linear forwards;
	animation: rainbow-slide 35s infinite linear forwards
}
.kbg #color_bg.lighting {
	background-color: red;
	-webkit-animation: lighting 1s infinite;
	animation: lighting 1s infinite
}
.kbg #color_bg.meteor {
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, red 8%, rgba(255,255,255,0) 11%, rgba(255,255,255,0) 21%, yellow, 24%, rgba(255,255,255,0) 27%, rgba(255,255,255,0) 37%, lime 40%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 53%, cyan 56%, rgba(255,255,255,0) 59%, rgba(255,255,255,0) 69%, blue 72%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 85%, magenta 88%, rgba(255,255,255,0) 91%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, red 8%, rgba(255,255,255,0) 11%, rgba(255,255,255,0) 21%, yellow, 24%, rgba(255,255,255,0) 27%, rgba(255,255,255,0) 37%, lime 40%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 53%, cyan 56%, rgba(255,255,255,0) 59%, rgba(255,255,255,0) 69%, blue 72%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 85%, magenta 88%, rgba(255,255,255,0) 91%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, red 8%, rgba(255,255,255,0) 11%, rgba(255,255,255,0) 21%, yellow, 24%, rgba(255,255,255,0) 27%, rgba(255,255,255,0) 37%, lime 40%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 53%, cyan 56%, rgba(255,255,255,0) 59%, rgba(255,255,255,0) 69%, blue 72%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 85%, magenta 88%, rgba(255,255,255,0) 91%, rgba(255,255,255,0) 100%);
	background-size: 250vw;
	-webkit-animation: meteor-slide 16s infinite linear;
	animation: meteor-slide 16s infinite linear
}
.kbg #color_bg.marquee {
	background: -moz-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, red 7%, rgba(255,255,255,0) 9%, rgba(255,255,255,0) 21%, yellow, 23%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 37%, lime 39%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 53%, cyan 55%, rgba(255,255,255,0) 57%, rgba(255,255,255,0) 69%, blue 71%, rgba(255,255,255,0) 73%, rgba(255,255,255,0) 85%, magenta 87%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, red 7%, rgba(255,255,255,0) 9%, rgba(255,255,255,0) 21%, yellow, 23%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 37%, lime 39%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 53%, cyan 55%, rgba(255,255,255,0) 57%, rgba(255,255,255,0) 69%, blue 71%, rgba(255,255,255,0) 73%, rgba(255,255,255,0) 85%, magenta 87%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, red 7%, rgba(255,255,255,0) 9%, rgba(255,255,255,0) 21%, yellow, 23%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 37%, lime 39%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 53%, cyan 55%, rgba(255,255,255,0) 57%, rgba(255,255,255,0) 69%, blue 71%, rgba(255,255,255,0) 73%, rgba(255,255,255,0) 85%, magenta 87%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%);
	background-size: 600%;
	-webkit-animation: marquee-slide 10s infinite linear;
	animation: marquee-slide 10s infinite linear
}
.kbg #color_bg.audio {
	background: -webkit-repeating-linear-gradient(right, blue 0%, yellow 12.5%, magenta 25%, blue 37.5%, red 50%, cyan 62.5%, lime 75%, red 87.5%, blue 100%);
	background: -o-repeating-linear-gradient(right, blue 0%, yellow 12.5%, magenta 25%, blue 37.5%, red 50%, cyan 62.5%, lime 75%, red 87.5%, blue 100%);
	background: repeating-linear-gradient(right, blue 0%, yellow 12.5%, magenta 25%, blue 37.5%, red 50%, cyan 62.5%, lime 75%, red 87.5%, blue 100%);
	background-size: 170%;
	-webkit-animation: audio 5s infinite linear;
	animation: audio 5s infinite linear
}
.kbg .monitor_bg {
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-size: cover;
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/main_msi-Optix-_MAG271CR.png);
	background-color: transparent;
	background-position: 50% 0;
	background-repeat: no-repeat;
	z-index: 100;
	opacity: 1
}
.btu_icon[data-effect="off"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_off_nor.png)
}
.btu_icon[data-effect="static"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_rainbow_nor.png)
}
.btu_icon[data-effect="audio"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_audio_nor.png)
}
.btu_icon[data-effect="marquee"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_marquee_nor.png)
}
.btu_icon[data-effect="meteor"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_meteorshower_nor.png)
}
.btu_icon[data-effect="rainbow"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_static_nor.png)
}
.btu_icon[data-effect="lighting"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_light_nor.png)
}
.btu_icon[data-effect="breathin"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_breath_nor.png)
}
.btu_icon[data-effect="flashing"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_flash_nor.png)
}
.btu_icon[data-effect="random"] .icon {
	background-image: url(https://asset.msi.com/global/picture/image/feature/AIO/Monitor/MAG271CR/effect_btn_random_nor.png)
}
@keyframes flashing {
0% {
opacity:0
}
44% {
opacity:0
}
45% {
opacity:1
}
50% {
opacity:1
}
51% {
opacity:0
}
100% {
opacity:0
}
}
@keyframes breathin {
0% {
opacity:0
}
50% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes rainbow-slide {
0% {
background-position-x:0
}
100% {
background-position-x:600vw
}
}
@keyframes lighting {
0% {
background-color:red
}
33% {
background-color:red
}
33.5% {
background-color:#fff
}
35% {
background-color:red
}
66% {
background-color:red
}
66.5% {
background-color:#fff
}
68% {
background-color:red
}
96% {
background-color:red
}
96.5% {
background-color:#fff
}
98% {
background-color:red
}
}
@keyframes meteor-slide {

0% {
background-position-x:14vw
}
0.1% {
background-position-x:10vw
}
100% {
background-position-x:-500vw
}
}
@keyframes marquee-slide {
0% {
background-position-x:-6%
}
8.3% {
background-position-x:-18%
}
16.6% {
background-position-x:-4%
}
16.61% {
background-position-x:-26%
}
24.9% {
background-position-x:-37%
}
 33.2% {
background-position-x:-23%
}
 33.21% {
background-position-x:-45%
}
 41.5% {
background-position-x:-56%
}
 49.8% {
background-position-x:-44%
}
 49.81% {
background-position-x:-63%
}
 58.1% {
background-position-x:-76%
}
 66.4% {
background-position-x:-63%
}
 66.41% {
background-position-x:-82%
}
 74.7% {
background-position-x:-94%
}
 83% {
background-position-x:-82%
}
 83.1% {
background-position-x:-102%
}
 91.3% {
background-position-x:-114%
}
 100% {
background-position-x:-100%
}
}

@media (max-width: 1200px) {
.btu_bar {
	margin: 0 auto 150px
}
}

@media (max-width: 768px) {
.btu_bar {
	text-align: center;
	margin: 3% auto 5%
}
.btu_bar .btu_icon {
	display: inline-block;
	float: none;
	width: 60px;
	margin: 0 8px;
	vertical-align: top;
}
}