/* Reset & Basics */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,em,img,strong,b,u,i,center,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
button::-moz-focus-inner{border:0}
img:-moz-loading{visibility: hidden} /* hide alt text while loading */

/* Clearing */

.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}

/******************************************************
********************   Typography   *******************
******************************************************/

html{    font-family: 'Poppins', sans-serif;font-size:16px; line-height: 30px; color:#555c70; overflow-x: hidden;}
p{ margin-bottom:15px}
p.xsmall-text { font-size:12px; line-height: 1.5; }
p.small-text { font-size:14px; line-height: 1.5; }
p.big-text,
p.large-text { font-size:19px; line-height: 1.5; font-weight: 300; }
p.xlarge-text { font-size:22px; line-height: 1.5; }
strong{font-weight:600}
em{font-style:italic;font-weight:300}

b, strong, dt { font-weight: 600; }

#menu,.button,input.search,.quote{ font-family: 'Poppins', sans-serif; }
h1,h2,h3,h4,h5,h6{ font-family: 'Poppins', sans-serif;margin-bottom:15px}

h1{ font-size: 46px; line-height: 60px; font-weight: 500; color:#00032a;}
.hero h1 { font-size: 60px; line-height: 70px; font-weight: 400; letter-spacing: -1px; }
h2,
.h1-wptheme { font-size: 40px; line-height: 50px; font-weight: 500; color:#00032a; }
h3{ font-size: 26px; line-height: 36px; font-weight: 500; color:#00032a; }
h4{ font-size: 24px; line-height: 38px; font-weight: 500; color:#00032a; }
h5{ font-size: 18px; line-height: 30px; font-weight: 500; color: #00032a; }
h6{ font-size: 16px; line-height: 30px; font-weight: 500; color:#00032a;}


/******************************************************
*******************   Basic styles   ******************
******************************************************/

body{background-color:#fff; overflow-x: hidden;}
body.modal-open{overflow:hidden}
body.animate { transition: background-color .5s ease-in-out; }
img{max-width:100%;height:auto}

a, a:visited { color: #0089f7; text-decoration: none; }
a:hover, a:active { color: #1999FF; text-decoration: underline; }

sup { vertical-align: baseline; position: relative; top: -0.4em; }

hr { box-sizing: content-box; height: 0; overflow: visible; border-width: 1px 0 0; border-style: solid; border-color: rgba(48,64,80,.15); margin: 25px 0; }
hr.hr-dark { border-color: rgba(255,255,255,.1); }
hr.hr-medium { margin: 35px 0; }
hr.hr-big { margin: 50px 0; }
hr.hr-narrow { width: 45%; margin-left: auto; margin-right: auto; }

.text-primary { color: #0089f7 !important; }
.text-gradient-primary { color: #0089f7 !important; background: linear-gradient(to top right, #0089F7 0%, #09B4FD 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.be{ color: #0089f7; }
.woo { display: inline-block; background-image: url(../img/logo_woo.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; transform: translateY(-3%) scale(130%); line-height: 70%; margin: 0 0.5em; }
.woo .inside { visibility: hidden; }
.woo-light { background-image: url(../img/logo_woo_w.svg); }
.woocommerce { color: #873EFF; }

/* Button */
a.button{display:inline-block; margin: 0 5px 15px; font-weight:500; text-decoration:none;padding:11px 80px;background-color:#dde7f0;color:#07070A;border-radius:8px;font-size:16px;text-align:center;box-sizing:border-box;}
a:hover.button { background-color: #e5edf4; }
a.button.primary{background-color:#80b541;color:#fff}
a:hover.button.primary { background-color: #92c752; }
a.button.secondary{background-color:#0089f7;color:#fff}
a:hover.button.secondary { background-color: #1999FF; }
a.button.black{background-color:#191a1f;color:#fff}
a:hover.button.black { background-color: #292929; }
a.button.green{background-color:#04654b;color:#fff}
a:hover.button.green { background-color: #067456; }
a.button.green-light{background-color:#4BC98F;color:#fff}
a:hover.button.green-light { background-color: #55D59A; }
a.button.brown{background-color:#742727;color:#fff}
a:hover.button.brown { background-color: #7f2e2e; }
a.button.violet{background-color:#5D3AC2;color:#fff}
a:hover.button.violet { background-color: #6944D3; }
a.button.steel{background-color:#3C455E;color:#fff}
a:hover.button.steel { background-color: #4D566D; }
a.button.gray{background-color:#3B393D;color:#fff}
a:hover.button.gray { background-color: #444246; }
a.button.coral{background-color:#FF794F;color:#07070A}
a.button.coral del { color: #8B4B37; }
a.button.coral ins { color: #fff; }
a:hover.button.coral { background-color: #FF8547; }
a.button.green-light2{background-color:#87E64C;color:#353235}
a.button.green-light2 del { color: #58873A; }
a.button.green-light2 ins { color: #353235; }
a:hover.button.green-light2 { background-color: #89D957; }

a.button-outlined{background-color: transparent; border: 1px solid #dde7f0;}
a:hover.button-outlined { background-color: #e5edf4; }
a.button-outlined.primary{background-color: transparent; border: 1px solid #80b541; color:#80b541}
a:hover.button-outlined.primary { background-color: #92c752;color:#fff }
a.button-outlined.secondary{background-color: transparent; border: 1px solid #0089f7; color:#0089f7}
a:hover.button-outlined.secondary { background-color: #0089f7;color:#fff }

a.button.big{font-size:16px;padding:18px 100px}
a.button.icon-left i { margin-right: 6px; }
a.button.icon-right i { margin-left: 6px; }
a.button del { text-decoration: line-through; }
a.button ins { font-size: 130%; text-decoration: none; }
a.button span { position: relative; margin-right: 25px; }
a.button span:after { content: ""; display: inline-block; position: absolute; right: -30px; top: -2px; width: 26px; height: 26px; background-image: url(../img/move-right.svg); background-position: center; background-repeat: no-repeat; background-size: 26px; }
a.button.primary span:after { background-image: url(../img/move-right-white.svg); }
a.button.secondary span:after { background-image: url(../img/move-right-white.svg); }
a.button-arrow-white span:after { background-image: url(../img/move-right-white.svg); }
a:hover.button span:after { right: -35px; }

a.button.button-narrow { padding-left: 40px; padding-right: 40px; }
a.button.button-sp {padding-left: 25px; padding-right: 25px;} /* small padding */
a.button.button-fw { width: 100%; }

a.button.play-video span { margin-left: 30px; margin-right: 0; }
a.button.play-video span:after { background-image: url(../img/play-white.svg); background-size: 10px; right: auto; left: -35px; top: -1px; width: 24px; height: 24px; background-color: #45464a; border-radius: 100%; }
a:hover.button.play-video span:after { background-color: #0080e6; }

a.button.scroll-down span:after { background-image: url(../img/move-down.svg); }
a.button.scroll-down-light span:after { background-image: url(../img/move-down-white.svg); }
a:hover.button.scroll-down span:after { right: -30px; top: 0px; }

/* Splash link */
a.splash-link { color: #0089f7; display:inline-block; position: relative; font-weight: 500; margin: 0 25px 15px 0; border-bottom: 1px solid #0089f7; padding-bottom: 5px; text-decoration: none; }
a.splash-link:after { content: ""; display: block; position: absolute; right: -25px; top: 3px; width: 22px; height: 22px; background-image: url(../img/move-right-blue.svg); background-position: center; background-repeat: no-repeat; background-size: 22px; }
a:hover.splash-link {}
a:hover.splash-link:after { right: -30px; }
a.splash-link.with-icon  { margin-left: 30px; }
a.splash-link.with-icon:before { content: ""; display: block; position: absolute; left: -30px; top: 3px; width: 22px; height: 22px; background-position: center; background-repeat: no-repeat; background-size: 22px; }

    a.splash-link.link-gallery:before { background-image: url(../img/gallery-blue.svg); }
    a.splash-link.link-documentation:before { background-image: url(../img/documentation-blue.svg); }
    a.splash-link.link-tutorial:before { background-image: url(../img/tutorial-blue.svg); }
    a.splash-link.link-prebuilt-websites:before { background-image: url(../img/prebuilt-websites-blue.svg); }
    a.splash-link.link-expand:after { background-image: url(../img/move-down-blue.svg);  }
    a:hover.splash-link.link-expand:after { right: -25px; top: 5px; }

.splash-link-sep { display: inline-block; width: 1px; height: 30px; background: rgba(48,64,80,.15); margin: 0 30px; position: relative; top: 10px; }

.number { font-size: 70px; line-height: 70px; font-weight: 300; color: #00032a; }
.number.small { font-size: 50px; line-height: 50px; font-weight: 600; }
.number.medium { font-size: 110px; line-height: 110px; font-weight: 200; }
.number.big { font-size: 180px; line-height: 180px; font-weight: 500; }

.highlight { padding: 2px 5px; border-radius: 3px; background-color: #ccc; color: #000; }
.highlight.item { background-color: rgba(96,148,200,.05); color: #6094c8; }
.highlight.wrap { background-color: rgba(73,101,119,.03); color: #496577; }
.highlight.section { background-color: rgba(60,144,98,.05); color: #3c9062; }

.info-box { display: flex; align-items: center; justify-content: center; padding: 60px 6%; }
.info-box .icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center;}
.info-box .icon > img { margin-right: 15px; }
.info-box .icon p { margin-bottom: 0; }
.info-box .inner { margin: 0 40px;  }
.info-box .inner p { font-size: 16px; line-height: 24px; font-weight: 700; }
.info-box .inner > *:last-child { margin-bottom: 0; }
.info-box a.button { margin-bottom: 0px; flex-shrink: 0; padding: 11px 30px; }

.info-box-green { background-color: #f4fbf6; }
.info-box-green,
.info-box-green a:not(.button),
.info-box-green a:not(.button):hover,
.info-box-green .icon .number { color: #23a44b; }
.info-box-green a.button { background-color: #23a44b; }
.info-box-green a:hover.button { background-color: #31b65a; }


ul.content-list { margin: 30px 0; list-style: none; }
ul.content-list li { position: relative; margin-bottom: 15px; padding-left: 40px;  }
ul.content-list li:before { content: ""; display: inline-block; position: absolute; left: 0; top: 2px; width: 25px; height: 25px; border-radius: 100%; background-color: #0089f7; background-image: url(../img/move-right-white.svg); background-position: center; background-repeat: no-repeat; background-size: 20px; }
ul.content-list li .heading { margin-bottom: 5px; }

ol.content-list { margin: 30px 0; list-style: none; counter-reset: item }
ol.content-list li { position: relative; margin-bottom: 15px; padding-left: 40px;  }
ol.content-list li:before { content: counters(item, ".") " "; counter-increment: item; display: inline-block; margin-right: 20px; position: absolute; left: 0; top: 2px; width: 25px; height: 25px; line-height: 25px; color: #fff; font-size: 12px; text-align: center; border-radius: 100%; background-color: #0089f7; }
ol.content-list li .heading { margin-bottom: 5px; }

    .content-list.green li:before { background-color: #489C6D; }
    .content-list.green2 li:before { background-color: #25AC46; }


code { font-family: monospace; font-size: 13px; color: #0089f7;  white-space: nowrap; padding: 4px 8px; background:rgba(1,137,255,.05); border-radius: 3px; }

pre { font-family: monospace; font-size: 13px; border-radius: 8px;  box-sizing: border-box; width: 100%; padding: 0; margin: 30px 0; line-height: 26px; background: rgba(1,137,255,.05); padding: 20px; color: #00032a; white-space: pre-wrap; }
.pre-with-copy { position: relative; }
.pre-with-copy a.copyButton { display: block; opacity: 0; position: absolute; right: 10px; bottom: 10px; height: 20px; text-decoration: none; line-height: 20px; font-size: 13px; padding: 4px 10px; background: #fff; box-shadow: 0px 3px 6px 0px rgba(232,239,242,.5); color: #7b7d97; border-radius: 3px; }
.pre-with-copy a:hover.copyButton { color: #00032a; }
.pre-with-copy:hover a.copyButton { opacity: 1; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 30px 0; border-radius: 8px; overflow: hidden; }
table th { font-weight: 500; background-color: #f1f4f9; color: #00032a; text-align: left; }
table td {}
table th,
table td { border-bottom: 1px solid rgba(48,64,80,.15); border-right: 1px solid rgba(48,64,80,.1); padding: 15px; }
table tr:last-child td { border-bottom: 0; }
table tr th:last-child,
table tr td:last-child  { border-right: 0; }

.table-doc {}
.table-doc th { font-size: 12px; font-weight: normal; color: #00032a; text-transform: uppercase; letter-spacing: 2px; }
.table-doc td {}

.layouts-table {}
.layouts-table td,
.layouts-table th { text-align: center; vertical-align: middle; }
.layouts-table .t1 { font-weight: 500; color: #00032a; }

.examples-table .link { width: 35%; text-align: center; }

.video-container {  position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 */  }
.video-container video { position: absolute;   top: 0;   left: 0;   width: 100% !important;   height: 100% !important; }

.content-video { text-align: center; margin: 50px -10%; border-radius: 8px; overflow: hidden; box-shadow: 6px 30px 60px 0px rgba(0,0,0,.18); line-height: 0; transform: translateZ(0); }

.content-icon { margin-bottom: 20px; }
.content-image { margin-bottom: 20px; }
.content-lottie { margin-bottom: 20px; }

.content-pic { border-bottom: 1px solid #e8eef7; text-align: center; margin: 50px -10%; }
.content-pic img { display: block; margin-bottom: 20px; }
.content-pic p { font-size: 14px; line-height: 25px; color: #a0aab9; padding-bottom: 5px; }
.content-pic p a { color: #8793a6; }

.content-gallery { position: relative; margin: 50px -280px; }
.content-gallery .item { margin: 0 10px; text-align: center; }
.content-gallery .item img { display: block; margin-bottom: 20px; }
.content-gallery .item p { font-size: 14px; line-height: 25px; color: #a0aab9; }
.content-gallery .slick-arrow { position: absolute; top: calc(50% - 60px); }
.content-gallery .slick-prev { left: -20px; }
.content-gallery .slick-next { right: -20px; }

.interview > h3 { margin: 35px 0; }
.interview-answer { position: relative; margin: 30px 0; padding-left: 60px }
.interview-answer:before { content: ""; display: block; width: 36px; height: 27px; position: absolute; left: 0; top: 2px; background-image: url(../img/blockquote.svg); background-size: contain; }

.content-box-shadow { border-radius: 8px; overflow: hidden; box-shadow: 6px 30px 60px 0px rgba(0,0,0,.18); line-height: 0; }
.video-wrapper { border-radius: 8px; overflow: hidden; box-shadow: 6px 30px 60px 0px rgba(0,0,0,.18); line-height: 0; transform: translateZ(0); }

.heading-with-icon { display: flex; align-items: center; }
.heading-with-icon .icon { margin-right: 15px; flex-shrink: 0; }

.column-with-link a { text-decoration: none; color: inherit; }

.path { background: #f3f4f8; border-radius: 20px; padding: 7px 20px 7px 10px; font-size: 13px; width: auto; margin: 30px 0; display: inline-block; }
.path .goto { padding: 1px 10px; border-radius: 20px; background: #bec1d0; display: inline-block; color: #fff; font-weight: 600; letter-spacing: 1px; margin-right: 10px; }
.content-list .path { margin: 0 10px; }

.tag { display: inline-block; margin: 0 10px 10px 0; color: #2d6dd7; background-color: rgba(170,198,245,.15); border-radius: 30px; padding: 2px 14px; font-size: 90%; font-weight: 200; }
.tag-outlined { margin: 4px; color: inherit; background-color: unset; border: 1px solid; border-radius: 8px; font-weight: 300; }


/******************************************************
*******************   Main content   ******************
******************************************************/

.center{text-align:center}
.right{text-align:right}

.content-center { justify-content: center; }

main article{ width: 100%; float: left; clear: both; padding: 130px 0 70px }

article header,
footer header{ margin-bottom: 50px; }
article section,
footer section { margin-bottom: 50px; }
.wrapper{position:relative;box-sizing:border-box;max-width:1240px;margin:0 auto;padding:0 30px}
.wrapper-960 { max-width: 960px; }
.wrapper-1300 { max-width: 1300px; }
.wrapper-1460 { max-width: 1460px; }
.wrapper-1600 { max-width: 1600px; }
.content .wrapper { max-width:700px; }

.wrapper-inner { border-radius: 32px; padding: 50px; margin: 0 10px; }
.wrapper-inner .mfn-row { margin-left: 0; margin-right: 0; }

.mb-0 { margin-bottom: 0; }
.mb-30 { margin-bottom: 30px; }
.mb-small { margin-bottom: 50px; }
.mb-medium { margin-bottom: 80px; }
.mb-big { margin-bottom: 130px; }

.pt-0 { padding-top: 0; }
.pt-small { padding-top: 50px; }
.pt-medium { padding-top: 80px; }
.pt-big { padding-top: 130px; }

.pb-0 { padding-bottom: 0; }
.pb-small { padding-bottom: 50px; }
.pb-medium { padding-bottom: 80px; }
.pb-big { padding-bottom: 130px; }

.header-centered { padding-left: 18%; padding-right: 18%; }
.header-with-desc { display: flex; align-items: center; }
.header-with-desc .left-desc,
.header-with-desc .right-desc { width: 50%; }
.header-with-nav { display: flex; align-items: center; justify-content: space-between; }
.header-with-nav .inner-content { border-width: 0 1px 0 1px; border-style: solid; border-color: rgba(48,64,80,.15); width: 80%; padding: 0 8%; box-sizing: border-box; }
.header-with-addon { display: flex; align-items: center; gap: 15px; }
.header-with-addon > div > *:last-child { margin-bottom: 0; }
.header-with-addon > *:last-child { margin-left: auto; }

.header-with-nav.no-nav { display: block; }
.header-with-nav.no-nav .inner-content { border: 0; margin: 0 auto; }
.header-with-nav.no-nav a.nav-arrow { display: none; }

.section-centered { padding-left: 18%; padding-right: 18%; }

.no-padding-top { padding-top: 0; }
.no-padding-bottom { padding-bottom: 0; }

.submenu-padding-top { padding-top: 100px; }