body.site { background-color: #eee; }
body.site.blog { background-color: #fff; }
.site .page { color: #333; }

.site.banner header { background-color: transparent; }

.site.home .page { overflow: hidden; }
.site.home section.hero .content a { margin-top: 16px; margin-bottom: 10px; }
.site.home section.hero .content p a { color: #8ef; text-decoration: none; }
.site.home section.hero .content p a:hover { text-decoration: underline; }
.site.home .hero .content a.button { margin: 16px 2.5%; cursor: pointer; }
.site.home .hero .content a.signup { background-color: #51a351;  }
.site.home .hero .content a.signup:hover { background-color: #5bb75b; }
.site.home .hero .content a.contact { background-color: #f8f8f8; color: #4D9B4D; }
.site.home .hero .content a.contact:hover { background-color: #fff; color: #51a351; }

.site.home section { display: flex; align-items: flex-start; }
.site section { position: relative; max-width: 1024px; margin: 0 auto; padding: 24px 20px; zoom: 1; font-family: 'Lato', sans-serif; }
.site.home section { max-width: 1440px; }

.site .secondary section { padding: 48px 20px 0 20px; }
.site .secondary section:last-child { padding-bottom: 48px; }
.site section .left { float: left; width: 33.333%; }
.site section .left.half { width: 48%; }
.site section .left.fouty { width: 38%; }
.site section .left.sixty { width: 58%; }
.site section .left img { width: 100%; }
.site section .right { float: right; width: 66.666%; }
.site section .right.half { width: 48%; }
.site .img img { display: block; width: 100%; position: relative; }
.site .img.right { float: right; width: 31.333%; margin-left: 4%; }
.site .img.right.fourty { width: 38%; }
.site .img.right.half { width: 48%; }
.site .img.left { float: left; width: 31.333%; margin-right: 4%; }
.site .img.left.fourty { width: 38%; }
.site .img.left.half { width: 48%; }
.site .img .caption { display: none; }
.site .play { display: block; position: relative; cursor: pointer; }
.site .play::before { display: block; z-index: 1; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0); transition: background-color .2s; }
.site .play:hover::before { background-color: rgba(0, 0, 0, 0.2); }
.site .play::after { display: block; z-index: 1; content: ""; position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 32px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); background: #07b url(../img/play-arrow.png) 26px center no-repeat; opacity: 0.8; transition: background-color .2s, opacity .2s; }
.site .play:hover::after { background-color: #0bf; opacity: 1; }
/*.site section.feature p,
.site section.feature li,
.site section.hero p,
.site section.hero li { font-size: 26px; line-height: 34px; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }*/
.site section a { color: #08c; text-decoration: none; }
.site section a:hover { text-decoration: underline; }

.site section.feature.first { margin-top: 4%; }
.site section.feature.centertext:not(.first) { margin-top: auto; }
.site section.feature.centertext .left.half:not(.img),
.site section.feature.centertext .right.half:not(.img) { margin-top: 60px; }
.site section.feature.centertext .img { margin-top: 0px; }

.site section.feature.centertext.tight { margin-top: 1%; padding-top: 0px; }
.site section.feature.centertext.tight .left.half:not(.img),
.site section.feature.centertext.tight .right.half:not(.img) { margin-top: 0px; }
.site section.feature.centertext.tight p:not(.title) { font-size: 20px; }
.site section.feature.centertext.tight h1 { margin-bottom: 12px; }

.site section.feature.centertext.tight img { width: 100%; }

.site section.flex { display: flex; flex-direction: row; align-items: center; }
.site section.flex .container { display: flex; flex-direction: row; align-items: center; }

.site section.feature.noshadow h1,
.site section.feature.noshadow p { text-shadow: none; }

.site section.feature.centertext.tight .left.half:not(.img),
.site section.feature.centertext.tight .right.half:not(.img) { margin-right: 8%; width: 58%; }

.site section.feature.centertext.tight .left.half.img,
.site section.feature.centertext.tight .right.half.img { width: 38%; margin-top: 0px; }

.site section.feature.centertext p.title { color: #07b; font-weight: bold; margin-bottom: 0px; }
.site section.feature.centertext p.subtitle { color: #666; font-size: 20px; }

.site section a[href="#"] { text-decoration-style: dashed; }

.site section p,
.site section li { font-size: 20px; line-height: 130%; }
.site section h1,
.site section p { margin: 0 0 12px 0; }
.site section h1,
.site section strong { color: #07b; text-shadow: 0 0 16px rgba(0, 119, 187, 0.2); }
.site section ul { margin: 0; padding: 0 0 0 26px; }
.site section ul li { margin: 0 0 12px 0; }
.site section .container { max-width: 1024px; margin: 0 auto; }
.site.home section .container { max-width: 1440px; }

.site section.rich-text.image.left img { float: left; margin-right: 4%; }
.site section.rich-text.image.right img { float: right; width: 33.33%; margin-left: 4%; }
.site section.rich-text.image.right-50 img { float: right; width: 50%; margin-left: 4%; }
.site section.rich-text.image .content { float: none; }

.site section.rich-text p img { max-width: 100%; }

.site.banner section.rich-text.image img { position: relative; z-index: 2; }

.site.team section { padding-top: 0; }
.site.team section.feature { padding-bottom: 0; }
.site.team section.rich-text.image.left img { width: 205px; margin-right: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
.site.team section.rich-text.image.left .content { margin-left: 240px; }
.site.team section.rich-text.image.left .content h2 { margin: 0; font-family: 'Lato', sans-serif; font-weight: normal; color: #07b; }
.site.team section.rich-text.image.left .content h3 { margin: 4px 0 8px 0; font-family: 'Lato', sans-serif; font-weight: normal; color: #888; }

.site.careers section.feature h2 { font-family: 'Lato', sans-serif; font-weight: normal; color: #07b; margin-top: 2em; }
.site.careers section.form .container { margin: 0px; }

.site div.hero.texture { display: none; }
.site section.hero { position: relative; top: -56px; margin-bottom: -56px; max-width: none; padding: 96px 4% 32px 4%; background-color: #09d; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); overflow: hidden; }
.site section.hero::before { content: ""; position: absolute; top: -1730px; left: -924px; right: 0; bottom: 0; width: 2048px; height: 2048px; background: url(../img/circle.svg) center center / 2048px no-repeat; opacity: 0.05; z-index: 2; transform: rotate(354deg);  }
.site section.hero::after { content: ""; position: absolute; top: 116px; left: -120px; right: 0; bottom: 0; width: 2048px; height: 2048px; background: url(../img/circle.svg) center center / 2048px no-repeat; opacity: 0.06; z-index: 1; }
.site.article.blog section.hero::before { z-index: 10; }
.site.article.blog section.hero::after { z-index: 11; }
/*.site section.hero { min-height: 500px; }
.site.formhero div.hero.texture { height: 550px; }
.site.formhero section.hero { min-height: 500px; }*/
/*.site.blog.article div.hero.texture::before { z-index: 10; }
.site.blog.article div.hero.texture::after { z-index: 10; }*/
/*.site:not(.home):not(.formhero) section.hero { min-height: 250px; }*/

.site.home section.feature { width: 80%; margin-top: 64px; }
.site.home section.feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; bottom: 0; }
.site.home section.feature > div { position: relative; z-index: 2; }
/*.site section.feature { transform: rotate3d(208,27,24,-47deg); }*/
.site.home section.feature .img { position: relative; overflow: hidden; border-radius: 12px; padding-top: 33%; box-shadow: 0 0 8px rgba(0,0,0,0.1); }
.site.home section.feature .img img { position: absolute; transition: all 1s; }
.site.home section.feature ul { padding: 0; list-style: none; }
.site.home section.feature li { position: relative; margin: 0; padding: 1.5% 0 1.5% 6%; line-height: 100%; cursor: pointer; }
.site.home section.feature li:hover { color: #07b; }
.site.home section.feature li::before { content: ""; display: block; position: absolute; width: 0; height: 0; left: .3em; top: 34%; border-color: transparent #000; border-style: solid; border-width: 0.35em 0 0.35em 0.45em;  }
.site.home section.feature li.active { color: #07b; text-shadow: 0 0 32px rgba(0, 119, 187, 1); }
.site.home section.feature li:hover::before,
.site.home section.feature li.active::before { border-color: transparent #07b; }

.site.home .feature.ops.organize .img img { width: 440%; transform: translateX(-2.5%) translateY(-56%) rotate3d(600,54,-64,44deg); }
.site.home .feature.ops.collaborate .img img { width: 650%; transform: translateX(-63%) translateY(-42%) rotate3d(453,98,132,-37deg); }
.site.home .feature.ops.enforce .img img { width: 560%; transform: translateX(-49.5%) translateY(-83%) rotate3d(453,98,105,39deg); }
.site.home .feature.ops.track .img img { width: 520%; transform: translateX(-81%) translateY(-48%) rotate3d(360,-78,120,21deg); }
.site.home .feature.ops.control .img img { width: 375%; transform: translateX(-8.5%) translateY(-98.5%) rotate3d(453,98,105,-20deg); }
.site.home .feature.ops.report .img img { width: 450%; transform: translateX(-73.15%) translateY(-99%) rotate3d(500,98,132,35deg); }

.site.home .feature.sites { margin-top: 4%; margin-bottom: 4%; padding-top: 4%; }
.site.home .feature.sites::before { background-color: rgba(0,153,221,0.05); transform: scale(4,1) translateX(-2%) translateY(4%) rotate3d(1,1,1,8deg); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) }
.site.home .feature.sites.author .img img { width: 400%; transform: translateX(-17.3%) translateY(-47.5%) rotate3d(1,0,1,8deg); }
.site.home .feature.sites.variants .img img { width: 400%; transform: translateX(-69.5%) translateY(-27.5%) rotate3d(453,98,132,-27deg); }
.site.home .feature.sites.workflow .img img { width: 450%; transform: translateX(-20.2%) translateY(-28%) rotate3d(674,5,-141,-37deg); }
.site.home .feature.sites.validation .img img { width: 420%; transform: translateX(-67.6%) translateY(-69%) rotate3d(1,0,1,7deg); }
.site.home .feature.sites.template .img img { width: 480%; transform: translateX(-68.5%) translateY(-93%) rotate3d(470,60,120,-17deg); }
.site.home .feature.sites.api .img img { width: 270%; transform: translateX(-3.25%) translateY(-85.5%) rotate3d(1,1,-1,-7deg); }

.site.home .feature.apps.model .img img { width: 320%; transform: translateX(-12.5%) translateY(-38.6%) rotate3d(6,8,2,-18deg); }
.site.home .feature.apps.admin .img img { width: 350%; transform: translateX(-3.75%) translateY(-62.5%) rotate3d(453,98,132,18deg); }
.site.home .feature.apps.api .img img { width: 330%; transform: translateX(-57.5%) translateY(-35.5%) rotate3d(466,74,83,-27deg); }
.site.home .feature.apps.framework .img img { width: 500%; transform: translateX(-27.25%) translateY(-95%) rotate3d(1,1,1,7deg); }
.site.home .feature.apps.hosting .img img { width: 450%; transform: translateX(-59%) translateY(-97%) rotate3d(5,1,4,-4deg); }
.site.home .feature.apps.docs .img img { width: 320%; transform: translateX(-57.5%) translateY(-74.5%) rotate3d(510,75,122,21deg); }


.site section.hero { color: white; }
.site section.hero { display: flex; align-items: center; }
.site section.hero .container { width: 100%; }

.site section.hero .container { display: flex; align-items: center; position: relative; }
.site section.hero .content { position: relative; width: 64.66%; }
.site.home section.hero .content { width: 50%; }
.site section.hero .content * { position: relative; z-index: 3; }
.site section.hero a { color: #fff; text-decoration: underline; }
.site section.hero h1 a,
.site section.hero h2 a { text-decoration: none; }
.site section.hero a:hover { text-decoration: underline; }
.site section.hero a.button { display: inline-block; outline: none; border-radius: 8px; padding: 5% 6%; background-color: #0ae; color: #fff; font-family: Arial, sans-serif; font-size: 24px; text-decoration: none; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4); transition: background-color 0.2s, color 0.2s; }
.site section.hero a.button:focus { outline: none; }
.site section.hero a.button:hover { background-color: #0bf; }

.site section.hero.rich-text.image.right img { width: 31.33%; }

.site section.hero form.left { width: 100%; }
.site section.hero form .field label,
.site section.hero form .row-item label { color: #fff; }

.site .keep-together { white-space: nowrap; }

.site.definition section.hero img,
.site.home section.hero img { box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4); }
.site.home h2 { position: relative; margin: 0; padding: 6% 0 6%; font-size: 4.5vw; line-height: 90%; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
.site.home h2 .dynamic, 
.site.home h2 .dynamic2 { font-family: sans-serif; font-size: 4vw; padding: 6% 0 6% 0; font-weight: normal; font-style: normal; color: #fff; }
.site.home h2 .dynamic2 { position: absolute; left: 0; right: 0; display: none; }
.site.home .img img { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.site.home .noshadow .img img { box-shadow: none; }

.site.banner section.hero .content { padding: 0 4% 0 2%; }
.site.banner section.hero.right .content { float: left; padding: 2% 0 0 2%; }
.site.banner section.hero p { margin: 26px 0; }
.site.banner section.hero .content h1,
.site.banner section.hero .content h2 { margin: 0; padding: 0; font-size: 48px; font-weight: bold; color: #fff; }
.site.banner section.hero .content p { font-size: 28px; }
.site.banner.home section.hero .content p { font-size: 36px; }
.site.banner section.hero .content dfn { font-style: normal; }
.site.banner section.hero strong { color: #fff; }
.site.banner section.hero .img.right { position: relative; z-index: 2; }
.site.home section.hero .content { padding: 0 2%; text-align: center; }
.site.home section.hero .text-and-video ul { margin: 20px 0 40px 0; padding: 0; list-style: none; }
.site.home section.hero .text-and-video ul li { margin: 20px 0; font-family: 'Lato', sans-serif; font-size: 32px; font-weight: normal; line-height: 100%; }
.site.home section.hero .text-and-video ul li a { color: #fff; text-decoration: none; }
.site.home section.hero .text-and-video ul li a:hover { text-decoration: underline; }
.site.home section.hero .text-and-video ul li em { font-weight: normal; font-style: normal; font-size: 24px; }

.site section.rich-text video { width: 100%; }
.site section.rich-text video.center { display: block; width: auto; margin: 0 auto; box-shadow: 0 0 16px rgba(0,0,0,0.25); }

.site.home section.hero .text-and-slideshow.slides { width: 50%; z-index: 3; border-radius: 4px; overflow: hidden; }
.site.home section.hero .text-and-slideshow.slides div.img { display: block !important; }  /* slick slides wants this to be inline-block, overriding here*/
.site.home section.hero .text-and-slideshow.slides .img { width: 100%; box-shadow: none; }
.site.home section.hero .text-and-slideshow.slides .img img { box-shadow: none; }
/* .site.home section.hero .text-and-slideshow.slides button { visibility: hidden; }
// .site.home section.hero .text-and-slideshow.slides button { visibility: visible; }*/
.site.home section.hero .text-and-slideshow.slides button { z-index: 9999; background-color: white; border-radius: 16px; visibility: hidden; width: 28px; height: 28px; }
.site.home section.hero .text-and-slideshow.slides:hover button.slick-arrow { visibility: visible; }
.site.home section.hero .text-and-slideshow.slides button.slick-arrow::before { font-size: 34px; line-height: 32px; color: #444; position: relative; left: -2px; }
.site.home section.hero .text-and-slideshow.slides button.slick-arrow.slick-prev { left: 15px; }
.site.home section.hero .text-and-slideshow.slides button.slick-arrow.slick-next { right: 15px; }

.site.home section.hero .content h2 { margin: 0; font-family: "Lato", sans-serif; font-size: 58px; line-height: 110%; }
.site.home section.hero .content p { font-family: "Lato", sans-serif; }

.site footer { margin: 0 auto 0 0; height: 200px; background-color: #eee; } 
.site footer::before { position: absolute; content: " "; background: #fff; left: 0; right: 0; height: 16px; box-shadow: 0 8px 8px rgba(0,0,0,.1);
}
.site footer ul { margin-top: 5%; }
.site .page { position: relative; /*padding-bottom: 10%; box-shadow: 0 -4px 16px rgba(0,0,0,0.4);*/ }

.site.banner.article.blog section.hero .content { width: 100%; padding: 33% 0 0 0; }
.site.banner.blog article { position: absolute; top: 64px; width: 100%; }

.site.banner.article.blog section.hero .content::before { z-index: 4; }
.site.banner.article.blog section.hero .content::after { z-index: 3; }

/*.site.article article { margin-top: 20px; }*/

.site section.tiles,
.site section.feature { margin-top: 64px; font-family: 'Lato', sans-serif; }
.site section.tiles h1 { padding: 24px 2%; }

.site section h1 { font-size: 45px; font-weight: 300; }
.site.home section.feature:not(.tight) h1 { font-size: 48px; font-weight: bold; }
.site.home section.feature p,
.site.home section.feature li { font-size: 32px; }
.site.home section.feature ul { margin: 4% 0 0 0; }

.site section.feature .img.left,
.site section.feature .img.right { margin-top: 10px; }

.site section.form { /*margin-top: 4%;*/ font-family: 'Lato', sans-serif; }
.site section.form form { width: 100%; }
.site section.form form label { font-weight: bold; }
.site section.form form div.row { padding: 10px 0px; display: flex; flex-direction: row; width: 100%; }
.site section.form form div.row.right { width: auto; float: right; }
.site section.form form div.row div.row-item { padding: 0px 5px; width: 100%; }
.site section.form form input,
.site section.form form textarea { border: 1px solid #aaa; border-radius: 5px; font-family: 'Lato', sans-serif; font-size: 24px; padding: 8px 12px; width: 100%; }
.site section.form form div.g-recaptcha { margin-top: 10px; margin-bottom: 10px; }
.site .grecaptcha-badge { visibility: hidden; }
.site section.form form input[type="submit"] { padding: 0px 24px; width: auto; }
.site section.form form input[type="file"] { padding: 12px 0; }

.site section.form.hero form .message { margin-top: 10px; }
.site section.form.hero form p { margin-top: 0px; font-size: 24px; }
.site section.form.hero form input,
.site section.form.hero form textarea { border-color: white; }
.site section.form.hero form input[type="submit"] { background-color: #51a351; border-color: #51a351; }
.site section.form.hero form input[type="submit"]:hover { background-color: #5bb75b; }
.site section.form.hero form input.demo[type="submit"] { background-color: #705697; border-color: #705697; }
.site section.form.hero form input.demo[type="submit"]:hover { background-color: #7D60A9; }
.site section.form.hero form input:focus,
.site section.form.hero form textarea:focus { border-color: #07b; }

.site section.form.hero.contact .content { width: 55%; }
.site section.form.hero.contact .img { width: 40%; }

.site section.form form#contact input:not([type="submit"]),
.site section.form form#contact textarea { font-size: 18px; }

.site section.tiles { clear: both; padding: 2% 0; }
.site section.tiles:after { content: "";  visibility: hidden; display: block; height: 0; clear: both; }

.site section.tiles .container { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -1%; }

.site .tile { display: block; float: left; position: relative; width: 30.666%; margin: 0 0 44px 2%; background-color: #fff; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
.site a.tile { background-color: #f8f8f8; transition: background-color 0.2s; }
.site .tile img { display: block; width: 100%; padding-bottom: 16%; }
.site .tile .text { padding: 4%; }
.site .tile h3 { margin: 0; padding: 4%; font-size: 25px; font-weight: normal; background-color: #09d; color: #fff; text-align: center; transition: background-color .2s; }
.site .caption-titles .tile h3 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 4%; font-size: 2.5vw; font-weight: normal; background-color: #0ae; color: #fff; text-align: center; transition: background-color .2s; }
.site a.tile:hover { background-color: #fff; }
.site a.tile:hover h3 { background-color: #0bf; }

.site section.tile .more { display: block; clear: both; padding: 24px 2% 0 0; text-align: center; }
.site section.tile .more > a { display: inline-block; border-radius: 4px; padding: 16px 64px; background-color: #08c; color: #fff; text-decoration: none; opacity: 0.7; transition: opacity .2s; }
.site section.tile .more > a:hover { opacity: 1; }
.site section.tile .content { display: none; }

.site .pricing .tile { padding-bottom: 44px; }
.site .pricing .tile .text strong { display: block; position: absolute; left: 0; right: 0; bottom: 0; line-height: 44px; text-align: center; }
.site .pricing .text li { font-size: 16px; color: #555; }

.site .hover-emphasize .tile { cursor: pointer; top: 0px; transition: top 0.1s; background-color: white; }
.site .hover-emphasize .tile:hover { top: -10px; }
.site section.tiles.nobox.hover-emphasize a.tile:hover,
.site section.tiles.nobox.hover-emphasize a.tile:hover h3 { text-decoration: none; color: #07b; }

.site.home section.tiles a.tile { width: 25%; }

.site section.tiles.nobox .tile { box-shadow: none; background-color: inherit; }
.site section.tiles.nobox .tile h3 { background-color: inherit; font-weight: normal; color: black; padding: 4% 0; }
.site section.tiles.nobox .tile img { padding-bottom: 0px; margin: 0 auto; width: 100%; }
.site section.tiles.nobox .tile { margin: auto; }

.site .change-currency { display: none; position: relative; padding: 0 24px; }
.site .currency { position: relative; }
.site .currency-usd::after { margin-left: 6px; content: "(USD)"; font-size: 80%; color: #ccc; }
.site .currency-cad::after { margin-left: 6px; content: "(CAD)"; font-size: 80%; color: #ccc; }


.site .app { display: block; float: left; position: relative; width: 30.666%; margin: 0 0 16px 2%; border: 1px solid #08c; border-radius: 4px; overflow: hidden; }
.site .app img { display: block; width: 100%; }
.site .app h3 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 16px; background-color: rgba(0,136,204,.9); color: #fff; text-align: center; transition: background-color .2s; }
.site .app:hover h3 { background-color: rgba(0,136,204,1); }

.site section.apps .more { display: block; clear: both; padding: 24px 2% 0 0; text-align: center; }
.site section.apps .more > a { display: inline-block; border-radius: 4px; padding: 16px 64px; background-color: #08c; color: #fff; text-decoration: none; opacity: 0.7; transition: opacity .2s; }
.site section.apps .more > a:hover { opacity: 1; }
.site section.apps .content { display: none; }

.site section .partners { margin: 24px 0 48px 0; padding: 0; border-collapse: collapse; }
.site section .partners tr:hover { background-color: #eee; }
.site section .partners td { padding: 4px 12px; }
.site section .partners td a { }
.site section .partners td img { display: inline-block; max-width: 200px; }
.site section .partners td { font-size: 12px; line-height: 110%; }

.site form { width: 48%; }
.site form.left { width: 64.66%; }
.site form .message { display: none; margin-bottom: 12px; border: 1px solid #0c0; border-radius: 4px; padding: 12px; background: #efe; color: #0c0; }
.site form .message.error { border-color: #c00; background: #fee; color: #c00; }
.site form .message.error strong { color: #c00; }
.site form .message.show { display: block; }
.site form .message.waiting { padding-right: 44px; border-color: #c90; color: #c90; background: #ffe url(../img/spinner.gif) right 12px center no-repeat; }
.site form .message p:last-child { margin-bottom: 0; }
.site form .field { margin: 0 0 16px 0; }
.site form .field label,
.site form .row-item label { display: block; padding: 4px 0; font-weight: bold; color: #07b; }
.site form .field label:hover { cursor: pointer; }

/* Checkbox styling based on: https://codepen.io/CreativeJuiz/pen/BiHzp */
.site form [type="checkbox"]:not(:checked),
.site form [type="checkbox"]:checked { position: absolute; left: -9999px; }
.site form [type="checkbox"]:not(:checked) + label,
.site form [type="checkbox"]:checked + label { position: relative; display: table-cell; box-sizing: border-box; height: 32px; padding: 0 0 0 42px; font-weight: normal; font-size: 16px; line-height: 22px; color: #000; vertical-align: middle; cursor: pointer; }
/* checkbox */
.site form [type="checkbox"]:not(:checked) + label:before,
.site form [type="checkbox"]:checked + label:before { content: ''; position: absolute; left:0; top: 50%; width: 32px; height: 32px; border: 1px solid #000; border-radius: 5px; background-color: #fff; transform: translateY(-50%); }
.site section.form.hero form [type="checkbox"]:not(:checked) + label:before,
.site section.form.hero form [type="checkbox"]:checked + label:before { border-color: #09c; }
/* checked mark */
.site form [type="checkbox"]:not(:checked) + label:after,
.site form [type="checkbox"]:checked + label:after { content: '✔'; position: absolute; top: 50%; left: 4px; font-size: 32px; line-height: 0.8; color: #51a351; transition: all .2s; }
/* checked mark changes */
.site form [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0) translateY(0); top: 0; }
.site form [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1) translateY(-50%); }
/* disabled checkbox */
.site form [type="checkbox"]:disabled:not(:checked) + label:before,
.site form [type="checkbox"]:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #ddd; }
.site form [type="checkbox"]:disabled:checked + label:after { color: #999; }
.site form [type="checkbox"]:disabled + label { color: #aaa; }
/* accessibility */
.site form [type="checkbox"]:checked:focus + label:before,
.site form [type="checkbox"]:not(:checked):focus + label:before { border: 1px solid #07b; }
/* hover style just for information */
.site form label:hover:before { border: 1px solid #07b!important; }

.site form .field .price { float: right; }
.site form input { padding: 8px 12px; border-radius: 5px; font-size: 24px; border: 1px solid #aaa; }
/*.site form input[type="text"],
.site form input[type="email"],
.site form input[type="password"]{ width: 100%; border: 1px solid #000; padding: 8px 12px; font-size: 24px; }*/
.site form input[type="text"].checking { padding-right: 44px; background-image: url(../img/spinner.gif); background-position: right 12px center; background-repeat: no-repeat; }
/*.site form input[type="text"]:focus,
.site form input[type="email"]:focus,
.site form input[type="password"]:focus{ border-color: #07b; }*/
.site section.form form input[type="submit"] { display: inline-block; border-radius: 8px; border: none; padding: 0 24px; background-color: #0ae; color: #fff; font-family: Arial, sans-serif; font-size: 20px; line-height: 56px; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: background-color .2s, color .2s; cursor: pointer; -webkit-appearance: none; }
.site form input[type="submit"]:hover { background-color: #0bf; }

.site.signup form input[type="submit"] { background-color: #51a351; }
.site.signup form input[type="submit"]:hover { background-color: #5bb75b; }

.site a.help { display: inline-block; vertical-align: middle; border-radius: 8px; width: 16px; height: 16px; padding: 0 2px; background-color: #07b; color: #fff; text-align: center; font-size: 10px; line-height: 16px; }
.site a.help:hover { background-color: #08c; text-decoration: none; }

.site.article article section.articles,
.site .articles { left: -4px; max-width: 1000px; padding: 24px 0 24px 16px; }
.site .articles > a:hover { text-decoration: none; }
.site .articles > a img { width: 100%; }
.site .articles > a .date { margin: 8px 12px; font-size: 14px; color: #888; }
.site .articles > a .title { margin: 8px 12px; font-size: 18px; }
.site .articles > a .subtitle { margin: 8px 12px; color: #000; font-style: italic; }
.site .articles > a .summary { margin: 8px 12px; color: #333; }

.site .articles .pages { clear: both; margin: 0 0 0 24px; padding: 0; list-style-type: none; }
.site .articles .pages li { display: inline-block; margin: 12px 8px 12px 0; }
.site .articles .pages li.disabled,
.site .articles .pages li a { border: 1px solid #08c; min-width: 44px; padding: 10px 4px; background-color: #08c; color: #fff; text-align: center; }
.site .articles .pages li a { display: block; text-decoration: none; }
.site .articles .pages li.current a,
.site .articles .pages li a:hover { background-color: #fff; color: #08c; }

.site.blog .articles > a { position: relative; left: -8px; float: left; width: 320px; height: 384px; overflow: hidden; margin-left: 8px; margin-bottom: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: box-shadow 0.25s; }
.site.blog .articles > a:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }

.site.news .articles > a { display: block; padding: 12px; }
.site.news .articles > a:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
.site.news .articles > a .date { margin-bottom: 0px; }
.site.news .articles > a .title { margin-top: 0px; }

.site.article article section { padding: 0 20px 0 20px; }
.site.article article section:first-child { padding: 24px 20px 0 20px; }
.site.article article section:first-child h1 { margin: 24px 0; font-family: 'Lato', sans-serif; font-size: 48px; font-weight: normal; line-height: 100%; }
.site.article article section.rich-text h2.subtitle { margin: 0 0 24px 0; font-size: 28px; font-weight: normal; font-style: italic; }

.site.article article section h1,
.site.article article section h2,
.site.article article section h3 { margin: 48px 0 24px 0; }

.site.article.blog article section.intro { margin-bottom: 24px; }
.site.article.blog article section.intro img.full { margin: 0; }
.site.article.blog article section.intro .title { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 0; background-color: rgba(255,255,255,0.8); padding: 0 20px; }

.site.article.blog article section:first-child { padding-top: 6px; }
.site.article.blog article section.intro::after { content: ""; position: absolute; top: 6px; left: 20px; right: 20px; bottom: 0; z-index: 2;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0099dd+0,00aaee+100&1+2,0+33 */
background: -moz-linear-gradient(top, rgba(0,153,221,1) 0%, rgba(0,153,221,1) 2%, rgba(0,158,226,0) 33%, rgba(0,170,238,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,153,221,1) 0%,rgba(0,153,221,1) 2%,rgba(0,158,226,0) 33%,rgba(0,170,238,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,153,221,1) 0%,rgba(0,153,221,1) 2%,rgba(0,158,226,0) 33%,rgba(0,170,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099dd', endColorstr='#0000aaee',GradientType=0 ); /* IE6-9 */
}

.site.article article .metadata { margin: 0 0 12px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 12px 0; color: #888; }
.site.article article .metadata.footer { margin: 64px 0; text-align: center; font-size: 0; }
.site.article article .metadata .date { }
.site.article article .metadata .author:after { content:" \2013 "; }

.site.article article .metadata .pages { float: right; font-size: 0; }
.site.article article .metadata.footer .pages { float: none; }
.site.article article .metadata .pages select { height: 32px; vertical-align: middle; margin: 0; border-radius: 0; border: 1px solid #eee; background-color: #eee; padding: 0 4px; color: #08c; font-size: 18px; text-align: center; appearance: none; -moz-appearance: none; -webkit-appearance: none; outline: none; }
.site.article article .metadata .pages select:hover,
.site.article article .metadata .pages select:focus{ color: #fff; background-color: #08c; }
.site.article article .metadata .pages select option { color: #000; background-color: #eee; }
.site.article article .metadata .pages .btn { position: relative; top: -1px; display: inline-block; width: 32px; height: 32px; text-indent: -9999px; background-color: #eee; }
.site.article article .metadata .pages .btn::after { content: ""; position: absolute; left: 10px; top: 6px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.site.article article .metadata .pages .btn.back { border-radius: 4px 0 0 4px; }
.site.article article .metadata .pages .btn.next { border-radius: 0 4px 4px 0; }
.site.article article .metadata .pages .btn.back::after { border-right: 12px solid #09d; }
.site.article article .metadata .pages .btn.next::after { border-left: 12px solid #09d; }
.site.article article .metadata .pages .btn:hover { background-color: #09d; }
.site.article article .metadata .pages .btn.disabled:hover { background-color: #eee; cursor: default; }
.site.article article .metadata .pages .btn:hover::after { border-left-color: #fff; border-right-color: #fff; }
.site.article article .metadata .pages .btn.disabled::after { border-left-color: #ccc; border-right-color: #ccc; }


.site.article article img.full { display: block; margin: 8px 0; width: 100%; }
.site.article article section.rich-text { font-size: 24px; line-height: 125%; }
.site.article article section.rich-text h2 { margin: 24px 0 24px 0; font-size: 36px; line-height: 125%; }
.site.article article section.rich-text strong { color: #333; text-shadow: none; }
.site.article article section.rich-text a strong { color: #08c; }

.site.article article section.rich-text h1 img,
.site.article article section.rich-text h2 img,
.site.article article section.rich-text h3 img,
.site.article article section.rich-text h4 img { vertical-align: middle; }

.site pre code { display: block; padding: 4px 8px; background-color: #f4f4f4; font-size: 22px; overflow: auto; }

.site .locations { display: flex; position: relative; margin: 0 -12px; }
.site .locations .location { width: 50%; padding: 0 12px; }
.site .locations .location h2 { margin: 20px 0 0 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 44px; color: #07b; }
.site .locations .location .address,
.site .locations .location .phone,
.site .locations .location .email { display: block; margin: 0 0 12px 3px; }
.site .locations .location a { color: #444; text-decoration: none; }
.site .locations .location a:hover { text-decoration: underline; }
.site .locations .location .address { display: none; }
.site .locations .location .map { margin-top: 22px; width: 100%; height: 450px; border: none; }

.site.article article section .sidebar { float: right; width: 40%; margin: 24px 0 24px 28px; padding: 12px 14px; background-color: #eee; font-size: 20px; line-height: 145%; }
.site.article article section .sidebar h2,
.site.article article section .sidebar h3,
.site.article article section .sidebar h4 { margin-top: 12px; }

.site.article article section .callout { border: 1px solid #08c; padding: 12px 14px; }
.site.article article section .callout h2,
.site.article article section .callout h3,
.site.article article section .callout h4 { margin-top: 12px; }

table.comparison { width: 100%; margin: 40px 0; border-collapse: collapse; }
table.comparison td { position: relative; border: 1px solid #000; padding: 10px 12px; font-size: 18px; line-height: 125%; text-align: center; }
table.comparison td:first-child { text-align: left; font-weight: bold; }

table.comparison .rating { color: lightgrey; }
table.comparison .rating a { color: lightgrey; text-decoration: none; }
table.comparison .rating a::after { content: ""; display: inline-block; position: absolute; left: 50%; bottom: 4px; border: solid #eee; border-width: 0 2px 2px 0; padding: 2px; transform: translateX(-50%) translateY(-3px) rotate(45deg); }
table.comparison .rating a:hover::after { border-color: #08c; }
table.comparison .rating span.on { color: orange; }

table.image-row { width: 100%; }
table.image-row img { width: 100%; }

.score-weight { display: inline-block; min-width: 32px; border-radius: 16px; padding: 1px 8px; font-size: 12px; text-align: center; background-color: #e8e8e8; color: #fff; }
.site section table.comparison td a[href="#"]::after { display: none; }
.site section table.comparison td a[href="#"] { cursor: help; }
.site section table.comparison td:first-child a.hidden-info { color: #000; text-decoration: none; cursor: help; }
.clear-both { clear: both; }

@media (max-width: 1800px) {
    .site.home section.feature:not(.tight) h1 { font-size: 2.65vw; }
    .site.home section.feature p,
    .site.home section.feature li { font-size: 1.75vw; }
}

@media (max-width: 1440px) {
    .site.home section.feature { width: auto; margin: 4% 10%; padding: 2% 1%; }
    .site.home section.hero .content h2 { font-size: 4vw; }
    .site.banner.home section.hero .content p { font-size: 2.5vw; }
    .site.home section.feature:not(.tight) h1 { font-size: 3vw; }
    .site.home section.feature p,
    .site.home section.feature li { font-size: 1.8vw; }
}

@media (max-width: 1200px) {
    /* disable font scaling */
    .site.home h2 { font-size: 48px; }
    .site.home h2 .dynamic, 
    .site.home h2 .dynamic2 { font-size: 51px; }
    .site section.tiles { padding: 32px 0 16px 0; }

    .site.home section.hero a.button { font-size: 2vw; }

    .site.article.blog section.hero { padding: 64px 0 0 0; box-shadow: none; }
    .site.article.blog section.hero .container { max-width: none; }
    .site.banner.article.blog section.hero .content { padding: 50% 0 0 0; }
    .site.article.blog article section.intro { max-width: none; margin: 0 0 24px 0; padding: 0; }
    .site.article.blog article section.intro::after { top: 0; left: 0; right: 0; }
    .site.article.blog article section.intro .title { left: 0; right: 0; padding: 0; }
    .site.article.blog article section.intro .title h1 { max-width: 1024px; margin: 24px auto; padding: 0 20px; }
}

@media (max-width: 1023px) {
    .site .tiles .tile h3 { font-size: 2.44vw; }
    .site .tiles ul li { font-size: 1.95vw; }
    
    .site.home section.feature li::before { top: 40%; }
    
    .site.formhero .hero div.img { display: none; }
    .site.formhero .hero div.content,
    .site section.form.hero.contact .content { width: 100%; float: none; }

    .site.article article section.articles,
    .site .articles { max-width: 672px; }

    .site .more.articles > a:last-child { display: none; }
}

@media (max-width: 924px) {
    .site.home section.hero { min-height: 400px; }
    
    .site.home div.hero.texture { height: 50vw; }
    .site .pricing .text li { font-size: 1.7vw; }
}

@media (max-width: 767px) {
    .site.article article section { padding: 0 20px 0 20px; }
    .site.article article section.intro .title { position: static; background-color: transparent; padding: 0; }

    .site.article.blog article section.intro { margin: 0; }
    .site.article.blog article section.intro .title { position: static; }

    .site.article article .metadata .pages { float: none; display: block; margin: 12px 0 0; text-align: center; }

    .site.article article section .sidebar { float: none; width: auto; margin-left: 0; }

    table.comparison td { font-size: 2vw; }


    .site .locations { display: block; }
    .site .locations .location { width: 100%; }
    .site section.feature.centertext .left.half:not(.img),
    .site section.feature.centertext .right.half:not(.img) { margin-top: auto; }        

    .site section.form.contact .content { float: none; width: auto; left: 0; padding: 0 0 8% 0; }
    .site section.form.contact .img { float: none; width: auto; left: 0; }
    .site section.form.contact form div.row { display: block; padding: 0px; }
    .site section.form.contact form div.row.right { float: left; }
    .site section.form.contact form div.row div.row-item { padding: 5px 5px; }
    .site section.form.contact form div.row input { margin-left: 0px; margin-right: 0px; }
}

@media (max-width: 719px) {
    .site.article article section.articles,
    .site .articles { max-width: none; left: 0; padding: 24px 0; }
    .site.article article section.articles h1,
    .site.article article section.articles h2,
    .site.article article section.articles h3 { margin: 48px 24px 24px 24px; }
    .site.blog .articles > a { display: block; float: none; left: 0; width: auto; height: auto; margin: 0 24px 24px 24px; }
    .site .more.articles > a:last-child { display: block; }
}

@media (max-width: 639px) {
    .site .tiles .tile h3 { font-size: 4vw; }

    .site section.tiles { padding: 24px 4% 16px 4%; }
    .site section.tiles h1 { padding: 24px 1%; }
    .site .pricing .tile { width: 48%; }
    .site .pricing .tile h3 { font-size: 4vw; }
    .site .pricing .tile ul li { font-size: 2.5vw; }

    .site.home div.hero.texture { height: 90vw; }
    .site.home section.hero { min-height: 450px; }
    .site.home section.hero .container { display: block; text-align: center; }
    .site.home section.hero .content { width: 100%; float: none; padding: 0 0 5% 0; text-align: center; }
    .site.home section.hero .content h2 { margin: 0; font-size: 8vw; }
    .site.banner.home section.hero .content p,
    .site.banner section.hero .content p { margin: 4% 0; font-size: 5vw; }
    .site.home section.hero .text-and-slideshow.slides { display: inline-block; float: none; width: 100%; }
    .site.home section.hero .content a.button { margin: 2.5% 2.5%; padding: 4% 6%; font-size: 4vw; }

    .site.home section.feature:not(.tight) h1 { font-size: 6vw; }
    .site.home section.feature p,
    .site.home section.feature li { font-size: 3.6vw; }
    .site.home section.feature li::before { top: 34%; }
    .site.home section.feature.sites { margin-top: 8%; margin-bottom: 8%; padding-top: 8%; }

    .site:not(.home) section.hero .container .content { width: 100%; }
    .site:not(.home) section.hero .container img { display: none; }

    .site.home section.feature .img { padding-top: 66%; }

    .site section { flex-wrap: wrap; }
    .site section .left.half { width: 100%; }
    .site section .img.right.half { width: 100%; margin: 4% 0 0 0; }
    
    table.comparison td { padding: 5px 6px; }

    .site.team section.rich-text.image.left img { float: right; margin-left: 4%; }
    .site.team section.contact.image.left .content { margin-left: 0; }
    
    .site section.flex:not(.hero) { display: block; }
    .site section.feature.centertext.tight { text-align: center; }
    .site section.feature.centertext.tight .left.half:not(.img),
    .site section.feature.centertext.tight .right.half:not(.img) { float: none; margin-right: 0px; width: 100%; text-align: left; }
    .site section.feature.centertext.tight .left.half.img,
    .site section.feature.centertext.tight .right.half.img { float: none; width: 100%; display: inline-block; width: 75%; margin-top: 5%; }
    .site section.feature.centertext.tight .left.half.img img,
    .site section.feature.centertext.tight .right.half.img img { width: 100%; height: auto; max-height: unset; }

}

@media (max-width: 511px) {
    .site section .left.half,
    .site section .right.half { width: 100%; float: none; margin-top: 2%; }
    .site section.feature { padding-top: 0; }

    .site section.feature p,
    .site section.feature.centertext.tight p:not(.title),
    .site section p,
    .site section li { font-size: 3.9vw; }

    .site section.feature .img.left,
    .site section.feature .img.right { width: auto; margin: 0; }
    .site.home section.feature .img.left,
    .site.home section.feature .img.right { width: 100%; margin: 4% 0; }

    .site.article article section .sidebar { font-size: 3.9vw; line-height: 140%; }

    .site section.rich-text.image.right-50 img { float: none; width: 100%; margin-left: 0; }

    .site.home section.hero { min-height: auto; }

    /* one-column contacts */
    .site.team section.contact { float: none; width: 100%; position: relative; }
    .site.team section.contact.image.left img { display: block; float: none; width: 100%; max-width: none !important; margin: 0; }
    .site.team section.contact .content { position: relative; z-index: 2; margin-top: -19%; padding-top: 4px; background-color: rgba(255,255,255,0.8); }
    .site.team section.contact.rich-text.image.left .content h2,
    .site.team section.contact.rich-text.image.left .content h3 { margin-left: 12px; margin-right: 12px; }
    .site.team section.contact.rich-text.image.left .content h2 { font-size: 6vw; }
    .site.team section.contact.rich-text.image.left .content h3 { margin-bottom: 8px; font-size: 5vw; color: #444; }
}

@media (max-width: 479px) {
    .site section.hero .content { float: none; width: auto; left: 0; padding: 0 0 8% 0; }
    .site section.hero .content .img { float: none; width: auto; left: 0; }
    .site.home h2 { font-size: 10vw; }
    .site.home h2 .dynamic, 
    .site.home h2 .dynamic2 { font-size: 8vw; }
    .site.home section.hero .text-and-video { width: auto; }
    .site .tile img { padding-bottom: 24%; }

    .site section.tiles .container { margin-left: 0; }
    .site section.tiles h1 { padding: 24px 0; }
    .site .pricing .tile { width: 100%; margin-left: 0; }
    .site .pricing .tile h3 { font-size: 5.5vw; }
    .site .pricing .tile ul li { font-size: 4vw; }
    .site form,
    .site form.left { clear: both; width: 100%; }

    .site .img.right { float: none; width: auto; margin: 0; }

    .site.home section.feature li::before { top: 40%; }

    
    .site.article article .metadata .pages select { max-width: 75% }
}

@media (max-width: 319px) {
    .site.article article .metadata .pages select { width: 75% }
    .site.blog .articles > a { margin: 0 4px 24px 4px; }

    /*.site section.feature p,
    .site section.feature li,
    .site section.hero p,
    .site section.hero li { font-size: 8vw; line-height: 120%; }*/
    .tile { float: none; width: auto; margin: 4%; }
    .site section { padding-left: 4%; padding-right: 4%; }
    /*.site.team section.contact.rich-text.image.left .content p { font-size: 6vw; }*/
    .site.article.blog article section.intro .title h1 { font-size: 16vw; }
    table.comparison td { padding: 2px 3px; }
}