Netlify Injected Content - bgoonz/BGOONZ_BLOG_2.0 GitHub Wiki
March 2022
Inject analytics or other scripts into the HTML of your site.
-
before
</body>
goback
<input type="button" style="position: fixed;top: 10px;right: 10px;width:80px;color:white;font-weight:bold;background-color:rgba(0, 0, 0, 0.856); border-radius:15px;" value="Go Back" onclick="history.back(-1)" /> <?php $url = htmlspecialchars($_SERVER['HTTP_REFERER']); echo "<a href='$url'></a>
Remove
-
before
</head>
mdn-style
<style>blockquote, body, dd, dl, figcaption, figure, h1, h2, h3, h4, h5, li, ol[class], p, ul[class] { margin: 0 } body { min-height: 110vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.6 } article>*+* { margin-top: 1em } button, input, select, textarea { font: inherit } @media(prefers-reduced-motion:reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important } } html { box-sizing: border-box; } body { font-family: arial, x-locale-body, sans-serif; letter-spacing: -.0027777778rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 100%; line-height: 1.75 } img { height: auto } @font-face { font-display: swap; font-family: zillaslab; font-style: normal; font-weight: 700; src: url(/static/media/ZillaSlab-Bold.subset.0beac26b.woff2) format("woff2"), url(/static/media/ZillaSlab-Bold.subset.72026b3c.woff) format("woff") } @font-face { font-display: swap; font-family: zillaslab; font-style: normal; font-weight: 400; src: url(/static/media/ZillaSlab-Regular.subset.ce3a756d.woff2) format("woff2"), url(/static/media/ZillaSlab-Regular.subset.7e4c05c9.woff) format("woff") } h1, h2, h3 { font-family: zillaslab, palatino, "Palatino Linotype", serif; line-height: 1.2 } h1 { font-size: 1.802rem } @media (min-width:47.9385em) { h1 { font-size: 3.052rem } } h2 { font-size: 1.602rem } @media (min-width:47.9385em) { h2 { font-size: 2.441rem } } h3 { font-size: 1.424rem; font-family: zillaslab, palatino, "Palatino Linotype", serif; font-weight: 400; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; padding: 0 6px; margin: 24px 0 } @media (min-width:47.9385em) { h3 { font-size: 1.953rem } } h4 { font-size: 1.266rem } @media (min-width:47.9385em) { h4 { font-size: 1.563rem } } h5 { font-size: 1.125rem } @media (min-width:47.9385em) { h5 { font-size: 1.25rem } } p { margin-bottom: 24px } a:link, a:visited { text-decoration: none } a:link:active, a:link:focus, a:link:hover, a:visited:active, a:visited:focus, a:visited:hover { text-decoration: underline } blockquote { max-width: 45rem; max-width: 85ch; font-size: 1.125rem; font-family: zillaslab, palatino, "Palatino Linotype", serif; font-weight: 400; margin-bottom: 24px } @media (min-width:47.9385em) { blockquote { font-size: 1.25rem } } blockquote:after, blockquote:before { background-image: linear-gradient(90deg, #00356a, #83d0f2); content: ""; display: block; height: 5px; margin-bottom: 12px } blockquote:after { margin-top: 12px } blockquote p:last-of-type { margin-bottom: 0 } a { text-decoration: none } a:focus, a:hover { text-decoration: underline } a code { -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none } dl dt { font-weight: 700 } dl dd { margin: 0 24px 24px } </style>
Remove
-
before
</body>
stackbit-widget
<script src="https://widget.stackbit.com/init.js" id="stackbit-widget-init" data-stackbit-project-id="609b2d7c71a5dd0016f36326"></script>
Remove
-
before
</body>
addthis
<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-60dcec1ece575946"></script>
Remove
-
before
</head>
meta
<meta name="google-site-verification" content="q5W83EYchlVTyA-iYRE4ElQGcbD_vukQF0NKW12N3qU" /> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="apple-touch-icon" href="logo-circle.png"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="HTML"> <meta name="Author" content="Bryan Guner"> <meta name="keywords" content="HTML, Meta Tags, Metadata"> <meta name="description" content="Learning about Web Development."> <link type="image/x-icon" href="./favicon.ico" rel="shortcut icon"> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@bgoonz"> <meta name="twitter:creator" content="@bgoonz"> <meta name="twitter:image:src" content="/logo-circle.png"> <meta name="twitter:title" content="Web Development Resource Hub Bryan Guner"> <meta name="twitter:description" content="The new home of my blog resource sharing website."> <meta property="twitter:card" content="summary_large_image"> <link href="https://instructure-uploads-pdx.s3.us-west-2.amazonaws.com/account_168550000000000001/attachments/537/logo-canvas.png" rel="apple-touch-icon"> <link type="text/css" href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet"> <meta property="og:image" content="https://mugshotbot.com/m/DROicc16">
Remove
-
before
</body>
search
<script> let div = window.createElement('div'); div.id('search'); div.style = 'z-index:-1; position:absolute;width: 300px;height: 300px;bottom: 0px;right: 25%;left: 50 %;'; let docscontent = window.getElementByClassName('docs-content'); docscontent.appendChild(div); let div1 = window.createElement('div'); div1.id('search'); div1.style = 'z-index:-1; position:absolute;width: 300px;height: 300px;background:#063;bottom: 0px;right: 25%;left: 50 %;margin-left: -150px'; let header = window.getElementByClassName('site-header-inside'); header.appendChild('div1'); </script>
Remove
-
before
</head>
mailchimp
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/a41d8352dc1deaf4533662699/28d2370bb66d456a5d6411971.js");</script>
Remove
-
before
</head>
search
<script>"use strict"; !function() { var t = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxZTQzZmFlY2I2NjkwNWMyZGJkMGVmZCIsInRva2VuVHlwZSI6InB1YmxpYyIsImlhdCI6MTY0MjM0ODUyNiwiZXhwIjoxNDI1Njc0ODUyNn0.VD7Lxgh5cWuOzOhV9KH51TZVdPVXvsIJgRUx-oacfVM"; function e() { var e = document.createElement("script"), a = navigator.language || navigator.userLanguage; e.type = "text/javascript", e.async = !0, e.src = "https://api.searchbar.org/v1/widget/" + t + "/" + a; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(e, n); } "complete" === document.readyState ? e() : window.attachEvent ? window.attachEvent("onload", e) : window.addEventListener("load", e, !1); }();</script>
Remove
-
before
</body>
stat
<!-- Default Statcounter code for 2 https://bgoonz-blog.netlify.app/ --> <script type="text/javascript"> var sc_project=12702211; var sc_invisible=0; var sc_security="011fbeb6"; var sc_text=3; var scJsHost = "https://"; document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+ "statcounter.com/counter/counter.js'></"+"script>"); </script> <noscript><div class="statcounter"><a title="Web Analytics" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/12702211/0/011fbeb6/0/" alt="Web Analytics" referrerPolicy="no-referrer-when-downgrade"></a></div></noscript> <!-- End of Statcounter Code --> <a href="https://statcounter.com/p12702211/?guest=1">View My Stats</a>
Remove
-
before
</head>
sc-search-style
<style> @font-face { font-family: font-sb; src: url(https://api.searchbar.org/fonts/sb.eot?39450784); src: url(https://api.searchbar.org/fonts/sb.eot?39450784#iefix) format('embedded-opentype'), url(https://api.searchbar.org/fonts/sb.woff?39450784) format('woff'), url(https://api.searchbar.org/fonts/?39450784) format('truetype'), url(https://api.searchbar.org/fonts/sb.svg?39450784#font-sb) format('svg'); font-weight: 400; font-style: normal } #sb-search-example p { font-family: sans-serif; font-size: 18px; line-height: 12px; margin: 0; } #sb-search-example { position: static; bottom: 0; width: auto; place-content: center; display: inline-block; box-shadow: 0px 2px 4px rgba(190, 190, 190, 0.5); border: solid 5px white; border-radius: 100px; flex-shrink: initial; flex-grow: initial; } #sb-search-example .sb-icon { font: normal normal 400 26px font-sb; align-items: center; padding: 10px; speak: none; display: inline-block; text-decoration: inherit; text-align: center; text-transform: none; cursor: pointer; margin: 0; } #sb-search-example .sb-search-icon { box-sizing: border-box; border: 0px; align-items: center; background: #007cff; color: #fff; cursor: pointer; display: flex; border-radius: 26px; padding: 0 20px 0 4px; } </style>
Remove
-
before
</body>
back-2-top
<script> // Get the button: mybutton = document.getElementById("scrollBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function () { scrollFunction(); }; function scrollFunction() { if ( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera } </script> <script> window.addEventListener("DOMContentLoaded", (event) => { console.log("DOM fully loaded and parsed"); const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } }; scrollToTop(); }); </script> <button id="scrollBtn" title="Go to top" onclick="topFunction()" style="display: block;"> Back To Top </button>
Remove
-
before
</head>
scroll-css
<style> #scrollBtn { display: none; position: fixed; bottom: 140px; right: 20px; z-index: 99; border: 1px black solid; outline: none; background-color: #044274; color: white; cursor: pointer; padding: 5px; border-radius: 28px; font-size: 12px; } #scrollBtn:hover { background-color: #ffffff; color:#000000; } </style>
Remove
-
before
</head>
more-style
<style> a { text-decoration: none; color: #007edf; text-shadow: none; transition: color 0.5s ease; transition: text-shadow 0.5s ease; -webkit-transition: color 0.5s ease; -webkit-transition: text-shadow 0.5s ease; -moz-transition: color 0.5s ease; -moz-transition: text-shadow 0.5s ease; -o-transition: color 0.5s ease; -o-transition: text-shadow 0.5s ease; -ms-transition: color 0.5s ease; -ms-transition: text-shadow 0.5s ease; } a:hover, a:focus {text-decoration: underline;} footer a { color: #F2F2F2; text-decoration: underline; } em { font-style: italic; } strong { font-weight: bold; } pre { width: 100%; padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,.1); overflow: auto; } code { padding: 3px; margin: 0 3px; box-shadow: 0 0 10px rgba(0,0,0,.1); } pre code { display: block; box-shadow: none; } blockquote { color: #666; margin-bottom: 20px; padding: 0 0 0 20px; border-left: 3px solid #bbb; } </style>
Remove
-
before
</head>
lazysizes
<script> /*! lazysizes - v5.3.2 */ !function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,i=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,o=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],a={},G=Array.prototype.forEach,J=function(e,t){if(!a[t]){a[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return a[t].test(e[$]("class")||"")&&a[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var a;if(a=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(a," "))}},V=function(t,a,e){var i=e?P:"removeEventListener";if(e){V(t,a)}r.forEach(function(e){t[i](e,a)})},X=function(e,t,a,i,r){var n=D.createEvent("Event");if(!a){a={}}a.instance=k;n.initEvent(t,!i,!r);n.detail=a;e.dispatchEvent(n);return n},Y=function(e,t){var a;if(!i&&(a=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}a({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,a){a=a||e.offsetWidth;while(a<H.minSize&&t&&!e._lazysizesWidth){a=t.offsetWidth;t=t.parentNode}return a},ee=function(){var a,i;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;a=true;i=false;while(e.length){e.shift()()}a=false};var e=function(e,t){if(a&&!t){e.apply(this,arguments)}else{n.push(e);if(!i){i=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(a,e){return e?function(){ee(a)}:function(){var e=this;var t=arguments;ee(function(){a.apply(e,t)})}},ae=function(e){var a;var i=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){a=false;i=f.now();e()};var s=o&&n>49?function(){o(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(a){return}a=true;t=r-(f.now()-i);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ie=function(e){var t,a;var i=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-a;if(e<i){I(n,i-e)}else{(o||r)(r)}};return function(){a=f.now();if(!t){t=I(n,i)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var M=0;var N=-1;var L=function(e){M--;if(!e||M<0||!e.target){M=0}};var x=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var W=function(e,t){var a;var i=e;var r=x(e);g-=t;b+=t;p-=t;C+=t;while(r&&(i=i.offsetParent)&&i!=D.body&&i!=O){r=(Z(i,"opacity")||1)>0;if(r&&Z(i,"overflow")!="visible"){a=i.getBoundingClientRect();r=C>a.left&&p<a.right&&b>a.top-1&&g<a.bottom+1}}return r};var t=function(){var e,t,a,i,r,n,s,o,l,u,f,c;var d=k.elements;if((h=H.loadMode)&&M<8&&(e=d.length)){t=0;N++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(o=d[t][$]("data-expand"))||!(n=o*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&M<1&&N>2&&h>2&&!D.hidden){w=f;N=0}else if(h>1&&N>1&&M<6){w=u}else{w=_}}if(l!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;l=n}a=d[t].getBoundingClientRect();if((b=a.bottom)>=s&&(g=a.top)<=z&&(C=a.right)>=s*c&&(p=a.left)<=y&&(b||C||p||g)&&(H.loadHidden||x(d[t]))&&(m&&M<3&&!o&&(h<3||N<4)||W(d[t],n))){R(d[t]);r=true;if(M>9){break}}else if(!r&&m&&!i&&M<4&&N<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!o&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){i=v[0]||d[t]}}if(i&&!r){R(i)}}};var a=ae(t);var S=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}L(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,B);X(t,"lazyloaded")};var i=te(S);var B=function(e){i({target:e.target})};var T=function(e,t){var a=e.getAttribute("data-load-mode")||H.iframeLoadMode;if(a==0){e.contentWindow.location.replace(t)}else if(a==1){e.src=t}};var F=function(e){var t;var a=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(a){e.setAttribute("srcset",a)}};var s=te(function(t,e,a,i,r){var n,s,o,l,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(i){if(a){K(t,H.autosizesClass)}else{t.setAttribute("sizes",i)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){o=t.parentNode;l=o&&j.test(o.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||l);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(L,2500);V(t,B,true)}if(l){G.call(o.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!l){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||l)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,H.fastLoadedClass)}S(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){M--}},true)});var R=function(e){if(e._lazyRace){return}var t;var a=n.test(e.nodeName);var i=a&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=i=="auto";if((r||!m)&&a&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;M++;s(e,t,r,i,a)};var r=ie(function(){H.loadMode=3;a()});var o=function(){if(H.loadMode==3){H.loadMode=2}r()};var l=function(){if(m){return}if(f.now()-e<999){I(l,999);return}m=true;H.loadMode=3;a();q("scroll",o,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",a,true);q("resize",a,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(a).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",a,true);O[P]("DOMAttrModified",a,true);setInterval(a,999)}q("hashchange",a,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,a,true)});if(/d$|^c/.test(D.readyState)){l()}else{q("load",l);D[P]("DOMContentLoaded",a);I(l,2e4)}if(k.elements.length){t();ee._lsFlush()}else{a()}},checkElems:a,unveil:R,_aLSL:o}}(),re=function(){var a;var n=te(function(e,t,a,i){var r,n,s;e._lazysizesWidth=i;i+="px";e.setAttribute("sizes",i);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",i)}}if(!a.detail.dataAttr){Y(e,a.detail)}});var i=function(e,t,a){var i;var r=e.parentNode;if(r){a=s(e,r,a);i=X(e,"lazybeforesizes",{width:a,dataAttr:!!t});if(!i.defaultPrevented){a=i.detail.width;if(a&&a!==e._lazysizesWidth){n(e,r,i,a)}}}};var e=function(){var e;var t=a.length;if(t){e=0;for(;e<t;e++){i(a[e])}}};var t=ie(e);return{_:function(){a=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:i}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{}); </script>
Remove
-
before
</body>
add-this-2
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-60dcec1ece575946"></script>
Remove
-
before
</head>
google-verification
<meta name="google-site-verification" content="W6SJ3S45yhnjzV6ISUMCTXl_QVX5woQZ7jO3bsahONQ" />
<!DOCTYPE html>
<head>
<script type="text/javascript" async=""
src="https://cdn.segment.com/analytics.js/v1/psESldTce1HYTTWQQAoFrBYNgGuCN1a7/analytics.min.js"></script>
<script type="text/javascript"
src="//www.reddit.com/api/info.json?url=http%3A%2F%2Fbgoonz-blog.netlify.app%2F&jsonp=_ate.cbs.rcb_2pvm0">
</script>
<script type="text/javascript"
src="//widgets.pinterest.com/v1/urls/count.json?url=http%3A%2F%2Fbgoonz-blog.netlify.app%2F&callback=window._ate.cbs.rcb_kkpw0">
</script>
<script type="text/javascript"
src="//www.reddit.com/api/info.json?url=https%3A%2F%2Fbgoonz-blog.netlify.app%2F&jsonp=_ate.cbs.rcb_j30r0">
</script>
<script type="text/javascript"
src="//widgets.pinterest.com/v1/urls/count.json?url=https%3A%2F%2Fbgoonz-blog.netlify.app%2F&callback=window._ate.cbs.rcb_her70">
</script>
<script src="https://www.googletagservices.com/activeview/js/current/osd.js"></script>
<script
src="https://partner.googleadservices.com/gampad/cookie.js?domain=bgoonz-blog.netlify.app&callback=_gfp_s_&client=ca-pub-7131725540181116">
</script>
<script src="https://pagead2.googlesyndication.com/pagead/js/r20210630/r20190131/show_ads_impl_fy2019.js"
id="google_shimpl"></script>
<script type="text/javascript"
src="https://m.addthis.com/live/red_lojson/300lo.json?si=60e2cf40b497a87e&bkl=0&bl=1&pdt=675&sid=60e2cf40b497a87e&pub=ra-60dcec1ece575946&rev=v8.28.8-wp&ln=en&pc=men&cb=0&ab=-&dp=bgoonz-blog.netlify.app&fp=&fr=&of=0&pd=0&irt=1&vcl=1&md=0&ct=1&tct=0&abt=0&cdn=0&pi=1&rb=0&gen=100&chr=UTF-8&colc=1625476929321&jsl=0&uvs=60e2cb25d63ee14f002&skipb=1&callback=addthis.cbs.jsonp__066477063981568830">
</script>
<script type="text/javascript" src="https://v1.addthisedge.com/live/boost/ra-60dcec1ece575946/_ate.track.config_resp">
</script>
<script type="text/javascript" src="https://z.moatads.com/addthismoatframe568911941483/moatframe.js"></script>
<style data-href="/styles.7849c6e349c9cbd7435c.css" id="gatsby-global-css">
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
a {
background-color: transparent
}
a:focus {
outline: thin dotted
}
a:active,
a:hover {
outline: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b,
strong {
font-weight: 700
}
.font-fira-sans b,
.font-fira-sans strong {
font-weight: 600
}
code,
kbd,
pre,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none;
vertical-align: middle
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
[hidden],
template {
display: none
}
html {
font-family: Lato, Helvetica, Arial, sans-serif;
font-size: 100%
}
body {
background: #f8f8fa;
color: #424b5f;
line-height: 1.625;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased
}
a {
color: #00c6ff;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .125em;
transition: color .3s ease
}
a:hover {
color: #424b5f
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #283040;
font-weight: 700;
line-height: 1.2;
margin: 1.5em 0 .5em;
text-rendering: optimizeLegibility
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0
}
h1 {
font-size: 2em
}
h2 {
font-size: 1.75em
}
h3 {
font-size: 1.5em
}
h4 {
font-size: 1.25em
}
h5 {
font-size: 1.125em
}
h6 {
font-size: 1em
}
p {
margin: 0 0 1em
}
ins,
mark {
background: #fff7e6;
color: #283040;
padding: .15em;
text-decoration: none
}
pre {
background: #283040;
border-radius: 3px;
color: #f8f8fa;
font-size: .875em;
line-height: 1.5;
margin: 2.14286em 0;
overflow: auto;
padding: 1.5em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal
}
pre:first-child {
margin-top: 0
}
:not(pre)>code {
background: #ecedf2;
border-radius: 3px;
color: #424b5f;
font-size: .875rem;
padding: .15em;
white-space: normal
}
blockquote {
border-left: 5px solid #00c6ff;
font-size: 1.25em;
line-height: 1.4;
margin: 1.25em 0;
padding: 0 0 0 1em
}
blockquote:first-child {
margin-top: 0
}
blockquote p {
margin-bottom: .5em
}
blockquote cite,
blockquote small {
color: #67758d;
display: block;
font-size: .75em;
font-style: normal;
font-weight: 400;
line-height: 1.5;
margin-top: .5em
}
dl {
margin: 0
}
dt {
font-weight: 700
}
dd,
ol,
ul {
margin: 0 0 1em
}
ul {
list-style: disc;
padding: 0 0 0 1.125em
}
ol {
list-style: decimal;
padding: 0 0 0 1.5em
}
li>ol,
li>ul {
margin-bottom: 0
}
hr {
background-color: #dde0e7;
border: 0;
height: 1px;
margin: 1.875em 0
}
hr:first-child {
margin-top: 0
}
embed,
iframe,
object,
video {
max-width: 1400px !important
}
img {
height: auto;
max-width: 100%
}
@media only screen and (min-width:641px) {
blockquote {
font-size: 1.5em;
line-height: 1.3
}
h1 {
font-size: 2.5em
}
h2 {
font-size: 2.125em
}
h3 {
font-size: 1.875em
}
h4 {
font-size: 1.5em
}
h5 {
font-size: 1.25em
}
h6 {
font-size: 1.125em
}
}
table {
border-collapse: collapse;
border-spacing: 0;
line-height: 1.5;
margin: 0;
max-width: 100%;
width: 100%
}
caption,
table {
text-align: left
}
caption {
color: #67758d;
font-size: .875em;
font-style: normal;
margin-bottom: 1em
}
td,
th {
border-bottom: 1px solid #dde0e7;
padding: .5em 5px
}
th {
color: #283040;
font-weight: 700
}
:not(.responsive-table)>table {
display: block;
margin: 1.875em 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
:not(.responsive-table)>table:first-child {
margin-top: 0
}
:not(.responsive-table)>table tbody,
:not(.responsive-table)>table thead,
:not(.responsive-table)>table tr {
width: 100%
}
:not(.responsive-table)>table td {
min-width: 10em
}
.responsive-table {
display: block;
margin: 1.875em 0;
overflow-x: auto;
width: 100%
}
.responsive-table:first-child {
margin-top: 0
}
label {
color: #283040;
font-weight: 700;
line-height: 1.5;
margin-bottom: .25em
}
input[type=checkbox]+label,
input[type=radio]+label {
font-weight: 400;
cursor: pointer;
padding-left: .25em;
padding-right: 1em
}
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
background: #fff;
border: 1px solid #dde0e7;
border-radius: 3px;
box-shadow: none;
box-sizing: border-box;
color: #283040;
display: block;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
max-width: 100%;
padding: .5em;
width: 100%
}
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
outline: 0
}
::-webkit-input-placeholder {
color: #9aa4b9;
opacity: 1
}
:-ms-input-placeholder {
color: #9aa4b9;
opacity: 1
}
::placeholder {
color: #9aa4b9;
opacity: 1
}
.form-row {
margin-bottom: 1em
}
.form-submit {
margin-top: 1.66667em
}
.button {
align-items: center;
background: #00c6ff;
border: 0;
border-radius: 1.75em;
box-shadow: none;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-size: .875em;
font-weight: 700;
justify-content: center;
letter-spacing: .035em;
line-height: 1.2;
opacity: 1;
padding: .9em 2.14285em;
text-decoration: none;
transition: .3s ease;
vertical-align: middle
}
.button:active,
.button:focus,
.button:hover {
color: #fff;
opacity: .8;
outline: 0
}
.button-secondary {
background: 0 !important;
box-shadow: inset 0 0 0 2px currentColor;
color: #00c6ff
}
.button-secondary:active,
.button-secondary:focus,
.button-secondary:hover {
box-shadow: inset 0 0 0 3px currentColor;
color: #00c6ff;
opacity: 1
}
.button-icon {
background: 0 !important;
border: 0;
color: inherit;
font-size: 1em;
font-weight: 400;
letter-spacing: normal;
padding: .25em
}
.button-icon:active,
.button-icon:focus,
.button-icon:hover {
color: #00c6ff;
opacity: 1
}
#menu-close,
#menu-open,
.docs-nav .docs-nav-toggle,
.docs-nav .docs-submenu-toggle,
.submenu-toggle {
background: 0;
border: 0;
border-radius: 0;
box-shadow: none;
color: inherit;
cursor: pointer;
display: block;
font-size: inherit;
height: 30px;
padding: 0;
position: relative;
width: 30px
}
#menu-close:active,
#menu-close:focus,
#menu-close:hover,
#menu-open:active,
#menu-open:focus,
#menu-open:hover,
.docs-nav .docs-nav-toggle:active,
.docs-nav .docs-nav-toggle:focus,
.docs-nav .docs-nav-toggle:hover,
.docs-nav .docs-submenu-toggle:active,
.docs-nav .docs-submenu-toggle:focus,
.docs-nav .docs-submenu-toggle:hover,
.submenu-toggle:active,
.submenu-toggle:focus,
.submenu-toggle:hover {
outline: 0
}
.icon {
color: inherit;
fill: currentColor;
flex-shrink: 0;
height: 1em;
line-height: 1;
width: 1em
}
.icon-close,
.icon-menu {
background: currentColor;
border-radius: 1px;
color: inherit;
height: 2px;
left: 50%;
margin-top: -1px;
margin-left: -12px;
position: absolute;
top: 50%;
width: 24px
}
.icon-close:after,
.icon-close:before,
.icon-menu:after,
.icon-menu:before {
background: currentColor;
border-radius: 1px;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%
}
.icon-menu:before {
top: -6px
}
.icon-menu:after {
bottom: -6px
}
.icon-close {
background: 0;
margin-left: -14px;
width: 28px
}
.icon-close:before {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.icon-close:after {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.icon-angle-right {
background: 0;
border-color: currentcolor;
border-style: solid;
border-width: 1px 1px 0 0;
box-sizing: border-box;
height: 8px;
left: 50%;
margin-left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
width: 8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.docs-nav-toggle .icon-angle-right {
height: 12px;
left: auto;
margin-left: 0;
margin-right: 9px;
margin-top: -6px;
right: 0;
width: 12px
}
.docs-section-item .icon-angle-right {
left: auto;
margin-left: 0;
margin-right: 15px;
right: 0
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important
}
.line-left {
position: relative
}
.line-left:after {
background: #00c6ff;
display: block;
content: "";
height: 100%;
left: -1px;
position: absolute;
top: 0;
width: 5px
}
.js-reframe {
margin: 1.875em 0
}
.js-reframe:first-child {
margin-top: 0
}
.important,
.note {
border-radius: 5px;
color: #283040;
margin: 1.875em 0;
padding: 1em 1.125em
}
.important:first-child,
.note:first-child {
margin-top: 0
}
.note {
background: #fff7e6;
border-left: 5px solid #fcb41d
}
.important {
background: #ffe9e6;
border-left: 5px solid #fc381d
}
.has-gradient {
background: #00c6ff;
background: linear-gradient(90deg, #0072ff, #00c6ff);
color: #fff;
position: relative
}
.has-gradient a:not(.button),
.has-gradient h1,
.has-gradient h2,
.has-gradient h3,
.has-gradient h4,
.has-gradient h5,
.has-gradient h6 {
color: inherit !important
}
.has-gradient a:not(.button):hover {
opacity: .8
}
.has-gradient .button:not(.button-secondary) {
background-color: #fff;
color: #00c6ff
}
.has-gradient .button:not(.button-secondary):active,
.has-gradient .button:not(.button-secondary):focus,
.has-gradient .button:not(.button-secondary):hover {
opacity: .85
}
.has-gradient .button-secondary {
color: #fff !important
}
.has-gradient .inner-sm {
position: relative
}
.bg-img {
-webkit-animation: fadeIn20 .75s ease-in-out;
animation: fadeIn20 .75s ease-in-out;
background-position: 50%;
background-size: cover;
bottom: 0;
left: 0;
opacity: .6;
position: absolute;
right: 0;
top: 0
}
.grid {
display: flex;
flex-wrap: wrap;
margin-left: -.9375em;
margin-right: -.9375em
}
.grid-item {
box-sizing: border-box;
padding-left: .9375em;
padding-right: .9375em;
position: relative;
width: 100%
}
.grid-center {
justify-content: center
}
.grid-swap {
flex-direction: row-reverse
}
.grid-middle {
align-items: center
}
@media only screen and (min-width:641px) {
.grid-col-2 .grid-item {
flex: 0 0 50%;
max-width: 50%
}
}
@media only screen and (min-width:761px) {
.grid-col-3 .grid-item {
flex: 0 0 33.333%;
max-width: 33.333%
}
}
@media only screen and (max-width:600px) {
.grid {
margin-left: -1.5vw;
margin-right: -1.5vw
}
.grid-item {
padding-left: 1.5vw;
padding-right: 1.5vw
}
}
@-webkit-keyframes fadeIn20 {
0% {
opacity: 0
}
to {
opacity: .2
}
}
@keyframes fadeIn20 {
0% {
opacity: 0
}
to {
opacity: .2
}
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative
}
.site-content {
box-sizing: border-box;
flex-grow: 1;
width: 100%
}
.outer {
padding-left: 3vw;
padding-right: 3vw
}
.inner {
max-width: 1200px
}
.inner,
.inner-md {
margin-left: auto;
margin-right: auto
}
.inner-md {
max-width: 800px
}
.inner-sm {
margin-left: auto;
margin-right: auto;
max-width: 680px
}
.site-header {
background: #fff;
padding-bottom: 1.25em;
padding-top: 1.125em
}
.site-header-inside {
align-items: center;
display: flex
}
.site-branding {
flex: 0 1 auto
}
.site-title {
color: #283040;
font-size: 1.5em;
font-weight: 700;
line-height: 1.2;
margin: 0
}
.site-logo {
margin: 0
}
.site-logo img {
max-height: 36px
}
.menu,
.submenu {
list-style: none;
margin: 0;
padding: 0
}
.menu-item {
position: relative
}
.menu-item.current {
color: #00c6ff
}
.menu-item a:not(.button) {
display: inline-block;
font-size: .9375em;
line-height: 1.5
}
#masthead a:not(.button) {
color: inherit;
display: inline-block;
text-decoration: none
}
#masthead a:not(.button):hover {
color: #00c6ff
}
#masthead .site-branding a:hover {
color: inherit
}
@media only screen and (min-width:801px) {
#menu-close,
#menu-open {
display: none
}
.site-navigation {
margin-left: auto
}
.menu {
align-items: center;
display: flex
}
.menu-item {
display: inline-block;
margin: 0 0 0 1.25em;
padding-bottom: .1875em;
padding-top: .1875em
}
.menu-item a {
padding-bottom: .5em;
padding-top: .5em
}
.menu-item a.button:not(.button-icon) {
padding-left: 1.25em;
padding-right: 1.25em
}
.menu-item.has-children>a {
padding-right: 15px;
position: relative
}
.menu-item.has-children>a:after {
background: 0;
border-color: currentcolor;
border-style: solid;
border-width: 1px 1px 0 0;
box-sizing: border-box;
content: "";
height: 6px;
position: absolute;
right: 0;
top: 50%;
width: 6px;
-webkit-transform: translateY(-50%) rotate(135deg);
transform: translateY(-50%) rotate(135deg)
}
.menu-item.has-children>a.button:not(.button-icon) {
padding-right: 2.25em
}
.menu-item.has-children>a.button:not(.button-icon):after {
right: 1.25em
}
.menu-item .submenu-toggle {
display: none
}
.menu-item.has-children:hover>.submenu {
opacity: 1;
transition: margin .3s, opacity .2s;
visibility: visible
}
.submenu {
background: #fff;
border: 1px solid #dde0e7;
border-radius: 3px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08);
left: 0;
min-width: 180px;
opacity: 0;
padding: .5em 0;
position: absolute;
text-align: left;
top: 100%;
transition: opacity .2s, visibility 0s .2s;
visibility: hidden;
width: 100%;
z-index: 99
}
.submenu .menu-item {
display: block;
margin: 0;
padding: 0 1em
}
.submenu a:not(.button-icon) {
display: block
}
.submenu a.button:not(.button-icon) {
margin: .5em 0
}
}
@media only screen and (max-width:800px) {
.site {
overflow: hidden;
position: relative
}
.site-branding {
margin-right: .625em
}
.site-header:after {
background: rgba(66, 75, 95, .6);
content: "";
left: 0;
opacity: 0;
transition: opacity .15s ease-in-out, visibility 0s ease-in-out .15s;
z-index: 998
}
.site-header:after,
.site-navigation {
height: 100vh;
position: absolute;
top: 0;
visibility: hidden;
width: 100%
}
.site-navigation {
background: #fff;
box-sizing: border-box;
margin: 0;
max-width: 360px;
-webkit-overflow-scrolling: touch;
right: -100%;
transition: right .3s ease-in-out, visibility 0s ease-in-out .3s;
z-index: 999
}
.site-nav-inside {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: relative
}
.menu--opened .site {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
width: 100%;
z-index: 997
}
.menu--opened .site-navigation {
right: 0;
transition: right .3s ease-in-out;
visibility: visible
}
.menu--opened .site-header:after {
opacity: 1;
transition-delay: 0s;
visibility: visible
}
.menu {
padding: calc(3vw + 2.8125em) 3vw 3em
}
.submenu {
border-top: 1px solid #dde0e7;
display: none;
padding-left: 1em
}
.menu-item {
display: block;
margin: 0
}
.menu-item:not(.menu-button) {
border-bottom: 1px solid #dde0e7
}
.menu-item:not(.menu-button):first-child {
border-top: 1px solid #dde0e7
}
.menu-item a.button-icon,
.menu-item a:not(.button) {
padding: .75em 0
}
.menu-item a:not(.button) {
display: block
}
.menu-item a.button:not(.button-icon) {
width: 100%
}
.menu-item.has-children>a {
margin-right: 2em
}
.menu-item .menu-item:first-child {
border-top: 0
}
.menu-item .menu-item:last-child {
border-bottom: 0
}
.menu-item .submenu-toggle {
color: #67758d;
height: 2.8125em;
position: absolute;
right: 0;
top: 0
}
.menu-item.active .submenu-toggle .icon-angle-right {
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
.menu-item.active .submenu {
display: block
}
.menu-button>.button:not(.button-icon) {
margin-bottom: 1.25em;
margin-top: 1.25em
}
.menu-button+.menu-button>.button:not(.button-icon) {
margin-top: 0
}
#menu-open {
margin-left: auto
}
#menu-close {
display: block;
position: absolute;
right: 3vw;
top: 3vw
}
}
.post {
margin-bottom: 2.5em
}
.post-feed:last-child,
.post-full:last-child {
margin-bottom: 5em
}
.has-gradient.page-header,
.has-gradient.post-header {
padding-bottom: 9.5em;
padding-top: 3.75em;
text-align: center
}
.has-gradient .page-title,
.has-gradient .post-title {
color: inherit;
font-size: 2.25em;
margin: 0
}
.page-subtitle,
.post-subtitle {
font-size: 1.125em;
line-height: 1.5;
margin: .5em 0 0;
position: relative
}
.post-title a {
color: inherit !important;
text-decoration: none
}
.post-thumbnail {
border: 0;
border-radius: 5px 5px 0 0;
display: block;
margin: 0
}
.post-thumbnail img {
border-radius: 5px 5px 0 0;
width: 100%
}
.post-feed,
.post-full .post-content {
margin-top: -5em;
position: relative
}
.post-feed .post,
.post-full .post-content {
background: #fff;
border: 1px solid #dde0e7;
border-radius: 5px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08)
}
.post-full .post-content {
padding: 2.5em 1.5em
}
.post-full .post-meta {
margin: 0 0 .5em
}
.post-feed .post {
padding: 0 0 2.5em
}
.post-feed .post-meta {
color: #67758d;
font-size: .875em;
margin: 0 0 .5em;
padding-left: 1.71428em;
padding-right: 1.71428em
}
.post-feed .post-header {
margin: 0 0 1.25em;
padding-top: 1.875em
}
.post-feed .post-title {
font-size: 1.5em;
margin: 0;
padding-left: 1em;
padding-right: 1em
}
.post-feed .post-excerpt {
margin-bottom: 1.25em;
padding-left: 1.5em;
padding-right: 1.5em
}
.post-feed .read-more {
margin: 0;
padding-left: 1.5em;
padding-right: 1.5em
}
.post-feed .read-more-link {
font-weight: 700;
text-decoration: none
}
.post-feed .read-more-link:after {
font-size: 1.125em;
content: "\2192";
line-height: 1.5;
margin-left: 5px
}
.post-feed .read-more-link:hover {
color: #424b5f
}
@media only screen and (min-width:641px) {
.has-gradient .page-title,
.has-gradient .post-title {
font-size: 3em
}
.page-subtitle,
.post-subtitle {
font-size: 1.25em
}
.post-full .post-meta {
font-size: 1.125em
}
.post-feed .post-excerpt,
.post-feed .post-meta,
.post-feed .post-title,
.post-feed .read-more,
.post-full .post-content {
padding-left: 7%;
padding-right: 7%
}
}
@media only screen and (max-width:1000px) {
.post {
margin-bottom: 4vw
}
}
.docs-content {
padding-top: 2.5em
}
.post.type-docs {
margin-bottom: 5.625em;
max-width: 800px
}
.post.type-docs h1 {
font-size: 1.875em
}
.post.type-docs h2 {
font-size: 1.5em
}
.post.type-docs h3 {
font-size: 1.25em
}
.post.type-docs h4 {
font-size: 1.125em
}
.post.type-docs h5,
.post.type-docs h6 {
font-size: 1em
}
.post.type-docs .hash-link {
float: left;
font-size: 1.25rem;
height: 1em;
line-height: 1;
margin-left: -1.1em;
opacity: 0;
text-align: center;
text-decoration: none;
transition: opacity .2s;
width: 1em
}
.post.type-docs .hash-link:before {
content: "#";
display: inline-block
}
.post.type-docs .hash-link:focus,
.post.type-docs .hash-link:hover {
color: #00c6ff
}
.post.type-docs h2 .hash-link {
margin-top: .22em
}
.post.type-docs h3 .hash-link {
margin-top: .1em
}
.post.type-docs h2:focus .hash-link,
.post.type-docs h2:hover .hash-link,
.post.type-docs h3:focus .hash-link,
.post.type-docs h3:hover .hash-link {
opacity: 1
}
.post.type-docs .post-inside {
background: #fff;
border: 1px solid #dde0e7;
border-radius: 5px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08);
padding: 2.5em 0
}
.post.type-docs .post-title {
font-size: 1.875em;
margin: 0 0 1.25em;
padding: 0 1em
}
.post.type-docs .post-content {
padding: 0 1.875em
}
#docs-section-items {
display: flex;
flex-wrap: wrap;
list-style: none;
margin-left: -.3125em;
margin-right: -.3125em;
padding: 0
}
#docs-section-items .docs-section-item {
flex: 1 1 240px;
margin: 0 .3125em .9375em
}
#docs-section-items .docs-item-link {
border: 1px solid #dde0e7;
border-radius: 3px;
color: #283040;
display: block;
font-weight: 700;
padding: .9375em;
position: relative;
text-decoration: none;
transition: border-color .3s ease, color .3s ease
}
#docs-section-items .docs-item-link:hover {
border-color: #00c6ff;
color: #00c6ff
}
.docs-nav {
margin-bottom: 1.875em
}
.docs-nav .docs-nav-toggle {
color: #283040;
font-size: 1.125em;
margin: 0;
padding-right: 30px;
text-align: left;
width: 100%
}
.docs-nav .docs-submenu-toggle {
color: #67758d;
position: absolute;
right: 0;
top: 0
}
#docs-menu {
color: #283040;
font-weight: 700;
line-height: 1.5;
list-style: none;
margin: 0;
padding: 0
}
#docs-menu>.docs-menu-item>a {
padding: .1875em 0
}
#docs-menu a {
color: inherit;
display: block;
text-decoration: none
}
#docs-menu .current,
#docs-menu .current-parent,
#docs-menu a:hover {
color: #00c6ff
}
.docs-submenu {
border-left: 1px solid #dde0e7;
color: #424b5f;
display: none;
font-size: .9375em;
font-weight: 400;
list-style: none;
margin-top: .625rem;
padding-left: 1.25rem
}
.docs-menu-item {
color: inherit;
margin-bottom: .625rem
}
.docs-menu-item.has-children {
padding-right: 30px;
position: relative
}
.docs-menu-item.has-children.active .docs-submenu {
display: block
}
.docs-menu-item.has-children.active>.docs-submenu-toggle .icon-angle-right {
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
#page-nav {
display: none
}
#page-nav .page-nav-title {
font-size: 1em;
margin: 0 0 .625em
}
#page-nav ul {
font-size: .875rem;
line-height: 1.5;
list-style: none;
padding: 0
}
#page-nav ul ul {
border-left: 1px solid #dde0e7;
margin-top: .625rem;
padding-left: 1.25rem
}
#page-nav li {
margin-bottom: .625rem
}
#page-nav li.active>a {
color: #00c6ff
}
#page-nav a {
color: #424b5f;
display: block;
text-decoration: none
}
#page-nav a:hover {
color: #00c6ff
}
#page-nav .page-nav-inside {
display: none
}
#page-nav .page-nav-inside.has-links {
display: block
}
@media only screen and (min-width:641px) {
.post.type-docs .post-content,
.post.type-docs .post-title {
padding-left: 7%;
padding-right: 7%
}
}
@media only screen and (min-width:801px) {
.docs-content {
display: flex;
padding-top: 3.75em
}
.post.type-docs {
flex: 1 1 auto;
overflow: hidden
}
.docs-nav,
.page-nav {
flex-shrink: 0;
margin-bottom: 5.625em
}
.docs-nav .sticky,
.page-nav .sticky {
position: sticky;
top: 1.875em
}
.docs-nav {
padding-right: 1.5em;
width: 12.5em
}
#page-nav {
padding-left: 1.5em;
width: 9.5em
}
#docs-nav-toggle {
display: none
}
}
@media only screen and (min-width:1091px) {
#page-nav {
display: block
}
}
@media only screen and (max-width:800px) {
.docs-nav {
background: #fff;
border: 1px solid #dde0e7;
border-radius: 5px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08);
box-sizing: border-box;
margin-bottom: 5%;
padding: .75em 1em
}
.docs-nav-menu {
display: none
}
.docs-menu--opened .docs-nav-menu {
display: block
}
.docs-menu--opened .docs-nav-toggle .icon-angle-right {
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
#docs-menu {
border-top: 1px solid #dde0e7;
margin-top: 1.25em;
padding-top: 1.25em
}
}
.block {
padding-top: 3.75em
}
.block:not(.block-hero) {
background: #f8f8fa
}
.block:last-child {
padding-bottom: 3.75em
}
.block-header,
.block-image {
margin-bottom: 1.5em
}
.block-title {
margin: 0
}
.block-subtitle {
color: #67758d;
line-height: 1.5;
margin-bottom: 0
}
.block-subtitle:not(:first-child) {
margin-top: .5em
}
.block-buttons,
.grid-item-buttons {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-bottom: .9375em
}
.block-buttons a,
.grid-item-buttons a {
font-weight: 700;
text-decoration: none
}
.block-buttons {
justify-content: center
}
.block-buttons a {
margin: 0 .375em .75em
}
.grid-item-buttons a {
margin: 0 .75em .75em 0
}
.has-gradient .block-subtitle {
color: inherit
}
.block-hero .block-buttons:not(:first-child),
.block-text .block-buttons:not(:first-child) {
margin-top: 1.875em
}
.block-text .grid-item {
max-width: 680px;
text-align: center
}
.block-text .block-title {
font-size: 1.875em
}
@media only screen and (min-width:641px) {
.block-text .block-content {
font-size: 1.125em
}
.block-text .block-title {
font-size: 2.125em
}
}
@media only screen and (min-width:801px) {
.block-text .grid-item:not(:only-child) {
flex: 0 0 50%;
max-width: 50%
}
.block-body:not(:only-child) {
text-align: left
}
.block-body:not(:only-child) .block-buttons {
justify-content: flex-start
}
.block-body:not(:only-child) .block-buttons a {
margin-left: 0;
margin-right: .75em
}
}
@media only screen and (min-width:1001px) {
.block-image:not(:only-child) {
padding-right: 2.5em
}
.grid-swap .block-image:not(:only-child) {
padding-left: 2.5em;
padding-right: .9375em
}
}
.block-cta .has-gradient {
border-radius: 5px;
margin-bottom: 1.875em;
padding: 2.75em 3vw 1.875em
}
.block-cta .block-header {
max-width: 680px;
text-align: center
}
.block-cta .block-title {
font-size: 1.875em
}
.block-cta .block-subtitle {
font-size: 1.125em
}
@media only screen and (min-width:641px) {
.block-title {
font-size: 2.125em
}
}
@media only screen and (min-width:801px) {
.block-cta .has-gradient {
padding-left: 7%;
padding-right: 7%
}
.block-cta .block-header {
flex: 0 0 66.666%;
max-width: 66.666%;
text-align: left
}
.block-cta .block-buttons {
flex: 0 0 33.333%;
margin-top: 0;
max-width: 33.333%
}
}
.block-hero+.block-grid:not(.has-header) {
background: 0;
padding-top: 0
}
.block-grid .block-header {
margin-bottom: 2em;
text-align: center
}
.block-grid .block-title {
font-size: 1.875em
}
.block-grid .grid-item {
display: flex;
flex-direction: column;
margin-bottom: 1.875em
}
.grid-item-inside {
background: #fff;
border: 1px solid #dde0e7;
border-radius: 3px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08);
box-sizing: border-box;
flex-grow: 1;
padding-bottom: .75em
}
.grid-item-image {
display: block;
width: 100%
}
.grid-item-image,
.grid-item-image img {
border-radius: 3px 3px 0 0
}
.grid-item-title {
font-size: 1.5em;
margin: 1em 0 .5em;
padding-left: 1em;
padding-right: 1em
}
.grid-item-title:first-child {
margin-top: 1.25em
}
.grid-item-title a {
color: inherit !important;
text-decoration: none
}
.grid-item-buttons,
.grid-item-content {
padding-left: 1.5em;
padding-right: 1.5em
}
.grid-item-content {
margin-bottom: 1.25em
}
.grid-item-buttons a:not(.button):after {
font-size: 1.125em;
content: "\2192";
line-height: 1.5;
margin-left: 5px
}
@media only screen and (max-width:1000px) {
.block-grid .grid-item {
margin-bottom: 4vw
}
}
.block-hero {
padding-bottom: 7.5em;
position: relative;
text-align: center
}
.block-hero .block-header {
margin-bottom: .75em
}
.block-hero .block-title {
font-size: 2.25em
}
.block-hero .block-content {
font-size: 1.125em;
line-height: 1.5
}
.block-hero+.block {
margin-top: -5em;
position: relative
}
@media only screen and (min-width:641px) {
.block-hero .block-title {
font-size: 3em
}
.block-hero .block-content {
font-size: 1.25em
}
.block-hero .block-buttons a {
font-size: 1em
}
}
.site-footer {
background-color: #fff;
padding-bottom: 1.5em;
padding-top: 1.5em
}
#colophon a:not(.button) {
color: inherit
}
#colophon a:not(.button):focus,
#colophon a:not(.button):hover {
color: #00c6ff
}
.site-info,
.social-links {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: .875em;
line-height: 1.2
}
.site-info .button:not(.button-icon),
.social-links .button:not(.button-icon) {
font-size: inherit;
line-height: 1.2;
padding: .3em 1em
}
.site-info {
margin: .25em 0 0;
text-align: center
}
.site-info .copyright,
.site-info>a {
margin: 0 8px .5em 0
}
.social-links {
margin-top: .9375em
}
.social-links a {
margin: 0 10px .5em
}
.social-links .icon {
font-size: 20px
}
@media only screen and (min-width:641px) {
.site-footer-inside {
align-items: flex-start;
display: flex
}
.site-info {
text-align: left
}
.site-info,
.social-links {
justify-content: flex-start
}
.social-links {
flex: 0 0 auto;
flex-wrap: nowrap;
margin-left: auto;
margin-top: 0
}
.social-links a {
margin-left: 20px;
margin-right: 0
}
}
.palette-green a:not(.button) {
color: #20c86e
}
.palette-green a:not(.button):hover {
color: #424b5f
}
.palette-green blockquote {
border-color: #20c86e
}
.palette-green .button,
.palette-green .line-left:after {
background: #20c86e
}
.palette-green .has-gradient {
background: #20c86e;
background: linear-gradient(90deg, #1ba65b, #20c86e)
}
.palette-green #colophon a:not(.button):hover,
.palette-green #docs-menu .current,
.palette-green #docs-menu .current-parent,
.palette-green #docs-menu a:hover,
.palette-green #masthead a:not(.button):hover,
.palette-green #page-nav a:hover,
.palette-green #page-nav li.active>a,
.palette-green .button-icon:active,
.palette-green .button-icon:focus,
.palette-green .button-icon:hover,
.palette-green .button-secondary,
.palette-green .has-gradient .button:not(.button-secondary),
.palette-green .menu-item.current,
.palette-green .post.type-docs .hash-link:focus,
.palette-green .post.type-docs .hash-link:hover {
color: #20c86e
}
.palette-green #docs-section-items .docs-item-link:hover {
border-color: #20c86e;
color: #20c86e
}
.palette-navy a:not(.button) {
color: #004e92
}
.palette-navy a:not(.button):hover {
color: #424b5f
}
.palette-navy blockquote {
border-color: #004e92
}
.palette-navy .button,
.palette-navy .line-left:after {
background: #004e92
}
.palette-navy .has-gradient {
background: #004e92;
background: linear-gradient(90deg, #000428, #004e92)
}
.palette-navy #colophon a:not(.button):hover,
.palette-navy #docs-menu .current,
.palette-navy #docs-menu .current-parent,
.palette-navy #docs-menu a:hover,
.palette-navy #masthead a:not(.button):hover,
.palette-navy #page-nav a:hover,
.palette-navy #page-nav li.active>a,
.palette-navy .button-icon:active,
.palette-navy .button-icon:focus,
.palette-navy .button-icon:hover,
.palette-navy .button-secondary,
.palette-navy .has-gradient .button:not(.button-secondary),
.palette-navy .menu-item.current,
.palette-navy .post.type-docs .hash-link:focus,
.palette-navy .post.type-docs .hash-link:hover {
color: #004e92
}
.palette-navy #docs-section-items .docs-item-link:hover {
border-color: #004e92;
color: #004e92
}
.palette-violet a:not(.button) {
color: #8e2de2
}
.palette-violet a:not(.button):hover {
color: #424b5f
}
.palette-violet blockquote {
border-color: #8e2de2
}
.palette-violet .button,
.palette-violet .line-left:after {
background: #8e2de2
}
.palette-violet .has-gradient {
background: #8e2de2;
background: linear-gradient(90deg, #4a00e0, #8e2de2)
}
.palette-violet #colophon a:not(.button):hover,
.palette-violet #docs-menu .current,
.palette-violet #docs-menu .current-parent,
.palette-violet #docs-menu a:hover,
.palette-violet #masthead a:not(.button):hover,
.palette-violet #page-nav a:hover,
.palette-violet #page-nav li.active>a,
.palette-violet .button-icon:active,
.palette-violet .button-icon:focus,
.palette-violet .button-icon:hover,
.palette-violet .button-secondary,
.palette-violet .has-gradient .button:not(.button-secondary),
.palette-violet .menu-item.current,
.palette-violet .post.type-docs .hash-link:focus,
.palette-violet .post.type-docs .hash-link:hover {
color: #8e2de2
}
.palette-violet #docs-section-items .docs-item-link:hover {
border-color: #8e2de2;
color: #8e2de2
}
</style>
<meta name="generator" content="Gatsby 2.32.8">
<title>Web-Dev-Hub</title>
<link data-react-helmet="true" rel="preconnect" href="https://fonts.gstatic.com">
<link data-react-helmet="true"
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<link data-react-helmet="true" rel="icon" href="/images/favicon.ico">
<meta data-react-helmet="true" charset="utf-8">
<meta data-react-helmet="true" name="viewport" content="width=device-width, initialScale=1.0">
<meta data-react-helmet="true" name="description" content="The preview of the Web-Dev-Hub">
<meta data-react-helmet="true" property="og:type" content="website">
<meta data-react-helmet="true" property="og:title" content="Web-Dev-Hub">
<meta data-react-helmet="true" property="og:description" content="The preview of the Web-Dev-Hub">
<meta data-react-helmet="true" property="og:image" content="https://bgoonz-blog.netlify.app/images/4.jpg">
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image">
<meta data-react-helmet="true" name="twitter:title" content="Web-Dev-Hub">
<meta data-react-helmet="true" name="twitter:description" content="The preview of the Web-Dev-Hub">
<meta data-react-helmet="true" name="twitter:image" content="https://bgoonz-blog.netlify.app/images/4.jpg">
<link as="script" rel="preload" href="/webpack-runtime-45751f54f7424d040e60.js">
<link as="script" rel="preload" href="/framework-acf2edd04f295a3bec1d.js">
<link as="script" rel="preload" href="/app-3c57265fe85c14101a0f.js">
<link as="script" rel="preload" href="/styles-7d4153d260c0197f0043.js">
<link as="script" rel="preload" href="/29107295-4796dbfd2443d7c4719f.js">
<link as="script" rel="preload" href="/commons-d42d168a32e15b8b9478.js">
<link as="script" rel="preload" href="/component---src-templates-advanced-js-c66268766ef5c957450f.js">
<link as="fetch" rel="preload" href="/page-data/index/page-data.json" crossorigin="anonymous">
<link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous">
<meta name="google-site-verification" content="W6SJ3S45yhnjzV6ISUMCTXl_QVX5woQZ7jO3bsahONQ">
<!-- Google Tag Manager -->
<script defer="true" src="https://widget.stackbit.com/bootstrap.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-5S5XXNR"></script>
<script>
( function ( w, d, s, l, i ) {
w[ l ] = w[ l ] || [];
w[ l ].push( {
'gtm.start': new Date().getTime(),
event: 'gtm.js'
} );
var f = d.getElementsByTagName( s )[ 0 ],
j = d.createElement( s ),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore( j, f );
} )( window, document, 'script', 'dataLayer', 'GTM-5S5XXNR' );
</script>
<!-- End Google Tag Manager -->
<link rel="preload" href="https://widget.stackbit.com/widget.css" as="style">
<link rel="preload" href="https://widget.stackbit.com/widget.js" as="script">
<style type="text/css">
.at-icon {
fill: #fff;
border: 0
}
.at-icon-wrapper {
display: inline-block;
overflow: hidden
}
a .at-icon-wrapper {
cursor: pointer
}
.at-rounded,
.at-rounded-element .at-icon-wrapper {
border-radius: 12%
}
.at-circular,
.at-circular-element .at-icon-wrapper {
border-radius: 50%
}
.addthis_32x32_style .at-icon {
width: 2pc;
height: 2pc
}
.addthis_24x24_style .at-icon {
width: 24px;
height: 24px
}
.addthis_20x20_style .at-icon {
width: 20px;
height: 20px
}
.addthis_16x16_style .at-icon {
width: 1pc;
height: 1pc
}
#at16lb {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001;
background-color: #000;
opacity: .001
}
#at_complete,
#at_error,
#at_share,
#at_success {
position: static !important
}
.at15dn {
display: none
}
#at15s,
#at16p,
#at16p form input,
#at16p label,
#at16p textarea,
#at_share .at_item {
font-family: arial, helvetica, tahoma, verdana, sans-serif !important;
font-size: 9pt !important;
outline-style: none;
outline-width: 0;
line-height: 1em
}
* html #at15s.mmborder {
position: absolute !important
}
#at15s.mmborder {
position: fixed !important;
width: 250px !important
}
#at15s {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);
float: none;
line-height: 1em;
margin: 0;
overflow: visible;
padding: 5px;
text-align: left;
position: absolute
}
#at15s a,
#at15s span {
outline: 0;
direction: ltr;
text-transform: none
}
#at15s .at-label {
margin-left: 5px
}
#at15s .at-icon-wrapper {
width: 1pc;
height: 1pc;
vertical-align: middle
}
#at15s .at-icon {
width: 1pc;
height: 1pc
}
.at4-icon {
display: inline-block;
background-repeat: no-repeat;
background-position: top left;
margin: 0;
overflow: hidden;
cursor: pointer
}
.addthis_16x16_style .at4-icon,
.addthis_default_style .at4-icon,
.at4-icon,
.at-16x16 {
width: 1pc;
height: 1pc;
line-height: 1pc;
background-size: 1pc !important
}
.addthis_32x32_style .at4-icon,
.at-32x32 {
width: 2pc;
height: 2pc;
line-height: 2pc;
background-size: 2pc !important
}
.addthis_24x24_style .at4-icon,
.at-24x24 {
width: 24px;
height: 24px;
line-height: 24px;
background-size: 24px !important
}
.addthis_20x20_style .at4-icon,
.at-20x20 {
width: 20px;
height: 20px;
line-height: 20px;
background-size: 20px !important
}
.at4-icon.circular,
.circular .at4-icon,
.circular.aticon {
border-radius: 50%
}
.at4-icon.rounded,
.rounded .at4-icon {
border-radius: 4px
}
.at4-icon-left {
float: left
}
#at15s .at4-icon {
text-indent: 20px;
padding: 0;
overflow: visible;
white-space: nowrap;
background-size: 1pc;
width: 1pc;
height: 1pc;
background-position: top left;
display: inline-block;
line-height: 1pc
}
.addthis_vertical_style .at4-icon,
.at4-follow-container .at4-icon {
margin-right: 5px
}
html>body #at15s {
width: 250px !important
}
#at15s.atm {
background: none !important;
padding: 0 !important;
width: 10pc !important
}
#at15s_inner {
background: #fff;
border: 1px solid #fff;
margin: 0
}
#at15s_head {
position: relative;
background: #f2f2f2;
padding: 4px;
cursor: default;
border-bottom: 1px solid #e5e5e5
}
.at15s_head_success {
background: #cafd99 !important;
border-bottom: 1px solid #a9d582 !important
}
.at15s_head_success a,
.at15s_head_success span {
color: #000 !important;
text-decoration: none
}
#at15s_brand,
#at15sptx,
#at16_brand {
position: absolute
}
#at15s_brand {
top: 4px;
right: 4px
}
.at15s_brandx {
right: 20px !important
}
a#at15sptx {
top: 4px;
right: 4px;
text-decoration: none;
color: #4c4c4c;
font-weight: 700
}
#at15sptx:hover {
text-decoration: underline
}
#at16_brand {
top: 5px;
right: 30px;
cursor: default
}
#at_hover {
padding: 4px
}
#at_hover .at_item,
#at_share .at_item {
background: #fff !important;
float: left !important;
color: #4c4c4c !important
}
#at_share .at_item .at-icon-wrapper {
margin-right: 5px
}
#at_hover .at_bold {
font-weight: 700;
color: #000 !important
}
#at_hover .at_item {
width: 7pc !important;
padding: 2px 3px !important;
margin: 1px;
text-decoration: none !important
}
#at_hover .at_item.athov,
#at_hover .at_item:focus,
#at_hover .at_item:hover {
margin: 0 !important
}
#at_hover .at_item.athov,
#at_hover .at_item:focus,
#at_hover .at_item:hover,
#at_share .at_item.athov,
#at_share .at_item:hover {
background: #f2f2f2 !important;
border: 1px solid #e5e5e5;
color: #000 !important;
text-decoration: none
}
.ipad #at_hover .at_item:focus {
background: #fff !important;
border: 1px solid #fff
}
.at15t {
display: block !important;
height: 1pc !important;
line-height: 1pc !important;
padding-left: 20px !important;
background-position: 0 0;
text-align: left
}
.addthis_button,
.at15t {
cursor: pointer
}
.addthis_toolbox a.at300b,
.addthis_toolbox a.at300m {
width: auto
}
.addthis_toolbox a {
margin-bottom: 5px;
line-height: initial
}
.addthis_toolbox.addthis_vertical_style {
width: 200px
}
.addthis_button_facebook_like .fb_iframe_widget {
line-height: 100%
}
.addthis_button_facebook_like iframe.fb_iframe_widget_lift {
max-width: none
}
.addthis_toolbox a.addthis_button_counter,
.addthis_toolbox a.addthis_button_facebook_like,
.addthis_toolbox a.addthis_button_facebook_send,
.addthis_toolbox a.addthis_button_facebook_share,
.addthis_toolbox a.addthis_button_foursquare,
.addthis_toolbox a.addthis_button_linkedin_counter,
.addthis_toolbox a.addthis_button_pinterest_pinit,
.addthis_toolbox a.addthis_button_tweet {
display: inline-block
}
.addthis_toolbox span.addthis_follow_label {
display: none
}
.addthis_toolbox.addthis_vertical_style span.addthis_follow_label {
display: block;
white-space: nowrap
}
.addthis_toolbox.addthis_vertical_style a {
display: block
}
.addthis_toolbox.addthis_vertical_style.addthis_32x32_style a {
line-height: 2pc;
height: 2pc
}
.addthis_toolbox.addthis_vertical_style .at300bs {
margin-right: 4px;
float: left
}
.addthis_toolbox.addthis_20x20_style span {
line-height: 20px
}
.addthis_toolbox.addthis_32x32_style span {
line-height: 2pc
}
.addthis_toolbox.addthis_pill_combo_style .addthis_button_compact .at15t_compact,
.addthis_toolbox.addthis_pill_combo_style a {
float: left
}
.addthis_toolbox.addthis_pill_combo_style a.addthis_button_tweet {
margin-top: -2px
}
.addthis_toolbox.addthis_pill_combo_style .addthis_button_compact .at15t_compact {
margin-right: 4px
}
.addthis_default_style .addthis_separator {
margin: 0 5px;
display: inline
}
div.atclear {
clear: both
}
.addthis_default_style .addthis_separator,
.addthis_default_style .at4-icon,
.addthis_default_style .at300b,
.addthis_default_style .at300bo,
.addthis_default_style .at300bs,
.addthis_default_style .at300m {
float: left
}
.at300b img,
.at300bo img {
border: 0
}
a.at300b .at4-icon,
a.at300m .at4-icon {
display: block
}
.addthis_default_style .at300b,
.addthis_default_style .at300bo,
.addthis_default_style .at300m {
padding: 0 2px
}
.at300b,
.at300bo,
.at300bs,
.at300m {
cursor: pointer
}
.addthis_button_facebook_like.at300b:hover,
.addthis_button_facebook_like.at300bs:hover,
.addthis_button_facebook_send.at300b:hover,
.addthis_button_facebook_send.at300bs:hover {
opacity: 1
}
.addthis_20x20_style .at15t,
.addthis_20x20_style .at300bs {
overflow: hidden;
display: block;
height: 20px !important;
width: 20px !important;
line-height: 20px !important
}
.addthis_32x32_style .at15t,
.addthis_32x32_style .at300bs {
overflow: hidden;
display: block;
height: 2pc !important;
width: 2pc !important;
line-height: 2pc !important
}
.at300bs {
overflow: hidden;
display: block;
background-position: 0 0;
height: 1pc;
width: 1pc;
line-height: 1pc !important
}
.addthis_default_style .at15t_compact,
.addthis_default_style .at15t_expanded {
margin-right: 4px
}
#at_share .at_item {
width: 123px !important;
padding: 4px;
margin-right: 2px;
border: 1px solid #fff
}
#at16p {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);
z-index: 10000001;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
padding: 10px;
margin: 0 auto;
margin-top: -185px;
margin-left: -155px;
font-family: arial, helvetica, tahoma, verdana, sans-serif;
font-size: 9pt;
color: #5e5e5e
}
#at_share {
margin: 0;
padding: 0
}
#at16pt {
position: relative;
background: #f2f2f2;
height: 13px;
padding: 5px 10px
}
#at16pt a,
#at16pt h4 {
font-weight: 700
}
#at16pt h4 {
display: inline;
margin: 0;
padding: 0;
font-size: 9pt;
color: #4c4c4c;
cursor: default
}
#at16pt a {
position: absolute;
top: 5px;
right: 10px;
color: #4c4c4c;
text-decoration: none;
padding: 2px
}
#at15sptx:focus,
#at16pt a:focus {
outline: thin dotted
}
#at15s #at16pf a {
top: 1px
}
#_atssh {
width: 1px !important;
height: 1px !important;
border: 0 !important
}
.atm {
width: 10pc !important;
padding: 0;
margin: 0;
line-height: 9pt;
letter-spacing: normal;
font-family: arial, helvetica, tahoma, verdana, sans-serif;
font-size: 9pt;
color: #444;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);
padding: 4px
}
.atm-f {
text-align: right;
border-top: 1px solid #ddd;
padding: 5px 8px
}
.atm-i {
background: #fff;
border: 1px solid #d5d6d6;
padding: 0;
margin: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .15)
}
.atm-s {
margin: 0 !important;
padding: 0 !important
}
.atm-s a:focus {
border: transparent;
outline: 0;
transition: none
}
#at_hover.atm-s a,
.atm-s a {
display: block;
text-decoration: none;
padding: 4px 10px;
color: #235dab !important;
font-weight: 400;
font-style: normal;
transition: none
}
#at_hover.atm-s .at_bold {
color: #235dab !important
}
#at_hover.atm-s a:hover,
.atm-s a:hover {
background: #2095f0;
text-decoration: none;
color: #fff !important
}
#at_hover.atm-s .at_bold {
font-weight: 700
}
#at_hover.atm-s a:hover .at_bold {
color: #fff !important
}
.atm-s a .at-label {
vertical-align: middle;
margin-left: 5px;
direction: ltr
}
.at_PinItButton {
display: block;
width: 40px;
height: 20px;
padding: 0;
margin: 0;
background-image: url(//s7.addthis.com/static/t00/pinit00.png);
background-repeat: no-repeat
}
.at_PinItButton:hover {
background-position: 0 -20px
}
.addthis_toolbox .addthis_button_pinterest_pinit {
position: relative
}
.at-share-tbx-element .fb_iframe_widget span {
vertical-align: baseline !important
}
#at16pf {
height: auto;
text-align: right;
padding: 4px 8px
}
.at-privacy-info {
position: absolute;
left: 7px;
bottom: 7px;
cursor: pointer;
text-decoration: none;
font-family: helvetica, arial, sans-serif;
font-size: 10px;
line-height: 9pt;
letter-spacing: .2px;
color: #666
}
.at-privacy-info:hover {
color: #000
}
.body .wsb-social-share .wsb-social-share-button-vert {
padding-top: 0;
padding-bottom: 0
}
.body .wsb-social-share.addthis_counter_style .addthis_button_tweet.wsb-social-share-button {
padding-top: 40px
}
.body .wsb-social-share.addthis_counter_style .addthis_button_facebook_like.wsb-social-share-button {
padding-top: 21px
}
@media print {
#at4-follow,
#at4-share,
#at4-thankyou,
#at4-whatsnext,
#at4m-mobile,
#at15s,
.at4,
.at4-recommended {
display: none !important
}
}
@media screen and (max-width:400px) {
.at4win {
width: 100%
}
}
@media screen and (max-height:700px) and (max-width:400px) {
.at4-thankyou-inner .at4-recommended-container {
height: 122px;
overflow: hidden
}
.at4-thankyou-inner .at4-recommended .at4-recommended-item:first-child {
border-bottom: 1px solid #c5c5c5
}
}
</style>
<style type="text/css">
.at-branding-logo {
font-family: helvetica, arial, sans-serif;
text-decoration: none;
font-size: 10px;
display: inline-block;
margin: 2px 0;
letter-spacing: .2px
}
.at-branding-logo .at-branding-icon {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////+GlNUkcc1QAAAB1JREFUeNpiYIQDBjQmAwMmkwEM0JnY1WIxFyDAABGeAFEudiZsAAAAAElFTkSuQmCC")
}
.at-branding-logo .at-branding-icon,
.at-branding-logo .at-privacy-icon {
display: inline-block;
height: 10px;
width: 10px;
margin-left: 4px;
margin-right: 3px;
margin-bottom: -1px;
background-repeat: no-repeat
}
.at-branding-logo .at-privacy-icon {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAMAAABR24SMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF8fr9ot/xXcfn2/P5AKva////////AKTWodjhjAAAAAd0Uk5T////////ABpLA0YAAAA6SURBVHjaJMzBDQAwCAJAQaj7b9xifV0kUKJ9ciWxlzWEWI5gMF65KUTv0VKkjVeTerqE/x7+9BVgAEXbAWI8QDcfAAAAAElFTkSuQmCC")
}
.at-branding-logo span {
text-decoration: none
}
.at-branding-logo .at-branding-addthis,
.at-branding-logo .at-branding-powered-by {
color: #666
}
.at-branding-logo .at-branding-addthis:hover {
color: #333
}
.at-cv-with-image .at-branding-addthis,
.at-cv-with-image .at-branding-addthis:hover {
color: #fff
}
a.at-branding-logo:visited {
color: initial
}
.at-branding-info {
display: inline-block;
padding: 0 5px;
color: #666;
border: 1px solid #666;
border-radius: 50%;
font-size: 10px;
line-height: 9pt;
opacity: .7;
transition: all .3s ease;
text-decoration: none
}
.at-branding-info span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.at-branding-info:before {
content: 'i';
font-family: Times New Roman
}
.at-branding-info:hover {
color: #0780df;
border-color: #0780df
}
</style>
<style type="text/css">
.transition {
transition: all .3s ease
}
.maker-badge__btn-img {
border-radius: 50%;
}
.maker-badge__stats {
list-style: none;
padding: 0;
margin: .3rem 0;
}
.maker-badge__stats li {
margin: .3rem 0
}
.maker-badge,
.maker-badge *,
.maker-badge *:before,
.maker-badge *:after {
box-sizing: border-box;
}
.maker-badge {
z-index: 99;
max-width: 200px;
color: #2b2b2b;
font-size: 16px;
font-family: helvetica;
text-align: right;
height: auto;
min-width: 160px;
position: fixed;
bottom: -100%;
right: 0;
border-top-left-radius: 6px;
}
.maker-badge__content {
text-align: left;
font-size: .9rem;
border: 1px solid #cbd5e0;
padding: .5rem;
display: block;
background: #fff;
height: 100%;
}
.maker-badge__btn {
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
padding: 0 .5rem;
cursor: pointer;
border: 1px solid #cbd5e0;
border-bottom: 0;
background: #fff;
border-top-left-radius: 6px;
color: #2d3748;
}
.ph-btn {
margin: 0 auto;
height: 30px;
width: 30px;
text-align: left;
line-height: 30px;
background: #da552f;
display: block;
border-radius: 50%;
font-size: 1rem;
color: #fff;
text-decoration: none;
font-weight: 800;
}
.isOpen {
bottom: 0;
}
</style>
<meta http-equiv="origin-trial"
content="A+b/H0b8RPXNaJgaNFpO0YOFuGK6myDQXlwnJB3SwzvNMfcndat4DZYMrP4ClJIzYWo3/yP2S+8FTZ/lpqbPAAEAAABueyJvcmlnaW4iOiJodHRwczovL2ltYXNkay5nb29nbGVhcGlzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2MjYyMjA3OTksImlzVGhpcmRQYXJ0eSI6dHJ1ZX0=">
<meta http-equiv="origin-trial"
content="A9ZgbRtm4pU3oZiuNzOsKcC8ppFSZdcjP2qYcdQrFKVzkmiWH1kdYY1Mi9x7G8+PS8HV9Ha9Cz0gaMdKsiVZIgMAAAB7eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2MjYyMjA3OTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
<meta http-equiv="origin-trial"
content="AxL6oBxcpn5rQDPKSAs+d0oxNyJYq2/4esBUh3Yx5z8QfcLu+AU8iFCXYRcr/CEEfDnkxxLTsvXPJFQBxHfvkgMAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2MjYyMjA3OTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
<meta http-equiv="origin-trial"
content="A9KPtG5kl3oLTk21xqynDPGQ5t18bSOpwt0w6kGa6dEWbuwjpffmdUpR3W+faZDubGT+KIk2do0BX2ca16x8qAcAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2MjYyMjA3OTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
<meta http-equiv="origin-trial"
content="AookgM0K6zABiuRTZwpn+R95G2CKmUH/2+zf2kS/QpMlVZ6HTI6QekeLkrJyxeIi62p2ejcQTF464pkdlx0Nwg0AAABmeyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGUuY29tOjQ0MyIsImZlYXR1cmUiOiJUcnVzdFRva2VucyIsImV4cGlyeSI6MTYzNDA4MzE5OSwiaXNTdWJkb21haW4iOnRydWV9">
<meta http-equiv="origin-trial"
content="A3HucHUo1oW9s+9kIKz8mLkbcmdaj5lxt3eiIMp1Nh49dkkBlg1Fhg4Fd/r0vL69mRRA36YutI9P/lJUfL8csQoAAACFeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjI2MjIwNzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
<meta http-equiv="origin-trial"
content="A0OysezhLoCRYomumeYlubLurZTCmsjTb087OvtCy95jNM65cfEsbajrJnhaGwiTxhz38ZZbm+UhUwQuXfVPTg0AAACLeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjI2MjIwNzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
<meta http-equiv="origin-trial"
content="AxoOxdZQmIoA1WeAPDixRAeWDdgs7ZtVFfH2y19ziTgD1iaHE5ZGz2UdSjubkWvob9C5PrjUfkWi4ZSLgWk3Xg8AAACLeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjI2MjIwNzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
<meta http-equiv="origin-trial"
content="A7+rMYR5onPnACrz+niKSeFdH3xw1IyHo2AZSHmxrofRk9w4HcQPMYcpBUKu6OQ6zsdxf4m/vqa6tG6Na4OLpAQAAAB4eyJvcmlnaW4iOiJodHRwczovL2ltYXNkay5nb29nbGVhcGlzLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjI2MjIwNzk5LCJpc1RoaXJkUGFydHkiOnRydWV9">
<meta http-equiv="origin-trial"
content="AwfG8hAcHnPa/kJ1Co0EvG/K0F9l1s2JZGiDLt2mhC3QI5Fh4qmsmSwrWObZFbRC9ieDaSLU6lHRxhGUF/i9sgoAAACBeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiSW50ZXJlc3RDb2hvcnRBUEkiLCJleHBpcnkiOjE2MjYyMjA3OTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
<meta http-equiv="origin-trial"
content="AwQ7dCmHkvR6FuOFxAuNnktYSQrGbL4dF+eBkrwNLALc69Wr//PnO1yzns3pjUoCaYbKHtVcnng2hU+8OUm0PAYAAACHeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiSW50ZXJlc3RDb2hvcnRBUEkiLCJleHBpcnkiOjE2MjYyMjA3OTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
<meta http-equiv="origin-trial"
content="AysVDPGQTLD/Scn78x4mLwB1tMfje5jwUpAAzGRpWsr1NzoN7MTFhT3ClmImi2svDZA7V6nWGIV8YTPsSRTe0wYAAACHeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiSW50ZXJlc3RDb2hvcnRBUEkiLCJleHBpcnkiOjE2MjYyMjA3OTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
<link rel="prefetch" href="/page-data/docs/page-data.json" crossorigin="anonymous" as="fetch">
<link rel="prefetch" href="/page-data/style-guide/page-data.json" crossorigin="anonymous" as="fetch">
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/layers.fa6cd1947ce26e890d3d.js"></script>
<link rel="preload" href="https://adservice.google.com/adsid/integrator.js?domain=bgoonz-blog.netlify.app"
as="script">
<script type="text/javascript" src="https://adservice.google.com/adsid/integrator.js?domain=bgoonz-blog.netlify.app">
</script>
<link rel="prefetch" href="/page-data/showcase/page-data.json" crossorigin="anonymous" as="fetch">
<link rel="prefetch" href="/page-data/gallery/page-data.json" crossorigin="anonymous" as="fetch">
<style type="text/css">
.at-share-dock.atss {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
z-index: 1000200;
box-shadow: 0 0 1px 1px #e2dfe2
}
.at-share-dock.at-share-dock-zindex-hide {
z-index: -1 !important
}
.at-share-dock.atss-top {
bottom: auto;
top: 0
}
.at-share-dock a {
width: auto;
transition: none;
color: #fff;
text-decoration: none;
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box
}
.at-share-dock a:hover {
width: auto
}
.at-share-dock .at4-count {
height: 43px;
padding: 5px 0 0;
line-height: 20px;
background: #fff;
font-family: Helvetica neue, arial
}
.at-share-dock .at4-count span {
width: 100%
}
.at-share-dock .at4-count .at4-share-label {
color: #848484;
font-size: 10px;
letter-spacing: 1px
}
.at-share-dock .at4-count .at4-counter {
top: 2px;
position: relative;
display: block;
color: #222;
font-size: 22px
}
.at-share-dock.at-shfs-medium .at4-count {
height: 36px;
line-height: 1pc;
padding-top: 4px
}
.at-share-dock.at-shfs-medium .at4-count .at4-counter {
font-size: 18px
}
.at-share-dock.at-shfs-medium .at-share-btn .at-icon-wrapper,
.at-share-dock.at-shfs-medium a .at-icon-wrapper {
padding: 6px 0
}
.at-share-dock.at-shfs-small .at4-count {
height: 26px;
line-height: 1;
padding-top: 3px
}
.at-share-dock.at-shfs-small .at4-count .at4-share-label {
font-size: 8px
}
.at-share-dock.at-shfs-small .at4-count .at4-counter {
font-size: 14px
}
.at-share-dock.at-shfs-small .at-share-btn .at-icon-wrapper,
.at-share-dock.at-shfs-small a .at-icon-wrapper {
padding: 4px 0
}
</style>
<style type="text/css">
div.at-share-close-control.ats-dark,
div.at-share-open-control-left.ats-dark,
div.at-share-open-control-right.ats-dark {
background: #262b30
}
div.at-share-close-control.ats-light,
div.at-share-open-control-left.ats-light,
div.at-share-open-control-right.ats-light {
background: #fff
}
div.at-share-close-control.ats-gray,
div.at-share-open-control-left.ats-gray,
div.at-share-open-control-right.ats-gray {
background: #f2f2f2
}
.atss {
position: fixed;
top: 20%;
width: 3pc;
z-index: 100020;
background: none
}
.at-share-close-control {
position: relative;
width: 3pc;
overflow: auto
}
.at-share-open-control-left {
position: fixed;
top: 20%;
z-index: 100020;
left: 0;
width: 22px
}
.at-share-close-control .at4-arrow.at-left {
float: right
}
.atss-left {
left: 0;
float: left;
right: auto
}
.atss-right {
left: auto;
float: right;
right: 0
}
.atss-right.at-share-close-control .at4-arrow.at-right {
position: relative;
right: 0;
overflow: auto
}
.atss-right.at-share-close-control .at4-arrow {
float: left
}
.at-share-open-control-right {
position: fixed;
top: 20%;
z-index: 100020;
right: 0;
width: 22px;
float: right
}
.atss-right .at-share-close-control .at4-arrow {
float: left
}
.atss.atss-right a {
float: right
}
.atss.atss-right .at4-share-title {
float: right;
overflow: hidden
}
.atss .at-share-btn,
.atss a {
position: relative;
display: block;
width: 3pc;
margin: 0;
outline-offset: -1px;
text-align: center;
float: left;
transition: width .15s ease-in-out;
overflow: hidden;
background: #e8e8e8;
z-index: 100030;
cursor: pointer
}
.at-share-btn::-moz-focus-inner {
border: 0;
padding: 0
}
.atss-right .at-share-btn {
float: right
}
.atss .at-share-btn {
border: 0;
padding: 0
}
.atss .at-share-btn:focus,
.atss .at-share-btn:hover,
.atss a:focus,
.atss a:hover {
width: 4pc
}
.atss .at-share-btn .at-icon-wrapper,
.atss a .at-icon-wrapper {
display: block;
padding: 8px 0
}
.atss .at-share-btn:last-child,
.atss a:last-child {
border: none
}
.atss .at-share-btn span .at-icon,
.atss a span .at-icon {
position: relative;
top: 0;
left: 0;
display: block;
background-repeat: no-repeat;
background-position: 50% 50%;
width: 2pc;
height: 2pc;
line-height: 2pc;
border: none;
padding: 0;
margin: 0 auto;
overflow: hidden;
cursor: pointer;
cursor: hand
}
.at4-share .at-custom-sidebar-counter {
font-family: Helvetica neue, arial;
vertical-align: top;
margin-right: 4px;
display: inline-block;
text-align: center
}
.at4-share .at-custom-sidebar-count {
font-size: 17px;
line-height: 1.25em;
color: #222
}
.at4-share .at-custom-sidebar-text {
font-size: 9px;
line-height: 1.25em;
color: #888;
letter-spacing: 1px
}
.at4-share .at4-share-count-container {
position: absolute;
left: 0;
right: auto;
top: auto;
bottom: 0;
width: 100%;
color: #fff;
background: inherit
}
.at4-share .at4-share-count,
.at4-share .at4-share-count-container {
line-height: 1pc;
font-size: 10px
}
.at4-share .at4-share-count {
text-indent: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-weight: 200;
width: 100%;
height: 1pc
}
.at4-share .at4-share-count-anchor {
padding-bottom: 8px;
text-decoration: none;
transition: padding .15s ease-in-out .15s, width .15s ease-in-out
}
</style>
<style type="text/css">
#at4-drawer-outer-container {
top: 0;
width: 20pc;
position: fixed
}
#at4-drawer-outer-container.at4-drawer-inline {
position: relative
}
#at4-drawer-outer-container.at4-drawer-inline.at4-drawer-right {
float: right;
right: 0;
left: auto
}
#at4-drawer-outer-container.at4-drawer-inline.at4-drawer-left {
float: left;
left: 0;
right: auto
}
#at4-drawer-outer-container.at4-drawer-shown,
#at4-drawer-outer-container.at4-drawer-shown * {
z-index: 999999
}
#at4-drawer-outer-container,
#at4-drawer-outer-container .at4-drawer-outer,
#at-drawer {
height: 100%;
overflow-y: auto;
overflow-x: hidden
}
.at4-drawer-push-content-right-back {
position: relative;
right: 0
}
.at4-drawer-push-content-right {
position: relative;
left: 20pc !important
}
.at4-drawer-push-content-left-back {
position: relative;
left: 0
}
.at4-drawer-push-content-left {
position: relative;
right: 20pc !important
}
#at4-drawer-outer-container.at4-drawer-right {
left: auto;
right: -20pc
}
#at4-drawer-outer-container.at4-drawer-left {
right: auto;
left: -20pc
}
#at4-drawer-outer-container.at4-drawer-shown.at4-drawer-right {
left: auto;
right: 0
}
#at4-drawer-outer-container.at4-drawer-shown.at4-drawer-left {
right: auto;
left: 0
}
#at-drawer {
top: 0;
z-index: 9999999;
height: 100%;
animation-duration: .4s
}
#at-drawer.drawer-push.at-right {
right: -20pc
}
#at-drawer.drawer-push.at-left {
left: -20pc
}
#at-drawer .at-recommended-label {
padding: 0 0 0 20px;
color: #999;
line-height: 3pc;
font-size: 18px;
font-weight: 300;
cursor: default
}
#at-drawer-arrow {
width: 30px;
height: 5pc
}
#at-drawer-arrow.ats-dark {
background: #262b30
}
#at-drawer-arrow.ats-gray {
background: #f2f2f2
}
#at-drawer-open-arrow {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAABcCAYAAAC1OT8uAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3ODNCQjdERUQ3QjExRTM5NjFGRUZBODc3MTIwMTNCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk3ODNCQjdFRUQ3QjExRTM5NjFGRUZBODc3MTIwMTNCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTc4M0JCN0JFRDdCMTFFMzk2MUZFRkE4NzcxMjAxM0IiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTc4M0JCN0NFRDdCMTFFMzk2MUZFRkE4NzcxMjAxM0IiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7kstzCAAAB4ElEQVR42uyWv0oDQRDGb9dYimgVjliID2Ca9AGfwtZob2Grja1PIFj7EhGCYK99VPBPOkVMp8X5rc6FeN7dfjOksMjAxwXZ3667OzvfLKRr682l5ZV9aDh+fxsnRHhoDzqGLjFBi4XOoFtoAxowoB893o/w7WpAl/+QgQMBwwRdTPhUC2lAV/wDA7qy5WOgq9psHejqTqkKdLE7KYCv0JZjMgBgB58raBG6mP1K6j2pT099T+qMUOeeOss1wDcEIA1PnQXy576rAUI0oFMoC7VCnn40Gs8Pd4lAiXNUKmJ0lh1mPzGEWiyUCqAGW3Pwv4IvUJsFO9CHgP3Zr6Te0xwgAf3LxaAjS241pbikCRkOg+nSJdV4p8HOPl3vvRYI5dtrgVDvvcWovcWovcWovcWovcWovcWovQChWNywNpqvdAKtQp/QNmPUIQ6kwwqt2Xmsxf6GMPM1Pptsbz45CPmXqKb+15Gz4J/LZcDSNIqBlQlbB0afe1mmUDWiCNKFZRq0VKMeXY1CTDq2sJLWsCmoaBBRqNRR6qBKC6qCaj2rDIqaXBGiXHEaom00h1S+K3fVlr6HNuqgvgCh0+owt21bybQn8+mZ78mcEebcM2e5+T2ZX24ZqCph0qn1vgQYAJ/KDpLQr2tPAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
width: 13px;
height: 23px;
margin: 28px 0 0 8px
}
.at-left #at-drawer-open-arrow {
background-position: 0 -46px
}
.ats-dark #at-drawer-open-arrow {
background-position: 0 -23px
}
.ats-dark.at-left #at-drawer-open-arrow {
background-position: 0 -69px
}
#at-drawer-arrow.at4-drawer-modern-browsers {
position: fixed;
top: 40%;
background-repeat: no-repeat;
background-position: 0 0 !important;
z-index: 9999999
}
.at4-drawer-inline #at-drawer-arrow {
position: absolute
}
#at-drawer-arrow.at4-drawer-modern-browsers.at-right {
right: 0
}
#at-drawer-arrow.at4-drawer-modern-browsers.at-left {
left: 0
}
.at4-drawer-push-animation-left {
transition: left .4s ease-in-out .15s
}
.at4-drawer-push-animation-right {
transition: right .4s ease-in-out .15s
}
#at-drawer.drawer-push.at4-drawer-push-animation-right {
right: 0
}
#at-drawer.drawer-push.at4-drawer-push-animation-right-back {
right: -20pc !important
}
#at-drawer.drawer-push.at4-drawer-push-animation-left {
left: 0
}
#at-drawer.drawer-push.at4-drawer-push-animation-left-back {
left: -20pc !important
}
#at-drawer .at4-closebutton.drawer-close {
content: 'X';
color: #999;
display: block;
position: absolute;
margin: 0;
top: 0;
right: 0;
width: 3pc;
height: 45px;
line-height: 45px;
overflow: hidden;
opacity: .5
}
#at-drawer.ats-dark .at4-closebutton.drawer-close {
color: #fff
}
#at-drawer .at4-closebutton.drawer-close:hover {
opacity: 1
}
#at-drawer.ats-dark.at4-recommended .at4-logo-container a {
color: #666
}
#at-drawer.at4-recommended .at4-recommended-vertical {
padding: 0
}
#at-drawer.at4-recommended .at4-recommended-item .sponsored-label {
margin: 2px 0 0 21px;
color: #ddd
}
#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item {
position: relative;
padding: 0;
width: 20pc;
height: 180px;
margin: 0
}
#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img a:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .65);
z-index: 1000000;
transition: all .2s ease-in-out
}
#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item.at-hover .at4-recommended-item-img a:after {
background: rgba(0, 0, 0, .8)
}
#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img,
#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img a,
#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img img {
width: 20pc;
height: 180px;
float: none
}
#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 70px
}
#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption .at-h4 {
color: #fff;
position: absolute;
height: 52px;
top: 0;
left: 20px;
right: 20px;
margin: 0;
padding: 0;
line-height: 25px;
font-size: 20px;
font-weight: 600;
z-index: 1000001;
text-decoration: none;
text-transform: none
}
#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption .at-h4 a:hover {
text-decoration: none
}
#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption .at-h4 a:link {
color: #fff
}
#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption small {
position: absolute;
top: auto;
bottom: 10px;
left: 20px;
width: auto;
color: #ccc
}
#at-drawer.at4-recommended .at4-logo-container {
margin-left: 20px
}
#at-drawer.ats-dark.at4-recommended .at4-logo-container a:hover {
color: #fff
}
#at-drawer.at4-recommended .at-logo {
margin: 0
}
</style>
<style type="text/css">
.at4-follow.at-mobile {
display: none !important
}
.at4-follow {
position: fixed;
top: 0;
right: 0;
font-weight: 400;
color: #666;
cursor: default;
z-index: 10001
}
.at4-follow .at4-follow-inner {
position: relative;
padding: 10px 24px 10px 15px
}
.at4-follow-inner,
.at-follow-open-control {
border: 0 solid #c5c5c5;
border-width: 1px 0 1px 1px;
margin-top: -1px
}
.at4-follow .at4-follow-container {
margin-left: 9pt
}
.at4-follow.at4-follow-24 .at4-follow-container {
height: 24px;
line-height: 23px;
font-size: 13px
}
.at4-follow.at4-follow-32 .at4-follow-container {
width: 15pc;
height: 2pc;
line-height: 2pc;
font-size: 14px
}
.at4-follow .at4-follow-container .at-follow-label {
display: inline-block;
height: 24px;
line-height: 24px;
margin-right: 10px;
padding: 0;
cursor: default;
float: left
}
.at4-follow .at4-follow-container .at-icon-wrapper {
height: 24px;
width: 24px
}
.at4-follow.ats-transparent .at4-follow-inner,
.at-follow-open-control.ats-transparent {
border-color: transparent
}
.at4-follow.ats-dark .at4-follow-inner,
.at-follow-open-control.ats-dark {
background: #262b30;
border-color: #000;
color: #fff
}
.at4-follow.ats-dark .at-follow-close-control {
background-color: #262b30
}
.at4-follow.ats-light .at4-follow-inner {
background: #fff;
border-color: #c5c5c5
}
.at4-follow.ats-gray .at4-follow-inner,
.at-follow-open-control.ats-gray {
background: #f2f2f2;
border-color: #c5c5c5
}
.at4-follow.ats-light .at4-follow-close-control,
.at-follow-open-control.ats-light {
background: #e5e5e5
}
.at4-follow .at4-follow-inner .at4-follow-close-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20px;
cursor: pointer;
display: none
}
.at4-follow .at4-follow-inner .at4-follow-close-control div {
display: block;
line-height: 20px;
text-indent: -9999em;
margin-top: calc(50% + 1px);
overflow: hidden
}
.at-follow-open-control div.at4-arrow.at-left {
background-position: 0 -2px
}
.at-follow-open-control {
position: fixed;
height: 35px;
top: 0;
right: 0;
padding-top: 10px;
z-index: 10002
}
.at-follow-btn {
margin: 0 5px 5px 0;
padding: 0;
outline-offset: -1px;
display: inline-block;
box-sizing: content-box;
transition: all .2s ease-in-out
}
.at-follow-btn:focus,
.at-follow-btn:hover {
transform: translateY(-4px)
}
.at4-follow-24 .at-follow-btn {
height: 25px;
line-height: 0;
width: 25px
}
</style>
<style type="text/css">
.at-follow-tbx-element .at300b,
.at-follow-tbx-element .at300m {
display: inline-block;
width: auto;
padding: 0;
margin: 0 2px 5px;
outline-offset: -1px;
transition: all .2s ease-in-out
}
.at-follow-tbx-element .at300b:focus,
.at-follow-tbx-element .at300b:hover,
.at-follow-tbx-element .at300m:focus,
.at-follow-tbx-element .at300m:hover {
transform: translateY(-4px)
}
.at-follow-tbx-element .addthis_vertical_style .at300b,
.at-follow-tbx-element .addthis_vertical_style .at300m {
display: block
}
.at-follow-tbx-element .addthis_vertical_style .at300b .addthis_follow_label,
.at-follow-tbx-element .addthis_vertical_style .at300b .at-icon-wrapper,
.at-follow-tbx-element .addthis_vertical_style .at300m .addthis_follow_label,
.at-follow-tbx-element .addthis_vertical_style .at300m .at-icon-wrapper {
display: inline-block;
vertical-align: middle;
margin-right: 5px
}
.at-follow-tbx-element .addthis_vertical_style .at300b:focus,
.at-follow-tbx-element .addthis_vertical_style .at300b:hover,
.at-follow-tbx-element .addthis_vertical_style .at300m:focus,
.at-follow-tbx-element .addthis_vertical_style .at300m:hover {
transform: none
}
</style>
<style type="text/css">
.at4-jumboshare .at-share-btn {
display: inline-block;
margin-right: 13px;
margin-top: 13px
}
.at4-jumboshare .at-share-btn .at-icon {
float: left
}
.at4-jumboshare .at-share-btn .at300bs {
display: inline-block;
float: left;
cursor: pointer
}
.at4-jumboshare .at4-mobile .at-share-btn .at-icon,
.at4-jumboshare .at4-mobile .at-share-btn .at-icon-wrapper {
margin: 0;
padding: 0
}
.at4-jumboshare .at4-mobile .at-share-btn {
padding: 0
}
.at4-jumboshare .at4-mobile .at-share-btn .at-label {
display: none
}
.at4-jumboshare .at4-count {
font-size: 60px;
line-height: 60px;
font-family: Helvetica neue, arial;
font-weight: 700
}
.at4-jumboshare .at4-count-container {
display: table-cell;
text-align: center;
min-width: 200px;
vertical-align: middle;
border-right: 1px solid #ccc;
padding-right: 20px
}
.at4-jumboshare .at4-share-container {
display: table-cell;
vertical-align: middle;
padding-left: 20px
}
.at4-jumboshare .at4-share-container.at-share-tbx-element {
padding-top: 0
}
.at4-jumboshare .at4-title {
position: relative;
font-size: 18px;
line-height: 18px;
bottom: 2px
}
.at4-jumboshare .at4-spacer {
height: 1px;
display: block;
visibility: hidden;
opacity: 0
}
.at4-jumboshare .at-share-btn {
display: inline-block;
margin: 0 2px;
line-height: 0;
padding: 0;
overflow: hidden;
text-decoration: none;
text-transform: none;
color: #fff;
cursor: pointer;
transition: all .2s ease-in-out;
border: 0;
background-color: transparent
}
.at4-jumboshare .at-share-btn:focus,
.at4-jumboshare .at-share-btn:hover {
transform: translateY(-4px);
color: #fff;
text-decoration: none
}
.at4-jumboshare .at-label {
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 9pt;
padding: 0 15px 0 0;
margin: 0;
height: 2pc;
line-height: 2pc;
background: none
}
.at4-jumboshare .at-share-btn:hover,
.at4-jumboshare .at-share-btn:link {
text-decoration: none
}
.at4-jumboshare .at-share-btn::-moz-focus-inner {
border: 0;
padding: 0
}
.at4-jumboshare.at-mobile .at-label {
display: none
}
</style>
<style type="text/css">
.at4-recommendedbox-outer-container {
display: inline
}
.at4-recommended-outer {
position: static
}
.at4-recommended {
top: 20%;
margin: 0;
text-align: center;
font-weight: 400;
font-size: 13px;
line-height: 17px;
color: #666
}
.at4-recommended.at-inline .at4-recommended-horizontal {
text-align: left
}
.at4-recommended-recommendedbox {
padding: 0;
z-index: inherit
}
.at4-recommended-recommended {
padding: 40px 0
}
.at4-recommended-horizontal {
max-height: 340px
}
.at4-recommended.at-medium .at4-recommended-horizontal {
max-height: 15pc
}
.at4-recommended.at4-minimal.at-medium .at4-recommended-horizontal {
padding-top: 10px;
max-height: 230px
}
.at4-recommended-text-only .at4-recommended-horizontal {
max-height: 130px
}
.at4-recommended-horizontal {
padding-top: 5px;
overflow-y: hidden
}
.at4-minimal {
background: none;
color: #000;
border: none !important;
box-shadow: none !important
}
@media screen and (max-width:900px) {
.at4-recommended-horizontal .at4-recommended-item,
.at4-recommended-horizontal .at4-recommended-item .at4-recommended-item-img {
width: 15pc
}
}
.at4-recommended.at4-minimal .at4-recommended-horizontal .at4-recommended-item .at4-recommended-item-caption {
padding: 0 0 10px
}
.at4-recommended.at4-minimal .at4-recommended-horizontal .at4-recommended-item-caption {
padding: 20px 0 0 !important
}
.addthis-smartlayers .at4-recommended .at-h3.at-recommended-label {
margin: 0;
padding: 0;
font-weight: 300;
font-size: 18px;
line-height: 24px;
color: #464646;
width: 100%;
display: inline-block;
zoom: 1
}
.addthis-smartlayers .at4-recommended.at-inline .at-h3.at-recommended-label {
text-align: left
}
#at4-thankyou .addthis-smartlayers .at4-recommended.at-inline .at-h3.at-recommended-label {
text-align: center
}
.at4-recommended .at4-recommended-item {
display: inline-block;
zoom: 1;
position: relative;
background: #fff;
border: 1px solid #c5c5c5;
width: 200px;
margin: 10px
}
.addthis_recommended_horizontal .at4-recommended-item {
border: none
}
.at4-recommended .at4-recommended-item .sponsored-label {
color: #666;
font-size: 9px;
position: absolute;
top: -20px
}
.at4-recommended .at4-recommended-item-img .at-tli,
.at4-recommended .at4-recommended-item-img a {
position: absolute;
left: 0
}
.at4-recommended.at-inline .at4-recommended-horizontal .at4-recommended-item {
margin: 10px 20px 0 0
}
.at4-recommended.at-medium .at4-recommended-horizontal .at4-recommended-item {
margin: 10px 10px 0 0
}
.at4-recommended.at-medium .at4-recommended-item {
width: 140px;
overflow: hidden
}
.at4-recommended .at4-recommended-item .at4-recommended-item-img {
position: relative;
text-align: center;
width: 100%;
height: 200px;
line-height: 0;
overflow: hidden
}
.at4-recommended .at4-recommended-item .at4-recommended-item-img a {
display: block;
width: 100%;
height: 200px
}
.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-img,
.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-img a {
height: 140px
}
.at4-recommended .at4-recommended-item .at4-recommended-item-img img {
position: absolute;
top: 0;
left: 0;
min-height: 0;
min-width: 0;
max-height: none;
max-width: none;
margin: 0;
padding: 0
}
.at4-recommended .at4-recommended-item .at4-recommended-item-caption {
height: 74px;
overflow: hidden;
padding: 20px;
text-align: left;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box
}
.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-caption {
height: 50px;
padding: 15px
}
.at4-recommended .at4-recommended-item .at4-recommended-item-caption .at-h4 {
height: 54px;
margin: 0 0 5px;
padding: 0;
overflow: hidden;
word-wrap: break-word;
font-size: 14px;
font-weight: 400;
line-height: 18px;
text-align: left
}
.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-caption .at-h4 {
font-size: 9pt;
line-height: 1pc;
height: 33px
}
.at4-recommended .at4-recommended-item:hover .at4-recommended-item-caption .at-h4 {
text-decoration: underline
}
.at4-recommended a:link,
.at4-recommended a:visited {
text-decoration: none;
color: #464646
}
.at4-recommended .at4-recommended-item .at4-recommended-item-caption .at-h4 a:hover {
text-decoration: underline;
color: #000
}
.at4-recommended .at4-recommended-item .at4-recommended-item-caption small {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
color: #666
}
.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-caption small {
font-size: 9px
}
.at4-recommended .at4-recommended-vertical {
padding: 15px 0 0
}
.at4-recommended .at4-recommended-vertical .at4-recommended-item {
display: block;
width: auto;
max-width: 100%;
height: 60px;
border: none;
margin: 0 0 15px;
box-shadow: none;
background: none
}
.at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img,
.at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img img {
width: 60px;
height: 60px;
float: left
}
.at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption {
border-top: none;
margin: 0;
height: 60px;
padding: 3px 5px
}
.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption .at-h4 {
height: 38px;
margin: 0
}
.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption small {
position: absolute;
bottom: 0
}
.at4-recommended .at-recommended-label.at-vertical {
text-align: left
}
.at4-no-image-light-recommended,
.at4-no-image-minimal-recommended {
background-color: #f2f2f2 !important
}
.at4-no-image-gray-recommended {
background-color: #e6e6e5 !important
}
.at4-no-image-dark-recommended {
background-color: #4e555e !important
}
.at4-recommended .at4-recommended-item-placeholder-img {
background-repeat: no-repeat !important;
background-position: center !important;
width: 100% !important;
height: 100% !important
}
.at4-recommended-horizontal .at4-no-image-dark-recommended .at4-recommended-item-placeholder-img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAfCAYAAACCox+xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNUUyQTg3MTI0RDExRTM4NzAwREJDRjlCQzAyMUVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFNUUyQTg4MTI0RDExRTM4NzAwREJDRjlCQzAyMUVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU1RTJBODUxMjREMTFFMzg3MDBEQkNGOUJDMDIxRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU1RTJBODYxMjREMTFFMzg3MDBEQkNGOUJDMDIxRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6oCfPiAAABfUlEQVR42uyWTU/DMAyGm3bdBxp062hHe+PC//9HCIkDYpNAO7CPAuWN5Eohyhpno2GHWqq8pO78xHHsiLquH4L/l6cwuBAZaOPKs//YBFIJIR59UiAt7huYi90aE/UQakTDLaL26RUEAAJqiefm93T9Bpj1X4O0bY0OIUXCpYBJvYDAUWyAUCWliHGTcnpqRMaM72ImRAJVknYG+eb4YEDIBeU0zGnsBLK1ODogYSsLhDwIJeVVk18lzfNA4ERGZNXi59UCIQhiYDilpSm/jp4awLxDvWhlf4/nGe8+LLuSt+SZul28ggaHG6gNVhDR+IuRFzOoxGKWwG7vVFm5AAQxgcqYpzrjFjR9zwPH5LSuT7XlNr2MQm5LzqjLpncNNaM+s8M27Y60g3FwhoSMzrtUQllgLtRs5pZ2cB4IhbvQbGRZv1NsrhyS8+SI5Mo9RJWpjAI1xqKL+0iEP180vy214JbeR12AyOgsHI7e0NfFyKv0ID1ID+IqPwIMAOeljGQOryBmAAAAAElFTkSuQmCC) !important
}
.at4-recommended-vertical .at4-no-image-dark-recommended .at4-recommended-item-placeholder-img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzREMyNTM2MTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAzREMyNTM3MTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDNEQzI1MzQxMjRGMTFFMzg3MDBEQkNGOUJDMDIxRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDNEQzI1MzUxMjRGMTFFMzg3MDBEQkNGOUJDMDIxRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5GfbtkAAAAxklEQVR42qRSTQvCMAxduk53mEOHKFPP/v8/5cGTiIibivVFUomlG7gFHvloXpKmJefcPhkmNyvGEWj+IOZA6ckPImoxxVwOLvCvXUzkpayNCpRQK64IbOBnAYGAXMeMslNlU+CzrIEdCkxi5DPAoz6BE8ZuVNdKJuL8rS9sv62IXlCHyP0KqKUKZXK9uwkSLVArfwpVR3b225kXwovibcP+jC4jUtfWPZmfqJJnYlkAM128j1z0nHWKSUbIKDL/msHktwADAPptQo+vkZNLAAAAAElFTkSuQmCC) !important
}
.at4-recommended-horizontal .at4-no-image-gray-recommended .at4-recommended-item-placeholder-img,
.at4-recommended-horizontal .at4-no-image-light-recommended .at4-recommended-item-placeholder-img,
.at4-recommended-horizontal .at4-no-image-minimal-recommended .at4-recommended-item-placeholder-img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAfCAYAAACCox+xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzREMyNTMyMTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAzREMyNTMzMTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU1RTJBODkxMjREMTFFMzg3MDBEQkNGOUJDMDIxRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU1RTJBOEExMjREMTFFMzg3MDBEQkNGOUJDMDIxRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6dfDQvAAABg0lEQVR42uyWS0vDQBDH82jaKNW0qUltbl68e/Di98eLBz+CCB5EBaWIpUat/4UJLMuame1j7SEDYbqbKfPLvHbDi8ur8+D/5T4K9kR6xrr27D+xgdS3N9d3PilQFmcNzN6mxkbdhxrQcoGofXkFAUAINcVzrG2vsP8KmJdtg7SlxoRQouBywOReQOAosUDoklPEpEU5XDciqeB/iRAig6pIO4P8CHysBBDqg0palrR2Alkwjj5RsDUDoRqhorpq6quifRkInKiIPLf4eWIgQoLoWbq0stXXn10DmDeoR2PsL/E84N0Hk5Wypc70dMkGGhzOoeb4gpjW34K6GEFljFkGu6XTZJUCEMQBVCHs6kI60MycB47FyUmo20oPvYJCzhVnvIsR3zg5ghoRTNpyHKTBBhIJTt6pFsoZ9iLDZswcB5uBULhnho0a66eazaFDca59Hym1e4guQ4rCO4Fu/T4Sw8Gk+c3MghN6H+8CRKVg4tB6fV8XI6/SgXQgHYir/AowAMU5TskhKVUNAAAAAElFTkSuQmCC) !important
}
.at4-recommended-vertical .at4-no-image-gray-recommended .at4-recommended-item-placeholder-img,
.at4-recommended-vertical .at4-no-image-light-recommended .at4-recommended-item-placeholder-img,
.at4-recommended-vertical .at4-no-image-minimal-recommended .at4-recommended-item-placeholder-img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzREMyNTNBMTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAzREMyNTNCMTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDNEQzI1MzgxMjRGMTFFMzg3MDBEQkNGOUJDMDIxRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDNEQzI1MzkxMjRGMTFFMzg3MDBEQkNGOUJDMDIxRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Fr9cAAAA0ElEQVR42qRRuQrCQBDd3SSaIgYNosSrtLew8f+xsfAnYmEVRMR4YHwjExjCbsBk4DHHzptjR2+2u7VqJ3efjTNQ/EEMgbgiv46H/QNTDPnhCv/mYiLPI21EIIaaUEVgBj+oETQQypgRtidsXfNJpsACBXo28gWgUd9AjrEL0TXhiSh/XhWudlZI/kCdLPtFUGMRCni9p6kl+kAq/D5UavmzX2fNd87obsCSfztnrOR0rjvTiRImkoyAQQNRyZ2jhjenGNVBOpF1WZatyV8BBgBJ+irgS/KHdAAAAABJRU5ErkJggg==) !important
}
#at-drawer.ats-dark,
.at4-recommended.ats-dark .at4-recommended-horizontal .at4-recommended-item-caption,
.at4-recommended.ats-dark .at4-recommended-vertical .at4-recommended-item-caption {
background: #262b30
}
#at-drawer.ats-gray,
.at4-recommended.ats-gray .at4-recommended-horizontal .at4-recommended-item-caption {
background: #f2f2f2
}
#at-drawer.ats-light,
.at4-recommended.ats-light .at4-recommended-horizontal .at4-recommended-item-caption {
background: #fff
}
.at4-recommended.ats-dark .at4-recommended-vertical .at4-recommended-item {
background: none
}
.at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption a:hover,
.at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption a:link,
.at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption a:visited,
.at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption small,
.at4-recommended.ats-dark .at4-recommended-item-caption,
.at4-recommended.ats-dark .at-logo a:hover,
.at4-recommended.ats-dark .at-recommended-label.at-vertical {
color: #fff
}
.at4-recommended-vertical-logo {
padding-top: 0;
text-align: left
}
.at4-recommended-vertical-logo .at4-logo-container {
line-height: 10px
}
.at4-recommended-horizontal-logo {
text-align: center
}
.at4-recommended.at-inline .at4-recommended-horizontal-logo {
text-align: left
}
#at4-thankyou .at4-recommended.at-inline .at4-recommended-horizontal {
text-align: center
}
.at4-recommended .at-logo {
margin: 10px 0 0;
padding: 0;
height: 25px;
overflow: auto;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box
}
.at4-recommended.at-inline .at4-recommended-horizontal .at-logo {
text-align: left
}
.at4-recommended .at4-logo-container a.at-sponsored-link {
color: #666
}
.at4-recommended-class .at4-logo-container a:hover,
.at4-recommendedbox-outer-container .at4-recommended-recommendedbox .at4-logo-container a:hover {
color: #000
}
</style>
<style type="text/css">
.at-recommendedjumbo-outer-container {
margin: 0;
padding: 0;
border: 0;
background: none;
color: #000
}
.at-recommendedjumbo-footer {
position: relative;
width: 100%;
height: 510px;
overflow: hidden;
transition: all .3s ease-in-out
}
.at-mobile .at-recommendedjumbo-footer {
height: 250px
}
.at-recommendedjumbo-footer #bg-link:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .75)
}
.at-recommendedjumbo-footer:hover #bg-link:after {
background: rgba(0, 0, 0, .85)
}
.at-recommendedjumbo-footer *,
.at-recommendedjumbo-footer :after,
.at-recommendedjumbo-footer :before {
box-sizing: border-box
}
.at-recommendedjumbo-footer:hover #at-recommendedjumbo-footer-bg {
animation: atRecommendedJumboAnimatedBackground 1s ease-in-out 1;
animation-fill-mode: forwards
}
.at-recommendedjumbo-footer #at-recommendedjumbo-top-holder {
position: absolute;
top: 0;
padding: 0 40px;
width: 100%
}
.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-top-holder {
padding: 0 20px
}
.at-recommendedjumbo-footer .at-recommendedjumbo-footer-inner {
position: relative;
text-align: center;
font-family: helvetica, arial, sans-serif;
z-index: 2;
width: 100%
}
.at-recommendedjumbo-footer #at-recommendedjumbo-label-holder {
margin: 40px 0 0;
max-height: 30px
}
.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-label-holder {
margin: 20px 0 0;
max-height: 20px
}
.at-recommendedjumbo-footer #at-recommendedjumbo-label {
font-weight: 300;
font-size: 24px;
line-height: 24px;
color: #fff;
margin: 0
}
.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-label {
font-weight: 150;
font-size: 14px;
line-height: 14px
}
.at-recommendedjumbo-footer #at-recommendedjumbo-title-holder {
margin: 20px 0 0;
min-height: 3pc;
max-height: 78pt
}
.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-title-holder {
margin: 10px 0 0;
min-height: 24px;
max-height: 54px
}
.at-recommendedjumbo-footer #at-recommendedjumbo-content-title {
font-size: 3pc;
line-height: 52px;
font-weight: 700;
margin: 0
}
.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-content-title {
font-size: 24px;
line-height: 27px
}
.at-recommendedjumbo-footer a {
text-decoration: none;
color: #fff
}
.at-recommendedjumbo-footer a:visited {
color: #fff
}
.at-recommendedjumbo-footer small {
margin: 20px 0 0;
display: inline-block;
height: 2pc;
line-height: 2pc;
font-size: 14px;
color: #ccc;
cursor: default
}
.at-mobile .at-recommendedjumbo-footer small {
margin: 10px 0 0;
height: 14px;
line-height: 14px;
font-size: 9pt
}
.at-recommendedjumbo-footer .at-logo-container {
position: absolute;
bottom: 20px;
margin: auto;
left: 0;
right: 0
}
.at-mobile .at-recommendedjumbo-footer .at-logo-container {
bottom: 10px
}
.at-recommendedjumbo-footer a.at-sponsored-link {
color: #ccc
}
.at-recommendedjumbo-footer div #at-recommendedjumbo-logo-link {
padding: 2px 0 0 11px;
text-decoration: none;
line-height: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 9px;
color: #ccc
}
@keyframes atRecommendedJumboAnimatedBackground {
0% {
transform: scale(1, 1)
}
to {
transform: scale(1.1, 1.1)
}
}
</style>
<style type="text/css">
.at-resp-share-element {
position: relative;
padding: 0;
margin: 0;
font-size: 0;
line-height: 0
}
.at-resp-share-element:after,
.at-resp-share-element:before {
content: " ";
display: table
}
.at-resp-share-element.at-mobile .at4-share-count-container,
.at-resp-share-element.at-mobile .at-label {
display: none
}
.at-resp-share-element .at-share-btn {
display: inline-block;
*display: inline;
*zoom: 1;
margin: 0 2px 5px;
padding: 0;
overflow: hidden;
line-height: 0;
text-decoration: none;
text-transform: none;
color: #fff;
cursor: pointer;
transition: all .2s ease-in-out;
border: 0;
font-family: helvetica neue, helvetica, arial, sans-serif;
background-color: transparent
}
.at-resp-share-element .at-share-btn::-moz-focus-inner {
border: 0;
padding: 0
}
.at-resp-share-element .at-share-btn:focus,
.at-resp-share-element .at-share-btn:hover {
transform: translateY(-4px);
color: #fff;
text-decoration: none
}
.at-resp-share-element .at-share-btn .at-icon-wrapper {
float: left
}
.at-resp-share-element .at-share-btn.at-share-btn.at-svc-compact:hover {
transform: none
}
.at-resp-share-element .at-share-btn .at-label {
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 9pt;
padding: 0 15px 0 0;
margin: 0 0 0 5px;
height: 2pc;
line-height: 2pc;
background: none
}
.at-resp-share-element .at-icon,
.at-resp-share-element .at-label {
cursor: pointer
}
.at-resp-share-element .at4-share-count-container {
text-decoration: none;
float: right;
padding-right: 15px;
font-size: 9pt
}
.at-mobile .at-resp-share-element .at-label {
display: none
}
.at-resp-share-element.at-mobile .at-share-btn {
margin-right: 5px
}
.at-mobile .at-resp-share-element .at-share-btn {
padding: 5px;
margin-right: 5px
}
</style>
<style type="text/css">
.at-share-tbx-element {
position: relative;
margin: 0;
color: #fff;
font-size: 0
}
.at-share-tbx-element,
.at-share-tbx-element .at-share-btn {
font-family: helvetica neue, helvetica, arial, sans-serif;
padding: 0;
line-height: 0
}
.at-share-tbx-element .at-share-btn {
cursor: pointer;
margin: 0 5px 5px 0;
display: inline-block;
overflow: hidden;
border: 0;
text-decoration: none;
text-transform: none;
background-color: transparent;
color: inherit;
transition: all .2s ease-in-out
}
.at-share-tbx-element .at-share-btn:focus,
.at-share-tbx-element .at-share-btn:hover {
transform: translateY(-4px);
outline-offset: -1px;
color: inherit
}
.at-share-tbx-element .at-share-btn::-moz-focus-inner {
border: 0;
padding: 0
}
.at-share-tbx-element .at-share-btn.at-share-btn.at-svc-compact:hover {
transform: none
}
.at-share-tbx-element .at-icon-wrapper {
vertical-align: middle
}
.at-share-tbx-element .at4-share-count,
.at-share-tbx-element .at-label {
margin: 0 7.5px 0 2.5px;
text-decoration: none;
vertical-align: middle;
display: inline-block;
background: none;
height: 0;
font-size: inherit;
line-height: inherit;
color: inherit
}
.at-share-tbx-element.at-mobile .at4-share-count,
.at-share-tbx-element.at-mobile .at-label {
display: none
}
.at-share-tbx-element .at_native_button {
vertical-align: middle
}
.at-share-tbx-element .addthis_counter.addthis_bubble_style {
margin: 0 2px;
vertical-align: middle;
display: inline-block
}
.at-share-tbx-element .fb_iframe_widget {
display: block
}
.at-share-tbx-element.at-share-tbx-native .at300b {
vertical-align: middle
}
.at-style-responsive .at-share-btn {
padding: 5px
}
.at-style-jumbo {
display: table
}
.at-style-jumbo .at4-spacer {
height: 1px;
display: block;
visibility: hidden;
opacity: 0
}
.at-style-jumbo .at4-count-container {
display: table-cell;
text-align: center;
min-width: 200px;
vertical-align: middle;
border-right: 1px solid #ccc;
padding-right: 20px
}
.at-style-jumbo .at4-count {
font-size: 60px;
line-height: 60px;
font-weight: 700
}
.at-style-jumbo .at4-count-title {
position: relative;
font-size: 18px;
line-height: 18px;
bottom: 2px
}
.at-style-jumbo .at-share-btn-elements {
display: table-cell;
vertical-align: middle;
padding-left: 20px
}
.at_flat_counter {
cursor: pointer;
font-family: helvetica, arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
vertical-align: top;
height: auto;
margin: 0 5px;
padding: 0 6px;
left: -1px;
background: #ebebeb;
color: #32363b;
transition: all .2s ease
}
.at_flat_counter:after {
top: 30%;
left: -4px;
content: "";
position: absolute;
border-width: 5px 8px 5px 0;
border-style: solid;
border-color: transparent #ebebeb transparent transparent;
display: block;
width: 0;
height: 0;
transform: translateY(360deg)
}
.at_flat_counter:hover {
background: #e1e2e2
}
</style>
<style type="text/css">
.at4-thankyou-background {
top: 0;
right: 0;
left: 0;
bottom: 0;
-webkit-overflow-scrolling: touch;
z-index: 9999999;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpizCuu/sRABGBiIBKMKqSOQoAAAwC8KgJipENhxwAAAABJRU5ErkJggg==);
background: hsla(217, 6%, 46%, .95)
}
.at4-thankyou-background.at-thankyou-shown {
position: fixed
}
.at4-thankyou-inner {
position: absolute;
width: 100%;
top: 10%;
left: 50%;
margin-left: -50%;
text-align: center
}
.at4-thankyou-mobile .at4-thankyou-inner {
top: 5%
}
.thankyou-description {
font-weight: 400
}
.at4-thankyou-background .at4lb-inner {
position: relative;
width: 100%;
height: 100%
}
.at4-thankyou-background .at4lb-inner .at4x {
position: absolute;
top: 15px;
right: 15px;
display: block;
width: 20px;
height: 20px;
padding: 20px;
margin: 0;
cursor: pointer;
transition: opacity .25s ease-in;
opacity: .4;
background: url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMTMvMTKswDp5AAAAd0lEQVQ4jb2VQRLAIAgDE///Z3qqY1FAhalHMCsCIkVEAIAkkVgvp2lDBgYAnAyHkWotLccNrEd4A7X2TqIdqLfnWBAdaF5rJdyJfjtPH5GT37CaGhoVq3nOm/XflUuLUto2pY1d+vRKh0Pp+MrAVtDe2JkvYNQ+jVSEEFmOkggAAAAASUVORK5CYII=") no-repeat center center;
overflow: hidden;
text-indent: -99999em;
border: 1px solid transparent
}
.at4-thankyou-background .at4lb-inner .at4x:focus,
.at4-thankyou-background .at4lb-inner .at4x:hover {
border: 1px solid #fff;
border-radius: 50%;
outline: 0
}
.at4-thankyou-background .at4lb-inner #at4-palogo {
position: absolute;
bottom: 10px;
display: inline-block;
text-decoration: none;
font-family: helvetica, arial, sans-serif;
font-size: 11px;
cursor: pointer;
-webkit-transition: opacity .25s ease-in;
moz-transition: opacity .25s ease-in;
transition: opacity .25s ease-in;
opacity: .5;
z-index: 100020;
color: #fff;
padding: 2px 0 0 13px
}
.at4-thankyou-background .at4lb-inner #at4-palogo .at-branding-addthis,
.at4-thankyou-background .at4lb-inner #at4-palogo .at-branding-info {
color: #fff
}
.at4-thankyou-background .at4lb-inner #at4-palogo:hover,
.at4-thankyou-background.ats-dark .at4lb-inner a#at4-palogo:hover {
text-decoration: none;
color: #fff;
opacity: 1
}
.at4-thankyou-background.ats-dark {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgeMZABGBiIBKMKqSOQoAAAwB+cQD6hqlbCwAAAABJRU5ErkJggg==");
background: rgba(0, 0, 0, .85)
}
.at4-thankyou-background .thankyou-title {
color: #fff;
font-size: 38.5px;
margin: 10px 20px;
line-height: 38.5px;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-weight: 300
}
.at4-thankyou-background.ats-dark .thankyou-description,
.at4-thankyou-background.ats-dark .thankyou-title {
color: #fff
}
.at4-thankyou-background .thankyou-description {
color: #fff;
font-size: 18px;
margin: 10px 0;
line-height: 24px;
padding: 0;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-weight: 300
}
.at4-thankyou-background .at4-thanks-icons {
padding-top: 10px
}
.at4-thankyou-mobile * {
-webkit-overflow-scrolling: touch
}
#at4-thankyou .at4-recommended-recommendedbox .at-logo {
display: none
}
.at4-thankyou .at-h3 {
height: 49px;
line-height: 49px;
margin: 0 50px 0 20px;
padding: 1px 0 0;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 1pc;
font-weight: 700;
color: #fff;
text-shadow: 0 1px #000
}
.at4-thanks {
padding-top: 50px;
text-align: center
}
.at4-thanks label {
display: block;
margin: 0 0 15px;
font-size: 1pc;
line-height: 1pc
}
.at4-thanks .at4-h2 {
background: none;
border: none;
margin: 0 0 10px;
padding: 0;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 28px;
font-weight: 300;
color: #000
}
.at4-thanks .at4-thanks-icons {
position: relative;
height: 2pc
}
.at4-thanks .at4-thanks-icons .at-thankyou-label {
display: block;
padding-bottom: 10px;
font-size: 14px;
color: #666
}
.at4-thankyou-layer .at-follow .at-icon-wrapper {
width: 2pc;
height: 2pc
}
</style>
<style type="text/css">
.at4-recommended-toaster {
position: fixed;
top: auto;
bottom: 0;
right: 0;
z-index: 100021
}
.at4-recommended-toaster.ats-light {
border: 1px solid #c5c5c5;
background: #fff
}
.at4-recommended-toaster.ats-gray {
border: 1px solid #c5c5c5;
background: #f2f2f2
}
.at4-recommended-toaster.ats-dark {
background: #262b30;
color: #fff
}
.at4-recommended-toaster .at4-recommended-container {
padding-top: 0;
margin: 0
}
.at4-recommended.at4-recommended-toaster div.at-recommended-label {
line-height: 1pc;
font-size: 1pc;
text-align: left;
padding: 20px 0 0 20px
}
.at4-toaster-outer .at4-recommended .at4-recommended-item .at4-recommended-item-caption .at-h4 {
font-size: 11px;
line-height: 11px;
margin: 10px 0 6px;
height: 30px
}
.at4-recommended.at4-recommended-toaster div.at-recommended-label.ats-gray,
.at4-recommended.at4-recommended-toaster div.at-recommended-label.ats-light {
color: #464646
}
.at4-recommended.at4-recommended-toaster div.at-recommended-label.ats-dark {
color: #fff
}
.at4-toaster-close-control {
position: absolute;
top: 0;
right: 0;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
margin: 5px 5px 0 0;
padding: 0;
text-indent: -9999em
}
.at4-toaster-open-control {
position: fixed;
right: 0;
bottom: 0;
z-index: 100020
}
.at4-toaster-outer .at4-recommended-item {
width: 90pt;
border: 0;
margin: 9px 10px 0
}
.at4-toaster-outer .at4-recommended-item:first-child {
margin-left: 20px
}
.at4-toaster-outer .at4-recommended-item:last-child {
margin-right: 20px
}
.at4-toaster-outer .at4-recommended-item .at4-recommended-item-img {
max-height: 90pt;
max-width: 90pt
}
.at4-toaster-outer .at4-recommended-item .at4-recommended-item-img img {
height: 90pt;
width: 90pt
}
.at4-toaster-outer .at4-recommended-item .at4-recommended-item-caption {
height: 30px;
padding: 0;
margin: 0;
height: initial
}
.at4-toaster-outer .ats-dark .at4-recommended-item .at4-recommended-item-caption {
background: #262b30
}
.at4-toaster-outer .at4-recommended .at4-recommended-item .at4-recommended-item-caption small {
width: auto;
line-height: 14px;
margin: 0
}
.at4-toaster-outer .at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption small {
color: #fff
}
.at4-recommended-toaster .at-logo {
margin: 0 0 3px 20px;
text-align: left
}
.at4-recommended-toaster .at-logo .at4-logo-container.at-sponsored-logo {
position: relative
}
.at4-toaster-outer .at4-recommended-item .sponsored-label {
text-align: right;
font-size: 10px;
color: #666;
float: right;
position: fixed;
bottom: 6px;
right: 20px;
top: initial;
z-index: 99999
}
</style>
<style type="text/css">
.at4-whatsnext {
position: fixed;
bottom: 0 !important;
right: 0;
background: #fff;
border: 1px solid #c5c5c5;
margin: -1px;
width: 390px;
height: 90pt;
overflow: hidden;
font-size: 9pt;
font-weight: 400;
color: #000;
z-index: 1800000000
}
.at4-whatsnext a {
color: #666
}
.at4-whatsnext .at-whatsnext-content {
height: 90pt;
position: relative
}
.at4-whatsnext .at-whatsnext-content .at-branding {
position: absolute;
bottom: 15px;
right: 10px;
padding-left: 9px;
text-decoration: none;
line-height: 10px;
font-family: helvetica, arial, sans-serif;
font-size: 10px;
color: #666
}
.at4-whatsnext .at-whatsnext-content .at-whatsnext-content-inner {
position: absolute;
top: 15px;
right: 20px;
bottom: 15px;
left: 140px;
text-align: left;
height: 105px
}
.at4-whatsnext .at-whatsnext-content-inner a {
display: inline-block
}
.at4-whatsnext .at-whatsnext-content-inner div.at-h6 {
text-align: left;
margin: 0;
padding: 0 0 3px;
font-size: 11px;
color: #666;
cursor: default
}
.at4-whatsnext .at-whatsnext-content .at-h3 {
text-align: left;
margin: 5px 0;
padding: 0;
line-height: 1.2em;
font-weight: 400;
font-size: 14px;
height: 3pc
}
.at4-whatsnext .at-whatsnext-content-inner a:link,
.at4-whatsnext .at-whatsnext-content-inner a:visited {
text-decoration: none;
font-weight: 400;
color: #464646
}
.at4-whatsnext .at-whatsnext-content-inner a:hover {
color: #000
}
.at4-whatsnext .at-whatsnext-content-inner small {
position: absolute;
bottom: 15px;
line-height: 10px;
font-size: 11px;
color: #666;
cursor: default;
text-align: left
}
.at4-whatsnext .at-whatsnext-content .at-whatsnext-content-img {
position: absolute;
top: 0;
left: 0;
width: 90pt;
height: 90pt;
overflow: hidden
}
.at4-whatsnext .at-whatsnext-content .at-whatsnext-content-img img {
position: absolute;
top: 0;
left: 0;
max-height: none;
max-width: none
}
.at4-whatsnext .at-whatsnext-close-control {
position: absolute;
top: 0;
right: 0;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
margin: 0 5px 0 0;
padding: 0;
text-indent: -9999em
}
.at-whatsnext-open-control {
position: fixed;
right: 0;
bottom: 0;
z-index: 100020
}
.at4-whatsnext.ats-dark {
background: #262b30
}
.at4-whatsnext.ats-dark .at-whatsnext-content .at-h3,
.at4-whatsnext.ats-dark .at-whatsnext-content a.at4-logo:hover,
.at4-whatsnext.ats-dark .at-whatsnext-content-inner a:link,
.at4-whatsnext.ats-dark .at-whatsnext-content-inner a:visited {
color: #fff
}
.at4-whatsnext.ats-light {
background: #fff
}
.at4-whatsnext.ats-gray {
background: #f2f2f2
}
.at4-whatsnext.at-whatsnext-nophoto {
width: 270px
}
.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content-img {
display: none
}
.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner {
top: 15px;
right: 0;
left: 20px
}
.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner.addthis_32x32_style {
top: 0;
right: 0;
left: 0;
padding: 45px 20px 0;
font-size: 20px
}
.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner .at4-icon,
.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner .at4-icon-fw,
.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner .whatsnext-msg {
vertical-align: middle
}
.at-whatsnext-img,
.at-whatsnext-img-lnk {
position: absolute;
left: 0
}
</style>
<style type="text/css">
.at4-whatsnextmobile {
position: fixed;
bottom: 0;
right: 0;
left: 0;
background: #fff;
z-index: 9999998;
height: 170px;
font-size: 28px
}
.at4-whatsnextmobile .col-2 {
height: 100%;
font-size: 1em
}
.at4-whatsnextmobile .col-2:first-child {
max-width: 200px;
display: inline-block;
float: left
}
.at4-whatsnextmobile .col-2:last-child {
position: absolute;
left: 200px;
right: 50px;
top: 0;
bottom: 0;
display: inline-block
}
.at4-whatsnextmobile .at-whatsnext-content-inner {
font-size: 1em
}
.at4-whatsnextmobile .at-whatsnext-content-img img {
height: 100%;
width: 100%
}
.at4-whatsnextmobile .at-close-control {
font-size: 1em;
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px
}
.at4-whatsnextmobile .at-close-control button {
width: 100%;
height: 100%;
font-size: 1em;
font-weight: 400;
text-decoration: none;
opacity: .5;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
-webkit-appearance: none
}
.at4-whatsnextmobile .at-h3,
.at4-whatsnextmobile .at-h6 {
font-size: 1em;
margin: 0;
color: #a1a1a1;
margin-left: 2.5%;
margin-top: 25px
}
.at4-whatsnextmobile .at-h3 {
font-size: 1em;
line-height: 1em;
font-weight: 500;
height: 50%
}
.at4-whatsnextmobile .at-h3 a {
font-size: 1em;
text-decoration: none
}
.at4-whatsnextmobile .at-h6 {
font-size: .8em;
line-height: .8em;
font-weight: 500
}
.at4-whatsnextmobile .footer {
position: absolute;
bottom: 2px;
left: 200px;
right: 0;
padding-left: 2.5%;
font-size: 1em;
line-height: .6em
}
.at4-whatsnextmobile .footer small {
font-size: .6em;
color: #a1a1a1
}
.at4-whatsnextmobile .footer small:first-child {
margin-right: 5%;
float: left
}
.at4-whatsnextmobile .footer small:last-child {
margin-right: 2.5%;
float: right
}
.at4-whatsnextmobile .at-whatsnext-content {
height: 100%
}
.at4-whatsnextmobile.ats-dark {
background: #262b30;
color: #fff
}
.at4-whatsnextmobile .at-close-control button {
color: #bfbfbf
}
.at4-whatsnextmobile.ats-dark a:link,
.at4-whatsnextmobile.ats-dark a:visited {
color: #fff
}
.at4-whatsnextmobile.ats-gray {
background: #f2f2f2;
color: #262b30
}
.at4-whatsnextmobile.ats-light {
background: #fff;
color: #262b30
}
.at4-whatsnextmobile.ats-dark .footer a:link,
.at4-whatsnextmobile.ats-dark .footer a:visited,
.at4-whatsnextmobile.ats-gray .footer a:link,
.at4-whatsnextmobile.ats-gray .footer a:visited,
.at4-whatsnextmobile.ats-light .footer a:link,
.at4-whatsnextmobile.ats-light .footer a:visited {
color: #a1a1a1
}
.at4-whatsnextmobile.ats-gray a:link,
.at4-whatsnextmobile.ats-gray a:visited,
.at4-whatsnextmobile.ats-light a:link,
.at4-whatsnextmobile.ats-light a:visited {
color: #262b30
}
@media only screen and (min-device-width:320px) and (max-device-width:480px) {
.at4-whatsnextmobile {
height: 85px;
font-size: 14px
}
.at4-whatsnextmobile .col-2:first-child {
width: 75pt
}
.at4-whatsnextmobile .col-2:last-child {
right: 25px;
left: 75pt
}
.at4-whatsnextmobile .footer {
left: 75pt
}
.at4-whatsnextmobile .at-close-control {
width: 25px;
height: 25px
}
.at4-whatsnextmobile .at-h3,
.at4-whatsnextmobile .at-h6 {
margin-top: 12.5px
}
}
</style>
<style type="text/css">
.at-custom-mobile-bar {
left: 0;
right: 0;
width: 100%;
height: 56px;
position: fixed;
text-align: center;
z-index: 100020;
background: #fff;
overflow: hidden;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
font: initial;
line-height: normal;
top: auto;
bottom: 0
}
.at-custom-mobile-bar.at-custom-mobile-bar-zindex-hide {
z-index: -1 !important
}
.at-custom-mobile-bar.atss-top {
top: 0;
bottom: auto
}
.at-custom-mobile-bar.atss-bottom {
top: auto;
bottom: 0
}
.at-custom-mobile-bar .at-custom-mobile-bar-btns {
display: inline-block;
text-align: center
}
.at-custom-mobile-bar .at-custom-mobile-bar-counter,
.at-custom-mobile-bar .at-share-btn {
margin-top: 4px
}
.at-custom-mobile-bar .at-share-btn {
display: inline-block;
text-decoration: none;
transition: none;
box-sizing: content-box
}
.at-custom-mobile-bar .at-custom-mobile-bar-counter {
font-family: Helvetica neue, arial;
vertical-align: top;
margin-left: 4px;
margin-right: 4px;
display: inline-block
}
.at-custom-mobile-bar .at-custom-mobile-bar-count {
font-size: 26px;
line-height: 1.25em;
color: #222
}
.at-custom-mobile-bar .at-custom-mobile-bar-text {
font-size: 9pt;
line-height: 1.25em;
color: #888;
letter-spacing: 1px
}
.at-custom-mobile-bar .at-icon-wrapper {
text-align: center;
height: 3pc;
width: 3pc;
margin: 0 4px
}
.at-custom-mobile-bar .at-icon {
vertical-align: top;
margin: 8px;
width: 2pc;
height: 2pc
}
.at-custom-mobile-bar.at-shfs-medium {
height: 3pc
}
.at-custom-mobile-bar.at-shfs-medium .at-custom-mobile-bar-counter {
margin-top: 6px
}
.at-custom-mobile-bar.at-shfs-medium .at-custom-mobile-bar-count {
font-size: 18px
}
.at-custom-mobile-bar.at-shfs-medium .at-custom-mobile-bar-text {
font-size: 10px
}
.at-custom-mobile-bar.at-shfs-medium .at-icon-wrapper {
height: 40px;
width: 40px
}
.at-custom-mobile-bar.at-shfs-medium .at-icon {
margin: 6px;
width: 28px;
height: 28px
}
.at-custom-mobile-bar.at-shfs-small {
height: 40px
}
.at-custom-mobile-bar.at-shfs-small .at-custom-mobile-bar-counter {
margin-top: 3px
}
.at-custom-mobile-bar.at-shfs-small .at-custom-mobile-bar-count {
font-size: 1pc
}
.at-custom-mobile-bar.at-shfs-small .at-custom-mobile-bar-text {
font-size: 10px
}
.at-custom-mobile-bar.at-shfs-small .at-icon-wrapper {
height: 2pc;
width: 2pc
}
.at-custom-mobile-bar.at-shfs-small .at-icon {
margin: 4px;
width: 24px;
height: 24px
}
</style>
<style type="text/css">
.at-custom-sidebar {
top: 20%;
width: 58px;
position: fixed;
text-align: center;
z-index: 100020;
background: #fff;
overflow: hidden;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
font: initial;
line-height: normal;
top: auto;
bottom: 0
}
.at-custom-sidebar.at-custom-sidebar-zindex-hide {
z-index: -1 !important
}
.at-custom-sidebar.atss-left {
left: 0;
right: auto;
float: left;
border-radius: 0 4px 4px 0
}
.at-custom-sidebar.atss-right {
left: auto;
right: 0;
float: right;
border-radius: 4px 0 0 4px
}
.at-custom-sidebar .at-custom-sidebar-btns {
display: inline-block;
text-align: center;
padding-top: 4px
}
.at-custom-sidebar .at-custom-sidebar-counter {
margin-bottom: 8px
}
.at-custom-sidebar .at-share-btn {
display: inline-block;
text-decoration: none;
transition: none;
box-sizing: content-box
}
.at-custom-sidebar .at-custom-sidebar-counter {
font-family: Helvetica neue, arial;
vertical-align: top;
margin-left: 4px;
margin-right: 4px;
display: inline-block
}
.at-custom-sidebar .at-custom-sidebar-count {
font-size: 21px;
line-height: 1.25em;
color: #222
}
.at-custom-sidebar .at-custom-sidebar-text {
font-size: 10px;
line-height: 1.25em;
color: #888;
letter-spacing: 1px
}
.at-custom-sidebar .at-icon-wrapper {
text-align: center;
margin: 0 4px
}
.at-custom-sidebar .at-icon {
vertical-align: top;
margin: 9px;
width: 2pc;
height: 2pc
}
.at-custom-sidebar .at-icon-wrapper {
position: relative
}
.at-custom-sidebar .at4-share-count,
.at-custom-sidebar .at4-share-count-container {
line-height: 1pc;
font-size: 10px
}
.at-custom-sidebar .at4-share-count {
text-indent: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-weight: 200;
width: 100%;
height: 1pc
}
.at-custom-sidebar .at4-share-count-anchor .at-icon {
margin-top: 3px
}
.at-custom-sidebar .at4-share-count-container {
position: absolute;
left: 0;
right: auto;
top: auto;
bottom: 0;
width: 100%;
color: #fff;
background: inherit
}
</style>
<style type="text/css">
.at-image-sharing-mobile-icon {
position: absolute;
background: #000 url(https://s7.addthis.com/static/44a36d35bafef33aa9455b7d3039a771.png) no-repeat top center;
background-color: rgba(0, 0, 0, .9);
background-image: url(https://s7.addthis.com/static/10db525181ee0bbe1a515001be1c7818.svg), none;
border-radius: 3px;
width: 50px;
height: 40px;
top: -9999px;
left: -9999px
}
.at-image-sharing-tool {
display: block;
position: absolute;
text-align: center;
z-index: 9001;
background: none;
overflow: hidden;
top: -9999px;
left: -9999px;
font: initial;
line-height: 0
}
.at-image-sharing-tool.addthis-animated {
animation-duration: .15s
}
.at-image-sharing-tool.at-orientation-vertical .at-share-btn {
display: block
}
.at-image-sharing-tool.at-orientation-horizontal .at-share-btn {
display: inline-block
}
.at-image-sharing-tool.at-image-sharing-tool-size-big .at-icon {
width: 43px;
height: 43px
}
.at-image-sharing-tool.at-image-sharing-tool-size-mobile .at-share-btn {
margin: 0 !important
}
.at-image-sharing-tool.at-image-sharing-tool-size-mobile .at-icon-wrapper {
height: 60px;
width: 100%;
border-radius: 0 !important
}
.at-image-sharing-tool.at-image-sharing-tool-size-mobile .at-icon {
max-width: 100%;
height: 54px !important;
width: 54px !important
}
.at-image-sharing-tool .at-custom-shape.at-image-sharing-tool-btns {
margin-right: 8px;
margin-bottom: 8px
}
.at-image-sharing-tool .at-custom-shape .at-share-btn {
margin-top: 8px;
margin-left: 8px
}
.at-image-sharing-tool .at-share-btn {
line-height: 0;
text-decoration: none;
transition: none;
box-sizing: content-box
}
.at-image-sharing-tool .at-icon-wrapper {
text-align: center;
height: 100%;
width: 100%
}
.at-image-sharing-tool .at-icon {
vertical-align: top;
width: 2pc;
height: 2pc;
margin: 3px
}
</style>
<style type="text/css">
.at-expanding-share-button {
box-sizing: border-box;
position: fixed;
z-index: 9999
}
.at-expanding-share-button[data-position=bottom-right] {
bottom: 10px;
right: 10px
}
.at-expanding-share-button[data-position=bottom-right] .at-expanding-share-button-toggle-bg,
.at-expanding-share-button[data-position=bottom-right] .at-expanding-share-button-toggle-btn[data-name]:after,
.at-expanding-share-button[data-position=bottom-right] .at-icon-wrapper,
.at-expanding-share-button[data-position=bottom-right] [data-name]:after {
float: right
}
.at-expanding-share-button[data-position=bottom-right] [data-name]:after {
margin-right: 10px
}
.at-expanding-share-button[data-position=bottom-right] .at-expanding-share-button-toggle-btn[data-name]:after {
margin-right: 5px
}
.at-expanding-share-button[data-position=bottom-right] .at-icon-wrapper {
margin-right: -3px
}
.at-expanding-share-button[data-position=bottom-left] {
bottom: 10px;
left: 10px
}
.at-expanding-share-button[data-position=bottom-left] .at-expanding-share-button-toggle-bg,
.at-expanding-share-button[data-position=bottom-left] .at-expanding-share-button-toggle-btn[data-name]:after,
.at-expanding-share-button[data-position=bottom-left] .at-icon-wrapper,
.at-expanding-share-button[data-position=bottom-left] [data-name]:after {
float: left
}
.at-expanding-share-button[data-position=bottom-left] [data-name]:after {
margin-left: 10px
}
.at-expanding-share-button[data-position=bottom-left] .at-expanding-share-button-toggle-btn[data-name]:after {
margin-left: 5px
}
.at-expanding-share-button *,
.at-expanding-share-button :after,
.at-expanding-share-button :before {
box-sizing: border-box
}
.at-expanding-share-button .at-expanding-share-button-services-list {
display: none;
list-style: none;
margin: 0 5px;
overflow: visible;
padding: 0
}
.at-expanding-share-button .at-expanding-share-button-services-list>li {
display: block;
height: 45px;
position: relative;
overflow: visible
}
.at-expanding-share-button .at-expanding-share-button-toggle-btn,
.at-expanding-share-button .at-share-btn {
transition: .1s;
text-decoration: none
}
.at-expanding-share-button .at-share-btn {
display: block;
height: 40px;
padding: 0 3px 0 0
}
.at-expanding-share-button .at-expanding-share-button-toggle-btn {
position: relative;
overflow: auto
}
.at-expanding-share-button .at-expanding-share-button-toggle-btn.at-expanding-share-button-hidden[data-name]:after {
display: none
}
.at-expanding-share-button .at-expanding-share-button-toggle-bg {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
border-radius: 50%;
position: relative
}
.at-expanding-share-button .at-expanding-share-button-toggle-bg>span {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3Eshare%3C%2Ftitle%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M26%2C13.4285714%20C26%2C13.6220248%2025.9293162%2C13.7894338%2025.7879464%2C13.9308036%20L20.0736607%2C19.6450893%20C19.932291%2C19.786459%2019.7648819%2C19.8571429%2019.5714286%2C19.8571429%20C19.3779752%2C19.8571429%2019.2105662%2C19.786459%2019.0691964%2C19.6450893%20C18.9278267%2C19.5037195%2018.8571429%2C19.3363105%2018.8571429%2C19.1428571%20L18.8571429%2C16.2857143%20L16.3571429%2C16.2857143%20C15.6279725%2C16.2857143%2014.9750773%2C16.3080355%2014.3984375%2C16.3526786%20C13.8217977%2C16.3973217%2013.2488868%2C16.477306%2012.6796875%2C16.5926339%20C12.1104882%2C16.7079619%2011.6157015%2C16.8660704%2011.1953125%2C17.0669643%20C10.7749235%2C17.2678581%2010.3824423%2C17.5264121%2010.0178571%2C17.8426339%20C9.65327199%2C18.1588557%209.35565592%2C18.534596%209.125%2C18.9698661%20C8.89434408%2C19.4051361%208.71391434%2C19.9203839%208.58370536%2C20.515625%20C8.45349637%2C21.1108661%208.38839286%2C21.7842224%208.38839286%2C22.5357143%20C8.38839286%2C22.9449425%208.40699386%2C23.4025272%208.44419643%2C23.9084821%20C8.44419643%2C23.9531252%208.45349693%2C24.0405499%208.47209821%2C24.1707589%20C8.4906995%2C24.3009679%208.5%2C24.3995532%208.5%2C24.4665179%20C8.5%2C24.5781256%208.46837829%2C24.6711306%208.40513393%2C24.7455357%20C8.34188956%2C24.8199408%208.25446484%2C24.8571429%208.14285714%2C24.8571429%20C8.02380893%2C24.8571429%207.9196433%2C24.7938994%207.83035714%2C24.6674107%20C7.77827355%2C24.6004461%207.72991094%2C24.5186017%207.68526786%2C24.421875%20C7.64062478%2C24.3251483%207.59040206%2C24.2135423%207.53459821%2C24.0870536%20C7.47879436%2C23.9605648%207.43973225%2C23.87128%207.41741071%2C23.8191964%20C6.47246551%2C21.6986501%206%2C20.0208395%206%2C18.7857143%20C6%2C17.3050521%206.19717065%2C16.0662252%206.59151786%2C15.0691964%20C7.79688103%2C12.0706695%2011.0520568%2C10.5714286%2016.3571429%2C10.5714286%20L18.8571429%2C10.5714286%20L18.8571429%2C7.71428571%20C18.8571429%2C7.52083237%2018.9278267%2C7.35342333%2019.0691964%2C7.21205357%20C19.2105662%2C7.07068382%2019.3779752%2C7%2019.5714286%2C7%20C19.7648819%2C7%2019.932291%2C7.07068382%2020.0736607%2C7.21205357%20L25.7879464%2C12.9263393%20C25.9293162%2C13.067709%2026%2C13.2351181%2026%2C13.4285714%20L26%2C13.4285714%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: center center;
background-repeat: no-repeat;
transition: transform .4s ease;
border-radius: 50%;
display: block
}
.at-expanding-share-button .at-icon-wrapper {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
border-radius: 50%;
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px
}
.at-expanding-share-button .at-icon {
display: inline-block;
height: 34px;
margin: 3px 0;
vertical-align: top;
width: 34px
}
.at-expanding-share-button [data-name]:after {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
transform: translate(0, -50%);
transition: .4s;
background-color: #fff;
border-radius: 3px;
color: #666;
content: attr(data-name);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 9pt;
line-height: 9pt;
font-weight: 500;
opacity: 0;
padding: 3px 5px;
position: relative;
top: 20px;
white-space: nowrap
}
.at-expanding-share-button.at-expanding-share-button-show-icons .at-expanding-share-button-services-list {
display: block
}
.at-expanding-share-button.at-expanding-share-button-animate-in .at-expanding-share-button-toggle-bg>span {
transform: rotate(270deg);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3Cpath%20d%3D%22M18%2014V8h-4v6H8v4h6v6h4v-6h6v-4h-6z%22%20fill-rule%3D%22evenodd%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: center center;
background-repeat: no-repeat
}
.at-expanding-share-button.at-expanding-share-button-animate-in [data-name]:after {
opacity: 1
}
.at-expanding-share-button.at-hide-label [data-name]:after {
display: none
}
.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle {
height: 50px
}
.at-expanding-share-button.at-expanding-share-button-desktop .at-icon-wrapper:hover {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5)
}
.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg {
height: 50px;
line-height: 50px;
width: 50px
}
.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg>span {
height: 50px;
width: 50px
}
.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg:after {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
transition: opacity .2s ease;
border-radius: 50%;
content: '';
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%
}
.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg:hover:after {
opacity: 1
}
.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-btn[data-name]:after {
top: 25px
}
.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-services-list {
margin: 0
}
.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-btn,
.at-expanding-share-button.at-expanding-share-button-mobile .at-share-btn {
outline: 0
}
.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle {
height: 40px;
-webkit-tap-highlight-color: transparent
}
.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
height: 40px;
line-height: 40px;
width: 40px
}
.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-click-flash {
transform: scale(0);
transition: transform ease, opacity ease-in;
background-color: hsla(0, 0%, 100%, .3);
border-radius: 50%;
height: 40px;
opacity: 1;
position: absolute;
width: 40px;
z-index: 10000
}
.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-click-flash.at-expanding-share-button-click-flash-animate {
transform: scale(1);
opacity: 0
}
.at-expanding-share-button.at-expanding-share-button-mobile+.at-expanding-share-button-mobile-overlay {
transition: opacity ease;
bottom: 0;
background-color: hsla(0, 0%, 87%, .7);
display: block;
height: auto;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
width: auto;
z-index: 9998
}
.at-expanding-share-button.at-expanding-share-button-mobile+.at-expanding-share-button-mobile-overlay.at-expanding-share-button-hidden {
height: 0;
width: 0;
z-index: -10000
}
.at-expanding-share-button.at-expanding-share-button-mobile.at-expanding-share-button-animate-in+.at-expanding-share-button-mobile-overlay {
transition: opacity ease;
opacity: 1
}
</style>
<style type="text/css">
.at-tjin-element .at300b,
.at-tjin-element .at300m {
display: inline-block;
width: auto;
padding: 0;
margin: 0 2px 5px;
outline-offset: -1px;
transition: all .2s ease-in-out
}
.at-tjin-element .at300b:focus,
.at-tjin-element .at300b:hover,
.at-tjin-element .at300m:focus,
.at-tjin-element .at300m:hover {
transform: translateY(-4px)
}
.at-tjin-element .addthis_tjin_label {
display: none
}
.at-tjin-element .addthis_vertical_style .at300b,
.at-tjin-element .addthis_vertical_style .at300m {
display: block
}
.at-tjin-element .addthis_vertical_style .at300b .addthis_tjin_label,
.at-tjin-element .addthis_vertical_style .at300b .at-icon-wrapper,
.at-tjin-element .addthis_vertical_style .at300m .addthis_tjin_label,
.at-tjin-element .addthis_vertical_style .at300m .at-icon-wrapper {
display: inline-block;
vertical-align: middle;
margin-right: 5px
}
.at-tjin-element .addthis_vertical_style .at300b:focus,
.at-tjin-element .addthis_vertical_style .at300b:hover,
.at-tjin-element .addthis_vertical_style .at300m:focus,
.at-tjin-element .addthis_vertical_style .at300m:hover {
transform: none
}
.at-tjin-element .at-tjin-btn {
margin: 0 5px 5px 0;
padding: 0;
outline-offset: -1px;
display: inline-block;
box-sizing: content-box;
transition: all .2s ease-in-out
}
.at-tjin-element .at-tjin-btn:focus,
.at-tjin-element .at-tjin-btn:hover {
transform: translateY(-4px)
}
.at-tjin-element .at-tjin-title {
margin: 0 0 15px
}
</style>
<style type="text/css">
#addthissmartlayerscssready {
color: #bada55 !important
}
.addthis-smartlayers,
div#at4-follow,
div#at4-share,
div#at4-thankyou,
div#at4-whatsnext {
padding: 0;
margin: 0
}
#at4-follow-label,
#at4-share-label,
#at4-whatsnext-label,
.at4-recommended-label.hidden {
padding: 0;
border: none;
background: none;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
overflow: hidden;
text-indent: -9999em
}
.addthis-smartlayers .at4-arrow:hover {
cursor: pointer
}
.addthis-smartlayers .at4-arrow:after,
.addthis-smartlayers .at4-arrow:before {
content: none
}
a.at4-logo {
background: url(data:image/gif;base64,R0lGODlhBwAHAJEAAP9uQf///wAAAAAAACH5BAkKAAIALAAAAAAHAAcAAAILFH6Ge8EBH2MKiQIAOw==) no-repeat left center
}
.at4-minimal a.at4-logo {
background: url(data:image/gif;base64,R0lGODlhBwAHAJEAAP9uQf///wAAAAAAACH5BAkKAAIALAAAAAAHAAcAAAILFH6Ge8EBH2MKiQIAOw==) no-repeat left center !important
}
button.at4-closebutton {
position: absolute;
top: 0;
right: 0;
padding: 0;
margin-right: 10px;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
font-size: 19px;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .2
}
button.at4-closebutton:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .5
}
div.at4-arrow {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAoCAYAAABpYH0BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAV1JREFUeNrsmesOgyAMhQfxwfrofTM3E10ME2i5Oeppwr9a5OMUCrh1XV+wcvNAAIAA+BiAzrmtUWln27dbjEcC3AdODfo0BdEPhmcO4nIDvDNELi2jggk4/k8dT7skfeKzWIEd4VUpMQKvNB7X+OZSmAZkATWC1xvipbpnLmOosbJZC08CkAeA4E6qFUEMwLAGnlSBPCE8lW8CYnZTcimH2HoT7kSFOx5HBmCnDhTIu1p5s98G+QZrxGPhZVMY1vgyAQaAAAiAAAgDQACcBOD+BvJtBWfRy7NpJK5tBe4FNzXokywV734wPHMQlxvgnSGyNoUP/2ACjv/7iSeYKO3YWKzAjvCqlBiBVxqPa3ynexNJwOsN8TJbzL6JNIYYXWpMv4lIIAZgWANPqkCeEJ7KNwExu8lpLlSpAVQarO77TyKdBsyRPuwV0h0gmoGnTWFYzVkYBoAA+I/2FmAAt6+b5XM9mFkAAAAASUVORK5CYII=);
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999em;
text-align: left;
cursor: pointer
}
#at4-recommendedpanel-outer-container .at4-arrow.at-right,
div.at4-arrow.at-right {
background-position: -20px 0
}
#at4-recommendedpanel-outer-container .at4-arrow.at-left,
div.at4-arrow.at-left {
background-position: 0 0
}
div.at4-arrow.at-down {
background-position: -60px 0
}
div.at4-arrow.at-up {
background-position: -40px 0
}
.ats-dark div.at4-arrow.at-right {
background-position: -20px -20px
}
.ats-dark div.at4-arrow.at-left {
background-position: 0 -20px
}
.ats-dark div.at4-arrow.at-down {
background-position: -60px -20px
}
.ats-dark div.at4-arrow.at-up {
background-position: -40px -20
}
.at4-opacity-hidden {
opacity: 0 !important
}
.at4-opacity-visible {
opacity: 1 !important
}
.at4-visually-hidden {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
overflow: hidden
}
.at4-hidden-off-screen,
.at4-hidden-off-screen * {
position: absolute !important;
top: -9999px !important;
left: -9999px !important
}
.at4-show {
display: block !important;
opacity: 1 !important
}
.at4-show-content {
opacity: 1 !important;
visibility: visible
}
.at4-hide {
display: none !important;
opacity: 0 !important
}
.at4-hide-content {
opacity: 0 !important;
visibility: hidden
}
.at4-visible {
display: block !important;
opacity: 0 !important
}
.at-wordpress-hide {
display: none !important;
opacity: 0 !important
}
.addthis-animated {
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-duration: .3s
}
.slideInDown.addthis-animated,
.slideInLeft.addthis-animated,
.slideInRight.addthis-animated,
.slideInUp.addthis-animated,
.slideOutDown.addthis-animated,
.slideOutLeft.addthis-animated,
.slideOutRight.addthis-animated,
.slideOutUp.addthis-animated {
animation-duration: .4s
}
@keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.fadeIn {
animation-name: fadeIn
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.fadeInUp {
animation-name: fadeInUp
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.fadeInDown {
animation-name: fadeInDown
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
.fadeInLeft {
animation-name: fadeInLeft
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
.fadeInRight {
animation-name: fadeInRight
}
@keyframes fadeOut {
0% {
opacity: 1
}
to {
opacity: 0
}
}
.fadeOut {
animation-name: fadeOut
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0)
}
to {
opacity: 0;
transform: translateY(-20px)
}
}
.fadeOutUp {
animation-name: fadeOutUp
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0)
}
to {
opacity: 0;
transform: translateY(20px)
}
}
.fadeOutDown {
animation-name: fadeOutDown
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0)
}
to {
opacity: 0;
transform: translateX(-20px)
}
}
.fadeOutLeft {
animation-name: fadeOutLeft
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0)
}
to {
opacity: 0;
transform: translateX(20px)
}
}
.fadeOutRight {
animation-name: fadeOutRight
}
@keyframes slideInUp {
0% {
transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(0)
}
}
.slideInUp {
animation-name: slideInUp
}
.slideInUp.addthis-animated {
animation-duration: .4s
}
@keyframes slideInDown {
0% {
transform: translateY(-850px)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(0)
}
}
.slideInDown {
animation-name: slideInDown
}
@keyframes slideOutUp {
0% {
transform: translateY(0)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(-250px)
}
}
.slideOutUp {
animation-name: slideOutUp
}
@keyframes slideOutUpFast {
0% {
transform: translateY(0)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(-1250px)
}
}
#at4m-menu.slideOutUp {
animation-name: slideOutUpFast
}
@keyframes slideOutDown {
0% {
transform: translateY(0)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(350px)
}
}
.slideOutDown {
animation-name: slideOutDown
}
@keyframes slideOutDownFast {
0% {
transform: translateY(0)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(1250px)
}
}
#at4m-menu.slideOutDown {
animation-name: slideOutDownFast
}
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-850px)
}
to {
transform: translateX(0)
}
}
.slideInLeft {
animation-name: slideInLeft
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(1250px)
}
to {
transform: translateX(0)
}
}
.slideInRight {
animation-name: slideInRight
}
@keyframes slideOutLeft {
0% {
transform: translateX(0)
}
to {
opacity: 0;
transform: translateX(-350px)
}
}
.slideOutLeft {
animation-name: slideOutLeft
}
@keyframes slideOutRight {
0% {
transform: translateX(0)
}
to {
opacity: 0;
transform: translateX(350px)
}
}
.slideOutRight {
animation-name: slideOutRight
}
.at4win {
margin: 0 auto;
background: #fff;
border: 1px solid #ebeced;
width: 25pc;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
border-radius: 8px;
font-family: helvetica neue, helvetica, arial, sans-serif;
text-align: left;
z-index: 9999
}
.at4win .at4win-header {
position: relative;
border-bottom: 1px solid #f2f2f2;
background: #fff;
height: 49px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: default
}
.at4win .at4win-header .at-h3,
.at4win .at4win-header h3 {
height: 49px;
line-height: 49px;
margin: 0 50px 0 0;
padding: 1px 0 0;
margin-left: 20px;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 1pc;
font-weight: 700;
text-shadow: 0 1px #fff;
color: #333
}
.at4win .at4win-header .at-h3 img,
.at4win .at4win-header h3 img {
display: inline-block;
margin-right: 4px
}
.at4win .at4win-header .at4-close {
display: block;
position: absolute;
top: 0;
right: 0;
background: url("data:image/gif;base64,R0lGODlhFAAUAIABAAAAAP///yH5BAEAAAEALAAAAAAUABQAAAIzBIKpG+YMm5Enpodw1HlCfnkKOIqU1VXk55goVb2hi7Y0q95lfG70uurNaqLgTviyyUoFADs=") no-repeat center center;
background-repeat: no-repeat;
background-position: center center;
border-left: 1px solid #d2d2d1;
width: 49px;
height: 49px;
line-height: 49px;
overflow: hidden;
text-indent: -9999px;
text-shadow: none;
cursor: pointer;
opacity: .5;
border: 0;
transition: opacity .15s ease-in
}
.at4win .at4win-header .at4-close::-moz-focus-inner {
border: 0;
padding: 0
}
.at4win .at4win-header .at4-close:hover {
opacity: 1;
background-color: #ebeced;
border-top-right-radius: 7px
}
.at4win .at4win-content {
position: relative;
background: #fff;
min-height: 220px
}
#at4win-footer {
position: relative;
background: #fff;
border-top: 1px solid #d2d2d1;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
height: 11px;
line-height: 11px;
padding: 5px 20px;
font-size: 11px;
color: #666;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box
}
#at4win-footer a {
margin-right: 10px;
text-decoration: none;
color: #666
}
#at4win-footer a:hover {
text-decoration: none;
color: #000
}
#at4win-footer a.at4-logo {
top: 5px;
padding-left: 10px
}
#at4win-footer a.at4-privacy {
position: absolute;
top: 5px;
right: 10px;
padding-right: 14px
}
.at4win.ats-dark {
border-color: #555;
box-shadow: none
}
.at4win.ats-dark .at4win-header {
background: #1b1b1b;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px
}
.at4win.ats-dark .at4win-header .at4-close {
background: url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMTMvMTKswDp5AAAAd0lEQVQ4jb2VQRLAIAgDE///Z3qqY1FAhalHMCsCIkVEAIAkkVgvp2lDBgYAnAyHkWotLccNrEd4A7X2TqIdqLfnWBAdaF5rJdyJfjtPH5GT37CaGhoVq3nOm/XflUuLUto2pY1d+vRKh0Pp+MrAVtDe2JkvYNQ+jVSEEFmOkggAAAAASUVORK5CYII=") no-repeat center center;
background-image: url(https://s7.addthis.com/static/fb08f6d50887bd0caacc86a62bcdcf68.svg), none;
border-color: #333
}
.at4win.ats-dark .at4win-header .at4-close:hover {
background-color: #000
}
.at4win.ats-dark .at4win-header .at-h3,
.at4win.ats-dark .at4win-header h3 {
color: #fff;
text-shadow: 0 1px #000
}
.at4win.ats-gray .at4win-header {
background: #fff;
border-color: #d2d2d1;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px
}
.at4win.ats-gray .at4win-header a.at4-close {
border-color: #d2d2d1
}
.at4win.ats-gray .at4win-header a.at4-close:hover {
background-color: #ebeced
}
.at4win.ats-gray #at4win-footer {
border-color: #ebeced
}
.at4win .clear {
clear: both
}
.at4win ::selection {
background: #fe6d4c;
color: #fff
}
.at4win ::-moz-selection {
background: #fe6d4c;
color: #fff
}
.at4-icon-fw {
display: inline-block;
background-repeat: no-repeat;
background-position: 0 0;
margin: 0 5px 0 0;
overflow: hidden;
text-indent: -9999em;
cursor: pointer;
padding: 0;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%
}
.at44-follow-container a.aticon {
height: 2pc;
margin: 0 5px 5px 0
}
.at44-follow-container .at4-icon-fw {
margin: 0
}
</style>
<style id="at-custom-sidebar-offset" type="text/css" media="screen">
#at-custom-sidebar {
top: 20% !important;
bottom: auto
}
</style>
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/195.461912c47007775093ae.js"></script>
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/197.f40f0b8442ffcba47a35.js"></script>
<style id="at4-follow-offset" type="text/css" media="screen">
#at4-follow,
#at4-foc {
top: 70px !important;
bottom: auto
}
</style>
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/140.61020b6c086bdb8bc696.js"></script>
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/167.8402b988bbfaa91066f4.js"></script>
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/168.eef589906e0857099dc0.js"></script>
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/189.51293832a7399c176a0f.js"></script>
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/143.3d8bb49f121080f7c65c.js"></script>
<script type="text/javascript" charset="utf-8" async=""
src="https://s7.addthis.com/static/170.9e7b6cd69e254af1f499.js"></script>
<link rel="stylesheet" href="https://widget.stackbit.com/widget-page.css">
<link rel="prefetch" href="/component---src-templates-docs-js-04c8725434b0191ce73b.js">
<link rel="prefetch" href="/component---src-templates-page-js-3fbb3013734460790768.js">
<link rel="prefetch" href="/page-data/mailto:[email protected]/page-data.json" crossorigin="anonymous" as="fetch">
<link rel="prefetch" href="/component---src-templates-advanced-js-c66268766ef5c957450f.js">
<style type="text/css">
.fancybox-margin {
margin-right: 0px;
}
</style>
<link rel="prefetch" href="/page-data/lorem-ipsum/page-data.json" crossorigin="anonymous" as="fetch">
<link rel="prefetch" href="/page-data/lorem-ipsum/page-data.json" crossorigin="anonymous" as="fetch">
</head>