Badge JS, See comments for instructions

badge.js

(function(gsCertified, b) {
  return gsCertified[gsCertified.eventsObj] = {
    init: function(config) {
      this.defaultConfig = {
        // url this script is served from
        "sourceBaseUrl" : 'http://certifications.test',
        // api endpoint
        "apiUrlEndpoint": 'http://certifications.test/get-certification-verification.json',
        // relative path on source url seal comes from
        "certImage"     : 'assets/img/grandstrandcertified-prof.png',
        // cssFile holds modal window css and any css involved with seal, will try to thin in down
        'cssFile'       : 'http://certifications.test/assets/css/gs-certified.min.css',
        //  debating about leaving these and allowing them to be set in the json like MaCafe script does
        // 'positionX'     : 'left',
        // 'positionY'     : 'bottom',
        // 'offsetX'       : '20px',
        // 'offsetY'       : '20px',
        'width'         : '200px',
        'height'        : '75px',
        'target'        : 'gs-certified-script' // Target ID for Seal
      };
      // merge user config with defaultConfig
      this.extend(config, this.defaultConfig);
      // @todo add custom box css and js to finished badge file so only one file needs to load.
      // @todo this is un-needed
      this.messages = {
        'notActive'   : 'Sorry certifications for this company could not be found.',
        'notComplete' : "This company is hard at work on their certification. So far it complies with the needs of verification, but you'll have to check back later for final certification results.",
        'mapTitle'    : "Click to show location on Google Maps.",
      };
      this.getModalJSON();
      this.addCssToDom();
      this.modal = false;
    },
    extend: function(a, b) {
      for(var key in b) {
        if(b.hasOwnProperty(key)) {
          a[key] = b[key];
        }
      }
      return a;
    },
    call: function(name, args) {
      if (typeof this[name] !== "function") {
        throw "Invalid function name."
      }
      this[name].call(null, args)
    },
    getModalJSON: function() {
      var host = new String(window.location.host).replace(/^www\./, "");
      var url = this.getConfig("apiUrlEndpoint") + '?id=' + host;
      this.get_json(url, function(err, data){
        if (err) {
          console.error(err);
          return false;
        }
        var self = gsCertified[gsCertified.eventsObj].getThis();
        self.createModalDiv(data);
      });
    },
    getConfig: function(key) {
      if (key === true) {
        return this.defaultConfig;
      }
      return this.defaultConfig[key];
    },
    createSealImage: function(element, modalDiv) {
      if (element.charAt(0) == '#') {
        element = element.substr(1)
      }
      var $userElement = document.getElementById(element);

      // var positionX = this.getConfig('positionX');
      // var positionY = this.getConfig('positionY');
      // var offsetX = this.getConfig('offsetX');
      // var offsetY = this.getConfig('offsetY');

      var imgFront = document.createElement("img");
      imgFront.setAttribute('src', this.getConfig('sourceBaseUrl') + '/' + this.getConfig('certImage'));
      imgFront.setAttribute('id', "gs-certified");
      imgFront.setAttribute('width', this.getConfig('width'));
      imgFront.setAttribute('height', this.getConfig('height'));
      imgFront.setAttribute("style", "position:absolute;top:0px;left:0px;z-index:2;");
      var imgWrapper = document.createElement("div");
      imgWrapper.setAttribute('id', "gs-img-wrapper");
      var self = this;
      imgWrapper.onclick = function() {
        if (self.modal === false) {
          self.modal = new Custombox.modal({
            content: {
              effect: 'fadein',
              target: '#gs-modal'
            }
          });
        }
        self.modal.open();
      };
      imgWrapper.setAttribute("style", "position:relative; width:" + this.getConfig('width') + "; text-align: center; cursor:pointer !important; color:#08747E; padding:5px;");
      // var wrapCSS = this.setfloatingCSS(positionX, positionY, offsetX, offsetY);
      // imgWrapper.setAttribute("style", wrapCSS);
      imgWrapper.appendChild(imgFront);
      var brTag     = document.createElement("br");
      var anchorTag = document.createElement("small");
      anchorTag.setAttribute('id', "gs-modal-opener");
      anchorTag.setAttribute('style', 'position: relative; top: 40px; padding-left:10px;');
      anchorTag.innerHTML = ' - view certification - ';
      imgWrapper.append(brTag, anchorTag);

      var fragment = document.createDocumentFragment();
      fragment.append(imgWrapper, modalDiv);
      $userElement.parentNode.insertBefore(fragment, $userElement.nextSibling);
    },
    capitalize: function(str){
      return str[0].toUpperCase()+str.slice(1);
    },
    createWebsiteSection: function(data) {
      var key, status;
      var webKeys = ["encryption", "malware", "vulnerabilities","performance"];
      var html = '<h3 class="website-section">Website Certifications</h3>';
      for (var i = 0; i < 4; i++) {
        key = webKeys[i];
        if (!data[key]["status"]) {
          continue;
        }
        status = data[key]["status"];
        html += '<h4 class="website-section">' + this.capitalize(key) + '</h4>';
        html += '<dl class="website-section"><dt>' + data[key]["label"] + '</dt>';
        html += '<dd class="' + status + '">' + this.capitalize(status) + '</dd></dl>';
      }
      return html;
    },
    createProfessionSection: function(data) {
      var key, temp, tlen, status;
      var proKeys = ["federal", "state", "municipal", "zoning", "employment"];
      var html    = '<h3 class="profession-section">' + data.industry + '</h3>';

      for (var i = 0; i < 5; i++) {
        key = proKeys[i];
        temp = data[key];
        tlen = temp.length;

        if (tlen <= 0) continue;

        html += '<h4 class="profession-section">' + this.capitalize(key) + '</h4>';
        for (var z = 0; z < tlen; z++) {
          status = temp[z].status;
          name   = temp[z].name;
          html += '<dl class="profession-section"><dt>' + name + '</dt>';
          html += '<dd class="' + status + '">' + this.capitalize(status) + '</dd></dl>';
        }
      }

      return html;
    },
    createModalDiv: function(data) {
      var c = data.certificate;
      var p = data.profession;
      var w = data.website;
      var webSection = '';
      if (c.status !== 'active') {
        webSection = this.messages.notActive;
      }
      if (c.completed === 'no') {
        webSection = this.messages.notComplete;
      }
      if (c.status === 'active' && c.completed !== 'no') {
        webSection  = this.createWebsiteSection(w);
        webSection += '<hr>';
        webSection += this.createProfessionSection(p);
      }
      var modalDiv = document.createElement("div");
      modalDiv.setAttribute('id', "gs-modal");
      modalDiv.setAttribute('class', "gs-modal");
      modalDiv.setAttribute('style', "display: none;");
      var content = '<a href="javascript:void(0);" onclick="Custombox.modal.close();" class="gs-modal-close"><i class="fa fa-times"></i></a>'

      content += '<h3>' + c.name + '</h3>';
      content += this.buildMapLink(c);

      if (c.phone && c.phone != '') {
        // Remove everything but digits mobiles don't like anything but digits when calling
        var tel = c.phone.replace(/[^0-9]/g, "");
        content += '<br><a href="tel:' + tel + '">' + c.phone + '</a>';
      }
      if (c.website && c.website != '') {
        content += this.buildWebsiteLink(c.website);
      }
      content += '<hr>';
      content += webSection;
      modalDiv.innerHTML = content;
      this.createSealImage(this.getConfig('target'), modalDiv);
    },
    getThis: function() {
      return this;
    },
    buildWebsiteLink: function(url) {
      if (!/^(f|ht)tps?:\/\//i.test(url)) {
        url = "http://" + url;
      }
      return '<br><a href="' + url + '" target="_blank">' + url + '</a>';
      // return url;
    },
    buildMapLink: function(c) {
      if (!c.lat || !c.lng) {
        return '';
      }
      var encodedName = encodeURIComponent(c.name);
      var address = c.address + '<br>' + c.city + ' ' + c.state + ' ' + c.zip;
      return '<a href="https://www.google.com/maps/search/' + encodedName + '/@' + c.lat + ',' + c.lng + ',18.5z/" target="maps"  class="gs-modal-map" title="' + this.messages.mapTitle + '" role="button">' + address + '</a>';
    },
    setfloatingCSS: function(x, y, ox, oy) {
      var dim = "width: " + this.getConfig('width') + '; height:' + this.getConfig('height') + ";"
      return dim + "position:fixed;overflow:hidden !important;" + y + ":" + oy + " !important;" + x + ":" + ox + " !important; cursor:pointer !important; color:#08747E; text-align:center; max-width: 200px; padding:5px;";
    },
    addCssToDom() {
      var head = document.getElementsByTagName('head')[0];
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = this.getConfig('cssFile');
      link.media = 'print';
      // loads the css async https://www.filamentgroup.com/lab/load-css-simpler/
      link.onload = function() {
        this.media='all';
        this.onload = null;
      };
      head.appendChild(link)
    },
    get_json: function(url, cb) {
      var request = new XMLHttpRequest();
      request.addEventListener("readystatechange", function() {
        if (request.readyState === 4 && request.status === 200) {
          var data = JSON.parse(request.responseText);
          cb(undefined, data);
        } else if (request.readyState === 4) {
          cb("could not fetch data", undefined);
        }
      });
      request.open("GET", url, true);
      request.send();
    }
  }

})(window, document)
/*
 *  custombox - Modal dialog effects with transitions CSS3
 *  version: 4.0.3
 *  http://dixso.github.io/custombox/
 *  (c) 2017 Julio de la Calle - @dixso9
 *
 *  Under MIT License - http://opensource.org/licenses/MIT
 */
"use strict";function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),Custombox;!function(e){var t="custombox",n=t+"-open",o=t+"-close",i=t+"-lock",s="animateFrom",r=["top","right","bottom","left"],l=["slide","blur","flip","rotate","letmein","makeway","slip","corner","slidetogether","push","contentscale"],c=["blur","makeway","slip","push","contentscale"],a=["letmein","makeway","slip","corner","slidetogether","door","push","contentscale"],h=["corner","slidetogether","scale","door","push","contentscale"],d=["fall","sidefall","flip","sign","slit","letmein","makeway","slip"],u=function(){function e(){_classCallCheck(this,e)}return _createClass(e,null,[{key:"check",value:function(e,t){return e.indexOf(t)>-1}},{key:"isIE",value:function(){var e=window.navigator.userAgent,t=e.indexOf("MSIE ");if(t>0)return!isNaN(parseInt(e.substring(t+5,e.indexOf(".",t)),10));if(e.indexOf("Trident/")>0){var n=e.indexOf("rv:");return!isNaN(parseInt(e.substring(n+3,e.indexOf(".",n)),10))}var o=e.indexOf("Edge/");return o>0&&!isNaN(parseInt(e.substring(o+5,e.indexOf(".",o)),10))}}]),e}(),m=function(){function e(){_classCallCheck(this,e),this.position=document.documentElement&&document.documentElement.scrollTop||document.body&&document.body.scrollTop||0,document.documentElement.classList.add(t+"-perspective")}return _createClass(e,[{key:"remove",value:function(){document.documentElement.classList.remove(t+"-perspective"),window.scrollTo(0,this.position)}}]),e}(),p=function(e){function t(e){_classCallCheck(this,t);var n=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return Object.keys(n).forEach(function(t){e[t]&&_extends(n[t],e[t])}),n}return _inherits(t,e),t}(function e(){_classCallCheck(this,e),this.overlay={color:"#000",opacity:.48,close:!0,speedIn:300,speedOut:300,onOpen:null,onComplete:null,onClose:null,active:!0},this.content={id:null,target:null,container:null,clone:!1,animateFrom:"top",animateTo:"top",positionX:"center",positionY:"center",width:null,effect:"fadein",speedIn:300,speedOut:300,delay:150,fullscreen:!1,onOpen:null,onComplete:null,onClose:null,close:!0},this.loader={active:!0,color:"#FFF",background:"#999",speed:1e3}}),f=function(){function e(n){_classCallCheck(this,e),this.options=n,this.element=document.createElement("div"),this.element.classList.add(t+"-loader"),this.element.style.borderColor=this.options.loader.background,this.element.style.borderTopColor=this.options.loader.color,this.element.style.animationDuration=this.options.loader.speed+"ms",document.body.appendChild(this.element)}return _createClass(e,[{key:"show",value:function(){this.element.style.display="block"}},{key:"destroy",value:function(){this.element.parentElement.removeChild(this.element)}}]),e}(),v=function(){function e(n){if(_classCallCheck(this,e),this.options=n,"loading"===document.readyState)throw new Error("You need to instantiate Custombox when the document is fully loaded");var o=document.querySelector(this.options.content.container);if(o)this.element=o;else if(document.querySelector("."+t+"-container"))document.querySelector("."+t+"-container")&&(this.element=document.querySelector("."+t+"-container"));else{for(this.element=document.createElement("div");document.body.firstChild;)this.element.appendChild(document.body.firstChild);document.body.appendChild(this.element)}this.element.classList.add(t+"-container"),this.element.classList.add(t+"-"+this.options.content.effect),this.element.style.animationDuration=this.options.content.speedIn+"ms",u.check(l,this.options.content.effect)&&this.setAnimation()}return _createClass(e,[{key:"bind",value:function(e){var t=this;return e===o&&(u.check(l,this.options.content.effect)&&this.setAnimation("animateTo"),this.element.classList.remove(n)),this.element.classList.add(e),new Promise(function(e){return t.listener().then(function(){return e()})})}},{key:"remove",value:function(){this.element.classList.remove(o),this.element.classList.remove(t+"-"+this.options.content.effect),this.element.style.removeProperty("animation-duration");var e=document.querySelectorAll("."+t+"-content"),n=document.querySelector(this.options.content.container);if(!e.length)if(n)for(var i=this.element.className.split(" "),s=0,r=i.length;s<r;s++)i[s].startsWith(t+"-")&&this.element.classList.remove(i[s]);else{for(var l=document.querySelector("."+t+"-container");l.firstChild;)l.parentNode.insertBefore(l.firstChild,l);l.parentNode.removeChild(l)}}},{key:"listener",value:function(){var e=this;return new Promise(function(t){u.isIE()?setTimeout(t,e.options.content.speedIn):e.element.addEventListener("animationend",function(){return t()},!0)})}},{key:"setAnimation",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s,n=0,o=r.length;n<o;n++)this.element.classList.contains(t+"-"+r[n])&&this.element.classList.remove(t+"-"+r[n]);this.element.classList.add(t+"-"+this.options.content[e])}}]),e}(),y=function(){function e(n){_classCallCheck(this,e),this.options=n,this.element=document.createElement("div"),this.element.style.backgroundColor=this.options.overlay.color,this.element.classList.add(t+"-overlay"),this.setAnimation()}return _createClass(e,[{key:"bind",value:function(e){var i=this;switch(e){case o:u.check(a,this.options.content.effect)&&this.toggleAnimation("animateTo"),this.element.classList.add(o),this.element.classList.remove(n);break;default:document.body.appendChild(this.element),this.element.classList.add(t+"-"+this.options.content.effect),this.element.classList.add(n)}return new Promise(function(e){return i.listener().then(function(){return e()})})}},{key:"remove",value:function(){try{this.element.parentNode.removeChild(this.element),this.style.parentNode.removeChild(this.style)}catch(e){}}},{key:"createSheet",value:function(){return this.style=document.createElement("style"),this.style.setAttribute("id",t+"-overlay-"+Date.now()),document.head.appendChild(this.style),this.style.sheet}},{key:"listener",value:function(){var e=this;return new Promise(function(t){u.isIE()?setTimeout(t,e.options.overlay.speedIn):e.element.addEventListener("animationend",function(){return t()},!0)})}},{key:"setAnimation",value:function(){var e=this.createSheet();if(u.check(a,this.options.content.effect)?(this.element.style.opacity=this.options.overlay.opacity.toString(),this.element.style.animationDuration=this.options.overlay.speedIn+"ms",this.toggleAnimation()):(e.insertRule("."+t+"-overlay { animation: CloseFade "+this.options.overlay.speedOut+"ms; }",0),e.insertRule("."+n+"."+t+"-overlay { animation: OpenFade "+this.options.overlay.speedIn+"ms; opacity: "+this.options.overlay.opacity+" }",0),e.insertRule("@keyframes OpenFade { from {opacity: 0} to {opacity: "+this.options.overlay.opacity+"} }",0),e.insertRule("@keyframes CloseFade { from {opacity: "+this.options.overlay.opacity+"} to {opacity: 0} }",0)),u.check(h,this.options.content.effect)){var o=this.options.overlay.speedIn;u.check(h,this.options.content.effect)&&(o=this.options.content.speedIn),this.element.style.animationDuration=o+"ms"}}},{key:"toggleAnimation",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s,n=0,o=r.length;n<o;n++)this.element.classList.contains(t+"-"+r[n])&&this.element.classList.remove(t+"-"+r[n]);this.element.classList.add(t+"-"+this.options.content[e])}}]),e}(),b=function(){function e(n){_classCallCheck(this,e),this.options=n,this.element=document.createElement("div"),this.element.style.animationDuration=this.options.content.speedIn+"ms",this.options.content.id&&this.element.setAttribute("id",t+"-"+this.options.content.id),u.check(h,this.options.content.effect)||(this.element.style.animationDelay=this.options.content.delay+"ms"),this.element.classList.add(t+"-content"),this.options.content.fullscreen?this.element.classList.add(t+"-fullscreen"):(this.element.classList.add(t+"-x-"+this.options.content.positionX),this.element.classList.add(t+"-y-"+this.options.content.positionY)),u.check(l,this.options.content.effect)&&this.setAnimation()}return _createClass(e,[{key:"fetch",value:function(){var e=this;return new Promise(function(n,o){var i=/^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/,s=e.options.content.target.match(i);if(s&&11==s[2].length){var r=document.createElement("div"),l=document.createElement("iframe");if(l.setAttribute("src","https://www.youtube.com/embed/"+s[2]),l.setAttribute("frameborder","0"),l.setAttribute("allowfullscreen",""),l.setAttribute("width","100%"),l.setAttribute("height","100%"),r.appendChild(l),!e.options.content.fullscreen){var c=window.innerWidth>560?560:window.innerWidth,a=window.innerHeight>315?315:window.innerHeight,h=parseInt(e.options.content.width,10);e.options.content.width&&window.innerWidth>h&&(a=Math.round(a*h/c),c=h),l.setAttribute("width",c+"px"),l.setAttribute("height",a+"px")}e.element.appendChild(r),n()}else if("#"!==e.options.content.target.charAt(0)&&"."!==e.options.content.target.charAt(0)){var d=new XMLHttpRequest;d.open("GET",e.options.content.target),d.onload=function(){if(200===d.status){e.element.insertAdjacentHTML("beforeend",d.response);var t=e.element.firstChild;try{t.style.display="block"}catch(e){o(new Error("The ajax response need a wrapper element"))}e.options.content.width&&(t.style.flexBasis=e.options.content.width),n()}else o(new Error(d.statusText))},d.onerror=function(){return o(new Error("Network error"))},d.send()}else{var u=document.querySelector(e.options.content.target);u?(e.options.content.clone?(u=u.cloneNode(!0)).removeAttribute("id"):(e.reference=document.createElement("div"),e.reference.classList.add(t+"-reference"),e.reference.setAttribute("style",u.getAttribute("style")),u.parentNode.insertBefore(e.reference,u.nextSibling)),u.style.display="block",e.options.content.width&&(u.style.flexBasis=e.options.content.width),e.element.appendChild(u),n()):o(new Error("The element doesn't exist"))}})}},{key:"bind",value:function(e){var i=this;switch(e){case o:this.element.style.animationDelay="0ms",this.element.style.animationDuration=this.options.content.speedOut+"ms",this.element.classList.remove(n),this.element.classList.add(o),this.setAnimation("animateTo");break;default:document.body.appendChild(this.element),this.element.classList.add(t+"-"+this.options.content.effect),this.element.classList.add(n)}return new Promise(function(e){return i.listener().then(function(){return e()})})}},{key:"remove",value:function(){var e=new RegExp("^[#|.]");!this.options.content.clone&&e.test(this.options.content.target)&&(this.element.childNodes[0].setAttribute("style",this.reference.getAttribute("style")),this.reference.parentNode.insertBefore(this.element.childNodes[0],this.reference.nextSibling),this.reference.parentNode.removeChild(this.reference));try{this.element.parentNode.removeChild(this.element)}catch(e){}}},{key:"listener",value:function(){var e=this;return new Promise(function(t){u.isIE()?setTimeout(t,e.options.content.speedIn):e.element.addEventListener("animationend",function(){return t()},!0)})}},{key:"setAnimation",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s,n=0,o=r.length;n<o;n++)this.element.classList.contains(t+"-"+r[n])&&this.element.classList.remove(t+"-"+r[n]);this.element.classList.add(t+"-"+this.options.content[e])}}]),e}(),w=function(){function s(t){_classCallCheck(this,s),this.action=function(t){27===t.keyCode&&e.modal.close()},this.options=new p(t)}return _createClass(s,[{key:"open",value:function(){var e=this;this.build(),this.options.loader.active&&this.loader.show(),this.content.fetch().then(function(){u.check(d,e.options.content.effect)&&(e.scroll=new m),e.options.overlay.active?(e.dispatchEvent("overlay.onOpen"),e.overlay.bind(n).then(function(){e.dispatchEvent("overlay.onComplete"),e.options.loader.active&&e.loader.destroy()})):e.options.loader.active&&e.loader.destroy(),e.container&&e.container.bind(n),document.body.classList.add(i),e.content.bind(n).then(function(){return e.dispatchEvent("content.onComplete")}),e.dispatchEvent("content.onOpen"),e.listeners()}).catch(function(t){throw e.options.loader.active&&e.loader.destroy(),t})}},{key:"build",value:function(){this.options.loader.active&&(this.loader=new f(this.options)),u.check(c,this.options.content.effect)&&(this.container=new v(this.options)),this.options.overlay.active&&(this.overlay=new y(this.options)),this.content=new b(this.options)}},{key:"_close",value:function(){var e=this,t=[this.content.bind(o).then(function(){return e.content.remove()})];this.options.overlay.active&&t.push(this.overlay.bind(o).then(function(){e.scroll&&e.scroll.remove(),e.overlay.remove(),e.dispatchEvent("overlay.onClose")})),this.container&&t.push(this.container.bind(o).then(function(){return e.container.remove()})),Promise.all(t).then(function(){e.options.content.close&&document.removeEventListener("keydown",e.action,!0),e.dispatchEvent("content.onClose"),document.body.classList.remove(i)})}},{key:"dispatchEvent",value:function(e){var n=e.replace(".on",":").toLowerCase(),o=new CustomEvent(t+":"+n),i=Object.create(this.options);document.dispatchEvent(o);try{e.split(".").reduce(function(e,t){return e[t]},i).call()}catch(e){}}},{key:"listeners",value:function(){var e=this,n=window.getComputedStyle(this.content.element).getPropertyValue("animation-fill-mode");document.addEventListener("fullscreenchange",function(){window.getComputedStyle(e.content.element).getPropertyValue("animation-fill-mode")===n?e.content.element.style.animationFillMode="backwards":e.content.element.style.animationFillMode=n},!0),this.options.content.close&&document.addEventListener("keydown",this.action,!0),this.options.overlay.close&&this.content.element.addEventListener("click",function(t){t.target===e.content.element&&e._close()},!0),this.content.element.addEventListener(t+":close",function(){e._close()},!0)}}],[{key:"close",value:function(e){var n=new CustomEvent(t+":close"),o=document.querySelectorAll("."+t+"-content");e&&(o=document.querySelectorAll("#"+t+"-"+e));try{o[o.length-1].dispatchEvent(n)}catch(e){throw new Error("Custombox is not instantiated")}}},{key:"closeAll",value:function(){for(var e=new CustomEvent(t+":close"),n=document.querySelectorAll("."+t+"-content"),o=n.length,i=0;i<o;i++)n[i].dispatchEvent(e)}}]),s}();e.modal=w}(Custombox||(Custombox={}));

gs-certified.min.css

/*
 *  custombox - Modal dialog effects with transitions CSS3
 *  version: 4.0.3
 *  http://dixso.github.io/custombox/
 *  (c) 2017 Julio de la Calle - @dixso9
 *
 *  Under MIT License - http://opensource.org/licenses/MIT
 */
.custombox-content,.custombox-overlay{position:fixed;overflow:hidden;top:0;width:100%;height:100%}.custombox-overlay{z-index:9997;opacity:0;transition-delay:0s;transition-timing-function:linear;transition-property:opacity}.custombox-content{z-index:9999;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:stretch;align-content:stretch}.custombox-lock{overflow:hidden}.custombox-reference{display:none}.custombox-content{overflow-y:auto}.custombox-content>*{max-width:100%;max-height:95%}.custombox-fullscreen.custombox-content{-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:stretch;align-items:stretch}.custombox-fullscreen.custombox-content>*{width:100%;max-height:100%}.custombox-y-top{-ms-flex-align:baseline;align-items:baseline}.custombox-x-left{-ms-flex-align:start;align-items:flex-start}.custombox-y-center{-ms-flex-align:center;align-items:center}.custombox-y-bottom{-ms-flex-align:end;align-items:flex-end}.custombox-x-center{-ms-flex-pack:center;justify-content:center}.custombox-x-right{-ms-flex-pack:end;justify-content:flex-end}.custombox-perspective,.custombox-perspective body{perspective:600px;height:100%;overflow:hidden}.custombox-perspective .custombox-container{overflow:hidden;height:100%}@keyframes fadeIn{from{transform:scale(.7);transition-property:all}to{transform:scale(1);opacity:1}}@keyframes fadeOut{from{transform:scale(1);opacity:1}to{transform:scale(.7);transition-property:all}}.custombox-fadein.custombox-content{opacity:0}.custombox-fadein.custombox-content.custombox-open{animation-name:fadeIn;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-fadein.custombox-content.custombox-close{animation-name:fadeOut;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes slideInTop{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideOutTop{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slideInBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slideOutLeft{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutRight{from{transform:translateX(0)}to{transform:translateX(100%)}}.custombox-contentscale.custombox-content,.custombox-letmein.custombox-content,.custombox-makeway.custombox-content,.custombox-push.custombox-content,.custombox-slide.custombox-content,.custombox-slip.custombox-content{-ms-transform:translateX(-100%);transform:translateX(-100%)}.custombox-contentscale.custombox-content.custombox-open.custombox-top,.custombox-letmein.custombox-content.custombox-open.custombox-top,.custombox-makeway.custombox-content.custombox-open.custombox-top,.custombox-push.custombox-content.custombox-open.custombox-top,.custombox-slide.custombox-content.custombox-open.custombox-top,.custombox-slip.custombox-content.custombox-open.custombox-top{animation-name:slideInTop;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-content.custombox-open.custombox-bottom,.custombox-letmein.custombox-content.custombox-open.custombox-bottom,.custombox-makeway.custombox-content.custombox-open.custombox-bottom,.custombox-push.custombox-content.custombox-open.custombox-bottom,.custombox-slide.custombox-content.custombox-open.custombox-bottom,.custombox-slip.custombox-content.custombox-open.custombox-bottom{animation-name:slideInBottom;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-content.custombox-open.custombox-left,.custombox-letmein.custombox-content.custombox-open.custombox-left,.custombox-makeway.custombox-content.custombox-open.custombox-left,.custombox-push.custombox-content.custombox-open.custombox-left,.custombox-slide.custombox-content.custombox-open.custombox-left,.custombox-slip.custombox-content.custombox-open.custombox-left{animation-name:slideInLeft;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-content.custombox-open.custombox-right,.custombox-letmein.custombox-content.custombox-open.custombox-right,.custombox-makeway.custombox-content.custombox-open.custombox-right,.custombox-push.custombox-content.custombox-open.custombox-right,.custombox-slide.custombox-content.custombox-open.custombox-right,.custombox-slip.custombox-content.custombox-open.custombox-right{animation-name:slideInRight;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-content.custombox-close.custombox-top,.custombox-letmein.custombox-content.custombox-close.custombox-top,.custombox-makeway.custombox-content.custombox-close.custombox-top,.custombox-push.custombox-content.custombox-close.custombox-top,.custombox-slide.custombox-content.custombox-close.custombox-top,.custombox-slip.custombox-content.custombox-close.custombox-top{animation-name:slideOutTop;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-content.custombox-close.custombox-bottom,.custombox-letmein.custombox-content.custombox-close.custombox-bottom,.custombox-makeway.custombox-content.custombox-close.custombox-bottom,.custombox-push.custombox-content.custombox-close.custombox-bottom,.custombox-slide.custombox-content.custombox-close.custombox-bottom,.custombox-slip.custombox-content.custombox-close.custombox-bottom{animation-name:slideOutBottom;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-content.custombox-close.custombox-left,.custombox-letmein.custombox-content.custombox-close.custombox-left,.custombox-makeway.custombox-content.custombox-close.custombox-left,.custombox-push.custombox-content.custombox-close.custombox-left,.custombox-slide.custombox-content.custombox-close.custombox-left,.custombox-slip.custombox-content.custombox-close.custombox-left{animation-name:slideOutLeft;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-content.custombox-close.custombox-right,.custombox-letmein.custombox-content.custombox-close.custombox-right,.custombox-makeway.custombox-content.custombox-close.custombox-right,.custombox-push.custombox-content.custombox-close.custombox-right,.custombox-slide.custombox-content.custombox-close.custombox-right,.custombox-slip.custombox-content.custombox-close.custombox-right{animation-name:slideOutRight;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes newspaperIn{from{transform:scale(0) rotate(720deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes newspaperOut{from{transform:scale(1) rotate(0);opacity:1}to{transform:scale(0) rotate(720deg);opacity:0}}.custombox-newspaper.custombox-content{opacity:0}.custombox-newspaper.custombox-content.custombox-open{animation-name:newspaperIn;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-newspaper.custombox-content.custombox-close{animation-name:newspaperOut;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes fallIn{from{transform-style:preserve-3d;transform:translateZ(600px) rotateX(20deg);opacity:0}to{transition-timing-function:ease-in;transition-property:all;transform:translateZ(0) rotateX(0);opacity:1}}@keyframes fallOut{from{transition-timing-function:ease-in;transition-property:all;transform:translateZ(0) rotateX(0);opacity:1}to{transform-style:preserve-3d;transform:translateZ(600px) rotateX(20deg);opacity:0}}.custombox-fall.custombox-content{opacity:0}.custombox-fall.custombox-content.custombox-open{animation-name:fallIn;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-fall.custombox-content.custombox-close{animation-name:fallOut;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes sidefallIn{from{transform-style:preserve-3d;transform:translate(30%) translateZ(600px) rotate(10deg);opacity:0}to{transition-timing-function:ease-in;transition-property:all;transform:translate(0) translateZ(0) rotate(0);opacity:1}}@keyframes sidefallOut{from{transition-timing-function:ease-in;transition-property:all;transform:translate(0) translateZ(0) rotate(0);opacity:1}to{transform-style:preserve-3d;transform:translate(30%) translateZ(600px) rotate(10deg);opacity:0}}.custombox-sidefall.custombox-content{opacity:0}.custombox-sidefall.custombox-content.custombox-open{animation-name:sidefallIn;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-sidefall.custombox-content.custombox-close{animation-name:sidefallOut;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes blurInTop{from{transform:translateY(-5%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes blurOutTop{from{transform:translateY(0);opacity:1}to{transform:translateY(-5%);opacity:0}}@keyframes blurInBottom{from{transform:translateY(5%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes blurOutBottom{from{transform:translateY(0);opacity:1}to{transform:translateY(5%);opacity:0}}@keyframes blurInRight{from{transform:translateX(5%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes blurOutRight{from{transform:translateY(0);opacity:1}to{transform:translateX(5%);opacity:0}}@keyframes blurInLeft{from{transform:translateX(-5%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes blurOutLeft{from{transform:translateY(0);opacity:1}to{transform:translateX(-5%);opacity:0}}@keyframes blurInContainer{from{filter:blur(0)}to{filter:blur(3px)}}@keyframes blurOutContainer{from{filter:blur(3px)}to{filter:blur(0)}}.custombox-blur.custombox-content{opacity:0}.custombox-blur.custombox-content.custombox-open.custombox-top{animation-name:blurInTop;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-content.custombox-open.custombox-bottom{animation-name:blurInBottom;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-content.custombox-open.custombox-left{animation-name:blurInLeft;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-content.custombox-open.custombox-right{animation-name:blurInRight;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-content.custombox-close.custombox-top{animation-name:blurOutTop;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-content.custombox-close.custombox-bottom{animation-name:blurOutBottom;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-content.custombox-close.custombox-right{animation-name:blurOutRight;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-content.custombox-close.custombox-left{animation-name:blurOutLeft;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-container{animation-name:blurOutContainer;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-blur.custombox-container.custombox-open{animation-name:blurInContainer;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes flipInTop{from{transform-style:preserve-3d;transform:rotateX(-70deg)}to{transform:rotateY(0);opacity:1}}@keyframes flipOutTop{from{transform:rotateY(0);opacity:1}to{transform-style:preserve-3d;transform:rotateX(-70deg)}}@keyframes flipInBottom{from{transform-style:preserve-3d;transform:rotateX(70deg)}to{transform:rotateY(0);opacity:1}}@keyframes flipOutBottom{from{transform:rotateY(0);opacity:1}to{transform-style:preserve-3d;transform:rotateX(70deg)}}@keyframes flipInRight{from{transform-style:preserve-3d;transform:rotateY(70deg)}to{transform:rotateY(0);opacity:1}}@keyframes flipOutRight{from{transform:rotateY(0);opacity:1}to{transform-style:preserve-3d;transform:rotateY(70deg)}}@keyframes flipInLeft{from{transform-style:preserve-3d;transform:rotateY(-70deg)}to{transform:rotateY(0);opacity:1}}@keyframes flipOutLeft{from{transform:rotateY(0);opacity:1}to{transform-style:preserve-3d;transform:rotateY(-70deg)}}.custombox-flip.custombox-content{opacity:0}.custombox-flip.custombox-content.custombox-open.custombox-top{animation-name:flipInTop;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-flip.custombox-content.custombox-open.custombox-bottom{animation-name:flipInBottom;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-flip.custombox-content.custombox-open.custombox-right{animation-name:flipInRight;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-flip.custombox-content.custombox-open.custombox-left{animation-name:flipInLeft;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-flip.custombox-content.custombox-close.custombox-top{animation-name:flipOutTop;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-flip.custombox-content.custombox-close.custombox-bottom{animation-name:flipOutBottom;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-flip.custombox-content.custombox-close.custombox-right{animation-name:flipOutRight;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-flip.custombox-content.custombox-close.custombox-left{animation-name:flipOutLeft;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes signIn{from{transform-style:preserve-3d;transform:rotateX(-60deg);transform-origin:50% 0;transition-property:all}to{transform:rotateX(0);opacity:1}}@keyframes signOut{from{transform:rotateX(0);opacity:1}to{transform-style:preserve-3d;transform:rotateX(-60deg);transform-origin:50% 0;transition-property:all}}.custombox-sign{perspective:1300px}.custombox-sign.custombox-content{opacity:0}.custombox-sign.custombox-content.custombox-open{animation-name:signIn;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-sign.custombox-content.custombox-close{animation-name:signOut;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes superscaledIn{from{transform:scale(2)}to{transform:scale(1);opacity:1}}@keyframes superscaledOut{from{transform:scale(1);opacity:1}to{transform:scale(2)}}.custombox-superscaled.custombox-content{opacity:0}.custombox-superscaled.custombox-content.custombox-open{animation-name:superscaledIn;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-superscaled.custombox-content.custombox-close{animation-name:superscaledOut;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes slitIn{0%{transform:translateZ(-3000px) rotateY(90deg)}50%{transform:translateZ(-250px) rotateY(89deg);opacity:1;animation-timing-function:ease-out}100%{transform:translateZ(0) rotateY(0);opacity:1}}@keyframes slitOut{0%{transform:translateZ(0) rotateY(0);opacity:1}50%{transform:translateZ(-250px) rotateY(89deg);opacity:1;animation-timing-function:ease-out}100%{transform:translateZ(-3000px) rotateY(90deg)}}.custombox-slit.custombox-content{opacity:0;transform-style:preserve-3d}.custombox-slit.custombox-content.custombox-open{animation-name:slitIn;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slit.custombox-content.custombox-close{animation-name:slitOut;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes rotateIn{from{transform-style:preserve-3d;transform:translateY(0) rotateX(90deg);transform-origin:0 100%;opacity:0;transition-timing-function:ease-out;transition-property:all}to{transform:translateY(0) rotateX(0);opacity:1}}@keyframes rotateOut{from{transform:translateY(0) rotateX(0);opacity:1}to{transform-style:preserve-3d;transform:translateY(0) rotateX(90deg);transform-origin:0 100%;opacity:0;transition-timing-function:ease-out;transition-property:all}}.custombox-rotate{perspective:2300px}.custombox-rotate.custombox-content{-ms-transform:translateY(-100%);transform:translateY(-100%)}.custombox-rotate.custombox-content.custombox-open{animation-name:rotateIn;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-rotate.custombox-content.custombox-close{animation-name:rotateOut;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes letmeinBottomOverlay{to{transform:rotateX(-2deg);transform-origin:50% 0;transform-style:preserve-3d}}@keyframes letmeinOutBottomOverlay{from{transform:rotateX(-2deg);transform-origin:50% 0;transform-style:preserve-3d}to{opacity:0}}@keyframes letmeinLeftOverlay{to{transform:rotateY(-2deg);transform-origin:50% 0;transform-style:preserve-3d}}@keyframes letmeinOutLeftOverlay{from{transform:rotateY(-2deg);transform-origin:50% 0;transform-style:preserve-3d}to{opacity:0}}@keyframes letmeinRightOverlay{to{transform:rotateY(2deg);transform-origin:50% 0;transform-style:preserve-3d}}@keyframes letmeinOutRightOverlay{from{transform:rotateY(2deg);transform-origin:50% 0;transform-style:preserve-3d}to{opacity:0}}@keyframes letmeinTopOverlay{to{transform:rotateX(2deg);transform-origin:0 50%;transform-style:preserve-3d}}@keyframes letmeinOutTopOverlay{from{transform:rotateX(2deg);transform-origin:50% 0;transform-style:preserve-3d}to{opacity:0}}.custombox-letmein.custombox-overlay.custombox-open.custombox-top{animation-name:letmeinTopOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-letmein.custombox-overlay.custombox-open.custombox-bottom{animation-name:letmeinBottomOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-letmein.custombox-overlay.custombox-open.custombox-left{animation-name:letmeinLeftOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-letmein.custombox-overlay.custombox-open.custombox-right{animation-name:letmeinRightOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-letmein.custombox-overlay.custombox-close.custombox-top{animation-name:letmeinOutTopOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-letmein.custombox-overlay.custombox-close.custombox-bottom{animation-name:letmeinOutBottomOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-letmein.custombox-overlay.custombox-close.custombox-left{animation-name:letmeinOutLeftOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-letmein.custombox-overlay.custombox-close.custombox-right{animation-name:letmeinOutRightOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes makewayInContainer{50%{transform:translateZ(-50px) rotateY(5deg);animation-timing-function:ease-out}100%{transform:translateZ(-200px)}}@keyframes makewayOutContainer{0%{transform:translateZ(-200px)}50%{transform:translateZ(-50px) rotateY(5deg);animation-timing-function:ease-out}100%{opacity:0}}@keyframes makewayInTop{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes makewayOutTop{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes makewayInBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes makewayOutBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes makewayInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes makewayOutLeft{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes makewayInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes makewayOutRight{from{transform:translateX(0)}to{transform:translateX(100%)}}.custombox-makeway.custombox-overlay{transform-style:preserve-3d;-ms-transform-origin:0 50%;transform-origin:0 50%}.custombox-makeway.custombox-overlay.custombox-open{animation-name:makewayInContainer;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-makeway.custombox-overlay.custombox-close{animation-name:makewayOutContainer;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-makeway.custombox-container{transform-style:preserve-3d;-ms-transform-origin:0 50%;transform-origin:0 50%}.custombox-makeway.custombox-container.custombox-open{animation-name:makewayInContainer;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-makeway.custombox-container.custombox-close{animation-name:makewayOutContainer;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes slipTopOverlay{50%{transform:rotateX(10deg);transform-origin:50% 100%;transform-style:preserve-3d}}@keyframes slipOutTopOverlay{50%{transform:rotateX(10deg);transform-origin:50% 100%;transform-style:preserve-3d}}@keyframes slipRightOverlay{50%{transform:rotateY(10deg);transform-origin:50% 100%;transform-style:preserve-3d}}@keyframes slipOutRightOverlay{50%{transform:rotateY(10deg);transform-origin:50% 100%;transform-style:preserve-3d}}@keyframes slipBottomOverlay{50%{transform:rotateX(-10deg);transform-origin:50% 100%;transform-style:preserve-3d}}@keyframes slipOutBottomOverlay{50%{transform:rotateX(-10deg);transform-origin:50% 100%;transform-style:preserve-3d}}@keyframes slipLeftOverlay{50%{transform:rotateY(-10deg);transform-origin:50% 100%;transform-style:preserve-3d}}@keyframes slipOutLeftOverlay{50%{transform:rotateY(-10deg);transform-origin:50% 100%;transform-style:preserve-3d}}.custombox-slip.custombox-overlay.custombox-open.custombox-top{animation-name:slipTopOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-overlay.custombox-open.custombox-bottom{animation-name:slipBottomOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-overlay.custombox-open.custombox-left{animation-name:slipLeftOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-overlay.custombox-open.custombox-right{animation-name:slipRightOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-overlay.custombox-close.custombox-top{animation-name:slipOutTopOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-overlay.custombox-close.custombox-bottom{animation-name:slipOutBottomOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-overlay.custombox-close.custombox-left{animation-name:slipOutLeftOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-overlay.custombox-close.custombox-right{animation-name:slipOutRightOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-container.custombox-open.custombox-top{animation-name:slipTopOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-container.custombox-open.custombox-bottom{animation-name:slipBottomOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-container.custombox-open.custombox-left{animation-name:slipLeftOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-container.custombox-open.custombox-right{animation-name:slipRightOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-container.custombox-close.custombox-top{animation-name:slipOutTopOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-container.custombox-close.custombox-bottom{animation-name:slipOutBottomOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-container.custombox-close.custombox-left{animation-name:slipOutLeftOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slip.custombox-container.custombox-close.custombox-right{animation-name:slipOutRightOverlay;animation-timing-function:ease-in-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes cornerInOverlay{from{transform:translateY(150px) translateX(150px);transition-property:opacity,transform,visibility}to{transform:translateY(0);transition-property:opacity,transform}}@keyframes cornerOutOverlay{from{transform:translateY(0);transition-property:opacity,transform}to{transform:translateY(150px) translateX(150px);transition-property:opacity,transform,visibility;opacity:0}}@keyframes cornerInContent{from{transform:translateY(150px) translateX(150px);transition-property:opacity,transform,visibility}to{transform:translateY(0);transition-property:opacity,transform;opacity:1}}@keyframes cornerOutContent{from{transform:translateY(0);transition-property:opacity,transform;opacity:1}to{transform:translateY(150px) translateX(150px);transition-property:opacity,transform,visibility;opacity:0}}.custombox-corner.custombox-overlay.custombox-open{animation-name:cornerInOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-corner.custombox-overlay.custombox-close{animation-name:cornerOutOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-corner.custombox-content.custombox-open{animation-name:cornerInContent;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-corner.custombox-content.custombox-close{animation-name:cornerOutContent;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slidetogether.custombox-content,.custombox-slidetogether.custombox-overlay{-ms-transform:translateX(-100%);transform:translateX(-100%)}.custombox-slidetogether.custombox-content.custombox-open.custombox-top,.custombox-slidetogether.custombox-overlay.custombox-open.custombox-top{animation-name:slideInTop;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slidetogether.custombox-content.custombox-open.custombox-bottom,.custombox-slidetogether.custombox-overlay.custombox-open.custombox-bottom{animation-name:slideInBottom;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slidetogether.custombox-content.custombox-open.custombox-left,.custombox-slidetogether.custombox-overlay.custombox-open.custombox-left{animation-name:slideInLeft;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slidetogether.custombox-content.custombox-open.custombox-right,.custombox-slidetogether.custombox-overlay.custombox-open.custombox-right{animation-name:slideInRight;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slidetogether.custombox-content.custombox-close.custombox-top,.custombox-slidetogether.custombox-overlay.custombox-close.custombox-top{animation-name:slideOutTop;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slidetogether.custombox-content.custombox-close.custombox-bottom,.custombox-slidetogether.custombox-overlay.custombox-close.custombox-bottom{animation-name:slideOutBottom;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slidetogether.custombox-content.custombox-close.custombox-left,.custombox-slidetogether.custombox-overlay.custombox-close.custombox-left{animation-name:slideOutLeft;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-slidetogether.custombox-content.custombox-close.custombox-right,.custombox-slidetogether.custombox-overlay.custombox-close.custombox-right{animation-name:slideOutRight;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes scaleInOverlay{from{transform:scale(.9);transition:transform;opacity:0}to{transform:scale(1);transition:transform}}@keyframes scaleOutOverlay{from{transform:scale(1);transition:transform}to{transform:scale(.9);transition:transform;opacity:0;opacity:0}}.custombox-scale.custombox-overlay.custombox-open{animation-name:scaleInOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-scale.custombox-overlay.custombox-close{animation-name:scaleOutOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-scale.custombox-content.custombox-open{animation-name:scaleInOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-scale.custombox-content.custombox-close{animation-name:scaleOutOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes doorInOverlay{from{position:fixed;bottom:0;left:50%;right:50%;width:0}to{width:100%;left:0;right:0;transition-property:width}}@keyframes doorOutOverlay{from{width:100%;left:0;right:0;transition-property:width}to{position:fixed;bottom:0;left:50%;right:50%;width:0}}.custombox-door.custombox-overlay.custombox-open{animation-name:doorInOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-door.custombox-overlay.custombox-close{animation-name:doorOutOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-door.custombox-content.custombox-open{animation-name:doorInOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-door.custombox-content.custombox-close{animation-name:doorOutOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes pushInLeftOverlay{from{transform:translateX(-100%)}to{transform:translateX(0) translateY(0)}}@keyframes pushOutLeftOverlay{from{transform:translateX(0) translateY(0)}to{transform:translateX(-100%)}}@keyframes pushInRightOverlay{from{transform:translateX(100%)}to{transform:translateX(0) translateY(0)}}@keyframes pushOutRightOverlay{from{transform:translateX(0) translateY(0)}to{transform:translateX(100%)}}@keyframes pushInTopOverlay{from{transform:translateY(-100%)}to{transform:translateX(0) translateY(0)}}@keyframes pushOutTopOverlay{from{transform:translateX(0) translateY(0)}to{transform:translateY(-100%)}}@keyframes pushInBottomOverlay{from{transform:translateY(100%)}to{transform:translateX(0) translateY(0)}}@keyframes pushOutBottomOverlay{from{transform:translateX(0) translateY(0)}to{transform:translateY(100%)}}@keyframes pushOutTopOverlay{from{transform:translateX(0) translateY(0)}to{transform:translateY(-100%)}}@keyframes pushInLeftContainer{from{overflow-x:hidden;transition-property:transform}to{transform:translateX(100%)}}@keyframes pushOutLeftContainer{from{transform:translateX(100%)}to{overflow-x:hidden;transition-property:transform}}@keyframes pushInRightContainer{from{overflow-x:hidden;transition-property:transform}to{transform:translateX(-100%)}}@keyframes pushOutRightContainer{from{transform:translateX(-100%)}to{overflow-x:hidden;transition-property:transform}}@keyframes pushInTopContainer{from{overflow-x:hidden;transition-property:transform}to{transform:translateY(100%)}}@keyframes pushOutTopContainer{from{transform:translateY(100%)}to{overflow-x:hidden;transition-property:transform}}@keyframes pushInBottomContainer{from{overflow-x:hidden;transition-property:transform}to{transform:translateY(-100%)}}@keyframes pushOutBottomContainer{from{transform:translateY(-100%)}to{overflow-x:hidden;transition-property:transform}}.custombox-push.custombox-overlay{transition-property:transform}.custombox-push.custombox-overlay.custombox-open.custombox-top{animation-name:pushInTopOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-overlay.custombox-open.custombox-bottom{animation-name:pushInBottomOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-overlay.custombox-open.custombox-left{animation-name:pushInLeftOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-overlay.custombox-open.custombox-right{animation-name:pushInRightOverlay;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-overlay.custombox-close.custombox-top{animation-name:pushOutTopOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-overlay.custombox-close.custombox-bottom{animation-name:pushOutBottomOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-overlay.custombox-close.custombox-left{animation-name:pushOutLeftOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-overlay.custombox-close.custombox-right{animation-name:pushOutRightOverlay;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-container.custombox-open.custombox-top{animation-name:pushInTopContainer;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-container.custombox-open.custombox-bottom{animation-name:pushInBottomContainer;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-container.custombox-open.custombox-left{animation-name:pushInLeftContainer;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-container.custombox-open.custombox-right{animation-name:pushInRightContainer;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-container.custombox-close.custombox-top{animation-name:pushOutTopContainer;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-container.custombox-close.custombox-bottom{animation-name:pushOutBottomContainer;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-container.custombox-close.custombox-left{animation-name:pushOutLeftContainer;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-push.custombox-container.custombox-close.custombox-right{animation-name:pushOutRightContainer;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes contentscaleInContainer{from{transition:transform}to{transform:scale(.8)}}@keyframes contentscaleOutContainer{from{transform:scale(.8)}to{transition:transform}}.custombox-contentscale.custombox-overlay{-ms-transform:translateX(-100%);transform:translateX(-100%)}.custombox-contentscale.custombox-overlay.custombox-open.custombox-top{animation-name:slideInTop;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-overlay.custombox-open.custombox-bottom{animation-name:slideInBottom;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-overlay.custombox-open.custombox-left{animation-name:slideInLeft;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-overlay.custombox-open.custombox-right{animation-name:slideInRight;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-overlay.custombox-close.custombox-top{animation-name:slideOutTop;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-overlay.custombox-close.custombox-bottom{animation-name:slideOutBottom;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-overlay.custombox-close.custombox-left{animation-name:slideOutLeft;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-overlay.custombox-close.custombox-right{animation-name:slideOutRight;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-container.custombox-open{animation-name:contentscaleInContainer;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-contentscale.custombox-container.custombox-close{animation-name:contentscaleOutContainer;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes swellOpen{0%{opacity:0;transform:translate3d(calc(-100vw - 50%),0,0)}50%{opacity:1;transform:translate3d(100px,0,0)}100%{opacity:1;transform:translate3d(0,0,0)}}@keyframes swellClose{0%{opacity:1;transform:translate3d(0,0,0)}50%{opacity:1;transform:translate3d(-100px,0,0) scale3d(1.1,1.1,1)}100%{opacity:0;transform:translate3d(calc(100vw + 50%),0,0)}}.custombox-swell.custombox-content{opacity:0}.custombox-swell.custombox-content.custombox-open{animation-name:swellOpen;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-swell.custombox-content.custombox-close{animation-name:swellClose;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes rotatedownOpen{0%{opacity:0;transform:rotate3d(0,0,1,-45deg)}100%{opacity:1;transform:rotate3d(0,0,1,0deg)}}@keyframes rotatedownClose{0%{opacity:1}100%{opacity:0;transform:rotate3d(0,0,1,45deg)}}@keyframes rotatedownElem{0%{opacity:0;transform:translate3d(0,-150px,0) rotate3d(0,0,1,-20deg)}100%{opacity:1;transform:translate3d(0,0,0) rotate3d(0,0,1,0deg)}}.custombox-rotatedown.custombox-content{opacity:0;animation-timing-function:cubic-bezier(.7,0,.3,1);-ms-transform-origin:-150% 50%;transform-origin:-150% 50%}.custombox-rotatedown.custombox-content.custombox-open{animation-name:rotatedownOpen;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-rotatedown.custombox-content.custombox-close{animation-name:rotatedownClose;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes flashOpen{0%{opacity:0;transform:translate3d(-400px,0,0) scale3d(1.4,0,1)}100%{opacity:1;transform:translate3d(0,0,0) scale3d(1,1,1)}}@keyframes flashClose{0%{opacity:1;transform:translate3d(0,0,0) scale3d(1,1,1)}20%{opacity:1;transform:translate3d(0,0,0) scale3d(1,1,1)}100%{opacity:0;transform:translate3d(-400px,0,0) scale3d(1.4,0,1)}}.custombox-flash.custombox-content{opacity:0;animation-timing-function:cubic-bezier(.7,0,.3,1)}.custombox-flash.custombox-content.custombox-open{animation-name:flashOpen;animation-timing-function:ease-in;animation-fill-mode:forwards;backface-visibility:hidden}.custombox-flash.custombox-content.custombox-close{animation-name:flashClose;animation-timing-function:ease-out;animation-fill-mode:forwards;backface-visibility:hidden}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.custombox-loader{display:none;border-style:solid;border-width:5px;border-radius:50%;width:40px;height:40px;animation-name:spin;animation-timing-function:linear;animation-iteration-count:infinite;position:fixed;top:50%;left:50%;margin:-25px 0 0 -25px;z-index:9998}

  .gs-modal {
    background-color: #FFF;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
    padding: 24px;
    width: 45%;
    position: relative;
    display: none;
    overflow-y: scroll;
  }
  .gs-modal-close {
    display: block;
    position: absolute;
    top: -35px;
    right: 0;
    z-index: 10000;
    outline: none;
    font-size: 30px;
    line-height: 30px;
    transition: transform .3s ease-in-out;
    color: #FFF;
  }
  .gs-modal-close:hover {
    transform: rotate(360deg);
    color: #FFF;
  }
  #gs-modal h2 {
      margin: 0;
  }

  #gs-modal {
      color: #007c85;
  }

  #gs-modal a {
      color: #f26023;
  }

  h4.website-section, h4.profession-section {
      margin: 10px 0;
  }

  h3.profession-section {
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
  }

  dl.website-section, dl.profession-section {
      margin: 5px 0;
      clear: both;
  }

  .gs-modal dt {
      width: 60%;
      float: left;
  }

  .gs-modal dd.verified {
      color: #f26023;
  }
  .gs-modal h3.website-section, .gs-modal h4.website-section {
      margin: 0;
  }

index.html

<script id="seal">
// below script can be minfied, but this is all that is needed to place the seal on the page. 
(function(a, b, c, d, e, f, g) {
  a['eventsObj'] = e;
  f = b.createElement('script'),
  g = b.getElementById(c);
  f.async = 1;
  f.src = d;
  f.id = 'gs-certified-script';
  f.onload = function() {
    gsCertified.init({});
  }
  g.parentNode.insertBefore(f, g);
})(window, document, 'seal', 'http://certifications.test/assets/js/badge.js', 'gsCertified');
</script>

The file badge.js and the css file gs-certified.min.css will be hosted on your server, the client will insert the script it index.html and it will insert the image where the script tag is placed, it can be over-ridden.

I still need to try and thin down the css file of any of the modal features we are not using, but I will do that after Im done styling the modal window.