@font-face { font-family: 'themify'; src:url('../fonts/themify.eot?-fvbane'); src:url('../fonts/themify.eot?#iefix-fvbane') format('embedded-opentype'), url('../fonts/themify.woff?-fvbane') format('woff'), url('../fonts/themify.ttf?-fvbane') format('truetype'), url('../fonts/themify.svg?-fvbane#themify') format('svg'); font-weight: normal; font-style: normal; } div.cs-skin-border { background: transparent; font-size: 16px; font-weight: 700; max-width: 600px; } @media screen and (max-width: 30em) { div.cs-skin-border { font-size: 1em; } } .cs-skin-border > span { border: 5px solid #000; border-color: inherit; -webkit-transition: background 0.2s, border-color 0.2s; transition: background 0.2s, border-color 0.2s; } .cs-skin-border > span::after, .cs-skin-border .cs-selected span::after { /*font-family: 'themify';*/ /*content: "\e648";*/ } .cs-skin-border ul span::after { content: ''; opacity: 0; } .cs-skin-border .cs-selected span::after { /*content: "\e64b";*/ /*content: "\e64c";*/ color: #ddd9c9; font-size: 1.5em; opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .cs-skin-border.cs-active > span { background: #fff; border-color: #fff; color: #db4118; } .cs-skin-border .cs-options { color: #db4118; font-size: 0.75em; opacity: 0; -webkit-transition: opacity 0.2s, visibility 0s 0.2s; transition: opacity 0.2s, visibility 0s 0.2s; } .cs-skin-border.cs-active .cs-options { opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .cs-skin-border ul span { padding: 1em 2em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cs-skin-border .cs-options li span:hover, .cs-skin-border li.cs-focus span { background: #f5f3ec; }