/* 17. Gallery section */ /* ------------------------------------------------------ */ #gallery { .mix { display: none; .row { background: @bgColor; } } .two-columns .mix { width: 50%; } .three-columns .mix { width: 33.333334%; } .four-columns .mix { width: 25%; } .five-columns .mix { width: 20%; } .mix { position: relative; text-align: center; color: @textColor2; img { width: 100%; .lh-opacity(0); .lh-transition(opacity .4s); height: auto; &.lazyloaded { .lh-opacity(1); } } > div { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7); left:0; top: 0; font-size: 16px; .lh-transition(opacity .3s); .lh-opacity(0); > div { display: table; width: 100%; height: 100%; .lh-opacity(0); .lh-transition(opacity .4s .1s, transform .5s cubic-bezier(0.165, 0.84, 0.44, 1) ); .lh-translate(0, -40px); span { display: table-cell; vertical-align: middle; padding: 0 30px; } h3 { margin-bottom: 60px; position: relative; &:after { content: ''; display: block; height: 2px; width: 30px; position: absolute; bottom: -30px; left: 50%; margin-left: -15px; background: @textColor2; } } } } &:hover { > div { .lh-opacity(1); > div { .lh-opacity(1); .lh-translate(0,0); } } } } .gallery-content { font-size: 0px; } .load-more-text { button { width: 100% ; background: @bgColor3; border: none; padding: 15px; &:focus, &:hover, &:active { outline: none } } } } @media (max-width: @screen-sm-max) { #gallery { .mix { width: 50% !important; } } } /* End of gallery section */ /* ------------------------------------------------------ */