.ui.items { margin: 1em 0 0; } .ui.items:first-child { margin-top: 0; } .ui.items:last-child { margin-bottom: -1em; } .ui.items:after { display: block; content: ' '; height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.items>.row>.item, .ui.items>.item { display: block; float: left; position: relative; top: 0; width: 316px; min-height: 375px; margin: 0 .5em 2.5em; padding: 0; background-color: #FFF; line-height: 1.2; font-size: 1em; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1); box-shadow: 0 0 0 1px rgba(0,0,0,.1); border-bottom: .2em solid rgba(0,0,0,.2); border-radius: .33em; -webkit-transition: -webkit-box-shadow .2s ease; transition: box-shadow .2s ease; padding: .5em; } .ui.items a.item, .ui.items .item a { cursor: pointer; } .ui.items .item, .ui.items .item>.image, .ui.items .item>.image .overlay, .ui.items .item>.content, .ui.items .item>.content>.meta, .ui.items .item>.content>.extra { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.items .item>.image { display: block; position: relative; background-color: rgba(0,0,0,.05); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-radius: .2em; } .ui.items .item>.image>img { display: block; width: 100%; } .ui.items .item>.content { padding: .75em .5em; } .ui.items .item>.content>.name { display: block; font-size: 1.25em; font-weight: 700; margin-bottom: .2em; color: rgba(0,0,0,.7); } .ui.items .item>.content>.description { clear: both; margin: 0; color: rgba(0,0,0,.45); } .ui.items .item>.content>.description p { margin: 0 0 .2em; } .ui.items .item>.content>.description p:last-child { margin-bottom: 0; } .ui.items .item .meta { float: right; color: rgba(0,0,0,.35); } .ui.items .item>.content>.meta+.name { float: left; } .ui.items .item .star.label:hover::after { border-right-color: #F6EFC3; } .ui.items .item .star.label:hover::after { border-top-color: #F6EFC3; } .ui.items .item .star.label:hover .icon { color: #ac9400; } .ui.items .item .star.label.active::after { border-right-color: #F6EFC3; } .ui.items .item .star.label.active::after { border-top-color: #F6EFC3; } .ui.items .item .star.label.active .icon { color: #ac9400; } .ui.items .item .like.label:hover::after { border-right-color: #F5E1E2; } .ui.items .item .like.label.active::after { border-top-color: #F5E1E2; } .ui.items .item .like.label:hover .icon { color: #ef404a; } .ui.items .item .like.label.active::after { border-right-color: #F5E1E2; } .ui.items .item .like.label.active::after { border-top-color: #F5E1E2; } .ui.items .item .like.label.active .icon { color: #ef404a; } .ui.items .item .extra { position: absolute; width: 100%; padding: 0 .5em; bottom: -2em; left: 0; height: 1.5em; color: rgba(0,0,0,.25); -webkit-transition: color .2s ease; transition: color .2s ease; } .ui.items .item .extra>img { display: inline-block; border-radius: 500px; margin-right: .25em; vertical-align: middle; width: 2em; } .ui.items .item .extra .left { float: left; } .ui.items .item .extra .right { float: right; } .ui.items .item:hover { cursor: pointer; z-index: 5; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.2); } .ui.items .item:hover .extra { color: rgba(0,0,0,.5); } .ui.items .item:nth-of-type(n+1):hover { border-bottom-color: #6ECFF5!important; } .ui.items .item:nth-of-type(n+2):hover { border-bottom-color: #5C6166!important; } .ui.items .item:nth-of-type(n+3):hover { border-bottom-color: #A1CF64!important; } .ui.items .item:nth-of-type(n+4):hover { border-bottom-color: #D95C5C!important; } .ui.items .item:nth-of-type(n+5):hover { border-bottom-color: #564F8A!important; } .ui.items .item:nth-of-type(n+6):hover { border-bottom-color: #00B5AD!important; } .ui.connected.items { display: table; width: 100%; margin-left: 0!important; margin-right: 0!important; } .ui.connected.items>.row>.item, .ui.connected.items>.item { float: none; display: table-cell; vertical-align: top; height: auto; border-radius: 0; margin: 0; width: 33.33%; } .ui.connected.items>.row { display: table; margin: .5em 0; } .ui.connected.items>.row:first-child { margin-top: 0; } .ui.connected.items>.item, .ui.connected.items>.row:last-child>.item { border-bottom: .2em solid rgba(0,0,0,.2); } .ui.connected.items>.row:last-child>.item:first-child, .ui.connected.items>.item:first-child { border-radius: 0 0 0 .33em; } .ui.connected.items>.row:last-child>.item:last-child, .ui.connected.items>.item:last-child { border-radius: 0 0 .33em; } .ui.connected.items .item:hover { border-bottom-width: .2em; } .ui.one.connected.items>.row>.item, .ui.one.connected.items>.item { width: 50%; padding-left: 2%; padding-right: 2%; } .ui.two.connected.items>.row>.item, .ui.two.connected.items>.item { width: 50%; padding-left: 1%; padding-right: 1%; } .ui.three.connected.items>.row>.item, .ui.three.connected.items>.item { width: 33.333%; padding-left: 1%; padding-right: 1%; } .ui.four.connected.items>.row>.item, .ui.four.connected.items>.item { width: 25%; padding-left: .5%; padding-right: .5%; } .ui.five.connected.items>.row>.item, .ui.five.connected.items>.item { width: 20%; padding-left: .5%; padding-right: .5%; } .ui.six.connected.items>.row>.item, .ui.six.connected.items>.item { width: 16.66%; padding-left: .5%; padding-right: .5%; } .ui.seven.connected.items>.row>.item, .ui.seven.connected.items>.item { width: 14.28%; padding-left: .5%; padding-right: .5%; } .ui.eight.connected.items>.row>.item, .ui.eight.connected.items>.item { width: 12.5%; padding-left: .25%; padding-right: .25%; } .ui.nine.connected.items>.row>.item, .ui.nine.connected.items>.item { width: 11.11%; padding-left: .25%; padding-right: .25%; } .ui.ten.connected.items>.row>.item, .ui.ten.connected.items>.item { width: 10%; padding-left: .2%; padding-right: .2%; } .ui.eleven.connected.items>.row>.item, .ui.eleven.connected.items>.item { width: 9.09%; padding-left: .2%; padding-right: .2%; } .ui.twelve.connected.items>.row>.item, .ui.twelve.connected.items>.item { width: 8.3333%; padding-left: .1%; padding-right: .1%; } @media only screen and (max-width:768px) { .ui.stackable.items { display: block!important; } .ui.stackable.items>.item, .ui.stackable.items>.row>.item { display: block!important; height: auto!important; width: auto!important; padding: 0!important; } } .ui.horizontal.items>.item, .ui.items>.horizontal.item { display: table; } .ui.horizontal.items>.item>.image .ui.items>.horizontal.item>.image { display: table-cell; width: 50%; } .ui.horizontal.items>.item>.image+.content, .ui.items>.horizontal.item>.image+.content { width: 50%; display: table-cell; } .ui.horizontal.items>.item>.content, .ui.items>.horizontal.item>.content { padding: 1% 1.7% 11% 3%; vertical-align: top; } .ui.horizontal.items>.item>.meta, .ui.items>.horizontal.item>.meta { position: absolute; padding: 0; bottom: 7%; left: 3%; width: 94%; } .ui.horizontal.items>.item>.image+.content+.meta, .ui.items>.horizontal.item>.image+.content+.meta { bottom: 7%; left: 53%; width: 44%; } .ui.horizontal.items>.item .avatar, .ui.items>.horizontal.item .avatar { width: 11.5%; } .ui.items>.item .avatar { max-width: 25px; } .ui.one.items { margin-left: -2%; margin-right: -2%; } .ui.one.items>.item { width: 100%; margin-left: 2%; margin-right: 2%; } .ui.two.items { margin-left: -1%; margin-right: -1%; } .ui.two.items>.item { width: 48%; margin-left: 1%; margin-right: 1%; } .ui.two.items>.item:nth-child(2n+1) { clear: left; } .ui.three.items { margin-left: -1%; margin-right: -1%; } .ui.three.items>.item { width: 31.333%; margin-left: 1%; margin-right: 1%; } .ui.three.items>.item:nth-child(3n+1) { clear: left; } .ui.four.items { margin-left: -.5%; margin-right: -.5%; } .ui.four.items>.item { width: 24%; margin-left: .5%; margin-right: .5%; } .ui.four.items>.item:nth-child(4n+1) { clear: left; } .ui.five.items { margin-left: -.5%; margin-right: -.5%; } .ui.five.items>.item { width: 19%; margin-left: .5%; margin-right: .5%; } .ui.five.items>.item:nth-child(5n+1) { clear: left; } .ui.six.items { margin-left: -.5%; margin-right: -.5%; } .ui.six.items>.item { width: 15.66%; margin-left: .5%; margin-right: .5%; } .ui.six.items>.item:nth-child(6n+1) { clear: left; } .ui.seven.items { margin-left: -.5%; margin-right: -.5%; } .ui.seven.items>.item { width: 13.28%; margin-left: .5%; margin-right: .5%; font-size: 11px; } .ui.seven.items>.item:nth-child(7n+1) { clear: left; } .ui.eight.items { margin-left: -.25%; margin-right: -.25%; } .ui.eight.items>.item { width: 12%; margin-left: .25%; margin-right: .25%; font-size: 11px; } .ui.eight.items>.item:nth-child(8n+1) { clear: left; } .ui.nine.items { margin-left: -.25%; margin-right: -.25%; } .ui.nine.items>.item { width: 10.61%; margin-left: .25%; margin-right: .25%; font-size: 10px; } .ui.nine.items>.item:nth-child(9n+1) { clear: left; } .ui.ten.items { margin-left: -.2%; margin-right: -.2%; } .ui.ten.items>.item { width: 9.6%; margin-left: .2%; margin-right: .2%; font-size: 10px; } .ui.ten.items>.item:nth-child(10n+1) { clear: left; } .ui.eleven.items { margin-left: -.2%; margin-right: -.2%; } .ui.eleven.items>.item { width: 8.69%; margin-left: .2%; margin-right: .2%; font-size: 9px; } .ui.eleven.items>.item:nth-child(11n+1) { clear: left; } .ui.twelve.items { margin-left: -.1%; margin-right: -.1%; } .ui.twelve.items>.item { width: 8.1333%; margin-left: .1%; margin-right: .1%; font-size: 9px; } .ui.twelve.items>.item:nth-child(12n+1) { clear: left; }