/*--------------------------------------------------------------------------------- Theme Name: 2024 Coltrain Designs Child Theme for NeumannGuild.org Theme URI: https://ColtrainDesigns.com Description: Divi Child Theme for NeumannGuild.org Author: Jay Coltrain Author URI: https://JayColtrain.com Template: Divi Version: 1.5.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html ------------------------------ ADDITIONAL CSS HERE ------------------------------*/ /* =========================================================================== STYLE VARIABLES =========================================================================== */ :root { --color-1:#002D72;/*Deep Navy Blue*/ --color-2:#7B1D1D;/*Burgundy Red*/ --color-3:#D4AF37;/*Gold*/ --color-4:#F5E7C1;/*Cream*/ --color-5:#FFFFFF;/*White*/ --color-6:#E4DFD6;/*Warm Gray*/ --color-7:#2C2C2C;/*Charcoal Gray*/ --color-8:#F8F3E7;/*Light Gold Tint*/ --cta-button-hover:#C19B2B;/*Darkened Gold*/ --dark-overlay-1: rgba(28,28,28,0.5); --dark-overlay-2: rgba(28,28,28,0.7); --white:#ffffff; --black:#000000; --FieldBackground:rgba(255,180,0,0.25); --transition-1: .5s ease-in-out; --transition-2: .75s ease-in-out; /* ========================= GRAVITY FORMS VARIABLES ========================= */ --gf-text-color:#000000; --gf-font-size:18px; --gf-border-radius:5px; --gf-border-radius-hover:5px; --gf-progress-bar:#002D72;/*Deep Navy Blue*/ --gf-border-color:#000000;/*black*/ --gf-border-color-hover:#002D72;/*Deep Navy Blue*/ --gf-border-color-focus:#D4AF37;/*Gold*/ /*--gf-border-thickness:2px;*/ --gf-field-background:rgba(102,102,102,0.25);/*grey color 50%*/ --gf-field-background-hover:rgba(102,102,102,0.5);/*grey Color 75%*/ --gf-field-background-focus:#ffffff; --gf-label-font-size:20px; --gf-label-font-weight:700; --gf-button-background:#002D72;/*Deep Navy Blue*/ --gf-button-background-hover:#D4AF37;/*Gold*/ --gf-button-font-size:20px; --gf-button-font-weight:600; --gf-button-transform:scale(1); --gf-button-padding: 10px 15px; --gf-transition: .25s ease-in-out; } /* ========================================================================= IMAGE GALLERIES ============================================================================*/ .et_overlay { display: none; } .mfp-title { display: none!important; } .et_pb_gallery_item img { /*transform: scale(1.03);*/ transition: transform 0.5s, opacity 0.5s; } .et_pb_gallery_item img:hover { transform: scale(1.15); opacity: 1; } .et_pb_gallery_grid .et_pb_gallery_item { padding: 2px!important; } /* ========================================================================= SITEWIDE HIGHLIGHT COLOR CHANGR ============================================================================*/ /*----change color of text highlight----*/ ::-moz-selection { color: #ffffff; background:var(--color-3); } ::selection { color: #ffffff; background:var(--color-3); } /* ========================================================================= MONARCH SOCIAL SHARE BUTTONS ============================================================================*/ /*.et_monarch .et_social_sidebar_networks a { outline: 1px solid var(--color-2); outline-offset: -5px; border-width: 1px!important; border-color: var(--color-1); border-radius:25px; letter-spacing: 2px; font-weight: 300!important; } /* =========================================================================== BACK TO TOP BUTTON =============================================================================*/ .et_pb_scroll_top.et-pb-icon{ outline: 1px solid var(--color-3); outline-offset: -5px; border-width: 1px!important; border-color: var(--color-3); letter-spacing: 2px; font-weight: 300!important; text-transform: uppercase!important; background: var(--color-1); } .et_pb_scroll_top.et-pb-icon:hover{ outline: 1px solid var(--color-1); border-color: var(--color-1); background: var(--color-3); transition: all .5s ease; } /* ========================================================================= TEXT BULLETTPOINT CHECKLIST BLOG POST FOUND HERE https://www.peeayecreative.com/change-bullet-lists-into-check-marks-in-divi/ CODE FOR DIFFERENT ICONS HERE https://www.elegantthemes.com/blog/resources/elegant-icon-font COMMON ICONS TO USE content: '3d'!important; /*Circle with arrow to the right content: 'x52'!important; /*Checkmark ============================================================================*/ .cd-bullet-list ul { list-style-type: none!important; } .cd-bullet-list ul li:before { content: '\52'!important; /*Checkmark*/ color: var(--color-2); font-family: 'ETMODULES'!important; margin-right: 10px; margin-left: -33px; font-size: 1.2em!important; } /* =========================================================================== TOP MENU =============================================================================*/ /*hide menu items on Desktop device sizes*/ @media all and (min-width: 981px) { .cd-menu-hide-desktop { display: none !important; } } /* change hamburger icon to x when mobile menu is open */ #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before, .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before { content: '\4d'; } /* Mobile menu bottom border color */ #page-container .et_mobile_menu li a { border-bottom: 1px solid var(--color-1); } /* ========================= ROTATE MENU ICON ON CLICK ========================= */ .mobile_menu_bar:before { transition: all .4s ease; transform: rotate(0deg); display: block; } .mobile_nav.opened .mobile_menu_bar::before { transition: all .4s ease; transform: rotate(90deg); display: block; } /* ========================= CLOSE SUB MENUS ON MOBILE ========================= */ /* This hides the sub menu items on mobile */ #page-container .mobile_nav li ul.hide { display: none !important; } /* This adjusts the positioning and the background transparency of the parent menu item on mobile */ #page-container .mobile_nav .menu-item-has-children { position: relative; } #page-container .mobile_nav .menu-item-has-children > a { background: transparent; } /* This styles the icon and moves it to the right */ #page-container .mobile_nav .menu-item-has-children > a + span { position: absolute; right: 0; top: 0; padding: 10px 20px; font-size: 20px; font-weight: 700; cursor: pointer; z-index: 3; } /* On Desktop */ .et-menu .menu-item-has-children>a:first-child:after { right: -10px; } /* DROP-DOWN MENU INDICATOR ICON CODE FOR DIFFERENT ICONS HERE https://www.elegantthemes.com/blog/resources/elegant-icon-font */ #page-container span.menu-closed:before { content: "\3b"; display: block; color: var(--color-2); font-size: 16px; font-family: ETmodules; } #page-container span.menu-closed.menu-open:before { content: "\51"; } /* ========================= INCREASE INNER WIDTH OF DROP-DOWN MENU https://duogeeks.com/blog/divi-dropdown-menu-width/ ========================= */ /*.et-menu li li a { padding: 6px 20px; width: 260px; } .nav li ul { position: absolute; padding: 20px 0; width: 300px; } /* =========================================================================== CUSTOM CTA BUTTON https://divilife.com/how-to-easily-create-a-divi-menu-button-in-divi-4-0/ https://quiroz.co/transform-a-divi-menu-item-into-a-cta/ =============================================================================*/ .et_pb_menu .et_pb_menu__menu>nav>ul>li.cd-menu-cta { margin-top: 20px; align-items: center!important; color:var(--color-1)!important; } .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item.cd-menu-cta a, .et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu li.current-menu-item.cd-menu-cta a { color: var(--color-1)!important; } .et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu .cd-menu-cta a, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu .cd-menu-cta a { color: var(--color-1)!important; } .cd-menu-cta .et_pb_menu_0_tb_header.et_pb_menu ul li.cd-menu-cta a { color: var(--color-1)!important; } .et_pb_menu_0_tb_header.et_pb_menu ul li.cd-menu-cta a { color: var(--color-1)!important; } /* If the screen size is 981px or more */ @media only screen and (min-width: 981px) { .cd-menu-cta { border-radius: 0px; } .cd-menu-cta a { color: var(--color-1)!important; } li.cd-menu-cta { color:var(--color-1); background-color:var(--color-3); border-radius: 4px; border: 2px solid var(--color-4); box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); -moz-transition: var(--transition-1); -webkit-transition: var(--transition-1); transition:var(--transition-1); font-weight: 700; text-transform: uppercase; text-align: center; padding: 20px 24px 20px 24px !important;/*14px 13px 14px 10px!important;*/ margin: 15px auto!important; height: 30px; max-width: 240px; } li.cd-menu-cta:hover { background-color:var(--cta-button-hover); } .cd-menu-cta a:hover { opacity: 1!important; } } /* If the screen size is 980px or less */ @media only screen and (max-width: 980px) { .cd-menu-cta { border-radius: 0px; } .cd-menu-cta a { color:var(--color-1) !important; } .et_mobile_menu li.cd-menu-cta a { border-bottom:0px!important; } li.cd-menu-cta { color:var(--color-1); background-color:var(--color-3); border-radius: 4px; border: 2px solid var(--color-4); box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); -moz-transition: var(--transition-1); -webkit-transition: var(--transition-1); transition:var(--transition-1); font-weight: 700; text-transform: uppercase; text-align: center; padding: 0px 13px 41px 10px!important; margin: 20px auto; height: 50px; max-width: 240px; } li.cd-menu-cta:hover { background-color:var(--cta-button-hover); } .cd-menu-cta a:hover { opacity: 1!important; } } /* ========================= MENU PADDING TO ALIGN CTA BUTTON ========================= */ /*.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a { padding-bottom: 0px; padding-top: 15px; }*/ /* ========================= ADD ICON TO CTA BUTTON CODE FOR DIFFERENT ICONS HERE https://www.elegantthemes.com/blog/resources/elegant-icon-font COMMON ICONS TO USE content: '3d'; /*Circle with arrow to the right content: 'e089'; /*Heart ========================= */ /*.cd-menu-cta > a:before { font-family: 'ETMODULES'; content: 'e089'; text-align: center; vertical-align: middle; margin-right: 15px; margin-left: 0px; color: var(--color-1); font-size: 1em; transition: all .3s ease; } .cd-menu-cta > a:hover::before { color: var(--color-2); }*/ /* ========================= CTA BUTTON WIGGLE EFFECT ========================= */ .btn-wiggle { box-shadow: 0 0 1px transparent; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -moz-transform: translateZ(0); -webkit-transform: translateZ(0); animation-name: wiggle; -o-animation-name: wiggle; -ms-animation-name: wiggle; -moz-animation-name: wiggle; -webkit-animation-name: wiggle; animation-duration: 5s; -o-animation-duration: 5s; -ms-animation-duration: 5s; -moz-animation-duration: 5s; -webkit-animation-duration: 5s; animation-timing-function: linear; -o-animation-timing-function: linear; -ms-animation-timing-function: linear; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-play-state: running; -o-animation-play-state: running; -ms-animation-play-state: running; -moz-animation-play-state: running; -webkit-animation-play-state: running; } @keyframes wiggle{2%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}4%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}6%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}8%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}10%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}12%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}14%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}16%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}18%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}20%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}} /* ========================= CTA BUTTON BREATHING EFFECT ========================= */ /*.divi-life-breathing { -webkit-animation:divi-bar-breathing 7s ease-out infinite normal; animation:divi-bar-breathing 7s ease-out infinite normal } .divi-bar-breathing{-webkit-animation:divi-bar-breathing 7s ease-out infinite normal;animation:divi-bar-breathing 7s ease-out infinite normal}@-webkit-keyframes divi-bar-breathing{0%{-webkit-transform:scale(0.9);transform:scale(0.9)}25%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes divi-bar-breathing{0%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}25%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}100%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}}*/ /* =========================================================================== UNDERLINE TEXT ON HOVER EFFECT =========================================================================== */ /*

Why you'll fit in

*/ /* ========================= JUST UNDELINE WITH NO TRANSITION ========================= */ .underline-title{ display: inline-block; position: relative; } .underline-title::after { content: ''; position: absolute; width: 100%; transform: scaleX(1); height: 2px; bottom: 0; left: 0; background-color: var(--color-1); transform-origin: center; transition: transform 0.25s ease-out; } /* ========================= LIGHT BACKGROUND ========================= */ .hover-underline-animation { display: inline-block; position: relative; /*color: var(--color-1);*/ } .hover-underline-animation::after { content: ''; position: absolute; width: 100%; transform: scaleX(0.25); height: 2px; bottom: 0; left: 0; background-color: var(--color-3); transform-origin: center; transition: var(--transition-1); } .hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: center; } /* ========================= DARK BACKGROUND ========================= */ .hover-underline-animation-dark-bg { display: inline-block; position: relative; /*color: #ffffff;*/ } .hover-underline-animation-dark-bg::after { content: ''; position: absolute; width: 100%; transform: scaleX(0.25); height: 2px; bottom: 0; left: 0; background-color: var(--color-2); transform-origin: center; transition: var(--transition-1); } .hover-underline-animation-dark-bg:hover::after { transform: scaleX(1); transform-origin: center; } /* ========================= DARK BACKGROUND LEFT ALIGNED ========================= */ .hover-underline-animation-dark-la { display: inline-block; position: relative; /*color: #ffffff;*/ } .hover-underline-animation-dark-la::after { content: ''; position: absolute; width: 100%; transform: scaleX(0.25); height: 2px; bottom: 0; left: 0; background-color: var(--color-1); transform-origin: left; transition: var(--transition-1); } .hover-underline-animation-dark-la:hover::after { transform: scaleX(1); transform-origin: left; } /* =========================================================================== GRAVITY FORMS START =============================================================================*/ /* ============================================================================ FIX DATE PICKER TO YEAR ONLY ON EMBER REGISTRATION FORM ============================================================================ */ /*#gform_6 .ui-datepicker-calendar, #gform_6 .ui-datepicker-month, #gform_6 .ui-datepicker-prev, #gform_6 .ui-datepicker-next { display: none !important; } #gform_6 .ui-datepicker { z-index: 9999 !important; } #gform_wrapper_6 { position: relative; } /* ====================================== HIDE GOOGLE reCAPTCHA V3 BADGE ====================================== */ .grecaptcha-badge { opacity:0; } /* ====================================== Main (3) & Popup (5) Email Signup ====================================== */ #gform_3{ display: flex; align-items: center; } #gform_3 .gform_body { flex-basis: 100%;/*calc(100% - 265px);*/ } #gform_3 .gform_footer { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 15px !important; } #gform_3 .gform_body input[type=email], #gform_5 .gform_body input[type=email]{ border: none;/*2px solid var(--gf-border-color);*/ padding: 15px; margin-top: 0px; font-size: var(--gf-font-size); background:var(--white); color:var(--gf-text-color); border-radius:var(--gf-border-radius); } #gform_3 .gform_body input[type=text], #gform_5 .gform_body input[type=text]{ border: none;/*2px solid var(--gf-border-color);*/ padding: 15px; margin-top: 0px; font-size: var(--gf-font-size); background:var(--white); color:var(--gf-text-color); border-radius:var(--gf-border-radius); } /* Submit Button */ #gform_3 input[type="submit"], #gform_5 input[type="submit"] { margin-bottom: 5; background: var(--gf-button-background); border: 3px solid var(--white); box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); color: var(--white); padding: 10px 20px; text-transform:uppercase; /*max-width: 200px;*/ font-weight:var(--gf-button-font-weight); font-size:var(--gf-button-font-size); border-radius:var(--gf-border-radius); transition: var(--gf-transition); } #gform_3 input[type="submit"]:hover, #gform_5 input[type="submit"]:hover { transform:var(--gf-button-transform); cursor:pointer; background: var(--gf-button-background-hover); border-radius:var(--gf-border-radius-hover); transition: var(--gf-transition); } #gform_5 .gform_button { width: 100%; padding: 10px 20px; } #gform_5 .gform_footer { padding-top: 0 !important; padding-bottom: 0 !important; } @media screen and (max-width:991px){ #gform_3 { display: block; } #gform_3 .gform_footer { padding: 15px 0px !important; } #gform_3 .gform_button { width: 100%; } } /*Main email signup move email signup up*/ @media screen and (max-width: 640px) { #gform_3 .gform_body input[type=email]{ margin-top: -28px; } } /*Main email signup move email signup up*/ @media screen and (max-width: 640px) { #gform_3 .gform_body input[type=email]{ margin-top: -28px; } #gform_3 input[type="submit"]{ margin-bottom: 0px; margin-top: -28px; } } #gform_3 input[type="submit"], #gform_5 input[type="submit"] { margin-bottom: 23px; background: var(--gf-button-background); border: 3px solid var(--white); box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.3); color: var(--white); padding: 7px 20px; ext-transform: uppercase; /* max-width: 200px; */ font-weight: var(--gf-button-font-weight); font-size: var(--gf-button-font-size); border-radius: var(--gf-border-radius); transition: var(--gf-transition); } /* ========================= footer email signup ========================= */ #footer_signup .gform_body input[type=email]{ border: none;/*2px solid var(--gf-border-color);*/ padding: 15px; margin-top: -25px; margin-bottom:-15px; font-size: var(--gf-font-size); background:var(--white); color:var(--gf-text-color); border-radius:var(--gf-border-radius); } #footer_signup .gform_body input[type=email]:hover{ cursor:pointer; } #footer_signup input[type="submit"] { background: var(--gf-button-background); border: 3px solid var(--white); box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); color: var(--white); padding: 7px 20px; text-transform:uppercase; /*max-width: 200px;*/ font-weight:var(--gf-button-font-weight); font-size:var(--gf-button-font-size); border-radius:var(--gf-border-radius); transition: var(--gf-transition); width:100%; } /* ========================= GRAVITY DROPDOWN ========================= */ /*.gform_wrapper.gf_browser_chrome select { padding: 10px 5px; background: var(--FieldBackground); color: #fff; font-weight: 700; } .gform_body .gform_fields .gfield select { margin-top: 7px; padding: 5px 2.5px; background: var(--FieldBackground); color: var(--BlackBorder); font-weight: 700; border-radius: 5px; border-color: var(--BlackBorder); } /* ========================= GRAVITY SECTIONS ========================= */ .gform_wrapper .gsection { margin: 0px 16px 0px 0!important; } .gform_wrapper h2.gsection_title { margin: 0!important; padding: 0!important; letter-spacing: normal!important; font-size: 25px!important; margin-top: 60px!important; } /* ========================= RADIO BUTTONS ========================= */ .gform_wrapper.gravity-theme .gfield-choice-input { margin-top: 5px; vertical-align: top; } /* ========================= PROGRESS BAR ========================= */ .gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_blue { background-color: var(--gf-progress-bar); color: var(--white); } /* ========================= TEXT FIELDS AND TEXT AREA ========================= */ /* Text Area */ .gform_body textarea, input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select{ border: 2px solid var(--gf-border-color); padding: 15px; margin-top: 0px; font-size: var(--gf-font-size); background:var(--gf-field-background); color:var(--gf-text-color); border-radius:var(--gf-border-radius); } /*Text Area Hover*/ .gform_body textarea:hover, input[type=color]:hover, input[type=date]:hover, input[type=datetime-local]:hover, input[type=datetime]:hover, input[type=email]:hover, input[type=month]:hover, input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=text]:hover, input[type=time]:hover, input[type=url]:hover, input[type=week]:hover, select:hover{ border:2px solid var(--gf-border-color-hover); background:var(--gf-field-background-hover); transition:var(--gf-transition); cursor:pointer; } /* Text Area Focused */ .gform_body textarea:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus{ border:2px solid var(--gf-border-color-focus); background:var(--gf-field-background-focus); transition:var(--gf-transition); opacity:1; cursor:pointer; color:var(--gf-text-color); border-radius:var(--gf-border-radius); } /* ========================= FORM FIELD LABELS ========================= */ .gform_wrapper label.gfield_label { font-weight: var(--gf-label-font-weight); font-size: var(--gf-label-font-size); padding-top: 10px; } /*.gform_wrapper.gravity-theme .gfield_label { display: none; }*/ /* ========================= STRIPE FIELDS ========================= */ .gform_wrapper .StripeElement { border: 2px solid var(--gf-border-color); border-radius:var(--gf-border-radius); padding: 15px; margin-top: 6px; font-size: var(--gf-font-size); background:var(--gf-field-background); color:var(--white); } .gform_wrapper .StripeElement--focus { border:2px solid var(--gf-border-color-focus); background:var(--gf-field-background-focus); color:var(--black); cursor:pointer; } .gform_legacy_markup_wrapper .ginput_full[data-payment-element=false] .StripeElement, .gravity-theme .ginput_full[data-payment-element=false] .StripeElement { border: 2px solid var(--gf-border-color); border-radius:var(--gf-border-radius); /*padding: 15px;*/ margin-top: 6px; font-size: var(--gf-font-size); background:var(--gf-field-background); color:var(--white); } .gform_legacy_markup_wrapper .ginput_full[data-payment-element=false] .StripeElement, .gravity-theme .ginput_full[data-payment-element=false] .StripeElement:hover { border:2px solid var(--gf-border-color-hover); background:var(--gf-field-background-hover); transition:var(--gf-transition); cursor:pointer; } .gform_legacy_markup_wrapper .ginput_full[data-payment-element=false] .StripeElement, .gravity-theme .ginput_full[data-payment-element=false] .StripeElement--focus { border:2px solid var(--gf-border-color-focus); background:var(--gf-field-background-focus); transition:var(--gf-transition); cursor:pointer; } /* ========================= BUTTONS ========================= */ /* Submit Button */ input[type="submit"] { margin-bottom: 0; background: var(--gf-button-background); border: 3px solid var(--white); box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); color: var(--white); padding: var(--gf-button-padding);/*10px 15px;*/ /*max-width: 200px;*/ font-weight:var(--gf-button-font-weight); font-size:var(--gf-button-font-size); border-radius:var(--gf-border-radius); transition: var(--gf-transition); } input[type="submit"]:hover { transform:var(--gf-button-transform); cursor:pointer; background: var(--gf-button-background-hover); border-radius:var(--gf-border-radius-hover); transition: var(--gf-transition); } /* Previous & Next Buttons */ .gform_wrapper .gform_page_footer .button.gform_previous_button, .gform_wrapper .gform_page_footer .button.gform_next_button { margin-bottom: 15px; margin-left: 0px; margin-right: 8px; background: var(--gf-button-background); border: 2px solid var(--white); box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); color: var(--white); padding: var(--gf-button-padding);/*10px 15px;*/ /*max-width: 200px;*/ font-weight: var(--gf-button-font-weight); font-size:var(--gf-button-font-size); border-radius:var(--gf-border-radius); transition: var(--gf-transition); } .gform_wrapper .gform_page_footer .button.gform_previous_button:hover, .gform_wrapper .gform_page_footer .button.gform_next_button:hover { transform:var(--gf-button-transform); cursor:pointer; background: var(--gf-button-background-hover); border-radius:var(--gf-border-radius-hover); transition: var(--gf-transition); } /* Checkbox Select All Button */ .gform_wrapper.gravity-theme .gfield_checkbox button, .gform_wrapper.gravity-theme .gfield_checkbox input[type=text], .gform_wrapper.gravity-theme .gfield_radio button, .gform_wrapper.gravity-theme .gfield_radio input[type=text]{ margin-bottom: 0; background: var(--gf-button-background); border: 2px solid var(--white); box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); color: var(--white); padding: var(--gf-button-padding);/*10px 15px;*/ /*max-width: 200px;*/ font-weight:var(--gf-button-font-weight); font-size:var(--gf-button-font-size); border-radius:var(--gf-border-radius); transition: var(--gf-transition); } /* Coupon Button */ #gf_coupon_button{ background:var(--gf-button-background); border: 2px solid var(--gf-border-color); color:var(--white); padding:5px 15px; max-width:200px; font-weight:600; font-size:20px; border-radius:5px; transition: var(--gf-transition); } #gf_coupon_button:hover{ border: 2px solid var(--gf-border-color); background:var(--gf-border-color-hover); transition: var(--gf-transition); cursor:pointer; border-radius:5px; } /* GRAVITY PERKS Nested form button */ .gpnf-add-entry{ margin-bottom: 0; background: var(--gf-button-background); border: 3px solid var(--white); box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); color: var(--white); padding: var(--gf-button-padding);/*10px 15px;*/ max-width: 200px; font-weight:var(--gf-button-font-weight); font-size:var(--gf-button-font-size); border-radius:var(--gf-border-radius); transition: var(--gf-transition); } .gpnf-add-entry:hover { transform:var(--gf-button-transform); cursor:pointer; background: var(--gf-button-background-hover); border-radius:var(--gf-border-radius-hover); transition: var(--gf-transition); } /* =========================================================================== TEXT BUTTONS =============================================================================*/ .txt--button { display: inline-block; -webkit-appearance: none; background: var(--gf-button-background); color: var(--white); opacity:0.85; border: 3px solid var(--white); border-radius:var(--gf-border-radius); font-weight:var(--gf-button-font-weight); font-size:var(--gf-button-font-size); /*text-transform:uppercase;*/ box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3); padding: var(--gf-button-padding);/*10px 15px;*/ margin-bottom: 0; max-width: 200px; transition: var(--gf-transition); } .txt--button:hover { background: var(--gf-button-background-hover); color:var(--white); opacity:0.75; border-radius:var(--gf-border-radius-hover); transform:var(--gf-button-transform); cursor:pointer; transition: var(--gf-transition); } /* ========================= SOCIAL MEDIA BUTTONS ========================= */ /* YouTube */ /*.youtube-button .txt--button{ background: #FF0000!important; border: 1px solid #FF0000; display:flex; float:right; margin-top:-25px; } .youtube-button .txt--button:hover{ background: #FF0000!important; border: 1px solid #FF0000; } .youtube-button-with-icon .txt--button > a:after { font-family: 'ETMODULES'; content: 'e0a3'; text-align: center; vertical-align: middle; margin-right: 15px; margin-left: 0px; color: #ffffff; font-size: 1em; transition: all .3s ease; } .youtube-button-with-icon .txt--button{ background: #FF0000!important; border: 1px solid #FF0000; display:flex; float:left; margin-top:0px; } .youtube-button-with-icon .txt--button:hover{ background: #FF0000!important; border: 1px solid #FF0000; }*/ /* FaceBook */ /*.facebook-button .txt--button{ background: #2374E1!important; border: 1px solid #2374E1; display:flex; float:right; margin-top:-25px; } .facebook-button .txt--button:hover{ background: #2374E1!important; border: 1px solid #2374E1; }*/ /* TikTok */ /*.tiktok-button .txt--button{ background: #000000!important; border: 1px solid #000000; box-shadow: -4px -4px 0px 0px #00CAD1, 4px 4px 0px 0px #ff1753; display:flex; float:right; margin-top:-25px; } .tiktok-button .txt--button:hover{ background: #000000!important; border: 1px solid #000000; box-shadow: -4px -4px 0px 0px #00CAD1, 4px 4px 0px 0px #ff1753; } .tiktok-button-with-icon .txt--button{ background: #000000!important; border: 1px solid #000000; box-shadow: -4px -4px 0px 0px #00CAD1, 4px 4px 0px 0px #ff1753; display:flex; float:left; margin-top:0px; } .tiktok-button-with-icon .txt--button:hover{ background: #000000!important; border: 1px solid #000000; box-shadow: -4px -4px 0px 0px #00CAD1, 4px 4px 0px 0px #ff1753; }*/ /* Instagram */ /*.instagram-button .txt--button{ background: #d6249f!important; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%)!important; display:flex; float:right; margin-top:-25px; } .instagram-button .txt--button:hover{ background: #d6249f!important; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%)!important; }*/ /* SnapChat */ /*.snapchat-button .txt--button{ background: #FFFC00!important; border: 1px solid #000000; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; display:flex; float:right; margin-top:-25px; } .snapchat-button .txt--button:hover{ background: #FFFC00!important; border: 1px solid #000000; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }*/ @media (max-width:475px) { /*.youtube-button .txt--button, .facebook-button .txt--button,*/ .txt--button{ font-size:11px; padding:10px 15px!important; margin-bottom:10px; } } /* =========================================================================== BLOG MODULE =============================================================================*/ .cd_blog .et_pb_post { position:relative; } .cd_blog .et_pb_post .entry-featured-image-url{ overflow: hidden; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .cd_blog .et_pb_post:hover .entry-featured-image-url img{ -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; -webkit-transform: rotate(1deg) scale(1.1); transform: rotate(1deg) scale(1.1); } .cd_blog .et_pb_post .post-meta .published{ position: absolute; /*width: 60px;*/ padding:5px 10px; right: 15px; top: 0px; background: var(--color-2); color: #ffff; text-align: center; box-shadow: 0px 12px 20px 0 var(--color-1); font-size: 15px; text-transform: uppercase; } .cd_blog .et_pb_post:hover .entry-title{ color:var(--color-2); } .cd_blog .et_pb_post .entry-title:after{ width: 50%; content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--color-2); bottom: 0; } .cd_blog .et_pb_post .post-meta a{ color:var(--color-2); } .cd_blog .pagination .alignleft a, .cd_blog .pagination .alignright a{ position: relative; display: inline-block; color: var(--color-2); text-transform: uppercase; font-weight: 900; letter-spacing: 1px; } .cd_blog .et_pb_post .post-content a.more-link:before, .cd_blog .pagination .alignleft a:before, .cd_blog .pagination .alignright a:before{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;position: absolute; content: ""; background: var(--color-2); height: 1px; width: 0%; left: 0; right: 0; bottom: 0; } .cd_blog .et_pb_post .post-content a.more-link:hover:before, .cd_blog .pagination .alignleft a:hover:before, .cd_blog .pagination .alignright a:hover:before{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;width: 100%; } .cd_blog .et_pb_post .post-content .post-content-inner{ margin-bottom: 12px; } /* =========================================================================== BLOG SIDEBAR =============================================================================*/ #sidebar .et_pb_widget{ position:relative; } #sidebar .et_pb_widget .widgettitle{ position:relative; color: var(--color-2); font-weight: 700; margin-bottom: 25px; font-size: 22px;} #sidebar .et_pb_widget .widgettitle:after, #sidebar .et_pb_widget .widgettitle:before { content: ""; position: absolute; bottom: 0; width: 100%; border-top: 1px solid #d4d4d4; left: 0; } #sidebar .et_pb_widget .widgettitle:after { border-top: 3px solid var(--color-1); display: block; position: absolute; bottom: -1px; width: 30px; -webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1); transition: all 0.27s cubic-bezier(0, 0, 0.58, 1); } #sidebar .et_pb_widget:hover .widgettitle:after { width: 60px; } #sidebar .et_pb_widget ul li { position: relative; margin-bottom: 15px; line-height: 28px; font-size: 16px; } #sidebar .et_pb_widget ul li:hover:before { opacity: 1; } #sidebar .et_pb_widget ul li a { color: #2d2d2d; transition: all 0.3s; } #sidebar .et_pb_widget ul li a:hover { color: var(--color-1); -webkit-transition: all 0.3s; transition: all 0.3s; } #sidebar .et_pb_widget select { height: 40px; } #sidebar .widget_search input#s{ border: 2px solid var(--color-1); } #sidebar .widget_search input#searchsubmit { /*border-radius: 0px;*/ -webkit-appearance: none; display: inline-block; margin-bottom: 0; background: var(--gf-button-background); border: 2px solid var(--color-1); /*box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);*/ color: var(--white); /*padding: var(--gf-button-padding);/*10px 15px;*/ /*max-width: 200px;*/ font-weight:var(--gf-button-font-weight); /*font-size:var(--gf-button-font-size);*/ border-radius:var(--gf-border-radius); transition: var(--gf-transition); } #sidebar .widget_search input#searchsubmit:hover { transform:var(--gf-button-transform); cursor:pointer; background: var(--gf-button-background-hover); border-radius:var(--gf-border-radius-hover); transition: var(--gf-transition); } #sidebar .widget_search::before { font-size: 16px; padding: 8px 20px; bottom: 0; } #sidebar .tagcloud a { font-size: 14px !important; padding: 5px 10px; background: rgba(0, 0, 0, 0.05); display: inline-block; margin-bottom: 5px; border-radius: 0px; } /* =========================================================================== TESTIMONIALS =============================================================================*/ .et_pb_testimonial_dct_3_23 .et_pb_testimonial_portrait:before { font-weight: 900; font-size: 46px; color: var(--color-1); position: absolute; top: -25px; left: 83px; font-family: ETmodules !important; background: none; content: "{"; width: 0; height: 0; box-shadow: none; } .et_pb_testimonial_dct_3_23 .et_pb_testimonial_description, .et_pb_testimonial_dct_3_23 .et_pb_testimonial_description_inner { line-height: 27px; top: -31px; text-align: center; font-size: 13px; font-weight: 300; } /* =========================================================================== 2 COLUMNS ON MOBILE https://joshhall.co/how-to-keep-columns-on-mobile-in-divi/ =============================================================================*/ @media only screen and (min-width: 536px) and (max-width: 980px) { .two-col-mob .et_pb_column { width: 50%!important; } } /* =========================================================================== DOUBLE INLINE BUTTON =============================================================================*/ .cd-inline-buttons .et_pb_button_module_wrapper { display: inline-block; } .cd-inline-buttons { text-align: center !important; } /* =========================================================================== Hide date on sticky post in blog feed =============================================================================*/ .post-987509275 .post-meta .published { display: none !important; }