/****************************************************************** Theme Name: Headfirst Showcases 2026 Description: This site was built using the Bones Development Theme. For more information about Bones or to view documentation, you can visit the Bones Issues page on Github. You'll want to customize this for your clients with your own information. Author: Scott Reston Author URI: http://scottreston.com Version: .1 Tags: flexible-width, translation-ready, microformats, rtl-language-support License: WTFPL License URI: http://sam.zoy.org/wtfpl/ Are You Serious? Yes. ******************************************************************/ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ul { list-style: none; } ol {list-style: decimal;} ol li ol {list-style: lower-latin;} blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; vertical-align: middle; } em {font-style: italic;} html { scroll-behavior: smooth; scroll-padding-top: 200px!important; } body { background-color: #f5f5f5; font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.4; letter-spacing: .5px; margin-top: 100px; color: #565351;} @media (min-width: 1200px) { body {margin-top: 132px} } /* Custom, iPhone 6 */ a, a:focus { text-decoration: none; color: #BE1E2D; } a:hover { text-decoration: none; color: #999; } a:focus { outline: none; outline: none; outline-offset: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, h7, p { margin-bottom: 5px; line-height: 1.2;} h2, h3, h4, h5, h6, h7, .saira { font-family: 'Saira', sans-serif !important;} /* Headings - reduced by ~20% */ h1 { font-size: 36px;} h2 { font-size: 40px;} h3, .h3 {font-size: 28px;} h4, .h4 { font-size: 24px;} h5 { font-size: 20px;} h6 {font-size: 22px;} p {font-size: 16px; line-height: 1.4; font-weight: 400; font-family: 'DM Sans', sans-serif;} blockquote { padding: 0; margin: 30px 40px; font-size: 24px; line-height: 38px; border: none; position: relative; font-style: italic; } blockquote:before {content:'“'; font-size: 102px; position: absolute; left: -48px; top: 20px; font-weight: 600; font-style: normal;} blockquote em {text-transform: uppercase; font-size: 13px; line-height: 16px; display: inline-block; margin: 10px 25px 0px 0; border-bottom: 5px solid #BE1E2D; font-weight: 600; font-style: normal; padding-bottom: 5px; width: auto; } blockquote:after {content: '';clear: both;} hr.short {width: 50%!important; margin-left: 0; margin-bottom: 32px; border-top: 1px solid #ccc;} @media (min-width: 768px) { h1 { font-size: 48px;} h2 { font-size: 44px;} h3, .h3 {font-size: 32px;} h4, .h4 { font-size: 30px;} h5 { font-size: 20px;} h6 {font-size: 24px;} } @media (min-width: 992px) { h1 { font-size: 52px;} h2 { font-size: 44px;} h3, .h3 {font-size: 32px;} h4, .h4 { font-size: 30px;} h5 { font-size: 20px;} h6 {font-size: 24px;} } .bg-blue {background-color: #2C2E72} .bg-red {background-color: #BE1E2D} .bg-org {background-color: #F48020} .bg-gray {background-color: #565351} .bg-mdblue {background-color: #32627A} .bg-cyan {background-color: #45BFEE} .bg-ltgreen {background-color: #B8DCB1} .bg-ltorg {background-color: #F1BD95} .bg-ltgray {background-color: #E2E2E2} .bg-white {background-color: #fff!important;} .text-white {color: #fff!important;} .container-fluid {background: transparent;} .test { background: yellow;} .border-top {border-top: 1px solid #5f5c5c} .mobile-only {display: none;} .desktop-only {display: block;} .bg-top .hero-tear-gradient {background-position-y: top !important;} .bg-center .hero-tear-gradient {background-position-y: center !important;} .bg-bottom .hero-tear-gradient {background-position-y: bottom !important;} /* BUTTONS ---------------------------------------------*/ .header-btn {padding: 5px 10px; background: #BE1E2D; color: #fff; font-size: 12px; text-transform: uppercase; font-weight: 600; display: inline-block; margin-right: 20px; margin-top: 5px; } .btn, .btn:focus { font-family: 'Saira', sans-serif !important; display: inline-block; position: relative; text-transform: uppercase; font-weight: 530; color: #fff; font-size: 16px; line-height: 1; letter-spacing: 1px; font-family: 'Saira'; border: 0; border-radius: 25px; margin: 20px 0; padding: 12px 30px } .btn:active, .btn.active { -webkit-box-shadow: none; box-shadow: none;} .btn-white { background-color: #fff; color: #2C2E72;} .btn-white:hover { background-color: #fff; color: #BE1E2D;} .btn-red, .btn-gray:hover { background-color: #BE1E2D; color: #fff;} .btn-gray { background-color: #2C2E72; color: #fff;} .btn:hover { color: #fff;} .btn-red:hover { background-color: #2C2E72; color: #fff} .btn-ltblue {background-color: #32627A;} .btn-ltblue:hover { background-color: #BE1E2D; color: #fff;} .btn-lg { font-size: 22px; padding: 15px 30px} .btn-xs { font-size: 18px; } .dual-buttons { margin-top: 30px; } .button-col { margin-top: 15px; } @media screen and (min-width: 992px) { .dual-buttons { display: flex; } .button-col + .button-col { margin-left: 15px; } } .button-std, .button-std:focus, .button-std:active { font-family: 'Saira', sans-serif; padding: 13px 24px; display: inline-block; background: #BE1E2D; color: #fff; font-size: 14px; line-height: 1; text-transform: uppercase; font-weight: 500; position: relative; border-radius: 25px; letter-spacing: 1px; margin-bottom: 15px; } .button-std:hover { background: #565351; color: #fff; } @media (min-width: 992px) { .button-std, .button-std:focus, .button-std:active {padding: 15px 32px; font-size: 16px;} } /* RESET BOOTSTRAP BREAKPOINT TO COLLAPSE BELOW 992PX --------------------------- --------------------------- */ @media (max-width: 991px) { /* Adjust to your desired collapse width - 1px */ .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; padding: 30px; margin-top: 15px;} .navbar-nav > li { float: none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display: block !important; background-color: #fff;} .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } @media (min-width: 992px) { /* Adjust to your desired non-collapsed width */ .navbar-header { float: left; } .navbar-collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; visibility: visible !important; } .navbar-static-top .navbar-collapse { padding-right: 0; padding-left: 0; } } /* STYLES THAT CARRY OVER THROUGH MOBILE --------------------------- --------------------------- */ .navbar {margin-bottom: 0; border-radius: 0; border: 0;} .navbar .container {padding-left: 0; padding-right: 0; background: #fff; height: 100px;} .navbar-brand img {width: 195px; margin-left: 25px;} .navbar-nav {background: #fff;} .navbar-nav > li {font-size: 14px; font-family: 'Saira', sans-serif !important; line-height: 1 !important; text-transform: uppercase; font-weight: 530;} .navbar-nav > li > a { padding: 15px 10px; color: #2C2E72; } .navbar-nav > li.current-menu-item a { color: #BE1E2D;} .navbar-nav > li.nav-cta { font-size: 18px !important;} .nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background-color: transparent;} .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 0; border-top: 0; border-right: 0; border-left: 0; position: relative; width: 15px; height: 10px; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"%3E%3Cpath fill="%230E0778" d="M0 0l5 6 5-6z"/%3E%3C/svg%3E') !important; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } .navbar-nav > li > .dropdown-menu li a {text-transform: none; font-size: 14px; padding: 10px 0} .navbar-nav > li > .dropdown-menu li a:hover, .navbar-nav > li > .dropdown-menu li.active a {color: #BE1E2D; background: transparent;} .navbar-toggle { margin-top: 33px; margin-right: 25px; } .navbar-toggle .icon-bar { background-color: #BE1E2D; } /* THIS STARTS FULL MENU DISPLAY, SIZE LG --------------------------- --------------------------- */ @media (min-width: 992px) { #bs-example-navbar-collapse-1 { margin-left: auto; margin-right: 0} .navbar-toggle {display: none;} .navbar-nav {margin: 25px; float: right;} .navbar-nav > li > .dropdown-menu { margin-top: -7px; border-radius: 0!important; border-top: 6px solid #BE1E2D; } .navbar-nav > li > .dropdown-menu { padding: 5px; } .navbar-nav > li > .dropdown-menu li a {border-bottom: 1px solid #ccc;} .navbar-nav > li > .dropdown-menu li:last-child a {border-bottom: none; } } /* MAKE LOGO LARGER --------------------------- --------------------------- */ @media (min-width: 1200px) { .navbar .container {height: 132px; } .navbar-nav {margin-top: 42px; } .navbar-brand img {width: 295px; margin-left: 30px;} } /* START DISPLAYING CTA BUTTON --------------------------- --------------------------- */ @media (min-width: 1400px) { .navbar-nav {margin-bottom: 0;} .navbar-nav > li.nav-cta {margin-left: 20px; top: 5px} li.nav-cta a {background: #BE1E2D; color: #fff; border-radius: 25px; padding: 10px 30px; font-size: 18px; } li.nav-cta a:hover {background: #2C2E72; color: #fff} } /* lower header below WP admin bar when logged in */ .admin-bar .navbar-fixed-top {top: 46px;} @media (min-width: 783px) { .admin-bar .navbar-fixed-top {top: 32px;} } /* FOOTER ---------------------------------------------*/ #footer .container {background: #565351; color: #fff; padding: 60px 15px 20px 15px;} #footer h5 {font-size: 20px; margin-bottom: 15px;} #footer .footer-nav li { font-size: 15px; padding-bottom: 10px;} #footer .footer-nav li a, #copyright a {color: #fff;} #footer .footer-nav li a:hover, #copyright a:hover {color: #E2E2E2} #copyright .container {background: #565351; color: #fff; font-size: 10px; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase;} #footer hr {border-top-color: rgba(255,255,255,.5); width: 50%; margin-left: auto; margin-right: auto;} #footer .btn:hover {color: #BE1E2D!important;} #footer h5.footer-mailing-list { margin: 0; line-height: 1.4;} .footer-logo {width: 150px; height: auto; margin: 0 auto;} .social-icons img {width: 25px; height: 25px; margin-left: 6px;} .social-icons img.first {margin-left: 0;} .social-icons a:hover {opacity: .75;} #footer .footer-1, #footer .footer-2, #footer .footer-3, #footer .footer-4 { margin-bottom: 35px; } #footer .footer-2, #footer .footer-3, #footer .footer-4, .copyright-text { text-align: center} @media (min-width: 992px) { #footer h5.footer-mailing-list { margin: 0 40px 0 0;} #footer .footer-2, #footer .footer-3, #footer .footer-4, .copyright-text { text-align: left} } @media (min-width: 1200px) { .footer-logo {width: 200px;} #footer .footer-2, #footer .footer-3, #footer .footer-4 { margin-bottom: 0; } #footer hr {margin-left: 0;} } /* BOOTSTRAP & WP THINGS --------*/ .alignleft {float: left; margin: 0 20px 20px 0;} .alignright {float: right; margin: 0 0 20px 20px;} .alignnone {float: none; margin: 0 0 20px 0;} .container-fluid { padding-left: 0; padding-right: 0} .container {padding-left: 25px; padding-right: 25px} .clickable { cursor: pointer; } /* make modals work on mobile */ p.lead {font-size: 20px!important; line-height: 28px!important;} .d-none {display: none!important;} .mx-0 {margin-right: 0 !important;margin-left: 0 !important;}.mx-1 {margin-right: 0.25rem !important;margin-left: 0.25rem !important;}.mx-2 {margin-right: 0.5rem !important;margin-left: 0.5rem !important;}.mx-3 {margin-right: 1rem !important;margin-left: 1rem !important;}.mx-4 {margin-right: 1.5rem !important;margin-left: 1.5rem !important;}.mx-5 {margin-right: 3rem !important;margin-left: 3rem !important;}.mx-auto {margin-right: auto !important;margin-left: auto !important;}.my-0 {margin-top: 0 !important;margin-bottom: 0 !important;}.my-1 {margin-top: 0.25rem !important;margin-bottom: 0.25rem !important;}.my-2 {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important;}.my-3 {margin-top: 1rem !important;margin-bottom: 1rem !important;}.my-4 {margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}.my-5 {margin-top: 3rem !important;margin-bottom: 3rem !important;}.my-auto {margin-top: auto !important;margin-bottom: auto !important;}.mt-0 {margin-top: 0 !important;}.mt-1 {margin-top: 0.25rem !important;}.mt-2 {margin-top: 0.5rem !important;}.mt-3 {margin-top: 1rem !important;}.mt-4 {margin-top: 1.5rem !important;}.mt-5 {margin-top: 3rem !important;}.mt-auto {margin-top: auto !important;}.me-0 {margin-right: 0 !important;}.me-1 {margin-right: 0.25rem !important;}.me-2 {margin-right: 0.5rem !important;}.me-3 {margin-right: 1rem !important;}.me-4 {margin-right: 1.5rem !important;}.me-5 {margin-right: 3rem !important;}.me-auto {margin-right: auto !important;}.mb-0 {margin-bottom: 0 !important;}.mb-1 {margin-bottom: 0.25rem !important;}.mb-2 {margin-bottom: 0.5rem !important;}.mb-3 {margin-bottom: 1rem !important;}.mb-4 {margin-bottom: 1.5rem !important;}.mb-5 {margin-bottom: 3rem !important;}.mb-auto {margin-bottom: auto !important;}.ms-0 {margin-left: 0 !important;}.ms-1 {margin-left: 0.25rem !important;}.ms-2 {margin-left: 0.5rem !important;}.ms-3 {margin-left: 1rem !important;}.ms-4 {margin-left: 1.5rem !important;}.ms-5 {margin-left: 3rem !important;}.ms-auto {margin-left: auto !important;}.p-0 {padding: 0 !important;}.p-1 {padding: 0.25rem !important;}.p-2 {padding: 0.5rem !important;}.p-3 {padding: 1rem !important;}.p-4 {padding: 1.5rem !important;}.p-5 {padding: 3rem !important;}.px-0 {padding-right: 0 !important;padding-left: 0 !important;}.px-1 {padding-right: 0.25rem !important;padding-left: 0.25rem !important;}.px-2 {padding-right: 0.5rem !important;padding-left: 0.5rem !important;}.px-3 {padding-right: 1rem !important;padding-left: 1rem !important;}.px-4 {padding-right: 1.5rem !important;padding-left: 1.5rem !important;}.px-5 {padding-right: 3rem !important;padding-left: 3rem !important;}.py-0 {padding-top: 0 !important;padding-bottom: 0 !important;}.py-1 {padding-top: 0.25rem !important;padding-bottom: 0.25rem !important;}.py-2 {padding-top: 0.5rem !important;padding-bottom: 0.5rem !important;}.py-3 {padding-top: 1rem !important;padding-bottom: 1rem !important;}.py-4 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important;}.py-5 {padding-top: 3rem !important;padding-bottom: 3rem !important;}.pt-0 {padding-top: 0 !important;}.pt-1 {padding-top: 0.25rem !important;}.pt-2 {padding-top: 0.5rem !important;}.pt-3 {padding-top: 1rem !important;}.pt-4 {padding-top: 1.5rem !important;}.pt-5 {padding-top: 3rem !important;}.pe-0 {padding-right: 0 !important;}.pe-1 {padding-right: 0.25rem !important;}.pe-2 {padding-right: 0.5rem !important;}.pe-3 {padding-right: 1rem !important;}.pe-4 {padding-right: 1.5rem !important;}.pe-5 {padding-right: 3rem !important;}.pb-0 {padding-bottom: 0 !important;}.pb-1 {padding-bottom: 0.25rem !important;}.pb-2 {padding-bottom: 0.5rem !important;}.pb-3 {padding-bottom: 1rem !important;}.pb-4 {padding-bottom: 1.5rem !important;}.pb-5 {padding-bottom: 3rem !important;}.ps-0 {padding-left: 0 !important;}.ps-1 {padding-left: 0.25rem !important;}.ps-2 {padding-left: 0.5rem !important;}.ps-3 {padding-left: 1rem !important;}.ps-4 {padding-left: 1.5rem !important;}.ps-5 {padding-left: 3rem !important;}@media (min-width: 992px) {.d-lg-none {display: none !important}.d-lg-block {display: block !important;}} @media (min-width: 1200px) {.d-xl-none {display: none !important}.d-xl-block {display: block !important;}} @media (min-width: 1400px) {.d-xxl-none {display: none !important}.d-xxl-block {display: block !important;}}.h-100 { height: 100% !important;}.w-100 { width: 100% !important;} /* add some bootstrap 4 styles for flex */ .d-flex {display: -ms-flexbox !important;display: flex !important;}.align-items-center {-ms-flex-align: center !important;align-items: center !important;}.justify-content-center {-ms-flex-pack: center !important;justify-content: center !important;} /* bootrap 5 col xl and offsets */ .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;}@media (min-width:1400px) {.container {width: 1320px }.col-xl-1 {width: 8.33333333%;}.col-xl-2 {width: 16.66666667%;}.col-xl-3 {width: 25%;}.col-xl-4 {width: 33.33333333%;}.col-xl-5 {width: 41.66666667%;}.col-xl-6 {width: 50%;}.col-xl-7 {width: 58.33333333%;}.col-xl-8 {width: 66.66666667%;}.col-xl-9 {width: 75%;}.col-xl-10 {width: 83.33333333%;}.col-xl-11 {width: 91.66666667%;}.col-xl-12 {width: 100%;}.offset-xl-0 {margin-left: 0;}.offset-xl-1 {margin-left: 8.33333333%;}.offset-xl-2 {margin-left: 16.66666667%;}.offset-xl-3 {margin-left: 25%;}.offset-xl-4 {margin-left: 33.33333333%;}.offset-xl-5 {margin-left: 41.66666667%;}.offset-xl-6 {margin-left: 50%;}.offset-xl-7 {margin-left: 58.33333333%;}.offset-xl-8 {margin-left: 66.66666667%;}.offset-xl-9 {margin-left: 75%;}.offset-xl-10 {margin-left: 83.33333333%;}.offset-xl-11 {margin-left: 91.66666667%;}} /* GENERAL TABLEPRESS OVERRIDES ---------------------------------------------*/ .tablepress thead th { font-size: 13px; line-height: 1; font-weight: 600; background: transparent!important; padding-left: 20px; color: #565351; vertical-align: bottom;} .tablepress thead th:hover {background: transparent!important; color: #BE1E2D;} /* edit search box & text */ .dataTables_filter {padding: 20px 0px; font-family: Helvetica; font-weight: 400; text-transform: uppercase; color: #999;} .dataTables_filter input { color: #BE1E2D; background-color: #fff; padding: 10px; border: 1px solid #ccc; } /* DOCUMENTATION ---------------------------------------------*/ body.page-id-1457 .subnav-and-text img { width: 80%; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.25) } body.page-id-1457 .subnav ul li a {text-transform: none!important; color: #565351; padding: 4px 0!important;} body.page-id-1457 .subnav ul li a:hover {color: #565351;} body.page-id-1457 h3 {color: #BE1E2D!important; margin-bottom: 15px!important;} img.shadow {} .alignnone { margin-top: 20px;} /* FORM ASSEMBLY BUTTON TEXT COLOR OVERRIDE */ input#submit_button, input.primaryAction[type="submit"] {color: #000!important;} /* ------------- YOKO CO MODS -------------- */ .site-styles h1 { font-family: 'Saira', sans-serif; font-size: 80px; line-height: 64px; text-transform: uppercase; color: #fff; font-weight: 600; } .site-styles h2 { font-family: 'Saira', sans-serif; color: #fff; text-transform: none; font-size: 50px; font-weight: 700; line-height: 38px; text-shadow: 2px 2px 0px black; } @media screen and (max-width: 767px) { .site-styles h1 { font-size: 50px; line-height: 46px; } .site-styles h2 { font-size: 24px; line-height: 34px; } } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { .nopad { padding-top: 0; padding-bottom: 0;} .nopadwidth {padding-left: 0; padding-right: 0;} section {margin-top: 95px;} } /* Extra Small Devices, Phones - if need breakpoint for iphone plus use 414px */ @media only screen and (max-width : 480px) { blockquote {font-size: 18px; line-height: 24px; margin-right: 10px;} } /* LISTS WITH ICONS --------------------------- --------------------------- */ .checklist ul, ul.checklist, .xlist ul, ul.xlist { margin: 30px 0px 0px 0;; } .checklist ul li, ul.checklist li, .xlist ul li, ul.xlist li {font-size: 16px; line-height: 1.4; list-style: none; margin: 25px 0px 25px 35px; position: relative; font-weight: 550;} .checklist ul li:before, ul.checklist li:before, .xlist ul li:before, ul.xlist li:before {content: ''; position: absolute; left: -35px; top: -1px; width: 25px; height: 25px; background-size: cover;} .checklist ul li:before, ul.checklist li:before { background: url(_images/Icon-GreenCheck.svg) no-repeat center center;} .xlist ul li:before, ul.xlist li:before {background: url(_images/Icon-RedX.svg) no-repeat center center;} @media (min-width: 992px) { .checklist ul li, ul.checklist li, .xlist ul li, ul.xlist li {font-size: 18px; margin: 25px 0px 25px 50px;} .checklist ul li:before, ul.checklist li:before, .xlist ul li:before, ul.xlist li:before {content: ''; position: absolute; left: -50px; top: -4px; width: 40px; height: 40px; background-size: cover;} } /* 1, 2 or 3 COLUMNS --------------------------- --------------------------- */ .columns .container { background: #fff; padding-top: 35px; padding-bottom: 35px; } .columns table {margin-top: 30px;} @media (min-width: 992px) { .columns .container { background: #fff; padding: 50px; } } /* SENJA --------------------------- --------------------------- */ .senja .container {background: #fff; padding: 50px;} /* SECTION HEADER (RED BANNER WITH HASHES ON BOTTOM & TEXT FIELD) --------------------------- --------------------------- */ .section-header .container {padding-top: 40px; padding-bottom: 40px; position: relative; overflow-x: hidden;} .section-header .container:after { content:''; position: absolute; bottom: 0; left: 50px; width: 100%; height: 17px!important; background-image: url(_images/HF-Showcase-HashWhite-white.svg); background-repeat: repeat-x; background-position: bottom left; background-size: 200%; z-index: 1;} .section-header-text {font-size: 34px; line-height: 1; text-transform: uppercase; font-weight: 600; margin: 0 25px;} @media (min-width: 992px) { .section-header-text {font-size: 42px;} } @media (min-width: 1200px) { .section-header-text {font-size: 50px;} } /* HERO LANDING --------------------------- --------------------------- */ .hero-landing .container { z-index: 3; background-repeat: no-repeat; position: relative; overflow: hidden;} .hero-landing .button {margin-right: 10px; display: inline-block;} .hero-landing {position: relative; overflow: hidden;} .hero-landing h1, .hero-landing h6 { font-family: 'Saira', sans-serif; line-height: 1.2; color: #fff; font-weight: 600; } .hero-landing h6 {font-size: 18px; text-transform: uppercase; } /* home / taller version */ .hero-top .static-hero-content {padding: 40px 0 40px 25px; } .hero-top .container {background-position: top left; background-size: cover;} .hero-landing.home-hero-banner .container.hero-tear-gradient {overflow: hidden;} .hero-landing.home-hero-banner .container.hero-tear-gradient:before { content: ''; width: 100%; height: 800px; background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url(_images/tear-corner-bottom-right-flip.png) ; background-repeat: no-repeat, no-repeat; background-position: center center, bottom left; background-size: auto, contain; position: absolute; bottom: 0; left: 0; z-index: 2; } .hero-landing.home-hero-banner .container.hero-tear-gradient:after { content:''; position: absolute; bottom: 0; right: 0; width: 80%; height: 150px!important; background: url(_images/HF-Showcase-HashWhite-edited.svg) no-repeat bottom left; background-size: 400%; z-index: 1; } /* interior / shorter version */ .hero-landing.interior-hero-banner .container.hero-tear-gradient:before { content: ''; width: 100%; height: 800px; background-color: rgba(0,0,0,0.5); background-repeat: no-repeat; background-position: center center; position: absolute; bottom: 0; left: 0; z-index: 0; } .hero-landing.interior-hero-banner .container.hero-tear-gradient:after { content:''; position: absolute; bottom: 0; right: 0; width: 80%; height: 70px!important; background: url(_images/HF-Showcase-HashWhite-edited.svg) no-repeat bottom left; background-size: 400%; z-index: 1; } /* footer / blue version */ .hero-footer .static-hero-content { padding: 40px 25px; text-align: center;} .hero-footer .container {background-position: center right; background-size: contain; } .hero-footer .hero-slashes { background-color: #45BFEE; overflow: hidden; } .hero-footer .hero-slashes:before { content:''; position: absolute; top: 50%; transform: translateY(-50%); bottom: 0; left: 0; width: 100%; height: 60%!important; background: url(_images/HF-Showcase-HashWhite.svg) repeat-x center left; background-size: cover; z-index: 1; } .hero-footer h1, .hero-footer h6 { text-transform: uppercase; color: #000; } .hero-footer h1 {font-size: 34px;} /* session hero (takes style from hero-landing) */ .hero-session .container {background-position: top left; background-size: cover;} .hero-session .static-hero-content { padding: 40px 25px; text-align: center;} .hero-session h1 span {display: block; color: #fff;} .static-hero-content { z-index: 3; position: relative; } .static-hero-content p { color: #fff; font-size: 18px; margin-top: 10px; } @media (min-width: 576px) { .hero-footer.has-breakpoint-images .static-hero-content { text-align: left; margin-right: 32%;} } @media (min-width: 768px) { .hero-footer .static-hero-content, .hero-footer.has-breakpoint-images .static-hero-content, .hero-session .static-hero-content { text-align: left; margin-right: 0;} } @media (min-width: 992px) { .hero-top .static-hero-content { padding: 80px 0 80px 25px;} .hero-landing.home-hero-banner .container.hero-tear-gradient { background-position: left top} .hero-landing.home-hero-banner .container.hero-tear-gradient:before {background-image: linear-gradient(90deg, rgba(0,0,0,0.75) 16%, rgba(0,0,0,0) 100%), url(_images/tear-corner-bottom-right-flip.png) ;} .hero-landing.interior-hero-banner .static-hero-content {padding: 65px 0 65px 50px;} .hero-landing.interior-hero-banner .container.hero-tear-gradient:before { background-color: linear-gradient(90deg, rgba(0,0,0,0.75) 16%);} .hero-footer .static-hero-content { padding: 60px 0 60px 25px;} .hero-footer .hero-slashes:before { height: 50%!important; background-size: 120%;} .hero-footer h1, .hero-footer h6 {margin-right: 10%} .hero-footer h1 {font-size: 40px;} .hero-session .static-hero-content { padding: 80px 50px;} .static-hero-content p { font-size: 22px;} } @media (min-width: 1200px) { .hero-top .static-hero-content { padding: 120px 0 120px 25px;} .hero-footer .static-hero-content { padding: 60px 0 60px 25px;} .hero-session .static-hero-content { padding: 120px 0 120px 25px;} } /* EVERY HEADFIRST CAMP INCLUDES - SESSION PAGE ---------------------------------------------*/ .every-camp-includes .container { padding-top: 35px; padding-bottom: 35px; } .every-camp-includes h3 { font-size: 40px; line-height: 1; font-weight: 600; color: #2C2E72; margin-bottom: 10px; text-align: center; } .every-camp-includes h4 { color: #2C2E72; text-transform: none; text-align: center; } .every-camp-includes ul { list-style-type: none; margin: 30px 0px 0px; font-size: 16px; line-height: 24px; } .every-camp-includes ul li { margin: 25px 0px 25px 50px; position: relative; font-size: 18px; line-height: 1.2; font-weight: 500; } .every-camp-includes ul li:before {content: ''; position: absolute; left: -50px; top: -4px; width: 40px; height: 40px; background: url(_images/Icon-GreenCheck.svg) no-repeat center center; background-size: cover;} @media (min-width: 992px) { .every-camp-includes .container { padding: 50px; } .every-camp-includes h3 {font-size: 60px;} .every-camp-includes h3, .every-camp-includes h4 {text-align: left;} .every-camp-includes ul li { font-size: 20px; font-weight: 550; } } /* SESSION DETAILS & ENROLL BUTTON BLOCK - SESSION PAGE ---------------------------------------------*/ #session-details-enroll, #seo-landing, #schedule-landing h3 {text-align: center;} #session-details-enroll .container {padding-top: 30px; padding-bottom: 30px; background: #fff; border-bottom: 1px solid #e8e8e8;} #session-details-enroll h3 {font-size: 38px; font-weight: 600; color: #BE1E2D; margin-bottom: 10px;} #session-details-enroll p {font-size: 24px; line-height: 24px; padding-bottom: 5px;} #session-details-enroll p span {display: block; font-size: 24px; line-height: 24px; padding-bottom: 8px;} #session-details-enroll h3 { font-size: 26px; display: inline-block; padding-right: 10px; } #session-details-enroll p.dates { display: inline-block; font-size: 18px; } #session-details-enroll .venue { border-top: 1px solid #ddd; padding-top: 15px; margin-top: 5px; } #session-details-enroll p, #session-details-enroll p span { font-size: 18px; line-height: 22px; } #session-details-enroll .cost { margin-top: 10px; font-weight: 600; color: #BE1E2D; } @media (min-width: 768px) { #session-details-enroll, #seo-landing, #schedule-landing h3 {text-align: left;} } @media (min-width: 992px) { #session-details-enroll .container { padding: 40px 50px; } } /* COACHES SCROLLING LOGOS - SESSION PAGE ---------------------------------------------*/ #coaches-scroll .container {padding: 30px 20px; background: #fff;} #coaches-scroll h3 {font-weight: 600; margin-top: 30px;} #coaches-scroll.two-lines h3 {margin-top: 10px!important; font-size: 30px;} #webTicker img {max-height: 80px;padding-right: 40px!important;} /* Medium Devices, Desktops */ @media only screen and (max-width : 991px) { #coaches-scroll h3 {margin-top: 0;} #coaches-scroll {text-align: center;} } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { #coaches-scroll .container {padding: 20px 0;} } /* COACHES FEATURED LIST - COACHES LANDING PAGE ---------------------------------------------*/ #featured-coaches .container {position: relative; padding-top: 35px; padding-bottom: 35px; background: #fff;} #featured-coaches h6 {font-weight: 600; border-bottom: 3px solid #BE1E2D; padding-bottom: 8px; display: inline-block} .about-ranking-agency p.lead, .about-ranking-agency p {font-size: 16px; line-height: 24px;} img.ranking-agency {padding: 10px 0 20px 0;} .tablepress.featured-coaches { margin-top: 10px; margin-bottom: 0; margin-right: 50px;} .tablepress.featured-coaches img {max-width: 100%; height: auto; max-height: 50px;} .tablepress.featured-coaches tbody td {text-align: center; padding: 0 0 20px 0; border: 0;} @media (min-width: 992px) { #featured-coaches .container {padding: 50px;} } /* SESSION TRAVEL & ACCOMMODATIONS / SCHEDULE / POLICIES BLOCK - SESSION PAGE ---------------------------------------------*/ #session-logistics .container {background: #2C2E72; text-align: center; } #session-logistics img {margin-bottom: 30px;} #session-logistics a .h3 {color: #fff; font-size: 22px; text-transform: none; margin: 0 25px;} #session-logistics a:hover .h3 {color: #E2E2E2;} #session-logistics a:hover img {opacity: .75;} #session-logistics .logistics-col { padding: 40px 0;} #session-logistics .travel { margin: 20px 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff;} #session-logistics img.logistics-icon {width: 90px; height: auto;} @media (min-width: 992px) { #session-logistics .travel {border: 0; border-left: 1px solid #fff; border-right: 1px solid #fff; } #session-logistics a .h3 { font-size: 30px;} } /* SESSION PAGE ---------------------------------------------*/ .session-details-box { font-size: 18px; line-height: 24px; color: #fff; } .session-detail-date { font-size: 26px; font-weight: 700; margin-bottom: 10px; } .session-detail-cost { margin-top: 10px; font-weight: 700; display: inline-block; background: #565351; padding: 5px 8px; border-radius: 3px; } @media screen and (min-width: 768px) { #session-hero img { max-height: 360px; width: 100%; object-fit: cover; opacity: 0.5; } } /* MYOM TAGLINE + SEO BLOCK ---------------------------------------------*/ #tagline-seo .container {background: #565351 url(_images/bg-cta-slant-left-red.svg) right -454px top no-repeat; background-size: cover; padding-top: 30px; padding-bottom: 30px;} #tagline-seo h1 {color: #fff; font-size: 16px; line-height: 24px; font-weight: 400; margin-left: 10px; margin-right: 25px; } #tagline-seo h1 strong {display: block; margin-top: 10px; font-weight: 400;} #tagline-seo h1 strong.tagline { color: #BE1E2D;} #tagline-seo img { width: 100%; height: auto; margin: 6px auto 0 auto} #tagline-seo a { padding: 15px 30px; display: inline-block; background: #BE1E2D; color: #fff; font-size: 18px; text-transform: uppercase; font-weight: 700; border-left: 8px solid #fff; transition: background 0.5s; position: relative; overflow: hidden;clip-path: polygon(0% 0%, 90% 0, 100% 32%, 100% 100%, 0% 100%); margin: 15px 10px 0 10px; } #tagline-seo a:hover { background: #565351; color: #fff; } @media (min-width: 768px) { #tagline-seo img {max-width: 350px;} } /* ------------- YOKO CO MODS -------------- */ #tagline-seo .container { background: #565351; padding-top: 50px; padding-bottom: 60px; border-top: 1px solid #565351; border-bottom: 1px solid #565351; } #tagline-seo h1 { font-size: 18px; line-height: 28px; } /* VIDEO - HOME & LANDING PAGES ---------------------------------------------*/ #video-block .container {padding: 10px; background: #000} @media (min-width: 768px) { #video-block .container {padding: 40px 25px;} } /* FAQS ---------------------------------------------*/ .question { margin-bottom: 20px; display: block; margin-right: 10%; position: relative;} .question h6 {text-transform: none!important; font-size: 18px; line-height: 1.3; font-weight: 400!important; } .question h6 a { color: #565351} .question h6 a:before {content:'//'; font-weight: 500; margin-right: 5px; color: #BE1E2D ; position: absolute; left: -20px; } .question h6 a:hover { color: #BE1E2D;} .question h6 a:hover:before { color: #565351;} h6.faq-open { color: #BE1E2D!important;} /* TEAM ----------------------------------------*/ #team {background: #000; padding: 0!important; margin-top: 0; margin-bottom: 0;} .bio-column { padding: 0!important; margin: 0!important;} #redshirts {padding: 30px 0; background: #000;} ul.team-list li {font-size: 38px; line-height: 42px; font-weight: 600; font-family: 'Saira'; text-transform: uppercase; padding-bottom: 10px; letter-spacing: 1px;} ul.team-list li a {color: #fff;} ul.team-list li a:hover {color: #BE1E2D;} /* team sqaures */ .bio-square {height: 300px; background-size: cover; background-position: top; text-align: center; position: relative;} .bio-content-wrap {position: absolute; top: 220px; left: 0; right: 0; width: 100%;} .bio-square h3 { color: rgba(255,255,255,1); font-size: 30px; line-height: 32px; text-transform: none; text-shadow: 0px 0px 3px rgba(0,0,0,1); font-weight: 700!important; letter-spacing: 0!important;} .bio-square h4 { margin: 0px 10px 0 10px!important; text-transform: uppercase; font-size: 12px; line-height: 14px; color: rgba(255,255,255,1); text-shadow: 1px 1px 4px rgba(0,0,0,1);} .bio-square h4.biolink {color: rgba(255,255,255,0)!important; text-shadow: none;} .bio-square:hover h4.biolink {color: rgba(255,255,255,1)!important; text-shadow: 1px 1px 1px rgba(0,0,0,1)} .bio-square:hover h4.title {display: none;} /* team bio modals */ .bio-modal .modal-content img { max-width: 250px; padding: 20px 0; display: block;} .bio-modal .modal-content { padding: 15px 40px 20px 40px;} .bio-modal .modal-content h2 {font-size: 36px; text-transform: none; margin-top: 0px!important; margin-bottom: 0px; font-weight: 700; letter-spacing: 0; } .bio-modal .modal-content h3 { text-transform: uppercase; font-size: 18px; margin: 8px 0 5px 0;} .bio-modal .modal-content p {margin-bottom: 15px;} .bio-modal .modal-content p strong { text-transform: uppercase; margin: 15px 0 0 0; display: block; font-weight: 700!important; color: #BE1E2D;} p.bio-text {padding-top: 10px!important;} /* ABOUT US PAGE ---------------------------------------------*/ ul.mlb {list-style: none; margin-left: 0!important;} ul.mlb li { min-height: 55px; font-family: 'Saira'; text-transform: uppercase; font-size: 24px; list-style: none; margin-left: 0; padding: 25px 0 25px 55px; background-repeat: no-repeat; background-size: 40px!important; background-position-y: 15px;} ul.mlb li.braves { background-image: url(_images/logos_camps_braves.png); } ul.mlb li.cubs { background-image: url(_images/logos_camps_cubs.png); } ul.mlb li.nats { background-image: url(_images/logos_camps_nats.png); } ul.mlb li.sox { background-image: url(_images/logos_camps_sox.png); } ul.mlb li.yankees { background-image: url(_images/logos_camps_yankees.png); } ul.mlb li.pirates { background-image: url(_images/logos_camps_pirates.png); background-size: 27px!important; background-position-x: 9px;} ul.mlb li.dc { background-image: url(_images/logos_camps_dc.jpg); } ul.mlb li.falcons { background-image: url(_images/logos_camps_falcons.jpg); } ul.mlb li a {color: #565351;} ul.mlb li a:hover {color: #BE1E2D;} /* DIFFERENCE - modeled after top96 block --------------------------- --------------------------- */ .difference .container {background: #fff; padding-top: 30px; padding-bottom: 10px;} .difference-intro h2 {margin-bottom: 10px; font-weight: 600; color: #2C2E72;font-size: 32px;} .difference-intro p {font-size: 20px; line-height: 1.4; margin-bottom: 30px;} .difference-text {border: 2px solid #B5B1B1; border-radius: 24px; padding: 30px;} .difference-text p, .difference-text ul li { font-size: 18px; line-height: 1.4; margin-bottom: 15px;} .difference-text ul li {position: relative; padding-left: 15px; margin-bottom: 8px;} .difference-text ul li:before {content:'•'; font-size: 22px; color: #BE1E2D; position: absolute; left: 0; top: -3px;} .difference-text h2, .difference-text h3, .difference-text h4, .difference-text h5, .difference-text h6 {color: #2C2E72; font-size: 24px; font-weight: 800; letter-spacing: -1%;} .difference-icon {width: 65px; margin-bottom: 10px;} .difference-text p a {color: #BE1E2D; display: block; position: relative; padding-left: 35px; font-weight: 500;} .difference-text p a:before {content: ''; position: absolute; left: 0; top: 0; width: 25px; height: 25px; background: url(_images/Icon-RightArrow-WhiteOnBlue.svg) no-repeat center center; background-size: cover;} .difference-text p a:hover {color: #2C2E72;} .difference.dark-mode .difference-text {background: #565351; color: #fff;} .difference.dark-mode .difference-text h2, .difference.dark-mode .difference-text h3, .difference.dark-mode .difference-text h4, .difference.dark-mode .difference-text h5, .difference.dark-mode .difference-text h6, .difference.dark-mode .difference-text p a {color: #fff;} .difference.dark-mode .difference-text p a:hover {color: #E2E2E2;} .difference-boxes-row { display: flex; flex-wrap: wrap; /* Allows columns to wrap on smaller screens */ } .difference-boxes-row .difference-col { display: flex; /* Ensures content inside the column stretches */ } @media (min-width: 992px) { .difference .container {padding: 50px 50px 10px 50px;} .difference-intro h2 {font-size: 40px;} .difference-intro p {font-size: 25px;} .difference-text p, .difference-text ul li { font-size: 20px;} .difference-text h6 {font-size: 30px;} } /* ACTIVITIES - modeled after top96 block --------------------------- --------------------------- */ .activities { } .activities .container {background: #fff; padding-top: 40px; padding-bottom: 0; text-align: center;} .activity-box-wrap {position: relative; height: 300px; overflow: hidden; border: 1px solid #ccc; margin-bottom: 25px; cursor: pointer; /* this makes hover event work on mobile */} /* square boxes used on homepage */ .activities.activities-square .activity-box-wrap {height: 350px;} .activity-box-text {position: absolute; top: 230px; background: #f1f1f1; z-index: 99; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease;} .activities.activities-square .activity-box-text {top: 280px;} .activity-box-wrap:hover, .activity-box-wrap:active, .activity-box-wrap:focus {box-shadow: 0 15px 25px 0 rgba(0,0,0,.15);} .activity-box-wrap:hover .activity-box-text, .activity-box-wrap:active .activity-box-text, .activity-box-wrap:focus .activity-box-text {top: 0!important;} .activity-box-wrap:hover h6, .activity-box-wrap:active h6 {color: #BE1E2D!important} .activity-box-header { background: #fff; width: 100%; height: 70px } .activity-box-text {min-height: 400px; width: 100%;} .activity-box-text p {text-align: left; margin: 15px 20px 20px 20px;} .activities h6 { font-weight: 700; line-height: 1.2; font-size: 20px; margin: 0 15px 5px 15px; text-transform: uppercase; } .activities.activities-square h6 { font-size: 18px; } .activities.activities-square .activity-box-text p {font-size: 16px; line-height: 22px;} .activities-intro {text-align: center; margin-bottom: 30px;} .activities-intro h3 {letter-spacing: 0; line-height: 1; font-weight: 700; margin-bottom: 20px;} @media (min-width: 768px) { .activities-intro {text-align: left; margin-bottom: 0;} } @media (min-width: 992px) { .activities .container { padding-top: 35px; padding-bottom: 15px;} body.single-location .activities {padding-top: 25px;} .activity-box-wrap {margin-bottom: 35px;} } @media (min-width: 992px) and (max-width: 1199px) { .activities-intro h3 {font-size: 38px;} .activities h6 { font-size: 18px; } .activity-box-text p {font-size: 15px; line-height: 20px;} } @media (min-width: 1200px) { .activities h6 { font-size: 20px; } .activities.activities-square h6 { font-size: 18px; } } /* HEADFIRST DIFFERENCE - HOME, LANDING PAGES ---------------------------------------------*/ #difference-header .container { padding: 50px 0 35px 0; background: #fff url(_images/bg-corner-h.png) left -10px no-repeat; } #difference-header h2 {font-family: 'Saira', sans-serif; font-size: 90px; line-height: 64px; text-transform: uppercase; font-weight: 600; color: #BE1E2D; margin: 0 0 0 190px; } #difference-header h2 span { color: #565351;} #difference-header h6 {font-weight: 600; margin-left: 193px;} #difference-access .container { color: #fff; } /* moved image to inline */ #difference-guidance .container { color: #565351;} #difference-experience .container { color: #fff; background: #BE1E2D url(_images/bg-diff-slant-left-white.svg) right top no-repeat;} #difference-experience .container .btn {border-left-color: #fff; margin: 30px auto 0 auto;} #difference-experience .container .btn:hover {background-image: url(_images/bg-btn-slant-left-white.svg); color: #BE1E2D;} #difference-access .container, #difference-guidance .container, #difference-experience .container {min-height: 200px; padding-top: 35px; padding-bottom: 35px;} #difference-access h3, #difference-guidance h3, #difference-experience h3 {font-weight: 600;} /* probably have to adjust this based on amount of final copy */ #difference-access p, #difference-access h3 {margin-left: 20px;} #difference-guidance p {margin-right: 35px; } #difference-access h3 strong, #difference-guidance h3 strong {color: #BE1E2D;} #difference-experience h3 strong {color: #565351;} #difference-guidance p, #difference-access p, #difference-experience p { margin-bottom: 0!important;} #difference-header:before { display: block; content: " "; margin-top: -95px; height: 95px; visibility: hidden; } /* Large Devices, Wide Screens */ @media only screen and (max-width : 1199px) { #difference-access p, #difference-access h3 {margin-left: 40px;} } @media (min-width: 768px) and (max-width: 991px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 991px) { #difference-access .container, #difference-guidance .container, #difference-experience .container {min-height: auto; padding: 20px;} #difference-access .container { background: #565351 url(_images/p-difference-access.png) left -100px top 0 no-repeat!important;} #difference-guidance .container { background-position: right -100px top 0px!important;} #difference-experience .container .btn {margin-top: 80px;} } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { #difference-access .container, #difference-guidance .container, #difference-experience .container {text-align: center; background-image: none!important;} #difference-access p, #difference-access h3 {margin-left: 0;} #difference-guidance p {margin-right: 0;} #difference-experience {background: #BE1E2D;} #difference-experience .container .btn {margin-top: 0px; margin-bottom: 20px; float: none;} #difference-header {background: #fff; padding: 0!important;} } @media only screen and (max-width : 640px) { #difference-header h2 {font-size: 70px; line-height: 54px;} #difference-header h2, #difference-header h6 {margin-left: 165px} } /* Extra Small Devices, Phones */ @media only screen and (max-width : 550px) { } /* Extra Small Devices, Phones - if need breakpoint for iphone plus use 414px */ @media only screen and (max-width : 480px) { #difference-header .container {background-size: 30%; top: 0; padding-bottom: 10px; padding-top: 25px;} #difference-header h2 {font-size: 65px; line-height: 54px;} #difference-header h2, #difference-header h6 {margin-left: 40px; margin-right: 40px; text-align: center;} } /* Custom, iPhone 6 */ @media only screen and (max-width : 375px) { #difference-header .container {background: none;} #difference-header h2 {font-size: 50px; line-height: 44px;} } /* CTA BLOCK (Red or White BG) ---------------------------------------------*/ #cta.red-bg .container { color: #fff; background: #BE1E2D; } #cta.white-bg .container { color: #BE1E2D; background: #fff;} #cta .cta-text {padding: 35px 55px 15px 55px;} #cta .cta-text .h4 {font-weight: 600; position: relative; display: inline;} #cta .cta-text .h4 strong {font-weight: 600;} #cta .cta-text .h4:before {content: ''; position: absolute; left: -35px; top: 5px; width: 25px; height: 25px; background: url(_images/Icon-RightArrow-WhiteOnBlue.svg) no-repeat center center; background-size: cover;} #cta .cta-button {padding-top: 5px; padding-bottom: 35px;} @media (min-width: 992px) { #cta .cta-text .h4:before {left: -45px; top: 5px; width: 35px; height: 35px;} } /* FEATURED COLUMNS --------------------------- --------------------------- */ .home-features .container { background: #f3f3f3; padding: 70px 50px; } .feature-cols { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 15px; font-size: 16px; } .feat-col { width: 23%; min-width: 200px; margin-bottom: 20px; } .feat-col p { opacity: 0.8; } .feature-cols h2 { font-family: 'Saira', sans-serif; font-size: 50px; line-height: 54px; text-shadow: 2px 2px 0px #000; text-transform: uppercase; } .home-features .feature-cols h2 { color: #000; text-shadow: none; } .feature-cols h2 span { color: #BE1E2D; } .feature-cols h3 { text-transform: none; font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 15px; } .feature-cols a { font-weight: 700; display: inline-block; margin-top: 10px; background: #565351; color: #fff!important; padding: 8px; border-radius: 3px; } .feature-cols a:hover { background: #565351; } /* SPORT SCHEDULE --------------------------- --------------------------- */ .sport-scroll .container { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; } .sport-schedule .col-md-6 { width: 100%; } .sport-schedule tbody tr { background: #ffff; } .sport-schedule .column-1 {width: 50%} .sport-schedule .column-2 a, .sport-schedule .column-3 a, .sport-schedule .tablepress.session.landing-white-bg td a.enroll-btn { background: #BE1E2D; color: #fff!important; padding: 4px 6px; border-radius: 6px; } .sport-schedule .column-2 a:hover, .sport-schedule .column-3 a:hover, .sport-schedule .tablepress.session.landing-white-bg td a.enroll-btn:hover { background: #000; color: #fff!important; } .sport-schedule .tablepress.session td.column-2 a:hover { background: #565351; color: #fff!important; } .sport-schedule .tablepress.session td{ padding: 18px; } .sport-schedule .container {background: rgb(247,247,247); background: -moz-linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f7",endColorstr="#ffffff",GradientType=1); } .sport-schedule table { max-width: 1050px; margin: 30px auto; } .sport-schedule .tablepress.session.landing-white-bg thead th strong, .sport-schedule .tablepress.session.landing-white-bg td { color: #000!important; } .sport-schedule .tablepress.session tr:nth-child(even) { background: #f5f5f5; } .sport-schedule .tablepress.session.landing-white-bg td.column-1 a { color: #BE1E2D; text-transform: none; font-size: 18px; } .sport-schedule .tablepress.session.landing-white-bg td.column-1 a:after { content:' »'; } .sport-schedule .tablepress.session.landing-white-bg td.column-1 a:hover { color: #565351!important; } .sport-schedule .tablepress.session tbody td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .sport-schedule .tablepress.session tbody td + td { border-right: 0px; } .sport-schedule .tablepress.session.landing-white-bg thead th { border-bottom: 1px solid #ccc; } .sport-video .container { background: #000; padding: 40px; } .sport-session-final-cta .container { border-top: 1px solid #000; } @media screen and (max-width: 767px) { .sport-video .container { background: #000; padding: 10px; } .sport-schedule .tablepress.session td{ padding: 10px 4px; } .sport-schedule .tablepress.session.landing-white-bg td.column-1 a { font-size: 15px; } .featured-testimonials.value-prop-landing .container { padding: 20px 20px 20px 20px; } .home-features .container { padding: 40px 20px; } .feat-col { min-width: 100%; } .costs-video-schedule-landing .container { padding: 0px 20px 0px 20px; } } .tablepress.session td.column-1 {width: 30%} .tablepress.session td.column-2 {width: 50%} .tablepress.session td.column-3 {width: 20%} /* MODALS ---------------------------------------------*/ .modal-header, .modal-body { padding: 25px;} .modal-header.bio-header {background: none!important; padding: 0!important; border-bottom: 0; } .modal-title {font-weight: 600; color: #2C2E72;} .modal-header, .modal-content {border-radius: 0;} .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ width:inherit; height:inherit; /* To center horizontally */ margin: 0 auto; padding-bottom: 35px!important; } body.modal-open{ /* fix navbar shifting when scrollbar present and modal opens */ width:100%!important; padding-right:0!important; overflow-y:scroll!important; } #PoliciesModal .modal-body p {margin-bottom: 15px; font-size: 13px; line-height: 20px;} #PoliciesModal .modal-body h2, #PoliciesModal .modal-body h3, #PoliciesModal .modal-body h4, #PoliciesModal .modal-body, #PoliciesModal .modal-body h6 {font-weight: 600; margin-bottom: 10px; color: #2C2E72} #PoliciesModal .modal-body ul {margin: 10px 0 10px 0; list-style: disc; margin-left: 20px; font-size: 13px;} #PoliciesModal .modal-body li {padding-bottom: 5px; font-weight: 400;} /* Extra Small Devices, Phones */ @media only screen and (max-width : 550px) { .modal-header {background: #fff url(_images/bg-btn-slant-right-red.svg) left -100px top 0 no-repeat!important; background-size: cover!important; } } /* LANDING PAGE REVAMP Q4 2019 --------------------------- --------------------------- */ .carousel-landing, .carousel-landing .container {padding-left: 0; padding-right: 0;} .carousel-landing .container .col-md-12 {padding: 0 15px;} .carousel-landing .carousel-caption {color: #fff;} .carousel-landing .carousel-caption h2 {font-family: 'Saira', sans-serif; font-size: 46px; line-height: 1; margin-bottom: 0;} .carousel-landing .carousel-caption p {font-size: 20px; line-height: 1;} .carousel-caption { position: absolute; right: auto; bottom: 0; left: 0; width: 100%; z-index: 10; padding: 60px 45px 25px 45px; color: #fff; text-align: left; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(50,50,50,1) 99%,rgba(51,51,51,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#565351333',GradientType=0 );} @media (min-width: 992px) { .carousel-landing .carousel-caption h2 {font-size: 68px;} .carousel-landing .carousel-caption p {font-size: 28px; margin-top: 20px;} } .value-prop-landing .container { /* padding-top: 40px; */ padding-bottom: 40px; background: #565351; color: #fff; } .value-prop-landing h2 { font-size: 32px; text-align: center; color: #BE1E2D} .value-prop-landing p { font-size: 18px; line-height: 1.3; text-align: center;} .value-prop-landing hr { border-top: 2px solid #BE1E2D; margin: 0 25px 30px 25px; } @media (min-width: 768px) and (max-width: 991px) { .value-prop-landing p {margin-bottom: 15px;} } .costs-video-schedule-landing .container {padding-top: 40px; padding-bottom: 40px;} .costs-video-schedule-landing .inner-row { margin: 0;} .costs-video-schedule-landing .video-top {position: relative; margin-bottom: 30px;} .costs-video-schedule-landing .video-top:before { content: url(/wp-content/themes/HeadFirst/_images/i-play-youtube.png); position: absolute; top: 50%; left: 50%; margin-left: -36px; margin-top: -25px; z-index: 999; opacity: .5;} .costs-video-schedule-landing .video-top:hover:before {opacity: 1;} .schedule-wrap {border: 1px solid #565351; padding: 25px; background: #fff;} .costs-video-schedule-landing .schedule-bottom h3 {margin-bottom: 15px} .costs-video-schedule-landing .schedule-bottom ul {margin: 10px 0 10px 0; list-style: disc; margin-left: 20px;} .costs-video-schedule-landing .schedule-bottom ul li {padding-bottom: 8px;} .tablepress.session.landing-white-bg a { color: #BE1E2D; } .tablepress.session.landing-white-bg thead th {padding-bottom: 10px; font-weight: 600; font-size: 16px; color: #565351!important;} /* .tablepress.session.landing-white-bg thead th strong {font-size: 26px; color: #fff!important; font-weight: 500; margin-right: 5px;} */ /* .tablepress.session.landing-white-bg tbody td {width: 50%} */ .difference-header-landing#difference-header h2 {font-size: 64px; line-height: 1; } .featured-testimonials.value-prop-landing h2 { font-family: 'Saira', sans-serif; font-size: 50px; line-height: 54px; text-transform: uppercase; text-align: left; color: #2C2E72; } .featured-testimonials.value-prop-landing p { font-size: 16px; line-height: 28px; text-align: left; color: #222; font-weight: 400; } .featured-testimonials.value-prop-landing hr { margin: 0px 0px 40px; } .featured-testimonials.value-prop-landing p strong { display: block; margin-top: 20px; font-size: 14px; } .featured-testimonials.value-prop-landing .container { background: #fff; padding: 50px 50px 70px; } /* SUBNAV LEFT, TEXT RIGHT - GENERAL INFO PAGES ---------------------------------------------*/ .subnav-and-text .container { background: #fff; padding-top: 35px; padding-bottom: 35px; } .subnav-and-text p {margin-bottom: 15px; font-size: 16px; line-height: 1.4;} .subnav-and-text hr { margin-top: 40px; margin-bottom: 40px; } .subnav ul li {font-family: 'Saira', sans-serif; font-weight: 600;} .subnav ul li ul li, .subnav ul li ul li ul li { font-family: 'DM Sans', sans-serif; font-weight: 400;} .subnav ul li a {padding: 8px 0!important;display: block; color: #2C2E72;} /* active states */ .subnav ul li.current_page_item a, .subnav ul li.current-menu-item a {font-weight: 600; color: #565351;} /* 2nd level */ .subnav ul li ul {margin-left: 13px;} /* 3rd level */ .subnav ul li ul li ul.sub-menu li a {padding: 3px 0!important; color: #565351!important;} .subnav ul li ul li.current_page_item ul li a, .subnav ul li ul li.current-menu-item ul li a, .subnav ul li ul li.sub-menu ul li a {font-weight: 400!important;} /* special arrangements for 3rd level page travel & accommodations open menu */ #menu-enrolled-athletes-travel-accommodations-open li.current-menu-parent a {font-weight: 700; color: #565351;} #menu-enrolled-athletes-travel-accommodations-open li.current-menu-parent ul li.current_page_item a { color: #BE1E2D!important;} #menu-enrolled-athletes-travel-accommodations-open li.current-menu-parent ul li a { color: #565351;} #menu-enrolled-athletes-travel-accommodations-open li.current-menu-parent ul li a:before {content:''; color: #565351; } #menu-enrolled-athletes-travel-accommodations-open li.current-menu-parent ul li.current_page_item a:before {content:''; color: #565351; } #menu-enrolled-athletes-travel-accommodations-open li.current-menu-parent ul li.current_page_item ul li a:before {content:'';} #menu-enrolled-athletes-travel-accommodations-open li.current-menu-parent ul li.current_page_item ul li a { color: #BE1E2D!important; } /* hover */ .subnav ul li a:hover, .subnav ul li ul li a:hover, .subnav ul li ul li ul li a:hover {color: #565351!important;} /* these styles get applied to other blocks like columns that use a WYSIWYG editor */ .wysiwyg a {font-weight: 600;} .wysiwyg h4 em {font-style: normal; color: #999; font-size: 75%;} .wysiwyg ul:not(.checklist ul, .xlist ul), #blog-post ul {margin: 10px 0 10px 40px; list-style: disc; font-size: 16px; line-height: 1.4;} .wysiwyg li, #blog-post li {padding-bottom: 5px;} .wysiwyg ol {margin-left: 40px; margin-bottom: 10px; font-size: 16px; line-height: 1.4;} .wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5, .wysiwyg h6 {font-weight: 600; margin-bottom: 5px; color: #2C2E72; } .subnav-text { margin-top: 50px;} /* text under subnav if there is any */ /* special styling for onsite page */ .subnav-and-text.onsite h4, .subnav-and-text.onsite h5 {text-transform: none; margin-bottom: 20px;} .subnav-and-text.onsite h5 strong { color: #BE1E2D; } @media (min-width: 992px) { .subnav-and-text .container { padding: 50px; } } @media only screen and (max-width : 767px) { .subnav-and-text.onsite hr {width: 33%;} #subnav-and-text {padding-bottom: 0;} #subnav-and-text .container {padding-left: 15px; padding-right: 15px;} #subnav ul li ul {margin-left: 0px;} #subnav li a {font-size: 16px; font-weight: 600;} #subnav li.active a {margin-left: 0;} } /* Extra Small Devices, Phones - if need breakpoint for iphone plus use 414px */ @media only screen and (max-width : 480px) { #text p {font-size: 16px;} #subnav {background-size: 80px;} } /* SESSION COACHES LIST BLOCK - SESSION PAGE ---------------------------------------------*/ #coaches-attending-header .container {padding-top: 25px; padding-bottom: 35px; position: relative; overflow: hidden;} #coaches-attending-header .container:after { content:''; position: absolute; bottom: 0; left: 50px; width: 100%; height: 17px!important; background-image: url(_images/HF-Showcase-HashWhite-white.svg); background-repeat: repeat-x; background-position: bottom left; background-size: 200%; z-index: 1;} #coaches-attending-header h2 {font-size: 40px; margin-bottom: 0; font-weight: 600; padding-left: 25px;} #coaches-attending-header h3 {font-size: 20px; font-weight: 400; padding-left: 25px;} /* provisions for adding # of coaches and modal link */ #coaches-attending-header h3 a span.glyphicon {font-size: 50%; color: rgba(255,255,255,.5); vertical-align: baseline; position: relative; top: 0;} #coaches-attending-header h3 a:hover span.glyphicon {color: #fff; } #coaches-attending-list .container {background: #fff; padding-top: 50px;} #coaches-attending-list .btn {text-align: center;} #coaches-attending-list p {font-size: 20px; color: #565351; margin-top: 40px; text-align: center;} @media (min-width: 992px) { #coaches-attending-header h2 {font-size: 50px;} #coaches-attending-header h3 {font-size: 30px; } } /* message below coaches list */ .call-for-coaches {color: #2C2E72; background: #fff; padding: 50px 0;} .call-for-coaches h4 {font-weight: 600; position: relative; margin-left: 95px;} .call-for-coaches h4 strong {font-weight: 600;} .call-for-coaches h4:before {content: ''; position: absolute; left: -45px; top: 0; width: 35px; height: 35px; background: url(_images/Icon-RightArrow-WhiteOnBlue.svg) no-repeat center center; background-size: cover;} .landing-page-coaches-list#coaches-attending-list .container table { background: #fff; } #coaches-attending-list h1 strong { font-weight: 400; } #coaches-attending-list h1 { color: #fff; max-width: 750px; font-size: 17px; text-align: center; margin: 0 auto; } .tablepress.coaches { color: #565351; text-transform: uppercase; font-size: 22px; line-height: 24px; font-weight: 600; margin: 30px 0 0 0; z-index: 999!important; table-layout: auto !important; } .tablepress.coaches img {max-height: 70px;} .tablepress.coaches tbody td { border-top: none; border-bottom: 1px solid #ccc; padding: 35px 10px; vertical-align: middle; } .tablepress.coaches tbody th.column-2, .tablepress.coaches tbody td.column-2 { width: 170px; white-space: nowrap !important;} .tablepress.coaches tbody td.column-5 {color: #999;} /* make coaches name column lighter */ .tablepress.coaches thead th {padding-left: 10px;} .tablepress.coaches thead th.column-4 {color: #fff;} /* fake hide text on logo column so it doesnt say logo */ .session-page-coaches-list .tablepress.coaches {margin-top: 30px!important;} .session-page-coaches-list .tablepress.coaches thead th.column-2, .session-page-coaches-list .tablepress.coaches tbody td.column-2 {border-bottom: none; padding: 0 0 0 0; } /* adjust column # when final content */ .coach-collapse.collapse {display: block; overflow: hidden; width: 100%;} .coach-collapse.collapse .session-page-coaches-list .tablepress {width: 99%;} #coaches-attending-list .btn {margin: 40px auto;} .tablepress.coaches { text-transform: none; font-weight: 400; } .tablepress.coaches tr:nth-child(even) { background: #f9f9f9; } .landing-page-coaches-list .tablepress.coaches img { border-radius: 12px; } .tablepress.coaches .column-1 { font-size: 18px; font-weight: 700; } .tablepress.coaches tfoot th { font-weight: 400; line-height: 24px; } .tablepress.coaches tfoot th br + br { display: none; } /* show / hide list */ .session-page-coaches-list #collapseCoaches {min-height: 980px;} .session-page-coaches-list #collapseCoaches.collapse { display: block; height: 980px; overflow: hidden;} .session-page-coaches-list #collapseCoaches.collapse.in {height: auto; overflow: visible;} .landing-page-coaches-list #collapseCoaches {min-height: auto; } .landing-page-coaches-list #collapseCoaches.collapse { display: block; height: 100%; /* overflow-y: visible!important; */} .landing-page-coaches-list #collapseCoaches.collapse.in {height: 100%; /* overflow-y: visible!important; */} .landing-page-coaches-list .table-responsive {overflow-y: hidden;} /* hide vertical scrollbar */ /* HIDE TABLEPRESS THINGS */ /* hide the btn on main coaches list page */ .landing-page-coaches-list#coaches-attending-list .btn, /* hide session name on session pages */ .session-page-coaches-list .tablepress.coaches thead th.column-1, .session-page-coaches-list .tablepress.coaches tbody td.column-1, .session-page-coaches-list .dataTables_filter, .session-page-coaches-list .dataTables_filter input, /* hide dates on session pages */ .session-page-coaches-list .tablepress.coaches thead th.column-2, .session-page-coaches-list .tablepress.coaches tbody td.column-2, /* hide sorting for logos field */ .session-page-coaches-list .tablepress.coaches thead th.column-3.sorting:after { display: none!important; } .landing-page-coaches-list#coaches-attending-list .container {padding-bottom: 40px; margin-bottom: 0;} .landing-page-coaches-list .coach-collapse.collapsing, #parent-pageid-639 .coach-collapse.collapse {height: auto!important;} /* make table more compact on coaches landing pages */ .landing-page-coaches-list .tablepress.coaches { font-size: 16px; line-height: 18px; } .landing-page-coaches-list .tablepress.coaches img {max-height: 35px;} .landing-page-coaches-list .tablepress.coaches tbody td { padding: 10px; } .landing-page-coaches-list .tablepress.coaches thead th.column-1, .landing-page-coaches-list .tablepress.coaches tbody td.column-1 {min-width: 150px!important;} /* session name */ .landing-page-coaches-list .tablepress.coaches thead th.column-7, .landing-page-coaches-list .tablepress.coaches tbody td.column-7 {min-width: 140px!important;} /* region name */ /* ONSITE PAGE STUFF */ /* make table more compact on onsite pages */ .onsite-page-coaches-list .tablepress.coaches { font-size: 16px; line-height: 18px; } .onsite-page-coaches-list .tablepress.coaches img {max-height: 35px;} .onsite-page-coaches-list .tablepress.coaches tbody td { padding: 10px; } .onsite-page-coaches-list .tablepress.coaches thead th.column-1, .onsite-page-coaches-list .tablepress.coaches tbody td.column-1 {min-width: 150px!important;} /* session name */ .onsite-page-coaches-list .tablepress.coaches thead th.column-7, .onsite-page-coaches-list .tablepress.coaches tbody td.column-7 {min-width: 140px!important;} /* region name */ /* hide session name on onsite pages */ .onsite-page-coaches-list .tablepress.coaches thead th.column-1, .onsite-page-coaches-list .tablepress.coaches tbody td.column-1, .onsite-page-coaches-list .dataTables_filter, .onsite-page-coaches-list .dataTables_filter input, /* hide dates on onsite pages */ .onsite-page-coaches-list .tablepress.coaches thead th.column-2, .onsite-page-coaches-list .tablepress.coaches tbody td.column-2, /* hide sorting for logos field */ .onsite-page-coaches-list .tablepress.coaches thead th.column-3.sorting:after, /* hide view all button */ .onsite-page-coaches-list#coaches-attending-list .btn { display: none!important; } .onsite-page-coaches-list#coaches-attending-list .container {padding-bottom: 40px; margin-bottom: 0; padding-top: 30px;} .onsite-page-coaches-list .coach-collapse.collapsing, #page-id-1152 .coach-collapse.collapse {height: auto!important;} .onsite-page-coaches-list #collapseCoaches {min-height: auto; } .onsite-page-coaches-list #collapseCoaches.collapse { display: block; height: 100%; /* overflow-y: visible!important; */} .onsite-page-coaches-list #collapseCoaches.collapse.in {height: 100%; /* overflow-y: visible!important; */} .onsite-page-coaches-list .table-responsive {overflow-y: hidden;} /* hide vertical scrollbar */ /* swap text for coaches session list on collapse/expand */ .view-all:after {content: 'All'; margin-left: 5px} .view-less:after {content: 'Less'; margin-left: 5px} /* Large Devices, Wide Screens */ @media only screen and (max-width : 1199px) { .tablepress.coaches {font-size: 18px; line-height: 20px;} .tablepress.coaches tbody td { padding: 26px 10px; } .tablepress.coaches img {max-height: 55px;} } /* Medium Devices, Desktops */ @media only screen and (max-width : 991px) { .tablepress.coaches {font-size: 16px; line-height: 20px;} .tablepress.coaches tbody td { padding: 25px 10px; } .tablepress.coaches tbody td.column-2 {padding: 0 20px 0 0;} /* adjust padding on logo column */ .tablepress.coaches img {max-height: 45px;} } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { #featured-coaches h6, .tablepress.featured-coaches {margin-left: 0; } .tablepress.coaches, .landing-page-coaches-list .tablepress.coaches {margin-left: 0; font-size: 14px; line-height: 16px;} .tablepress.coaches img {max-height: 45px; text-align: center;} .tablepress.coaches tbody td.column-2 {text-align: center; padding-right: 5px;} /* adjust column number for final tables logo may not be col 1 */ .tablepress.session { font-size: 14px; } .table-responsive {margin-bottom: 15px;border: none;} .coach-collapse.collapse .tablepress {width: auto;} } /* Extra Small Devices, Phones */ @media only screen and (max-width : 550px) { .tablepress.session {font-size: 14px;} .tablepress.session tbody td, .tablepress.session tfoot th, .tablepress.session thead th { padding-left: 10px; } .tablepress.coaches {font-size: 12px; line-height: 14px; margin-top: 0;} .tablepress.coaches img {max-height: 40px;} } /* Extra Small Devices, Phones - if need breakpoint for iphone plus use 414px */ @media only screen and (max-width : 480px) { .tablepress.session { font-size: 12px; } } /* Custom, iPhone 6 */ @media only screen and (max-width : 375px) { .tablepress.coaches {font-size: 11px; } .tablepress.coaches tbody td { padding: 12px 5px; } .session-page-coaches-list .tablepress.coaches tbody td.column-1, .session-page-coaches-list .tablepress.coaches tbody td.column-2, .session-page-coaches-list .tablepress.coaches thead th.column-2 { padding-right: 0; display: none;} /* hide session name & logo */ .session-page-coaches-list .tablepress.coaches thead th {padding-left: 5px; font-size: 11px!important;} } /* CHOOSE A SPORT BLOCK - SPORT LANDING PAGE ---------------------------------------------*/ #choose-sport-block .container {background: #000; padding-left: 0!important; padding-right: 0!important; position: relative;} #choose-sport-block .btn.btn-red {border-left-color: #fff;} .choose-sport .col-md-12 {position: relative; overflow: hidden;} .block {position: absolute; top: 0; width: 800px; background: #000; -moz-transform: skewX(-33deg); -webkit-transform: skewX(-33deg); -o-transform: skewX(-33deg); -ms-transform: skewX(-33deg); transform: skewX(-33deg); } .block-dim { width: 800px; background: rgba(0,0,0,.3); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .block:hover .block-dim { background: rgba(0,0,0,.5);} .block-left .block-text { padding: 25% 40px 0 240px; } .block-right .block-text { padding: 25% 40px 0 70px; } .block-text h2 {font-family: 'Saira', sans-serif; font-size: 45px; text-shadow: 2px 2px 0px #000; text-transform: uppercase; color: #fff; font-weight: 700;} .block:hover .block-text h2 {color: #e42127;} .block-text p {color: #fff; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); font-size: 18px; max-width: 460px; font-weight: 700;} .choose-smaller-headline .block-text h2 { font-size: 72px; line-height: 62px;} /* specifically for travel & accommmodations use in parent section */ .block-right { left: 50%; position: relative; overflow: hidden; } .block-right:before { content: ''; background: url(_images/p-sportblock-sbo-fpo.jpg) center center no-repeat; z-index: -1; width: 1200px; position: absolute; top: 0; right: 0; } .block-left { right: 50%; overflow: hidden;} .block-left:before { content: ''; background: url(_images/p-sportblock-bbo-fpo.jpg) center center no-repeat; z-index: -1; width: 1200px; position: absolute; top: 0; left: 0; } /* specify different images for various versions of choose sport blocks - set class in admin */ .home-page-choose-sport .block-left:before { background: url(/wp-content/uploads/BB_Choose_Sport_1a.jpg) top center no-repeat;} .home-page-choose-sport .block-right:before { background: url(/wp-content/uploads/SB_Choose_Sport_1a.jpg) top center no-repeat;} .coaches-page-choose-sport .block-left:before { background: url(/wp-content/uploads/BB_Choose_Sport_2.jpg) top center no-repeat;} .coaches-page-choose-sport .block-right:before { background: url(/wp-content/uploads/SB_Choose_Sport_2.jpg) top center no-repeat;} .travel-page-choose-sport .block-left:before, .camps-landing-page-choose-sport .block-left:before { background: url(/wp-content/uploads/BB_Choose_Sport_3.jpg) top center no-repeat; z-index: -1} .travel-page-choose-sport .block-right:before, .camps-landing-page-choose-sport .block-right:before { background: url(/wp-content/uploads/SB_Choose_Sport_3.jpg) top center no-repeat;} .block-right:before, .block-left:before, .block-text { -moz-transform: skewX(33deg); -webkit-transform: skewX(33deg); -o-transform: skewX(33deg); -ms-transform: skewX(33deg); transform: skewX(33deg);} .choose-sport .col-md-12, .block, .block-dim, .block-right:before, .block-left:before {height: 600px;} .animation-element.block-right { left: 2000px; position: relative; overflow: hidden;} .animation-element.block-left { right: 2000px; overflow: hidden;} .animation-element.block-right, .animation-element.block-left { -moz-transition: all 1000ms linear; -webkit-transition: all 1000ms linear; -o-transition: all 1000ms linear; transition: all 1000ms linear;} /*animation element*/ .animation-element.block-left.in-view {right: 50%;} .animation-element.block-right.in-view { left: 50%; } #choose-sport-block .block:hover .block-dim, #choose-sport-block .block .block-dim { background: rgba(0,0,0,.6); } #choose-sport-block .block-text h2 { color: #fff; font-size: 45px; line-height: 1; } @media only screen and (max-width : 767px) { .animation-element.block-right.in-view, .animation-element.block-left.in-view { -moz-transition: none; -webkit-transition: none; -o-transition: none; transition: none;} .animation-element.block-right.in-view { left: auto; } .animation-element.block-left.in-view { right: auto; } .choose-sport .col-md-12 {position: relative; overflow: hidden;} .block {width: 100%; position: relative;} .block, .block-right:before, .block-left:before, .block-text {-moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .block-dim { width: 100%;} .block-left .block-text, .block-right .block-text { padding: 40px 20px 30px 20px; text-align: center;} .block-text p {max-width: none;} .block-right { left: auto; overflow: visible; background: url(_images/p-sportblock-sbo-fpo.jpg) top center no-repeat;} .block-left { right: auto; overflow: visible; background: url(_images/p-sportblock-bbo-fpo.jpg) top center no-repeat; border-bottom: 5px solid #fff;} .block-right:before, .block-left:before { display: none;} /* move bg image to block - we could specify a unique image here */ .choose-sport .col-md-12, .block, .block-dim, .block-right:before, .block-left:before {height: auto;} } @media (min-width: 768px) { #choose-sport-block .block-text h2 { font-size: 52px } .block-left .block-text { padding-left: 400px; padding-top: 5%; } .block-right .block-text { padding-left: 30px; padding-top: 34% } .block p {max-width: 300px;} } @media (min-width: 992px) { #choose-sport-block .block-text h2 { font-size: 60px } .block-left .block-text { padding-left: 280px; } .block p {max-width: 360px;} } @media (min-width: 1200px) { #choose-sport-block .block-text h2 { font-size: 74px } .block-left .block-text { padding-left: 180px; } } /* BLOG ---------------------------------------------*/ .blog-block {border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px;} h2.blog-title {color: #BE1E2D; text-transform: none!important; font-size: 22px; line-height: 24px; border-bottom: 3px solid #BE1E2D; padding-bottom: 5px; margin-bottom: 10px; display: inline-block; font-weight: 600;} p.blog-date {text-transform: uppercase; font-size: 12px!important; color: #999; margin-bottom: 5px;} .pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #BE1E2D; } .pagination li .current, .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #BE1E2D; border-color: #BE1E2D; color: #fff; font-weight: 600; } #blog-post img {padding-bottom: 20px;} .prev-post a, .next-post a {font-size: 16px; line-height: 20px; color: #fff; padding-bottom: 0!important;} .prev-post a:hover, .next-post a:hover, .next-previous .glyphicon:hover {color: #565351;} .next-previous {padding-top: 20px; padding-bottom: 20px!important; background: #BE1E2D!important; } .next-previous .glyphicon {font-size: 36px; line-height: 1; color: #fff;} #subnav ul.latest-posts li a, #subnav ul.archives li a {text-transform: none; padding: 4px 0!important; color: #565351; margin-right: 30px;} #subnav ul.latest-posts li a:hover, #subnav ul.archives li a:hover {color: #BE1E2D;} #subnav h6 {font-size: 14px; font-weight: 600; margin-top: 20px;} @media only screen and (max-width : 767px) { .next-previous .text-right, .next-previous {text-align: center!important;} } /* COSTS & DATES LANDING PAGE BLOCK ---------------------------------------------*/ #costs-dates .container { padding: 30px 20px; background: #565351; } #costs-dates.landing-costs .container {background: #565351;} #costs-dates h3 {color: #fff; font-weight: 600;} #costs-dates h3 div {display: inline; margin-left: 5px; color: #999; font-size: 22px; font-weight: 400; margin-bottom: 10px; margin-top: 8px;} #costs-dates h3 div span.locations:after, #costs-dates h3 div span.coaches:after {content:'•'; margin: 0 7px;} .tablepress.session { color: #fff; text-transform: uppercase; font-size: 15px; } .tablepress.session tbody td, .tablepress.session tfoot th, .tablepress.session thead th { border-top: none; border-bottom: 1px solid #565351; padding-left: 10px; } .tablepress.session tbody td { border-right: 1px solid #565351; } .tablepress.session tbody td:last-child {text-align: right;} .tablepress.session tbody td:last-child {border-right: 0;} .tablepress.session tfoot th, .tablepress.session thead th { background-color: transparent; font-weight: 600; vertical-align: middle } .tablepress.session td, .tablepress.session th { padding: 10px; } .tablepress.session thead th {padding-bottom: 5px;} .tablepress.session td a {color: #fff;} .tablepress.session td a:hover, .tablepress.session th, .tablepress.session td a.red {color: #BE1E2D!important;} .tablepress.session td a.red {font-weight: 600!important;} .tablepress.session td a.red:hover {color: #fff!important} .tablepress.session .row-hover tr:hover td { background-color: transparent; } .tablepress.session.tablepress-id-7 tbody td.column-3 {border-left: 4px solid #BE1E2D;} .home-test-chart#costs-dates h3 div span.coaches:after, .home-test-chart#costs-dates h3 div span.locations:after {content:''!important;} .tablepress.session.tablepress-id-7 tbody td, .tablepress.session.tablepress-id-7 tfoot th, .tablepress.session.tablepress-id-7 thead th { padding-left: 2%; } .tablepress.session thead th span {color: #999; text-transform: none; font-size: 11px; letter-spacing: 0;} .landing-page-chart-enroll-btn.closed, .enroll-btn.closed {background-color: #565351!important} /* Large Devices, Wide Screens */ @media only screen and (max-width : 1199px) { #costs-dates h3 {font-size: 30px;} #costs-dates h3 span {font-size: 18px;} } @media (min-width: 768px) and (max-width: 991px) { #costs-dates h3 {text-align: center;} #costs-dates h3 div {display: block;} } @media only screen and (max-width : 640px) { #costs-dates h3 div {display: block; margin-left: 0px; font-size: 18px;} } /* Extra Small Devices, Phones - if need breakpoint for iphone plus use 414px */ @media only screen and (max-width : 480px) { #costs-dates h3 span.locations:after, #costs-dates h3 span.coaches:after {content: ''!important; margin:0!important;} #costs-dates h3 div span {display: block; margin-bottom: 5px; font-size: 18px;} } /* SEO / CAMP SCHEDULE LANDING PAGE BLOCK ---------------------------------------------*/ #seo-camp-schedule .container {padding-top: 30px; padding-bottom: 30px; background: #fff;} #seo-landing {text-align: center;} #seo-camp-schedule h2 {text-transform: none; font-size: 22px; line-height: 32px; font-weight: 600; text-align: left;} #seo-camp-schedule h2 strong {display: block; margin-top: 10px; font-weight: 600;} #seo-camp-schedule h2 strong.tagline {display: inline; margin-top: 0; color: #BE1E2D} #seo-camp-schedule h3 {font-weight: 700; margin-bottom: 20px;} #seo-camp-schedule .btn { margin: 20px auto!important;} #seo-camp-schedule.seo-text-landing .container {border-top: 6px solid #BE1E2D; border-bottom: 6px solid #BE1E2D;} /* camp schedule tabs */ .tab-content {border: 1px solid #565351; padding: 20px;} .tab-content h6 {font-size: 12px; font-weight: 700; text-transform: uppercase;} .tab-content ul {margin: 10px 0 10px 0; list-style: disc; margin-left: 20px;} .tab-content ul li {padding-bottom: 8px;} .nav-tabs { border-bottom: none; } .nav-tabs > li > a { border: 1px solid #565351; border-radius: 0; text-transform: uppercase; padding: 5px 70px 5px 20px; background-color: #808080; color: #fff; } .nav-tabs > li > a:hover { border-color: #565351; background: #565351; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #565351; cursor: default; background-color: #BE1E2D; color: #fff; border: 1px solid #565351; border-bottom-color: transparent; } /* Medium Devices, Desktops */ @media only screen and (max-width : 991px) { #seo-camp-schedule h1 {font-size: 20px; line-height: 30px; margin-right: 0;} } @media only screen and (max-width : 640px) { #seo-camp-schedule .btn {float: none; margin-top: 20px; margin-right: 0;} #seo-camp-schedule .container {padding: 20px;} } /* Extra Small Devices, Phones - if need breakpoint for iphone plus use 414px */ @media only screen and (max-width : 480px) { /* make schedule tabs equal width */ .nav-tabs { width: 100%; } .nav-tabs > li {width: 50%;} .nav-tabs > li:last-child a {margin-right: 0;} } /* MY STICKY NOTIFICATION BAR + 60 px if font = 18px --------------------------- --------------------------- */ body.mysticky-welcomebar-apper .navbar-fixed-top { top: 60px;} /* lower header below WP admin bar when logged in */ body.mysticky-welcomebar-apper.admin-bar .navbar-fixed-top {top: 106px;} @media (min-width: 783px) { body.mysticky-welcomebar-apper.admin-bar .navbar-fixed-top {top: 92px;} }