/* ========================================================================== HubSpot Migrations Services - COS Boilerplate v2.0.0 ========================================================================== */ /* ========================================================================== Table of Contents: 1. EXTERNAL RESOURCES 2. BASE STYLES 3. COS STRUCTURE 4. MAIN NAVIGATION 5. BLOG 6. FORMS 7. BUTTONS 8. MISCELLANEOUS 9. MOBILE MEDIA QUERIES ========================================================================== */ /* ========================================================================== 1. EXTERNAL RESOURCES ========================================================================== */ /* =============== @import, @font-face, and CSS File Includes =============== */ /* EX: @import url('http://example.com/example_style.css'); */ @import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,700i,800&display=swap'); @import url('//5852453.fs1.hubspotusercontent-na1.net/hubfs/5852453/OffensiveSecurity_November2019/Others/FontAwesome.css'); @import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); /* Our new font - Kyle */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* HubSpot_Boilerplate-modules.css is required to address style issues with the default modules and responsive grid layout */ /* Images */ img { max-width: 100%; height: auto; border: 0; -ms-interpolation-mode: bicubic; vertical-align: bottom; /* Suppress the space beneath the baseline */ } img.alignRight, img.alignright{ margin: 0 0 5px 15px; } img.alignLeft, img.alignleft{ margin: 0 15px 5px 0; } /* Reduces min-height on bootstrap structure */ .row-fluid [class*="span"] { min-height: 1px; } /* Blog Social Sharing */ .hs-blog-social-share .hs-blog-social-share-list { margin: 0; list-style: none !important; } .hs-blog-social-share .hs-blog-social-share-list .hs-blog-social-share-item { height: 30px; list-style: none !important; } @media (max-width: 479px){ .hs-blog-social-share .hs-blog-social-share-list .hs-blog-social-share-item:nth-child(2) { float: none !important; /* Stack social icons into two rows on phones */ } } .hs-blog-social-share .hs-blog-social-share-list .hs-blog-social-share-item .fb-like > span{ vertical-align: top !important; /* Aligns Facebook icon with other social media icons */ } .hs-blog-social-share-list li.hs-blog-social-share-item.hs-blog-social-share-item-linkedin .IN-widget { vertical-align: top !important; } /* Captcha */ #recaptcha_response_field { width: auto !important; display: inline-block !important; } /* line height fix for reCaptcha theme */ #recaptcha_table td {line-height: 0;} .recaptchatable #recaptcha_response_field { min-height: 0;line-height: 12px; } @media all and (max-width: 400px) { /* beat recaptcha into being responsive, !importants and specificity are necessary */ #captcha_wrapper, #recaptcha_area, #recaptcha_area table#recaptcha_table, #recaptcha_area table#recaptcha_table .recaptcha_r1_c1 { width: auto !important; overflow: hidden; } #recaptcha_area table#recaptcha_table .recaptcha_r4_c4 { width: 67px !important; } #recaptcha_area table#recaptcha_table #recaptcha_image { width:280px !important; } } /* Videos */ video { max-width: 100%; height: auto; } /* Date Picker */ #calroot { width: 202px !important; line-height: normal; } #calroot, #calroot *, #calroot *:before, #calroot *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #calroot select { min-height: 0 !important; padding: 1px 2px !important; font-family: "Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet MS", Verdana, sans-serif !important; font-size: 10px !important; line-height: 18px !important; font-weight: normal !important; } #caldays { margin-bottom: 4px; } /* Responsive iFrames */ 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 { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Fix radio button and check box fields in multi column forms*/ .hs-form fieldset[class*="form-columns"] input[type="checkbox"].hs-input, .hs-form fieldset[class*="form-columns"] input[type="radio"].hs-input { width: auto; } /* System Template Forms */ #email-prefs-form .email-edit { width: 100% !important; max-width: 507px !important; } #hs-pwd-widget-password { height: auto !important; } /* Menus */ .hs-menu-wrapper ul { padding: 0; } /* Horizontal Menu ========================================================================== */ .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: inline-block; } .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; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children { position: relative; } .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > 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; } .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper { left: 100%; top: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > 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; } .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; } /* Vertical Menu ========================================================================== */ .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; } .hs-menu-wrapper.hs-menu-flow-vertical > ul { margin-bottom: 0; } .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.hs-item-has-children { position: relative; } /* Flyouts */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > 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-vertical > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { display: block; white-space: nowrap; } .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { left: 100%; top: 0; } .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } @media (max-width: 767px) { .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; } /* Stacking Horizontal Nav for Mobile */ .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: visible !important; opacity: 1 !important; position: static !important; } .hs-menu-wrapper.hs-menu-flow-horizontal ul ul ul { padding: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { white-space: normal; } /* Stacking Vertical Nav for Mobile */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { position: static; opacity: 1; visibility: visible; } } .hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper { visibility: visible; opacity: 1; } .hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; } /* Space Module */ .widget-type-space { visibility: hidden; } /* Blog Author Section */ .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"); } /* Fix for CTA border box issue */ .hs-cta-wrapper a { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* * 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;} /* 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; padding: 0; 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} /* FlexSlider Necessary Styles *********************************/ .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%;} /* 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("//cdn2.hubspotqa.net/local/hub/124/file-52894-png/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("//cdn2.hubspotqa.net/local/hub/124/file-52894-png/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: black; position: static; font-size: 2em; line-height: 1.1em; color: white; padding: 0px 5% 0px 5%; width: 100%; top: 40%; 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; } } .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; } /* Corrects width issues in table elements created via the wysiwyg editor */ table tr td img { max-width: initial; } /* 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; } /* ========================================================================== 2. BASE STYLES ========================================================================== */ /* =============== Base =============== */ *, *: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; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; font-size: 100%; --os-color-primary: rgba(102, 25, 208, 1); --os-color-primary-tailwind: 102 25 208; --os-color-secondary: rgba(0, 191, 203, 1); --os-color-secondary-tailwind: 0 191 203; --os-color-accent: rgb(109 40 217); --os-color-text-page: #FBFAFB; --os-color-text-muted: rgb(75 85 99); --os-color-bg-page: #1A1225; --os-form-100: #332C3D; --os-form-200: #3F3848; --form-control-color: rebeccapurple; --form-control-disabled: #959495; } body { background: var(--os-color-bg-page); font-family: "Inter", sans-serif; font-weight: normal; line-height: 1.5; color: var(--os-color-text-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Firefox */ * { scrollbar-color: #4f485e transparent !important; } /* Webkit */ /* Make scrollbars transparent except for main page scrollbar. */ ::-webkit-scrollbar, ::-webkit-scrollbar-track { background-color: transparent !important; } body::-webkit-scrollbar, body::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { background-color: #4f485e !important; border: 4px solid transparent !important; background-clip: content-box !important; border-radius: 10px !important; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } /* 2023v2 includes */ .responsive-grid { display: grid !important; gap: 1rem; grid-template-columns: 1fr; max-width: min(800px, 90vw) !important; justify-content: center; } .responsive-grid h1, h2, h3, h4, p { max-width: 65ch !important; } .responsive-grid .custom-form { padding: min(5vw, 2rem) min(5vw, 2rem); } .responsive-grid .custom-form input[type="text"] { margin: 0 0 0.5rem; padding: 0.25rem; } #template-header #svelteCountdownTimer { transform: scale(1); font-size: 10px; } #template-header #svelteCountdownTimer .bg-neutral { --tw-bg-opacity: 0 !important; } #template-header #svelteCountdownTimer .grid-flow-col .text-neutral-content { align-items: center; } #template-header #svelteCountdownTimer .grid-flow-col { gap: 0px; background-color: #332c3d40; border-radius: 10px; } #template-header #svelteCountdownTimer .text-4xl { font-size: 1rem; } .container-fluid .row-fluid .page-center { padding: 0.5rem 0.5rem !important; } #template-header a > img { max-width: 30vw; } #template-header { max-width: min(800px, 90vw) !important;} .widget-type-form { margin: 0 auto; } #hs_cos_wrapper_module_1681927078792321 { display: flex; justify-content: flex-end; } @media (min-width: 500px) { #template-header #svelteCountdownTimer .text-4xl { font-size: 1.25rem; } #template-header #svelteCountdownTimer { transform: scale(1); font-size: 14px; } } @media (min-width: 850px) { .responsive-grid { display: grid !important; gap: 1rem; grid-template-columns: 60% 40%; max-width: calc(100vw - 4rem) !important; } .responsive-grid .custom-form { padding: 1.25rem 1.5rem; } .row-number-3 { grid-row: 1 / span 2; grid-column: 2; } #template-header #svelteCountdownTimer { transform: scale(1); font-size: 1rem; } #template-header #svelteCountdownTimer .grid-flow-col .text-neutral-content { align-items: center; } #template-header #svelteCountdownTimer .grid-flow-col { gap: 0.75rem; background-color: transparent; border-radius: 0px; } #template-header #svelteCountdownTimer .bg-neutral { --tw-bg-opacity: 0.2 !important; } #template-header #svelteCountdownTimer .text-4xl { font-size: 2.25rem; line-height: 1em; } #template-header a > img { max-width: 30vw; } #template-header { max-width: calc(100vw - 4rem) !important; } } @media (min-width: 1024px) { .responsive-grid .custom-form { padding: 1.75rem; min-width: 350px; } .responsive-grid { row-gap: 3rem; column-gap: min(3vw, 3rem); grid-template-columns: 1fr 350px; max-width: 1200px !important; } #template-header { max-width: 1200px !important; padding: 1rem 0.5rem 1rem 0.5rem !important; } #site_wrapper { padding-inline: 2rem; } #site_wrapper .body-container .widget-type-form { display: block; width: 100%; } } /* form styles 2023 - Kyle */ .body-container .content img { border: 2px solid #663399; border-radius: 8px; box-shadow: 1px 2px 6px #00000054; } .custom-form-2 { padding: 2rem min(5vw, 2rem); border-radius: 0.5rem; background: var(--os-form-100); } .custom-form-2 .hs-form-field > label { color: var(--os-color-text-page) !important; } .custom-form-2 .hs-form-field > input { color: var(--os-color-text-page) !important; background: var(--os-form-200); } .custom-form-2 .hs-richtext > p { font-size: 12px; } .custom-form-2 .hs-form-booleancheckbox > label { line-height: 1.1; display: grid; grid-template-columns: 1.5rem auto; gap: 0.25rem; align-items: center; } .custom-form-2 .legal-consent-container .hs-form-booleancheckbox-display>span { margin-left: 0px !important; } .custom-form-2 .legal-consent-container .hs-form-booleancheckbox-display p { margin: 0; display: inline; line-height: 1rem; font-size: 13px; } .custom-form-2 .hs-form-booleancheckbox > *:hover { cursor: pointer; } .custom-form-2 .hs-form-booleancheckbox input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--os-form-100); margin: 0; font: inherit; color: currentColor; width: 1.25rem; height: 1.25rem; border: 0.15rem solid currentColor; border-radius: 2px; transform: translateY(0px); display: grid; place-content: center; } .custom-form-2 .hs-form-booleancheckbox input[type=checkbox]::before { content: ""; width: 0.65em; height: 0.65em; -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: 3px 8px; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em #ad72ff; background-color: CanvasText; } .custom-form-2 .hs-form-booleancheckbox input[type=checkbox]:checked::before { transform: scale(2.5); } .custom-form-2 .hs-form-booleancheckbox input[type=checkbox]:focus { outline: 1px solid currentColor; outline-offset: 2px; } .custom-form-2 .hs-form-booleancheckbox input[type=checkbox]:disabled { --form-control-color: var(--form-control-disabled); color: var(--form-control-disabled); cursor: not-allowed; } .custom-form-2 label { color: inherit !important; } .custom-form-2 .actions { display: flex; justify-items: center; justify-content: center; } .custom-form-2 .actions input[type="submit"] { cursor: pointer; -webkit-appearance: none; text-decoration: none !important; white-space:normal !important; display:inline-block; margin:15px 0; vertical-align:middle; font-family:inherit; padding:0.85em 1em; border:1px solid transparent; border-radius:100px; -webkit-transition:background-color 0.25s ease-out, color 0.25s ease-out; transition:background-color 0.25s ease-out, color 0.25s ease-out; font-size:18px; line-height:1; text-align:center; background-color:#6619d0; color:#fff; font-weight:700; text-transform:uppercase; outline:0; } .custom-form-2 .actions input[type="submit"]:hover { background-color:#B183F0; } .custom-form-2 input[type="text"], .custom-form-2 input[type="password"], .custom-form-2 input[type="datetime"], .custom-form-2 input[type="datetime-local"], .custom-form-2 input[type="date"], .custom-form-2 input[type="month"], .custom-form-2 input[type="time"], .custom-form-2 input[type="week"], .custom-form-2 input[type="number"], .custom-form-2 input[type="email"], .custom-form-2 input[type="url"], .custom-form-2 input[type="search"], .custom-form-2 input[type="tel"], .custom-form-2 input[type="color"], .custom-form-2 input[type="file"], .custom-form-2 textarea { display: block; width: 100%; height: 2.4375rem; margin: 0 0 1rem; padding: 0.5rem; color: var(--os-color-text-page) !important; background-color: var(--os-form-200); border: 1px solid transparent; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 8px; /* background-color: #ffffff; */ /* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); */ font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5; /* color: #000000; */ -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-form-2 select { box-sizing: border-box; width: 100%; height: 2.4375rem; margin: 0 0 1rem; padding: 0.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid transparent; border-radius: 8px; background-color: #3f3848; font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5; color: #fbfafb; background-image: url(//5852453.fs1.hubspotusercontent-na1.net/hubfs/5852453/OffensiveSecurity_November2019/Images/Down%20Arrow.svg); background-origin: content-box; background-position: right -1rem center; background-repeat: no-repeat; background-size: 9px 6px; padding-right: 1.5rem; -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } .custom-form-2 select:focus { outline: none; border: 1px solid #707070; background-color: #3f3848; /* box-shadow: 0 0 0px #cacaca; */ -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } .custom-form-2 textarea { height:auto; } .custom-form-2 input[type="text"]::placeholder, .custom-form-2 input[type="password"]::placeholder, .custom-form-2 input[type="datetime"]::placeholder, .custom-form-2 input[type="datetime-local"]::placeholder, .custom-form-2 input[type="date"]::placeholder, .custom-form-2 input[type="month"]::placeholder, .custom-form-2 input[type="time"]::placeholder, .custom-form-2 input[type="week"]::placeholder, .custom-form-2 input[type="number"]::placeholder, .custom-form-2 input[type="email"]::placeholder, .custom-form-2 input[type="url"]::placeholder, .custom-form-2 input[type="search"]::placeholder, .custom-form-2 input[type="tel"]::placeholder, .custom-form-2 input[type="color"]::placeholder, .custom-form-2 input[type="file"]::placeholder, .custom-form-2 textarea::placeholder{ color: var(--os-color-text-page) !important; } .custom-form-2 input[type="text"]:focus, .custom-form-2 input[type="password"]:focus, .custom-form-2 input[type="datetime"]:focus, .custom-form-2 input[type="datetime-local"]:focus, .custom-form-2 input[type="date"]:focus, .custom-form-2 input[type="month"]:focus, .custom-form-2 input[type="time"]:focus, .custom-form-2 input[type="week"]:focus, .custom-form-2 input[type="number"]:focus, .custom-form-2 input[type="email"]:focus, .custom-form-2 input[type="url"]:focus, .custom-form-2 input[type="search"]:focus, .custom-form-2 input[type="tel"]:focus, .custom-form-2 input[type="color"]:focus, .custom-form-2 input[type="file"]:focus, .custom-form-2 textarea:focus{ outline: none; border: 1px solid #00BFCB; background-color: var(--os-form-200); box-shadow: 0 0 2px #cacaca; -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } .custom-form-2 .hs-error-msgs label { color: #ffa0a0 !important; } .content-wrapper > .row-depth-1 > .row-fluid { display: flex; flex-direction: column-reverse; align-items: center; gap: 1rem; } #template-header { padding: 1rem 1rem 0rem 1rem; display: flex; flex-direction: row; gap: 1rem; justify-content: space-between; align-items: center; } @media (min-width: 500px) { .content-wrapper > .row-depth-1 > .row-fluid { display: block; } .row-fluid .custom-form-2 { margin-left: auto !important; margin-right: auto; } #template-header { flex-direction: row; padding: 1rem 1rem 0.5rem 1rem; } } @media (min-width: 850px) { #template-header { padding: 1rem 0px !important; } } .body-container .content img { border: 2px solid #663399; border-radius: 8px; box-shadow: 1px 2px 6px #00000054; } /* ------------------------- end form */ /* Page Center */ .container-fluid .row-fluid .page-center { float: none; max-width: 81.25rem; margin: 0 auto; } /* Highlighted Text */ /* ::-moz-selection { color: #fff; background: #333; text-shadow: none; } ::selection { color: #fff; background: #333; text-shadow: none; } */ /* =============== Typography =============== */ /* Basic text */ small { font-size: 80%; line-height: inherit; } strong, b { font-weight: bold; line-height: inherit; } em {} cite {} code {} pre {} sup, sub { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Headings */ div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; } .header-container ul, .header-container ol { padding:0; margin:0; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 700; color: inherit; text-rendering: optimizeLegibility; text-transform: uppercase; margin-bottom: 0.5rem; line-height: 1.4; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {} h1, .h1 { font-size: 2.25rem; font-weight: 800; } h2, .h2 { font-size: 1.5rem; } h3, .h3 { font-size: 1.25rem; font-weight: 400; text-transform:none; } h4, .h4 { font-size: 1.2rem; } h5, .h5 { font-size: 1.0625rem; } h6, .h6 { font-size: 1rem; } /* Anchor Links */ a { line-height: inherit; color: var(--os-color-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } a:hover, a:focus { color: #65F6FF; } a:link, a:visited:link { -webkit-tap-highlight-color: #65F6FF; } /* Lists */ ul, ol, dl { margin-bottom: 1rem; line-height: 1.6; } ul ul, ul ol, ol ol, ol ul {} p { margin-bottom: 1rem; font-size: inherit; line-height: 1.6; text-rendering: optimizeLegibility; } p, li, ol { font-size: 16px; } /* Block Quotes */ blockquote, blockquote p { line-height: 1.6; color: #707070; } blockquote { margin: 0; border-left: 0; padding: 0 2.5rem; } blockquote p { font-size: 1.125rem; line-height: 1.5rem; font-weight: 300; } blockquote small {} figure { margin: 0; } /* Horizontal Rules */ hr { box-sizing: content-box; overflow: visible; clear: both; max-width: 81.25rem; height: 0; margin: 1.25rem auto; border-top: 0; border-right: 0; border-bottom: 1px solid #cacaca; border-left: 0; } img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; } /* =============== EU Cookie Confirmation Bar =============== */ /* Confirmation Outer Wrapper*/ #hs-eu-cookie-confirmation {} /* Confirmation Inner Wrapper*/ #hs-eu-cookie-confirmation-inner {} #hs-eu-cookie-confirmation-inner p{} /* Confirmation Button */ #hs-en-cookie-confirmation-buttons-area {} a#hs-eu-confirmation-button {} /* ========================================================================== 3. COS STRUCTURE ========================================================================== */ /* =============== Structure =============== */ /* The outer wrappers of your website */ .header-container-wrapper, .body-container-wrapper, .footer-container-wrapper {} /* The inner wrappers of your website */ .header-container, .body-container, .footer-container {} /* =============== Header =============== */ .header-container-wrapper {} .header-container {} .custom-header { background-color: #000; position: fixed; top: 0; right:0; width: 100% !important; z-index: 9999; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; padding: 1.875rem 1rem; } .custom-header-fixed .custom-header { padding: 0.9375rem 1rem; } .custom-header > .row-fluid-wrapper > .row-fluid { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; position:relative; } .custom-header-left { float: left !important; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width:auto !important; } .custom-logo { float: left !important; margin-right: 0.9375rem; width:auto !important; } .lp .custom-logo { padding-bottom: 11.02px; } .custom-header-fixed .lp .custom-logo { padding-bottom: 5.02px; } .custom-header-fixed .custom-logo { margin-right: 1.25rem; } .custom-logo img { max-height: 3.125rem; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .custom-header-fixed .custom-logo img { max-height: 3.125rem; margin-top: 5px; } /* =============== Content =============== */ .body-container-wrapper {} .body-container {} .body-container .page-center { padding-top:1rem; padding-bottom:1rem; } .blog .body-container .page-center.content-wrapper { padding-top:0; padding-bottom:0; } .hs-blog-post .blog-content .blog-post-wrapper .page-center { padding-top:0; padding-bottom:0; } /* ============== Banner Area ================= */ .custom-banner-area { position: relative; padding: 1.25rem 0; margin-bottom: 1.875rem; background-size: cover; background-position: top center; } .custom-banner-area .page-center { padding-top:0; padding-bottom:0; } .custom-banner-inner { position: relative; color: #ffffff; padding: 1.875rem 0; background: #000000; } .custom-banner-area h1 { -webkit-animation: 1.5s ease 0s normal forwards 1 fadein2; animation: 1.5s ease 0s normal forwards 1 fadein2; } .custom-banner-area h3 { -webkit-animation: 2s ease 0s normal forwards 1 fadein2; animation: 2s ease 0s normal forwards 1 fadein2; margin-top: 10px; margin-bottom: 0; } .blog-banner-area .page-center { padding-top: 3.75rem; padding-bottom: 3.125rem; } .blog-banner-inner { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .blog-banner-content { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } .blog-banner-area h1 { margin-bottom: 1.25rem; } .blog-banner-area h3 { margin-bottom: 1.25rem; color: #707070; } .content-wrapper {} .main-content {} .sidebar{} .sidebar.right{} .sidebar.left{} /* =============== Footer =============== */ .footer-container-wrapper {} .footer-container {} .custom-footer { background-color: #000000; background-image: url(//5852453.fs1.hubspotusercontent-na1.net/hubfs/5852453/OffensiveSecurity_November2019/Images/doorway.svg); background-repeat: no-repeat; background-position: bottom right; color: #ffffff; padding: 1.875rem; margin-top: 1em; } .custom-footer.lp { background-size: 186px; } .custom-footer .page-center > .row-fluid-wrapper > .row-fluid { display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; margin-right: -0.8125rem; margin-left: -0.8125rem; width:auto; } .custom-footer-menu { width: 100% !important; } .custom-footer-menu .hs-menu-wrapper > ul{ position: relative; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; margin-right: -0.8125rem; margin-left: -0.8125rem; width:auto; } .custom-footer-menu .hs-menu-wrapper > ul > li { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0px; min-width: 0px; width: 100%; padding-right: 0.8125rem; padding-left: 0.8125rem; margin-bottom: 3.75rem; } .custom-footer-menu .hs-menu-wrapper > ul > li > a { line-height: 1; text-decoration: none; display: block; margin-bottom: 0; color: #ffffff; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; padding: 0.625rem 0; cursor: default; } .custom-footer-menu .hs-menu-wrapper > ul > li > ul { position:static !important; opacity:1 !important; visibility:visible !important; } .custom-footer-menu .hs-menu-wrapper > ul > li > ul > li > a { color: #ffffff; font-size: 1rem; line-height: 1.375rem; font-weight: 400; padding: 0.3125rem 0; cursor: pointer; display: inline-block !important; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; width:auto; white-space:normal !important; } .custom-footer-menu .hs-menu-wrapper > ul > li > ul > li > a:hover{ color: #A90C1C; } .custom-footer-social { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100% !important; margin-left:0 !important; } .custom-footer .sm-icons { padding-bottom: 1.25rem; font-size: 1.25rem; } .custom-footer .sm-icons a, .custom-footer .sm-icons a:visited { color: #ffffff; padding-right: 0.92rem; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .custom-footer .sm-icons a:hover { color: #A90C1C; } .custom-footer-copyright { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 66.6666666667% !important; margin-left:0 !important; } .custom-footer-copyright p.copyright { font-size: 0.75rem; margin-bottom: 0; } .custom-footer-links { margin-left: 1rem; } .custom-footer-links .hs-menu-wrapper { line-height:0; } .custom-footer-links .hs-menu-wrapper > ul { position: relative; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; width:100%; } .custom-footer-links .hs-menu-wrapper > ul > li { float:none !important; line-height:0; } .custom-footer-links .hs-menu-wrapper > ul > li > a { font-size: 0.75rem; padding: 0 1rem; line-height: 1.6; color: #ffffff; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; display: block !important; } .custom-footer-links .hs-menu-wrapper > ul > li > a:hover { color: #A90C1C; } /* ========================================================================== 4. MAIN NAVIGATION ========================================================================== */ /* =============== Custom Menu Primary =============== */ /* Parent List */ .custom-menu-primary { width: auto !important; float: none !important; margin-left: 0 !important; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; max-width: 56.25rem; } .custom-menu-primary > .widget-type-menu { width:100%; } .custom-menu-primary .hs-menu-wrapper > ul { -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; } .custom-menu-primary .hs-menu-wrapper > ul > li { float:none !important; } .custom-menu-primary .hs-menu-wrapper > ul > li.hs-item-has-children { position:static !important; } .custom-menu-primary .hs-menu-wrapper > ul > li > a { color: #ffffff; font-size: 0.9375rem; line-height: 1.125rem; text-align: center; text-transform: uppercase; padding: 0.75rem 1.25rem; display:block !important; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .custom-menu-primary .hs-menu-wrapper > ul:hover > li > a { opacity: .3; } .custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{ color: #fff; opacity: 1; } .custom-menu-primary .hs-menu-wrapper > ul > li.hs-item-has-children:hover > a { background: #F2F2F2; color: #A90C1C; opacity:1; } .dropdown-pane { position: absolute; z-index: 10; visibility: hidden; display: none; border: 0px solid #cacaca; border-radius: 0px; background: #f2f2f2; font-size: 1rem; top: 100%; max-width: 1903px; left: -1.875rem; right: -1.875rem; padding: 2.5rem 0; } .custom-menu-primary .hs-menu-wrapper > ul > li.hs-item-has-children:hover > .dropdown-pane{ visibility: visible; display: block; } .dropdown-pane-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; flex-flow: row wrap; margin-right: -0.8125rem; margin-left: -0.8125rem; } .dropdown-pane-inner.align-bottom { -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .dropdown-pane-inner > .cell { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0px; min-width: 0px; width: 100%; padding-right: 0.8125rem; padding-left: 0.8125rem; } .dropdown-pane-inner > .cell.auto { -webkit-box-flex: 1; -webkit-flex: 1 1 0px; flex: 1 1 0px; } .dropdown-pane-inner > .auto { width: auto; } .dropdown-pane .products .auto { padding-top: 1.25rem; } .dropdown-pane .products .button.full { background: #A90C1C; color: #ffffff; width: 100%; display: block; font-weight: 600; letter-spacing: 2px; line-height: 1.6875rem; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .dropdown-pane .products .button.full:hover { background: #870a16; } .dropdown-pane .products .product { -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .dropdown-pane .products .product > a { display:block !important; } .dropdown-pane-inner .align-self-middle > a{ display:block !important; } } .dropdown-pane .products .product:hover { background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); } .dropdown-pane .products .product h6 { color: #707070; text-transform: uppercase; text-align: center; font-weight: 400; font-size: 0.875rem; margin-bottom: 1.25rem; } .dropdown-pane .products .product h6 span { font-weight: 700; color: #A90C1C; text-align: center; } .dropdown-pane .products .product img { margin-bottom: 2.5rem; padding: 0 0.9375rem; } .dropdown-pane .products .product .button { background: #ffffff; color: #A90C1C; width: 100%; display: block; letter-spacing: 1px; font-size: 1rem; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .dropdown-pane .products .product:hover .button { background: #A90C1C; color: #ffffff; } .dropdown-pane-inner > .grid-x > .cell-small-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 83.3333333333%; } .dropdown-pane .products h4.background { position: relative; z-index: 1; width: 100%; height: 15px; font-size: 0.75rem; font-weight: 400; color: #cacaca; } .dropdown-pane .products h4.background:before { border-top: 1px solid #cacaca; content: ""; margin: 0 auto; position: absolute; top: 65%; left: 0; right: 0; bottom: 0; width: 95%; height: 15px; z-index: -1; } .dropdown-pane .products h4.background:after { border-color: transparent transparent transparent #cacaca; content: ""; border-style: solid; border-width: 6px; width: 0; height: 0; position: absolute; bottom: 0px; right: 15px; top: 4px; } .dropdown-pane .products h4.background span { background: #F2F2F2; padding: 0 15px 0 0; } .dropdown-pane .products p { font-size: 1rem; } .dropdown-pane .align-center { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .dropdown-pane#tools .dropdown-pane-inner h4 { font-size: 1.375rem; letter-spacing: 2px; margin-bottom: 2.5rem; text-align: center; } #tools h4 > span { color: #a90c1c; } .dropdown-pane-inner .align-self-middle { -webkit-align-self: center; align-self: center; text-align:center; } .dropdown-pane#tools .balance .dropdown-pane-inner img { max-height: 6.5625rem; margin: 0 auto; display: block; } .dropdown-pane#tools .dropdown-pane-inner a.grow img { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .dropdown-pane#tools .dropdown-pane-inner a.grow:hover img { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-transform: scale(1.1); transform: scale(1.1); } /* Child List */ .custom-menu-primary .hs-menu-wrapper > ul ul{ background-color: #fff; } .custom-menu-primary .hs-menu-wrapper > ul ul li{} .custom-menu-primary .hs-menu-wrapper > ul ul li a{} .custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{} /* Override max width on menu links */ .custom-menu-primary .hs-menu-wrapper > ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { overflow: visible !important; max-width: none !important; width: auto !important; } /* ========================================================================== 5. BLOG ========================================================================== */ /* =============== General Blog Styles =============== */ /* Blog Post and Listing Body Class */ .blog {} /* Blog Post */ .hs-blog-post {} /* Blog Listing */ .hs-blog-listing {} /* Blog Columns Wrapper */ .blog .content-wrapper {} /* =============== Blog Content Column =============== */ .blog .blog-content {} /* Use this to style the main wrapper for the blog listing pages */ .blog-listing-wrapper {} /* Use this to style the main wrapper for the blog post pages */ .blog-post-wrapper {} /* Blog Title */ .hs-blog-header h1 {} .hs-blog-header h1 a{} /* Blog Post Title */ .post-header h2 {} .post-header h2 a {} /* Blog Author and Avatar */ #hubspot-author_data {} #hubspot-author_data:after { content: ''; display: block; clear: both; } #hubspot-author_data a.author-link {} #hubspot-author_data .hs-author-avatar {} #hubspot-author_data .hs-author-avatar img { width: 50px; float: left; margin-right: 15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /* Use this to set up different styling for your blog posts */ .blog-listing-wrapper .post-listing .post-item {} .blog-listing-wrapper .post-listing .post-item .post-body {} .blog-post-wrapper .post-body {} /* Post Featured Image on Listings Page */ .hs-featured-image-wrapper {} .hs-featured-image-wrapper .hs-featured-image-link {} .hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image{ border-width: 0; max-height: 170px; max-width: 210px; height: auto; width: auto; display: inline-block !important; float: right; margin: 20px 0 20px 20px; } /* Read More Link */ a.more-link {} /* Blog Topics List */ #hubspot-topic_data {} #hubspot-topic_data a.topic-link {} /* Blog Social Sharing Icons */ .hs-blog-social-share { margin-top: 20px; padding: 10px 0 0 0; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; height: auto; } /* Pagination */ .blog-pagination { margin-top: 1rem; } .pagination { margin-left: 0; margin-bottom: 1rem; text-align: center; list-style:none; } .pagination::before, .pagination::after { display: table; content: ' '; -webkit-flex-basis: 0; flex-basis: 0; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } .pagination li { margin-right: 0.0625rem; border-radius: 0px; font-size: 0.875rem; display: none; position: relative; } .pagination li:last-child, .pagination li:first-child { display: inline-block; } .pagination a { display: block; padding: 0.1875rem 0.625rem; border-radius: 0px; color: #000000; position: relative; z-index: 1; } .pagination li a.prev, .pagination li a.next { padding: 0; } .pagination a:hover { background: #F2F2F2; } .pagination li:not(:first-of-type) a:before { content: '•'; position: absolute; left: -5px; color: #000000; } .pagination li a.prev:before, .pagination li a.next:before { content:""; } .pagination li.prev-parent + li a:before { content:""; } .pagination a.active { background: transparent; color: #A90C1C; padding: 0.1875rem 0.625rem; cursor: default; } /* Blog All Posts Page */ .hs-content-path-blog-all {} div.post-listing-simple {} div.post-listing-simple .post-item {} h2.post-listing-simple {} h2.post-listing-simple a {} /* =============== Blog Sidebar =============== */ .blog .blog-sidebar {} /* Blog Modules */ .blog .blog-sidebar .widget-span {} /* =============== Blog Author Page and Author Bio =============== */ .hs-blog-listing .hs-author-profile { border-bottom: 1px solid #ccc; padding: 0 0 20px 0; margin: 0 0 20px 0; } .hs-blog-post .hs-author-profile { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 20px 0 20px 0; margin: 20px 0 20px 0; } .hs-author-profile .hs-author-profile:after { content: ''; display: block; clear: both; } /* Author Avatar */ .hs-author-profile .hs-author-avatar { float: left; margin-right: 15px; max-width: 100px; } .hs-author-profile .hs-author-avatar img{ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; max-width: 100%; } /* Author Bio Wrapper*/ .hs-author-profile .hs-author-bio { overflow: hidden; } /* Author Name */ .hs-author-profile h2.hs-author-name { margin: 0 0 10px 0; } /* Author Social Follow Me */ .hs-author-profile .hs-author-social-section {} .hs-author-profile .hs-author-social-label {} .hs-author-profile .hs-author-social-links {} .hs-author-profile .hs-author-social-link {} .hs-author-profile .hs-social-facebook {} .hs-author-profile .hs-social-linkedin {} .hs-author-profile .hs-social-twitter {} .hs-author-profile .hs-social-google-plus {} .hs-author-profile .hs-author-avatar { float: none; margin: 0 auto; max-width: 100px; } .hs-blog-listing .hs-author-profile { border-bottom: 1px solid #ccc; padding: 0 0 20px 0; margin: 0 0 20px 0; text-align: center; } .hs-author-avatar img { border-radius: 100px; } .post-listing { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; flex-flow: row wrap; margin-right: -0.8125rem; margin-left: -0.8125rem; } .post-listing .post-item { min-height: 0px; min-width: 0px; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100%; padding-right: 0.8125rem; padding-left: 0.8125rem; margin-bottom: 1.875rem; } .post-item-inner { margin-bottom: 3.75rem; } .post-listing .post-item .featured-image { position: relative; width: 100%; margin-bottom: 0.9375rem; background-size: cover; background-position: center center; background-repeat: no-repeat; } .post-listing .post-item .featured-image:before { display: block; content: ""; width: 100%; padding-top: 35.25%; } .post-listing .post-item h3 a { color: #000000; font-size: 1.25rem; line-height: 1.6875rem; letter-spacing: 2px; position: relative; z-index: 1; } .post-listing .post-item .entry-content p { font-size: 1rem; margin-bottom: 1.25rem; line-height: 1.375rem; }; .post-listing .post-item .entry-content a { position: relative; z-index: 1; } .post-listing .post-item a.read-more { text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; color: #000000; font-weight: bold; float: right; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .post-listing .post-item a.read-more:hover { color: #A90C1C; } .custom-archives ul { display: none !important; } .hs-blog-post .body-container { padding: 2.5rem 0; min-height: 28.125rem; } .hs-blog-post .post-page-inner { max-width: 84.75rem; margin: 0 auto !important; float:none !important; } .hs-blog-post .post-page-inner > .row-fluid-wrapper > .row-fluid { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .hs-blog-post .blog-content { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0px; min-width: 0px; width: 100%; } .hs-blog-post .featured-image { width: 100%; margin-bottom: 1.25rem; } .byline { color: #999; } .byline a { color: #707070; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; position:relative; z-index:1; } .byline a:hover { color: #A90C1C; } .post-navigation { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; flex-flow: row wrap; padding-top: 2.5rem; } .post-navigation > .cell { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0px; min-width: 0px; width: 100%; padding-right: 0.8125rem; padding-left: 0.8125rem; } .post-navigation .prev { text-align: center; } .post-navigation .prev a, .post-navigation .next a { color: #000000; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .post-navigation .prev a:hover, .post-navigation .next a:hover { color: #A90C1C; } .post-navigation .prev strong, .post-navigation .next strong { font-size: 1.125rem; font-weight: 700; } .post-navigation .social-share { text-align: center; } .post-navigation .social-share > div { font-size: 0; } .post-navigation .social-share span { font-size: 1.125rem; text-transform: uppercase; } .post-navigation .social-share a { color: #000000; margin: 0 0.625rem; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; position: relative; z-index: 1; } .post-navigation .social-share a:hover { color: #A90C1C; } .post-navigation .social-share i { font-size: 1.125rem; } .post-navigation .next { text-align: center; } .hs-blog-post .blog-sidebar { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0px; min-width: 0px; width: 100% !important; background: #F2F2F2; padding: 1.875rem 0.9375rem; margin-left:0 !important; } .hs-blog-post .blog-sidebar h3 { color: #A90C1C; text-align: center; } .hs-blog-post .blog-sidebar img { margin: 1.25rem auto; display: block; max-width: 12.5rem; } .hs-blog-post .blog-sidebar p { text-align:center; } .hs-blog-post .blog-sidebar .custom-sidebar-followus p:last-of-type { margin-bottom:0; } .hs-blog-post .blog-sidebar .button { width: 100%; position:relative; z-index:1; } .hs-blog-post .blog-sidebar .custom-sidebar-followus { margin: 3.75rem 0; } .hs-blog-post .blog-sidebar p a { color: #000000; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .hs-blog-post .blog-sidebar p a:hover { color: #A90C1C; } .hs-blog-post .blog-sidebar .custom-categories, .hs-blog-post .blog-sidebar .custom-archives { margin-bottom: 1.875rem; } .hs-blog-post .blog-sidebar .custom-categories h3, .hs-blog-post .blog-sidebar .custom-archives h3 { text-align: center; font-size: 1.25rem; color: #000; font-weight: 700; text-transform: uppercase; } .blog-sidebar ul { margin: 0; padding:0; list-style: none; } .blog-comment-form { padding-right: 1.875rem; } .pagination-cell { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0px; min-width: 0px; width: 100%; padding-right: 0.8125rem; padding-left: 0.8125rem; } /* ========================================================================== 6. FORMS ========================================================================== */ /* =============== Global Form Styles =============== */ .body-container .custom_error_message form, .body-container .widget-type-form, .body-container .widget-type-blog_subscribe, .body-container .widget-type-google_search, .body-container .widget-type-password_prompt.custom_error_message, .body-container .widget-type-email_simple_subscription, .hs-blog-post .body-container .widget-type-blog_comments, .body-container .hs-search-field__bar{ display:block; width:100%; max-width:500px; } .hs-blog-post .body-container .widget-type-blog_comments { max-width:100%; } .body-container .custom_error_message h3, .body-container .widget-type-form h3, .body-container .widget-type-blog_subscribe h3, .body-container .widget-type-google_search h3 , .body-container .widget-type-password_prompt.custom_error_message h3 , .body-container .widget-type-email_simple_subscription h3, .hs-blog-post .body-container .widget-type-blog_comments h3, .body-container .hs-search-field__bar h3 { } .hs_error_rollup { display:none !important; } .hs-error-msgs label{ color:#ff0000; } /* Form Field */ .body-container .hs-form-field { margin-bottom: 15px; } /* Descriptions */ .hs-field-desc {} /* Labels and Legends */ label { display:block; margin:0; font-size:0.875rem; font-weight:normal; line-height:1.8;; color:#000; } .body-container .hs-form-field > label, .hs-form-booleancheckbox-display { } .hs-form-field ul.inputs-list { list-style: none; padding: 0; } /* One Line Inputs */ .body-container input[type="text"], .body-container input[type="password"], .body-container input[type="datetime"], .body-container input[type="datetime-local"], .body-container input[type="date"], .body-container input[type="month"], .body-container input[type="time"], .body-container input[type="week"], .body-container input[type="number"], .body-container input[type="email"], .body-container input[type="url"], .body-container input[type="search"], .body-container input[type="tel"], .body-container input[type="color"], .body-container input[type="file"], .body-container textarea { display:block; width:100%; max-width:500px; height:2.4375rem; margin: 0 0 1rem; padding: 0.5rem; color: var(--os-color-text-page) !important; background-color: var(--os-form-200); border: 1px solid transparent; border-radius: 8px; /* background-color: #ffffff; */ /* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); */ font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5; /* color: #000000; */ -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .body-container select { box-sizing: border-box; width: 100%; height: 2.4375rem; margin: 0 0 1rem; padding: 0.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid transparent; border-radius: 8px; background-color: #3f3848; font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5; color: #fbfafb; background-image: url(//5852453.fs1.hubspotusercontent-na1.net/hubfs/5852453/OffensiveSecurity_November2019/Images/Down%20Arrow.svg); background-origin: content-box; background-position: right -1rem center; background-repeat: no-repeat; background-size: 9px 6px; padding-right: 1.5rem; -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } .body-container select:focus { outline: none; border: 1px solid #707070; background-color: #3f3848; /* box-shadow: 0 0 0px #cacaca; */ -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } .body-container textarea { height:auto; } .hs-form-booleancheckbox-display input { float: left; } .hs-blog-post .widget-type-blog_comments input, .hs-blog-post .widget-type-blog_comments textarea { max-width: 100% !important; } .body-container input[type="text"]::placeholder, .body-container input[type="password"]::placeholder, .body-container input[type="datetime"]::placeholder, .body-container input[type="datetime-local"]::placeholder, .body-container input[type="date"]::placeholder, .body-container input[type="month"]::placeholder, .body-container input[type="time"]::placeholder, .body-container input[type="week"]::placeholder, .body-container input[type="number"]::placeholder, .body-container input[type="email"]::placeholder, .body-container input[type="url"]::placeholder, .body-container input[type="search"]::placeholder, .body-container input[type="tel"]::placeholder, .body-container input[type="color"]::placeholder, .body-container input[type="file"]::placeholder, .body-container textarea::placeholder{ color: var(--os-color-text-page) !important; } .body-container input[type="text"]:hover, .body-container input[type="password"]:hover, .body-container input[type="datetime"]:hover, .body-container input[type="datetime-local"]:hover, .body-container input[type="date"]:hover, .body-container input[type="month"]:hover, .body-container input[type="time"]:hover, .body-container input[type="week"]:hover, .body-container input[type="number"]:hover, .body-container input[type="email"]:hover, .body-container input[type="url"]:hover, .body-container input[type="search"]:hover, .body-container input[type="tel"]:hover, .body-container input[type="color"]:hover, .body-container input[type="file"]:hover, .body-container textarea:hover, .body-container select:hover {} .body-container input[type="text"]:focus, .body-container input[type="password"]:focus, .body-container input[type="datetime"]:focus, .body-container input[type="datetime-local"]:focus, .body-container input[type="date"]:focus, .body-container input[type="month"]:focus, .body-container input[type="time"]:focus, .body-container input[type="week"]:focus, .body-container input[type="number"]:focus, .body-container input[type="email"]:focus, .body-container input[type="url"]:focus, .body-container input[type="search"]:focus, .body-container input[type="tel"]:focus, .body-container input[type="color"]:focus, .body-container input[type="file"]:focus, .body-container textarea:focus{ outline: none; border: 1px solid #00BFCB; background-color: var(--os-form-200); box-shadow: 0 0 2px #cacaca; -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } /* Separate Styles for Multiple Line Inputs */ textarea {} textarea:focus {} /* Separate Styles for Drop Downs */ select {} select:focus {} /* Multiple Selection Inputs */ form.hs-form .hs-form-field ul.inputs-list { list-style: none; padding: 0; } form.hs-form .hs-form-field ul.inputs-list li input {} input[type="radio"] {} input[type="checkbox"] {} /* Required */ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {} input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {} /* Error */ .hs-error-msgs label{} /* Placeholder Text */ ::-webkit-input-placeholder {} /* Webkit Browsers */ :-moz-placeholder {} /* Firefox 18- */ ::-moz-placeholder {} /* Firefox 19+ */ :-ms-input-placeholder {} /* IE10 */ /* =============== Multi Column Form =============== */ .hs-form fieldset.form-columns-1 {} .hs-form fieldset.form-columns-1 .hs-form-field {} .hs-form fieldset.form-columns-2 {} .hs-form fieldset.form-columns-2 .hs-form-field {} .hs-form fieldset.form-columns-3 {} .hs-form fieldset.form-columns-3 .hs-form-field {} /* Multiple Selection Inputs */ form.hs-form .hs-form-field ul.inputs-list li input {} input[type="radio"] {} input[type="checkbox"] {} form.hs-form fieldset { max-width: none; } form.hs-form fieldset .hs-form-field { padding: 0 10px 0 0; } form.hs-form fieldset[class*="form-columns"] .input { margin-right: 0; } form.hs-form fieldset[class*="form-columns"] .hs-input { width: 100%; } form.hs-form fieldset[class*="form-columns"] .hs-input[type="checkbox"] { width: auto; } form.hs-form fieldset.form-columns-3 .hs-form-field { width: 33.33%; } @media (max-width: 400px) { form.hs-form fieldset .hs-form-field { padding: 0; } form.hs-form fieldset.form-columns-3 .hs-form-field, form.hs-form .form-columns-2 .hs-form-field .hs-input, form.hs-form .form-columns-3 .hs-form-field .hs-input { width: 100%; } form.hs-form .form-columns-3 .hs-form-field .hs-input[type="checkbox"] { width: auto; } } /* =============== Blog Comment Form =============== */ /* Label */ #comment-form .hs-form-field > label {} #comment-form label {} /* Inputs */ #comment-form input[type="text"] {} #comment-form input[type="text"]:focus {} #comment-form textarea {} #comment-form textarea:focus {} #comment-form input[type="checkbox"] {} /* =============== Blog Subscription Form =============== */ /* Label */ #hs_form_target_blog_subscription .hs-form-field > label {} #hs_form_target_blog_subscription label {} /* Inputs */ #hs_form_target_blog_subscription input[type="email"] {} #hs_form_target_blog_subscription input[type="email"]:focus {} #hs_form_target_blog_subscription input[type="radio"], #hs_form_target_blog_subscription input[type="checkbox"] { width: auto; margin-right: 10px; } /* =============== Google Search Form =============== */ /* Label */ .widget-type-google_search label {} /* Input */ .widget-type-google_search input[type="text"] {} .widget-type-google_search input[type="focus"] {} /* ========================================================================== 7. BUTTONS ========================================================================== */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button { padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 0px; background: transparent; line-height: 1; cursor: auto; } button, input, optgroup, select, textarea { font-family: inherit; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } [type='submit'], [type='button'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0px; } [data-whatinput='mouse'] button { outline: 0; } .button { display: inline-block; vertical-align: middle; margin: 0 0 1rem 0; font-family: inherit; padding: 0.85em 1em; -webkit-appearance: none; border: 1px solid transparent; border-radius: 0px; -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out; transition: background-color 0.25s ease-out, color 0.25s ease-out; font-size: 20px; line-height: 1; text-align: center; cursor: pointer; } .button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus { background-color: #A90C1C; color: #ffffff; } .button { font-weight: 700; text-transform: uppercase; } [data-whatinput='mouse'] .button { outline: 0; } .button:hover, .button:focus { background-color: #900a18; color: #ffffff; } /* =============== All Global Buttons (Excluding CTAs) =============== */ .body-container .hs-button.primary, .body-container input[type="submit"], .body-container input[type="button"] { cursor: pointer; -webkit-appearance: none; text-decoration: none !important; white-space:normal !important; display:inline-block; margin:15px 0; vertical-align:middle; font-family:inherit; padding:0.85em 1em; border:1px solid transparent; border-radius:100px; -webkit-transition:background-color 0.25s ease-out, color 0.25s ease-out; transition:background-color 0.25s ease-out, color 0.25s ease-out; font-size:18px; line-height:1; text-align:center; background-color:#6619d0; color:#fff; font-weight:700; text-transform:uppercase; outline:0; } .body-container .hs-button.primary:hover, .body-container input[type="submit"]:hover, .body-container input[type="button"]:hover { background-color:#B183F0; } .body-container .hs-button.primary:focus, .body-container input[type="submit"]:focus, .body-container input[type="button"]:focus { background-color:#6619d0; } .body-container .widget-type-blog_comments .hs-button.primary, .body-container .widget-type-blog_comments input[type="submit"], .body-container .widget-type-blog_comments input[type="button"] { } .body-container .widget-type-blog_comments .hs-button.primary:hover, .body-container .widget-type-blog_comments input[type="submit"]:hover, .body-container .widget-type-blog_comments input[type="button"]:hover { } /* =============== Form Module Button =============== */ .hs_cos_wrapper_type_form .hs-button.primary.large {} .hs_cos_wrapper_type_form .hs-button.primary.large:hover {} .hs_cos_wrapper_type_form .hs-button.primary.large:focus {} /* =============== Blog Comment Button =============== */ #add-comment-button.hs-button.primary {} #add-comment-button.hs-button.primary:hover {} #add-comment-button.hs-button.primary:focus {} /* =============== Blog Subscription Button =============== */ #hs_form_target_blog_subscription .hs-button.primary.large {} #hs_form_target_blog_subscription .hs-button.primary.large:hover {} #hs_form_target_blog_subscription .hs-button.primary.large:focus {} /* =============== Google Search Button =============== */ .widget-type-google_search .hs-button.primary {} .widget-type-google_search .hs-button.primary:hover {} .widget-type-google_search .hs-button.primary:focus {} /* ========================================================================== 8. MISCELLANEOUS ========================================================================== */ /* Styles that do not fit into any of the available sections above can go here. */ .subscribe-options label { margin:0; } .hs-recaptcha { margin-top:10px; } /* -------------- Default Code for comment ------------ */ .custom_listing_comments { border: 1px solid #e2e2e2; display: block; line-height: 165%; padding: 15px; } #comments-listing { border: 1px solid #ccc; margin-bottom: 30px; margin-top: 30px; } #comments-listing.no-comments { border: none; } .comment.depth-0 { border-bottom: 1px solid #000 !important; border-top: medium none !important; margin: 0 10px 10px !important; padding: 0 15px !important; } .comment-body { border-bottom: medium none; display: block; padding: 0; } .comment-reply-to{ margin-bottom: 15px; } .comment-from h4 { margin: 0; padding-top: 15px; } .comment-date { display: block !important; text-align: left; } #comments-listing:not([data-has-comments="true"]) { display: none; } .replying { padding: 0 15px !important; } .custom-footer .page-center > .row-fluid-wrapper > .row-fluid:after, .custom-footer .page-center > .row-fluid-wrapper > .row-fluid:before, .custom-header > .row-fluid-wrapper > .row-fluid:after, .custom-header > .row-fluid-wrapper > .row-fluid:before{ display:none; } .custom-header-right { margin-left: 0 !important; width: auto !important; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; float: none !important; } .custom-header-right .mobile-menu { list-style: none; margin: 0; background-color: #A90C1C; } .custom-header-right .mobile-menu li.toggle { margin-right: 0; } .custom-header-right .mobile-menu > li { display: inline-block; margin-right: 1.25rem; } .custom-header-right .mobile-menu button { color: #ffffff; cursor: pointer; outline:0; } .custom-header-right .mobile-menu #search-trigger a { color: #ffffff; } .custom-header-right .mobile-menu #search-form-container { background-color: transparent; position: fixed; z-index: 30000; top: 25px; bottom: 0; right: -100%; width: 100%; height: 85px; overflow: hidden; transition:all .5s ease; } .search-open .custom-header-right .mobile-menu #search-form-container { right:0; } .custom-header-right .mobile-menu #search-form-container .inner { background-color: #ffffff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .custom-header-right .mobile-menu #search-form-container button[class^='icon-'], .custom-header-right .mobile-menu #search-form-container span[class^='icon-']{ font-size: 40px; line-height: 65px; color: #707070; padding: 0 16px; cursor: pointer; position: absolute; top: 10px; } .custom-header-right .mobile-menu #search-form-container span[class^='icon-'].icon-close { left: 0px; } .custom-header-right .mobile-menu #search-form-container form { display: inline-block; margin: 0; position: absolute; left: 50px; right: 54px; top: 15px; } .custom-header-right label { display: block; margin: 0; font-size: 0.875rem; font-weight: normal; line-height: 1.8; color: #000000; } .custom-header-right .mobile-menu #search-form-container form label { color: #707070; } .custom-header-right .mobile-menu #search-form-container .screen-reader-text { margin-right: 0.625rem; } .custom-header-right .mobile-menu #search-form-container form input[type="search"] { width: 100%; border-radius: 0px; font-family: inherit; -webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 1; height: 22px; margin: 0; padding: 0; border: 0; border-bottom: 1px dotted #707070; outline: 0; background: transparent; font-size: 1.125rem; font-weight: 500; letter-spacing: 1px; color: #707070; box-shadow: none; max-width: 300px; } .custom-header-right .mobile-menu #search-form-container form input[type="search"]::placeholder { color: #b7b7b7; } .custom-header-right input { max-width: 200px; margin-right: 1rem; } .custom-header-right .mobile-menu #search-form-container form input[type="submit"] { display: none; } .custom-header-right .mobile-menu #search-form-container button[class^='icon-'].icon-chevron-right { right: -54px; top: -5px; } .custom-header-right .mobile-menu .button { background: #ffffff; color: #A90C1C; margin-bottom: 5px; font-size: 1rem; padding: 0.5rem 0.75rem; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .custom-header-right .mobile-menu .button:hover { background: #000000; color: #ffffff; } .custom-header-height { min-height: 136px !important; } .custom-flyout-menu { position: fixed; -webkit-transition: right 0.5s ease, -webkit-right 0.5s ease,visibility 0.5s ease; transition: right 0.5s ease, -webkit-right 0.5s ease,visibility 0.5s ease; transition: right 0.5s ease, -webkit-right 0.5s ease,visibility 0.5s ease; transition: right 0.5s ease, -webkit-right 0.5s ease,visibility 0.5s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #F2F2F2; top: 0; right: -250px; height: 100%; overflow-x:hidden !important; overflow-y: auto !important; width: 250px; visibility: hidden; z-index: 12; box-shadow: inset 13px 0 20px -13px rgba(0, 0, 0, 0.25); padding-top: 30px; z-index:9999; } .mobile-open .custom-flyout-menu { visibility: visible; right: 0; } #site_wrapper { transition: -webkit-right 0.5s ease; transition: right 0.5s ease; transition: right 0.5s ease, -webkit-right 0.5s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; right: 0; position: relative; } .mobile-open #site_wrapper{ right: 250px; } .mobile-open .custom-header{ right:250px; left:auto } .overlay { position: fixed; top: 0; right: 0; z-index: 99991; width: 100%; height: 100%; -webkit-transition: opacity 0.5s ease, visibility 0.5s ease,right 0.5s ease; transition: opacity 0.5s ease, visibility 0.5s ease,right 0.5s ease; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; overflow: hidden; } .mobile-open .overlay { opacity: 1; visibility: visible; cursor: pointer; right:250px; } .custom-flyout-menu .close-button { position: absolute; color: #707070; cursor: pointer; right: 1rem; top: 0.5rem; font-size: 2em; line-height: 1; z-index: 999; color: #707070; outline:0; } .custom-flyout-menu .hs-menu-wrapper > ul { padding: 0; margin: 0; list-style: none; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; } .custom-flyout-menu .mobile .hs-menu-wrapper > ul { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul > li { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0px; min-width: 0px; padding-right: 0.8125rem; padding-left: 0.8125rem; width: 100%; margin-bottom: 1.875rem; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul > li > a { color: #A90C1C; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; padding: 0.625rem 0; cursor: default; display:block !important; line-height: 1; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul > li > a:not[href*="javascript:void(0);"] { cursor: pointer; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul > li > a:not[href*="javascript:void(0);"]:hover { color: #000000; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul li ul { position: static !important; visibility: visible !important; opacity: 1 !important; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul li ul li a { color: #A90C1C; font-size: 1rem; line-height: 1.375rem; text-transform: none; font-weight: 400; letter-spacing: 0; padding: 0.3125rem 0; cursor: pointer; display: inline-block; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; white-space: normal !important; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul li ul li a:hover { color: #000000; } @keyframes fadein2{ 0% { opacity:0; } 66% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadein2{ 0% { opacity:0; } 66% { opacity:0; } 100% { opacity:1; } } /* ========================================================================== 9. MEDIA QUERIES ========================================================================== */ @media screen and (min-width:801px) { .custom-flyout-menu .hs-menu-wrapper > ul ul { display:block !important; } .mobile { display:none !important; } } @media (min-width:1024px) { h1, .h1 { font-size: 3.125rem; } h2, .h2 { font-size: 2.5rem; } h3, .h3 { font-size: 1.875rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } .custom-footer { padding: 4.375rem; } .custom-footer .page-center > .row-fluid-wrapper > .row-fluid { margin-right: -1.125rem; margin-left: -1.125rem; } .custom-footer-menu .hs-menu-wrapper > ul { margin-right: -1.125rem; margin-left: -1.125rem; } .custom-footer-menu .hs-menu-wrapper > ul > li { padding-right: 1.125rem; padding-left: 1.125rem; width: 50%; } .custom-footer-social { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100% !important; } .custom-footer-copyright { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 83.3333333333% !important; } .custom-footer-copyright p.copyright { float: left; } .custom-footer-links { -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; float: left; } .custom-footer-links .hs-menu-wrapper > ul { -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; } .custom-header { padding: 1.875rem 1.875rem 1.5625rem; } .custom-header-fixed .custom-header { padding: 1.25rem 1.875rem 1.25rem; } .custom-header > .row-fluid-wrapper > .row-fluid { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .custom-header-left { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-right: auto; } .custom-header-right { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: auto; } .custom-header-right .mobile-menu #search-form-container { width: 450px; } .custom-header-fixed .custom-menu-primary .hs-menu-wrapper > ul > li > a { padding: 0.75rem 1.25rem; } .custom-flyout-menu { width: 350px; right: -350px; } .mobile-open #site_wrapper{ right: 350px; } .mobile-open .custom-header { right:350px; } .mobile-open .overlay { right:350px; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul > li { padding-right: 1.125rem; padding-left: 1.125rem; } .dropdown-pane.full { padding: 2.5rem 4.375rem; } .dropdown-pane-inner { margin-right: -1.125rem; margin-left: -1.125rem; } .dropdown-pane-inner > .cell { padding-right: 1.125rem; padding-left: 1.125rem; } .dropdown-pane-inner > .grid-x > .cell-medium-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 75%; } .post-listing { margin-right: -1.125rem; margin-left: -1.125rem; } .post-listing .post-item { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 50%; padding-right: 1.125rem; padding-left: 1.125rem; margin-bottom: 3.75rem; } .pagination li { display: inline-block; } .hs-blog-post .blog-content { width: 66.6666666667% !important; } .pagination-cell { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333%; padding-right: 1.125rem; padding-left: 1.125rem; } .post-navigation .prev, .post-navigation .next { font-size: 1rem; } .post-navigation .prev { text-align: left; } .post-navigation .next { text-align: right; } .hs-blog-post .blog-sidebar { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333% !important; } .hs-blog-post .blog-sidebar .custom-categories h3, .hs-blog-post .blog-sidebar .custom-archives h3{ font-size: 1.5rem; } .hs-blog-post .blog-sidebar .custom-categories, .hs-blog-post .blog-sidebar .custom-archives { margin-bottom: 3.75rem; } .custom-banner-area { margin-bottom: 3.75rem; } .custom-banner-area h3 { font-size: 1.875rem; } } @media (min-width:1024px) { .custom-footer .page-center > .row-fluid-wrapper > .row-fluid { margin-right: -1.75rem; margin-left: -1.75rem; } .custom-footer-menu .hs-menu-wrapper > ul { margin-right: -1.75rem; margin-left: -1.75rem; } .custom-footer-menu .hs-menu-wrapper > ul > li { padding-right: 1.75rem; padding-left: 1.75rem; width: 33.3333333333%; } .custom-footer-social { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333% !important; } .custom-footer-copyright { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 66.6666666667% !important; } .custom-flyout-menu .desktop .hs-menu-wrapper > ul > li { padding-right: 1.75rem; padding-left: 1.75rem; } .nav-panels .dropdown-pane.full { padding: 2.5rem 4.375rem; } .dropdown-pane-inner { margin-right: -1.75rem; margin-left: -1.75rem; } .dropdown-pane-inner > .cell-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } .dropdown-pane-inner > .cell { padding-right: 1.75rem; padding-left: 1.75rem; } .dropdown-pane-inner > .cell-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 66.6666666667%; } .dropdown-pane-inner > .cell-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333%; } .blog-banner-area h1 { letter-spacing: 2px; } .post-listing { margin-right: -1.75rem; margin-left: -1.75rem; } .post-listing .post-item { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 50%; padding-right: 1.75rem; padding-left: 1.75rem; } .hs-blog-post .blog-content { width: 75% !important; } .pagination-cell { padding-right: 1.75rem; padding-left: 1.75rem; } .hs-blog-post .blog-sidebar { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 25% !important; } .hs-blog-post .blog-content .blog-post-wrapper { padding-right: 1.875rem; } .custom-banner-area { padding: 17.1875rem 0 0; } .custom-banner-area h1 { font-size: 5rem; line-height: 3.75rem; margin: 0; letter-spacing: 2px; } } @media (min-width:1100px) { .custom-logo img { max-height: 3.75rem; } } @media (min-width:1200px){ .custom-logo { margin-right: 1.5625rem; } } @media (min-width:1201px) { .tab{ display:none !important; } } @media (min-width:1250px) { .custom-menu-primary .hs-menu-wrapper > ul > li > a { padding: 0.9375rem 1.25rem; } } @media (min-width:1300px) { .dropdown-pane .products p { font-size: 1.125rem; } } @media (min-width:1400px) { .custom-logo { margin-right: 2.8125rem; } .custom-logo img { max-height: 4.375rem; } .custom-menu-primary .hs-menu-wrapper > ul > li > a { font-size: 1rem; padding: 1.25rem 1.5625rem 1.5625rem; } .custom-header-right .mobile-menu .button { font-size: 1.25rem; padding: 0.5rem 0.9375rem; } } /* 9.1 =============== Screen sizes smaller than .page-center =============== */ @media (max-width:1435px) and (min-width:1400px) { .custom-menu-primary .hs-menu-wrapper > ul > li > a { padding: 1.25rem 1.35rem 1.5625rem; } } @media (max-width:1400px) { .custom-header-height { min-height: 121px !important; } .lp .custom-logo { padding-bottom: 6.02px; } } @media (max-width:1300px) { .dropdown-pane .products.page-center { padding-left: 20px; padding-right: 20px; } .dropdown-pane .products.page-center .cell { position: relative; } .dropdown-pane .products.page-center .dropdown-pane-inner > .cell { padding-left: 20px; padding-right: 20px; } } @media (max-width:1250px) { .custom-footer { background-size: 25%; } .custom-header-height { min-height: 115px !important; } .custom-footer.lp { background-size: 15%; } } @media (max-width:1218px) and (min-width:1200px){ .custom-header-height { min-height: 175px !important; } } @media (max-width:1200px) { .custom-footer-links .hs-menu-wrapper > ul > li > a { padding: 0 0.75rem; } .tab_hidden{ display:none !important; } .custom-header-height { min-height: 115px !important; } .lp .custom-logo { padding-bottom: 0.02px; } } @media (max-width:1099px) { .lp .custom-logo { padding-bottom: 10.02px; } } @media (max-width:1055px) { .custom-menu-primary .hs-menu-wrapper > ul > li > a { padding: .75rem 1rem; } } @media (max-width: 1024px) { .custom-footer-copyright p.copyright { margin-top: 2.5rem; } .custom-footer-links .hs-menu-wrapper > ul { margin-top: 2.5rem; } .custom-menu-primary { display:none !important; } .custom-header-height { min-height: 105px !important; } .lp .custom-logo { padding-bottom: 0; } .custom-header-fixed .lp .custom-logo { padding-bottom: 0; } } /* Fix menu disappearing on desktop after toggling mobile menu */ /* =============== Mobile Toggle Menu =============== */ /* Hide button on Desktop */ .child-trigger{ display: none; } @media (max-width: 800px){ .desktop { display:none !important; } /* ===== Mobile Child Toggle Buttons ===== */ .custom-flyout-menu .mobile .hs-menu-wrapper > ul li a { line-height: 1; text-decoration: none; display: block; font-size: 1rem; font-weight: 600; padding: 0.9375rem 0.625rem; position:relative; } .custom-flyout-menu .mobile .hs-menu-wrapper > ul li.hs-item-has-children > a:after { display: block; width: 0; height: 0; border: inset 6px; content: ''; border-bottom-width: 0; border-top-style: solid; border-color: #707070 transparent transparent; position: absolute; top: 50%; margin-top: -3px; right: 1rem; } .custom-flyout-menu .mobile .hs-menu-wrapper > ul li.hs-item-has-children.child-open > a:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .custom-flyout-menu .mobile .hs-menu-wrapper > ul > li > ul.hs-menu-children-wrapper { position: static !important; opacity: 1 !important; visibility: visible !important; display: none; margin: 0 1.25rem; width:auto; } .custom-flyout-menu .mobile .hs-menu-wrapper > ul ul li a { white-space: normal !important; } } @media (max-width:799px) { .custom-footer { padding-bottom: 9.375rem; background-size: 50%; } .custom-footer.lp { background-size: 43%; } .custom-footer-links .hs-menu-wrapper > ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; margin-top: 1.25rem; } .custom-footer-copyright p.copyright { margin-top: 1.25rem; } .custom-footer-links .hs-menu-wrapper > ul > li > a { padding-bottom: 1rem; display: block !important; } .custom-header-left { max-width: 90%; } .custom-header-right { max-width: 10%; text-align: right; } .custom-header-height { min-height:110px !important; } .post-navigation .prev { margin-bottom: 1.875rem; } .post-navigation .next { margin-top: 1.875rem; } .custom-banner-inner { background: rgba(0, 0, 0, 0.6); } } /* =============== Landscape tablet and smaller devices =============== */ @media (max-width: 767px) { .body-container input[type="text"], .body-container input[type="password"], .body-container input[type="datetime"], .body-container input[type="datetime-local"], .body-container input[type="date"], .body-container input[type="month"], .body-container input[type="time"], .body-container input[type="week"], .body-container input[type="number"], .body-container input[type="email"], .body-container input[type="url"], .body-container input[type="search"], .body-container input[type="tel"], .body-container input[type="color"], .body-container input[type="file"], .body-container textarea, .body-container select { max-width:100%; } .body-container .custom_error_message form, .body-container .widget-type-form, .body-container .widget-type-blog_subscribe, .body-container .widget-type-google_search, .body-container .widget-type-password_prompt.custom_error_message, .body-container .widget-type-email_simple_subscription, .hs-blog-post .body-container .widget-type-blog_comments, .body-container .hs-search-field__bar { max-width:100%; } } /* =============== Landscape phones and smaller devices =============== */ @media (max-width: 479px) { .hs-recaptcha { overflow:auto !important; } }