/* Theme Name: CFBB Bietigheim Theme URI: https://crossfitbarbellbros.com/ Description: CFBB Bietigheim Author: CFBB Author URI: https://crossfitbarbellbros.com/ Template: enfold Version: 1.0 */ /* ======================================================================================================================================= Font-Face ======================================================================================================================================= */ /* jost-300 - latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; src: url('fonts/jost-v14-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/jost-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/jost-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/jost-v14-latin-300.woff') format('woff'), /* Modern Browsers */ url('fonts/jost-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/jost-v14-latin-300.svg#Jost') format('svg'); /* Legacy iOS */ } /* jost-regular - latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; src: url('fonts/jost-v14-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/jost-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/jost-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/jost-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/jost-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/jost-v14-latin-regular.svg#Jost') format('svg'); /* Legacy iOS */ } /* jost-500 - latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; src: url('fonts/jost-v14-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/jost-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/jost-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/jost-v14-latin-500.woff') format('woff'), /* Modern Browsers */ url('fonts/jost-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/jost-v14-latin-500.svg#Jost') format('svg'); /* Legacy iOS */ } /* jost-900 - latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 900; src: url('fonts/jost-v14-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/jost-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/jost-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/jost-v14-latin-900.woff') format('woff'), /* Modern Browsers */ url('fonts/jost-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/jost-v14-latin-900.svg#Jost') format('svg'); /* Legacy iOS */ } /* ======================================================================================================================================= Variables ======================================================================================================================================= */ :root { --main: #6AB42B; --main-dark: hsl(from var(--main) h s calc(l - 10%)); } :root { --step--1: clamp(0.7292rem, 0.6389rem + 0.3851vi, 1.0577rem); --step-0: clamp(0.95rem, 0.7576rem + 0.5861vi, 1.375rem); --step-1: clamp(1.05rem, 0.8474rem + 0.8645vi, 1.7875rem); --step-2: clamp(1.26rem, 0.9678rem + 1.2469vi, 2.3238rem); --step-3: clamp(1.42rem, 1.0327rem + 1.5077vi, 2.6723rem); --step-4: clamp(1.512rem, 1.0975rem + 1.7686vi, 3.0209rem); --step-5: clamp(2.1773rem, 1.3729rem + 3.4321vi, 5.1053rem); --step-6: clamp(2.6127rem, 1.5072rem + 4.7169vi, 6.6369rem); --step-7: clamp(3.1353rem, 1.6263rem + 6.4383vi, 8.6279rem); --step-8: clamp(3.7623rem, 1.7145rem + 8.7372vi, 11.2163rem); } /* ======================================================================================================================================= Typo ======================================================================================================================================= */ html{-webkit-tap-highlight-color: transparent;} body{-webkit-font-smoothing: antialiased;} #top body, #top p, #top a, #top span, #top li{font-family: 'Jost', sans-serif;} #top h1,#top h2,#top h3,#top h4,#top h5,#top h6{font-family: 'Jost', sans-serif; font-weight: 900;} #top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;} #top .av-subheading p{font-size: var(--step-2); font-weight: 500; margin-bottom: 20px; line-height: 1.2;} #top h1{font-size: var(--step-4)} #top h2{text-transform: none; font-size: var(--step-3);} #top h3{font-size: var(--step-3);} #top h4{font-size: var(--step-3);} #top p{font-size: var(--step-0); line-height: 1.6; font-weight: 300;} @media only screen and (min-width: 768px){ #top h1{} #top h2{} #top h3{} } @media only screen and (min-width: 990px){ #top h1{} #top h2{} #top h3{} } /* Underlined */ #top .underline, #top .av_textblock_section a, #top .read-more-link a{background: linear-gradient(0deg, rgba(255,0,255,0) 0%, rgba(255,0,255,0) 16%, var(--main) 16%, var(--main) 41%, rgba(255,0,255,0) 41%); transition: 0.2s ease;} #top .av_textblock_section a:hover, #top .read-more-link a:hover{opacity: 0.8; transition: 0.2s ease;} /* ======================================================================================================================================= Header ======================================================================================================================================= */ /* Logo */ #header_main .av-logo-container .logo{padding-top: 10px; padding-bottom: 10px;} /* Navigation */ #top #header_main > .container .main_menu .av-main-nav > li > a{font-weight: 500; font-size: var(--step-0); text-transform: uppercase; margin: 0 15px;} #top .av-main-nav ul li{font-weight: 500; text-transform: uppercase;} #top .av-main-nav ul.sub-menu{border: 2px solid var(--main)} #top #header.av_minimal_header .main_menu ul:first-child >li > ul{border-top: 2px solid var(--main);} #top #header_main > .container .main_menu .av-main-nav > li > a:hover, #top #header.av_minimal_header .main_menu ul:first-child >li > ul a:hover{color: var(--main) !important} #top .av-main-nav ul a {font-size: var(--step--1);} #top #av-burger-menu-ul .avia-menu-text{font-size: var(--step-0); text-transform: uppercase;} #top .av-width-submenu > a > .avia-menu-text{font-weight: 500;} /* ======================================================================================================================================= Misc ======================================================================================================================================= */ /* Images */ #top img, #top .avia-image-container-inner{border-radius: 0;} #top .image-overlay{display: none !important;} @media only screen and (max-width: 767px) and (orientation: portrait){ #top .entry-content-wrapper .flex_column:not(:last-child) .image-top{margin-top: -160px} } @media only screen and (min-width: 768px){ #top .image-top{ margin-top: -160px; } } @media only screen and (min-width: 768px) and (min-height: 990px){ #top .image-top{ margin-top: -180px; } } /* Image effect */ #top .img-effect .avia-image-container-inner:before{ content: ''; width: 100%; height: 100%; border: 2px solid var(--main); position: absolute; top: -8px; left: -8px; visibility: visible; } #top .img-effect{padding-top: 10px;} /* Hero section */ #top #no-excuses .avia-image-container-inner{width: 100%;} #top #no-excuses img{width: 90%; float: right;} /* Socials */ #socials {display: flex; width: 100%; position: absolute; bottom: 80px;} #socials .column.line {flex-grow: 1;} #socials .column.line hr {border: solid #fff; border-width: 3px 0 0; margin-top: 30px;} #socials .column.icons {flex: 0 1 auto; padding-left: 20px;} #socials .column.icons p{display: inline-block; font-weight: 500; text-transform: uppercase;} #socials .column.icons a{font-size: var(--step-0); margin-left: 20px;} #socials .column.icons a:hover{color: var(--main)} /* Icon list */ .main_color .avia-icon-list .iconlist_icon{background-color: transparent;} .avia-icon-list .iconlist_icon {line-height: 38px; font-size: 30px; color: var(--main);} #top h4.av_iconlist_title{text-transform: none; font-size: var(--step-2);} /* Coaches section */ @media only screen and (min-width: 768px){ #top .av-tab-section-tab-title-container{padding: 0; margin: 0 auto; max-width: 1400px; border: 3px solid #fff;} #top .av-tab-section-outer-container {padding: 0 50px;} #top .av-layout-tab-inner .container {padding: 0;} #top .av-section-tab-title{padding: 10px 20px;} } #top .av-tabsection-arrow.av-visible-prev > a.prev-slide, #top .av-tabsection-arrow.av-visible-next > a.next-slide {display: none;} #top #coaches a .av-inner-tab-title{font-size: var(--step-0); font-weight: 500; transition: 0.2s ease;} #top #coaches a:hover .av-inner-tab-title{font-weight: 500; color: var(--main); transition: 0.2s ease;} #top #coaches a.av-active-tab-title .av-inner-tab-title{font-weight: 500; color: var(--main)} #top #coaches .av-tab-arrow-container{display: none;} #top #coaches .av-tab-no-icon.av-tab-no-image .av-inner-tab-title {margin-bottom: 0px; margin-top: 0px;} #top #coaches div .av_one_half {margin-left: 3%; width: 43%;} #top #coaches .av_font_icon{color: var(--main); margin-bottom: 20px;} #top #coaches .av-special-heading{margin-top: 0;} #top #coaches h4{font-size: var(--step-1); margin-top: 40px;} #top #coaches h5{font-size: var(--step-0); color: var(--main); font-weight: 500; text-transform: uppercase;} #top #coaches .coach-list ul{margin-top: 20px; list-style: none; font-size: var(--step--1); margin-left: 0;} #top #coaches .coach-list ul li{margin-left: 0;} /* Instagram Feed */ #sb_instagram .sb_instagram_header, .sb_instagram_header{display: none;} /* Akkordeons */ #top .av_toggle_section{border: 2px solid var(--main); margin-bottom: 10px;} #top .av_toggle_section a{background: linear-gradient(0deg, rgba(255,0,255,0) 0%, rgba(255,0,255,0) 16%, var(--main) 16%, var(--main) 41%, rgba(255,0,255,0) 41%); transition: 0.2s ease;} #top .av_toggle_section a:hover, #top .read-more-link a:hover{opacity: 0.8; transition: 0.2s ease;} #top p.toggler{font-weight: 900;} #top .av-elegant-toggle .vert_icon, #top .av-elegant-toggle .hor_icon{border-color: var(--main); border-width: 5px;} #top .toggle_icon .vert_icon{height: 20px} #top .toggle_icon .hor_icon{width: 20px} /* Hotspots */ .av-hotspot-container .av-image-hotspot_inner { font-family: 'Jost'; font-weight: 700; background: var(--main); color: #fff; } .av-hotspot-container .av-image-hotspot-pulse {background: var(--main);} .responsive .av-hotspot-fallback-tooltip { display: none; } /* ======================================================================================================================================= Buttons ======================================================================================================================================= */ #top .avia-button{text-transform: uppercase; border-radius: 0; font-weight: 500; padding: 15px 25px; background: transparent; border: 3px solid; margin-top: 40px;} #top .avia-button .avia_iconbox_title{color: #fff; font-size: var(--step-0); transition: color 0.2s ease} #top .avia-button:hover .avia_iconbox_title{color: var(--main); transition: color 0.2s ease} /* Buttons main color */ #top .avia-button.avia-color-theme-color{border-color: var(--main)} /* Button nav */ #top .av-menu-button > a .avia-menu-text{border-radius: 0; padding: 10px 25px; border: 3px solid var(--main);} /* Buttons Instagram feed */ #top #sb_instagram #sbi_load a{font-size: var(--step-0); text-transform: uppercase; border-radius: 0; font-weight: 500; padding: 10px 25px; background: transparent !important; border: 3px solid;} #sb_instagram svg:not(:root).svg-inline--fa{font-size: var(--step-0)} #top #sb_instagram #sbi_load a:hover{color: var(--main); transition: color 0.2s ease; background: transparent; box-shadow: none;} #top #sb_instagram #sbi_load a.sbi_load_btn{border-color: var(--main)} #top #sb_instagram #sbi_load .sbi_follow_btn a:hover{border-color: #fff;} /* ======================================================================================================================================= Blog ======================================================================================================================================= */ /* Blog Page */ #top h3.slide-entry-title{font-size: var(--step-1); margin-top: 20px;} #top .slide-entry-excerpt{font-size: var(--step-0); line-height: 1.6rem; font-weight: 300; margin-bottom: 20px; font-family: 'Jost';} #top .read-more-link{margin-top: 20px} #top .avia-content-slider .slide-image{border-radius: 0;} #top .avia-content-slider .slide-image img{max-height: 400px; object-fit: cover;} #top .avia-content-slider .slide-meta time{font-family: 'Jost'; font-size: var(--step--1); margin-top: 5px; color: var(--main)} @media only screen and (max-width: 880px){ .responsive #top #wrap_all .slide-entry{width: 100%; margin-left: 0; margin-bottom: 2rem;} #top .read-more-link a{margin-bottom: 2rem;} } /* Single Post */ #top .fullsize .template-blog .post .entry-content-wrapper > * {max-width: 100%;} #top .fullsize .template-blog .post .entry-content-wrapper{max-width: 1200px} #top .fullsize .template-blog .big-preview img {max-width: 1200px; max-height: 500px; object-fit: cover; margin-left: auto; margin-right: auto;} #top .fullsize .template-blog .post-title{font-size: var(--step-4);} #top .fullsize .template-blog h2, #top .fullsize .template-blog h3{margin-top: 60px;} #top .fullsize .template-blog .text-sep, #top .fullsize .template-blog .blog-categories, #top .fullsize .template-blog .blog-author{display: none;} #top .fullsize .template-blog .post-meta-infos{font-size: var(--step-0);} #top .fullsize .template-blog .post-meta-infos .minor-meta{color: var(--main)} /* ======================================================================================================================================= Contact Form Formidable ======================================================================================================================================= */ .frm_style_formidable-style.with_frm_style .frm_compact .frm_dropzone.dz-clickable .dz-message, .frm_style_formidable-style.with_frm_style input[type=submit], .frm_style_formidable-style.with_frm_style .frm_submit input[type=button], .frm_style_formidable-style.with_frm_style .frm_submit button, .frm_form_submit_style, .frm_style_formidable-style.with_frm_style .frm-edit-page-btn{text-transform: uppercase; border-radius: 0; font-weight: 500; padding: 15px 25px; background: transparent; border: 3px solid var(--main); margin-top: 40px; font-family: 'Jost'; font-size: var(--step-0); transition: color 0.2s ease; box-shadow: none;} .frm_style_formidable-style.with_frm_style .frm-edit-page-btn:hover, .frm_style_formidable-style.with_frm_style input[type=submit]:hover, .frm_style_formidable-style.with_frm_style .frm_submit input[type=button]:hover, .frm_style_formidable-style.with_frm_style .frm_submit button:hover { background: inherit; border: 3px solid var(--main); color: var(--main); } #top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select{ padding: 1em; border-radius: 0px; border: 2px solid #fff !important; color: #fff !important; font-size: var(--step-0); margin-bottom: 0px; background-color: transparent !important; font-family: 'Jost', sans-serif; } #top label{color: #fff; font-family: 'Jost'; font-size: 16px; font-weight: 500;} #top label span.frm_required{color: var(--main); font-size: var(--step--1);} .frm_style_formidable-style.with_frm_style .frm_error, .frm_style_formidable-style.with_frm_style .frm_limit_error {color: var(--main)} .with_frm_style .frm_message, .frm_success_style { margin: 10px; border: 2px solid var(--main); background-color: transparent; color: #fff; border-radius: 0; font-size: var(--step-0); font-family: 'Jost'; margin: 0; } .with_frm_style .frm_message p{color: #fff; margin: 0;} /* ======================================================================================================================================= Footer ======================================================================================================================================= */ #socket span{font-size: var(--step--1); font-weight: 300}