body { .body-font; background: @background; word-wrap: break-word; } .mega-container { background: white; max-width: 1170px; margin: auto; margin-top: 20px; overflow: visible; } a, a:visited { color: @accent; cursor: pointer; &:hover, &:visited { text-decoration: none; color: @accent; } } .container { margin: auto; } /* Flex Images */ .flex-images { border: none; padding: 15px 30px; margin-bottom: 30px; .section-title:after { width: 5%; } .item { margin: 6px; border: none; position: relative; .viewtext { position: absolute; top: 35%; left: 40%; font-size: 14px; z-index: 9999; display: none; } img { .transition(0.4s all ease); } &:after { content: ""; position: absolute; display: block; width: 0%; height: 5px; bottom: 0px; background: fade(@accent,80%); .transition(0.4s all ease); } &:hover { &:after { width: 100%; } img { -webkit-filter: blur(3px) grayscale(0.9); } .flex-caption { padding-left: 20px; } .viewtext { display: block; color: #eee; text-shadow: 0 0 2px #000; background: #000; padding: 10px; border-radius: 10px; } } } .flex-caption { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.80) 100%); position: absolute; bottom: 0px; display: block; pointer-events: none; .transition(0.4s all ease); width: 100%; color: #eee; font-weight: bold; text-shadow: 1px 1px 0 #222; font-size: 16px; padding: 50px 10px 20px 10px; } } /* section titles */ .section-title { font-weight: lighter; color: #777; font-size: 18px; margin-bottom: 20px; @media screen and (max-width: 991px) { margin-top: 20px; } &:after { content: ""; display: block; width: 12%; height: 2px; margin-top: 5px; background: @accent; } } #content { margin-top: 30px; } .grid-row { margin: 0; }