@mn-cl: #3394e6; @wht: #fff; @txt: #000; @blk: #000; .ox__gad { padding: 20px 0; } .ox__gad * { box-sizing: border-box; } .ox__gad *:focus { outline: none; } .ox__btn { cursor: pointer; border-radius: 6px; padding: 0.5rem 2.5rem 0.5rem; text-align: center; font-size: 1.2rem; font-weight: 400; text-decoration: none; display: inline-block; border: 0px solid transparent; line-height: 1; background: @mn-cl; color: @wht; border: 1px solid darken(@mn-cl, 5%); transition: all 250ms ease-out; &:focus { box-shadow: 0px 0px transparent; } &:hover { background: lighten(@mn-cl, 10%); color: @wht; } &:active, &:focus { background: @mn-cl; color: @wht; border: 1px solid darken(@mn-cl, 5%); &:hover { background: lighten(@mn-cl, 10%); color: @wht; } } } .ox { &__title { text-align: center; margin: 15px 0; padding: 0; @media (max-width: 560px) { font-size: 1.35rem; } &-big { font-weight: 800; font-size: 2rem; @media (max-width: 560px) { font-size: 1.5rem; } } } &__kub { text-align: center; img { max-width: 100%; display: inline-block; margin: 0 1rem; } } &__rezult { display: none; padding: 15px; } &__item { .alignleft { float: left; margin-right: 10px; margin-bottom: 16px; } &:after { content: ''; display: block; width: 100%; height: 1px; clear: both; } } } .btns { text-align: center; margin: 20px auto; } #ox__rezult { display: none; max-width: 750px; margin: 0 auto; border: 1px solid lighten(@blk, 15%); border-radius: 5px; padding: 5px 15px; } .rezult-list { margin: 1rem auto 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid lighten(@blk, 15%); &__title { font-weight: 800; font-size: 1rem; text-align: center; } &__cardtitle { background: darken(@wht, 10%); padding: 10px 15px; font-weight: 800; font-size: 1.75rem; text-align: center; margin-bottom: 1rem; span { display: block; font-size: 0.85rem; } @media (max-width: 560px) { font-size: 1.35rem; } } }