/** * Featherlight Gallery – an extension for the ultra slim jQuery lightbox * Version 1.7.9 - http://noelboss.github.io/featherlight/ * * Copyright 2017, Noël Raoul Bossart (http://www.noelboss.com) * MIT Licensed. **/ @media all { .featherlight-next, .featherlight-previous { display: block; position: absolute; top: 25px; right: 25px; bottom: 0; left: 80%; cursor: pointer; /* preventing text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* IE9 hack, otherwise navigation doesn't appear */ background: rgba(0,0,0,0); } .featherlight-previous { left: 25px; right: 80%; } .featherlight-next:hover, .featherlight-previous:hover { background: rgba(255,255,255,0.25); } .featherlight-next span, .featherlight-previous span { display: none; position: absolute; top: 50%; left: 5%; width: 82%; /* center horizontally */ text-align: center; font-size: 80px; line-height: 80px; /* center vertically */ margin-top: -40px; text-shadow: 0px 0px 5px #fff; color: #fff; font-style: normal; font-weight: normal; } .featherlight-next span { right: 5%; left: auto; } .featherlight-next:hover span, .featherlight-previous:hover span { display: inline-block; } .featherlight-swipe-aware .featherlight-next, .featherlight-swipe-aware .featherlight-previous { display: none; } /* Hide navigation while loading */ .featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next { display:none; } /* Hide navigation in case of single image */ .featherlight-first-slide.featherlight-last-slide .featherlight-previous, .featherlight-first-slide.featherlight-last-slide .featherlight-next { display:none; } } /* Always display arrows on touch devices */ @media only screen and (max-device-width: 1024px){ .featherlight-next:hover, .featherlight-previous:hover { background: none; } .featherlight-next span, .featherlight-previous span { display: block; } } /* handling phones and small screens */ @media only screen and (max-width: 1024px) { .featherlight-next, .featherlight-previous { top: 10px; right: 10px; left: 85%; } .featherlight-previous { left: 10px; right: 85%; } .featherlight-next span, .featherlight-previous span { margin-top: -30px; font-size: 40px; } }