/* @import url('http://example.com/example_style.css'); */ @import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200&display=swap'); @import url('//fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); @import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400..800&display=swap'); /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /****************************************/ /* HubSpot Style Boilerplate */ /****************************************/ /* These includes are optional, but helpful. */ /* Images */ img { max-width: 100%; border: 0; -ms-interpolation-mode: bicubic; vertical-align: bottom; /* Suppress the space beneath the baseline */ } /* Videos */ video { max-width: 100%; height: auto; } /* Embed Container (iFrame, Object, Embed) */ .hs-responsive-embed { position: relative; height: auto; overflow: hidden; padding-top: 0; padding-left: 0; padding-right: 0; } .hs-responsive-embed iframe, .hs-responsive-embed object, .hs-responsive-embed embed { width: 100%; height: 100%; border: 0; } .hs-responsive-embed, .hs-responsive-embed.hs-responsive-embed-youtube, .hs-responsive-embed.hs-responsive-embed-wistia, .hs-responsive-embed.hs-responsive-embed-vimeo { padding-bottom: 2%; } .hs-responsive-embed.hs-responsive-embed-instagram { padding-bottom: 116.01%; } .hs-responsive-embed.hs-responsive-embed-pinterest { height: auto; overflow: visible; padding: 0; } .hs-responsive-embed.hs-responsive-embed-pinterest iframe { position: static; width: auto; height: auto; } iframe[src^="http://www.slideshare.net/slideshow/embed_code/"] { width: 100%; max-width: 100%; } @media (max-width: 568px) { iframe { max-width: 100%; } } /* Forms */ textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select { padding: 6px; display: inline-block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Menus */ .hs-menu-wrapper ul { padding: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: inline-block; margin-bottom: 20px; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul:before { content: " "; display: table; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul:after { content: " "; display: table; clear: both; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: left; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a { display: inline-block; padding: 10px 20px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children { position: relative; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; position: absolute; z-index: 10; left: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { display: block; white-space: nowrap; width: 140px; overflow: hidden; text-overflow: ellipsis; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper { left: 180px; top: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } .row-fluid-wrapper:last-child .hs-menu-wrapper.hs-menu-flow-horizontal > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch { position: relative; margin-bottom: 20px; min-height: 7em; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children { position: static; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: none; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:before { content: " "; display: table; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:after { content: " "; display: table; clear: both; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li { float: left; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: inline-block; padding: 10px 20px; white-space: nowrap; max-width: 140px; width: auto; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-vertical { width: 100%; } .hs-menu-wrapper.hs-menu-flow-vertical ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-vertical li a { display: block; white-space: nowrap; width: 140px; overflow: hidden; text-overflow: ellipsis; } .hs-menu-wrapper.hs-menu-flow-vertical > ul { margin-bottom: 20px; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a { width: auto; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li a { padding: 10px 20px; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children { position: relative; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; position: absolute; z-index: 10; top: 0; left: 180px; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li a { min-width: 140px; width: auto; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul { max-width: 100%; overflow: hidden; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: none; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li.hs-item-has-children > ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; position: static; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-2 > a { padding-left: 4em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-3 > a { padding-left: 6em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-4 > a { padding-left: 8em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-5 > a { padding-left: 140px; } .hs-menu-wrapper.hs-menu-not-show-active-branch li.hs-menu-depth-1 ul { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); } @media (max-width: 568px) { .hs-menu-wrapper, .hs-menu-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; } .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: none; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a, .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: block; max-width: 100%; width: 100%; } } .hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: visible; opacity: 1; } /* Space Module */ .widget-type-space { visibility: hidden; } /* Blog Author Section */ .hs-author-listing-header { margin: 0 0 .75em 0; } .hs-author-social-links { display: inline-block; } .hs-author-social-links a.hs-author-social-link { width: 24px; height: 24px; border-width: 0px; border: 0px; line-height: 24px; background-size: 24px 24px; background-repeat: no-repeat; display: inline-block; text-indent: -99999px; } .hs-author-social-links a.hs-author-social-link.hs-social-facebook { background-image: url("//static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"); } .hs-author-social-links a.hs-author-social-link.hs-social-linkedin { background-image: url("//static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"); } .hs-author-social-links a.hs-author-social-link.hs-social-twitter { background-image: url("//static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"); } .hs-author-social-links a.hs-author-social-link.hs-social-google-plus { background-image: url("//static.hubspot.com/final/img/common/icons/social/googleplus-24x24.png"); } /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Wrapper */ .hs_cos_wrapper_type_image_slider { display: block; overflow: hidden } /* Browser Resets */ .hs_cos_flex-container a:active, .hs_cos_flex-slider a:active, .hs_cos_flex-container a:focus, .hs_cos_flex-slider a:focus {outline: none;} .hs_cos_flex-slides, .hs_cos_flex-control-nav, .hs_cos_flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .hs_cos_flex-slider {margin: 0; padding: 0;} .hs_cos_flex-slider .hs_cos_flex-slides > li {display: none; -webkit-backface-visibility: hidden; position: relative;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .hs_cos_flex-slider .hs_cos_flex-slides img {width: 100%; display: block; border-radius: 0px;} .hs_cos_flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .hs_cos_flex-slides element */ .hs_cos_flex-slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .hs_cos_flex-slides {display: block;} * html .hs_cos_flex-slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ /* FlexSlider Default Theme *********************************/ .hs_cos_flex-slider {margin: 0 0 60px; background: #fff; border: 0; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; zoom: 1;} .hs_cos_flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} .loading .hs_cos_flex-viewport {max-height: 300px;} .hs_cos_flex-slider .hs_cos_flex-slides {zoom: 1;} .carousel li {margin-right: 5px} /* Direction Nav */ .hs_cos_flex-direction-nav {*height: 0;} .hs_cos_flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(//static.hsappstatic.net/content_shared_assets/static-1.3935/img/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} .hs_cos_flex-direction-nav .hs_cos_flex-next {background-position: 100% 0; right: -36px; } .hs_cos_flex-direction-nav .hs_cos_flex-prev {left: -36px;} .hs_cos_flex-slider:hover .hs_cos_flex-next {opacity: 0.8; right: 5px;} .hs_cos_flex-slider:hover .hs_cos_flex-prev {opacity: 0.8; left: 5px;} .hs_cos_flex-slider:hover .hs_cos_flex-next:hover, .hs_cos_flex-slider:hover .hs_cos_flex-prev:hover {opacity: 1;} .hs_cos_flex-direction-nav .hs_cos_flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} /* Direction Nav for the Thumbnail Carousel */ .hs_cos_flex_thumbnavs-direction-nav { margin: 0px; padding: 0px; list-style: none; } .hs_cos_flex_thumbnavs-direction-nav {*height: 0;} .hs_cos_flex_thumbnavs-direction-nav a {width: 30px; height: 140px; margin: -60px 0 0; display: block; background: url(//static.hsappstatic.net/content_shared_assets/static-1.3935/img/bg_direction_nav.png) no-repeat 0 40%; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease;} .hs_cos_flex_thumbnavs-direction-nav .hs_cos_flex_thumbnavs-next {background-position: 100% 40%; right: 0px; } .hs_cos_flex_thumbnavs-direction-nav .hs_cos_flex_thumbnavs-prev {left: 0px;} .hs-cos-flex-slider-control-panel img { cursor: pointer; } .hs-cos-flex-slider-control-panel img:hover { opacity:.8; } .hs-cos-flex-slider-control-panel { margin-top: -30px; } /* Control Nav */ .hs_cos_flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} .hs_cos_flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .hs_cos_flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} .hs_cos_flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } .hs_cos_flex-control-paging li a.hs_cos_flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } .hs_cos_flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .hs_cos_flex-control-thumbs li {width: 25%; float: left; margin: 0;} .hs_cos_flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .hs_cos_flex-control-thumbs img:hover {opacity: 1;} .hs_cos_flex-control-thumbs .hs_cos_flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .hs_cos_flex-direction-nav .hs_cos_flex-prev {opacity: 1; left: 0;} .hs_cos_flex-direction-nav .hs_cos_flex-next {opacity: 1; right: 0;} } .hs_cos_flex-slider .caption { background-color: rgba(0,0,0,0.5); position: absolute; font-size: 2em; line-height: 1.1em; color: white; padding: 0px 5% 0px 5%; width: 100%; bottom: 0; text-align: center; } .hs_cos_flex-slider .superimpose .caption { color: white; font-size: 3em; line-height: 1.1em; position: absolute; padding: 0px 5% 0px 5%; width: 90%; top: 40%; text-align: center; background-color: transparent; } @media all and (max-width: 400px) { .hs_cos_flex-slider .superimpose .caption { background-color: black; position: static; font-size: 2em; line-height: 1.1em; color: white; width: 90%; padding: 0px 5% 0px 5%; top: 40%; text-align: center; } /* beat recaptcha into being responsive, !importants and specificity are necessary */ #recaptcha_area table#recaptcha_table {width: 300px !important;} #recaptcha_area table#recaptcha_table .recaptcha_r1_c1 {width: 300px !important;} #recaptcha_area table#recaptcha_table .recaptcha_r4_c4 { width: 67px !important;} #recaptcha_area table#recaptcha_table #recaptcha_image {width:280px !important;} } .hs_cos_flex-slider h1, .hs_cos_flex-slider h2, .hs_cos_flex-slider h3, .hs_cos_flex-slider h4, .hs_cos_flex-slider h5, .hs_cos_flex-slider h6, .hs_cos_flex-slider p { color: white; } /* Thumbnail only version of the gallery */ .hs-gallery-thumbnails li { display: inline-block; margin: 0px; padding: 0px; margin-right:-4px; } .hs-gallery-thumbnails.fixed-height li img { max-height: 150px; margin: 0px; padding: 0px; border-width: 0px; } /* responsive pre elements */ pre { overflow-x: auto; } /* responsive pre tables */ table pre { white-space: pre-wrap; } /* adding minimal spacing for blog comments */ .comment { margin: 10px 0 10px 0; } /* make sure lines with no whitespace don't interefere with layout */ .hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_text, .hs_cos_wrapper_type_header, .hs_cos_wrapper_type_section_header, .hs_cos_wrapper_type_raw_html, .hs_cos_wrapper_type_raw_jinja, .hs_cos_wrapper_type_page_footer { word-wrap: break-word; } /* HTML 5 Reset */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } /* Support migrations from wordpress */ .wp-float-left { float: left; margin: 0 20px 20px 0; } .wp-float-right { float: right; margin: 0 0 20px 20px; } /* Responsive Google Maps */ #map_canvas img, .google-maps img { max-width: none; } /* line height fix for reCaptcha theme */ #recaptcha_table td {line-height: 0;} .recaptchatable #recaptcha_response_field {min-height: 0;line-height: 12px;} /**********************************************************************************/ /* 1. Global Footer Form */ /**********************************************************************************/ .form-02 .cookie-reset-container { text-align: left; } .form-02 fieldset.form-columns-1 .hs-input { min-width: 100%; } .form-02 .hs-form li.hs-form-checkbox { margin-bottom: 8px; } .form-02 .hs-form input[type="checkbox"] { width: auto!important; min-width: auto!important; margin-right: 10px; } /* Placeholder Text (styles the placeholder attribute text) */ .form-02 input::-webkit-input-placeholder { color: var(--mediumGrey); } .form-02 input:-moz-placeholder { color: var(--mediumGrey)}; } .form-02 input::-moz-placeholder { color: var(--mediumGrey); } .form-02 input:-ms-input-placeholder { color: var(--mediumGrey); } @media (min-width: 420px) { .form-02 fieldset.form-columns-1 { width: 100%!important; } } .form-02 .hs-form-field { padding: 0 10px 10px 0px !important; margin-bottom: 10px; } .form-02 .hs-form-field input.error { border-bottom: 1px solid rgba(183,0,0,0.71) !important; transition: 0.9s ease all; -moz-transition:0.9s ease all; -webkit-transition:0.9s ease all; } .form-02 input[type="text"], .form-02 input[type="number"], .form-02 input[type="email"], .form-02 input[type="url"], .form-02 input[type="tel"], .form-02 textarea, .form-02 select { border-radius: 4px !important; background-color: #ffffff !important; color: var(--mediumGrey); font-size: 16px !important; box-shadow: none !important; border: 1px solid var(--darkBlue); font-family: "Avenir Next Regular"; padding: 15px 0; } .form-02 input[type="text"], .form-02 input[type="number"], .form-02 input[type="email"], .form-02 input[type="url"], .form-02 input[type="tel"], .form-02 select { height: 40px; padding: 10px 12px; line-height: 1.4em; } .form-02 input[type="text"]:focus, .form-02 input[type="number"]:focus, .form-02 input[type="email"]:focus, .form-02 input[type="url"]:focus, .form-02 input[type="tel"]:focus, .form-02 textarea:focus, .form-02 select:focus { border-color: var(--darkBlue) !important; border-width: 1px !important; box-shadow: none !important; transition: 0.9s ease all; -moz-transition:0.9s ease all; -webkit-transition:0.9s ease all; } .form-02 input[type="text"]:required:valid, .form-02 input[type="number"]:required:valid, .form-02 input[type="email"]:required:valid, .form-02 input[type="url"]:required:valid, .form-02 input[type="tel"]:required:valid, .form-02 select:required:valid{ border-width: 1px !important; transition: 0.9s ease all; -moz-transition:0.9s ease all; -webkit-transition:0.9s ease all; } .form-02 ul.inputs-list { padding: 0; } .form-02 .hs-form-radio { list-style: none; } .form-02 .hs-form input[type="radio"] { width: 15px!important; height: 15px; border: 2px solid var(--mediumGrey); border-radius: 50%; margin-right: 10px; transition: all .2s ease; } .form-02 .hs-form input[type="radio"]:checked { background: var(--darkBlue); border: 2px solid var(--darkBlue); } .form-02 input[type="radio"]:focus { outline: none; } .form-02 .hs-form-radio span { line-height: 1.5; position: absolute; } .form-02 .hs-form input[type="checkbox"] { width: auto!important; } .form-02 textarea { min-height: 60px !important; } .form-02 input[type="submit"] { font-family: "Avenir Next Medium"; font-size: 18px; font-style: normal; font-weight: normal; line-height: 1.25; letter-spacing: normal; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; width: fit-content; min-width: 180px; height: 40px; padding: 0 30px; border: none; border-radius: 25px; box-shadow: 0 5px 10px -3px rgb(106 106 106 / 20%); background-image: linear-gradient(55deg, #0f91f9 55%, #1d63f2 95%); background-position: 100%; background-size: 200%; color: var(--white); transition: all 0.3s ease; } .form-02 input[type="submit"]:hover { text-decoration: none; background-position: 0; } .form-02 input[type="submit"]:focus { background-position: 0; } .form-02 label.active { font-size:14px !important; color: var(--mediumBlue) !important; transition: 0.7s ease all; -moz-transition:0.7s ease all; -webkit-transition:0.7s ease all; } .form-02 span.hs-form-required { display: none; } .form-02 li { list-style: none; } .form-02 .hs-form .hs-error-msgs label { color: red; } /**********************************************************************************/ /* 2. Summit 2021 Form */ /**********************************************************************************/ .form-summit_2021 form fieldset { max-width: 100%; } /* Placeholder Text (styles the placeholder attribute text) */ .form-summit_2021 input::-webkit-input-placeholder { color: ; } .form-summit_2021 input:-moz-placeholder { color: ; } .form-summit_2021 input::-moz-placeholder { color: ; } .form-summit_2021 input:-ms-input-placeholder { color: ; } .form-summit_2021 .hs-form-field { padding: 0 10px 10px 0px !important; margin-bottom: 10px; } .form-summit_2021 .hs-form-field input.error { border-bottom: 1px solid rgba(183,0,0,0.71) !important; transition: 0.9s ease all; -moz-transition:0.9s ease all; -webkit-transition:0.9s ease all; } .form-summit_2021 input[type="text"], .form-summit_2021 input[type="number"], .form-summit_2021 input[type="email"], .form-summit_2021 input[type="url"], .form-summit_2021 input[type="tel"], .form-summit_2021 textarea, .form-summit_2021 select { border-radius: 4px !important; background-color: #ffffff !important; color: ; font-size: 16px !important; box-shadow: none !important; border: 1px solid ; font-family: "Avenir Next Regular"; padding: 15px 0; margin-top: 5px; } .form-summit_2021 input[type="text"], .form-summit_2021 input[type="number"], .form-summit_2021 input[type="email"], .form-summit_2021 input[type="url"], .form-summit_2021 input[type="tel"], .form-summit_2021 select { height: 40px; padding: 10px 12px; line-height: 1.4em; } .form-summit_2021 input[type="text"]:focus, .form-summit_2021 input[type="number"]:focus, .form-summit_2021 input[type="email"]:focus, .form-summit_2021 input[type="url"]:focus, .form-summit_2021 input[type="tel"]:focus, .form-summit_2021 textarea:focus, .form-summit_2021 select:focus { border-color: !important; border-width: 1px !important; box-shadow: none !important; transition: 0.9s ease all; -moz-transition:0.9s ease all; -webkit-transition:0.9s ease all; } .form-summit_2021 input[type="text"]:required:valid, .form-summit_2021 input[type="number"]:required:valid, .form-summit_2021 input[type="email"]:required:valid, .form-summit_2021 input[type="url"]:required:valid, .form-summit_2021 input[type="tel"]:required:valid, .form-summit_2021 select:required:valid{ border-width: 1px !important; transition: 0.9s ease all; -moz-transition:0.9s ease all; -webkit-transition:0.9s ease all; } .form-summit_2021 ul.inputs-list { padding: 0; } .form-summit_2021 .hs-form-radio { list-style: none; padding-left: 30px; text-indent: -30px; margin-bottom: 20px; } .form-summit_2021 .hs-form input[type="radio"] { width: 15px!important; height: 15px; border: 2px solid ; border-radius: 50%; margin-right: 10px; transition: all .2s ease; } .form-summit_2021 .hs-form input[type="radio"]:checked { background: ; border: 2px solid ; } .form-summit_2021 input[type="radio"]:focus { outline: none; } .form-summit_2021 .hs-form-radio span { line-height: 1.5; position: relative; } .form-summit_2021 .hs-form input[type="checkbox"] { width: auto!important; } .form-summit_2021 textarea { min-height: 60px !important; } .form-summit_2021 input[type="submit"] { display: inline-block; border-radius: 18px; text-decoration: none!important; cursor: pointer; font-weight: 400; font-size: 16px; transition: background-color 0.2s, border 0.2s, color 0.2s; font-family: "Avenir Next Medium",Helvetica Neue,Helvetica,Arial,sans-serif; background: var(--lightBlue); border:1px solid var(--lightBlue); color: #ffffff; height: 35px; line-height: 2; padding: 0 20px; box-shadow: 0 10px 39px -1px rgba(106, 106, 106, 0.49); } .form-summit_2021 input[type="submit"]:hover { background: var(--white); color: var(--lightBlue); border:1px solid var(--white); } .form-summit_2021 input[type="submit"]:focus { color: ; } .form-summit_2021 label { color: var(--white); margin-bottom: 5px; } .form-summit_2021 legend { color: var(--white); margin-top: 15px; margin-bottom: 5px; } .form-summit_2021 label.active { font-size:14px !important; color: !important; transition: 0.7s ease all; -moz-transition:0.7s ease all; -webkit-transition:0.7s ease all; } .form-summit_2021 span.hs-form-required { display: none; } .form-summit_2021 li { list-style: none; } .form-summit_2021 .hs-form .hs-error-msgs label { color: red; } @media (max-width: 700px) { .form-summit_2021 form fieldset.form-columns-2 .hs-form-field { width: 100%; } .form-summit_2021 form fieldset.form-columns-3 .hs-form-field { width: 100%; } } @import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400..800&display=swap'); /* -------------------------------------------------- Index: 1. NAVIGATION MODULE 2. BG GRADIENT MODULE 3. GRADIENT BANNER MODULE 4. SLANTED GRADIENT MODULE 5. QUOTE MODULE 6. QUOTE SLIDER MODULE 7. SINGLE QUOTE MODULE 8. RESOURCE SLIDER MODULE 9. CASE STUDY MODULE 10. LOGO SLIDER MODULE 11. Pricing Plan 12. FAQ MODULE 13. FORM MODULE 14. FOOTER MODULE 15. LIGHTBOX MODULE 16. FEATURE BUCKETS MODULE --------------------------------------------------*/ /*****************************************/ /* 1. NAVIGATION MODULE */ /*****************************************/ /***** DESKTOP MENU *****/ #desktop-nav { width: 100%; padding: 50px 0 0 0; margin: 0 auto; list-style: none; } #desktop-nav .grid { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; } #desktop-nav .left-menu { display: flex; flex-direction: column; } #desktop-nav .left-menu img { width: 225px; transform: translateX(-40px); } #desktop-nav .left-items { display: flex; flex-direction: row; margin-top: 20px; } #desktop-nav .left-items h4 { font-family: "Wix Madefor Display", serif; font-weight: normal; margin: 0 30px 8px 0; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: all .1s ease; } #desktop-nav .left-items li { list-style: none; margin: 0; } #desktop-nav .left-items a.no-link { cursor: default; } #desktop-nav .left-items li > ul { display:block; padding: 30px; width: max-content; visibility: hidden; opacity: 0; position:absolute; background-color:rgba(255,255,255,0.90); padding: 30px; margin: 0; -webkit-box-shadow: 7px 7px 20px rgba(0, 0, 0, .15); box-shadow: 7px 7px 20px rgba(0, 0, 0, .15); transition: all .3s ease; z-index: 2; } .fixed-header .left-items li>ul{background-color:#fff !important;} #desktop-nav .left-items li:hover > ul { visibility: visible; opacity: 1; } #desktop-nav .left-items li.level-2 { margin: 0 0 10px 0; } #desktop-nav .left-items li.level-2:last-child { margin: 0; } #desktop-nav .left-items li.level-2 h4 { font-size: 18px; font-family: "Wix Madefor Display", serif; margin: 0; text-decoration: none; color: var(--brightBlue); display: contents; } #desktop-nav .left-items li.level-2 a { border-bottom: 2px solid transparent; transition: all .2s ease-in-out; } #desktop-nav .left-items li.level-2 a:hover { border-bottom: 2px solid var(--darkBlue); } #desktop-nav .left-items li.level-2 a:hover h4 { color: var(--darkBlue); } #desktop-nav .right-menu { display: flex; flex-direction: column; } #desktop-nav .right-menu > * { align-self: flex-end; } #desktop-nav .right-items { display: flex; flex-direction: row; align-items: center; } #desktop-nav .right-items > * { margin-right: 20px; } #desktop-nav .right-items .p3 { text-transform: uppercase; transition: all .1s ease; border-bottom: 2px solid transparent; } #desktop-nav .right-items .login { display: flex; height: 40px; align-items: center; } #desktop-nav .right-items h4 { font-family: "Wix Madefor Display", serif; transition: all .1s ease; border-bottom: 2px solid transparent; color: var(--darkGrey); margin: 0; } #desktop-nav .right-items .p3, #desktop-nav .right-items h4 { color: var(--darkGrey); } #desktop-nav .right-items .p3:hover, #desktop-nav .right-items h4:hover { border-bottom: 2px solid var(--darkGrey); } #desktop-nav .right-items > *:last-child { margin-right: 0; } /***** SCROLL LOGIC MENU *****/ #mini-menu { display: flex; align-items: center; width: 100%; height: 110px; margin: 0 auto; background-color: var(--white); position: fixed; top: 0; transform: translateY(-200%); transition: all .3s ease; z-index: 99; -webkit-box-shadow: 7px 7px 20px rgba(0, 0, 0, .15); box-shadow: 7px 7px 20px rgba(0, 0, 0, .15); } #mini-menu.visible { transform: translateY(-200%); } #mini-menu.visible.nav-up { transform: translateY(-200%); } #mini-menu.visible.nav-down { transform: translateY(0); } #mini-menu .grid { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } #mini-menu .grid .left-nav { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; transform: translateX(-40px); } #mini-menu .grid .left-nav img { width: 30px; margin-right: 10px; } #mini-menu .grid .left-nav .left-items { display: flex; flex-direction: row; flex-wrap: nowrap; } #mini-menu .grid .left-nav .left-items h4 { font-family: "Wix Madefor Display", serif; font-weight: normal; font-size: 16px; margin: 0 30px 0 0; color: var(--darkGrey); } #mini-menu .grid .left-nav .left-items li { list-style: none; cursor: pointer; margin: 0; } #mini-menu .grid .left-nav .left-items li > ul { display:block; padding: 30px; margin-top: 15px; width: max-content; visibility: hidden; opacity: 0; position:absolute; background:#fff; padding: 30px; margin: 0; -webkit-box-shadow: 7px 7px 20px rgba(0, 0, 0, .15); box-shadow: 7px 7px 20px rgba(0, 0, 0, .15); transition: all .3s ease; z-index: 2; } #mini-menu .grid .left-nav .left-items li:hover > ul { visibility: visible; opacity: 1; } #mini-menu .grid .left-nav .left-items li.level-2 { margin: 0 0 20px 0; } #mini-menu .grid .left-nav .left-items li.level-2:last-child { margin: 0; } #mini-menu .grid .left-nav .left-items li.level-2 h4 { font-size: 16px; font-family: "Wix Madefor Display", serif; margin: 0; display: contents; } #mini-menu .grid .left-nav .left-items li.level-2 a { text-decoration: none; color: var(--waterBlue); border-bottom: 2px solid transparent; transition: all .2s ease-in-out; } #mini-menu .grid .left-nav .left-items li.level-2 a h4 { color: var(--brightBlue); transition: all 300ms ease; } #mini-menu .grid .left-nav .left-items li.level-2 a:hover { border-bottom: 2px solid var(--darkBlue); } #mini-menu .grid .left-nav .left-items li.level-2 a:hover h4 { color: var(--darkBlue); } #mini-menu .grid .right-nav { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } #mini-menu .grid .right-nav a:first-child { margin-right: 30px; } #mini-menu .login { display: flex; height: 40px; align-items: center; font-family: "Wix Madefor Display", serif; transition: all .1s ease; border-bottom: 2px solid transparent; color: var(--darkGrey); margin: 0; } #mini-menu .login:hover { border-bottom: 2px solid var(--darkGrey); } /***** MOBILE MENU *****/ #mobile-bg { width: 100%; height: 110px; margin: 0 auto; display: none; transition: all .3s ease; } #mobile-menu { width: 100vw; height: 110px; margin: 0 auto; display: none; position: fixed; top: 0; z-index: 10; transition: all .3s ease; } #mobile-menu.nav-up { transform: translateY(-100%); } #mobile-menu.color-bg { background-color: var(--white); box-shadow: 7px 7px 20px rgba(0, 0, 0, .15); } #mobile-menu .grid { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } #mobile-menu .grid .mobile-logo { display: flex; justify-content: center; align-items: center; width: fit-content; } #mobile-menu .grid img { width: 160px; } #mobile-menu .grid .burger { opacity: 1; cursor: pointer; -webkit-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } #mobile-menu .grid .burger .bar1, #mobile-menu .grid .burger .bar2, #mobile-menu .grid .burger .bar3 { display: block; position: relative; width: 30px; height: 4px; margin: 6px 0; border-radius: 15px; background-color: var(--darkGrey); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } #mobile-menu .grid .burger:hover { opacity: .8; } #mobile-nav { width: 100vw; height: 101vh; position: fixed; top: 0; z-index: 98; background-image: linear-gradient(-70deg, #03B9FF -5.23%, #1D63F2 69.34%); transform: translateX(300%); transition: all .5s ease; overflow-y: scroll; } #mobile-nav.open { transform: translateY(0); } #mobile-nav .grid { width: 100%; padding: 0 30px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } #mobile-nav .grid > .f-dir-row { width: 100%; } #mobile-nav .grid .close { opacity: 1; cursor: pointer; -webkit-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } #mobile-nav .grid .close .bar1, #mobile-nav .grid .close .bar2 { display: block; position: relative; width: 30px; height: 4px; margin: 6px 0; border-radius: 15px; background-color: var(--white); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } #mobile-nav .grid .close:hover { opacity: .8; } #mobile-nav .close .bar1 { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 4.5px; } #mobile-nav .close .bar2 { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 5px; } #mobile-nav .grid ul { margin: 0; } #mobile-nav .grid ul, #mobile-nav .grid li { list-style: none; padding: 0; width: 100%; } #mobile-nav .grid .level-1 { border-top: none; } #mobile-nav .grid .level-1:last-child { border-bottom: none; } #mobile-nav .grid .level-1 h4, #mobile-nav .right-items h4 { font-family: "Wix Madefor Display", serif; color: var(--white); margin: 0 auto 20px auto; padding: 0; cursor: pointer; } #mobile-nav .left-items h4.fw-regular { font-family: "Wix Madefor Display", serif; margin: 0 auto 10px auto; color: var(--white); } #mobile-nav .grid .level-1.item-has-children > a h4 { margin: 0 auto 10px auto; } #mobile-nav .grid .level-1.item-has-children::after { display: none; } #mobile-nav .grid .level-1.item-has-children>ul { display: block; } #mobile-nav .grid li.level-2 { margin-bottom: 10px; } #mobile-nav .grid .level-2 h4 { color: var(--white); font-family: "Wix Madefor Display", serif; font-size: 16px; padding: 0; margin: 0; } #mobile-nav .grid .level-2:last-child h4 { margin: 0 0 20px 0; } #mobile-nav .grid .right-items { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: 40px 0; } /***** RESPONSIVE STYLING *****/ @media screen and (max-width: 1150px) { #desktop-nav .left-menu img, #mini-menu .grid .left-nav { transform: translateX(0); } } @media screen and (min-width: 990px) { #mobile-nav, #mobile-nav.open { transform: translateX(300%); } } @media screen and (max-width: 990px) { nav#desktop-nav, #mini-menu { display: none; } #mobile-menu, #mobile-bg, #mobile-nav { display: flex; } } /*****************************************/ /* 2. BG GRADIENT MODULE */ /*****************************************/ #bg-gradient { width: 100%; height: 1500px; position: absolute; top: 0; bottom: 0; left: 0; background-size: 2500px auto; background-position: center top; background-repeat: no-repeat; z-index: -10; image-rendering: pixelated; } /*****************************************/ /* 3. GRADIENT BANNER MODULE */ /*****************************************/ .gradient-banner { width: 100%; padding: 175px 0; background: -webkit-linear-gradient(left,#0376f9,#00a6ff); background: linear-gradient(90deg,#0376f9,#00a6ff); border-bottom-left-radius: 240px; position: relative; } .gradient-banner .text-wrapper > * { color: var(--white); } .gradient-banner img { position: absolute; top: 0; right: 0; max-width: 400px; opacity: .08; } @media (max-width: 1000px) { .gradient-banner { padding: 150px 0; } .gradient-banner .text-wrapper > * { text-align: center; } } @media (max-width: 800px) { .gradient-banner { padding: 100px 0; } .gradient-banner img { opacity: .05; } } @media (max-width: 600px) { .gradient-banner { padding: 50px 0; } } /*****************************************/ /* 4. SLANTED GRADIENT MODULE */ /*****************************************/ .slanted-gradient { height: 700px; width: 100%; max-width: 1500px; margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; z-index: -1; background: linear-gradient(153.23deg, #1D63F2 3.56%, #03B9FF 83.83%); clip-path: polygon(0 0,60% 0,100% 70%,100% 100%,20% 100%,0 65%); } .slanted-hero-content { width: 100%; max-width: 1500px; margin: 50px auto 100px auto; } .slanted-hero-content .text-wrapper { padding-right: 250px; } .slanted-hero-content .text-wrapper > * { color: var(--white); } @media (min-width: 1500px) { .slanted-gradient { clip-path: polygon(0 0,60% 0,100% 100%,100% 100%,10% 100%,0 65%); } } @media (max-width: 1250px) { .slanted-gradient { clip-path: polygon(0 0,60% 0,100% 70%,100% 100%,10% 100%,0 80%); } } @media (max-width: 990px) { .slanted-gradient { clip-path: none; } .slanted-hero-content { margin: 100px auto; } .slanted-hero-content .text-wrapper { padding-right: 0; } } /*****************************************/ /* 5. QUOTE MODULE */ /*****************************************/ #quote-container { width: 100%; margin: 0 auto; padding: 50px 30px; } #quote-container .grid { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; transition: transform 1s; } #quote-container .grid .quote-lockup { display: flex; flex-direction: column; justify-content: space-between; padding-right: 20px; } #quote-container .grid .quote-lockup .quote { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } #quote-container .grid .quote-lockup .quote .mark { font-size: 60px; font-family: "Wix Madefor Display", serif; margin: 0 10px 0 0; color: var(--white); } #quote-container .grid .quote-lockup .quote h3 { font-family: "Wix Madefor Display", serif; color: var(--white); margin: 0; } #quote-container .grid .quote-lockup .author { display: flex; flex-direction: column; align-items: center; margin-top: 30px; } #quote-container .grid .quote-lockup .author .author-info { text-align: center; } #quote-container .grid .quote-lockup .author img { width: 60px; height: 60px; border-radius: 100%; margin-bottom: 5px; } #quote-container .grid .quote-lockup .author .p1 { font-family: "Wix Madefor Display", serif; color: var(--white); margin: 0; } #quote-container .bubbles { margin-top: 40px; display: none; flex-direction: row; justify-content: center; } #quote-container .bubbles .bubble { width: 13px; height: 13px; margin: 30px; cursor: pointer; border-radius: 50%; background: var(--lightGrey); } #quote-container .bubbles .bubble.active { background: var(--darkBlue); } @media (max-width: 1020px) { #quote-container { padding: 50px 0; overflow: hidden; } #quote-container .bubbles { display: flex; } #quote-container .grid { width: 300%; padding: initial; max-width: initial; } #quote-container .grid .quote-lockup { padding: 0 30px; text-align: center; width: 100vw; } #quote-container .grid .quote-lockup .quote, #quote-container .grid .quote-lockup .author { align-items: center; flex-direction: column; } #quote-container .grid .quote-lockup .author, #quote-container .grid .quote-lockup .author img, #quote-container .grid .quote-lockup .quote .mark { margin: 10px; padding: 10px; } } @media screen and (max-width: 500px) { #quote-container .grid .quote-lockup .author img { width: 80px; height: 80px; } } /* ========================================================================== 6. QUOTE SLIDER MODULE ========================================================================== */ .quote_slider-global-container .quote-wrapper { position: relative; overflow: hidden; height: 700px; align-items: center; } .quote_slider-global-container .quote-lockup { width: 100%; min-width: 100%; position: absolute; animation: slide-up 500ms cubic-bezier(.34, .01, .21, 1) 0ms 1 forwards; } .quote_slider-global-container .quote-lockup.current { animation: slide-down 500ms cubic-bezier(.34, .01, .21, 1) 0ms 1 forwards; } .quote_slider-global-container .quote-mark { width: 110px; margin-top: 5px; } .quote_slider-global-container .timer { position: relative; } .quote_slider-global-container .timer, .quote_slider-global-container .timer svg, .quote_slider-global-container .timer circle { width: 120px; height: 120px; } .quote_slider-global-container .timer svg { transform: rotate(-90deg); } .quote_slider-global-container .timer circle { position: absolute; fill: none; transform: translate(10px, 10px); stroke-dasharray: 310; stroke-linecap: round; } .quote_slider-global-container .timer circle:nth-child(1) { stroke-width: 3; stroke-dashoffset: 0; stroke: #DADADA; } .quote_slider-global-container .timer circle:nth-child(2) { stroke-width: 3.1; stroke-dashoffset: 310; stroke: #00BFFF; } .quote_slider-global-container .quote-lockup.current .timer circle:nth-child(2) { animation: percent 8s linear 300ms 1 forwards; } .quote_slider-global-container .headshot { position: absolute; width: 88px; height: 88px; margin: 16px; top: 0; } /* ========================================================================== 7. SINGLE QUOTE MODULE ========================================================================== */ .single_quote-global-container .quote-wrapper { position: relative; overflow: hidden; align-items: center; } .single_quote-global-container .quote-lockup { width: 100%; } .single_quote-global-container .quote-mark { width: 110px; margin-top: 5px; } .single_quote-global-container .timer { position: relative; } .single_quote-global-container .timer, .single_quote-global-container .timer svg, .single_quote-global-container .timer circle { width: 120px; height: 120px; } .single_quote-global-container .timer svg { transform: rotate(-90deg); } .single_quote-global-container .timer circle { position: absolute; fill: none; transform: translate(10px, 10px); stroke-dasharray: 310; stroke-linecap: round; } .single_quote-global-container .timer circle:nth-child(1) { stroke-width: 3; stroke-dashoffset: 0; stroke: #DADADA; } .single_quote-global-container .timer circle:nth-child(2) { stroke-width: 3.1; stroke-dashoffset: 310; stroke: #00BFFF; } .single_quote-global-container .quote-lockup.current .timer circle:nth-child(2) { animation: percent 8s linear 300ms 1 forwards; } .single_quote-global-container .headshot { width: 120px; height: 120px; margin: 16px; } /* ========================================================================== 8. RESOURCE SLIDER MODULE ========================================================================== */ .resource_slider-global-container .resource-wrapper { overflow: hidden; } .resource_slider-global-container .resource-lockup { width: 100%; min-width: 100%; transition: all 300ms ease; } .resource_slider-global-container .resource-lockup > * { width: 50%; } .resource_slider-global-container .resource-description { background: var(--white); } .resource_slider-global-container .resource-description a { color: var(--brightBlue); border-bottom: 2px solid var(--brightBlue); width: fit-content; padding-bottom: 4px; transition: all 300ms ease; } .resource_slider-global-container .resource-description a:hover { color: var(--darkBlue); border-bottom: 2px solid var(--darkBlue); } .resource_slider-global-container a.resource-image { background-size: cover; background-repeat: no-repeat; background-position: center; } .resource_slider-global-container .resource-control div.active { cursor: pointer; } .resource_slider-global-container .resource-control svg .arrow-left, .resource_slider-global-container .resource-control svg .arrow-right { fill:none; transition: all 300ms ease; stroke: #c4c4c4; stroke-width:2.5; } .resource_slider-global-container .resource-control .active svg .arrow-left, .resource_slider-global-container .resource-control .active svg .arrow-right { stroke: var(--brightBlue); } .resource_slider-global-container .circle-wrapper .circle { fill: #c4c4c4; transition: all 300ms ease; } .resource_slider-global-container .circle-wrapper.active { cursor: auto; } .resource_slider-global-container .circle-wrapper.active .circle { fill: #00BFFF; } @media (max-width: 730px) { .resource_slider-global-container .f-dir-row.resource-lockup { flex-direction: column; } .resource_slider-global-container .resource-lockup > * { width: 100%; } .resource_slider-global-container a.resource-image { height: 250px; } } /* ========================================================================== 9. CASE STUDY MODULE ========================================================================== */ .case_study-global-container .case_study-wrapper { display: flex; flex-direction: row; justify-content: flex-end; padding: 30px; position: relative; } .case_study-global-container .bg-image { width: 100%; height: 100%; position: absolute; z-index: 0; background-repeat: no-repeat; background-size: cover; background-position: top center; top: 0; right: 0; bottom: 0; left: 0; } .case_study-global-container .f-dir-row { background: var(--white); padding: 30px; max-width: 50%; z-index: 1; } .case_study-global-container .f-dir-row svg { width: 28px; } .case_study-global-container .f-dir-col { width: calc(100% - 28px); padding-left: 20px; } .case_study-global-container a { color: var(--brightBlue); transition: all 300ms ease; border-bottom: 3px solid var(--brightBlue); align-self: flex-start; padding: 0 0 4px 0; } .case_study-global-container a:hover { color: var(--waterBlue); border-bottom: 3px solid var(--waterBlue); } @media (max-width: 850px) { .case_study-global-container .f-dir-row { max-width: 70%; } } @media (max-width: 750px) { .case_study-global-container .case_study-wrapper { padding: 70% 0 0 0; } .case_study-global-container .bg-image { height: 60%; } .case_study-global-container .f-dir-row { max-width: 100%; } } @media (max-width: 600px) { .case_study-global-container .f-dir-row { padding: 30px 0 0 0; } } /* ========================================================================== 10. LOGO SLIDER MODULE ========================================================================== */ .track-wrapper { overflow: hidden; position: relative; display: flex; width: 100%; height: 250px; justify-content: flex-start; } .logo_slider-global-container .logo-track { display: flex; height: 100%; } .logo_slider-global-container .logo-track .img-wrapper { flex: 1; max-width: 260px; display: flex; align-items: center; justify-content: center; padding: 30px; transform: translate3d(0, 0, 0); } .logo_slider-global-container .logo-track .img-wrapper img { height: auto; max-width: 200px; } /*****************************************/ /* 11. Pricing Plan */ /*****************************************/ .pricing_plans-global-container .grid > *{ background: var(--white); } .pricing_plans-global-container .headline-wrapper { margin-bottom: 4px; } .pricing_plans-global-container .logo { width: 175px; } .pricing_plans-global-container .big { font-size: 36px; } .pricing_plans-global-container .popular { font-size: 12px; max-width: 60px; } .pricing_plans-global-container .red { color: #EF5438; } .pricing_plans-global-container .blue { color: #16ABDD; } .pricing_plans-global-container .yellow { color: #FECC0D; } .pricing_plans-global-container .purple { color: #741AF4; } @media (max-width: 730px) { .pricing_plans-global-container .headline-wrapper { flex-direction: column; align-items: flex-start; } .pricing_plans-global-container .logo { margin-bottom: 10px; } } /*****************************************/ /* 12. FAQ MODULE */ /*****************************************/ .faq-global-container .faq-lockup { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .faq-global-container .faq-lockup p.p1 { border-top: 2px solid var(--darkGrey); } .faq-global-container .question { width: 100%; display: flex; flex-direction: row; justify-content: space-between; border-top: 2px solid var(--darkGrey); } .faq-global-container .question:last-child { border-bottom: 2px solid var(--darkGrey); } .faq-global-container .question-text { width: 45%; text-indent: -40px; margin-left: 44px; cursor: pointer; } .faq-global-container .question-text::before { content: ""; width: 18px; height: 18px; margin-right: 18px; margin-bottom: 5px; vertical-align: sub; display: inline-block; transform: rotate(-135deg); transition: all .3s ease; border-top: 2px solid var(--green); border-left: 2px solid var(--green); cursor: pointer; } .faq-global-container .question-text.active::before { vertical-align: top; transform: translateY(15px) rotate(45deg); } .faq-global-container .question .answer { width: 50%; display: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .faq-global-container .grid .faq-lockup .question .answer > h4 { margin: 0 0 15px 0; } /*Responsive Queries*/ @media screen and (max-width: 930px) { .faq-global-container .grid .faq-lockup { overflow: hidden; } .faq-global-container .grid .faq-lockup .question { flex-direction: column; padding-right: 40px; } .faq-global-container .grid .faq-lockup .question > h4 { width: 100%; } .faq-global-container .grid .faq-lockup .question .answer { width: 100%; margin-left: 40px; } } /*****************************************/ /* 13. FORM MODULE */ /*****************************************/ .form-global-container { width: 100%; margin: 0 auto; background-image: url(https://www.hint.com/hubfs/Active/images/v2/home/form-heart.svg); background-size: cover; background-repeat: no-repeat; padding: 130px 0; } .form-global-container .grid { display: flex; flex-direction: row; flex-wrap: nowrap; } .form-global-container .grid .form-copy { display: flex; flex-direction: column; max-width: 490px; margin: 0 75px 0 0; } .form-global-container .grid .form-copy h2 { margin: 0 0 30px 0; } .form-global-container .grid .form-copy .p1 { margin: 0; } /*Responsive Queries*/ @media screen and (max-width:790px) { .form-global-container .grid { flex-direction: column; align-items: center; justify-content: center; } .form-global-container .grid .form-copy { margin: 0 0 50px 0; max-width: 100%; } } @media screen and (max-width:500px) { .form-global-container .grid .form-copy p.p1 { font-size: 16px; } } /*****************************************/ /* 15. LIGHTBOX MODULE */ /*****************************************/ .mediabox-wrap { position: fixed; width: 100%; height: 100%; background-color: #000; background-color: rgba(0,0,0,0.8); top: 0; left: 0; opacity: 0; z-index: 999; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: mediabox; animation-name: mediabox; } @-webkit-keyframes mediabox { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes mediabox { 0% { opacity: 0; } 100% { opacity: 1; } } .mediabox-content { max-width: 680px; display: block; margin: 0 auto; height: 100%; position: relative; } .mediabox-content iframe { max-width: 100% !important; width: 100% !important; display: block !important; height: 480px !important; border: none !important; position: absolute; top: 0; bottom: 0; margin: auto 0; } .mediabox-hide { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: mediaboxhide; animation-name: mediaboxhide; } @-webkit-keyframes mediaboxhide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes mediaboxhide { 0% { opacity: 1; } 100% { opacity: 0; } } .mediabox-close { position: absolute; top: 0; cursor: pointer; bottom: 528px; right: 0px; margin: auto 0; width: 24px; height: 24px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAMvSURBVHja7Js9aBRBFMd/d1lPY6FiJVjY+Fkoxl7wA1Q0prQRS6tgoZV2MWIRRVHUUq3U+JnESrS2sBXBzipREWMlATXwt8gFznC5nd15M7Nn8uC45nZnfr/dY96+N1uTxFKOOks8lgUU/H2t4tJqIQUcAiaBGeBymcECRgO4B/wBPgJ9zkdKcvkclfRL/8ZtSTXH40N+GpLGF8zth6Q9Lse7DHCsDXxVJLSDLyQhb4B+Sb/VOVJJ6ATfKqGvrIDjDvCpJLjAz8d0JwmLDTBQAD62hIakiYJzm5a021VAfwn4WBLKwLdK2JUnIJP0XX4RSoIP/Hy8W3jeepv1dL3nmjwI3DLOExrAU2DA8zwb8xKhGeCuwYQtJTSAZwbwAHdcEqFM0mPZhO/foSHppdFcrraby2IDV0FCcPi8PCClhCjwLplgCgkrDeGv5I3pcjViSogK7yogloTo8EUEhJaQBL6oAGsJ9yVtkrRD0qsU8JKolagKZ8AD4ETFymFXgPOAQpXE5mMWOAk86XZ4n6pwlSSUhvcti1dBghe8RV8gpYQRX3irxkgKCSPABV94y85QTAlm8NatsRgSTOGBUnmAS57w3KiA0Ro3gHOW8KEEAOwE3hvfXWubFauu6A6vCND07OmW9viq5vpsGT3AtRAN2XoA+BfAwQBiTweoNpMZw48BRwKuAoPN7zNVWwZjwAfpO9S7DN5cQmYAPw4cTvAsYPJ3qHcpvNmdUO9ieBMJZQT0AhMVgfeWUC8BP87cjjHfuA6sATY0c4c0EgpUUHslvTaq3l5aUL1N1oarAnxSCVWBTyYhJvyw41XJJI3GkpAH/yYyfHQJi01gdUL4qBKqCh9NQrtBx4wGvGi0XS6T9MhoTkN5AtZVDN5awlTePsGfwDfPjGwYGDKu3s4Cp4BRz/N8cskED0iaqciVt7wTvkra5roKlJEQGt5HwhdJ24vmAUUkDEV+VyCT9NBxbp/bXXnXTNBFQmz4IhI6wrs+C+zvICEVvIuEKUlbrZ4G97WRkBq+k4RJSVusd4ntlfSheVudrQh8q4SbmntH6K2kzSF3if1Xsfzq7LKAJR5/BwCdAQBJn4egPgAAAABJRU5ErkJggg==') no-repeat; background-size: 24px 24px; -webkit-background-size: 24px 24px; -moz-background-size: 24px 24px; -o-background-size: 24px 24px; } .mediabox-close:hover { opacity: 0.5; } @media all and (max-width: 768px) and (min-width: 10px) { .mediabox-content { max-width: 90%; } } @media all and (max-width: 600px) and (min-width: 10px) { .mediabox-content iframe { height: 320px !important; } .mediabox-close { bottom: 362px; } } @media all and (max-width: 480px) and (min-width: 10px) { .mediabox-content iframe { height: 220px !important; } .mediabox-close { bottom: 262px; } } @media all and (max-width: 850px) and (orientation: landscape) { .mediabox-content iframe { height: 240px !important; } .mediabox-close { bottom: 265px; } } /*****************************************/ /* KEYFRAMES */ /*****************************************/ @keyframes percent { 0% { stroke-dashoffset: 310; } 100% { stroke-dashoffset: 0; } } @keyframes slide-right { 0% { transform: translateX(-100%); opacity: 0; } 30% { opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slide-left { 0% { transform: translateX(0); opacity: 1; } 70% { opacity: 0; } 100% { transform: translateX(-100%); opacity: 0; } } @keyframes slide-down { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slide-up { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 0; } 100% { transform: translateY(-100%); opacity: 0; } } /*****************************************/ /* 16. FEATURE BUCKETS MODULE */ /*****************************************/ .feature_buckets-global-container { padding: 120px 0; } .feature_buckets-global-container .shift { transform: translateY(-50px); } .feature_buckets-global-container .logo { max-width: 200px; } .feature_buckets-global-container .slider { display: flex; flex-direction: row; overflow: hidden; position: relative; height: 400px; } .feature_buckets-global-container .slide { width: 100%; min-width: 100%; display: block; position: absolute; transform: translate(100%, 0); } .feature_buckets-global-container .slide.animate-on { animation: slide-in 500ms cubic-bezier(.34, .01, .21, 1) 0ms 1 forwards; z-index: 1; } .feature_buckets-global-container .slide.animate-off { animation: slide-out 500ms cubic-bezier(.34, .01, .21, 1) 0ms 1 forwards; z-index: 0; } .feature_buckets-global-container .retail-a { width: 90%; } .feature_buckets-global-container .contracting-a { width: 90%; position: absolute; top: 0; left: 0; } .feature_buckets-global-container .affiliate-a { width: 88%; } .feature_buckets-global-container .reporting-a { width: 81%; } .feature_buckets-global-container .api-a { width: 81%; position: absolute; top: 0; left: 0; } .feature_buckets-global-container .card { padding: 25px; position: relative; border-top: 1px solid transparent; background: var(--white); transition: all 300ms ease; cursor: pointer; } .feature_buckets-global-container .card.active { border-top: 1px solid var(--darkBlue); background: #EBFBFF; transition: all 300ms ease; } .feature_buckets-global-container .card:hover { background: #EBFBFF; } .feature_buckets-global-container .card:before, .feature_buckets-global-container .bellow:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; box-shadow: 0px 10px 44px rgb(140 139 139 / 25%); } .feature_buckets-global-container .card .icon { width: 100%; height: 55px; } .feature_buckets-global-container .card .icon img { width: fit-content; } .feature_buckets-global-container .card h4 { letter-spacing: -.75px; } @keyframes slide-in { 0% { transform: translate(100%, 0); opacity: 0; } 30% { opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes slide-out { 0% { transform: translate(0, 0); opacity: 1; } 70% { opacity: 0; } 100% { transform: translate(-100%, 0); opacity: 0; } } .feature_buckets-global-container .mobile-accordion { display: none; } .feature_buckets-global-container .bellow { padding: 30px 20px; margin: 0 auto 10px 0; position: relative; cursor: pointer; background: var(--white); } .feature_buckets-global-container .bellow svg.arrow { transition: all 300ms ease; } .feature_buckets-global-container .bellow.active svg.arrow { transform: rotate(180deg); } /*.feature_buckets-global-container .bellow .information { display: none; }*/ .feature_buckets-global-container .security { background: var(--white); padding: 20px 25px; margin: 5px auto 0 auto; } @media (max-width: 750px) { .feature_buckets-global-container .slider, .feature_buckets-global-container .col-5 { display: none; } .feature_buckets-global-container .mobile-accordion { display: block; } .feature_buckets-global-container .col-2_3.shift { transform: translateY(0); margin: 50px auto; display: flex; } .feature_buckets-global-container .col-2_3.security { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); } .feature_buckets-global-container .security .badges { margin: 30px 0 0 0; padding: 0 0 0 70px; } } @media (max-width: 550px) { .feature_buckets-global-container .security .badges { padding: 0; } } @import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400..800&display=swap'); .popup-container { width: 100%; max-width: 600px; height: 366px; padding: 50px; position: absolute; top: calc(50% - 183px); left: calc(50% - 300px); background: center / cover no-repeat url('https://www.hint.com/hubfs/Active/images/global/summit-popup/bg.svg'); background-color: #ffffff; border-radius: 6px; box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.35); } .popup-container .popup-wrapper { position: relative; } .popup-container .close-button { position: absolute; top: 50px; right: 50px; cursor: pointer; } .popup-container .close-button .bar-1, .popup-container .close-button .bar-2 { width: 20px; border-radius: 2px; height: 2px; background: #743FE2; } .popup-container .close-button .bar-1 { transform: rotate(45deg); } .popup-container .close-button .bar-2 { transform: rotate(-45deg) translate(2px, -1px); } .popup-container .content-wrapper { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; flex-wrap: nowrap; margin: 20px 0 0 0; } .popup-container .content-wrapper h3 { font-family: "Wix Madefor Display", serif; color: #1610a3; font-size: 36px; line-height: 36px; text-align: right; margin: 0 20px 0 42px;; max-width: 190px; } .popup-container .cta-wrapper { width: fit-content; display: flex; justify-content: center; align-items: center; position: relative; padding: 10px 20px; } .popup-container .cta-wrapper a.p1 { color: #ffffff; transition: all 250ms ease; z-index: 1; } .popup-container .cta-wrapper:hover a.p1 { color: #1611A4; } .popup-container .cta-wrapper .color-pill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: multiply; border-radius: 25px; transition: all 250ms ease; } .popup-container .cta-wrapper .pill-a { background: #E853BA; transform: translate(-5px, 0px); } .popup-container .cta-wrapper .pill-b { background: #36DFFF; transform: translate(0px, -5px); } .popup-container .cta-wrapper .pill-c { background: #733AE1; transform: translate(2px, 5px); } .popup-container .cta-wrapper:hover .pill-a, .popup-container .cta-wrapper:hover .pill-b, .popup-container .cta-wrapper:hover .pill-c { transform: translate(0px, 0px); } .popup-container .cta-wrapper:hover .pill-b { mix-blend-mode: unset; } .popup-container .cta-wrapper:hover .pill-a, .popup-container .cta-wrapper:hover .pill-c { opacity: 0; } @media (max-width: 600px) { .popup-container { max-width: 90vw; height: 404px; left: calc(50% - 45vw); top: calc(50% - 202px); } .popup-container .content-wrapper { flex-direction: column; align-items: center; } .popup-container .content-wrapper h3 { text-align: center; margin: 20px 0 20px 0; max-width: 250px; } .popup-container .close-button { top: 30px; } } /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* -------------------------------------------------- Index: 1. @font-face 2. VARIABLES 3. BASE STYLES 4. TYPOGRAPHY 5. BUTTONS 6. BACKGROUND GRADIENTS --------------------------------------------------*/ /* ========================================================================== 1. @font-face ========================================================================== */ @font-face { font-family: "Avenir Next Heavy"; src: url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5182856/2fbeb7cb-c553-4ce0-b61d-18c94bfae714.eot#iefix"); src: url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5182856/2fbeb7cb-c553-4ce0-b61d-18c94bfae714.eot#iefix") format("eot"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5182856/e8c7b0ce-4b81-4ef7-ac01-900c8b690b9d.woff2") format("woff2"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5182856/63922eae-6406-438f-bbc0-f0ede8253354.woff") format("woff"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5182856/5fb37202-b0cf-4173-b9b9-17aa3c7a9d2a.ttf") format("truetype"); font-display: fallback; } @font-face { font-family: "Avenir Next Bold"; src: url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5199694/33b5fc3f-3be1-45d1-bc29-6a9286da6f8e.eot#iefix"); src: url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5199694/33b5fc3f-3be1-45d1-bc29-6a9286da6f8e.eot#iefix") format("eot"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5199694/750e110a-c47f-4c8f-829a-b56cc20cc51d.woff2") format("woff2"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5199694/f3420df8-1310-4059-9207-e82b1c9dd3a5.woff") format("woff"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5199694/9d614368-aa4e-48a6-856a-c89ac91e6a35.ttf") format("truetype"); font-display: fallback; } @font-face { font-family: "Avenir Next Medium"; src: url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226623/a7d3bd64-119b-40ad-985c-a50776f2ae49.eot#iefix"); src: url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226623/a7d3bd64-119b-40ad-985c-a50776f2ae49.eot#iefix") format("eot"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226623/9851da0a-2481-4687-bbeb-ed4ab170dc38.woff2") format("woff2"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226623/cebce072-9561-4c6d-8c89-f0cefec63289.woff") format("woff"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226623/8d00a64e-2d77-46b1-8804-6012868d61c9.ttf") format("truetype"); font-display: fallback; } @font-face { font-family: "Avenir Next Regular"; src: url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5508244/a39bd16a-119f-4e92-824f-eb6cc6b3f567.eot#iefix"); src: url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5508244/a39bd16a-119f-4e92-824f-eb6cc6b3f567.eot#iefix") format("eot"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5508244/77caabd3-1877-4634-85c8-8e398a093b99.woff2") format("woff2"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5508244/e388ac99-8c6a-4451-8690-1d15b4d45adb.woff") format("woff"), url("//2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5508244/8900c86a-b226-4db5-a4ff-eadf7379c504") format("truetype"); font-display: fallback; } @font-face { font-family: "Avenir Next Light"; src: url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226496/f1ca9e98-c8c2-480f-a2a3-a29853a558ea.eot#iefix"); src: url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226496/f1ca9e98-c8c2-480f-a2a3-a29853a558ea.eot#iefix") format("eot"), url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226496/77156710-6a58-4606-b189-b4185e75967b.woff2") format("woff2"), url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226496/3d5260a1-e4cd-4567-80ed-69d23c40355f.woff") format("woff"), url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5226496/b1d8a86f-0052-4e40-8c11-4ac9dc89b380.ttf") format("truetype"); font-display: fallback; } @font-face { font-family: "Avenir Next Thin"; src: url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5687896/a5533a01-50a2-4758-8e3e-561bd17b537e.eot#iefix"); src: url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5687896/a5533a01-50a2-4758-8e3e-561bd17b537e.eot#iefix") format("eot"), url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5687896/63307d53-0a7a-4516-ad2c-f5506e176405.woff2") format("woff2"), url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5687896/b027b44b-af3b-491b-af0c-956833907010.woff") format("woff"), url("https://2562809.fs1.hubspotusercontent-na1.net/hubfs/2562809/Active/identity/fonts/5687896/777785ab-282b-4f61-8761-5be23830ee88") format("truetype"); font-display: fallback; } /* ========================================================================== 2. VARIABLES ========================================================================== */ /*Grid*/ /*1128px width with 30px padding*/ :root { /* Standard Colors */ --black: #000000; --white: #ffffff; /*Primary Palette*/ --darkBlue: #1d63f2; --mediumBlue: #16abdd; --lightBlue: #53cefe; --brightBlue: #00bfff; --waterBlue: #0889ba; --paleBlue: #3eb7e8; --green: #00b589; --seaFoam: #00bcd6; --purple: #741af4; --red: #fe2264; --yellow: #fecc0d; --orange: #ef5438; --pink: #f55bee; /* Greyscale Palette */ --darkGrey: #4a4a4a; --mediumGrey: #636363; --lightGrey: #d8d8d8; } /*Typography*/ /* ========================================================================== 3. BASE STYLES ========================================================================== */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { min-height: 100%; margin: 0; padding: 0; max-width: 100%; overflow-x: visible; } body { margin: 0; overflow-x: hidden; background: #fff; color: ; font-family: 'Wix Madefor Display', sans-serif,Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 18px; line-height: 1; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: none; } .row-fluid [class*="span"] { min-height: 0!important; } .page-center { width: 100%; margin: 0 auto; float: none; } .clearfix { clear: both; } * { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; } /* Links */ a { text-decoration: none; color: var(--brightBlue); transition: all 0.2s ease-in-out; } /* Highlighted Text */ ::-moz-selection { color: #fff; background: var(--waterBlue); text-shadow: none; } ::selection { color: #fff; background: var(--waterBlue); text-shadow: none; } /* Base styles for the element that has a tooltip. */ [data-tooltip] { position: relative; cursor: pointer; } /* Base styles for the entire tooltip */ [data-tooltip]:before, [data-tooltip]:after { position: absolute; visibility: hidden; opacity: 0; pointer-events: none; transition: all 300ms ease; } /* Show the entire tooltip on hover and focus */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; opacity: 1; } /* Base styles for the tooltip's directional arrow */ [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; } /* Base styles for the tooltip's content area */ [data-tooltip]:after { border-radius: 4px; z-index: 1000; padding: 15px; width: 220px; background-color: #EFFCFF; color: #525866; content: attr(data-tooltip); font-size: 12px; line-height: 1.2; box-shadow: 0px 10px 37px rgba(0, 0, 0, 0.2); } [data-tooltip]:before, [data-tooltip]:after { top: 100%; bottom: auto; left: 50%; } [data-tooltip]:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #EFFCFF; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after { transform: translateY(12px); } /* Horizontally align tooltips */ [data-tooltip]:after { margin-left: -80px; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, { transform: translateY(-12px); } /* ========================================================================== 4. TYPOGRAPHY ========================================================================== */ /* Headers */ h1, h2, h3, h4, h5, h6 { text-rendering: optimizelegibility; } h1 { font-family: 'Wix Madefor Display', sans-serif; font-size: 60px; line-height: 70px; font-weight: normal; font-style: normal; letter-spacing: -0.70px; } h2 { font-family: 'Wix Madefor Display', sans-serif; font-size: 48px; line-height: 60px; font-weight: normal; font-style: normal; letter-spacing: -2.1px; } h3 { font-family: 'Wix Madefor Display', sans-serif; font-size: 24px; line-height: 33px; font-weight: normal; font-style: normal; letter-spacing: -0.28px; } h4 { font-family: 'Wix Madefor Display', sans-serif; font-size: 18px; line-height: 25px; font-weight: normal; font-style: normal; letter-spacing: -0.21px; } h5 { font-family: 'Wix Madefor Display', sans-serif; font-size: 16px; line-height: 25px; font-weight: normal; font-style: normal; letter-spacing: -0.21px; } /* Body Text */ p { font-family: 'Wix Madefor Display', sans-serif; font-weight: normal; text-rendering: optimizelegibility; } .p1, .p1 p { font-family: 'Wix Madefor Display', sans-serif; font-size: 18px; line-height: 22px; font-style: normal; letter-spacing: normal; } .p2, .p2 p { font-family: 'Wix Madefor Display', sans-serif;; font-size: 16px; line-height: 18px; font-style: normal; letter-spacing: normal; } .p3, .p3 p { font-family: 'Wix Madefor Display', sans-serif; font-size: 14px; line-height: 16px; font-style: normal; letter-spacing: normal; } /* Stats */ .stats { font-family: "Saira Extra Condensed"; font-size: 80px; letter-spacing: normal; font-weight: 100; } /* Mobile Response */ @media (max-width: 780px) { h1 { font-size: 50px; line-height: 1.28; } h2 { font-size: 33px; line-height: 1.24; } h3 { font-size: 24px; line-height: 1.33; } h4 { font-size: 19px; line-height: 1.37; } h5 { font-size: 15px; line-height: 1.6; font-weight: 400; } h6 { font-size: 14px; line-height: 1.29; } .p1, .p1 p { font-size: 18px; line-height: 1.57; } .p2, .p2 p { font-size: 16px; line-height: 1.23; } } /* ========================================================================== 5. Buttons ========================================================================== */ /* Buttons */ .btn { font-family: 'Wix Madefor Display', sans-serif; font-size: 18px; font-style: normal; font-weight: normal; line-height: 1.25; letter-spacing: normal; text-decoration: none; cursor: pointer; transition: all 0.3s ease; } .btn:hover { text-decoration: none; transform: translateY(2px);} .btn:active { text-decoration: none; transform: translateY(4px);} .btn-primary { display: flex; align-items: center; justify-content: center; text-align: center; width: -moz-fit-content; width: fit-content; min-width: 180px; height: 40px; padding: 0 30px; border-radius: 25px; } .btn-secondary { display: flex; align-items: center; justify-content: center; text-align: center; height: 40px; padding: 0 30px; border-radius: 25px; } /* Filled Buttons */ .fill-blue_gradient { box-shadow: 0 5px 10px -3px rgb(106 106 106 / 20%); background-image: linear-gradient(55deg, #0f91f9 55%, #1d63f2 95%); background-position: 100%; background-size: 200%; color: var(--white); transition: all 0.3s ease; } .fill-blue_gradient:hover { background-position: 0; color: var(--white); } .fill-bright_blue_gradient { box-shadow: 0 5px 10px -3px rgb(106 106 106 / 20%); background-image: linear-gradient(55deg, #35B2E6 55%, #049AD9 95%); background-position: 100%; background-size: 200%; color: var(--white); transition: all 0.3s ease; } .fill-bright_blue_gradient:hover { background-position: 0; color: var(--white); } /* Tertiary Buttons */ .tertiary-green { color: var(--green); border-bottom: 2px solid var(--green); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( 45deg, var(--darkGrey), var(--darkGrey) 50%, var(--green) 50%); background-size: 300%; background-position: 100%; transition: all 0.5s ease; } .tertiary-green:hover { background-position: 0; border-bottom: 2px solid var(--darkGrey); transition: all 0.5s ease; } .tertiary-white { color: var(--white); border-bottom: 2px solid var(--white); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( 45deg, var(--darkGrey), var(--darkGrey) 50%, var(--white) 50%); background-size: 100% 500%; background-position: 0% 0%; transition: all 0.5s ease; } .tertiary-white:hover { background-position: 100% 100%; border-bottom: 2px solid var(--darkGrey); transition: all 0.5s ease; } /* ========================================================================== 6. UTILITY CLASSES ========================================================================== */ /*LAYOUT*/ [id$="-container"] { width: 100%; display: block; } [class$="-global-container"] { width: 100%; display: block; } .grid { max-width: 1090px; margin: 0 auto; padding: 0 30px; display: grid; grid-template-columns: minmax(20px, 1090px); grid-template-rows: 1fr; grid-gap: 0px 0px; grid-template-areas: "."; overflow: visible; } .col-1 { display: grid; grid-template-columns: 100%; grid-template-rows: 1fr; grid-gap: 0px 0px; grid-template-areas: "."; } .col-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .col-2x2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); grid-auto-columns: minmax(400px, 1fr); grid-template-rows: 1fr 1fr; grid-gap: 2px 2px; } .col-2-flow { -webkit-columns: 2 auto; -moz-columns: 2 auto; columns: 2 auto; } .col-2_3 { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; } .col-3_2 { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; } .col-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .col-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .col-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .col-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } @media screen and (max-width: 675px) { .col-2x2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-columns: minmax(300px, 1fr); } } /*Gutter*/ .row-gap-0 { grid-row-gap: 0; } .row-gap-40 { grid-row-gap: 40px; } .row-gap-50 { grid-row-gap: 50px; } .row-gap-70 { grid-row-gap: 70px; } .row-gap-110 { grid-row-gap: 110px; } .column-gap-50 { grid-column-gap: 50px; } .column-gap-80 { grid-column-gap: 80px; } .column-gap-90 { grid-column-gap: 90px; } .column-gap-130 { grid-column-gap: 130px; } .column-gap-200 { grid-column-gap: 200px; } .column-gap-220 { grid-column-gap: 220px; } .gap-5-5 { grid-gap: 5px 5px; } .gap-0-30 { grid-gap: 0 30px; } .gap-30-30 { grid-gap: 30px 30px; } .gap-0-40 { grid-gap: 0 40px; } .gap-0-50 { grid-gap: 0 50px; } .gap-50-0 { grid-gap: 50px 0; } .gap-50-50 { grid-gap: 50px 50px; } .gap-0-70 { grid-gap: 0 70px; } .gap-70-0 { grid-gap: 70px 0; } .gap-70-70 { grid-gap: 70px 70px; } .gap-0-90 { grid-gap: 0 90px; } .gap-90-0 { grid-gap: 90px 0; } .gap-90-90 { grid-gap: 90px 90px; } .gap-0-100 { grid-gap: 0 100px; } .gap-100-0 { grid-gap: 100px 0; } .gap-100-100 { grid-gap: 100px 100px; } /*ALIGNMENT*/ [class^="f-"] { display: flex; } .f-align-start { align-items: flex-start; } .f-align-center { align-items: center; } .f-align-end { align-items: flex-end; } /*Justify*/ .f-justify-start { justify-content: flex-start; } .f-justify-center { justify-content: center; } .f-justify-end { justify-content: flex-end; } .f-justify-between { justify-content: space-between; } .f-justify-around { justify-content: space-around; } /*Direction*/ .f-dir-row { flex-direction: row; } .f-dir-row-rev { flex-direction: row-reverse; } .f-dir-col { flex-direction: column; } /*Grow*/ .f-grow-1 { flex-grow: 1; } /*Wrap*/ .f-wrap { flex-wrap: wrap; } /*FONT*/ /*Text Content*/ .italic { font-style: italic; } .uppercase { text-transform: uppercase; } .underline { text-decoration: underline; } /*Font Weight*/ .fw-heavy { font-family: 'Wix Madefor Display', sans-serif; } .fw-bold { font-family: 'Wix Madefor Display', sans-serif; } .fw-medium { font-family: 'Wix Madefor Display', sans-serif; } .fw-regular { font-family: 'Wix Madefor Display', sans-serif;; } .fw-light { font-family: 'Wix Madefor Display', sans-serif; } .fw-thin { font-family: 'Wix Madefor Display', sans-serif; } /*Alignment*/ .text-align-left { text-align: left; } .text-align-center { text-align: center; } .text-align-right { text-align: right; } /*COLOR*/ .black{ color: var(--black); } .white{ color: var(--white); } .light-grey{ color: var(--lightGrey); } .medium-grey{ color: var(--mediumGrey); } .dark-grey{ color: var(--darkGrey); } .water-blue{ color: var(--waterBlue); } .bright-blue{ color: var(--brightBlue); } .dark-blue{ color: var(--darkBlue); } /*PADDING*/ /*Top*/ .pt-10 { padding-top: 10px; } .pt-20 { padding-top: 20px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pt-130 { padding-top: 130px; } /*Right*/ .pr-10 { padding-right: 10px; } .pr-20 { padding-right: 20px; } .pr-30 { padding-right: 30px; } .pr-40 { padding-right: 40px; } .pr-50 { padding-right: 50px; } .pr-60 { padding-right: 60px; } .pr-70 { padding-right: 70px; } .pr-80 { padding-right: 80px; } .pr-90 { padding-right: 90px; } .pr-100 { padding-right: 100px; } /*Bottom*/ .pb-10 { padding-bottom: 10px; } .pb-20 { padding-bottom: 20px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .pb-110 { padding-bottom: 110px; } .pb-120 { padding-bottom: 120px; } .pb-130 { padding-bottom: 130px; } .pb-140 { padding-bottom: 140px; } .pb-150 { padding-bottom: 150px; } .pb-180 { padding-bottom: 180px; } /*Left*/ .pl-10 { padding-left: 10px; } .pl-20 { padding-left: 20px; } .pl-30 { padding-left: 30px; } .pl-40 { padding-left: 40px; } .pl-50 { padding-left: 50px; } .pl-60 { padding-left: 60px; } .pl-70 { padding-left: 70px; } .pl-80 { padding-left: 80px; } .pl-90 { padding-left: 90px; } .pl-100 { padding-left: 100px; } /*Top and Bottom*/ .ptb-10 { padding-top: 10px; padding-bottom: 10px; } .ptb-20 { padding-top: 20px; padding-bottom: 20px; } .ptb-30 { padding-top: 30px; padding-bottom: 30px; } .ptb-40 { padding-top: 40px; padding-bottom: 40px; } .ptb-50 { padding-top: 50px; padding-bottom: 50px; } .ptb-60 { padding-top: 60px; padding-bottom: 60px; } .ptb-70 { padding-top: 70px; padding-bottom: 70px; } .ptb-80 { padding-top: 80px; padding-bottom: 80px; } .ptb-90 { padding-top: 90px; padding-bottom: 90px; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .ptb-150 { padding-top: 150px; padding-bottom: 150px; } /*Left and Right*/ .plr-10 { padding-left: 10px; padding-right: 10px; } .plr-20 { padding-left: 20px; padding-right: 20px; } .plr-30 { padding-left: 30px; padding-right: 30px; } .plr-40 { padding-left: 40px; padding-right: 40px; } .plr-50 { padding-left: 50px; padding-right: 50px; } .plr-60 { padding-left: 60px; padding-right: 60px; } .plr-70 { padding-left: 70px; padding-right: 70px; } .plr-80 { padding-left: 80px; padding-left: 80px; } .plr-90 { padding-left: 90px; padding-left: 90px; } .plr-100 { padding-left: 100px; padding-left: 100px; } /*Top, Right, Bottom, and Left*/ .p-10 { padding: 10px; } .p-20 { padding: 20px; } .p-30 { padding: 30px; } .p-40 { padding: 40px; } .p-50 { padding: 50px; } .p-60 { padding: 60px; } .p-70 { padding: 70px; } .p-80 { padding: 80px; } .p-90 { padding: 90px; } .p-100 { padding: 100px; } /*MARGIN*/ /*Top*/ .mt-0 { margin-top: 0; } .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mt-110 { margin-top: 110px; } .mt-120 { margin-top: 120px; } .mt-130 { margin-top: 130px; } .mt-140 { margin-top: 140px; } .mt-150 { margin-top: 150px; } /*Right*/ .mr-0 { margin-right: 0; } .mr-10 { margin-right: 10px; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 30px; } .mr-40 { margin-right: 40px; } .mr-50 { margin-right: 50px; } .mr-60 { margin-right: 60px; } .mr-70 { margin-right: 70px; } .mr-80 { margin-right: 80px; } .mr-90 { margin-right: 90px; } .mr-100 { margin-right: 100px; } .mr-110 { margin-right: 110px; } .mr-120 { margin-right: 120px; } /*Bottom*/ .mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } .mb-110 { margin-bottom: 110px; } .mb-120 { margin-bottom: 120px; } .mb-150 { margin-bottom: 150px; } /*Left*/ .ml-0 { margin-left: 0; } .ml-10 { margin-left: 10px; } .ml-20 { margin-left: 20px; } .ml-30 { margin-left: 30px; } .ml-40 { margin-left: 40px; } .ml-50 { margin-left: 50px; } .ml-60 { margin-left: 60px; } .ml-70 { margin-left: 70px; } .ml-80 { margin-left: 80px; } .ml-90 { margin-left: 90px; } .ml-100 { margin-left: 100px; } .ml-110 { margin-left: 110px; } .ml-120 { margin-left: 120px; } /*Top and Bottom*/ .mtb-0 { margin-top: 0; margin-bottom: 0; } .mtb-10 { margin-top: 10px; margin-bottom: 10px; } .mtb-20 { margin-top: 20px; margin-bottom: 20px; } .mtb-30 { margin-top: 30px; margin-bottom: 30px; } .mtb-40 { margin-top: 40px; margin-bottom: 40px; } .mtb-50 { margin-top: 50px; margin-bottom: 50px; } .mtb-60 { margin-top: 60px; margin-bottom: 60px; } .mtb-70 { margin-top: 70px; margin-bottom: 70px; } .mtb-80 { margin-top: 80px; margin-bottom: 80px; } .mtb-90 { margin-top: 90px; margin-bottom: 90px; } .mtb-100 { margin-top: 100px; margin-bottom: 100px; } .mtb-110 { margin-top: 110px; margin-bottom: 110px; } .mtb-120 { margin-top: 120px; margin-bottom: 120px; } /*Left and Right*/ .mlr-0 { margin-left: 0; margin-right: 0; } .mlr-10 { margin-left: 10px; margin-right: 10px; } .mlr-20 { margin-left: 20px; margin-right: 20px; } .mlr-30 { margin-left: 30px; margin-right: 30px; } .mlr-40 { margin-left: 40px; margin-right: 40px; } .mlr-50 { margin-left: 50px; margin-right: 50px; } /*Top, Right, Bottom, and Left*/ .m-0 { margin: 0; } .m-10 { margin: 10px; } .m-20 { margin: 20px; } .m-30 { margin: 30px; } .m-40 { margin: 40px; } .m-50 { margin: 50px; } /*****************************************/ /* Column Styles */ /*****************************************/ .grid{ max-width:1170px; } .row{ display:flex; margin-left:-15px; margin-right:-15px; flex-wrap: wrap; } .column-1{ max-width: 8.333333%; flex: 0 0 8.3333333%; padding-left:15px; padding-right:15px; } .column-2{ max-width: 16.6666667%; flex: 0 0 16.6666667%; padding-left:15px; padding-right:15px; } .column-3{ max-width: 25%; flex: 0 0 25%; padding-left:15px; padding-right:15px; } .column-4{ max-width: 33.333333%; flex: 0 0 33.333333%; padding-left:15px; padding-right:15px; } .column-6{ max-width: 50%; flex: 0 0 50%; padding-left:15px; padding-right:15px; } .column-8{ max-width: 66.6666667%; flex: 0 0 66.6666667%; padding-left:15px; padding-right:15px; } .column-9{ max-width: 75%; flex: 0 0 75%; padding-left:15px; padding-right:15px; } .column-10{ max-width: 83.3333333%; flex: 0 0 83.333333%; padding-left:15px; padding-right:15px; } .faq-global-container .question-text { width: 33.33%; padding-left: 15px; padding-right: 15px; margin: 0; padding-left: 44px; font-size: 24px; line-height: 40px; letter-spacing: -0.284571px; font-family: 'Avenir Next regular'; color: #000000; } .faq-global-container .question .answer { width: 66.66%; padding-left: 15px; padding-right: 15px; } .faq-global-container .question { margin-left: -15px; margin-right: -15px; } .fw-medium { font-size: 24px; line-height: 33px; letter-spacing: -0.426857px; font-family: "Avenir Next regular"; color: #636363; } .faq-global-container .question { width: auto; } .sticky-component h4 { font-family: "Avenir Next regular", sans-serif; } .sticky-component strong { font-family: "Avenir Next Bold", sans-serif; } .sticky-component .btn-primary { min-width: unset; padding: 11px 30px; font-size: 16px; height:auto; display:inline-block; } .sticky-component .edit-btn { margin-top: 5px; } @media(max-width:1140px){ .checkbox-ques h2 { font-size: 30px; } .pricing-breakdown h4 { line-height: 1; } .faq-global-container-custom h2, .features-container .column-4 h2 { font-size: 30px; line-height: 1.4; } .sticky-component .btn-primary { padding: 11px 19px; font-size: 15px; } } .features-container{ border-top: 2px solid #979797; border-bottom: 2px solid #979797; } .features-container .column-4,.faq-global-container-custom h2{ cursor: pointer; } .features-container .column-4 h2, .faq-global-container-custom h2{ position: relative; padding-left: 40px } .features-container .column-4 h2:before, .faq-global-container-custom h2:before{ content: ""; width: 18px; height: 18px; margin-right: 18px; margin-bottom: 5px; vertical-align: sub; display: inline-block; transform: rotate(-135deg); transition: all .3s ease; border-top: 2px solid #1581F7; border-left: 2px solid #1581F7; cursor: pointer; position:absolute; left: 0; top: 20px; } .features-container .column-4 h2.active:before,.faq-global-container-custom h2.active:before{ vertical-align: top; transform: translateY(15px) rotate(45deg); } .features-container .column-8{ display:none; } .features-container p{ margin-top:0; font-weight: 400; font-size: 16px; line-height: 22px; color: #4A4A4A; } .features-container h5{ font-size: 20px !important; line-height: 27px; color: #374058; } .features-container ul{ padding-left:0 } .features-container ul li{ list-style:none; font-weight: 400; font-size: 16px; line-height: 22px; color: #4A4A4A; margin-bottom:30px; } .features-container ul li:last-child{ margin-bottom:0; } .features-container table { border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; margin-bottom: 20px; } .features-container table caption { font-size: 1.5em; margin: .5em 0 .75em; } .features-container table tr { border-bottom: 1px solid #D9E2EC; padding: .35em; } .features-container table th, .features-container table td { padding: 17px; text-align: center; border-right: 1px solid #D9E2EC; } .features-container table th { font-size: 18px; line-height: 27px; text-align: center; color: #525866; font-family: 'Avenir Next regular', sans-serif,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: normal; border-bottom: 1px solid #D9E2EC; } .features-container .feature-open-btn { font-weight: 900; font-size: 16px; line-height: 22px; color: #1890FF; margin-bottom: 80px; cursor:pointer; } .features-container .feature-open-btn {margin: 0;} .toggle_content { /* display:none; */ max-height: 286px; overflow-y: hidden; transition: all ease-in 0.2s; -webkit-transition: all ease-in 0.2s; -moz-transition: all ease-in 0.2s; position: relative; overflow-x: hidden; } .toggle_content:after { content: ''; display: block; width: 100%; height: 40px; position: absolute; bottom: 0; left: 0; background: linear-gradient(0deg, white, transparent); transition: all ease-in 0.2s; -webkit-transition: all ease-in 0.2s; -moz-transition: all ease-in 0.2s; opacity: 1; } .toggle_content.active:after{ opacity: 0; visibility: hidden; } .features-container .column-8 { display: flex !important; flex-direction: column; justify-content: start; padding-bottom: 30px; } @media screen and (max-width: 600px) { .features-container table { border: 0; } .features-container table caption { font-size: 1.3em; } .features-container table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; } .features-container table tr { border-bottom: 0; display: block; margin-bottom: .625em; } .features-container table td { border-bottom: 1px solid #D9E2EC; display: block; font-size: .8em; text-align: right; min-height: 55px; } .features-container table td::before { content: attr(data-label); float: left; } table td:last-child { } .features-container table td:first-child { text-align: left; } .features-container table td:first-child { font-weight: bold; } .features-container table tr { padding: 0; margin: 0; } .features-container table td { border-left: 0; border-right: 0; } .features-container table th { display: none; } .features-container table th:first-child { display: block; border: 1px solid #D9E2EC; border-top: 0; border-right: 0; border-left: 0; } .features-container table { border-bottom: 0; } .features-container table { border: 1px solid #D9E2EC; border-bottom: 0; } } @media screen and (min-width: 601px) { table th:last-child, table td:last-child { border-right: 0; } table tr:last-child { border-bottom: 0; } table th:first-child { color: rgba(55, 64, 88, 0.5); width: 50%; text-align: left; padding-left: 0; } table td:first-child { text-align: left; font-size: 16px; line-height: 27px; /* identical to box height, or 169% */ color: #374058; font-family: 'Avenir Next regular', sans-serif,Helvetica Neue,Helvetica,Arial,sans-serif; padding-left: 0; } svg { width: 22px; } } @media screen and (max-width: 992px){ .column-4,.column-8,.column-3,.column-6,.column-9,.column-2{ max-width:100%; flex: 0 0 100%; } .pricing-summary h2{ font-size: 30px; } .pricing-summary .pricing{ text-indent: 0; } .pricing-summary small{ margin-lefT:0; } .pricing-summary .pricing-link{ line-height:25px; margin-left:0; } .checkbox-ques h3{ line-height:1.33; margin-top: 0; } .popover__wrapper{ margin-top: 0; margin-bottom: 20px; } .radio-container{ font-size:30px; } .tooltip-inner{ font-size: 20px; line-height: 35px; min-width: 100px; } .pricing-breakdown{ margin-left:0; } .pricing-breakdown h4{ margin-bottom: 10px; } .checkbox-ques h2{ margin-bottom:30px; } .checkbox-ques .mt-80{ margin-top:0; } .features-container .column-4 h2:before, .faq-global-container-custom h2:before{ left:8px; } #member-select .column-10, #provider-select .column-10{ max-width: 77.333333%; flex: 0 0 77.333333%; padding:0; } #member-select .column-1, #provider-select .column-1{ padding:0; } #provider-select{ margin:20px 0; } .checkbox-ques.mt-80{ margin-top:20px; } .tooltip{margin-left: -4.2em;} .faq-global-container .grid .faq-lockup .question { padding-right: 0; margin: 0; } #provider-select .popover__wrapper, #member-select .popover__wrapper { margin-bottom: 100px; } #member-select .column-10, #provider-select .column-10 { max-width: 83.3333333%; flex: 0 0 83.333333%; } .features-container .column-4 h2:before, .faq-global-container-custom h2:before { top: 7px; } .faq-global-container .grid .faq-lockup .question .answer { margin: 0; padding: 0; } .faq-global-container .question-text { font-size: 20px; line-height: 1.4; } .fw-medium { font-size: 20px; line-height: 1.4; } .tooltip { left: -5px; } .pricing-form .column-1 { order: 2; } #member-select .column-10, #provider-select .column-10 { order: 1; max-width: 100%; flex: 0 0 100%; padding: 10px 43px; } .pricing-form .checkbox-ques .mt-80 { justify-content: center; } #member-select .column-1, #provider-select .column-1 { padding: 0 15px; max-width: 50px; flex: 0 0 16%; text-align: center; margin-top: 20px; } .pricing-form .tooltip-inner { min-width: 125px; } .sticky-component [Class*="column"] { margin-top: 20px; /* text-align: center; */ max-width: 50%; flex: 0 0 50%; } .sticky-component .price { font-size: 20px; } .sticky-component p span { font-size: 20px; } .sticky-component h4 { font-size: 22px; } }