:root { --main-bg: #fff; --light: #f5f5f5; --light-comp: #4d4d4d; --dark: #333; --dark-comp: #fff; --primary: #3b79b0; --primary-comp: #fff; --secondary: #01cdea; --secondary-comp: #fff; }
/* GENERAL */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: 'Rubik', Arial, Helvetica, sans-serif; font-size: 20px; line-height: 1.5; text-align: center; }
body, .pricing h3 span, .pricing h3 a { color: var(--light-comp, #4d4d4d); }
body, header ul, .hero h1, .hero p, .row1 h2 { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; }
h1, h2, h3, h4, h5, h6, nav, form input[type=submit], .btn { text-transform: uppercase; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; }
img, iframe { max-width: 100%; height: auto;display:block }
iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; }
iframe[src^="https://scribehow"]{min-height:520px}
.fullwidth { width: 100%; }
a img, iframe { border: none; }
a, .row6 img { transition: ease-in-out .3s; }
a, header a:hover, form input[type=submit]:hover, .btn:hover, footer a:hover, .row3 a:hover { text-decoration: none; }
a, header a:hover, footer a:hover, main h2 span, .row3 a:hover h3, .pricing h3, footer h2 span { color: var(--primary, #448ccb); }
a:hover { text-decoration: underline; }
hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; }
.imgLeft, .imgRight { max-width: 45%; }
.imgLeft { float: left; margin: 10px 4% 2% 0; }
.imgCenter { display: block; margin: 0 auto; }
.imgRight { float: right; margin: 10px 0 2% 4%; }
.clear { clear: both; }
.nowrap, a[href^=tel] { white-space: nowrap; }
sup { line-height: 0; }
.hide { display: none !important; }
.center, .hero h1, .hero p, footer h3, footer li { text-align: center; }
.wrap { display: block; max-width: 1080px; margin: 0 auto; position: relative; }
.bg-dark, .bg-primary { color: var(--dark-comp, #fff); }
.bg-dark { background-color: var(--dark, #333); }
.bg-primary { background-color: var(--primary, #448ccb); }
.bg-light { background-color: var(--light, #f5f5f5); }
.mid { align-items: center; align-self: center; }
.grid { display: grid; grid-gap: 10px 20px; }
.grid.half { grid-template-columns: repeat(2,1fr); }
.grid.third { grid-template-columns: repeat(3,1fr); }
.grid.fourth { grid-template-columns: repeat(4,1fr); }
.bgimg { position: relative }
.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: -1 }

/* HEADER & NAVIGATION */

.hero { position: relative; }
header { background-image: linear-gradient(rgba(0,0,0,.5),transparent); z-index: 999;position:absolute;top:0;width:100% }
header .wrap, footer .wrap { padding: 20px 10px; }
header .grid{ grid-template-columns: 270px 1fr; }
header .logo { font-weight: bold; }
nav, footer, .small, .pricing h3 span { font-size: 18px; }
nav { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); max-width: calc(100% + 20px) }
nav ul { text-align: right; }
nav li, footer .grid.fourth > div:last-of-type li { display: inline-block; }
nav a { font-weight: 600; margin:5px;padding:5px;display:block }
header a, .logo:hover, .hero h1, .hero p, .row4 h2 span { color: var(--dark-comp, #fff); }
/* HERO */
.hero { background-size: cover; background-position: center; position: relative;overflow:hidden }
.hero:before { content: ""; position: absolute; }
.hero:before { width: 100%; height: 100%; background-color: rgba(0,0,0,.3); top: 0; left: 0; }
.hero { height: 700px; }
.hero > .wrap { top: 60%; transform: translateY(-60%); }
.hero h1, .hero p { padding: 0 10px; text-shadow: 2px 2px 3px rgba(0,0,0,.3); }
.hero h1 { font-size: 48px; }
.hero h1 span, main h2 span, footer h2 span { display: block; padding-bottom: 5px; }
.hero p { font-size: 24px; font-weight: 600; }
.hero .btn { margin-top: 40px; text-shadow: none; }
/* HOME */
.row1 .wrap { padding: 60px 10px 40px; }
.row2 { margin-bottom: 80px; }
.row3 { margin: 60px 0; }
.row3 .grid { padding: 20px 0; }
.row3 h3 { margin-bottom: 0; }
.row3 p, .pricing .btn, .pricing details p, .pricing details ul { margin-top: 0; }
.row4 .wrap { padding: 40px 10px 100px; }
.row5 .wrap { max-width: 1000px; background-color: var(--main-bg, #fff); padding: 40px; margin: -80px auto 50px; border-radius: 10px; border: 1px solid #eee; }
.row6 .wrap { padding: 20px 10px; }
.row6 img { vertical-align: middle; filter: grayscale(100%); opacity: 50%; margin: 40px 40px 20px; }
.row6 img:hover { filter: grayscale(0); opacity: 100%; }
.home iframe{margin-top:80px;margin-bottom:80px}
.home h3.center{max-width:400px;margin:1em auto}
/* FORMS */
form { margin: 40px 0 20px; }
form .grid { grid-gap: 0 10px; }
form label { display: block; }
form input[type=text], form input[type=email], form input[type=tel], form input[type=file], form input[type=submit], form select, form textarea, form input[type=password], .btn { font-family: 'Rubik', sans-serif; font-size: 16px; }
form input[type=text], form input[type=email], form input[type=tel], form select, form textarea, form input[type=password] { background-color: var(--main-bg, #fff); margin-bottom: 10px; padding: 0 10px; border: 1px solid #f5f5f5; }
form input[type=text], form input[type=email], form input[type=tel], form select, form input[type=password] { height: 45px; }
form input[type=text], form input[type=email], form input[type=tel], form textarea, form input[type=password] { width: calc(100% - 20px); }
form select { width: 100%; }
form input[type=file] { margin-left: 10px; border-radius: 0; }
form textarea { height: 100px; padding: 15px 10px; }
form input[type=submit], .btn { display: inline-block; min-width: 110px; font-weight: 600; text-align: center; line-height: 1.6; background-color: var(--primary, #3b79b0); color: var(--primary-comp, #fff); padding: 10px 40px; margin: 10px 0; border: none; border-radius: 50px; transition: ease-in-out .3s; }
form input[type=submit] { min-width: 250px; margin: 0; }
form input[type=submit]:hover, .btn:hover { cursor: pointer; background-color: var(--secondary, #01cdea); color: var(--primary-comp, #fff); }
/* FOOTER */
footer > .wrap { padding-top: 0 }
footer .cta { padding: 30px 0; }
footer h3 { font-size: 20px; }
footer .grid.fourth { padding: 40px 0; border-bottom: 1px solid #eee; }
footer .grid.fourth > div:last-of-type li { margin: 5px; }
.ccpaNotice { text-align: center !important; }
.a8bmark img{margin:0 0 0 auto}
.subfoot .grid{grid-gap:0}
/* MAIN & EVERYTHING ELSE */
main, .contact .bg-light { padding: 40px 10px; }
main h1, footer h2, .home h2 { font-size: 30px; }
main h2, header .logo, footer h2 span, .home h2 span, .row5, .hero h1 span, main h2 span, footer h2 span { font-size: 24px; }
main h3 { font-size: 22px; }
main h4, main h2 span { font-size: 20px; }
main ul, main ol { padding-left: 25px; }
main li, footer li { margin: 5px 0; }
.nolist, footer ul, .contact ul { list-style: none; padding-left: 0; }
.pricing h3, .trial h2 { margin-top: 40px; }
.pricing h3 span { display: block; padding-top: 5px; }
.pricing iframe { margin-bottom: 60px; }
.pricing details { text-align: left; }


@media(max-width:999px){
    iframe { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); max-width: calc(100% + 20px) }
}
@media(max-width:700px){
    header .grid{grid-template-columns:1fr}
    nav ul{text-align:center}
}
@media(max-width:600px){
    .grid.half,.grid.third{grid-template-columns:1fr}
    .subfoot p{text-align:center;margin:.5em 0}
    .a8bmark img{margin:1em auto}
}