#v2-notification { color: white; background-color: #7c1d48; } #v2-notification a { font-size: 10px; border-width: 1px; } #v2-notification input, #v2-notification input + * { display: none; } #v2-notification input:checked + * { display: block; } #v2-notification { width: 100vw; position: relative; left: 50%; margin-left: -50vw; } #v2-notification label { cursor: pointer; } #v2-notification label::after { content: ''; display: block; width: 21px; height: 16px; background-position: 5px 0px; background-repeat: no-repeat; background-image: url('data:image/svg+xml;charset=UTF-8,'); } #v2-notification .col-md-12 > div { padding: 15px; } #v2-notification p { font-size: 15px; font-weight: 500; margin-left: 15px; margin-right: 9px; } #v2-notification a { min-width: 95px; } @media (min-width: 768px) { #v2-notification .row > div:nth-child(2) { padding-left: 10px; } #v2-notification a { max-width: 106px; } #v2-notification .col-md-12 > div::before { content: ''; display: block; position: absolute; width: 30px; height: 30px; top: 50%; margin-top: -20px; margin-left: -13px; background-image: url('tada.png'); } } @media (max-width: 767px) { #v2-notification .row > div { width: 100%; margin-left: 0; text-align: center; padding: 0; } #v2-notification a { width: 100%; } #v2-notification a { margin: 0 auto; } } @media (max-width: 991px) { #v2-notification p span { display: none; } #v2-notification .row > div:last-child { position: absolute; top: 15px; right: 0; } #v2-notification label { position: absolute; top: 0; right: 15px; } }