.promo {}
.promo .promo_in {}
.promo h1 {font-size: 20px; font-weight: normal; padding: 0 0 15px 0;}
.promo h1 span{color: #cb2930; font-weight: bold;}
.promo p{font-size: 16px; line-height: 1.8;}
.promo p a{text-decoration: none; color: #3878bb; border-bottom: 1px dotted #3878bb;}
.promo p a:hover{color: #cb2930; border-color: #cb2930;}

.options {display: block; padding: 25px 0;}
.options ul {list-style: none; display: block; border-radius: 5px; border: 1px solid #eeeeee;}
.options ul li{float: left; width: 33.33%; display: block; box-shadow:inset 0 0 40px 0 rgba(56,120,187,0.05);}
.options ul li + li{border-left: 1px solid #eeeeee; margin: 0 0 0 -1px;}
.options ul li a{display: block; padding: 0 25px 25px 25px; text-align: center;}
.options ul li a:before{display: block; content: ""; width: 100%; height: 155px; transition: all .2s ease-in-out;}
.options ul li.dice a:before{background: url('../images/dice.svg') center 42px no-repeat;}
.options ul li.chord a:before{background: url('../images/chord.svg') center 28px no-repeat;}
.options ul li.gtuner a:before{background: url('../images/tuner.svg') center 42px no-repeat;}
.options ul li a:hover:before{transform: scale(1.15);}
.options ul li h2{font-size: 20px; font-weight: bold; padding: 0 0 5px 0;}
.options ul li p{font-size: 14px; line-height: 1.4; color: #666666;}

.list {padding: 25px 0 0 0;}
.list h2{padding: 5px 0 5px 15px; position: relative; font-weight: bold; font-size: 15px;}
.list h2:before{content: ""; position: absolute; top: 13px; left: 0; width: 0; height: 0;border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #222222;}
.list ul{list-style: none; width: 100%; counter-reset: my-count;}
.list ul li{padding: 17px 15px 17px 75px; position: relative; border-radius: 5px; background-color: #ecf3fc}
.list ul li:nth-child(even){background-color: #f5f8fc;}
.list ul li:hover{}
.list ul li + li{margin: 4px 0 0 0;}
.list ul li:before {content: counter(my-count); counter-increment: my-count; position: absolute; left: 0; top: 50%; margin: -25px 0 0 0; font-size: 22px; font-weight: bold; line-height: 50px; text-align: right; width: 52px; color: rgba(56, 120, 187, 0.75);}
.list ul li .about{margin: 0 240px 0 0;}
.list ul li .about h3{display: inline; font-weight: bold;}
.list ul li .about h3 a{text-decoration: none; color: #3878bb; border-bottom: 1px dotted #3878bb;}
.list ul li .about h3 a:hover{color: #cb2930; border-color: #cb2930;}
.list ul li .about p.author{display: inline; font-size: 13px;}
.list ul li .about p.author a{font-weight: bold;}
.list ul li .about p.text{display: block; padding: 2px 0 0 0; font-size: 14px; line-height: 1.4; white-space: nowrap; overflow:hidden !important; text-overflow: ellipsis;}
.list ul li .type{display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 112px;}
.list ul li .type p{padding: 2px 0 2px 30px; width: 80px; background: url('../images/guitar_icon.svg') left center no-repeat; font-size: 14px; line-height: 1.2;}
.list ul li .rating{display: block; position: absolute; top: 50%; margin: -7px 0 0 0; right: 30px;}
.list ul li .rating p {display: block; width: 77px; background: url('../images/stars_grey.svg') 0 0 no-repeat; overflow: hidden;}
.list ul li .rating p span {display: block; height: 14px; background: url('../images/stars.svg') 0 0 no-repeat; text-indent: -999px; white-space: nowrap; overflow:hidden;}

@media screen and (max-width: 580px) {
.options ul li{float: none; width: auto;}
.options ul li + li{border: none; border-top: 1px solid #eeeeee; margin: 0;}
.options ul li a{padding: 25px 25px 25px 105px; text-align: left; position: relative;}
.options ul li a:before{position: absolute; left: 0; top: 0; bottom: 0; height: 100%;}
.options ul li.dice a:before{background-size: 50px 41px !important; background-position: 24px center;}
.options ul li.chord a:before{background-size: 35px 50px !important; background-position: 30px center;}
.options ul li.gtuner a:before{background-size: 56px 42px !important; background-position: 22px center;}
.options ul li a:hover:before{transform: none;}
.list ul li .about{margin: 0;}
.list ul li .type{display: inline; position:static;}
.list ul li .type p{width: auto; margin: 2px 0 0 0; background-size: 16px 16px; padding: 2px 2px 2px 22px;}
.list ul li .rating{position: static; margin: 5px 0 0 0;}
}
@media screen and (max-width: 480px) {
.list ul li .about{float: none; margin: 0;}
}