{"version":3,"sources":["lightbox.scss","lightbox.css"],"names":[],"mappings":"AAAA,6CAAA;AACA;;;;ECIE;ADCF,yBAAA;AACA,+EAAA;AACA,kLAAA;AACA,0DAAA;AACA,uEAAA;AACA,uEAAA;AACA,sGAAA;AACA;EACC,WAAW;EACX,cAAc;EACd,cAAc,EAAA;;AAEf;EACC,iBAAiB;EACjB,kBAAkB,EAAA;;AAEnB;EAEE,aAAa;EACb,gBAAgB;EAChB,uBAAuB;EACvB,0CAAsC;EACtC,2BAA2B,EAAA;;AAG7B;EACC,eAAe;EACf,UAAU;EACV,WAAW;EACX,8BAA0B;EAC1B,UAAU;EAIV,mCAAmC;EACnC,gBAAgB,EAAA;EAVjB;IAYE,YAAY;IACZ,kBAAkB;IAClB,MAAM;IACN,OAAO;IACP,QAAQ;IACR,SAAS;IACT,cAAc;IACd,aAAa;IACb,uBAAuB;IACvB,0CAAsC;IACtC,sBAAsB;IAItB,2BAA2B,EAAA;EA1B7B;IA6BE,UAAU;IACV,MAAM;IACN,SAAS;IACT,iBAAiB,EAAA;IAhCnB;MAkCG,gBAAgB;MAChB,cAAc,EAAA;IAnCjB;MAsCG,SAAS,EAAA;;AAIZ;EACC,cAAc;EACd,WAAW;EACX,YAAY;EACZ,sBAAsB;EACtB,iBAAiB;EACjB,YAAY;EACZ,qBAAqB;EACrB,kBAAkB;EAClB,UAAU;EACV,QAAQ;EAIR,2BAA2B,EAAA;EAd5B;IAgBE,WAAW;IACX,cAAc;IACd,YAAY;IACZ,UAAU;IACV,iBAAiB;IACjB,kBAAkB;IAClB,UAAU;IACV,SAAS;IAIT,wBAAwB,EAAA;EA3B1B;IA8BE,WAAW;IACX,cAAc;IACd,YAAY;IACZ,UAAU;IACV,iBAAiB;IACjB,kBAAkB;IAClB,UAAU;IACV,SAAS;IAIT,yBAAyB,EAAA","file":"lightbox.css","sourcesContent":["/*Eliminates padding, centers the thumbnail */\n/* body, html {\n\tpadding: 0;\n\tmargin: 0;\n\ttext-align: center;\n}*/\n/* Styles the thumbnail */\n/* Styles the lightbox, removes it from sight and adds the fade-in transition */\n/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n/* Styles the close link, adds the slide down transition */\n/* Provides part of the \"X\" to eliminate an image from the close link */\n/* Provides part of the \"X\" to eliminate an image from the close link */\n/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n.screenshot-group {\n\tfloat: left;\n\tdisplay: block;\n\tmax-width: 25%;\n}\n.screenshot-text {\n\tmargin-left: 20px;\n\tmargin-right: 20px;\n}\na.lightbox {\n\timg {\n\t\theight: 150px;\n\t\tmax-width: 150px;\n\t\tborder: 3px solid white;\n\t\tbox-shadow: 0px 0px 8px rgba(0,0,0,.3);\n\t\tmargin: 20px 20px 20px 20px;\n\t}\n}\n.lightbox-target {\n\tposition: fixed;\n\ttop: -100%;\n\twidth: 100%;\n\tbackground: rgba(0,0,0,.7);\n\topacity: 0;\n\t-webkit-transition: opacity .5s ease-in-out;\n\t-moz-transition: opacity .5s ease-in-out;\n\t-o-transition: opacity .5s ease-in-out;\n\ttransition: opacity .5s ease-in-out;\n\toverflow: hidden;\n\timg {\n\t\tmargin: auto;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tmax-height: 0%;\n\t\tmax-width: 0%;\n\t\tborder: 3px solid white;\n\t\tbox-shadow: 0px 0px 8px rgba(0,0,0,.3);\n\t\tbox-sizing: border-box;\n\t\t-webkit-transition: .5s ease-in-out;\n\t\t-moz-transition: .5s ease-in-out;\n\t\t-o-transition: .5s ease-in-out;\n\t\ttransition: .5s ease-in-out;\n\t}\n\t&:target {\n\t\topacity: 1;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tmargin-left: -10%;\n\t\timg {\n\t\t\tmax-height: 100%;\n\t\t\tmax-width: 85%;\n\t\t}\n\t\ta.lightbox-close {\n\t\t\ttop: 32px;\n\t\t}\n\t}\n}\na.lightbox-close {\n\tdisplay: block;\n\twidth: 50px;\n\theight: 50px;\n\tbox-sizing: border-box;\n\tbackground: white;\n\tcolor: black;\n\ttext-decoration: none;\n\tposition: absolute;\n\ttop: -80px;\n\tright: 0;\n\t-webkit-transition: .5s ease-in-out;\n\t-moz-transition: .5s ease-in-out;\n\t-o-transition: .5s ease-in-out;\n\ttransition: .5s ease-in-out;\n\t&:before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 30px;\n\t\twidth: 1px;\n\t\tbackground: black;\n\t\tposition: absolute;\n\t\tleft: 26px;\n\t\ttop: 10px;\n\t\t-webkit-transform: rotate(45deg);\n\t\t-moz-transform: rotate(45deg);\n\t\t-o-transform: rotate(45deg);\n\t\ttransform: rotate(45deg);\n\t}\n\t&:after {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 30px;\n\t\twidth: 1px;\n\t\tbackground: black;\n\t\tposition: absolute;\n\t\tleft: 26px;\n\t\ttop: 10px;\n\t\t-webkit-transform: rotate(-45deg);\n\t\t-moz-transform: rotate(-45deg);\n\t\t-o-transform: rotate(-45deg);\n\t\ttransform: rotate(-45deg);\n\t}\n}\n","/*Eliminates padding, centers the thumbnail */\n/* body, html {\n\tpadding: 0;\n\tmargin: 0;\n\ttext-align: center;\n}*/\n/* Styles the thumbnail */\n/* Styles the lightbox, removes it from sight and adds the fade-in transition */\n/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n/* Styles the close link, adds the slide down transition */\n/* Provides part of the \"X\" to eliminate an image from the close link */\n/* Provides part of the \"X\" to eliminate an image from the close link */\n/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n.screenshot-group {\n  float: left;\n  display: block;\n  max-width: 25%; }\n\n.screenshot-text {\n  margin-left: 20px;\n  margin-right: 20px; }\n\na.lightbox img {\n  height: 150px;\n  max-width: 150px;\n  border: 3px solid white;\n  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n  margin: 20px 20px 20px 20px; }\n\n.lightbox-target {\n  position: fixed;\n  top: -100%;\n  width: 100%;\n  background: rgba(0, 0, 0, 0.7);\n  opacity: 0;\n  -webkit-transition: opacity .5s ease-in-out;\n  -moz-transition: opacity .5s ease-in-out;\n  -o-transition: opacity .5s ease-in-out;\n  transition: opacity .5s ease-in-out;\n  overflow: hidden; }\n  .lightbox-target img {\n    margin: auto;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    max-height: 0%;\n    max-width: 0%;\n    border: 3px solid white;\n    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n    box-sizing: border-box;\n    -webkit-transition: .5s ease-in-out;\n    -moz-transition: .5s ease-in-out;\n    -o-transition: .5s ease-in-out;\n    transition: .5s ease-in-out; }\n  .lightbox-target:target {\n    opacity: 1;\n    top: 0;\n    bottom: 0;\n    margin-left: -10%; }\n    .lightbox-target:target img {\n      max-height: 100%;\n      max-width: 85%; }\n    .lightbox-target:target a.lightbox-close {\n      top: 32px; }\n\na.lightbox-close {\n  display: block;\n  width: 50px;\n  height: 50px;\n  box-sizing: border-box;\n  background: white;\n  color: black;\n  text-decoration: none;\n  position: absolute;\n  top: -80px;\n  right: 0;\n  -webkit-transition: .5s ease-in-out;\n  -moz-transition: .5s ease-in-out;\n  -o-transition: .5s ease-in-out;\n  transition: .5s ease-in-out; }\n  a.lightbox-close:before {\n    content: \"\";\n    display: block;\n    height: 30px;\n    width: 1px;\n    background: black;\n    position: absolute;\n    left: 26px;\n    top: 10px;\n    -webkit-transform: rotate(45deg);\n    -moz-transform: rotate(45deg);\n    -o-transform: rotate(45deg);\n    transform: rotate(45deg); }\n  a.lightbox-close:after {\n    content: \"\";\n    display: block;\n    height: 30px;\n    width: 1px;\n    background: black;\n    position: absolute;\n    left: 26px;\n    top: 10px;\n    -webkit-transform: rotate(-45deg);\n    -moz-transform: rotate(-45deg);\n    -o-transform: rotate(-45deg);\n    transform: rotate(-45deg); }\n"]}