h1 {font-size: 20px; font-weight: normal; padding: 0 0 15px 0;}
h1 span{color: #cb2930; font-weight: bold;}

.info {padding: 0 0 60px 0;}
.info p{padding: 10px 25px; border-radius: 5px; background-color: #ecf3fc;}
.info p.alert{display: none; padding: 10px 25px 10px 53px; margin: 5px 0 0 0; background: url('../images/alert.svg') 25px 12px no-repeat #fffccc;}

.tuner {float: left; width: 45%; padding: 70px 0 0 0;}
.tuner .box {text-align: center; position: relative; display: block; width: 170px; height: 170px; margin: 0 auto; background: url('../images/tuner_bg.svg') center center no-repeat;}
.tuner .mainnote {position: absolute; z-index: 1000;color: #ffffff; transition: background-color .5s ease-in-out; display: block; margin: 0 auto; text-align: center; font-size: 46px; width: 110px; height: 110px; margin: 30px; line-height: 112px; background-color: #222222; border-radius: 50%; box-shadow: inset 0 -25px 25px 0 rgba(0,0,0,0.2);}
.tuner .mainnote.green{background-color: #009900; color: #ffffff;}
.tuner .mainnote.red{background-color: #cb2930; color: #ffffff;}
.tuner .octave{font-size: 16px; font-weight: bold; color: rgba(255, 255, 255, 0.5); margin: -10px 0 0 0; position: absolute;}
.tuner .pointer{position: absolute; z-index: 999; width: 150px; height: 150px; margin: 10px; background: url('../images/pointer.svg') top center no-repeat;}
.tuner .hz{margin: -20px 0 0 0; text-align: center; font-weight: bold; font-size: 11px; color: #aaaaaa;}
.tuner ul.values {display: none;}

.guitar  {float: right; width: 55%;}
.guitar .box {max-width: 100%; width: 360px; height: 400px; margin: 0 auto; background: url('../images/guitar_tuner.svg') center top no-repeat; position: relative;}
.guitar span{color: rgba(56, 120, 187, 0.75); transition: background-color .2s ease-in-out, color .2s ease-in-out; display: block; text-align: center; width: 58px; height: 58px; line-height: 58px; font-weight: bold; background-color: #f5f8fc; border-radius: 50%; position: absolute;}
.guitar span#E4 {top: 175px; right: 0px;}
.guitar span#B3 {top: 105px; right: 0px;}
.guitar span#G3 {top: 35px; right: 0px;}
.guitar span#D3 {top: 35px; left: 0px;}
.guitar span#A2 {top: 105px; left: 0px;}
.guitar span#E2 {top: 175px; left: 0px;}
.guitar span.active{background-color: #3878bb; color: #ffffff;}

.tbox {position: relative;}
.start {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.75); z-index: 9999;}
.start p{padding: 0 15px; text-align: center; position: relative; top: 50%; transform: translateY(-50%);}
.start a{display: inline-block; padding: 15px 25px; font-weight: bold; text-transform: uppercase; border-radius: 5px; background-color: #3878bb; color: #ffffff; transition: background-color 0.1s ease-in-out; box-shadow: inset 0 -15px 15px 0 rgba(0,0,0,0.2);}
.start a:hover{background-color: #cb2930;}
.start a:active{top: 1px; left: 1px;}

@media screen and (max-width: 580px) {
.tuner {float: none; width: auto; padding: 0 0 50px 0;}
.guitar  {float: none; width: auto;}
.start p{top: 14%;}
}