@charset "UTF-8";
body { font-family: "Gotham SSm A", "Gotham SSm B", sans-serif; color: #151515; font-size: 17px; }

body.data-and-trends { background: #ffe1ce; }

a { color: #2962FF; text-decoration: none; }

.clear { clear: both; }

h1 { font-size: 52px; line-height: 115%; font-weight: 700; }

h2 { font-size: 30px; line-height: 130%; font-weight: 700; }

h3 { font-size: 23px; line-height: 160%; font-weight: 400; }

h4 { font-size: 21px; line-height: 130%; font-weight: 700; }

hr { margin: 20px auto; height: 1px; border: none; background: #E3E8ED; }

p, ul, ol, blockquote { font-weight: 300; font-size: 17px; line-height: 160%; }

blockquote { font-style: italic; padding-left: 20px; border-left: 1px solid #151515; }

a.cta { display: inline-block; font-size: 14px; padding: 14px 20px; text-align: center; border-radius: 5px; font-weight: 500; color: #fff; background: linear-gradient(#2962FF, #0F4CF4); -moz-background: linear-gradient(#2962FF, #0F4CF4); -webkit-background: linear-gradient(#2962FF, #0F4CF4); transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; }

a.cta:hover { color: #fff; background: linear-gradient(#0F4CF4, #0F4CF4); -moz-background: linear-gradient(#0F4CF4, #0F4CF4); -webkit-background: linear-gradient(#0F4CF4, #0F4CF4); }

a.secondary-cta { display: inline-block; padding: 20px; border-radius: 5px; font-weight: 500; color: #2962FF; background: #eaeffe; }

@media screen and (max-width: 900px) { a.cta { font-size: 13px; padding: 10px 15px; } }

.youtube { margin: 20px 0; }

.youtube h2 { margin-bottom: 10px; }

.youtube a.youtube-video { position: relative; display: block; transition: opacity 0.3s; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; }

.youtube a.youtube-video img.thumb { width: 100%; display: block; margin: 0; border-radius: 2px; border: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, black 100%); }

.youtube a.youtube-video img.icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px !important; margin: 0 !important; border: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; }

.youtube a.youtube-video:hover { opacity: 0.8; }

.youtube-embed { width: 100%; max-width: 760px; height: 427px; }

@media screen and (max-width: 900px) { .youtube-embed { height: 230px; } .youtube a.youtube-video img.icon { width: 40px !important; } }

.collapsed .toggle { cursor: pointer; background: url("../png/breadcrumb.png") no-repeat; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; }

.collapsed .toggle:hover { color: #2962FF; background-image: url("../png/breadcrumb-blue.png"); }

.collapsed .toggled { background: url("../png/toggled.png") no-repeat; }

.collapsed .inside { display: none; }

.collapsed .inside p, .collapsed .inside ul, .collapsed .inside ol { font-size: 16px; }

.collapsed .inside p .cta, .collapsed .inside ul .cta, .collapsed .inside ol .cta { font-size: 16px; }

.collapsed-button { margin: 20px 0; padding: 20px 40px; border-radius: 10px; border: 1px solid #2962FF; }

.collapsed-button h2 { font-size: 17px !important; font-weight: 600 !important; }

.collapsed-button h2.toggle { padding-left: 40px; background-size: 20px 20px; background-position: 0% 50%; background-repeat: no-repeat; }

.collapsed-line { margin: 0; padding: 5px 0px; border-bottom: 1px solid #151515; }

.collapsed-line h2 { font-size: 16px !important; font-weight: 600 !important; }

.collapsed-line h2.toggle { padding-left: 30px; background-size: 16px 16px; background-position: 0% 2px; }

.collapsed-line .inside { padding: 20px 0; }

.collapsed-line .inside p:first-child { margin-top: 0; }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 20px; }

.pros-cons h3 { border-bottom: 1px solid #2962FF; padding-bottom: 20px; }

.pros-cons ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.pros-cons ul li { border-bottom: 1px solid #000; padding: 0 0 10px 0; font-size: 16px; margin: 10px 0 20px 0; }

.pros-cons ul li strong { display: block; background: url("../png/breadcrumb.png") no-repeat; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; padding-left: 30px; background-size: 16px 16px; background-position: 0% 5px; cursor: pointer; font-weight: 500; }

.pros-cons ul li strong.toggled { background: url("../png/toggled.png") no-repeat; background-size: 16px 16px; background-position: 0% 5px; background-repeat: no-repeat; }

.pros-cons ul li strong:hover { color: #2962FF; background-image: url("../png/breadcrumb-blue.png"); }

.pros-cons ul li p { margin: 20px 0; display: none; font-size: 16px; }

.line-title { font-size: 35px; margin-top: 80px; }

@media screen and (max-width: 950px) { .line-title { font-size: 32px; } }

.gradient { background: #3D4CF4; background: linear-gradient(to right, #3D4CF4 0%, #ff2862 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.newsletter { padding: 5%; background: #F9FAFF; border-radius: 5px; margin-bottom: 40px; }

.newsletter p { margin: 0 auto; }

.newsletter p strong { color: #2962FF; }

.newsletter #mc_embed_signup { width: 100%; position: relative; margin-top: 20px; }

.newsletter #mc_embed_signup label { display: none; }

.newsletter #mc_embed_signup input.email { width: 92%; font-size: 17px; padding: 4%; border-radius: 50px; background: #fff; border: none; }

.newsletter #mc_embed_signup input.button { -webkit-appearance: none; cursor: pointer; position: absolute; top: 7px; right: 13px; font-size: 17px; font-weight: 900; width: 150px; background: #2962FF; color: #fff; padding: 15px 10px; border-radius: 50px; border: none; }

@media screen and (max-width: 900px) { .newsletter #mc_embed_signup input.email { border-radius: 5px; border: 1px solid #2962FF; } .newsletter #mc_embed_signup input.button { position: relative; top: auto; right: auto; border-radius: 5px; display: block; width: 100%; text-align: center; margin-top: 4px; } }

body { text-align: center; margin: 0 auto; padding: 0; font-size: 17px; }

body.green { background: #E6EADB; }

.wrapper { width: 90%; margin: 0 5%; max-width: 1600px; margin: 0 auto; text-align: left; }

.wide-wrapper { width: 90%; margin: 0 5%; max-width: 1600px; margin: 0 auto; text-align: left; }

.top-margin { margin-top: 50px; }

.main { text-align: left; width: 70%; float: right; padding: 10px 0 50px 0%; border-bottom: 1px solid #ddd; }

.main-no-sidebar { max-width: 720px; margin: 0 auto; float: none; width: 100%; padding: 0; }

@media (min-width: 768px) and (max-width: 992px) { .wrapper, .wide-wrapper { width: 90%; margin: 0 5%; } }

@media screen and (max-width: 768px) { .wrapper, .wide-wrapper { width: 90%; margin: 0 5%; } .main { width: 100%; padding: 0; border-bottom: 0; float: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } }

.dropdown-lightbox { display: none; position: fixed; z-index: 999; top: 0px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); }

.header { padding: 20px 0 0 0; position: relative; margin-bottom: 2px; z-index: 150000; background: #fff; }

.header .wide-wrapper { display: flex; align-items: center; justify-content: space-between; }

.header .wide-wrapper a#logo { display: inline-block; width: 190px; margin-top: 2px; }

.header .wide-wrapper a#logo img { border: none; width: 100%; }

.header .wide-wrapper nav { display: block; text-align: right; }

.header .wide-wrapper nav ul { list-style: none; margin: 0; padding: 0; }

.header .wide-wrapper nav ul li { display: inline-block; font-weight: 400; font-size: 15px; margin-left: 20px; }

.header .wide-wrapper nav ul li a { color: #151515; display: block; }

.header .wide-wrapper nav ul li a.dropdown { display: flex; align-items: center; gap: 4px; }

.header .wide-wrapper nav ul li a.dropdown svg { width: 16px; height: 16px; }

.header .wide-wrapper nav ul li a.dropdown-active svg { transform: rotate(180deg); }

.header .wide-wrapper nav ul li .dropdown-container { background: #fff; width: 100%; padding: 30px 0 60px 0; position: absolute; top: 49px; left: 0; margin: 0 auto; display: none; z-index: 120000; text-align: left; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner { width: 90%; margin: 0 5%; max-width: 1600px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 0 auto; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul h4 { margin: 0; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul h4 a { text-transform: uppercase; font-size: 14px; font-weight: 600; margin: 0; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul li { margin-left: 0; display: block; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul li a { display: block; font-size: 15px; font-weight: 400; padding: 3px 0px; line-height: 160%; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul li a span { font-size: 14px; color: #999; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul li a.blue { color: #2962FF; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul li a:hover { color: #2962FF; }

.header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul li a:hover span { color: #2962FF; }

.header .wide-wrapper nav ul li.small-dropdown ul { width: 140px; margin-left: -65px; }

.header .wide-wrapper #toggle-mobile-menu { display: none; }

body.data-and-trends .header { -webkit-box-shadow: none; box-shadow: none; -moz-box-shadow: none; border: none; }

body.border .header { -webkit-box-shadow: none; box-shadow: none; -moz-box-shadow: none; border: none; }

body.green .header { background: #E6EADB; -webkit-box-shadow: none; box-shadow: none; -moz-box-shadow: none; border: none; }

@media screen and (max-width: 1100px) { .dropdown-lightbox { display: none !important; } .header { padding: 20px 0; margin-bottom: 0; } .header .wide-wrapper { position: relative; display: block; } .header .wide-wrapper a#logo { margin-top: 8px; width: 175px; } .header .wide-wrapper nav { display: block; display: none; position: relative; top: auto; right: auto; padding: 5% 0 2.5%; } .header .wide-wrapper nav ul li { display: block; margin-left: 0; font-size: 16px; } .header .wide-wrapper nav ul li a { display: block; margin: 0; padding: 1.5% 0%; text-align: left; } .header .wide-wrapper nav ul li .dropdown-container { position: relative; top: auto; left: auto; width: 100%; padding: 2.5% 0%; border: none; } .header .wide-wrapper nav ul li .dropdown-container .dropdown-inner { display: block; background: #eaeffe; padding: 1% 3%; } .header .wide-wrapper nav ul li .dropdown-container .dropdown-inner ul { margin-bottom: 10px; } .header .wide-wrapper nav ul li ul:after { border: none; } .header .wide-wrapper nav ul li.small-dropdown ul { width: 90%; margin-left: 0px; } .header .wide-wrapper #toggle-mobile-menu { position: absolute; top: -4px; right: 0; width: 24px; height: 24px; padding: 10px 0 10px 10px; display: inline-block; background: url("../png/mobile-menu-2.png") no-repeat; background-size: 24px 24px; background-position: 50%; text-indent: -9999em; } }

.footer { margin-top: 0px; clear: both; }

.footer h3 { font-size: 26px; font-weight: 400; margin: 40px 0; max-width: 800px; line-height: 150%; }

.footer p { margin: 20px 0 30px 0; font-weight: 400; font-size: 15px; }

.footer p a { display: inline-block; float: right; color: #151515; border-bottom: 1px solid #000; padding-bottom: 1px; margin-left: 20px; }

.footer ul { width: 100%; list-style: none; margin: 0; padding: 0; text-align: left; }

.footer ul li { width: 23.5%; margin-right: 1.5%; display: inline-block; float: left; }

.footer ul li h4 { text-transform: uppercase; font-size: 15px; font-weight: 600; margin-top: 50px; }

.footer ul li ul { display: block; margin-bottom: 70px; }

.footer ul li ul li { display: block; float: none; margin-bottom: 20px; width: 100%; }

.footer ul li ul li a { color: #151515; font-size: 17px; font-weight: 300; display: block; }

.footer ul li ul li a:hover { color: #2962FF; }

@media screen and (max-width: 800px) { .footer h3 { font-size: 20px; } .footer p { text-align: center; margin-top: 50px; } .footer p a { display: block; text-align: center; margin-top: 8px; float: none; border-bottom: none; } .footer ul li { width: 100%; margin-right: 0; } .footer ul li h4 { margin-top: 50px; } .footer ul li ul { margin-bottom: 0; } }

.homepage .splash { margin: 30px 0; padding: 0; border-bottom: 1px solid #ddd; text-align: center; display: flex; gap: 30px; justify-content: center; align-items: center; }

.homepage .splash .text { max-width: 800px; }

.homepage .splash .text h1 { font-size: 62px; margin-top: 0; font-weight: 700; text-wrap: balance; }

.homepage .splash .text p { font-size: 23px; font-weight: 400; line-height: 165%; text-wrap: balance; }

.homepage .splash .text a { color: #151515; text-decoration: underline; }

.homepage .splash img { max-width: 500px; }

.homepage h3.quote { font-family: "Young Serif", serif; font-weight: 400; font-size: 36px; margin: 0 auto; padding: 5%; text-align: center; max-width: 1020px; width: 90%; text-wrap: balance; }

@media (max-width: 1400px) { .homepage .splash .text h1 { font-size: 48px; } }

@media (max-width: 1150px) { .homepage .splash img { max-width: 350px; } .homepage .splash .text h1 { font-size: 40px; } .homepage .splash .text p { font-size: 19px; } .homepage h3.quote { font-size: 24px; } }

@media (max-width: 950px) { .homepage .splash img { margin-right: 50px; } .homepage .splash .text p { font-size: 17px; } .homepage h3.quote { font-size: 24px; padding: 45px 0 60px 0; width: 100%; } }

@media (max-width: 800px) { .homepage .splash { flex-direction: column; } .homepage .splash .text p { font-size: 17px; } }

.data-and-trends .title { padding: 200px 0; margin: 0px auto; background-image: radial-gradient(circle closest-side, #fffde7, #ffe1ce); }

.data-and-trends .title h1 { font-size: 60px; margin: 0; text-transform: uppercase; font-weight: 700; }

.data-and-trends .title p.intro { margin: 15px auto 25px auto; font-size: 24px; max-width: 800px; }

.data-and-trends .title ul { list-style: none; margin: 25px auto 25px auto; padding: 0; }

.data-and-trends .title ul li { display: inline; font-size: 20px; color: #2962FF; margin: 0 10px; padding-bottom: 2px; border-bottom: 2px solid #cfdcff; }

.data-and-trends .graph { margin-bottom: 100px; }

.data-and-trends .graph .text { text-align: center; }

.data-and-trends .graph .text h3 { background: #cfdcff; color: #2962FF; padding: 10px 12px; display: inline-block; text-transform: uppercase; font-size: 12px; border-radius: 8px; }

.data-and-trends .graph .text h2 { margin: 10px 0; font-size: 42px; }

.data-and-trends .graph .text ul, .data-and-trends .graph .text p { margin: 20px auto; font-size: 18px; max-width: 800px; }

.data-and-trends .graph .text ul { list-style: square; }

.data-and-trends .graph .text p.small { color: #999; font-size: 13px; }

.title-with-margin { margin-top: 50px; }

.article-subheader-with-ctas { position: relative; width: 100%; z-index: 1000; margin-bottom: 3px; backdrop-filter: blur(12px); -moz-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.75); }

.article-subheader-with-ctas .inner { display: flex; padding: 10px 0; justify-content: space-between; gap: 5px; align-items: center; max-width: 1600px; margin: 0 auto; width: 90%; position: relative; text-align: left; z-index: 122000; }

.article-subheader-with-ctas .inner ul.breadcrumbs { list-style: none; margin: 0; padding: 0; }

.article-subheader-with-ctas .inner ul.breadcrumbs li { margin-right: 1px; padding-right: 18px; display: inline-block; background: url("../png/breadcrumb.png") no-repeat; background-size: 12px 12px; background-position: 100% 50%; }

.article-subheader-with-ctas .inner ul.breadcrumbs li a { color: #151515; font-size: 15px; font-weight: 400; }

.article-subheader-with-ctas .inner ul.breadcrumbs li:last-child { background-image: none; }

.article-subheader-with-ctas .inner a.cta { margin-left: 10px; padding: 17px 25px; font-size: 15px; border-radius: 40px; }

@media screen and (max-width: 1000px) { .article-subheader-with-ctas .inner { width: 100%; margin: 0; padding: 0; } .article-subheader-with-ctas .inner ul.breadcrumbs { display: none; } .article-subheader-with-ctas .inner .ctas { display: flex; width: 100%; gap: 0px; } .article-subheader-with-ctas .inner .ctas a.cta { width: 100%; display: block; height: 18px; margin-left: 0; font-size: 15px; border-radius: 0; background: none; color: #2962FF; border-bottom: 1px solid #2962FF; border-left: 0.5px solid #2962FF; border-right: 0.5px solid #2962FF; border-top: 1px solid #2962FF; } }

.article-subheader-no-ctas { position: relative; display: flex; background: #fff; padding: 15px 0; min-height: 45px; width: 100%; justify-content: space-between; align-items: center; }

.article-subheader-no-ctas a.back { color: #151515; font-size: 15px; padding: 0px 0 0px 20px; background: url("../png/back.png"); background-size: 12px 12px; background-repeat: no-repeat; background-position: 0 50%; }

.article-subheader-no-ctas p.affiliate-disclosure { margin: 0; padding: 10px 15px; font-size: 13px; font-weight: 400; background: #fff; border: 1px solid #E3E8ED; border-radius: 3px; }

.article-subheader-no-ctas p.affiliate-disclosure a { text-decoration: none; border-bottom: 1px dashed #000; padding-bottom: 2px; color: #000; }

@media screen and (max-width: 850px) { .article-subheader-no-ctas a.back { display: none; } .article-subheader-no-ctas p.affiliate-disclosure { display: block; text-align: center; } }

.inspiration-subheader { position: relative; display: flex; background: #fff; padding: 5px 0 15px 0; min-height: 45px; width: 100%; justify-content: space-between; align-items: center; }

.inspiration-subheader a.back { display: flex; align-items: center; color: #151515; font-size: 13px; }

.inspiration-subheader a.back svg { width: 18px; height: 18px; }

.inspiration-subheader p.affiliate-disclosure { margin: 0; font-size: 13px; font-weight: 400; }

.inspiration-subheader p.affiliate-disclosure a { text-decoration: none; border-bottom: 1px dotted #000; padding-bottom: 2px; color: #000; }

@media screen and (max-width: 850px) { .inspiration-subheader a.back { display: none; } .inspiration-subheader p.affiliate-disclosure { width: 100%; text-align: center; } .two-ctas a.back { display: none; } .two-ctas a:last-of-type { float: left; margin-left: 0; } }

.category { list-style: none; margin: 40px auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: flex-start; justify-items: flex-start; grid-gap: 20px; column-gap: 40px; max-width: 1600px; width: 90%; text-align: left; }

.category li.category-title { grid-column: 1 / span 2; align-self: center; }

.category li h1 { margin-top: 0; }

.category li a { display: block; color: #151515; width: 100%; }

.category li a img { width: 100%; border-radius: 3px; -webkit-box-shadow: 0 0 6px #eee; -moz-box-shadow: 0 0 6px #eee; box-shadow: 0 0 0 6px #eee; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

.category li a h4 { border-bottom: 2px solid #fff; display: inline-block; font-weight: 500; margin: 20px 0; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

.category li a:hover h4 { color: #2962FF; }

.category li a:hover img { -webkit-box-shadow: 0 0 6px #2962FF; -moz-box-shadow: 0 0 6px #2962FF; box-shadow: 0 0 0 6px #2962FF; }

@media screen and (max-width: 840px) { .category { margin: 50px 0; grid-template-columns: 1fr; width: 100%; } .category li.category-title { grid-column: 1; align-self: center; text-align: center; } .category li { width: 90%; margin: 0 5%; } .category li h1 { font-size: 36px; } .category li h3 { font-size: 21px; } }

.more-margin { margin-top: 40px; }

.article { text-align: left; max-width: 840px; padding-top: 3vh; margin: auto; }

.article .title { text-align: center; margin: 0px auto; }

.article .title ul.breadcrumbs { list-style: none; margin: 0 0 6px 0; padding: 0; }

.article .title ul.breadcrumbs li { margin-right: 10px; padding-right: 20px; display: inline-block; background: url("../png/breadcrumb.png") no-repeat; background-size: 12px 12px; background-position: 100% 50%; }

.article .title ul.breadcrumbs li a { color: #151515; font-size: 14px; }

.article .title ul.breadcrumbs li:last-child { background-image: none; }

.article .title p.affiliate-disclosure { background: #fff; border: 1px solid #E3E8ED; padding: 10px; display: inline-block; border-radius: 3px; font-size: 14px; font-weight: 400; display: none; }

.article .title p.affiliate-disclosure a { border-bottom: 1px dashed #151515; color: #151515; }

.article .title p.affiliate-disclosure-companies { display: inline-block; }

.article .title img.stars { max-width: 170px; margin-bottom: 10px; }

.article .title h1 { margin: 0 0 5px 0; text-wrap: balance; }

.article .title h3 { margin: 15px 0px 0 0; font-weight: 500; line-height: 140%; font-size: 25px; text-wrap: balance; }

.article .title h3 a { color: #151515; border-bottom: 1px solid #cfdcff; }

.article .title p.published { font-size: 14px; color: #151515; line-height: 200%; font-weight: 300; padding-bottom: 15px; margin: 20px 0 40px 0; }

.article .title p.published span { margin: 0 5px; }

.article .title p.published a { color: #151515; border-bottom: 1px solid #CCC; padding-bottom: 2px; }

.article .title .title-image { width: 100%; margin: 20px 0 0 0; border-radius: 3px; }

.article .title iframe { height: 386.5px; width: 100%; border: none; }

.content h3 { margin-top: 50px; line-height: 130%; font-size: 20px; font-weight: 600; }

.content h4 { margin-top: 50px; font-size: 20px; font-weight: 600; line-height: 130%; }

.content p a, .content ul a, .content ol a { color: #2962FF; font-weight: 400; padding-bottom: 2px; border-bottom: 1px solid #2962FF; }

.content p a:hover, .content ul a:hover, .content ol a:hover { color: #2962FF; }

.content p li, .content ul li, .content ol li { margin-bottom: 10px; }

.content p a.cta { background: none; display: inline; padding: 0; border-radius: 0; font-size: 17px; color: #2962FF; font-weight: 400; padding-bottom: 2px; border-bottom: 1px solid #2962FF; }

.content hr { margin: 40px auto; }

.content table { border-collapse: collapse; width: 100%; max-width: 760px; margin: 0 0 20px 0; border-radius: 2px; overflow-x: auto; }

.content table th, .content table td { vertical-align: top; padding: 1.5% 3.5% 1.5% 1.5%; line-height: 165%; }

.content table th { border-bottom: 2px solid #E3E8ED; border-top: 2px solid #E3E8ED; font-weight: 500; text-align: left; }

.content table td { font-size: 16px; }

.content table tr { border-bottom: 1px solid #E3E8ED; }

.content table tr:hover { background: #FAFAFA; }

.content .bubble { background: #eaeffe; border-radius: 4px; padding: 30px; margin: 20px 0; line-height: 165%; font-weight: 300; }

.content .bubble h3 { margin-top: 0; }

.content code { word-wrap: break-word; background: #eaeffe; padding: 10px; }

.content a.toggle { float: right; display: inline-block; border-radius: 15px; border: 5px solid #eee; height: 32px; width: 42px; margin-left: 20px; background: url("../png/top.png") no-repeat; background-size: 16px 16px; background-position: 50%; text-indent: -9999em; display: none; }

.content blockquote { max-width: 738px; margin: 20px auto; }

.content img { margin: 20px auto 0 auto; width: 100%; max-width: 900px; box-shadow: 0 0 0 1px #ddd; -webkit-box-shadow: 0 0 0 1px #ddd; -moz-box-shadow: 0 0 0 1px #ddd; }

.content iframe.vimeo { margin-top: 20px; width: 900px; height: 505px; }

.content .wistia { width: 100%; max-width: 900px; margin: 0 auto; }

.content .wistia .wistia_responsive_padding { margin: 20px auto 0 auto; box-shadow: 0 0 0 1px #ddd; -webkit-box-shadow: 0 0 0 1px #ddd; -moz-box-shadow: 0 0 0 1px #ddd; }

.content a.wistia-thumbnail { padding-bottom: 0; border-bottom: 0; display: block; max-width: 900px; text-align: center; margin: 30px auto 10px auto; position: relative; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; }

.content a.wistia-thumbnail img { z-index: 0; display: block; box-shadow: 0 0 0 1px #eee; -webkit-box-shadow: 0 0 0 1px #eee; -moz-box-shadow: 0 0 0 1px #eee; border-radius: 3px; margin: 0; }

.content a.wistia-thumbnail img.play { z-index: 100; position: absolute; bottom: 50%; left: 50%; margin-left: -30px; margin-bottom: -30px; width: 60px; display: block; height: 60px; box-shadow: 0 0; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0; }

.content a.wistia-thumbnail .video-byline { border-radius: 3px; width: 72%; padding: 10% 15% 40px 13%; position: absolute; text-align: left; font-weight: 300; line-height: 135%; }

.content a.wistia-thumbnail:hover { opacity: 0.5; }

.content a.button { display: inline-block; background: #2962FF; padding: 10px 20px; border-bottom: 0; border-radius: 5px; color: #fff; margin: 20px 0; }

.content p.caption { font-size: 14px; font-weight: 500; color: #999; margin: 3px auto 40px auto; max-width: 900px; }

.content #introduction { margin-bottom: 40px; }

.content .at-a-glance { border: 1px solid #2962FF; border-radius: 10px; margin: 40px auto; }

.content .at-a-glance h4 { padding: 20px 30px; margin: 0; border-bottom: 1px solid #2962FF; font-size: 19px; }

.content .at-a-glance ul { list-style: square; padding: 0; margin: 30px 50px; }

.content .at-a-glance ul li { font-size: 24px; }

.content .at-a-glance ul li h4 { border-bottom: none; padding: 0; }

.content .at-a-glance ul li a { color: #151515; font-weight: 400; border-bottom: none; }

.content .inline-table-of-contents h4 { padding: 20px 30px; margin: 0; border-bottom: 1px solid #2962FF; font-size: 19px; }

.content .inline-table-of-contents ul { list-style: square; padding-left: 56px; }

.content .chapter { padding: 20px 0; margin-top: 20px; }

.content .chapter h2 { margin-top: 0; }

.content .chapter .inner-section { position: relative; }

.content .chapter-with-padding { padding-top: 80px; }

.content ul.related-articles { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; list-style: none; margin: 0; padding: 0; }

.content ul.related-articles li a { display: block; border-bottom: 0; }

.content ul.related-articles li a h4 { margin: 5px 0 0 0; color: #151515; }

.content ul.related-articles li a p { font-size: 15px; line-height: 180%; margin: 10px 0 0 0; color: #151515; }

.content ul.related-articles li a img { width: 100%; }

.content ul.related-articles li a:hover h4, .content ul.related-articles li a:hover p { color: #2962FF; }

.content table.roundup { border-top: 3px solid #cfdcff; border-collapse: collapse; margin: 20px 0 60px 0; width: 100%; max-width: 100%; display: table; }

.content table.roundup tr td { border-bottom: 1px solid #eaeffe; padding: 25px 0; margin: 0; vertical-align: top; min-width: 0px; }

.content table.roundup tr td.name { width: 21%; padding-right: 2%; text-align: left; }

.content table.roundup tr td.name h4 { margin: 0; font-size: 17px; font-weight: 600; }

.content table.roundup tr td.name h4 a { color: #151515; padding-bottom: 1px; border-bottom: 3px solid #eaeffe; }

.content table.roundup tr td.desc { width: 39%; padding-right: 2%; text-align: left; }

.content table.roundup tr td.desc p { font-size: 15px; font-weight: 300; margin: 0; line-height: 135%; }

.content table.roundup tr td.desc ul { margin-top: 0; padding-left: 18px; line-height: 150%; font-size: 15px; }

.content table.roundup tr td.desc ul li { margin-bottom: 10px; }

.content table.roundup tr td.stars { width: 15%; text-align: left; }

.content table.roundup tr td.stars .stars { margin: 0; max-width: 80px; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; }

.content table.roundup tr td.cta { width: 23%; text-align: right; padding: 18px 0; }

.content table.roundup tr td.cta .cta { font-size: 13px; padding: 5px 0px; width: 100%; }

.content table.roundup tr:nth-child(odd) { background-color: #fff; }

.content table.roundup tr:hover { background: #f7f7f7; }

.content table.roundup tr:hover td.name h4 a { border-bottom: 3px solid #cfdcff; }

.content .roundup-more-info { padding: 0px 0 0 0; list-style: none; margin: 0 auto; max-width: 900px; }

.content .roundup-more-info li { margin: 0; }

.content .roundup-more-info li .sticky-bar { padding: 20px 0 0 0; background: #fff; position: relative; height: 50px; z-index: 1000; box-shadow: 0px 0 0px 3px #fff; -webkit-box-shadow: 0px 0 0px 3px #fff; -moz-box-shadow: 0px 0 0px 3px #fff; }

.content .roundup-more-info li .sticky-bar h2 { margin: 0px auto; padding-bottom: 10px; position: absolute; top: 17px; left: 0px; }

.content .roundup-more-info li .sticky-bar img.stars { position: absolute; top: 4px; right: 230px; max-width: 120px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

.content .roundup-more-info li .sticky-bar .cta { position: absolute; top: 16px; right: 0px; padding: 7px 15px; font-weight: 500; width: 170px; color: #fff; border-bottom: 0; }

.content .roundup-more-info li .sticky-bar .toggle-roundup { position: absolute; top: 10px; right: 0; width: 24px; height: 24px; padding: 10px; border-radius: 5px; text-indent: -99999em; border: 1px solid #999; background: #fff url("../png/top.png") no-repeat 50% 50%; background-size: 16px 16px; }

.content .roundup-more-info li .sticky-bar .active { transform: rotate(90deg); }

.content .roundup-more-info li .inner { padding: 0px 0 30px 0; }

.content .roundup-more-info li p:first-of-type { margin-top: 10px; }

.content .roundup-more-info li ul { list-style: square; margin-left: 10px; padding-left: 18px; }

.content .roundup-more-info li ul li { margin: 10px 0 20px 0; }

@media screen and (max-width: 1000px) { .article-no-sidebar { width: 90%; margin: 0 5%; } .article { width: 100% !important; margin: 0 !important; } .article .main { width: 90%; margin: 0 5%; } .article .main .content .roundup-more-info li .sticky-bar { height: 85px; } .article .main .content .roundup-more-info li .sticky-bar h2 { top: 70px; font-size: 18px; } .article .main .content .roundup-more-info li .sticky-bar .cta { top: 46px; padding-left: 5px; padding-right: 5px; font-size: 13px; } .article .main .content .roundup-more-info li .sticky-bar .toggle-roundup { top: 50px; width: 10px; padding: 10px 5px; border: none; background-color: transparent; } .article .main .content .roundup-more-info li .sticky-bar img.stars { top: 30px; left: 0; width: 80px; right: auto; } .article .main .content .roundup-more-info li .inner { padding: 10px 0 30px 0; } .article .main .content table { overflow-x: auto; } .article .main .content table.roundup tr td.name { width: 33%; padding-right: 4%; } .article .main .content table.roundup tr td.name h4 { font-size: 15px; } .article .main .content table.roundup tr td.desc { width: 40%; padding-right: 7%; } .article .main .content table.roundup tr td.stars { width: 20%; } .article .main .content table.roundup tr td.stars .stars { width: 100%; } .article .main .content table.roundup tr td.cta { display: none; } .article .main .content table.roundup tr:hover { background: #f7f7f7; } .article .main .content table.roundup tr:hover td.name h4 a { border-bottom: 3px solid #cfdcff; } }

@media screen and (max-width: 840px) { .article .title { width: 90%; margin: 0 5%; } .article .title p.affiliate-disclosure { font-size: 12px; } .article .title img.stars { max-width: 130px; } .article .title h1 { font-size: 38px; } .article .title h3 { font-size: 21px; margin: 20px 0 10px 0; } .article .title .published { margin: 10px 0 20px 0; padding-bottom: 0; } .article .title .published p span { float: none; display: inline; } .article .title .published p img { display: none !important; } .article .title .published p a { float: right; } .article .title iframe { height: 250px; } .article .title .title-image { margin: 10px 0 0 0; } .article .content { width: 90%; margin: 5%; } .article .content .inline-table-of-contents ul { padding-left: 16px; } .article .content .at-a-glance ul { margin: 30px 20px 30px 50px; } .article .content a.wistia-thumbnail .video-byline { padding-bottom: 21px; } .article .content a.wistia-thumbnail .video-byline img.play { width: 24px; height: 24px; bottom: 20px; } .article .content .image-right { display: block; float: none; margin: 0; } .article .content table { display: block; } .article .content table td { min-width: 100px; } .article .content iframe.vimeo { width: 100%; height: auto; } .article .content .author { padding: 5% 5% 5% 35%; background: url("../jpg/author-photo-mobile.jpg"); background-size: 100px 100px; background-position: 15px 15px; background-repeat: no-repeat; } .article .content .author h4 { font-weight: 700; margin: 10px 0; } .article .content .author p { margin: 10px 0; } .article .content .author-no-image { background: none; padding: 5%; } .article .content .book-ad div h3 { font-size: 21px; } .article .content .book-ad img { width: 100px; margin: 0; } }

.roundup-subheader { position: relative; width: 100%; background: #fff; z-index: 1000; }

.roundup-subheader .inner { background: #fff; padding: 15px 0; min-height: 52px; max-width: 1600px; margin: 0 auto; width: 90%; position: relative; text-align: left; z-index: 122000; -webkit-box-shadow: 0 0 0 1px #fff; -moz-box-shadow: 0 0 0 1px #fff; box-shadow: 0 0 0 1px #fff; }

.roundup-subheader .inner ul.breadcrumbs { list-style: none; margin: 10px 0 6px 0; padding: 0; float: left; }

.roundup-subheader .inner ul.breadcrumbs li { margin-right: 1px; padding-right: 18px; display: inline-block; background: url("../png/breadcrumb.png") no-repeat; background-size: 12px 12px; background-position: 100% 50%; }

.roundup-subheader .inner ul.breadcrumbs li a { color: #151515; font-size: 15px; font-weight: 400; }

.roundup-subheader .inner ul.breadcrumbs li:last-child { background-image: none; }

.roundup-subheader .inner p.affiliate-disclosure { float: right; margin: 5px 0 0 10px; padding: 10px 15px; font-size: 13px; font-weight: 400; background: #fff; border: 1px solid #E3E8ED; border-radius: 3px; }

.roundup-subheader .inner p.affiliate-disclosure a { text-decoration: none; border-bottom: 1px dashed #000; padding-bottom: 2px; color: #000; }

@media screen and (max-width: 950px) { .roundup-subheader { display: none; } }

.roundup-title { margin: 40px 0; background: url("../png/roundup-title.png") no-repeat; background-size: 1440px 156px; background-position: 50% 0%; }

.roundup-title .mobile-disclosure { display: none; }

.roundup-title h1 { font-size: 52px; font-weight: 700; max-width: 700px; margin: 0 auto; text-wrap: balance; }

.roundup-title h3 { font-size: 23px; font-weight: 400; line-height: 140%; max-width: 700px; margin: 10px auto 25px auto; text-wrap: balance; }

.roundup-title .meta { display: flex; align-items: center; justify-content: center; gap: 10px; }

.roundup-title .meta p { font-size: 14px; color: #151515; line-height: 160%; font-weight: 300; margin: 0; }

.roundup-title .meta p a { color: #151515; text-decoration: none; }

.roundup-title .meta .meta-author, .roundup-title .meta .meta-date { flex-grow: 1; flex-basis: 0; }

.roundup-title .meta .meta-author { text-align: right; }

.roundup-title .meta .meta-date { text-align: left; }

.roundup-title .meta .meta-profile-pic { width: 80px; height: 80px; border-radius: 80px; border: 1px solid #f7f7f7; -webkit-box-shadow: 0 3px 3px #eee; box-shadow: 0 3px 3px #eee; -moz-box-shadow: 0 3px 3px #eee; }

.roundup-content { margin: 0 auto; text-align: left; max-width: 840px; }

.roundup-content h2 { font-size: 36px; font-weight: 700; }

.roundup-content h3 { font-size: 26px; font-weight: 700; margin: 35px auto 20px auto; line-height: 130%; }

.roundup-content h4 { line-height: 130%; font-size: 20px; font-weight: 600; }

.roundup-content p, .roundup-content ul, .roundup-content ol { font-size: 18px; font-weight: 300; line-height: 160%; margin: 25px 0; }

.roundup-content p strong, .roundup-content ul strong, .roundup-content ol strong { font-weight: 600; }

.roundup-content p a, .roundup-content ul a, .roundup-content ol a { padding-bottom: 2px; border-bottom: 1px solid #2962FF; text-decoration: none; }

.roundup-content p a.cta { background: none; display: inline; padding: 0 0 2px 0; border-radius: 0; font-size: 17px; color: #2962FF; font-weight: 300; padding-bottom: 2px; border-bottom: 1px solid #2962FF; text-decoration: none; }

.roundup-content p.caption { font-size: 14px; font-weight: 300; color: #999; margin: 3px auto 40px auto; max-width: 900px; }

.roundup-content section.screenshots { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; }

.roundup-content section.screenshots a { display: inline-block; }

.roundup-content section.screenshots a img { border-radius: 3px; margin: 0; }

.roundup-content .further { display: flex; background-size: 25%; margin-bottom: 2.5%; padding: 1%; background-color: #eaeffe; border-radius: 4px; position: relative; }

.roundup-content .further a { width: 70%; border: none; padding-bottom: 0; margin: 1.5%; align-self: center; display: flex; flex-direction: column; font-weight: 600; font-size: 19px; color: #151515; text-align: left; }

.roundup-content .further a:first-child { width: 30%; align-self: flex-start; }

.roundup-content .further img { margin: 0; }

.roundup-content .further span { font-weight: 400; font-size: 12px; display: block; }

.roundup-content #introduction p a { color: #151515; border-bottom: 1px solid #151515; }

.roundup-content .aside { background: #eaeffe; padding: 20px 40px; }

.roundup-content .bubble { background: #eaeffe; border-radius: 4px; padding: 30px; margin: 20px 0; line-height: 165%; font-weight: 300; }

.roundup-content .bubble h3 { margin-top: 0; }

.roundup-content a.button { display: inline-block; background: #2962FF; padding: 10px 20px; border-bottom: 0; border-radius: 5px; color: #fff; margin: 20px 0; }

.roundup-content a.back-to-toc { background: #F9FAFF; padding: 15px; margin-top: 30px; display: inline-block; border-radius: 3px; }

.roundup-content img { margin: 20px auto 0 auto; width: 100%; max-width: 900px; outline: 1px solid #ddd; outline-offset: -1px; }

.roundup-content a.wistia-thumbnail { padding-bottom: 0; border-bottom: 0; display: block; max-width: 900px; text-align: center; margin: 30px auto 10px auto; position: relative; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; }

.roundup-content a.wistia-thumbnail img { z-index: 0; display: block; box-shadow: 0 0 0 1px #eee; -webkit-box-shadow: 0 0 0 1px #eee; -moz-box-shadow: 0 0 0 1px #eee; border-radius: 3px; margin: 0; }

.roundup-content a.wistia-thumbnail img.play { outline: none; z-index: 100; position: absolute; bottom: 50%; left: 50%; margin-left: -30px; margin-bottom: -30px; width: 60px; display: block; height: 60px; box-shadow: 0 0; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0; }

.roundup-content a.wistia-thumbnail .video-byline { border-radius: 3px; width: 72%; padding: 10% 15% 40px 13%; position: absolute; text-align: left; font-weight: 300; line-height: 135%; }

.roundup-content a.wistia-thumbnail:hover { opacity: 0.5; }

.roundup-content .overview { list-style: none; margin: 30px 0 0 0; padding: 0; border-top: 1px solid #ddd; }

.roundup-content .overview li { border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 0.85fr 1.75fr .6fr 0.8fr; gap: 5px; padding: 15px 0; align-items: center; overflow: hidden; transition: background 0.2s; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; }

.roundup-content .overview li h3 { margin: 0; font-size: 18px; font-weight: 600; }

.roundup-content .overview li h3 a { color: #000; border-bottom: none; padding-bottom: 0; }

.roundup-content .overview li p { font-size: 16px; font-weight: 300; margin: 0; }

.roundup-content .overview li img { width: 98px; outline: none; margin: 0; }

.roundup-content .overview li .cta { overflow: hidden; border-radius: 30px; padding: 5px 10px; font-size: 13px; }

.roundup-content .overview li.star-3, .roundup-content .overview li.star-2, .roundup-content .overview li.star-1 { display: none; }

.roundup-content .overview li.overview-not-hidden { display: grid; }

.roundup-content .overview li:hover { background: #f7f7f7; }

.roundup-content .overview li:hover h3 a { text-decoration: underline; }

.roundup-content .overview a#overview-show-more { display: block; padding: 10px 0; color: #000; border-bottom: 0; background: #f7f7f7; text-align: center; font-size: 15px; font-weight: 500; }

.roundup-content .bubble-numbers ul { counter-reset: method-counter; }

.roundup-content .bubble-numbers ul li { margin: 0 0 1rem 0px; position: relative; counter-increment: method-counter; }

.roundup-content .bubble-numbers ul li strong { color: #2962FF; }

.roundup-content .bubble-numbers ul li::before { content: counter(method-counter); color: #fff; font-size: 1.5rem; font-weight: bold; position: absolute; --size: 32px; left: calc(-1 * var(--size) - 10px); line-height: var(--size); width: var(--size); height: var(--size); top: 0; transform: rotate(-10deg); background: #2962FF; border-radius: 50%; text-align: center; box-shadow: 1px 1px 0 #999; }

.roundup-content .mobile-table-of-contents { border: 1px solid #E3E8ED; border-radius: 10px; max-width: 760px; margin: 40px auto; display: none; }

.roundup-content .mobile-table-of-contents h4 { font-size: 19px; margin: 20px; }

.roundup-content .mobile-table-of-contents ul { list-style: square; }

.roundup-content .mobile-table-of-contents ul li a { border: none; }

.roundup-content .mobile-table-of-contents ul li a img { display: inline; width: 65px; margin: 0 0 0 2px; outline: none; }

.roundup-content .roundup-more-info { padding: 0px 0 0 0; list-style: none; margin: 0 auto; max-width: 900px; }

.roundup-content .roundup-more-info li { margin: 0 0 40px 0; }

.roundup-content .roundup-more-info li .sticky-roundup-companies { padding: 20px 0; backdrop-filter: blur(12px); -moz-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.9); position: relative; z-index: 1000; display: grid; grid-template-columns: 2.5fr 0.7fr 1.2fr; column-gap: 20px; align-items: center; justify-items: flex-start; }

.roundup-content .roundup-more-info li .sticky-roundup-companies h2 { margin: 0px auto; text-align: left; width: 100%; font-size: 32px; }

.roundup-content .roundup-more-info li .sticky-roundup-companies img.stars { width: 100%; margin: 0; outline: none; }

.roundup-content .roundup-more-info li .sticky-roundup-companies .cta { padding: 7px 2.5%; font-weight: 500; width: 90%; color: #fff; border-bottom: 0; text-decoration: none; border-radius: 50px; }

.roundup-content .roundup-more-info li .inner { padding: 0px 0 30px 0; }

.roundup-content .roundup-more-info li .inner p:first-child { margin-top: 0; }

.roundup-content .roundup-more-info li ul { list-style: square; }

.roundup-content .roundup-more-info li ul, .roundup-content .roundup-more-info li ol { margin-left: 10px; padding-left: 18px; }

.roundup-content .roundup-more-info li ul li, .roundup-content .roundup-more-info li ol li { margin: 10px 0 20px 0; }

.roundup-content .roundup-more-info li.star-3, .roundup-content .roundup-more-info li.star-2, .roundup-content .roundup-more-info li.star-1 { display: none; }

.roundup-content .roundup-more-info li.roundup-not-hidden { display: block; }

.roundup-content .roundup-more-info a#roundup-show-more { display: block; padding: 15px 0; color: #2962FF; border: 1px solid #2962FF; border-radius: 50px; text-align: center; font-size: 19px; font-weight: 600; }

.roundup-content .chapter { padding-top: 50px; }

.roundup-content table { border-collapse: collapse; width: 100%; max-width: 760px; margin: 0 0 20px 0; border-radius: 2px; overflow-x: auto; display: block; }

.roundup-content table th, .roundup-content table td { vertical-align: top; padding: 1.5% 3.5% 1.5% 1.5%; line-height: 165%; }

.roundup-content table th { background-color: #fff; border-bottom: 2px solid #E3E8ED; border-top: 2px solid #E3E8ED; font-weight: 500; text-align: left; }

.roundup-content table td { font-size: 16px; }

.roundup-content table tr { border-bottom: 1px solid #E3E8ED; }

.roundup-content table tr:hover { background: #FAFAFA; }

.roundup-table { max-width: 800px; margin: 20px auto; text-align: center; background: #fff url("../png/top.png") no-repeat; background-size: 16px; background-position: 50% 85%; border: 1px dashed #000; border-radius: 4px; padding: 40px 20px 30px 20px; }

.roundup-table h2 { max-width: 700px; margin: 0 auto; text-align: center; font-size: 30px; }

.roundup-table p.round-table-description { font-size: 21px; margin: 5px auto; padding-bottom: 30px; text-align: center; }

.roundup-table img.big-stars { outline: none; max-width: 120px; margin: 0 0 10px 0; }

.roundup-table .table { margin: 20px 0 60px 0; border-bottom: 1px solid #ddd; text-align: left; }

.roundup-table .table .row { display: grid; grid-template-columns: 1fr 0.75fr 2.75fr; column-gap: 10px; text-align: left; align-items: flex-start; justify-items: flex-start; padding: 20px 10px; }

.roundup-table .table .row h4 { font-size: 17px; font-weight: 600; margin: 0; }

.roundup-table .table .row h4 a { color: #151515; text-decoration: underline; }

.roundup-table .table .row p { font-size: 16px; font-weight: 400; margin: 0; }

.roundup-table .table .row p a { color: #151515; text-decoration: none; }

.roundup-table .table .row img.stars { margin: 3px 0 0 0; width: 100%; max-width: 90px; outline: none; }

.roundup-table .table .row:hover { background: #eaeffe; }

.roundup-table .table .row:nth-child(even) { background: #f9f9f9; }

.roundup-table .table .legend { padding: 20px 10px; border-bottom: 1px solid #999; border-top: 1px solid #ddd; }

.roundup-table .table .legend h4 { font-size: 14px; text-transform: uppercase; font-weight: 700; }

@media screen and (max-width: 1250px) { .roundup-title { background-size: 1296px 140.4px; } .roundup-title h1 { font-size: 48px; max-width: 640px; } .roundup-title h3 { font-size: 22px; max-width: 580px; } }

@media screen and (max-width: 850px) { .roundup-title { padding-top: 20px; width: 90%; margin: 0 5%; background: none; } .roundup-title p.mobile-disclosure { display: block; background: #fff; text-align: center; line-height: 140%; margin: 5px 0; padding-bottom: 5px; border-radius: 3px; font-size: 12px; font-weight: 300; } .roundup-title p.mobile-disclosure a { border-bottom: 1px dashed #151515; color: #151515; white-space: nowrap; } .roundup-title h1 { font-size: 44px; margin-top: 10px; width: 100%; max-width: 600px; } .roundup-title h3 { font-size: 21px; margin: 10px auto; width: 100%; max-width: 600px; } .roundup-title .meta p { font-size: 12px; } .roundup-content .overview li { display: block; position: relative; } .roundup-content .overview li h3 { width: 80%; padding: 15px 0; } .roundup-content .overview li img { position: absolute; top: 32px; right: 0; } .roundup-content .overview li .cta { display: block; margin: 15px 0; } .roundup-content .overview li.overview-not-hidden { display: block; } }

@media screen and (max-width: 950px) { .roundup-table { padding-bottom: 40px; background-position: 50% 90%; } .roundup-table h2 { font-size: 22px; } .roundup-table p.round-table-description { font-size: 17px; margin: 10px 0; padding-bottom: 0; } .roundup-table .table { padding: 10px 0; border-top: 1px solid #cfdcff; border-bottom: none; } .roundup-table .table .row { display: block; padding: 15px 0; position: relative; border-bottom: 1px solid #cfdcff; } .roundup-table .table .row img.stars { position: absolute; top: 15px; right: 15px; } .roundup-table .table .row p { margin: 20px 0; } .roundup-table .table .row:nth-child(even) { background: #fff; } .roundup-table .table .legend { display: none; } .roundup-toc span { font-size: 14px; background-size: 11px 11px; } .roundup-content { width: 90%; margin: 0 5%; } .roundup-content h2 { font-size: 32px; } .roundup-content h3 { font-size: 22px; } .roundup-content .further a { margin: 2.5%; font-size: 17px; } .roundup-content .further span { font-size: 12px; } .roundup-content .aside { padding: 5px 10px; } .roundup-content .mobile-table-of-contents { display: block; } .roundup-content .roundup-more-info li .sticky-roundup-companies { height: 40px; position: relative; display: block; padding: 10px 0; } .roundup-content .roundup-more-info li .sticky-roundup-companies h2 { top: 70px; font-size: 16px; line-height: 100%; padding-top: 2px; } .roundup-content .roundup-more-info li .sticky-roundup-companies .cta { position: absolute; top: 10px; right: 0px; padding: 6px 10px; width: auto; font-size: 12px; min-width: 130px; display: inline-block; } .roundup-content .roundup-more-info li .sticky-roundup-companies .toggle-roundup { top: 50px; width: 10px; padding: 10px 5px; border: none; background-color: transparent; } .roundup-content .roundup-more-info li .sticky-roundup-companies img.stars { top: 30px; left: 0; width: 80px; right: auto; } .roundup-content .roundup-more-info li .inner { padding: 10px 0 30px 0; } .roundup-content .roundup-more-info li .inner p:first-of-type { font-size: 17px; } .roundup-content .roundup-more-info li .inner p:first-of-type a, .roundup-content .roundup-more-info li .inner p:first-of-type a.cta { font-size: 17px; } .roundup-content .roundup-more-info li .inner ul, .roundup-content .roundup-more-info li .inner ol { padding-left: 0; margin-left: 8%; width: 92%; } .roundup-content .roundup-more-info li .inner .pros-cons { grid-template-columns: 1fr; } .roundup-content .roundup-more-info li .inner .pros-cons ul { width: 100%; } }

.inspiration .title { text-align: center; margin: 5vh auto 0 auto; max-width: 1000px; }

.inspiration .title h1 { margin: 5px 0; text-wrap: balance; font-weight: 900; }

.inspiration .title h3 { margin: 20px 100px; text-wrap: balance; }

.inspiration .title h3 a { color: #151515; border-bottom: 1px solid #cfdcff; }

.inspiration .title .filter { position: relative; display: inline; }

.inspiration .title .filter input { border: 1px solid #000; width: 300px; border-radius: 100px; padding: 10px 40px 10px 20px; font-size: 17px; outline: none; }

.inspiration .title .filter svg { position: absolute; top: 0; right: 20px; }

.inspiration .title #errorMessage { margin: 100px 0; font-size: 21px; font-style: italic; display: none; }

.inspiration .title .published { position: relative; height: 80px; display: flex; justify-content: center; align-content: center; }

.inspiration .title .published p { font-size: 15px; line-height: 140%; font-weight: 400; align-self: center; }

.inspiration .title .published p span { display: block; font-size: 13px; }

.inspiration .title .published p a { color: #151515; border: none; }

.inspiration .title .published #date { text-align: right; margin: 10px 0px 0 0; }

.inspiration .title .published #author { text-align: left; margin: 10px 0 0 0px; }

.inspiration .title .published img { border-radius: 100%; max-width: 70px; margin: 5px 10px; -webkit-box-shadow: 0 0px 0px 1px #ccc; box-shadow: 0 0px 0px 1px #ccc; -moz-box-shadow: 0 0px 0px 1px #ccc; }

.inspiration #introduction { text-align: left; max-width: 760px; margin: 0 auto; }

.inspiration #introduction a { color: #2962FF; border-bottom: 1px solid #2962FF; }

.inspiration #introduction img { max-width: 100%; }

.inspiration #introduction li { margin-bottom: 5px; }

.inspiration #introduction p.affiliate-disclaimer a { color: #151515; border-bottom: 1px solid #151515; padding-bottom: 3px; }

.inspiration #introduction p a.cta { background: none; display: inline; padding: 0; border-radius: 0; font-size: 17px; color: #2962FF; font-weight: 300; border-bottom: 1px solid #2962FF; }

.inspiration #introduction p.arrow-tip { border-radius: 10px; background: #f7f7f7; display: inline-block; padding: 9px 18px; font-size: 15px; font-weight: 500; }

.inspiration #introduction p.arrow-tip span { background: #3D4CF4; background: linear-gradient(to right, #3D4CF4 0%, #FF2862 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

ul.inspiration-index { list-style: none; margin: 5vh auto 5vh; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: flex-start; justify-items: flex-end; grid-gap: 20px; column-gap: 40px; max-width: 1600px; width: 90%; text-align: left; }

ul.inspiration-index li h1 { margin-top: 0; font-size: 43px; }

ul.inspiration-index li h3 { font-size: 21px; }

ul.inspiration-index li a { display: block; color: #151515; width: 100%; }

ul.inspiration-index li a img { width: 100%; border-radius: 3px; -webkit-box-shadow: 0 0 6px #eee; -moz-box-shadow: 0 0 6px #eee; box-shadow: 0 0 0 6px #eee; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

ul.inspiration-index li a h4 { border-bottom: 2px solid #fff; display: inline-block; font-weight: 500; margin: 12px 0 20px 0; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

ul.inspiration-index li a .video-thumb { position: relative; background: #000; border-radius: 10px; }

ul.inspiration-index li a .video-thumb img#image { display: block; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

ul.inspiration-index li a .video-thumb #icon { background: #2962FF url("../png/play-circle.png") no-repeat; background-position: 50% 50%; background-size: 32px 32px; position: absolute; top: 50%; left: 50%; width: 100px; height: 50px; margin-left: -50px; margin-top: -25px; text-indent: -99999em; display: block; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

ul.inspiration-index li a:hover h4 { color: #2962FF; }

ul.inspiration-index li a:hover img { -webkit-box-shadow: 0 0 6px #2962FF; -moz-box-shadow: 0 0 6px #2962FF; box-shadow: 0 0 0 6px #2962FF; }

.inspiration-footer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: flex-start; border-top: 1px solid #E3E8ED; padding-top: 30px; }

.inspiration-footer a { display: inline-block; padding: 5px 10px; border-radius: 10px; color: #2962FF; font-weight: 500; font-size: 15px; border: 3px solid #2962FF; justify-self: flex-end; margin-top: 2px; }

h2.more-examples { text-align: center; margin: 60px 0 20px 0; }

.example-website { position: relative; padding: 40px 0 0 0; text-align: center; }

.example-website .sticky-bar { backdrop-filter: blur(12px); -moz-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.85); width: 100%; padding: 3px 0; z-index: 1000; }

.example-website .sticky-bar .inside { position: relative; max-width: 760px; margin: 0 auto; text-align: left; }

.example-website .sticky-bar .inside h2 { text-align: left; font-size: 21px; font-weight: 500; position: relative; margin: 6px 0 6px 0; }

.example-website .sticky-bar .inside h2 a { color: #151515; }

.example-website .sticky-bar .inside h2 span.template-span { font-size: 14px; font-weight: 400; display: inline-block; margin: 0; }

.example-website .sticky-bar .inside span.made-with { display: block; text-align: left; margin: 6px 0 12px 0; }

.example-website .sticky-bar .inside span.made-with a.cta { text-transform: none; font-size: 19px; font-weight: 500; background: none; padding: 0 0 1px; display: inline; margin: 0; width: auto; height: auto; color: #2962FF; border-bottom: 2px solid #2962FF; border-radius: 0; padding-bottom: 2px; -webkit-box-shadow: none; box-shadow: none; -moz-box-shadow: none; }

.example-website .sticky-bar .inside p.coupon { text-align: left; background: #FCFFA4; font-size: 14px; margin: 0 0 20px 0; font-weight: 500; padding: 1px 3px; display: inline-block; }

.example-website .description { text-align: center; }

.example-website .description img { margin: 20px auto 0 auto; width: 100%; max-width: 900px; box-shadow: 0 0 0 4px #eee; -webkit-box-shadow: 0 0 0 4px #eee; -moz-box-shadow: 0 0 0 4px #eee; }

.example-website .description p, .example-website .description ul, .example-website .description ol { margin: 20px auto; max-width: 760px; text-align: left; }

.example-website .description p a.example-link, .example-website .description ul a.example-link, .example-website .description ol a.example-link { color: #151515; text-decoration: underline; border: none; font-size: 17px; }

.example-website img { border-radius: 3px; -webkit-box-shadow: 0 0 4px #eee; -moz-box-shadow: 0 0 4px #eee; box-shadow: 0 0 0px 4px #eee; }

.example-website .screenshot { text-align: center; margin: 0 auto 20px auto; max-width: 1050px; }

.example-website .screenshot img { margin: 5px 0 10px 0; max-width: 1050px; }

.template-suggestion { text-align: center; margin: 30px auto 30px auto; max-width: 1350px; padding: 0 24px; }

.template-suggestion a.cta { background: none; display: inline; padding: 0; border-radius: 0; font-size: 23px; color: #2962FF; font-weight: 500; }

.template-suggestion a.paid-cta { display: none; }

.template-suggestion h3 { max-width: 760px; font-weight: 500; text-align: left; margin: 0 auto; }

.template-suggestion h3 a { color: #2962FF; }

.template-suggestion .images { display: flex; gap: 24px; width: 100%; margin: 12px auto 20px auto; }

.template-suggestion .images a img { border: 4px solid #eee; width: 100%; border-radius: 8px; }

.template-suggestion .images a:hover img { border: 4px solid #2962FF; }

.template-suggestion p { max-width: 760px; text-align: left; margin: 0 auto; }

.template-suggestion p a { text-decoration: underline; }

.email-course { width: 80%; padding: 0 10% 30px 10%; margin: 100px auto 20px auto; text-align: center; background: #f7f7f7; border-radius: 30px; position: relative; }

.email-course span.free { position: absolute; top: 15px; right: 15px; border-radius: 20px; padding: 12px; background: #2962FF; color: #fff; font-weight: 500; text-transform: uppercase; }

.email-course h4 { color: #999; font-size: 16px; text-transform: uppercase; font-weight: 700; margin: 10px 0; }

.email-course h2 { font-size: 33px; margin: 10px auto; max-width: 400px; }

.email-course h2 span { color: #FF2862; }

.email-course hr { margin: 20px 0; }

.email-course p { font-size: 18px; }

.email-course ul { text-align: left; padding-left: 19px; }

.email-course ul li { margin-bottom: 10px !important; font-size: 18px; }

.email-course ul li strong { font-weight: 500; color: #FF2862; }

.email-course img { margin-top: -90px; max-width: 200px !important; }

.email-course #mc_embed_signup { width: 100%; max-width: 608px; position: relative; margin-top: 40px; }

.email-course #mc_embed_signup form { margin: 20px 0 0 0; }

.email-course #mc_embed_signup label { display: none; }

.email-course #mc_embed_signup input.email { font-size: 17px; padding: 5px 20px; max-width: 440px; border-radius: 50px 0 0 50px; height: 40px; background: #fff; border: none; border: 2px solid #FF2862; }

.email-course #mc_embed_signup input.button { -webkit-appearance: none; cursor: pointer; position: absolute; top: 0px; right: 0px; font-size: 17px; font-weight: 900; width: 130px; background: #FF2862; color: #fff; border-radius: 0 50px 50px 0; border: none; height: 54px; }

@media (max-width: 1600px) { .example-website .screenshot { max-width: 900px; } .example-website .screenshot img { max-width: 900px; } ul.inspiration-index { grid-template-columns: 1fr 1fr 1fr; } }

@media screen and (max-width: 992px) { .email-course span.free { font-size: 15px; padding: 10px; } .email-course h4 { font-size: 15px; } .email-course h2 { font-size: 33px; } .email-course p { font-size: 17px; } .email-course ul li { font-size: 17px; } .email-course img { max-width: 120px !important; margin-top: -55px; } .email-course #mc_embed_signup input.email { font-size: 15px; width: 90%; } .email-course #mc_embed_signup input.button { font-size: 15px; } .inspiration .title { margin-top: 10px; } .inspiration .title p.affiliate-disclosure { font-size: 12px; } .inspiration .title h1 { font-size: 32px; } .inspiration .title h3 { font-size: 21px; margin: 20px 0; } .inspiration .title .filter input { width: 50%; min-width: 200px; } .inspiration .title .published p { font-size: 13px; } .inspiration .title .published p span { font-size: 11px; } .inspiration #introduction p:first-child { font-size: 17px; line-height: 165%; } .inspiration #introduction p.arrow-tip { display: none; } .inspiration .top-website-builders { grid-template-columns: 1fr; padding: 0; border: none; } .inspiration .top-website-builders h2 { margin-bottom: 0; font-size: 21px; } .inspiration .top-website-builders ul { border-left: 0; padding-left: 18px; } .example-website { padding: 10px 0 0 0; } .example-website .sticky-bar .inside { width: 90%; padding: 0px 5%; } .example-website .sticky-bar .inside h2 { font-size: 21px; text-align: center; } .example-website .sticky-bar .inside h2 span.template-span { display: block; } .example-website .sticky-bar .inside span.made-with { display: block; font-weight: 400; font-size: 15px; text-align: center; } .example-website .sticky-bar .inside span.made-with a.cta { font-weight: 400; font-size: 16px; } .example-website img { width: 90%; max-width: 90%; margin: 5%; } .example-website .screenshots img.one, .example-website .screenshots img.two, .example-website .screenshots img.three { width: 90%; max-width: 90%; margin: 5%; } ul.inspiration-index { margin: 50px 0; grid-template-columns: 1fr; width: 100%; } ul.inspiration-index li.inspiration-title { grid-column: 1; align-self: center; text-align: center; } ul.inspiration-index li { width: 90%; margin: 0 5%; } }

@media screen and (max-width: 660px) { .email-course #mc_embed_signup input.email { max-width: 280px; } }

@media screen and (max-width: 500px) { .email-course #mc_embed_signup input.email { max-width: 200px; } .email-course #mc_embed_signup input.button { max-width: 110px; padding: 0; } }

span.template-categories { display: block; }

span.template-categories a { display: inline; white-space: nowrap; background: #eaeffe; padding: 5px 10px; line-height: 250%; border-radius: 10px; margin: 0 5px 15px 5px; color: #151515; font-size: 16px; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

span.template-categories a:hover { background: #2962FF; color: #fff; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

span.template-categories a.active { background: #2962FF; color: #fff; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

.related-template-articles { margin-top: 30px; padding: 30px 0; }

.related-template-articles ul.templates-index li a h4 { border-bottom: 0px; }

.templates { list-style: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 20px 0; margin: 5vh 0 5vh 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }

.templates li a.templates-cta { display: block; position: relative; }

.templates li a.templates-cta img { width: 100%; border: 1px solid #ddd; }

.templates li a.templates-cta .info { display: flex; align-items: flex-start; justify-content: space-between; opacity: 0; width: 92%; position: absolute; border: 1px solid #ddd; bottom: 7.5%; left: 2.5%; background: rgba(255, 255, 255, 0.8); padding: 1.5%; border-radius: 6px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }

.templates li a.templates-cta .info h3 { line-height: 120%; margin: 0; font-size: 17px; color: #000; font-weight: 700; }

.templates li a.templates-cta .info p { margin: 0; font-size: 15px; color: #000; }

.templates li a.templates-cta .info span.button { font-size: 15px; font-weight: 700; display: inline-block; background: #2962FF; padding: 10px 20px; border-radius: 3px; color: #fff; }

.templates li a.templates-cta:hover .info { opacity: 1; }

@media screen and (max-width: 800px) { .templates { grid-template-columns: 1fr; gap: 40px; } .templates li a.templates-cta .info { opacity: 1; position: relative; width: 100%; bottom: auto; left: auto; border: none; padding: 0; border-radius: 0px; margin: 5px 0 25px 0; } .templates li a.templates-cta .info span.button { font-size: 13px; min-width: 95px; text-align: center; } }

.google-cloud { max-width: 1000px; text-align: center; width: 90%; padding: 40px 5% 20px 5%; margin: 0 auto; }

.google-cloud .logo { display: flex; justify-content: center; }

.google-cloud .logo a { width: 200px; display: block; }

.google-cloud .logo a img { width: 100%; }

.google-cloud .gc-explainer { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 20px 0; margin-top: 40px; display: flex; text-align: left; gap: 20px; }

.google-cloud .gc-explainer img { max-width: 300px; }

.google-cloud .gc-explainer h1 { font-weight: 500; font-size: 32px; line-height: 160%; }

.google-cloud .gc-explainer a { display: inline-block; border-radius: 40px; padding: 15px 30px; background: #2962FF; color: #fff; font-weight: 500; }

@media screen and (max-width: 992px) { .google-cloud { padding: 20px 5%; } .google-cloud .gc-explainer { display: block; text-align: center; padding-bottom: 40px; margin-top: 0; border-top: 0; } .google-cloud .gc-explainer img { max-width: 180px; } .google-cloud .gc-explainer h1 { font-size: 22px; } }

.google-cloud .gc-content { text-align: left; max-width: 700px; margin: 0px auto; }

.google-cloud .gc-content h2 { text-align: left; font-size: 21px; font-weight: 500; margin-top: 60px; }

.google-cloud .gc-content p { line-height: 160%; }

.google-cloud .gc-content p a { text-decoration: underline; }

@media screen and (max-width: 992px) { .google-cloud .gc-content h2 { font-size: 18px; } }

.splash-quote { text-align: center; font-size: 24px; padding: 2.5% 5%; margin: 0 auto; border: 0; background: #eaeffe; font-style: normal; margin-bottom: 30px; font-weight: 400; max-width: 1000px; }

.page { width: 90%; padding: 2.5% 5%; max-width: 800px; text-align: left; margin: 0 auto; }

.page h2 { margin-top: 40px; }

.page p, .page ul { line-height: 180%; font-size: 18px; font-weight: 300; }

.page p a, .page ul a { border-bottom: 1px solid #2962FF; padding-bottom: 2px; }

.page blockquote { margin-left: 0; font-size: 22px; }

.page ul.contributors { list-style: none; margin: 0; padding: 0; }

.page ul.contributors li { display: inline-block; width: 150px; text-align: center; }

.page ul.contributors li a { border-bottom: none; padding-bottom: 0; color: #151515; }

.page ul.contributors li img { max-width: 100px; border-radius: 100%; border: 1px solid #E3E8ED; }

.page ul.contributors li h5 { font-weight: 500; margin: 0 0 30px 0; }

.page .image-right { float: right; margin: 0 0 30px 60px; }

.page .image-right img { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; max-width: 300px; }

.page .image-right p.caption { margin: 0; text-align: center; font-size: 13px; color: #999; }

.page .quiz-widget { width: 100%; border-radius: 5px; box-shadow: 0px 10px 20px #ddd; -moz-box-shadow: 0px 10px 20px #ddd; -webkit-box-shadow: 0px 10px 20px #ddd; }

.page .quiz-widget .typeform-widget { height: 700px; }

.page .quiz-widget form.quiz-feedback { background: #1841a6; padding-top: 30px; border-radius: 0 0 5px 5px; }

.page .quiz-widget form.quiz-feedback .field { display: block; position: relative; height: 80px; }

.page .quiz-widget form.quiz-feedback .field label { position: absolute; top: 4px; font-size: 17px; left: 2.5%; width: 29%; color: #e8ecf6; }

.page .quiz-widget form.quiz-feedback .field input, .page .quiz-widget form.quiz-feedback .field textarea { border-radius: 4px; position: absolute; top: 0px; left: 35%; width: 39%; padding: 1%; background: #e8ecf6; font-size: 16px; outline: none; border: none; font-family: "Gotham SSm A", "Gotham SSm B", sans-serif; }

.page .quiz-widget form.quiz-feedback .field button { position: absolute; top: 0px; right: 2.5%; background: #2962FF; width: 20%; padding: 2.5% 1.5%; font-weight: 700; color: #fff; font-size: 15px; border: none; cursor: pointer; border-radius: 4px; }

.author-bio { max-width: 650px; margin: 40px auto; text-align: center; }

.author-bio img { max-width: 180px; border: 9px solid #eee; border-radius: 100%; margin: 0 auto; }

.author-bio h1 { font-size: 36px; }

.author-bio p a { border-bottom: 1px solid #2962FF; padding-bottom: 2px; }

.all-content { padding: 80px 0; text-align: center; }

.all-content h2 { font-size: 34px; }

.all-content p { max-width: 800px; font-size: 19px; margin: 0 auto 50px auto; }

.all-content p a { color: #151515; border-bottom: 1px solid #2962FF; padding-bottom: 2px; }

.all-content h4 { text-transform: uppercase; font-size: 14px; font-weight: 600; text-align: left; }

.all-content ul { list-style: none; margin: 0 0 40px 0; padding: 0; text-align: left; }

.all-content ul a { display: block; color: #151515; border-bottom: 1px solid #cfdcff; padding-bottom: 2px; margin-bottom: 3px; font-size: 16px; font-weight: 400; }

.all-content ul a span { display: none; }

.all-content ul a span.popular { display: inline; color: #2962FF; text-transform: uppercase; font-size: 10px; font-weight: 700; margin-left: 2px; }

.all-content ul a:hover { color: #2962FF; }

.all-content ul a:hover span { display: inline; }

.all-content ul a:hover span.popular { color: #2962FF; }

.all-content .three-col-left { float: left; width: 28%; margin-right: 5%; }

.all-content .three-col-mid { float: left; width: 28%; margin-right: 5%; }

.all-content .three-col-right { float: right; width: 28%; }

@media screen and (max-width: 992px) { .splash-quote { text-align: left; } .page .image-right { display: block; float: none; margin: 0; text-align: center; } .page .quiz-widget .typeform-widget { height: 400px; } .page .quiz-widget form.quiz-feedback { background: #f1f1f1; } .page .quiz-widget form.quiz-feedback .field { height: 120px; } .page .quiz-widget form.quiz-feedback .field label { text-align: center; color: #151515; position: relative; top: auto; left: auto; display: block; width: 95%; margin: auto 2.5%; } .page .quiz-widget form.quiz-feedback .field textarea { border: 1px solid #ddd; background: #fff; top: 35px; left: 2.5%; width: 60%; height: 44px; } .page .quiz-widget form.quiz-feedback .field button { border: 1px solid #ddd; background: #fff; color: #151515; font-weight: 400; top: 35px; right: 2.5%; width: 30%; } .all-content .three-col-left, .all-content .three-col-mid, .all-content .three-col-right { float: none; width: 100%; margin: 0; } }

.blog-splash { margin: 60px auto 80px; text-align: center; }

.blog-splash h1 { margin-bottom: 10px; font-size: 56px; }

.blog-splash h3 { font-size: 22px; margin-top: 0; }

.blog-splash h3 a { text-decoration: underline; color: #151515; }

.blog-splash span.categories a { display: inline-block; background: #eaeffe; padding: 5px 10px; border-radius: 10px; margin: 0 5px 10px 5px; color: #151515; font-size: 18px; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

.blog-splash span.categories a:hover { background: #2962FF; color: #fff; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

ul.blog-index { list-style: none; margin: 40px auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: flex-start; justify-items: flex-end; grid-gap: 20px; column-gap: 40px; max-width: 1600px; width: 90%; text-align: left; }

ul.blog-index li a { display: block; color: #151515; width: 100%; }

ul.blog-index li a img { width: 100%; border-radius: 10px; }

ul.blog-index li a h4 { border-bottom: 2px solid #fff; display: inline-block; font-size: 17px; font-weight: 500; margin: 10px 0 20px 0; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; }

ul.blog-index li a p { margin: 0 0 20px 0; }

ul.blog-index li a button { margin-top: 5px; cursor: pointer; background: #fff; font-size: 17px; border: 3px solid #000; display: inline-block; padding: 10px 20px; color: #000; border-radius: 4px; font-weight: 500; }

ul.blog-index li a .video-thumb { position: relative; background: #000; border-radius: 10px; }

ul.blog-index li a .video-thumb img#image { opacity: 0.85; display: block; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; width: 100%; }

ul.blog-index li a .video-thumb #icon { background: #2962FF url("../png/play-circle.png") no-repeat; background-position: 50% 50%; background-size: 32px 32px; position: absolute; top: 50%; left: 50%; width: 100px; height: 50px; margin-left: -50px; margin-top: -25px; text-indent: -99999em; display: block; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

ul.blog-index li:first-child { grid-column: 1 / span 3; align-self: center; justify-self: flex-start; }

ul.blog-index li:first-child a { display: flex; justify-content: space-between; padding-bottom: 40px; gap: 40px; align-items: center; }

ul.blog-index li:first-child a img { width: 60%; }

ul.blog-index li:first-child a .post-info { width: 35%; }

ul.blog-index li:first-child a .post-info h4 { font-size: 46px; font-weight: 700; }

ul.blog-index li:first-child a .post-info p { font-size: 21px; margin-top: 10px; }

@media screen and (max-width: 1100px) { ul.blog-index { column-gap: 2.5%; grid-template-columns: 1fr 1fr; } ul.blog-index li { width: 90%; margin: 0 5%; } ul.blog-index li:first-child { grid-column: 1 / span 1; } ul.blog-index li:first-child a { display: block; padding-bottom: 0; } ul.blog-index li:first-child a img { width: 100%; } ul.blog-index li:first-child a button { display: none; } ul.blog-index li:first-child a .video-thumb { width: 100%; } ul.blog-index li:first-child a .post-info { width: 100%; } ul.blog-index li:first-child a .post-info h4 { font-size: 21px; font-weight: 500; } ul.blog-index li:first-child a .post-info p { font-size: 17px; } }

@media screen and (max-width: 850px) { ul.blog-index { margin: 50px 0; grid-template-columns: 1fr; width: 100%; column-gap: 0; } ul.blog-index li.inspiration-title { grid-column: 1; align-self: center; } ul.blog-index li { width: 90%; margin: 0 5%; } }

.navigator { list-style: none; margin: 40px 0; padding: 0; }

.navigator li.one { float: left; }

.navigator li.two { float: right; }

.navigator li { width: 38%; padding: 3% 4%; margin: 2%; border-radius: 2px; box-shadow: 0px 0px 0 2px #eee; -webkit-box-shadow: 0px 0px 0 2px #eee; -moz-box-shadow: 0px 0px 0 2px #eee; }

.navigator li h5 { color: #999; text-transform: uppercase; font-size: 11px; font-weight: 700; margin: 0; }

.navigator li h2 { margin: 10px 0; }

.navigator li p a, .navigator li ul a, .navigator li ol a { border-bottom: 1px solid #cfdcff; padding-bottom: 3px; }

.navigator li p { font-size: 19px; line-height: 170%; }

.navigator li a { color: #151515; }

.navigator li a:hover { color: #2962FF; }

.navigator li hr { border: none; height: 1px; margin: 20px 0; background: #ddd; }

.navigator li ul, .navigator li ol { list-style: none; margin: 20px 0; padding: 0 0 0 0px; }

.navigator li ul li, .navigator li ol li { width: 100%; padding: 0; margin: 0 0 5px; border: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }

.navigator li ul li img, .navigator li ol li img { max-width: 80px; margin-left: 5px; line-height: 10%; }

.navigator li ol { list-style: decimal; padding-left: 23px; }

@media screen and (max-width: 850px) { .navigator li.one { float: none; } .navigator li.two { float: none; } .navigator li { width: 90%; padding: 5%; margin: 20px 0; } .navigator li h2 { font-size: 30px; } .navigator li p { font-size: 17px; } }

/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled { margin-bottom: 60px; position: relative; }

.flickity-slider img { margin-top: 0 !important; outline: none !important; }

.flickity-enabled:focus { outline: none; }

.flickity-viewport { overflow: hidden; position: relative; height: 100%; }

.flickity-slider { position: absolute; width: 100%; height: 100%; }

/* draggable */
.flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

/* ---- flickity-button ---- */
.flickity-button { position: absolute; background: rgba(255, 255, 255, 0.75); border: none; color: #333; }

.flickity-button:hover { background: white; cursor: pointer; }

.flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; }

.flickity-button:active { opacity: 0.6; }

.flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; }

.flickity-button-icon { fill: currentColor; }

/* ---- previous/next buttons ---- */
.flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); opacity: 1; }

.flickity-prev-next-button:hover { opacity: 1; }

.flickity-prev-next-button.previous { left: 20px; }

.flickity-prev-next-button.next { right: 20px; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: -50px; }

.flickity-rtl .flickity-prev-next-button.next { right: auto; left: -50px; }

.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }

/* ---- page dots ---- */
.flickity-page-dots { position: absolute; width: 100%; bottom: -50px; padding: 0; margin: 0; opacity: 1; list-style: none; text-align: center; line-height: 1; }

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot { display: inline-block; width: 6px; height: 6px; margin: 0 4px !important; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; }

.flickity-page-dots .dot.is-selected { opacity: 1; }

@media screen and (max-width: 992px) { .flickity-prev-next-button { display: none; } .flickity-page-dots { display: block; } }

/** Featherlight – ultra slim jQuery lightbox Version 1.3.4 - http://noelboss.github.io/featherlight/ Copyright 2015, Noël Raoul Bossart (http://www.noelboss.com) MIT Licensed. */
@media all { .answer { max-width: 600px; padding: 20px; background: #fff; } .answer h2 { cursor: pointer; margin-top: 0; font-size: 23px; font-weight: 400; color: #333; } .answer .inner { display: none; } .answer a { text-decoration: underline; } .answer p, .answer ol, .answer ul { font-size: 17px; line-height: 25px; } .answer p li, .answer ol li, .answer ul li { margin-bottom: 15px; } .answer p strong, .answer ol strong, .answer ul strong { color: #333; font-weight: 500; } .featherlight { display: none; /* dimensions: spanning the background from edge to edge */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483647; /* z-index needs to be >= elements on the site. */ /* position: centering content */ text-align: center; /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */ white-space: nowrap; /* styling */ cursor: pointer; background: #000; /* IE8 "hack" for nested featherlights */ background: rgba(0, 0, 0, 0); } .featherlight h4 { color: #151515; margin: 15px 0 0 0; padding-bottom: 10px; font-size: 17px; } .featherlight ul { list-style: none; margin: 20px 0 0 0; padding: 0; font-size: 16px; color: #151515; } .featherlight ul li { margin-bottom: 15px; position: relative; padding-top: 6px; } .featherlight ul li h4 { margin: 0; font-weight: 300; color: #999; } .featherlight ul li h4 a { color: #151515; font-weight: 700; border-bottom: 1px solid #cfdcff; padding-bottom: 3px; } .featherlight ul li p { margin: 0; } .featherlight ul strong { width: 120px; position: absolute; top: 0; left: 0; font-size: 14px; font-weight: 500; display: inline-block; padding: 6px 3px; } .featherlight iframe { padding: 40px; } /* support for nested featherlights. Does not work in IE8 (use JS to fix) */ .featherlight:last-of-type { background: url("../png/trans-white.png"); /*		background: #fff;*/ } .featherlight:before { /* position: trick to center content vertically */ content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .featherlight p.legend { text-align: center; display: block; margin-top: 20px; } .featherlight .featherlight-content { /* make content container for positioned elements (close button) */ position: relative; /* position: centering vertical and horizontal */ text-align: left; vertical-align: middle; display: inline-block; /* dimensions: cut off images */ overflow: auto; padding: 40px 40px; border-bottom: 25px solid transparent; /* dimensions: handling small or empty content */ min-width: 10%; /* dimensions: handling large content */ margin-left: 5%; margin-right: 5%; max-height: 95%; /* styling */ background: #fff; cursor: auto; border-radius: 2px; border: 1px solid #E3E8ED; -webkit-box-shadow: 0 5px 35px #bbb; -moz-box-shadow: 0 5px 35px #bbb; box-shadow: 0 5px 35px #bbb; /* reset white-space wrapping */ white-space: normal; } /* contains the content */ .featherlight .featherlight-inner { /* make sure its visible */ display: block; } .featherlight .featherlight-close-icon { /* position: centering vertical and horizontal */ position: absolute; z-index: 9999; top: 5px; right: 5px; font-family: "Gotham SSm A", "Gotham SSm B"; /* dimensions: 25px x 25px */ line-height: 25px; width: 15px; height: 20px; padding: 5px 10px; border-radius: 3px; /* styling */ cursor: pointer; text-align: center; /* 		background: #fff; Set the background in case it overlaps the content  background: rgba(255, 255, 255, 0.3);*/ color: #999; background: #fff; text-align: center; } .featherlight .featherlight-image { /* styling */ width: 100%; } .featherlight-iframe .featherlight-content { /* removed the border for image croping since iframe is edge to edge */ border-bottom: 0; padding: 0; } .featherlight iframe { /* styling */ border: none; } }

/* handling phones and small screens */
@media only screen and (max-width: 1024px) { .featherlight .featherlight-content { /* dimensions: maximize lightbox with for small screens */ margin-left: 10px; margin-right: 10px; max-height: 98%; padding: 10px 10px 0; border-bottom: 10px solid transparent; } .featherlight .featherlight-content img { max-width: 100%; } .featherlight .featherlight-content iframe { width: 100% !important; height: auto !important; } }

.comparison h1 { font-size: 52px; margin: 60px 0 0 0; }

.comparison h3 { margin-top: 20px; font-size: 24px; margin-bottom: 70px; }

.comparison table#comparison-table { width: 100%; text-align: left; margin-top: 50px; border-collapse: collapse; }

.comparison table#comparison-table tr.sticky-bar { background: #fff; }

.comparison table#comparison-table .legend { width: 11%; }

.comparison table#comparison-table .cell { width: 18.5%; }

.comparison table#comparison-table td, .comparison table#comparison-table th { vertical-align: top; padding: 1.5%; }

.comparison table#comparison-table td h2, .comparison table#comparison-table th h2 { text-align: center; font-size: 28px; margin: 3px 0; }

.comparison table#comparison-table td h4, .comparison table#comparison-table th h4 { margin: 4px 0 0 0; text-transform: uppercase; font-size: 15px; line-height: 19px; text-align: right; }

.comparison table#comparison-table td p, .comparison table#comparison-table th p { margin: 0px; }

.comparison table#comparison-table td p.overview, .comparison table#comparison-table th p.overview { font-size: 19px; line-height: 180%; }

.comparison table#comparison-table td h1, .comparison table#comparison-table th h1 { text-align: center; margin: 70px 0 30px 0; border-bottom: 1px solid #f7f7f7; padding-bottom: 35px; font-size: 52px; }

.comparison table#comparison-table td ul, .comparison table#comparison-table th ul { list-style: none; margin: 0; padding: 0; }

.comparison table#comparison-table td ul li, .comparison table#comparison-table th ul li { margin-bottom: 35px; }

.comparison table#comparison-table td ul h4, .comparison table#comparison-table th ul h4 { text-align: left; margin-bottom: 7px; }

.comparison table#comparison-table td img.stars, .comparison table#comparison-table th img.stars { margin: 0 0 10px 0; max-width: 160px; }

.comparison table#comparison-table td hr, .comparison table#comparison-table th hr { background: #f7f7f7; }

.comparison table#comparison-table td strong, .comparison table#comparison-table th strong { text-transform: uppercase; font-weight: 600; }

.comparison table#comparison-table td span.checkmark, .comparison table#comparison-table th span.checkmark { margin-bottom: 10px; display: inline-block; padding-left: 28px; background: url("../png/checkmark.png"); background-size: 16px; background-repeat: no-repeat; background-position: 0px 5px; height: 24px; text-transform: uppercase; font-weight: 600; }

.comparison table#comparison-table td span.x, .comparison table#comparison-table th span.x { margin-bottom: 10px; display: inline-block; padding-left: 28px; background: url("../png/x.png"); background-size: 16px; background-repeat: no-repeat; background-position: 0px 5px; height: 24px; text-transform: uppercase; font-weight: 600; }

.comparison table#comparison-table td a.theme-example img { width: 100%; margin-bottom: 10px; max-width: 300px; -webkit-box-shadow: 0 0 5px #ddd; -moz-box-shadow: 0 0 5px #ddd; box-shadow: 0 0 5px #ddd; }

.comparison table#comparison-table td a.screenshot-left img, .comparison table#comparison-table td a.screenshot-right img { width: 100%; max-width: 120px; }

.comparison table#comparison-table td a.screenshot-left { display: inline-block; width: 49%; float: left; clear: both; }

.comparison table#comparison-table td a.screenshot-right { display: inline-block; width: 49%; float: right; }

.comparison table#comparison-table th { text-align: center; }

.comparison table#comparison-table th .cta { width: 100%; padding: 10px 0; margin: 15px 0; }

.comparison table#comparison-table th img { width: 100%; max-width: 160px; }

.comparison table#comparison-table tr:hover td { background: #f7f7f7; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { .comparison .subheader { display: none; } .comparison table#comparison-table { overflow-x: scroll; width: 900px; } .comparison table#comparison-table td.legend { width: 100px; } .comparison table#comparison-table td.cell { width: 100px; } .comparison table#comparison-table td h4, .comparison table#comparison-table th h4 { font-size: 13px; text-align: left; } .comparison table#comparison-table td p.overview, .comparison table#comparison-table th p.overview { font-size: 16px; } }

.state-of { text-align: center; }

.state-of .title { text-align: center; margin: 10px auto 70px auto; max-width: 1000px; }

.state-of .title h1 { margin: 5px 0; }

.state-of .title h3 { margin: 20px 60px; }

.state-of .title h3 a { color: #151515; border-bottom: 1px solid #cfdcff; }

.state-of .title .published { position: relative; height: 80px; text-align: center; }

.state-of .title .published p { margin: 0; font-size: 16px; line-height: 140%; font-weight: 400; }

.state-of .title .published p span { display: block; font-size: 13px; color: #999; font-weight: 300; }

.state-of .title .published p a { color: #151515; border: none; }

.state-of .title .published #date { float: left; width: 50%; text-align: right; position: absolute; top: 10px; left: 0; }

.state-of .title .published #date p { margin: 10px 65px 0 0; }

.state-of .title .published #author { float: right; width: 50%; text-align: left; position: absolute; top: 10px; right: 0; }

.state-of .title .published #author p { margin: 10px 0 0 65px; }

.state-of .title .published img { border-radius: 100%; max-width: 80px; }

.state-of .splash { margin-bottom: 250px; padding: 30px 0 150px 0; }

.state-of .splash img#logo { max-width: 212px; margin: 30px 0 70px 0; }

.state-of h4 { text-transform: uppercase; font-weight: 1000; font-size: 16px; }

.state-of h2 { font-size: 39px; font-weight: 1000; }

.state-of p, .state-of ul, .state-of ol { font-size: 19px; line-height: 200%; font-weight: 400; }

.state-of p span, .state-of ul span, .state-of ol span { color: #999; font-size: 13px; margin-left: 5px; font-weight: 300; }

.state-of p strong, .state-of ul strong, .state-of ol strong { font-weight: 1000; }

.state-of p a, .state-of ul a, .state-of ol a { font-weight: 500; border-bottom: 2px solid #2962FF; padding-bottom: 2px; color: #2962FF; }

.state-of .insights { max-width: 600px; margin: 0 auto; text-align: left; padding-bottom: 100px; }

.state-of .insights h2 { text-align: center; margin-top: 100px; }

.state-of .insights p { margin: 40px 0; }

.state-of .insights p a { font-weight: 500; border-bottom: 2px solid #2962FF; padding-bottom: 2px; color: #2962FF; }

.state-of .card { padding: 100px 0; text-align: center; }

.state-of .card h4 { margin-bottom: 15px; }

.state-of .card h2 { margin: 15px 0; }

.state-of .card p { margin: 20px auto 35px auto; max-width: 950px; }

.state-of .card ul.trend { list-style: none; margin: 5% 0; padding: 0; text-align: center; }

.state-of .card ul.trend li { width: 29%; margin: 3% 1.5%; text-align: center; display: inline-block; background: #eaeffe; padding-top: 40px; border-radius: 10px; }

.state-of .card ul.trend li span { color: #2962FF; font-size: 52px; font-weight: 700; }

.state-of .card ul.trend li span.green { color: #00E676; }

.state-of .card ul.trend li h2 { font-size: 28px; }

.state-of .card ul.trend li p { font-size: 15px; }

@media screen and (max-width: 992px) { .state-of .wide-wrapper { width: 100%; margin: 0; } .state-of .title { margin-top: 30px; } .state-of .title h1 { font-size: 44px; } .state-of .title h3 { font-size: 21px; margin: 20px 0; } .state-of .title .published p { font-size: 13px; } .state-of .title .published p span { font-size: 11px; } .state-of .title .published #date p { margin: 10px 55px 0 0; } .state-of .title .published #author p { margin: 10px 0 0 55px; } .state-of .title-with-margin { margin-top: 20px; } .state-of .splash .wrapper { width: 100%; margin: 0; } .state-of .splash { padding: 30px 5% 150px 5%; width: 90%; } .state-of .insights { width: 90%; margin: 0 5%; } .state-of .card { width: 95%; margin: 0 2.5%; } .state-of .card ul.trend li { width: 100%; margin: 5% 0; } }

.sidebar { width: 25%; float: left; text-align: left; border: 1px solid #E3E8ED; border-radius: 4px; margin-top: 10px; }

.sidebar a#mobile-toc { display: none; height: 0; }

.sidebar .table-of-contents { width: 100%; margin: 0 auto; }

.sidebar .table-of-contents h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; margin: 30px 13% 10px 13%; }

.sidebar .table-of-contents hr { background: #fff; margin: 14px auto; }

.sidebar .table-of-contents ul { list-style: none; margin: 0 0 30px 0; padding: 0; }

.sidebar .table-of-contents ul li a { font-size: 16px; line-height: 135%; font-weight: 400; padding: 5px 13%; width: 74%; color: #151515; display: block; }

.sidebar .table-of-contents ul li a img.stars { display: inline; width: 65px; margin: 0 0 0 2px; outline: none; }

.sidebar .table-of-contents ul li a:hover, .sidebar .table-of-contents ul li a.active { color: #2962FF; background: #F5F6FF; }

.sidebar .table-of-contents ul li:last-child a { border-bottom: none; }

.sidebar a.cta { width: 100%; padding-left: 0px; padding-right: 0px; margin-bottom: 15px; display: none; }

@media screen and (max-width: 1000px) { .sidebar { position: relative; float: none; width: 100%; background: #fff; z-index: 120000; height: 40px; margin-bottom: 0; margin-top: 0; border: 0px; } .sidebar a#mobile-toc { line-height: 150%; border-bottom: 1px solid #E3E8ED; color: #333; text-align: center; font-size: 13px; padding: 10px 0; height: 20px; font-weight: 500; display: inline-block; width: 50%; } .sidebar a#mobile-toc img { display: inline; position: relative; left: 2px; top: 2px; width: 12px; height: 12px; } .sidebar a.active-mobile-toc img { transform: rotate(180deg); } .sidebar .table-of-contents { display: block; text-align: left; display: none; background: #fff; position: absolute; padding: 20px 5%; width: 90%; margin-bottom: 20px; top: 40px; box-shadow: 0 110px 70px 20px dimgray; -webkit-box-shadow: 0 110px 70px 20px dimgray; -moz-box-shadow: 0 110px 70px 20px dimgray; } .sidebar .table-of-contents ul li a { padding: 5px 2.5%; width: 95%; } .sidebar .table-of-contents h4 { margin: 20px 2.5% 10px 2.5%; width: 95%; } .sidebar a.cta { width: 50%; display: inline-block; position: absolute; top: 0; right: 0; height: 20px; padding: 10px 0; border-radius: 0; margin: 0; line-height: 150%; } .article-sidebar h4 { display: none; } .no-cta-sidebar { background: none; text-align: center; height: auto; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .no-cta-sidebar a#mobile-toc { position: relative; top: auto; left: auto; background: #fff; z-index: 120000; border-radius: 0; border: none; border-bottom: 1px solid #E3E8ED; width: 100%; padding: 10px 0; display: block; } .no-cta-sidebar .table-of-contents { top: 36px; } .no-cta-sidebar .table-of-contents ul { top: 32px; } .no-cta-sidebar .table-of-contents ul li.active ul { display: none; } .comparison-sidebar a.cta:last-of-type { right: auto; left: 0; box-shadow: 0 0 1px 1px #fff; -moz-box-shadow: 0 0 1px 1px #fff; -webkit-box-shadow: 0 0 1px 1px #fff; } .comparison-sidebar a#mobile-toc { display: none; } }

.new-review .section { margin-top: 40px; }

.new-review h2 { font-weight: 600 !important; }

.new-review h4 { font-weight: 600 !important; }

.new-review .section p a, .new-review .section ul a { border-bottom: 1px solid #cfdcff; padding-bottom: 3px; font-weight: 400; }

.new-review a.toggle { float: right; display: inline-block; border-radius: 15px; border: 5px solid #eee; height: 32px; width: 42px; background: url("../png/top.png") no-repeat; background-size: 16px 16px; background-position: 50%; text-indent: -9999em; }

.new-review .bubble { border-radius: 5px; padding: 5px 40px; background: #f7f7f7; margin-bottom: 30px; }

.new-review .bubble .media { float: right; margin: 0px 0 20px 30px; }

.new-review .bubble .media img { max-width: 300px; }

.new-review .bubble .media p { font-size: 12px; text-align: center; margin: 4px 0 0 0; }

.new-review .green-bubble { background: #F9FCF9; }

.new-review .red-bubble { background: #FFFAFB; }

.new-review .price-bubble { padding-left: 100px; position: relative; }

.new-review .price-bubble h4 { margin: 20px 0 10px; }

.new-review .price-bubble p { margin: 10px 0 20px 0; }

.new-review .price-bubble span { font-weight: 700; font-size: 21px; position: absolute; top: 25px; left: 20px; width: 60px; text-align: center; }

.new-review .faq { border: 1px solid #E3E8ED; }

.new-review .faq .item { border-bottom: 1px solid #E3E8ED; padding: 0px 30px; }

.new-review .faq .item h4 { font-size: 17px; margin: 20px 0; padding-right: 50px; background: url("../png/top.png") no-repeat; background-size: 16px 16px; background-position: 100% 50%; cursor: pointer; }

.new-review .faq .item p { margin: 0 0 20px 0; display: none; }

.new-review .carousel { margin: 30px 0 50px 0; background: #EEE; border: 1px solid #E3E8ED; border-radius: 3px; }

.new-review .carousel img { display: block; height: 425px; width: 715px; }

@media screen and (max-width: 900px) { .carousel img { height: 212.5px !important; width: 357.5px !important; } .new-review .main .bubble { padding: 5px 20px; } .new-review .main .bubble .media { float: none; margin: 20px 0; } .new-review .main .bubble .media img { width: 100%; } .new-review .main .price-bubble { padding-left: 20px; } .new-review .main .price-bubble span { position: relative; display: block; top: auto; left: auto; width: 100%; text-align: left; margin: 20px 0; } }

.new-article .splash { text-align: center; margin: 30px auto 0 auto; max-width: 1000px; }

.new-article .splash .title p.affiliate-disclosure { padding: 0px; margin: 0 0 10px; display: inline-block; border-radius: 3px; font-size: 15px; font-weight: 400; }

.new-article .splash .title p.affiliate-disclosure a { border-bottom: 1px dashed #151515; color: #151515; }

.new-article .splash .title h1 { margin: 5px 0; font-size: 61px; text-wrap: balance; padding-bottom: 0px; font-family: "Young Serif", serif; }

.new-article .splash .title h1 span { text-decoration: underline; text-decoration-color: #2962FF; text-decoration-thickness: 8px; /* Adjust thickness */ text-underline-offset: 4px; }

.new-article .splash .title h3 { margin: 20px 100px 10px 100px; text-wrap: balance; font-size: 22px; font-weight: 400; }

.new-article .splash .title h3 a { color: #151515; border-bottom: 1px solid #cfdcff; }

.new-article .splash .title .published { position: relative; height: 100px; display: flex; gap: 10px; justify-content: center; align-content: center; }

.new-article .splash .title .published p { font-size: 14px; line-height: 140%; font-weight: 400; align-self: center; }

.new-article .splash .title .published p span { display: block; font-size: 12px; }

.new-article .splash .title .published p a { color: #151515; border: none; }

.new-article .splash .title .published #date { text-align: right; margin: 0; }

.new-article .splash .title .published #author { text-align: left; margin: 0px; }

.new-article .splash .title .published img { border-radius: 100%; height: 85px; width: 83px; margin: 5px 10px; border: 2px solid #fff; }

.new-article .splash .overview .logos { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px; border: 2px solid; border-radius: 20px; padding: 30px 20px; margin: 60px 0; position: relative; }

.new-article .splash .overview .logos h3 { position: absolute; width: 200px; font-family: "Young Serif", serif; font-size: 21px; color: #fff; padding: 4px 0; border-radius: 10px; top: -44px; left: 50%; margin-left: -100px; }

.new-article .splash .overview .logos .logo { border: 2px solid #E6EADB; background: #fff; border-radius: 20px; height: 65px; display: flex; position: relative; align-items: center; justify-content: center; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }

.new-article .splash .overview .logos .logo span { padding: 2px 0; position: absolute; background: #CBD1BB; border-radius: 10px; top: 0; left: 50%; width: 120px; margin-left: -60px; top: -10px; color: #000; font-size: 12px; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }

.new-article .splash .overview .logos .logo span svg { transition: fill 0.3s; -webkit-transition: fill 0.3s; -moz-transition: fill 0.3s; }

.new-article .splash .overview .logos .logo:hover { border: 2px solid #2962FF; }

.new-article .splash .overview .logos .logo:hover span { background: #2962FF; color: #fff; }

.new-article .splash .overview .logos .logo:hover span svg { fill: #fff; }

.new-article .splash .overview .the-best { border-color: #2962FF; }

.new-article .splash .overview .the-best h3 { background: #2962FF; }

.new-article .splash .overview .the-rest { border-color: #000; }

.new-article .splash .overview .the-rest h3 { background: #000; }

.new-article img.cover-image { max-width: 100%; margin: 20px auto 40px auto; }

.new-article .new-article-article { display: flex; gap: 40px; max-width: 1200px; margin: 0 auto; }

.new-article .new-article-article .new-article-sidebar { width: 340px; position: sticky; top: 20px; height: 100vh; }

.new-article .new-article-article .new-article-sidebar h3 { display: none; }

.new-article .new-article-article .new-article-sidebar h4 { text-transform: uppercase; font-size: 12px; margin: 20px 0 0 0; color: #2962FF; }

.new-article .new-article-article .new-article-sidebar ul { list-style: none; margin: 0; padding: 20px; border: 2px solid #000; border-radius: 20px; }

.new-article .new-article-article .new-article-sidebar ul a { color: #000; line-height: 200%; }

.new-article .new-article-article .new-article-sidebar ul hr { margin: 12px 0; opacity: 0.2; background: #000; height: 1px; }

.new-article .new-article-article .new-article-main { flex: 1; }

.new-article .new-article-article .new-article-main h2 { font-family: "Young Serif", serif; font-size: 30px; margin-top: 40px; }

.new-article .new-article-article .new-article-main h3 { font-family: "Young Serif", serif; font-size: 21px; }

.new-article .new-article-article .new-article-main h2:first-child { margin-top: 0; }

.new-article .new-article-article .new-article-main a { text-decoration: underline; }

.new-article .new-article-article .new-article-main .image { max-width: 100%; text-align: center; }

.new-article .new-article-article .new-article-main .image img { max-width: 100%; }

.new-article .new-article-article .new-article-main .image p { margin: 3px 0 0 0; font-size: 13px; }

.new-article .new-article-article .new-article-main p a.cta { background: none; display: inline; padding: 0; border-radius: 0; font-size: 17px; color: #2962FF; font-weight: 300; }

.new-article .new-article-article .new-article-main h3 a.cta { background: none; display: inline; padding: 0; border-radius: 0; font-size: 21px; color: #2962FF; font-weight: 300; }

.new-article .new-article-article .new-article-main ul.grid { gap: 2px 22px; margin: 30px auto; display: grid; grid-template-columns: repeat(3, 1fr); }

.new-article .new-article-article .new-article-main p.summary { border: 2px solid #2962FF; padding: 24px; background: #fff; border-radius: 10px; }

.new-article .new-article-article .new-article-main .logos { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 5px; margin: 30px 0; position: relative; }

.new-article .new-article-article .new-article-main .logos h3 { position: absolute; width: 200px; font-family: "Young Serif", serif; font-size: 21px; color: #fff; padding: 4px 0; border-radius: 10px; top: -44px; left: 50%; margin-left: -100px; }

.new-article .new-article-article .new-article-main .logos .logo { border: 2px solid #E6EADB; background: #fff; border-radius: 20px; height: 65px; display: flex; position: relative; align-items: center; justify-content: center; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }

.new-article .new-article-article .new-article-main .logos .logo span { padding: 2px 0; position: absolute; background: #CBD1BB; border-radius: 10px; top: 0; left: 50%; width: 120px; margin-left: -60px; top: -10px; color: #000; font-size: 12px; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }

.new-article .new-article-article .new-article-main .logos .logo span svg { transition: fill 0.3s; -webkit-transition: fill 0.3s; -moz-transition: fill 0.3s; }

.new-article .new-article-article .new-article-main .logos .delete { opacity: 0.2; }

.new-article .new-article-article .new-article-main .logos .logo:hover { border: 2px solid #2962FF; }

.new-article .new-article-article .new-article-main .logos .logo:hover span { background: #2962FF; color: #fff; }

.new-article .new-article-article .new-article-main .logos .logo:hover span svg { fill: #fff; }

@media screen and (max-width: 850px) { .new-article .splash { margin-top: 0px; } .new-article .splash .title p.affiliate-disclosure { font-size: 13px; } .new-article .splash .title h1 { font-size: 38px; } .new-article .splash .title h3 { margin: 20px 20px 10px 20px; font-size: 17px; } .new-article .splash .overview .logos { grid-template-columns: 1fr 1fr; padding: 40px 20px 30px 20px; } .new-article .splash .overview .logos h3 { font-size: 19px; } .new-article .splash .overview .logos .logo span { font-size: 11px; } .new-article .new-article-sidebar { display: none; } .new-article .new-article-main .logos { grid-template-columns: 1fr 1fr 1fr; } .new-article .new-article-main h2 { font-size: 25px; } .new-article .new-article-main h3 { display: block; font-family: "Young Serif", serif; font-size: 21px; margin-top: 0; } }

.email-articles-list { list-style: none; padding: 0; width: 100%; margin: 40px 0 40px 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; }

.email-articles-list li { text-align: center; }

.email-articles-list li h4 { margin-top: 5px; font-size: 19px; }

.email-articles-list li img { width: 100%; }

.email-articles-list li a { color: #000; }

.email-templates { list-style: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 20px 0; margin: 5vh 0 5vh 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 60px; }

.email-templates li a.email-templates-cta { display: block; position: relative; }

.email-templates li a.email-templates-cta img { width: 100%; border: 1px solid #ddd; }

.email-templates li a.email-templates-cta .info { opacity: 0; width: 80%; position: absolute; border: 1px solid #ddd; bottom: 7.5%; left: 5%; background: rgba(255, 255, 255, 0.8); padding: 5%; border-radius: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }

.email-templates li a.email-templates-cta .info h3 { line-height: 120%; margin: 10px 0 0 0; font-size: 15px; color: #000; font-weight: 600; }

.email-templates li a.email-templates-cta .info .logo { max-width: 90px; display: flex; align-items: center; }

.email-templates li a.email-templates-cta .info .logo img { width: 100%; border: none; }

.email-templates li a.email-templates-cta .info hr { margin: 15px 0; }

.email-templates li a.email-templates-cta .info p { color: #000; font-size: 13px; margin: 0px; }

.email-templates li a.email-templates-cta:hover .info { opacity: 1; }

@media (max-width: 1600px) { .email-templates { grid-template-columns: 1fr 1fr 1fr; } }

@media (max-width: 1100px) { .email-articles-list { grid-template-columns: 1fr 1fr 1fr; } .email-templates { grid-template-columns: 1fr 1fr; gap: 40px; } }

@media screen and (max-width: 800px) { .email-articles-list { grid-template-columns: 1fr 1fr; } .email-templates { grid-template-columns: 1fr; gap: 40px; } .email-templates li a.email-templates-cta .info { opacity: 1; position: relative; width: 100%; bottom: auto; left: auto; border: none; padding: 0; border-radius: 0px; margin: 5px 0 25px 0; } }

.outro { border: 1px solid #ddd; padding: 2.5%; border-radius: 3px; margin-bottom: 30px; text-align: center; }

.outro h3 { font-size: 26px; margin: 0; font-weight: 700; line-height: 120%; }

.outro h4 { font-size: 17px; font-weight: 600; }

.outro p { font-size: 17px; margin: 15px 0; text-wrap: balance; line-height: 135%; }

.outro button { font-size: 17px; background: #eaeffe; color: #2962FF; display: inline-flex; padding: 6px 12px; border-radius: 3px; gap: 3px; align-items: center; font-weight: 600; border: none; cursor: pointer; }

.outro button svg { width: 18px; height: 18px; }

@media screen and (max-width: 960px) { .outro { padding: 5% 2.5%; } .outro h3 { font-size: 21px; } .outro p { font-size: 15px; } }

.outro-how-to-make { padding: 30px 90px 0 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; overflow: hidden; }

.outro-how-to-make img { width: 100%; transition: transform 0.5s; -webkit-transition: transform 0.5s; }

.outro-how-to-make .text { text-align: center; padding: 2.5%; align-self: center; justify-content: center; }

.outro-how-to-make .text a { display: block; color: #000; transition: color 0.5s; transition: color 0.5s; }

.outro-how-to-make:hover img { transform: scale(1.1); }

@media screen and (max-width: 1200px) { .outro-how-to-make { display: flex; flex-direction: column-reverse; gap: 10px; } }

@media screen and (max-width: 1000px) { .outro-how-to-make { padding: 30px 30px 0 30px; } }

.outro-templates ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin: 30px 0 0 0; align-content: center; list-style: none; padding: 0; }

.outro-templates ul img { width: 100%; border: 1px solid #ddd; border-radius: 3px; }

.outro-templates ul h4 { color: #000; margin: 5px 0 0  0; font-size: 17px; }

.outro-templates ul a img { transition: transform 0.5s; -webkit-transition: transform 0.5s; }

.outro-templates ul a:hover img { transform: scale(1.03); }

@media screen and (max-width: 700px) { .outro-templates ul { grid-template-columns: 1fr 1fr; } .outro-templates ul h4 { font-size: 15px; } }

.outro-comparison { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }

.outro-comparison .outro { padding: 5%; }

.outro-comparison .outro a { align-content: center; display: block; }

.outro-comparison .outro a .icons { margin: 0 auto 20px auto; display: flex; max-width: 200px; justify-content: center; align-content: center; flex-wrap: wrap; gap: 15px; transition: gap 0.5s; transition: gap 0.5s; }

.outro-comparison .outro a .icons img { height: 40px; width: 40px; padding: 15px; border: 1px solid #ddd; border-radius: 3px; -webkit-box-shadow: 0 5px 5px 0 #ddd; box-shadow: 0 5px 5px 0 #ddd; -moz-box-shadow: 0 5px 5px 0 #ddd; transition: transform 0.5s; -webkit-transition: transform 0.5s; }

.outro-comparison .outro a h3 { color: #000; margin-bottom: 10px; }

.outro-comparison .outro:hover a .icons { gap: 5px; }

.outro-comparison .outro:hover a .icons img:first-child { transform: rotate(10deg); }

.outro-comparison .outro:hover a .icons img:last-child { transform: rotate(-10deg); }

@media screen and (max-width: 1000px) { .outro-comparison { display: block; } }

.outro-best-tool { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 60px; }

.outro-best-tool .icons { display: flex; justify-content: space-between; align-content: center; flex-wrap: wrap; gap: 5px; }

.outro-best-tool .icons img { height: 40px; width: 40px; padding: 15px; border: 1px solid #ddd; border-radius: 3px; -webkit-box-shadow: 0 5px 5px 0 #ddd; box-shadow: 0 5px 5px 0 #ddd; -moz-box-shadow: 0 5px 5px 0 #ddd; transition: margin-top 0.5s; -webkit-transition: margin-top 0.5s; }

.outro-best-tool .text { text-align: center; }

.outro-best-tool .text a { display: block; color: #000; transition: color 0.5s; transition: color 0.5s; }

.outro-best-tool:hover .icons img { margin-top: 0 !important; }

@media screen and (max-width: 1500px) { .outro-best-tool .icons img { width: 30px; height: 30px; } }

@media screen and (max-width: 1250px) { .outro-best-tool { grid-template-columns: 1fr 1.3fr 1fr; } }

@media screen and (max-width: 1160px) { .outro-best-tool { display: block; } .outro-best-tool .text { max-width: 600px; margin: 0 auto; } .outro-best-tool .icons:first-child { max-width: 200px; margin: 0 auto 20px auto; } .outro-best-tool .icons:first-child img { margin-top: 0 !important; padding: 5px; border: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .outro-best-tool .icons:last-child { display: none; } }

.ag-subheader { position: relative; display: flex; background: #fff; padding: 15px 0; min-height: 45px; width: 100%; justify-content: space-between; align-items: center; }

.ag-subheader a.back { color: #151515; font-size: 15px; padding: 0px 0 0px 20px; background: url("../png/back.png"); background-size: 12px 12px; background-repeat: no-repeat; background-position: 0 50%; }

.ag-subheader p.affiliate-disclosure { margin: 0; padding: 10px 15px; font-size: 13px; font-weight: 400; background: #fff; border: 1px solid #E3E8ED; border-radius: 3px; }

.ag-subheader p.affiliate-disclosure a { text-decoration: none; border-bottom: 1px dashed #000; padding-bottom: 2px; color: #000; }

.ag-wrapper { display: flex; gap: 30px; margin: 30px auto; }

.ag-wrapper .ag-sidebar { list-style: none; margin: 0px 0; padding: 20px 0 40px 0; width: 300px; position: sticky; top: 0px; align-self: flex-start; height: 90vh; overflow-y: scroll; }

.ag-wrapper .ag-sidebar h4 { font-size: 15px; margin: 30px 0 10px 0; }

.ag-wrapper .ag-sidebar h4:first-child { margin-top: 0; }

.ag-wrapper .ag-sidebar a.mobile-toggle { display: none; }

.ag-wrapper .ag-sidebar li { margin-bottom: 5px; }

.ag-wrapper .ag-sidebar li a { font-size: 15px; display: flex; gap: 10px; color: #000; }

.ag-wrapper .ag-sidebar li a img, .ag-wrapper .ag-sidebar li a svg { width: 18px; }

.ag-wrapper .ag-templates { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.ag-wrapper .ag-templates li a.templates-cta { display: block; position: relative; }

.ag-wrapper .ag-templates li a.templates-cta img { width: 100%; border: 1px solid #ddd; }

.ag-wrapper .ag-templates li a.templates-cta .info { display: flex; align-items: flex-start; justify-content: space-between; opacity: 0; width: 90%; position: absolute; border: 1px solid #ddd; bottom: 5%; left: 2.5%; background: rgba(255, 255, 255, 0.8); padding: 2.5%; border-radius: 6px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }

.ag-wrapper .ag-templates li a.templates-cta .info .meta { align-self: center; }

.ag-wrapper .ag-templates li a.templates-cta .info .meta h3 { line-height: 120%; margin: 0 0 2px 0; font-size: 19px; color: #000; font-weight: 900; }

.ag-wrapper .ag-templates li a.templates-cta .info .meta p { margin: 0; font-size: 13px; color: #000; }

.ag-wrapper .ag-templates li a.templates-cta .info span.button { font-size: 14px; font-weight: 500; display: inline-block; background: #2962FF; padding: 15px 25px; border-radius: 3px; color: #fff; }

.ag-wrapper .ag-templates li a.templates-cta:hover .info { opacity: 1; }

@media screen and (max-width: 960px) { .ag-subheader { justify-content: center; } .ag-subheader a.back { display: none; } .ag-wrapper .ag-templates { grid-template-columns: 1fr; gap: 40px; } .ag-wrapper .ag-templates li a.templates-cta .info { opacity: 1; position: relative; width: 100%; bottom: auto; left: auto; border: none; padding: 0; border-radius: 0px; margin: 5px 0 25px 0; } .ag-wrapper .ag-templates li a.templates-cta .info span.button { font-size: 13px; min-width: 95px; text-align: center; } }

@media screen and (max-width: 720px) { .ag-wrapper { display: block; } .ag-wrapper .ag-sidebar { width: 100%; z-index: 9999999; top: 0; position: relative; background: #fff; width: 95%; padding: 2.5%; border: 1px solid #E3E8ED; border-radius: 3px; } .ag-wrapper .ag-sidebar a.mobile-toggle { display: flex; gap: 4px; align-items: center; justify-content: center; } .ag-wrapper .ag-sidebar a.mobile-toggle svg { width: 18px; color: #000; } .ag-wrapper .ag-sidebar a.mobile-toggle span { font-size: 15px; color: #000; } .ag-wrapper .ag-sidebar .mobile-content { margin-top: 20px; } }

/*# sourceMappingURL=styles.css.map */