/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } body { margin: 0; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } a { background: 0 0; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } dfn { font-style: italic; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre-wrap; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } body { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; font-size: 16px; font-weight: 400; } :focus { outline-color: transparent; outline-style: none; } h2 + p { margin: 0 0 2rem; } html { font-family: 'Roboto', 'Helvetica Neue', helvetica, arial, sans-serif; font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { line-height: normal; } /* ============================================== CSS3 ANIMATION CHEAT SHEET ============================================== Made by Justin Aguilar www.justinaguilar.com/animations/ Questions, comments, concerns, love letters: justin@justinaguilar.com ============================================== */ /* ============================================== slideDown ============================================== */ .slideDown { animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 50% { -webkit-transform: translateY(8%); transform: translateY(8%); } 65% { -webkit-transform: translateY(-4%); transform: translateY(-4%); } 80% { -webkit-transform: translateY(4%); transform: translateY(4%); } 95% { -webkit-transform: translateY(-2%); transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50% { -webkit-transform: translateY(8%); } 65% { -webkit-transform: translateY(-4%); } 80% { -webkit-transform: translateY(4%); } 95% { -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideUp ============================================== */ .slideUp { animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 50% { -webkit-transform: translateY(-8%); transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50% { -webkit-transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideLeft ============================================== */ .slideLeft { animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { -webkit-transform: translateX(150%); transform: translateX(150%); } 50% { -webkit-transform: translateX(-8%); transform: translateX(-8%); } 65% { -webkit-transform: translateX(4%); transform: translateX(4%); } 80% { -webkit-transform: translateX(-4%); transform: translateX(-4%); } 95% { -webkit-transform: translateX(2%); transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50% { -webkit-transform: translateX(-8%); } 65% { -webkit-transform: translateX(4%); } 80% { -webkit-transform: translateX(-4%); } 95% { -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideRight ============================================== */ .slideRight { animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { -webkit-transform: translateX(-150%); transform: translateX(-150%); } 50% { -webkit-transform: translateX(8%); transform: translateX(8%); } 65% { -webkit-transform: translateX(-4%); transform: translateX(-4%); } 80% { -webkit-transform: translateX(4%); transform: translateX(4%); } 95% { -webkit-transform: translateX(-2%); transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50% { -webkit-transform: translateX(8%); } 65% { -webkit-transform: translateX(-4%); } 80% { -webkit-transform: translateX(4%); } 95% { -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideExpandUp ============================================== */ .slideExpandUp { animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); transform: translateY(100%) scaleX(0.5); } 30% { -webkit-transform: translateY(-8%) scaleX(0.5); transform: translateY(-8%) scaleX(0.5); } 40% { -webkit-transform: translateY(2%) scaleX(0.5); transform: translateY(2%) scaleX(0.5); } 50% { -webkit-transform: translateY(0%) scaleX(1.1); transform: translateY(0%) scaleX(1.1); } 60% { -webkit-transform: translateY(0%) scaleX(0.9); transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); transform: translateY(0%) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleX(0.95); transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); transform: translateY(0%) scaleX(1.02); } 100% { -webkit-transform: translateY(0%) scaleX(1); transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30% { -webkit-transform: translateY(-8%) scaleX(0.5); } 40% { -webkit-transform: translateY(2%) scaleX(0.5); } 50% { -webkit-transform: translateY(0%) scaleX(1.1); } 60% { -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100% { -webkit-transform: translateY(0%) scaleX(1); } } /* ============================================== expandUp ============================================== */ .expandUp { animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { -webkit-transform: translateY(-7%) scaleY(1.12); transform: translateY(-7%) scaleY(1.12); } 75% { -webkit-transform: translateY(3%); transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { -webkit-transform: translateY(-7%) scaleY(1.12); } 75% { -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ============================================== fadeIn ============================================== */ .fadeIn { animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* ============================================== expandOpen ============================================== */ .expandOpen { animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { -webkit-transform: scale(1.8); transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); transform: scale(0.98); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /* ============================================== bigEntrance ============================================== */ .bigEntrance { animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /* ============================================== hatch ============================================== */ .hatch { animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /* ============================================== bounce ============================================== */ .bounce { animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); transform: translateY(0%) scaleY(0.6); } 60% { -webkit-transform: translateY(-100%) scaleY(1.1); transform: translateY(-100%) scaleY(1.1); } 70% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { -webkit-transform: translateY(0%) scaleY(1) scaleX(1); transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60% { -webkit-transform: translateY(-100%) scaleY(1.1); } 70% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== pulse ============================================== */ .pulse { animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 50% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== floating ============================================== */ .floating { animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== tossing ============================================== */ .tossing { animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ============================================== pullUp ============================================== */ .pullUp { animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .pullDown { animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== stretchLeft ============================================== */ .stretchLeft { animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== stretchRight ============================================== */ .stretchRight { animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } .sr_otg .ContactInfoBar { background-color: black; color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 500; line-height: 1.5em; margin: 0; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; } .sr_otg .ContactInfoBar a { color: rgba(255, 255, 255, 0.7); display: inline-block; text-decoration: underline; } .sr_otg .ContactInfoBar a:hover { color: white; cursor: pointer; } .sr_otg .ContactInfoBar .u-floatRight { padding: .3rem 1rem; text-decoration: none; } .sr_otg .ContactInfoBar .u-floatRight:hover { background-color: rgba(255, 255, 255, 0.2); text-decoration: none; } .sr_otg .ContactInfoBar i { font-size: 12px; } .sr_otg .ContactInfoBar .col-xs { padding: .3rem 1rem; } .sr_otg { /*styling open close button*/ /*overlay*/ } .sr_otg.player_profile .MainNavDropdown.sub-menu { padding-top: 7px; } .sr_otg.player_profile .MainNavDropdown.sub-menu svg { margin-bottom: -3px; } .sr_otg .headroom { will-change: transform; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .sr_otg .headroom--pinned { -webkit-transform: translateY(0%); transform: translateY(0%); } .sr_otg .headroom--unpinned { -webkit-transform: translateY(-100%); transform: translateY(-100%); } @media (min-width: 768px) { .sr_otg .headroom--unpinned { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .sr_otg .NavWrap { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; } .sr_otg .MainNav { z-index: 100; height: auto; background-color: transparent; text-align: center; padding: 1.1rem 0; margin: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .sr_otg .MainNav > div { position: static; } @media (min-width: 830px) { .sr_otg .MainNav { padding: 1.45rem 0; } } .sr_otg .MainNav--active { background: #fff; border-bottom: 1px solid #dcdcdc; padding: 1.45rem 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .sr_otg .MainNav-logo { text-align: left; background-image: url(../images/sr_otg/sr_logo_red_white.svg); background-size: contain; background-repeat: no-repeat; height: 26px; width: auto; background-position: center left; } .sr_otg .MainNav-logo a { width: 100%; height: 100%; max-width: 200px; display: block; } .sr_otg .MainNav-logo--redBlack { background-image: url(../images/sr_otg/sr_logo_red_black.svg); background-size: contain; height: 23px; width: auto; } .sr_otg .MainNav-rightLinks { list-style: none; margin: 0; padding: 0; } .sr_otg .MainNav-rightLinks li { display: inline-block; } .sr_otg .MainNav-rightLinks li + li { margin-left: 14px; } .sr_otg .MainNav-rightLinks a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: .01rem; line-height: 0; color: rgba(255, 255, 255, 0.7); text-decoration: none; } .sr_otg .MainNav-rightLinks a:hover { color: white; text-decoration: none; } .sr_otg .MainNav--active .MainNav-rightLinks a { color: #212c35; } .sr_otg .MainNav--active .MainNav-rightLinks div { color: #212c35; } .sr_otg .MainNav--active .MainNav-rightLinks a:hover, .sr_otg .MainNav .MainNav-rightLinks .MainNavDropdown.sub-menu a:hover { color: rgba(33, 44, 53, 0.6); } .sr_otg .MainNav-demoBtn a, .sr_otg .MainNav--active .MainNav-demoBtn a { color: #CE4B28; padding: .95rem .75rem .85rem .75rem; border: 2px #CE4B28 solid; border-radius: 2px; text-decoration: none; display: inline-block; font-weight: 900; } .sr_otg .MainNav-demoBtn a:hover, .sr_otg .MainNav--active .MainNav-demoBtn a:hover { color: white; background-color: #CE4B28; text-decoration: none; } .sr_otg ul { margin: 0; padding: 0; text-decoration: none; list-style: none; } .sr_otg li { padding: 0; margin: 0; } .sr_otg .MobileNav-button { display: inline; position: absolute; right: 16px; top: 23px; z-index: 999; } .sr_otg .MainNav--active .MobileNav-button a { color: black; } .sr_otg .MobileNav-button a { text-decoration: none; font-size: 20px; color: white; } .sr_otg .MobileNav-button--open:after, .sr_otg .MobileNav-button--close:after { font-family: "FontAwesome"; -webkit-transition-property: all .2s linear 0s; transition-property: all .2s linear 0s; -moz-transition: all .2s linear 0s; -webkit-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; } .sr_otg .MobileNav-button--open:after { content: "\f0c9"; } .sr_otg .MobileNav-button--close:after { content: "\f00d"; } .sr_otg .MobileNav-button--open:hover:after, .sr_otg .MobileNav-button--close:hover:after { color: #888888; } .sr_otg .MobileNav-overlay { display: none; position: fixed; top: 0; height: 100%; width: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#28343f+10,001123+100,141c21+100 */ background: #28343f; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #28343f), color-stop(100%, #001123), to(#141c21)); background: linear-gradient(to bottom, #28343f 10%, #001123 100%, #141c21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343f', endColorstr='#141c21',GradientType=0 ); /* IE6-9 */ overflow: auto; z-index: 200; } .sr_otg .MobileNav-wrap { text-align: left; max-width: 100%; margin: 0 auto; padding-left: 1.8rem; padding-right: 1.8rem; } .sr_otg .MobileNav-wrap ul.MobileNav-links li a { color: white; display: block; padding: 1rem 0; font-size: 20px; font-weight: 400; text-decoration: none; -webkit-transition-property: all .2s linear 0s; transition-property: all .2s linear 0s; -moz-transition: all .2s linear 0s; -webkit-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; } .sr_otg .MobileNav-wrap ul.MobileNav-links li a:hover, .sr_otg .MobileNav-wrap ul.MobileNav-links ul li a:hover { color: rgba(255, 255, 255, 0.6); } .sr_otg .MobileNav-wrap ul.MobileNav-links ul li { display: block; width: 100%; } .sr_otg .MobileNav-wrap ul.MobileNav-links > li { width: 100%; } .sr_otg .MobileNav-wrap ul.MobileNav-links { padding: .7rem 0 0; } .sr_otg .MobileNav-contactInfo { border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 2.3rem; padding: 2rem 0 0; color: rgba(255, 255, 255, 0.5); } .sr_otg .MobileNav-wrap ul.MobileNav-links ul li a { color: white; display: inline-block; font-size: 15px; padding-top: .9rem; padding-bottom: 0; } .sr_otg .MobileNav-demoBtn { color: #CE4B28 !important; margin-top: 1rem; display: inline-block !important; width: auto; padding: .7rem 1.2rem !important; border: 2px #CE4B28 solid; border-radius: 2px; text-decoration: none; display: inline-block; font-weight: 900; } .sr_otg .MobileNav-demoBtn:hover { color: white !important; background-color: #CE4B28; text-decoration: none; } @media (min-height: 630px) { .sr_otg .ExtraTopMargin { position: relative; top: 630px !important; } } @media (min-width: 1400px) { .sr_otg .ExtraTopMargin { top: 720px !important; } } .sr_otg .MainNavDropdown { display: none; position: absolute; text-align: center; padding-top: 20px; } .sr_otg .MainNavDropdown li { display: block; margin: 0 !important; line-height: 1em; } .sr_otg .MainNavDropdown li a { font-family: Roboto; font-weight: 400; font-size: 14px; color: #212c35; line-height: 1.4; -webkit-transition: all 0.2s; transition: all 0.2s; text-decoration: none; text-transform: none; text-align: center; display: inline-block; padding: 7px 24px; } .sr_otg .MainNavDropdown ul > li:first-child { padding-top: 7px; } .sr_otg .MainNavDropdown ul > li:last-child { padding-bottom: 7px; } .sr_otg .MainNavDropdown ul { border-top: none; margin-top: -10px; border: 1px solid #dcdcdc; border-radius: 2px; background-color: #ffffff; -webkit-box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1); } .sr_otg .MainNavDropdown svg polyline { fill: #fff; stroke: #e8e8e8; } .sr_otg .MainNavDropdown svg { top: 50%; left: 100%; margin-top: -15px; } .sr_otg .MainNavDropdown.athletes { right: 476px; } .sr_otg .MainNavDropdown.clubs { right: 421px; } .sr_otg .MainNav-rightLinks > li > div { font-size: 13px; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, 0.7); } .sr_otg .headroom--pinned .MainNav-rightLinks li:hover .MainNavDropdown { display: block; } .sr_otg .MobileNav-wrap { text-align: left; max-width: 100%; margin: 0 auto; padding-left: 1.8rem; padding-right: 1.8rem; } .sr_otg .MobileNav-wrap ul.MobileNav-links li { color: white; display: block; padding: 1rem 0; font-size: 20px; font-weight: 400; color: #888; } .sr_otg .MobileNav-wrap ul.MobileNav-links li a { color: white; display: block; padding: 0; font-size: 20px; font-weight: 400; text-decoration: none; -webkit-transition-property: all .2s linear 0s; transition-property: all .2s linear 0s; -moz-transition: all .2s linear 0s; -webkit-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; } .sr_otg .MobileNav-wrap ul.MobileNav-links li a i { margin-left: 2px; margin-bottom: 2px; font-size: 12px; vertical-align: middle; } .sr_otg .MobileNav-wrap ul.MobileNav-links li.MobileNav-contactInfo { font-size: 16px; } .sr_otg .MobileNav-wrap ul.MobileNav-links li.MobileNav-contactInfo li { font-size: 16px; } .sr_otg .MobileNav-wrap ul.MobileNav-links li.MobileNav-contactInfo li a { font-size: 16px; } .sr_otg .MobileNav-wrap ul.MobileNav-links li a:hover, .sr_otg .MobileNav-wrap ul.MobileNav-links ul li a:hover { color: rgba(255, 255, 255, 0.6); } .sr_otg .MobileNav-wrap ul.MobileNav-links ul li { display: block; width: 100%; } .sr_otg .MobileNav-wrap ul.MobileNav-links li.slide-submenu > a { margin-bottom: 16px; } .sr_otg .MobileNav-wrap ul.MobileNav-links li.slide-submenu { padding-bottom: 0; } .sr_otg .MobileNav-wrap ul.MobileNav-links > li { width: 100%; } .sr_otg .MobileNav-wrap ul.MobileNav-links { padding: .7rem 0 0; } .sr_otg .MobileNav-contactInfo { border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 2.3rem; padding: 2rem 0 0; color: rgba(255, 255, 255, 0.5); } .sr_otg ul.MobileNav-subMenuLinks { height: 0px; } .sr_otg ul.MobileNav-subMenuLinks.collapse { height: auto; } .sr_otg .MobileNav-wrap ul.MobileNav-links ul li a { color: white; display: inline-block; font-size: 15px; padding-top: .9rem; padding-bottom: 0; } .sr_otg .MobileNav-wrap ul.MobileNav-links ul li:last-child a { padding-bottom: 16px; } .sr_otg .MobileNav-wrap ul.MobileNav-subMenuLinks { background: rgba(0, 0, 0, 0.25); margin-left: -29px; margin-right: -29px; padding: 0 30px; -webkit-box-shadow: inset 0 8px 18px -8px rgba(0, 0, 0, 0.5), inset 0 -8px 18px -8px rgba(0, 0, 0, 0.5); box-shadow: inset 0 8px 18px -8px rgba(0, 0, 0, 0.5), inset 0 -8px 18px -8px rgba(0, 0, 0, 0.5); } .sr_otg .MobileNav-wrap .MobileNav-subMenuLinks li:not(:first-child) { padding-top: 0 !important; } .sr_otg .MobileNav-wrap .MobileNav-subMenuLinks li a { display: block !important; } .sr_otg .MobileNav-wrap ul.MobileNav-links ul { overflow-y: hidden; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .sr_otg .navDemoBtn { color: #CE4B28 !important; border: 2px solid #CE4B28; border-radius: 2px; padding: 4px 6px; } .sr_otg .navDemoBtn:hover { color: white !important; background-color: #CE4B28; } html, body { height: 100%; } p, a, h1, h2, h3, h4, h5, h6 { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } button { border: none; } h1, h2, h3, h4, h5, h6, p { margin: 0 0 .8rem 0; color: #212C35; } .darkestBlue-BG { background-color: #212C35 !important; background-color: #141c21 !important; } .indigo-BG { background-color: #040625 !important; } .lightBlueGradient-bg { background: -webkit-gradient(linear, right bottom, left top, from(#5DB3E4), to(#0566A9)); background: linear-gradient(to top left, #5DB3E4 0%, #0566A9 100%); background: -webkit-linear-gradient(to top left, #5DB3E4 0%, #0566A9 100%); } .blueGradient-bg { background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #0566A9), to(#5DB3E4)); background-image: linear-gradient(90deg, #0566A9 0, #5DB3E4 100%); background-image: -webkit-linear-gradient(90deg, #0566A9 0, #5DB3E4 100%); } .darkBlueGradient-bg { background-image: -webkit-gradient(linear, right bottom, left top, from(#273744), to(#141c21)); background-image: linear-gradient(to top left, #273744 0%, #141c21 100%); background-image: -webkit-linear-gradient(to top left, #273744 0%, #141c21 100%); } .greenGradient-bg { background-image: -webkit-gradient(linear, right bottom, left top, from(#3ec8c3), to(#009699)); background-image: linear-gradient(to top left, #3ec8c3 0%, #009699 100%); background-image: -webkit-linear-gradient(to top left, #3ec8c3 0%, #009699 100%); } .white-text { color: #fff !important; } .has-no-top-padding, .u-noTopPadding { padding-top: 0 !important; } .is-hidden { display: none; } a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; color: #30A9DE; text-decoration: none; } .sr_otg a:focus, .sr_otg div:focus, .sr_otg span:focus, .sr_otg button:focus { outline: none; } .sr_otg input:not([type]), .sr_otg input[type="text"], .sr_otg input[type="password"], .sr_otg input[type="tel"] { -webkit-appearance: none; } .RelativeContainer { position: relative; } .header-is-fixed .Footer, .header-is-fixed .DemoSection { position: relative; } @media (max-width: 991px) { .hidden-sm { display: none !important; } } @media (max-width: 768px) { .u-xs-visible { display: block !important; } } .u-displayFlex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .u-noBottomPadding { padding-bottom: 0 !important; } .u-bgTransparent { background: transparent !important; } input[type="text"], input[type="password"], input[type="tel"] { border: 2px solid #e8e8e8; } .is-initial-box-sizing { -webkit-box-sizing: content-box; box-sizing: content-box; } .clearfix:after, .sr_otg .active-filters:after { display: block; content: ''; clear: both; } .force-center { margin-left: auto !important; margin-right: auto !important; } .sr_otg { margin: 0; background-color: #212C35; line-height: normal; /******Video Hero BEGIN******/ /*@-moz-keyframes cd-pulse { 0% { -moz-transform: translateY(-50%) scale(1); opacity: 1; } 50% { -moz-transform: translateY(-50%) scale(1); opacity: 0; } 100% { -moz-transform: translateY(-50%) scale(0); opacity: 0; } } @keyframes cd-pulse { 0% { -webkit-transform: translateY(-50%) scale(1); -moz-transform: translateY(-50%) scale(1); -ms-transform: translateY(-50%) scale(1); -o-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); opacity: 1; } 50% { -webkit-transform: translateY(-50%) scale(1); -moz-transform: translateY(-50%) scale(1); -ms-transform: translateY(-50%) scale(1); -o-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); opacity: 0; } 100% { -webkit-transform: translateY(-50%) scale(0); -moz-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); -o-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); opacity: 0; } }*/ /******Video Hero END******/ /******** PRODUCT OVERVIEWS *******/ /******** TESTIMONIALS *******/ /******* STATS *******/ /******** ON PAGE DEMO FORM *******/ /******** FOOTER *******/ } .sr_otg article, .sr_otg aside, .sr_otg details, .sr_otg figcaption, .sr_otg figure, .sr_otg footer, .sr_otg header, .sr_otg hgroup, .sr_otg main, .sr_otg nav, .sr_otg section, .sr_otg summary { display: block; } .sr_otg p { font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: 400; line-height: 1.6; font-size: 16px; margin-bottom: 1rem; color: #494949; } .sr_otg h1, .sr_otg h2, .sr_otg h3, .sr_otg h4, .sr_otg h5, .sr_otg h6 { margin-bottom: .4em; } .sr_otg h2 { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 32px; color: #212C35; line-height: 1.3em; letter-spacing: .005em; margin-top: 0; margin-bottom: .4em; } @media (min-width: 768px) { .sr_otg h2 { font-size: 40px; } } @media (min-width: 1400px) { .sr_otg h2 { font-size: 44px; } } @media (max-width: 829px) { .sr_otg .u-xs-hideDesktopNav { display: none !important; } } @media (min-width: 830px) { .sr_otg .u-xs-hideMobileNav { display: none !important; } } @media (max-width: 767px) { .sr_otg .u-sm-showMobileNav { display: none !important; } .sr_otg .u-sm-showElement { display: none !important; } } @media (min-width: 768px) { .sr_otg .u-sm-hideElement { display: none !important; } } .sr_otg .u-noSidePadding { padding-left: 0; padding-right: 0; } .sr_otg .u-noFlexGrow { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .sr_otg .fadeInBlock { opacity: 0; } .sr_otg .whiteBg { background-color: white; } .sr_otg .gray-bg { background-color: #f1f1f1 !important; } .sr_otg .layout { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sr_otg .grayHR { width: 100%; height: 1px; background-color: #dcdcdc; display: block; margin: .8rem auto; } .sr_otg .u-textRight { text-align: right; } .sr_otg .u-floatRight { float: right; } .sr_otg .lightGrayHR { width: 100%; height: 1px; background-color: #dcdcdc; margin: 2.5rem auto; } .sr_otg form .alert { margin-bottom: 25px; margin-top: -10px; } .sr_otg .alert { display: block; width: 90%; max-width: 600px; text-align: left; padding: 15px; margin: 10px auto; border-radius: 4px; } .sr_otg .alert p { margin-bottom: 0; } .sr_otg .alert .close { margin-top: -4px; cursor: pointer; font-size: 24px; font-weight: bold; float: right; text-shadow: 0 1px 0 #fff; opacity: 0.2; color: #000; background: transparent; } .sr_otg .alert .close:hover { opacity: 0.5; } .sr_otg .alert-success { color: #3c763d; background: #dff0d8; } .sr_otg .alert-success p { color: #3c763d; } .sr_otg .alert-error { color: #a94442; background: #f2dede; border-color: #ebccd1; } .sr_otg .alert-error p { color: #a94442; } .sr_otg .btn-group .alert-error, .sr_otg .btn-group .alert-required, .sr_otg .btn-group .alert-success { margin-top: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; } .sr_otg .VideoContainer { position: relative; top: 0; width: 100%; overflow: hidden; } .sr_otg .Red-hr { height: 6px; width: 22px; background-color: #CE4B28; margin: 1rem auto; } .sr_otg .VideoContainer-copy { padding: 0 1rem; margin-top: 1rem; } @media (min-height: 580px) { .sr_otg .VideoContainer-copy { margin-top: 20px; } } .sr_otg .VideoContainer-copy h1 { color: white; font-family: 'Oswald', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 300; font-size: 42px; margin-bottom: 0; margin-top: 0; line-height: 1.25em; } @media (min-width: 768px) { .sr_otg .VideoContainer-copy h1 { font-size: 50px; } } @media (min-width: 1240px) { .sr_otg .VideoContainer-copy h1 { font-size: 68px; } } @media (min-width: 1400px) { .sr_otg .VideoContainer-copy h1 { font-size: 72px; } } .sr_otg .VideoContainer-copy p { font-size: 18px; line-height: 1.6em; color: white; margin-bottom: 0; margin-top: 0; font-weight: 300; } @media (min-width: 1240px) { .sr_otg .VideoContainer-copy p { font-size: 22px; line-height: 1.6em; } } .sr_otg .VideoContainer video { min-height: 100%; min-width: 100%; height: auto; width: auto; position: absolute; } .sr_otg .VideoContainer-overlay { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#141c21+0,212c35+25,212c35+25,212c35+100&0.9+0,0.85+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.9)), color-stop(25%, rgba(33, 44, 53, 0.89)), to(rgba(33, 44, 53, 0.85))); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.9) 0%, rgba(33, 44, 53, 0.89) 25%, rgba(33, 44, 53, 0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6141c21', endColorstr='#d9212c35',GradientType=0 ); /* IE6-9 */ position: relative; top: 0; bottom: 0; left: 0; right: 0; width: 100%; text-align: center; z-index: 0; display: block; padding: 80px 0 30px; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } @media (min-height: 580px) and (min-width: 768px) { .sr_otg .VideoContainer-overlay { padding: 180px 0 170px; } } .sr_otg .VideoContainer a { font-size: 34px; color: rgba(255, 255, 255, 0.6); } .sr_otg .bounceArrow { margin: 2.5rem auto 0; width: 100%; height: 40px; } @media (min-height: 580px) and (min-width: 768px) { .sr_otg .bounceArrow { position: absolute; bottom: 40px; left: 50%; width: 40px; height: 40px; margin-left: -20px; } } .sr_otg .cd-headline i { font-style: normal; } .sr_otg .cd-words-wrapper { display: inline-block; position: relative; text-align: left; } .sr_otg .cd-words-wrapper .ChangingWord { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; } .sr_otg .cd-words-wrapper .ChangingWord.is-visible { position: relative; } .sr_otg .no-js .cd-words-wrapper .ChangingWord { opacity: 0; } .sr_otg .no-js .cd-words-wrapper .ChangingWord.is-visible { opacity: 1; } .sr_otg .cd-headline.type .cd-words-wrapper { vertical-align: top; overflow: hidden; } .sr_otg .cd-headline.type .cd-words-wrapper::after { /* vertical bar */ content: ''; position: absolute; right: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 90%; width: 2px; background-color: #dcdcdc; } .sr_otg .cd-headline.type .cd-words-wrapper.waiting::after { -webkit-animation: cd-pulse 0.8s infinite; animation: cd-pulse 0.8s infinite; } .sr_otg .cd-headline.type .cd-words-wrapper.selected::after { visibility: hidden; } .sr_otg .cd-headline.type .cd-words-wrapper.selected::after { visibility: hidden; } .sr_otg .cd-headline.type .ChangingWord { visibility: hidden; } .sr_otg .cd-headline.type .ChangingWord.is-visible { visibility: visible; } .sr_otg .cd-headline.type i { position: absolute; visibility: hidden; } .sr_otg .cd-headline.type i.in { position: relative; visibility: visible; } @-webkit-keyframes cd-pulse { 0% { -webkit-transform: translateY(-50%) scale(1); opacity: 1; } 50% { -webkit-transform: translateY(-50%) scale(1); opacity: 0; } 100% { -webkit-transform: translateY(-50%) scale(0); opacity: 0; } } .sr_otg .SectionWrapper { background-color: white; width: 100%; margin: 0 auto 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 5.4rem; padding-bottom: 5.4rem; overflow-x: hidden; } @media (max-width: 767px) { .sr_otg .SectionWrapper { padding-top: 3.5rem; padding-bottom: 3.5rem; } } .sr_otg .SectionWrapper--noPadding { padding-top: 0; padding-bottom: 0; } .sr_otg .row { margin-right: 0; margin-left: 0; } @media (max-width: 700px) { .sr_otg .container-fluid { padding-right: .6rem; padding-left: .6rem; } } .sr_otg .container-1400 { margin-right: auto; margin-left: auto; max-width: 1400px; } @media (max-width: 1440px) { .sr_otg .container-1400 { margin-left: 1.2rem; margin-right: 1.2rem; } } .sr_otg .ProductOverviews-tabBtnGroup { text-align: center; max-width: 980px; /*The negative top margin and padding-top give breathing remove when the page is scrolled via the bouncing down caret, without screwing up the SectionWrapper top-paddign*/ margin: -1rem auto 3.4rem auto; padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 767px) { .sr_otg .ProductOverviews-tabBtnGroup { margin: -3rem auto 2.5rem auto; padding-left: 1rem; padding-right: 1rem; } } .sr_otg .ProductOverviews-tabBtn { color: #888888; text-decoration: none; border-top: 2px solid #dcdcdc; border-bottom: 2px solid #dcdcdc; display: block; padding: .7rem .3rem; text-transform: uppercase; font-size: 13px; font-weight: 900; letter-spacing: .03rem; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } @media (max-width: 767px) { .sr_otg .ProductOverviews-tabBtn { padding: .7rem .4rem; text-transform: uppercase; font-size: 13px; font-weight: 900; letter-spacing: .02rem; } } .sr_otg .ProductOverviews-tabBtn--athlete { border-left: 2px solid #dcdcdc; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .sr_otg .ProductOverviews-tabBtn--club { border-left: 2px solid #dcdcdc; border-right: 2px solid #dcdcdc; } .sr_otg .ProductOverviews-tabBtn--college { border-right: 2px solid #dcdcdc; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .sr_otg .ProductOverviews-tabBtn--athlete:hover { color: #11bbb5; } .sr_otg .ProductOverviews-tabBtn--athlete.selected, .sr_otg .ProductOverviews-tabBtn--athleteActive:hover { background-color: #11bbb5; border-color: #11bbb5 !important; color: white; } .sr_otg .ProductOverviews-tabBtn--club:hover { color: #1F80CE; } .sr_otg .ProductOverviews-tabBtn--club.selected, .sr_otg .ProductOverviews-tabBtn--clubActive:hover { background-color: #1F80CE; border-color: #1F80CE !important; color: white; } .sr_otg .ProductOverviews-tabBtn--college:hover { color: #2E285F; } .sr_otg .ProductOverviews-tabBtn--college.selected, .sr_otg .ProductOverviews-tabBtn--collegeActive:hover { background-color: #2E285F; border-color: #2E285F !important; color: white; } .sr_otg .cd-tabs-content { padding: 0; } .sr_otg .cd-tabs-content .TabContent { display: none; } .sr_otg .cd-tabs-content .TabContent.selected { display: block; -webkit-animation: cd-fade-in 0.5s; animation: cd-fade-in 0.5s; } @-webkit-keyframes cd-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes cd-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .sr_otg .ProductOverviews-content p { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px; color: #494949; line-height: 1.6em; max-width: 750px; margin: 0 auto 1.5em auto; } .sr_otg .ProductOverviews-copy { padding-left: .5rem; padding-right: .5rem; } @media (min-width: 1200px) { .sr_otg .ProductOverviews-copy { padding-left: 2rem; padding-right: 3rem; } } @media (max-width: 1199px) { .sr_otg .ProductOverviews-art { position: relative; max-width: 800px; margin: 3.5rem auto 0; padding-left: 0; padding-right: 0; } } @media (min-width: 1200px) { .sr_otg .ProductOverviews-art { position: relative; right: 0; top: 0; } } .sr_otg .ProductOverviews-artBrowser { width: 100%; padding-left: 0; margin-bottom: 3rem; } @media (min-width: 480px) { .sr_otg .ProductOverviews-artBrowser { visibility: hidden; width: 80%; padding-left: 20%; margin-bottom: 1.6rem; } } @media (min-width: 1200px) { .sr_otg .ProductOverviews-artBrowser { display: block; position: relative; top: 0; right: 0 !important; width: 82%; padding-left: 17%; min-width: 652px; margin-bottom: 1.8rem; visibility: hidden; } } .sr_otg .PhoneCase.ProductOverviews-artIphone { background: url("../images/sr_otg/empty_iphone.png"); height: 100%; background-repeat: no-repeat; background-size: contain; } @media (min-width: 480px) { .sr_otg .PhoneCase.ProductOverviews-artIphone { width: 28%; display: block; } } @media (min-width: 780px) { .sr_otg .PhoneCase.ProductOverviews-artIphone { bottom: -68px; } } @media (min-width: 1196px) { .sr_otg .PhoneCase.ProductOverviews-artIphone { bottom: -120px; } } @media (min-width: 1408px) { .sr_otg .PhoneCase.ProductOverviews-artIphone { bottom: -68px; } } .sr_otg .PhoneCase.ProductOverviews-artIphone img { width: 100%; } .sr_otg .PhoneCase-crop { width: 100%; overflow: hidden; margin-top: 28px; padding: 0px 8px; height: 202px; } @media (min-width: 500px) { .sr_otg .PhoneCase-crop { margin-top: 30px; padding: 0px 8px; height: 222px; } } @media (min-width: 520px) { .sr_otg .PhoneCase-crop { margin-top: 31px; } } @media (min-width: 540px) { .sr_otg .PhoneCase-crop { padding: 0px 9px; margin-top: 32px; height: 247px; } } @media (min-width: 580px) { .sr_otg .PhoneCase-crop { margin-top: 34px; } } @media (min-width: 630px) { .sr_otg .PhoneCase-crop { padding: 0 10px; margin-top: 40px; height: 290px; } } @media (min-width: 725px) { .sr_otg .PhoneCase-crop { margin-top: 44px; height: 332px; } } @media (min-width: 800px) { .sr_otg .PhoneCase-crop { height: 345px; } } @media (min-width: 835px) { .sr_otg .PhoneCase-crop { padding: 0 13px; height: 347px; margin-top: 53px; } } @media (min-width: 1196px) { .sr_otg .PhoneCase-crop { padding: 0 11px; height: 312px; margin-top: 46px; } } @media (min-width: 1408px) { .sr_otg .PhoneCase-crop { height: 360px; padding: 0 13px; } } .sr_otg .ProductOverviews-artIphone { visibility: hidden; display: none; position: absolute; bottom: -57px; left: 0px; width: 28%; } @media (min-width: 480px) { .sr_otg .ProductOverviews-artIphone { display: block; } } @keyframes slideUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); /*opacity: 0;*/ } 50% { -webkit-transform: translateY(-3%); transform: translateY(-3%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); /*opacity: 0;*/ } 50% { -webkit-transform: translateY(-3%); } 100% { -webkit-transform: translateY(0%); } } @keyframes slideLeft { 0% { -webkit-transform: translateX(150%); transform: translateX(150%); opacity: 1; } 50% { -webkit-transform: translateX(-2%); transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); opacity: 1; } 50% { -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } .sr_otg .ProductOverviews-details { border-top: 1px solid #dcdcdc; position: relative; background-color: white; } @media (max-width: 767px) { .sr_otg .ProductOverviews-detailsColumn { padding-left: 0; padding-right: 0; } } .sr_otg .ProductOverviews-detailsColumn img { margin-bottom: 1em; } .sr_otg .ProductOverviews-details img { width: 40px; height: auto; } @media (min-width: 768px) { .sr_otg .ProductOverviews-details img { height: 45px; width: auto; } } .sr_otg .SideIconWrapper { min-width: 40px; -webkit-box-sizing: content-box; box-sizing: content-box; } .sr_otg .OTGBtn, body.sr_otg.redirect_modal .sweet-alert button.sweet-confirm { padding: .7rem 1rem; border-radius: 2px; border: 2px solid transparent; /*text-transform: uppercase;*/ font-size: 17px; font-weight: 500; letter-spacing: .02em; text-decoration: none; display: inline-block; text-align: center; width: auto; margin: 0; -webkit-transition: all 0.15s ease 0s; transition: all 0.15s ease 0s; } .sr_otg .OTGBtn:hover, body.sr_otg.redirect_modal .sweet-alert button.sweet-confirm:hover { background-color: #218BE0; /*margin-top: -2px; margin-bottom: 2px;*/ -webkit-box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); text-decoration: none; } .sr_otg .OTGBtn--athlete { background-color: #11bbb5; color: white; border: 2px solid #11bbb5; } .sr_otg .OTGBtn--lightRed { padding-right: 33px; padding-left: 33px; } .sr_otg .OTGBtn--athlete:hover { background-color: #3ec8c3; border-color: #3ec8c3; } .sr_otg .OTGBtn--club { background-color: #1F80CE; color: white; border-color: #1F80CE; } .sr_otg .OTGBtn--club:hover { background-color: #218BE0; border-color: #218BE0; } .sr_otg .OTGBtn--whiteTransparent { background-color: transparent; color: white; border-color: white; } .sr_otg .OTGBtn--whiteTransparent:hover { border-color: white; background-color: white; color: #1F80CE; } .sr_otg .OTGBtn--clubTransparent { background-color: transparent; color: #1F80CE; border-color: #1F80CE; } .sr_otg .OTGBtn--clubTransparent:hover { border-color: #218BE0; color: white; } .sr_otg .OTGBtn--college { background-color: #2E285F; color: white; } .sr_otg .OTGBtn--college:hover { background-color: #413B6D; } .sr_otg .OTGBtn--lightRed { background-color: #FF6E53; color: white; } .sr_otg .OTGBtn--lightRed:hover { background-color: #ff8673; } .sr_otg .OTGBtn--lightRedTransparent { background-color: transparent; color: #FF6E53; border-color: #FF6E53; } .sr_otg .OTGBtn--lightRedTransparent:hover { border-color: #ff8673; color: white; } .sr_otg .OTGBtn--successGreen { background-color: #3acfa7; color: white; } .sr_otg .OTGBtn--successGreen:hover { background-color: #46e2b8; } .sr_otg .OTGBtn--large { padding: 1rem 1.7rem; border-radius: 3px; text-transform: inherit; font-size: 18px; font-weight: 500; letter-spacing: 0.02em; } .sr_otg .OTGBtn--gray { background-color: #f1f1f1; border: 1px solid #dcdcdc; color: #595959; } .sr_otg .OTGBtn--gray:hover { background-color: #f1f1f1; } .sr_otg .OTGBtn--fullWidth { display: block; } .sr_otg .ProductOverviews-details { padding-top: 3.2rem; padding-bottom: 3.2rem; } @media (min-width: 768px) { .sr_otg .ProductOverviews-details { padding-bottom: 5rem; } } .sr_otg .ProductOverviews-detailsColumn + .ProductOverviews-detailsColumn { margin-top: 2.5rem; } @media (min-width: 768px) { .sr_otg .ProductOverviews-detailsColumn + .ProductOverviews-detailsColumn { margin-top: 0; } } .sr_otg .ProductOverviews-detailsColumn h4 { text-transform: uppercase; font-size: 15px; letter-spacing: .02em; font-weight: 900; color: #212C35; margin-top: 0; margin-bottom: .5em; } .sr_otg .ProductOverviews-detailsColumn p { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; color: #888888; line-height: 1.7em; margin-top: .5em; margin-bottom: .5em; } .sr_otg .ProductOverviews-detailsColumn a { color: #212C35; font-weight: 500; text-decoration: none; } .sr_otg .ProductOverviews-detailsColumn a:hover { color: #212C35; text-decoration: underline; } .sr_otg .Quote { font-size: 22px; font-weight: 300; line-height: 1.5em; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-bottom: .3rem; } @media (min-width: 768px) { .sr_otg .Quote { font-size: 40px; } } .sr_otg .QuoteCaret-left { position: absolute; left: 16px; bottom: 50%; color: #aeaeae; font-size: 18px; } .sr_otg .QuoteCaret-right { position: absolute; right: 16px; bottom: 50%; color: #aeaeae; font-size: 18px; } .sr_otg .TabContent-athlete .Quote { color: #11bbb5; } .sr_otg .TabContent-club .Quote { color: #1F80CE; } .sr_otg .TabContent-athlete { min-height: 2100px; } @media (min-width: 370px) { .sr_otg .TabContent-athlete { min-height: 1790px; } } @media (min-width: 400px) { .sr_otg .TabContent-athlete { min-height: 1750px; } } @media (min-width: 440px) { .sr_otg .TabContent-athlete { min-height: 1685px; } } @media (min-width: 500px) { .sr_otg .TabContent-athlete { min-height: 1580px; } } @media (min-width: 768px) { .sr_otg .TabContent-athlete { min-height: 1975px; } } @media (min-width: 880px) { .sr_otg .TabContent-athlete { min-height: 1960px; } } @media (min-width: 960px) { .sr_otg .TabContent-athlete { min-height: 1765px; } } @media (min-width: 1110px) { .sr_otg .TabContent-athlete { min-height: 1730px; } } @media (min-width: 1200px) { .sr_otg .TabContent-athlete { min-height: 1545px; } } @media (min-width: 1300px) { .sr_otg .TabContent-athlete { min-height: 1500px; } } .sr_otg .TabContent-club { min-height: 2000px; } @media (min-width: 370px) { .sr_otg .TabContent-club { min-height: 1885px; } } @media (min-width: 440px) { .sr_otg .TabContent-club { min-height: 1700px; } } @media (min-width: 490px) { .sr_otg .TabContent-club { min-height: 1680px; } } @media (min-width: 550px) { .sr_otg .TabContent-club { min-height: 1625px; } } @media (min-width: 768px) { .sr_otg .TabContent-club { min-height: 1845px; } } @media (min-width: 880px) { .sr_otg .TabContent-club { min-height: 1800px; } } @media (min-width: 960px) { .sr_otg .TabContent-club { min-height: 1780px; } } @media (min-width: 1040px) { .sr_otg .TabContent-club { min-height: 1725px; } } @media (min-width: 1200px) { .sr_otg .TabContent-club { min-height: 1475px; } } .sr_otg .QuoteOwner { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; color: #212C35; font-weight: 300; margin-bottom: 0; margin-top: 0.5rem; } .sr_otg .QuoteLogo { width: 150px; height: auto; margin-top: 1.35rem; } .sr_otg .PlaybookBg { background-color: white; background-image: url(../images/sr_otg/playbook_transparent_repeatable_bg.png); background-size: 900px; background-repeat: repeat-x; background-position: bottom; } @media (min-width: 768px) { .sr_otg .PlaybookBg { background-size: 1950px; } } .sr_otg .QuoteWrap { position: relative; background: white; margin-bottom: 1.6rem; border: 1px solid #dcdcdc; border-radius: 2px; padding: 1.5rem; } @media (min-width: 768px) { .sr_otg .QuoteWrap { padding: 2.5rem; } } .sr_otg .QuoteWrap:after, .sr_otg .QuoteWrap:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .sr_otg .QuoteWrap:after { border-color: rgba(136, 183, 213, 0); border-top-color: white; border-width: 14px; margin-left: -14px; } .sr_otg .QuoteWrap:before { border-color: rgba(194, 225, 245, 0); border-top-color: #dcdcdc; border-width: 16px; margin-left: -16px; } .sr_otg .TabContent-college .Quote { color: #2E285F; } .sr_otg .TabContent-college .PlaybookBg { min-height: 130px; margin-top: -3.5rem; background-position: top; } @media (min-width: 768px) { .sr_otg .TabContent-college .PlaybookBg { min-height: 280px; } } .sr_otg .CollegeGetStartedWrap { position: relative; background: white; margin-bottom: 3rem; border-radius: 2px; padding: 2rem 1rem 0; } @media (min-width: 768px) { .sr_otg .CollegeGetStartedWrap { padding: 4rem 2rem 0; } } .sr_otg .CollegeGetStartedWrap h4 { font-size: 52px; font-weight: 300; margin-top: 0; color: #2E285F; } .sr_otg .CollegeGetStartedWrap p { font-size: 24px; font-weight: 300; margin: 0; color: #888888; } .sr_otg .CollegeGetStartedWrap a { text-decoration: none; color: #212C35; font-weight: 400; } .sr_otg .CollegeGetStartedWrap a:hover { text-decoration: underline; } .sr_otg .StatsBlock { color: white; padding: 1.9rem 0rem; } @media (min-width: 768px) { .sr_otg .StatsBlock { padding: 5rem 0rem; } } .sr_otg .StatsBlock--athletes { background-color: #11bbb5; } .sr_otg .StatsBlock--club { background-color: #1F80CE; } .sr_otg .StatsBlock--college { background-color: #2E285F; } .sr_otg .StatsBlock-number { font-family: 'Oswald', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 300; font-size: 38px; line-height: 1.4em; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: flex-end; -webkit-box-pack: end; justify-content: flex-end; } .sr_otg .StatsBlock-number img { width: 16px; padding-left: 6px; margin-right: -10px; -webkit-box-sizing: content-box; box-sizing: content-box; } @media (min-width: 48em) { .sr_otg .StatsBlock-number img { margin-right: -22px; } } @media (min-width: 400px) { .sr_otg .StatsBlock-number { font-size: 48px; } } @media (min-width: 550px) { .sr_otg .StatsBlock-number { font-size: 60px; } } @media (min-width: 48em) { .sr_otg .StatsBlock-number { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } } @media (min-width: 1000px) { .sr_otg .StatsBlock-number { font-size: 72px; } } @media (min-width: 1400px) { .sr_otg .StatsBlock-number { font-size: 90px; } } .sr_otg .StatsBlock-userType { font-weight: 500; font-size: 18px; margin-bottom: .25em; } @media (min-width: 550px) { .sr_otg .StatsBlock-userType { font-size: 22px; } } .sr_otg .StatsBlock-onSR { font-weight: 400; font-size: 14px; margin-bottom: 1rem; } @media (min-width: 550px) { .sr_otg .StatsBlock-onSR { font-size: 16px; } } @media (max-width: 767px) { .sr_otg .StatsBlock-onSR { margin-bottom: 0; } } .sr_otg .StatsHR { background-color: white; height: 4px; width: 16px; margin: .8rem auto 1.3rem auto; display: none; } @media (min-width: 768px) { .sr_otg .StatsHR { display: block; } } .sr_otg .OnPageDemoForm p { font-weight: 300; line-height: 1.4em; color: #595959; } .sr_otg .OnPageDemoForm-btn > button, .sr_otg .OnPageDemoForm-btn > a { display: block; padding: 16rem .5rem 3rem .5rem; text-decoration: none; background-color: white; color: #888888; font-size: 26px; font-weight: 300; border: 1px solid #dcdcdc; border-radius: 2px; max-width: 518px; -webkit-transition: 0.3s margin, 0.3s background-color; transition: 0.3s margin, 0.3s background-color; margin: 0 auto; } .sr_otg .OnPageDemoForm-btnWrap { max-width: 1400px; margin: 0 auto; } .sr_otg .OnPageDemoForm-btn > button:hover, .sr_otg .OnPageDemoForm-btn > a:hover { color: white; margin-top: -6px; margin-bottom: 6px; -webkit-box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); } .sr_otg .OnPageDemoForm-btn--athlete, .sr_otg .OnPageDemoForm-btn--club { background-repeat: no-repeat; background-size: auto 154px; background-position: 50% 3.5rem; } .sr_otg .OnPageDemoForm-btn--athlete { background-image: url(../images/sr_otg/athlete_user_icon_outline_b8b8b8.svg); } .sr_otg .OnPageDemoForm-btn--athlete:hover { background-image: url(../images/sr_otg/athlete_user_icon_filled_white.svg); border-color: #11bbb5; background-color: #11bbb5; } .sr_otg .OnPageDemoForm-btn--club { background-image: url(../images/sr_otg/club_user_icon_outline_b8b8b8.svg); } .sr_otg .OnPageDemoForm-btn--club:hover { background-image: url(../images/sr_otg/club_user_icon_filled_white.svg); border-color: #1F80CE; background-color: #1F80CE; } @media (max-width: 767px) { .sr_otg .OnPageDemoForm-btn:first-of-type { margin-bottom: 1rem; } } .sr_otg .Footer { background-color: black; color: white; } @media (max-width: 767px) { .sr_otg .Footer { text-align: center; } } .sr_otg .Footer-copyright { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: #5c5c5c; font-weight: 500; border-top: 1px solid #5c5c5c; margin-top: 1.8rem; padding-top: 2rem; } .sr_otg .Footer-copyright a { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: #5c5c5c; font-weight: 500; text-decoration: none; } .sr_otg .Footer-copyright a:hover { text-decoration: underline; } .sr_otg .Footer-copyright .box { margin-bottom: .8rem; } .sr_otg .Footer-linkList { list-style: none; margin: 0 0 1.5rem 0; padding: 0; } @media (min-width: 768px) { .sr_otg .Footer-linkList { margin: 0 0 0 0; } } .sr_otg .Footer-linkList li a { display: block; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; letter-spacing: .01rem; padding: .5rem 0; color: #888888; text-decoration: none; } .sr_otg .Footer-linkList li a:hover { text-decoration: underline; } .sr_otg .Footer-linksListHeading { font-size: 13px; font-family: 'Oswald', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 500; padding: 0; color: #888888; } .sr_otg .Footer-hr { width: 10px; height: 3px; background-color: #CE4B28; margin: .8rem 0 .4rem 0; } @media (max-width: 767px) { .sr_otg .Footer-hr { margin-left: auto; margin-right: auto; } } .sr_otg .Footer-socialLink { display: inline-block; } .sr_otg .Footer-socialLink .fa { font-size: 21px; margin: .7rem .3rem; } .sr_otg .Footer-socialLink--twitter:hover { color: #4099FF; cursor: pointer; } .sr_otg .Footer-socialLink--instagram:hover { color: white; cursor: pointer; } .sr_otg .Footer-socialLink--facebook:hover { color: #3b5998; cursor: pointer; } .sr_otg .Footer-socialLink--linkedin:hover { color: #007bb6; cursor: pointer; } .sr_otg .Footer-socialLink--youtube:hover { color: #e52d27; cursor: pointer; } .sr_otg .Footer-logo { width: 180px; height: auto; } .sr_otg .ATF-clubBlock { width: 100%; max-width: 1400px; margin: 0 auto; padding: 32px 15px; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 768px) { .sr_otg .ATF-clubBlock { padding: 32px 30px; } } @media (min-width: 1200px) { .sr_otg .ATF-clubBlock { text-align: left; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .sr_otg .ATF-clubBlock-btns .OTGBtn:first-of-type, body.sr_otg.redirect_modal .ATF-clubBlock-btns .sweet-alert button.sweet-confirm:first-of-type, body.sr_otg.redirect_modal .sweet-alert .ATF-clubBlock-btns button.sweet-confirm:first-of-type { margin: 20px auto 10px; } @media (min-width: 1200px) { .sr_otg .ATF-clubBlock-btns .OTGBtn:first-of-type, body.sr_otg.redirect_modal .ATF-clubBlock-btns .sweet-alert button.sweet-confirm:first-of-type, body.sr_otg.redirect_modal .sweet-alert .ATF-clubBlock-btns button.sweet-confirm:first-of-type { margin: 0; width: auto; } } .sr_otg .ATF-clubBlock h3 { margin-bottom: 0; font-weight: 400; font-size: 24px; letter-spacing: 0; line-height: 1.4; padding: 0 15px 0 0; } .sr_otg .VideoContainer-copy h1 { font-size: 38px; } @media (min-width: 500px) { .sr_otg .VideoContainer-copy h1 { font-size: 50px; } } @media (min-width: 768px) { .sr_otg .VideoContainer-copy h1 { font-size: 64px; } } .sr_otg .VideoContainer-copy p { font-size: 18px; } @media (min-width: 500px) { .sr_otg .VideoContainer-copy p { font-size: 20px; } } .sr_otg .VideoContainer-copy { padding: 0 2rem; } .sr_otg .top-level { padding: 60px 0; } .sr_otg .gray-bg { background: #f1f1f1; } .sr_otg .text-center { text-align: center; } .sr_otg .container { margin-left: auto; margin-right: auto; } .sr_otg input.form-required, .sr_otg .SelectDropdown.form-required { border-color: #e3b44d !important; } .sr_otg input.form-required::-webkit-input-placeholder, .sr_otg .SelectDropdown.form-required::-webkit-input-placeholder { color: #e3b44d; font-style: italic; } .sr_otg input.form-error, .sr_otg .SelectDropdown.form-error { border-color: #ff0000 !important; } .sr_otg input.form-error::-webkit-input-placeholder, .sr_otg .SelectDropdown.form-error::-webkit-input-placeholder { color: #ff0000; font-style: italic; } .sr_otg input, .sr_otg .SelectDropdown { border: 2px solid #e8e8e8; } .sr_otg .disabled-field { cursor: not-allowed !important; opacity: 0.6; } .sr_otg button[disabled="disabled"], .sr_otg button[disabled="disabled"]:hover { background: #999; color: #555; cursor: not-allowed !important; } .sr_otg .schedule-demo .hide, .sr_otg .DemoSection .hide { display: none !important; } .sr_otg .schedule-demo form, .sr_otg .schedule-demo .morph-content, .sr_otg .DemoSection form, .sr_otg .DemoSection .morph-content { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .sr_otg .schedule-demo .block-row, .sr_otg .DemoSection .block-row { width: 100%; display: block; } .sr_otg .schedule-demo .btn-pill, .sr_otg .DemoSection .btn-pill { border-radius: 500px; padding: 10px 22px; font-family: 'Oswald', 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: 400; font-size: 16px; color: #CE4A27; border: 1px solid #CE4A27 !important; text-transform: uppercase; background-color: transparent; background-image: none; -webkit-transition: background .3s ease-in-out, border .3s ease-in-out; transition: background .3s ease-in-out, border .3s ease-in-out; text-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .sr_otg .schedule-demo .btn-pill:hover, .sr_otg .DemoSection .btn-pill:hover { color: #fff; border: 1px solid #CE4A27; background-color: #CE4A27; } .sr_otg .schedule-demo .block-half-col, .sr_otg .DemoSection .block-half-col { width: 41.6%; left: 8.3%; display: block; } .sr_otg .schedule-demo .row + p, .sr_otg .DemoSection .row + p { font-weight: 300; font-size: 18px; line-height: 1.4em; color: #595959; } .sr_otg .schedule-demo input, .sr_otg .schedule-demo .SelectDropdown, .sr_otg .DemoSection input, .sr_otg .DemoSection .SelectDropdown { font-family: "Roboto", helvetica, arial, sans-serif; padding: 10px !important; font-size: 16px !important; margin-bottom: 20px; border-radius: 4px; } .sr_otg .schedule-demo input:focus, .sr_otg .schedule-demo .SelectDropdown:focus, .sr_otg .DemoSection input:focus, .sr_otg .DemoSection .SelectDropdown:focus { border-color: rgba(82, 168, 236, 0.8); } .sr_otg .schedule-demo .submit, .sr_otg .DemoSection .submit { margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 25px; } /* Uncomment and set these variables to customize the grid. */ .container-fluid { margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } .row { -webkit-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -1rem; margin-left: -1rem; } .row.reverse { -ms-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; } .col.reverse { -ms-flex-direction: column-reverse; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; } .col-xs { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-xs-1 { -ms-flex-preferred-size: 8.333%; flex-basis: 8.333%; max-width: 8.333%; } .col-xs-2 { -ms-flex-preferred-size: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } .col-xs-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-xs-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } .col-xs-5 { -ms-flex-preferred-size: 41.667%; flex-basis: 41.667%; max-width: 41.667%; } .col-xs-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-xs-7 { -ms-flex-preferred-size: 58.333%; flex-basis: 58.333%; max-width: 58.333%; } .col-xs-8 { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } .col-xs-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-xs-10 { -ms-flex-preferred-size: 83.333%; flex-basis: 83.333%; max-width: 83.333%; } .col-xs-11 { -ms-flex-preferred-size: 91.667%; flex-basis: 91.667%; max-width: 91.667%; } .col-xs-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-xs-offset-1 { margin-left: 8.333%; } .col-xs-offset-2 { margin-left: 16.667%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-4 { margin-left: 33.333%; } .col-xs-offset-5 { margin-left: 41.667%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-7 { margin-left: 58.333%; } .col-xs-offset-8 { margin-left: 66.667%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-10 { margin-left: 83.333%; } .col-xs-offset-11 { margin-left: 91.667%; } .start-xs { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; text-align: start; } .center-xs { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } .end-xs { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; text-align: end; } .top-xs { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; } .middle-xs { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .bottom-xs { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; } .around-xs { -ms-flex-pack: distribute; justify-content: space-around; } .between-xs { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .first-xs { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } .last-xs { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } @media only screen and (min-width: 48em) { .container { width: 46rem; } .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; } .col-sm { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-sm-1 { -ms-flex-preferred-size: 8.333%; flex-basis: 8.333%; max-width: 8.333%; } .col-sm-2 { -ms-flex-preferred-size: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } .col-sm-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-sm-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } .col-sm-5 { -ms-flex-preferred-size: 41.667%; flex-basis: 41.667%; max-width: 41.667%; } .col-sm-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-sm-7 { -ms-flex-preferred-size: 58.333%; flex-basis: 58.333%; max-width: 58.333%; } .col-sm-8 { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } .col-sm-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-sm-10 { -ms-flex-preferred-size: 83.333%; flex-basis: 83.333%; max-width: 83.333%; } .col-sm-11 { -ms-flex-preferred-size: 91.667%; flex-basis: 91.667%; max-width: 91.667%; } .col-sm-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-sm-offset-1 { margin-left: 8.333%; } .col-sm-offset-2 { margin-left: 16.667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.333%; } .col-sm-offset-5 { margin-left: 41.667%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-7 { margin-left: 58.333%; } .col-sm-offset-8 { margin-left: 66.667%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-10 { margin-left: 83.333%; } .col-sm-offset-11 { margin-left: 91.667%; } .start-sm { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; text-align: start; } .center-sm { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } .end-sm { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; text-align: end; } .top-sm { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; } .middle-sm { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .bottom-sm { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; } .around-sm { -ms-flex-pack: distribute; justify-content: space-around; } .between-sm { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .first-sm { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } .last-sm { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } } @media only screen and (min-width: 62em) { .container { width: 61rem; } .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .morph-button-fixed, .morph-button-fixed .morph-content, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; } .col-md { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-md-1 { -ms-flex-preferred-size: 8.333%; flex-basis: 8.333%; max-width: 8.333%; } .col-md-2 { -ms-flex-preferred-size: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } .col-md-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-md-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } .col-md-5, .morph-button-fixed, .morph-button-fixed .morph-content { -ms-flex-preferred-size: 41.667%; flex-basis: 41.667%; max-width: 41.667%; } .col-md-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-md-7 { -ms-flex-preferred-size: 58.333%; flex-basis: 58.333%; max-width: 58.333%; } .col-md-8 { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } .col-md-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-md-10 { -ms-flex-preferred-size: 83.333%; flex-basis: 83.333%; max-width: 83.333%; } .col-md-11 { -ms-flex-preferred-size: 91.667%; flex-basis: 91.667%; max-width: 91.667%; } .col-md-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-md-offset-1 { margin-left: 8.333%; } .col-md-offset-2 { margin-left: 16.667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.333%; } .col-md-offset-5 { margin-left: 41.667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.333%; } .col-md-offset-8 { margin-left: 66.667%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.333%; } .col-md-offset-11 { margin-left: 91.667%; } .start-md { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; text-align: start; } .center-md { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } .end-md { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; text-align: end; } .top-md { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; } .middle-md { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .bottom-md { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; } .around-md { -ms-flex-pack: distribute; justify-content: space-around; } .between-md { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .first-md { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } .last-md { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } } @media only screen and (min-width: 75em) { .container { width: 71rem; } .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; } .col-lg { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-lg-1 { -ms-flex-preferred-size: 8.333%; flex-basis: 8.333%; max-width: 8.333%; } .col-lg-2 { -ms-flex-preferred-size: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } .col-lg-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-lg-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } .col-lg-5 { -ms-flex-preferred-size: 41.667%; flex-basis: 41.667%; max-width: 41.667%; } .col-lg-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-lg-7 { -ms-flex-preferred-size: 58.333%; flex-basis: 58.333%; max-width: 58.333%; } .col-lg-8 { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } .col-lg-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-lg-10 { -ms-flex-preferred-size: 83.333%; flex-basis: 83.333%; max-width: 83.333%; } .col-lg-11 { -ms-flex-preferred-size: 91.667%; flex-basis: 91.667%; max-width: 91.667%; } .col-lg-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-lg-offset-1 { margin-left: 8.333%; } .col-lg-offset-2 { margin-left: 16.667%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.333%; } .col-lg-offset-5 { margin-left: 41.667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.333%; } .col-lg-offset-8 { margin-left: 66.667%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.333%; } .col-lg-offset-11 { margin-left: 91.667%; } .start-lg { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; text-align: start; } .center-lg { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } .end-lg { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; text-align: end; } .top-lg { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; } .middle-lg { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .bottom-lg { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; } .around-lg { -ms-flex-pack: distribute; justify-content: space-around; } .between-lg { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .first-lg { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } .last-lg { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } } .morph-button-modal.open .morph-content { top: 50% !important; left: 50% !important; width: 600px; height: 662px; max-width: 100%; background: #f1f1f1; border-radius: 2px; margin-top: -331px; margin-left: -300px; -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; } @media (min-width: 621px) { .morph-button-modal.open .morph-content.is-player { height: 599px; margin-top: -300px; } .morph-button-modal.open .morph-content.is-member { height: 300px; margin-top: -150px; } } .morph-button { position: relative; display: block; } .morph-button.open > button { pointer-events: none; } .morph-content { pointer-events: none; } .morph-button.open .morph-content { pointer-events: auto; } /* Common styles for overlay and modal type (fixed morph) */ .morph-button-fixed, .morph-button-fixed .morph-content { padding: 0 15px; height: 338px; } .morph-button-fixed > button { width: 100%; height: 100%; -webkit-transition: opacity 0.1s 0.5s; transition: opacity 0.1s 0.5s; } .morph-button-fixed.open > button { opacity: 0; -webkit-transition: opacity 0.1s; transition: opacity 0.1s; } .morph-button-fixed .morph-content { position: fixed; z-index: 900; opacity: 0; -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; } .morph-button-fixed.open .morph-content { opacity: 1; } .morph-button-fixed .morph-content > div { visibility: hidden; height: 0; opacity: 0; -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; } .morph-button-fixed.open .morph-content > div { visibility: visible; height: auto; opacity: 1; -webkit-transition: opacity 0.3s 0.5s; transition: opacity 0.3s 0.5s; } .morph-button-fixed.active > button { z-index: 2000; } .morph-button-fixed.active .morph-content { z-index: 1900; } /* Morph Button Style: Modal */ .morph-button-modal::before { position: fixed; top: 0; left: 0; z-index: 800; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); content: ''; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; pointer-events: none; } .morph-button-modal.open::before { opacity: 1; pointer-events: auto; } .morph-button-modal.active::before { z-index: 1800; } .morph-button-modal .morph-content { overflow: hidden; -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; } .morph-button-modal.open .morph-content > div { -webkit-transition: opacity 0.3s 0.3s; transition: opacity 0.3s 0.3s; } /* Let's add some nice easing for all cases */ .morph-button .morph-content, .morph-button.open .morph-content { -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } /* Helper classes */ .noscroll { overflow: hidden; } .morph-button-overlay.scroll .morph-content { overflow-y: scroll; } .morph-button-sidebar.scroll .morph-content { overflow: auto; } .no-transition { -webkit-transition: none !important; transition: none !important; } /* Media Queries */ @media (max-width: 620px) { .morph-button-modal.open .morph-content { top: 0% !important; left: 0% !important; margin: 0; width: 100%; height: 100%; overflow-y: scroll; -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; } body.morphing-modal-open { overflow: hidden; } } @media (max-height: 682px) { .morph-button-modal.open .morph-content { top: 0% !important; left: 0% !important; margin: 0; margin-top: 0 !important; width: 100% !important; height: 100% !important; overflow-y: scroll; -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; } .morph-button-modal.open .morph-content .form-holder { max-width: 350px; margin: auto; } body.morphing-modal-open { overflow: hidden; } } /* Style for form modal */ .icon-close { z-index: 100; display: block; overflow: hidden; width: 3em; height: 3em; text-align: center; line-height: 3; cursor: pointer; color: #777; } .content-style-form .icon-close { position: absolute; background: none; top: 0; right: -15px; font-size: 16px; padding: 10px; } .content-style-form .icon-close:hover { color: #e75854; } .content-style-form { position: relative; text-align: center; padding: 15px; } .content-style-form input, .content-style-form .SelectDropdown { padding: 10px; max-width: 325px; width: 100%; font-family: "Roboto", helvetica, arial, sans-serif; font-weight: 300; } .content-style-form-1 p:first-child { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .content-style-form-1 p:nth-child(2) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } .content-style-form-1 p:nth-child(3) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .morph-button.open .content-style-form-1 h2, .morph-button.open .content-style-form-1 p, .morph-button.open .content-style-form-1 .icon-close { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .morph-button-modal .morph-content { background: #fff; } .dropdown { position: relative; } .open > .dropdown-menu { display: block; } .dropdown-menu { position: absolute; display: none; float: left; list-style: none; font-size: 16px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; text-align: left; } .btn { display: inline-block; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; white-space: nowrap; line-height: 1.42857; } .btn .caret { margin-left: 0; } .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 5px dashed; border-right: 5px solid transparent; border-left: 5px solid transparent; } .SelectDropdown { width: 100%; -webkit-appearance: none; outline: none; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E") right 12px center no-repeat; /* Hide arrow on FF */ -moz-appearance: none; text-indent: 0.01px; text-overflow: ellipsis; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 12px 38px 12px 14px; /* You can style text of the active select option */ color: black; font-size: 20px; font-weight: 300; } body.sr_otg ul, body.sr_otg li { list-style: none; } body.sr_otg .DemoForm-btn { line-height: normal; } body.sr_otg .DemoForm-btn:hover p, body.sr_otg .DemoForm-btn:hover h3 { color: #fff !important; } body.sr_otg .morph-button { margin-bottom: 20px; } body.sr_otg .morph-button:last-child { margin-bottom: 0; } @media (min-width: 992px) { body.sr_otg .morph-button { margin-bottom: 0; } } body.sr_otg .modal-dialog.multi-user-forms { height: 100%; } body.sr_otg .is-full-width { width: 100%; margin-bottom: 20px; } body.sr_otg .is-full-width:last-child { margin-bottom: 0; } body.sr_otg .schedule-demo.multi-user-modal { max-width: 900px; padding: 15px; visibility: visible; -webkit-animation-name: fadeIn; animation-name: fadeIn; background: #f1f1f1 !important; border-radius: 2px; } body.sr_otg .schedule-demo.multi-user-modal .close { font-size: 16px; color: #777; text-shadow: none; opacity: 1; top: 0 !important; right: 0 !important; padding: 10px; z-index: 99; position: absolute; } body.sr_otg .schedule-demo.multi-user-modal .close:hover { color: #e75854; } body.sr_otg .schedule-demo.multi-user-modal .ModalDemoHeader { font-family: "Roboto", helvetica, arial, sans-serif; color: #000000; font-size: 16px; font-weight: 300; margin-top: 0; line-height: 1.55; margin-top: 25px; margin-bottom: 10px; padding: 0 20px; text-align: center; -webkit-font-smoothing: auto; } body.sr_otg .schedule-demo.multi-user-modal .morph-button-modal::before { height: 1000px; } body.sr_otg .schedule-demo.multi-user-modal .morph-button-modal { margin-top: 20px; margin-bottom: 0; } body.sr_otg .schedule-demo.multi-user-modal .morph-button-modal:last-child { margin-bottom: 20px; } body.sr_otg .dropdown div.selected { color: #000; text-transform: capitalize; } body.sr_otg .dropdown div#selected { float: left; } body.sr_otg .dropdown .caret { border-top: 6px solid #000; border-right: 6px solid transparent; border-left: 6px solid transparent; } body.sr_otg .dropdown.open .caret { border-bottom: 6px solid #000; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: none; } body.sr_otg .dropdown.open .dropdown-toggle { border: 2px solid #e8e8e8; } body.sr_otg .content-style-form p { font-family: "Roboto", helvetica, arial, sans-serif; color: #000000; font-size: 17px; font-weight: 300; margin-top: 0; margin-bottom: 26px; padding-top: 25px; line-height: 1.55; } body.sr_otg .modal-form-content { width: 100%; padding: 20px; padding-bottom: 10px; text-align: center; margin: auto; } body.sr_otg .modal-form-content .multi-user-dropdown, body.sr_otg .modal-form-content .dropdown-toggle, body.sr_otg .modal-form-content .dropdown-menu, body.sr_otg .modal-form-content .sr-dropdown { max-width: none !important; } body.sr_otg .modal-form-content input, body.sr_otg .modal-form-content .multi-user-dropdown, body.sr_otg .modal-form-content .sr-dropdown { width: 100%; } body.sr_otg .modal-form-content input { padding: 10px; font-family: "Roboto", helvetica, arial, sans-serif; font-weight: 300; } @media (min-width: 768px) { body.sr_otg .modal-form-content { text-align: left; } body.sr_otg .modal-form-content .column:nth-child(even) { float: right; } } body.sr_otg .multi-user-dropdown, body.sr_otg .sr-dropdown { width: 100%; max-width: 325px; margin: auto; } body.sr_otg .multi-user-dropdown .dropdown-menu, body.sr_otg .sr-dropdown .dropdown-menu { max-width: 320px; width: 100%; left: 0; top: 44px; border: 1px solid #e8e8e8; } body.sr_otg .multi-user-dropdown .dropdown-menu li, body.sr_otg .sr-dropdown .dropdown-menu li { padding: 10px; width: 100%; } body.sr_otg .multi-user-dropdown .dropdown-menu li > a, body.sr_otg .sr-dropdown .dropdown-menu li > a { color: #555; font-family: "Roboto", helvetica, arial, sans-serif; font-weight: 300; } body.sr_otg .filter-settings .dropdown-menu { -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1); border-radius: 2px; padding: 5px 0; z-index: 98; overflow: scroll; min-width: 0; } body.sr_otg .filter-settings .dropdown-menu li { line-height: auto; padding: 5px 10px; cursor: pointer; } body.sr_otg .filter-settings .dropdown-menu li > a { max-height: 300px; font-family: "Roboto", helvetica, arial, sans-serif; line-height: auto; color: #000000; } body.sr_otg .filter-settings .dropdown-menu li:hover, body.sr_otg .filter-settings .dropdown-menu li:focus, body.sr_otg .filter-settings .dropdown-menu li > a:hover, body.sr_otg .filter-settings .dropdown-menu li > a:focus { background-color: #F1F1F1; outline: none; } body.sr_otg .filter-settings .dropdown-menu li.selected { background-color: #F1F1F1; outline: none; } @media (min-width: 768px) { body.sr_otg .filter-settings .dropdown-menu { border: 1px solid #DCDCDC; } } body.sr_otg .dropdown-toggle { background-image: none; font-size: 16px; font-weight: 400; color: #000; text-align: left; padding: 10px; padding: 10px 14px 10px 12px; border-radius: 2px; font-weight: 300; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-shadow: none; -webkit-box-shadow: none; box-shadow: none; max-width: 325px; width: 100%; border: 2px solid #e8e8e8; margin-bottom: 10px; outline: none; } body.sr_otg .dropdown-toggle .selected { color: #000; } body.sr_otg .caret-style { float: right; } body.sr_otg .sweet-alert { padding: 30px !important; color: #494949; font-family: "Roboto", helvetica, arial, sans-serif; } @media (max-width: 524px) { body.sr_otg .sweet-alert { width: calc(100% - 24px) !important; margin-left: 12px !important; margin-right: 12px !important; left: 0 !important; } } body.sr_otg .sweet-alert .sweet-icon { margin-top: 10px; margin-bottom: 0; } body.sr_otg .sweet-alert h2 { font-size: 30px; font-weight: 300; margin-bottom: 20px; margin-top: 20px; text-align: center; line-height: 1em; color: #494949; } body.sr_otg .sweet-alert p { font-size: 16px; font-weight: 300; margin-bottom: 10px; text-align: center; } body.sr_otg .sweet-alert .sweet-spacer { display: none; height: 0; margin: 0; padding: 0; visibility: hidden; } body.sr_otg .sweet-alert .sweet-close { display: block; position: absolute; top: -4px; right: 0; padding: 10px; font-size: 16px; font-family: fontAwesome; line-height: 18px; color: #777; } body.sr_otg .sweet-alert .sweet-close:hover { color: #e75854; } body.sr_otg.redirect_modal .sweet-alert { z-index: 3000; padding: 30px 25px !important; padding-top: 10px !important; } @media (min-width: 630px) { body.sr_otg.redirect_modal .sweet-alert { width: 100% !important; max-width: 600px !important; margin-left: -300px !important; } } body.sr_otg.redirect_modal .sweet-alert .nonSEOH1 { font-size: 26px; font-family: "Roboto", helvetica, arial, sans-serif; color: #212C35; margin-bottom: 12px; } body.sr_otg.redirect_modal .sweet-alert p { font-size: 19px !important; font-weight: 300 !important; font-family: "Roboto", helvetica, arial, sans-serif; color: #707c80; margin-bottom: 25px; } body.sr_otg.redirect_modal .sweet-alert button.sweet-confirm { background-color: #67D5B5 !important; border: 2px solid #67D5B5 !important; } body.sr_otg.redirect_modal .sweet-alert button.sweet-confirm:hover { -webkit-box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); background-color: #79DABE !important; border-color: #79DABE !important; } @media (max-height: 496px) { body.modal-open { overflow: hidden; } } @media (max-width: 768px) { body.modal-open { overflow: hidden; } } .sr_otg .modal-form-container .MultiUserModal-btn { cursor: pointer; padding: 20px 10px; background: #fff; border: 1px solid #dcdcdc; border-radius: 2px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .sr_otg .modal-form-container .MultiUserModal-btn h3 { margin-bottom: 0; margin: auto; } @media (max-width: 525px) { .sr_otg .modal-form-container .MultiUserModal-btn h3 { font-size: 22px; } } .sr_otg .modal-form-container .MultiUserModal-btn:hover { -webkit-box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); color: #fff; } .sr_otg .modal-form-container .MultiUserModal-btn:hover h3 { color: #fff; } .sr_otg .modal-form-container .MultiUserModal-btn.is-club-staff:hover { border-color: #1F80CE; background-color: #1F80CE; } .sr_otg .modal-form-container .MultiUserModal-btn.is-player:hover { border-color: #11bbb5; background-color: #11bbb5; } .sr_otg .modal-form-container .morph-button-fixed, .sr_otg .modal-form-container .morph-button-fixed .morph-content { height: 133px; max-width: none; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .sr_otg .modal-form-container .dropdown { height: 54px; } .sr_otg .modal-form-container input { line-height: 20px; } .sr_otg .modal-form-container .submit { margin-top: 0px; margin-bottom: 25px; } .sr_otg .modal-open.hide-overflow { overflow: hidden; } .sr_otg #request-demo .modal-dialog { width: 100%; margin: 0; position: fixed; top: 0%; left: 0%; margin-top: 0; width: 100%; height: 100%; overflow: scroll; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } @media (min-width: 768px) { .sr_otg #request-demo .modal-dialog { width: 600px; top: 50%; left: 50%; margin-top: -220px; overflow: hidden; margin-left: auto; margin-right: auto; } .sr_otg #request-demo .modal-dialog.club-type-chosen { margin-top: -333px; } .sr_otg #request-demo .modal-dialog.player-type-chosen { margin-top: -301px; } .sr_otg #request-demo .modal-dialog.member-type-chosen { margin-top: -140px; } } @media (max-height: 682px) { .sr_otg #request-demo .modal-dialog { top: 0%; width: 100%; height: 100%; margin-top: 0 !important; overflow: scroll; } } .sr_otg #request-demo .modal-dialog .schedule-demo { width: 100%; background: #f1f1f1 !important; min-height: 100%; padding: 15px !important; } @media (min-width: 992px) { .sr_otg #request-demo .modal-dialog .schedule-demo .col-md-4 { width: 41.66667%; } .sr_otg #request-demo .modal-dialog .schedule-demo .col-md-push-2 { left: 8.33333%; } } @media (min-width: 768px) { .sr_otg #request-demo .modal-dialog .schedule-demo { width: 600px; min-height: 0; max-width: 600px; } } @media (max-height: 682px) { .sr_otg #request-demo .modal-dialog .schedule-demo { min-height: 100%; width: 100%; max-width: none !important; } } .sr_otg #request-demo .modal-dialog .row { margin-left: auto; margin-right: auto; } .sr_otg #request-demo .modal-dialog p.lead { padding: 0 15px; } .sr_otg #request-demo .close { right: 10px; top: 10px; font-size: 16px; -webkit-font-smoothing: auto; } @media (min-width: 768px) { .sr_otg #request-demo .row { margin-left: -15px; margin-right: -15px; } } .sr_otg .modal { display: none; overflow: hidden; position: fixed; background: transparent; width: auto; top: 0; right: 0; bottom: 0; z-index: 1050; border: none; -webkit-box-shadow: none; box-shadow: none; max-height: none; left: 0; margin-left: 0; -webkit-overflow-scrolling: touch; outline: 0; } .sr_otg .modal#request-demo { top: 0; } .sr_otg .modal.fade { -webkit-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .sr_otg .modal.fade .modal-dialog { -webkit-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .sr_otg .modal.fade.in { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .sr_otg .modal.fade.in .modal-dialog { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .sr_otg .modal .OTGBtn--large { padding: 16px 27px; } .sr_otg .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .sr_otg .modal-content { position: relative; background-color: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); outline: 0; } .sr_otg .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } .sr_otg .modal-backdrop.fade { opacity: 0; } .sr_otg .modal-backdrop.in { opacity: 0.8; } .sr_otg .QuotePagination-wrap { margin-top: 1rem; } .sr_otg .QuotePagination-wrap li { font-size: 15px; color: #aeaeae; padding: .35rem; text-indent: 0; border: 1px solid #aeaeae; border-radius: 50%; } .sr_otg .QuotePagination-wrap li.active { margin: 1px; background: #aeaeae; } .sr_otg .carousel-indicators { bottom: -35px; } .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } body.is_transparent { background: transparent; } body.is_transparent #wrap { min-height: 100%; } .sr_otg .not_found_page .bkgnd-image-wrapper:after { content: ' '; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.9; background: #2f373e; } .sr_otg .not_found_page .bkgnd-image-wrapper img { width: 100%; height: 100%; position: absolute; } .sr_otg .not_found_page .not_found_content { position: absolute; left: 0; top: 0; text-align: center; margin: auto; width: 100%; height: 100%; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 99; } .sr_otg .not_found_page h1 { color: #fff; font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 50px; margin-bottom: 28px; font-weight: 400; text-transform: uppercase; max-width: 800px; width: 100%; padding: 0 15px; } @media (max-width: 767px) { .sr_otg .not_found_page h1 { font-size: 42px; } } .sr_otg .not_found_page h3 { color: #fff; font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 35px; margin-bottom: 28px; font-weight: 400; text-transform: uppercase; max-width: 800px; width: 100%; padding: 0 15px; } .sr_otg .pageHeading-xl { font-size: 34px; margin: 0 auto .8rem; } @media only screen and (min-width: 48em) { .sr_otg .pageHeading-xl { font-size: 50px; margin: 0 auto .8rem; } } .sr_otg .pageSubheading-xl { font-size: 18px; } @media only screen and (min-width: 48em) { .sr_otg .pageSubheading-xl { font-size: 23px; } } .sr_otg .pageHeading { font-size: 32px; font-weight: 300; margin-bottom: .8rem; font-family: "Roboto", helvetica, arial, sans-serif; } @media (min-width: 768px) { .sr_otg .pageHeading { font-size: 42px; } } @media (min-width: 1400px) { .sr_otg .pageHeading { font-size: 46px; } } .sr_otg .pageSubheading { font-size: 18px; font-weight: 300; color: #707c80; max-width: 950px; margin-left: auto; margin-right: auto; font-family: 'Roboto', 'Helvetica Neue', helvetica, arial, sans-serif; } @media (min-width: 768px) { .sr_otg .pageSubheading { font-size: 20px; } .sr_otg .pageSubSubHeading { font-size: 18px; } } .sr_otg .pageHeading-xl { font-size: 34px; margin: 0 auto .8rem; } @media only screen and (min-width: 48em) { .sr_otg .pageHeading-xl { font-size: 50px; margin: 0 auto .8rem; } } .sr_otg .pageSubheading-xl { font-size: 18px; } @media only screen and (min-width: 48em) { .sr_otg .pageSubheading-xl { font-size: 23px; } } .sr_otg .gray-bg { background-color: #f1f1f1; } .sr_otg .athlete-green-bg { background-color: #1FCE84; color: white !important; } .sr_otg .StandardHeroSection { padding: 11rem 1.5rem 4.5rem; color: white; } .sr_otg .StandardHeroSection--light { padding: 5rem 1.5rem 2rem; } .sr_otg .StandardContentSection { background-color: white; } .sr_otg .TermsWrap p { font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: 400; line-height: 1.8; font-size: 16px; margin-bottom: 1rem; margin-top: 0; color: #494949; } .sr_otg .TermsWrap p + h3 { margin-top: 60px; } .sr_otg .TermsWrap h3 { font-size: 28px; font-weight: 300; } .sr_otg .container-800 { margin-right: auto; margin-left: auto; max-width: 800px; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 840px) { .sr_otg .container-800 { margin-left: 1.2rem; margin-right: 1.2rem; } } .sr_otg { /*.breadcrumbs a { color: #30A9DE; }*/ /* Hide arrow on IE10*/ /* IE9: To hide select arrow we make the select overflow on the right side there is not another way :( */ /* -------------------------------- Main Components -------------------------------- */ /*@media only screen and (min-width: 768px) { .AthletePricingTable-features { width: auto; } .AthletePricingTable-features li { float: none; width: auto; padding: 1em; } }*/ /* -------------------------------- xkeyframes -------------------------------- */ /*EVENT PACAKGES*/ /*CLUB PRICING*/ /*BALOON SLIDER*/ /*BUBBLE*/ } .sr_otg a { color: #30A9DE; text-decoration: none; } .sr_otg .extraLightBlueLink { color: #6BD4FE; } .sr_otg .underBtnLink { margin-top: .8rem; margin-bottom: 0; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; color: #888888; font-size: 14px; } .sr_otg .parallelBtns p { display: block; margin: 1rem; } @media (min-width: 768px) { .sr_otg .parallelBtns p { display: inline-block; } } .sr_otg .u-clubBlueText { color: #1F80CE; } .sr_otg .breadcrumbs, .sr_otg .breadcrumbs a { color: #aeaeae; font-weight: 900; text-decoration: none; margin-bottom: 1.2rem; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; /*margin-top: -1rem;*/ } .sr_otg .breadcrumbs a:hover { text-decoration: underline; } .sr_otg .ClubPricing-sportSelect { width: 100%; max-width: 100%; margin: 1.2rem auto; overflow: hidden; border: 1px solid #dcdcdc; border-radius: 4px; /* */ background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E") right 12px center no-repeat; } @media (min-width: 768px) { .sr_otg .ClubPricing-sportSelect { margin: 2.2rem auto; min-width: 400px; width: 30%; } } .sr_otg .ClubPricing-sportSelect select { width: 100%; border: none; -webkit-box-shadow: none; box-shadow: none; background: transparent; background-image: none; -webkit-appearance: none; outline: none; cursor: pointer; /* Hide arrow on FF */ -moz-appearance: none; text-indent: 0.01px; text-overflow: ellipsis; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 12px 38px 12px 14px; /* You can style text of the active select option */ color: black; font-size: 20px; font-weight: 300; } @media (min-width: 768px) { .sr_otg .ClubPricing-sportSelect select { font-size: 22px; } } .sr_otg .ClubPricing-sportSelect select::-ms-expand { display: none; } .sr_otg .ClubPricing-sportSelect optgroup { color: inherit; font: inherit; } @media screen and (min-width: 0\0) { .sr_otg .ClubPricing-sportSelect select { width: calc( 100% + 58px); } } @media (min-width: 992px) { .sr_otg .u-md-hideElement { display: none !important; } .sr_otg .u-md-displayBlockElement { display: block !important; } } .sr_otg .ActiveNavClearance { height: 5rem; background-color: white; } @media (max-width: 767px) { .sr_otg .ActiveNavClearance { height: 3.7rem; } } .sr_otg .ExtraColPadding { padding: 0 1rem; } .sr_otg h1, .sr_otg h2, .sr_otg h3, .sr_otg h4, .sr_otg h5, .sr_otg h6, .sr_otg p { margin: 0 0 .8rem 0; color: #212C35; } .sr_otg h3 { font-size: 28px; font-weight: 300; /* margin: .3rem 0;*/ } .sr_otg h4 { font-size: 18px; font-weight: 300; } .sr_otg .athlete-green-bg { background-color: #1FCE84; color: white !important; } .sr_otg .StandardHeroSection { padding: 7rem 1.5rem 3.5rem; color: white; } @media (min-width: 768px) { .sr_otg .StandardHeroSection { padding: 11rem 1.5rem 4.5rem; } } .sr_otg .StandardHeroSection--light { padding: 5rem 1.5rem 2rem; } .sr_otg .StandardContentSection { background-color: white; } .sr_otg .MainPricing p { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; color: #888888; line-height: 1.7em; margin-top: .5em; margin-bottom: 1.5em; } @media (max-width: 767px) { .sr_otg .StackedColMargin + .StackedColMargin { margin-top: 3rem; } } .sr_otg .AthletePricingTable-container { width: 95%; margin: 0 auto; } .sr_otg .AthletePricingTable-switcher { text-align: center; margin: 1.5rem 0 2.5rem; } .sr_otg .AthletePricingTable-switcher .fieldset { display: inline-block; position: relative; padding: 2px; margin: 0 auto; border-radius: 50em; border: 2px solid #dcdcdc; background-color: white; } .sr_otg .AthletePricingTable-switcher input[type="radio"] { position: absolute; opacity: 0; } .sr_otg .AthletePricingTable-switcher label { position: relative; z-index: 1; display: inline-block; float: left; width: 90px; height: 36px; line-height: 36px; cursor: pointer; font-size: 15px; font-weight: 500; color: #494949; } .sr_otg .AthletePricingTable-switcher .cd-switch { /* floating background */ position: absolute; top: 2px; left: 2px; height: 36px; width: 90px; background-color: #dcdcdc; border-radius: 50em; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .sr_otg .AthletePricingTable-switcher input[type="radio"]:checked + label + .cd-switch, .sr_otg .AthletePricingTable-switcher input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch { /* use label:nth-of-type(n) to fix a bug on safari with multiple adjacent-sibling selectors*/ -webkit-transform: translateX(90px); transform: translateX(90px); } .sr_otg .no-js .AthletePricingTable-switcher { display: none; } .sr_otg .AthletePricingTable-switcherSimple { margin: .1rem 0 .5rem; } .sr_otg .AthletePricingTable-switcherSimple label { position: relative; z-index: 1; display: inline-block; float: left; width: 100%; height: auto; line-height: 1.6; cursor: pointer; font-size: 14px; font-weight: 400; color: #30A9DE; } .sr_otg .AthletePricingTable-switcherSimple .fieldset { display: inline-block; position: relative; padding: 0; border-radius: 0; border: 0; background-color: white; /* background-color: #aeaeae; */ } .sr_otg .AthletePricingTable-list { margin-top: 2rem; } .sr_otg .AthletePricingTable-card { padding: 0 .6rem; max-width: 500px; margin: 0 auto; } @media (max-width: 767px) { .sr_otg .AthletePricingTable-card + .AthletePricingTable-card { margin-top: 1.5rem; } } @media (min-width: 992px) { .sr_otg .AthletePricingTable-card + .AthletePricingTable-card { margin-top: 0; } } .sr_otg .AthletePricingTable-wrapper { /* this is the item that rotates */ position: relative; border-radius: 4px; } .sr_otg [data-type="yearly"], .sr_otg [data-type="monthly"] { border: 1px solid #dcdcdc; border-radius: 4px; } .sr_otg .AthletePricingTable-wrapper > li { border: 1px solid #dcdcdc; border-radius: 4px; } .sr_otg .AthletePricingTable-wrapper .AthletePricingTable-bronze { border-top: 7px solid #d26d32; } .sr_otg .AthletePricingTable-wrapper .AthletePricingTable-silver { border-top: 7px solid #bcc5c7; } .sr_otg .AthletePricingTable-wrapper .AthletePricingTable-gold { border-top: 7px solid #ecc23c; } .sr_otg .AthletePricingTable-wrapper .AthletePricingTable-platinum { border-top: 7px solid #7f9399; } .sr_otg .AthletePricingTable-wrapper .AthletePricingTable-film { border-top: 7px solid #49bae7; } .sr_otg .AthletePricingTable-wrapper .AthletePricingTable-registration { border-top: 7px solid #1abc9c; } .sr_otg .AthletePricingTable-wrapper .AthletePricingTable-fullPackage { border-top: 7px solid #1bbd9d; } .sr_otg .PopularPackage { -webkit-box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, 0.2); } .sr_otg .touch .AthletePricingTable-wrapper { /* fix a bug on IOS8 - rotating elements dissapear*/ -webkit-perspective: 2000px; perspective: 2000px; } .sr_otg .AthletePricingTable-wrapper.is-switched .is-visible { /* totate the tables - anticlockwise rotation */ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation: cd-rotate 0.5s; animation: cd-rotate 0.5s; } .sr_otg .AthletePricingTable-wrapper.is-switched .is-hidden { /* totate the tables - anticlockwise rotation */ -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-animation: cd-rotate-inverse 0.5s; animation: cd-rotate-inverse 0.5s; opacity: 0; } .sr_otg .AthletePricingTable-wrapper.is-switched .is-selected { opacity: 1; } .sr_otg .AthletePricingTable-wrapper.is-switched.reverse-animation .is-visible { /* invert rotation direction - clockwise rotation */ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-animation: cd-rotate-back 0.5s; animation: cd-rotate-back 0.5s; } .sr_otg .AthletePricingTable-wrapper.is-switched.reverse-animation .is-hidden { /* invert rotation direction - clockwise rotation */ -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-animation: cd-rotate-inverse-back 0.5s; animation: cd-rotate-inverse-back 0.5s; opacity: 0; } .sr_otg .AthletePricingTable-wrapper.is-switched.reverse-animation .is-selected { opacity: 1; } .sr_otg .AthletePricingTable-wrapper > li { background-color: #FFFFFF; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Firefox bug - 3D CSS transform, jagged edges */ outline: 1px solid transparent; } .sr_otg .AthletePricingTable-wrapper .is-visible { /* the front item, visible by default */ position: relative; z-index: 5; } .sr_otg .AthletePricingTable-wrapper .is-hidden { /* the hidden items, right behind the front one */ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .sr_otg .AthletePricingTable-wrapper .is-selected { /* the next item that will be visible */ z-index: 3 !important; } .sr_otg .no-js .AthletePricingTable-wrapper .is-hidden { position: relative; -webkit-transform: rotateY(0); transform: rotateY(0); margin-top: 1em; } .sr_otg .AthletePricingTable-header { position: relative; z-index: 1; padding: 1.2rem 1rem 1.5rem; text-align: center; } @media only screen and (min-width: 768px) { .sr_otg .AthletePricingTable-header { padding: 1.6em 1em 1.8em; pointer-events: auto; } } .sr_otg .AthletePricingTable-header h2 { margin-bottom: 3px; font-weight: 700; text-transform: uppercase; font-weight: 900; font-size: 16px; letter-spacing: .03em; margin: 0; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .sr_otg .AthletePricingTable-header p { font-size: 16px; margin-bottom: 1rem; color: #173d50; } .sr_otg .cd-currency, .sr_otg .cd-value, .sr_otg .cd-duration { color: #173d50; font-weight: 300; text-transform: uppercase; font-family: 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .sr_otg .cd-currency { display: inline-block; margin-top: 12px; vertical-align: top; font-size: 25px; } .sr_otg .cd-value { font-size: 70px; } .sr_otg .cd-duration { font-size: 20px; opacity: .7; } .sr_otg .cd-duration::before { content: '/'; margin-right: 2px; } @media only screen and (min-width: 768px) { .sr_otg .cd-value { font-size: 70px; } .sr_otg .cd-currency { margin-top: 15px; font-size: 30px; } } .sr_otg .AthletePricingTable-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sr_otg .AthletePricingTable-body ul.AthletePricingTable-features li i.fa-check { color: #11bbb5; margin-right: 8px; } .sr_otg .is-switched .AthletePricingTable-body { /* fix a bug on Chrome Android */ overflow: hidden; } @media only screen and (min-width: 768px) { .sr_otg .AthletePricingTable-body { overflow-x: visible; } } .sr_otg .AthletePricingTable-features:after { content: ""; display: table; clear: both; } .sr_otg .AthletePricingTable-features li { padding: 1rem; font-size: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #494949; line-height: 1.6; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-weight: 500; } .sr_otg .AthletePricingTable-features em { font-weight: 600; } .sr_otg .AthletePricingTable-features li:nth-of-type(2n+1) { background-color: rgba(23, 61, 80, 0.06); } .sr_otg .AthletePricingTable-features-submenu li { background-color: transparent !important; padding: .2rem 0 0 1.4rem; font-weight: 400; font-size: 14px; color: #707c80; } @-webkit-keyframes cd-rotate { 0% { -webkit-transform: perspective(2000px) rotateY(0); } 70% { /* this creates the bounce effect */ -webkit-transform: perspective(2000px) rotateY(200deg); } 100% { -webkit-transform: perspective(2000px) rotateY(180deg); } } @keyframes cd-rotate { 0% { -webkit-transform: perspective(2000px) rotateY(0); transform: perspective(2000px) rotateY(0); } 70% { /* this creates the bounce effect */ -webkit-transform: perspective(2000px) rotateY(200deg); transform: perspective(2000px) rotateY(200deg); } 100% { -webkit-transform: perspective(2000px) rotateY(180deg); transform: perspective(2000px) rotateY(180deg); } } @-webkit-keyframes cd-rotate-inverse { 0% { -webkit-transform: perspective(2000px) rotateY(-180deg); } 70% { /* this creates the bounce effect */ -webkit-transform: perspective(2000px) rotateY(20deg); } 100% { -webkit-transform: perspective(2000px) rotateY(0); } } @keyframes cd-rotate-inverse { 0% { -webkit-transform: perspective(2000px) rotateY(-180deg); transform: perspective(2000px) rotateY(-180deg); } 70% { /* this creates the bounce effect */ -webkit-transform: perspective(2000px) rotateY(20deg); transform: perspective(2000px) rotateY(20deg); } 100% { -webkit-transform: perspective(2000px) rotateY(0); transform: perspective(2000px) rotateY(0); } } @-webkit-keyframes cd-rotate-back { 0% { -webkit-transform: perspective(2000px) rotateY(0); } 70% { /* this creates the bounce effect */ -webkit-transform: perspective(2000px) rotateY(-200deg); } 100% { -webkit-transform: perspective(2000px) rotateY(-180deg); } } @keyframes cd-rotate-back { 0% { -webkit-transform: perspective(2000px) rotateY(0); transform: perspective(2000px) rotateY(0); } 70% { /* this creates the bounce effect */ -webkit-transform: perspective(2000px) rotateY(-200deg); transform: perspective(2000px) rotateY(-200deg); } 100% { -webkit-transform: perspective(2000px) rotateY(-180deg); transform: perspective(2000px) rotateY(-180deg); } } @-webkit-keyframes cd-rotate-inverse-back { 0% { -webkit-transform: perspective(2000px) rotateY(180deg); } 70% { /* this creates the bounce effect */ -webkit-transform: perspective(2000px) rotateY(-20deg); } 100% { -webkit-transform: perspective(2000px) rotateY(0); } } @keyframes cd-rotate-inverse-back { 0% { -webkit-transform: perspective(2000px) rotateY(180deg); transform: perspective(2000px) rotateY(180deg); } 70% { /* this creates the bounce effect */ -webkit-transform: perspective(2000px) rotateY(-20deg); transform: perspective(2000px) rotateY(-20deg); } 100% { -webkit-transform: perspective(2000px) rotateY(0); transform: perspective(2000px) rotateY(0); } } .sr_otg .AthleteEventPkg-wrap { margin-top: 1.8rem; margin-bottom: .8rem; } .sr_otg .AthleteEventPkg { background-color: red; margin-top: 1rem; margin-bottom: 1rem; margin: 1rem .2rem; padding: 6rem 1rem; display: block; } .sr_otg a.AthleteEventPkg { color: white; text-decoration: none; font-size: 26px; font-weight: 400; font-family: 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .03em; } .sr_otg .AthleteEventPkg-lacrosse { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(../images/sr_otg/lacrosse.jpg); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/sr_otg/lacrosse.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } .sr_otg .AthleteEventPkg-soccer { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(../images/sr_otg/soccer.jpg); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/sr_otg/soccer.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } .sr_otg .AthleteEventPkg-volleyball { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(../images/sr_otg/volleyball.jpg); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/sr_otg/volleyball.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } .sr_otg .AthleteEventPkg-lacrosse:hover, .sr_otg .AthleteEventPkg-soccer:hover, .sr_otg .AthleteEventPkg-volleyball:hover { margin-top: .5rem; margin-bottom: .5rem; -webkit-box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); } .sr_otg .darkBlue-bg { background-color: transparent; color: white !important; } .sr_otg .range { position: relative; } .sr_otg .range input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; width: 100%; height: 26px; cursor: pointer; display: block; } .sr_otg .range input[type=range]:focus { outline: none; } .sr_otg .range input[type=range][disabled] { opacity: .3; cursor: default; } .sr_otg .range .rangeslider { position: relative; height: 26px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sr_otg .range .rangeslider:before { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 10px; background: #dcdcdc; border-radius: 100px; content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .sr_otg .range input::-webkit-slider-runnable-track { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 10px; background: #e6e6e6; border-radius: 100px; margin: 11px 0; } .sr_otg .range input::-moz-range-track { box-sizing: border-box; width: 100%; height: 10px; background: #e6e6e6; border-radius: 100px; margin: 11px 0; } .sr_otg .range input::-ms-track { box-sizing: border-box; width: 100%; height: 10px; background: #e6e6e6; border-radius: 100px; color: transparent; padding: 11px 0; background: transparent; border-color: transparent; } .sr_otg .range input::-ms-fill-lower, .sr_otg .range input::-ms-fill-upper { box-sizing: border-box; width: 100%; height: 10px; background: #e6e6e6; border-radius: 100px; } .sr_otg .range input::-ms-fill-lower { background: #3acfa7; } .sr_otg .range .rangeslider-fill-lower { background-color: #3acfa7; border-radius: 100px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 10px; will-change: width; } .sr_otg .range input::-webkit-slider-thumb, .sr_otg .range input::-moz-range-thumb, .sr_otg .range input::-ms-thumb { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5); border: 6px solid #fff; height: 26px; width: 26px; border-radius: 100px; background: #333940; cursor: pointer; margin-top: 2px; } .sr_otg .range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .sr_otg .range .rangeslider-thumb { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5); border: 6px solid #fff; height: 26px; width: 26px; border-radius: 100px; background: #333940; cursor: pointer; position: absolute; -ms-touch-action: pan-x; touch-action: pan-x; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); will-change: left; } .sr_otg .range .range-output { position: absolute; left: 6px; top: 6px; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sr_otg .range .range-output .output { display: block; position: absolute; min-width: 26px; padding: 10px 17px 26px; top: -26px; -webkit-transform: translate(-49%, -100%); transform: translate(-49%, -100%); background: #1F80CE; color: #fff; border-radius: 6px; white-space: nowrap; font-size: 30px; line-height: 30px; font-family: 'Oswald'; font-weight: 300; text-align: center; letter-spacing: .03em; -webkit-box-sizing: content-box; box-sizing: content-box; } @media (min-width: 768px) { .sr_otg .range .range-output .output { font-size: 56px; line-height: 56px; padding: 12px 18px 32px; min-width: 40px; } } .sr_otg .PriceSliderOutput-label { position: relative; color: white; top: -54px; left: -50%; font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; } @media (min-width: 768px) { .sr_otg .PriceSliderOutput-label { top: -57px; font-size: 13px; } } .sr_otg .fadeInPricingInfo, .sr_otg .MaxTeamsMessage, .sr_otg .NoPricingMessage { display: none; } .sr_otg .range .range-output .output:before { content: ""; position: absolute; bottom: -8px; left: 50%; border: 10px solid #1F80CE; border-bottom: none; border-left-color: transparent; border-right-color: transparent; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .sr_otg .PriceSliderWrap { padding: 6rem 2rem 0rem; opacity: 0.3; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } @media (min-width: 768px) { .sr_otg .PriceSliderWrap { padding: 8rem 3rem 0rem; } } .sr_otg .PriceSlider { width: 100%; max-width: 1000px; margin: 0 auto 4.5rem; } .sr_otg .rangeslider--horizontal { width: 100%; margin: 20px 0; } .sr_otg .rangeslider, .sr_otg input[type='range'] { max-width: 100%; } .sr_otg .rangeslider-x-axis { cursor: pointer; font-size: 14px; font-weight: 400; position: relative; top: 150%; text-align: justify; color: #888888; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (min-width: 768px) { .sr_otg .rangeslider-x-axis { font-size: 15px; } } .sr_otg .rangeslider-x-axis-label { font-size: 16px; padding: 6px 0; position: absolute; } .sr_otg .PriceSliderDetails, .sr_otg .MaxTeamsMessage, .sr_otg .NoPricingMessage { font-size: 20px; text-align: center; font-weight: 300; letter-spacing: -.02em; margin-bottom: 3rem; font-family: "Roboto", helvetica, arial, sans-serif; } .sr_otg .PriceSliderDetails .u-clubBlueText { font-weight: 700; } .sr_otg .NoPricingMessage { margin-top: -75px; } @media (min-width: 768px) { .sr_otg .PriceSliderDetails, .sr_otg .MaxTeamsMessage, .sr_otg .NoPricingMessage { font-size: 24px; } .sr_otg .PriceSliderDetails .u-clubBlueText { font-size: 30px; } .sr_otg .NoPricingMessage { margin-top: -118px; } } .sr_otg .club-logo-col { padding: 0 2rem 3rem 2rem; } .sr_otg .club-logo-horz { width: 100%; max-width: 140px; height: auto; } .sr_otg .club-logo-vert { width: 60%; max-width: 86px; height: auto; } .sr_otg .ClubPricing-faqWrap h4 { font-size: 20px; } .sr_otg .ClubPricing-faqWrap p { font-family: 'Helvetica Neue', helvetica, arial, sans-serif; color: #888888; font-size: 16px; line-height: 1.7; } .sr_otg .ClubPricing-faq { padding: 2rem 1rem 0; } @media (min-width: 768px) { .sr_otg .ClubPricing-faq { padding: 4rem 4rem 0; } } .sr_otg { /*DISAMBIGUATION SCREEN*/ } .sr_otg .LoginWrap { margin: 1.5rem auto; max-width: 450px; } .sr_otg .LoginCard { margin: 0 15px; padding: 20px; background-color: white; max-width: 400px; border-radius: 4px; -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12); text-align: center; } @media (min-width: 600px) { .sr_otg .LoginCard { padding: 30px; } } .sr_otg .LoginCard .OTGBtn, body.sr_otg.redirect_modal .LoginCard .sweet-alert button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert .LoginCard button.sweet-confirm { display: block; width: 100%; } .sr_otg .LoginCard .OTGBtn[disabled], body.sr_otg.redirect_modal .LoginCard .sweet-alert button[disabled].sweet-confirm, body.sr_otg.redirect_modal .sweet-alert .LoginCard button[disabled].sweet-confirm { opacity: 0.5; pointer-events: none; } .sr_otg .LoginWrap label { display: block; font-size: 14px; margin-bottom: 8px; } .sr_otg input[type="text"], .sr_otg input[type="password"] { width: 100%; border: 1px solid #DCDCDC; border-radius: 2px; color: #000; padding: 10px !important; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; font-size: 16px !important; font-weight: 400; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; } .sr_otg .LoginWrap input[type="text"], .sr_otg .LoginWrap input[type="password"] { display: block; margin: 0 auto; } .sr_otg .LoginWrap .OTGBtn, body.sr_otg.redirect_modal .LoginWrap .sweet-alert button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert .LoginWrap button.sweet-confirm { margin-top: 1.2rem; } .sr_otg .LoginCard .underBtnLink { text-align: center; margin: 6px 0 25px 0; font-size: 13px; } .sr_otg .userEmail { font-weight: 400; font-size: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .sr_otg .userEmail-set { border-radius: 2px; background-color: #f1f1f1; padding: 10px; margin-bottom: 30px; border: 1px solid transparent; border-radius: 2px; color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px !important; font-weight: 400; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; } .sr_otg .userEmail i { font-size: 16px; } .sr_otg .hrBehindText { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 500; font-size: 16px; } .sr_otg .hrBehindText:before, .sr_otg .hrBehindText:after { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 1px; content: '\a0'; background-color: #ddd; position: relative; top: 0.5em; } .sr_otg .hrBehindText:before { margin-right: 8px; } .sr_otg .hrBehindText:after { margin-left: 8px; } .sr_otg .hrBehindText + input[type="text"], .sr_otg .hrBehindText + input[type="password"] { margin-top: 20px; } .sr_otg .hrBehindText + p { margin-top: 12px; color: #888888; } .sr_otg .LoginWrap-disambiguationWrap { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #dcdcdc; padding: 1rem; max-width: 600px; margin: 0 auto; border-radius: 4px; text-align: center; } @media (min-width: 600px) { .sr_otg .LoginWrap-disambiguationWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: left; } } .sr_otg .LoginWrap-disambiguationWrap + .LoginWrap-disambiguationWrap { margin-top: 1rem; } @media (min-width: 600px) { .sr_otg .LoginWrap-disambiguationUserInfo { display: -webkit-box; display: -ms-flexbox; display: flex; } } .sr_otg .LoginWrap-disambiguationUserPic { width: 60px !important; height: 60px !important; margin-bottom: .5rem; background-color: gray; } @media (min-width: 600px) { .sr_otg .LoginWrap-disambiguationUserPic { margin-right: .8rem; margin-bottom: 0; } } .sr_otg .LoginWrap-disambiguationWrap--athlete { border-top: 4px solid #11bbb5; } .sr_otg .LoginWrap-disambiguationWrap--club { border-top: 4px solid #1F80CE; } .sr_otg .LoginWrap-disambiguationWrap--college { border-top: 4px solid #32325A; } .sr_otg .LoginWrap-disambiguationWrap p:last-of-type { margin-bottom: 0; } .sr_otg .LoginWrap-disambiguationUser { font-size: 16px; font-weight: 600; color: #494949; margin-bottom: .2rem; } .sr_otg .LoginWrap-disambiguationUserDetails { font-size: 15px; font-weight: 400; color: #707c80; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .sr_otg .LoginWrap-disambiguationWrap .OTGBtn--large { padding: .8rem 1.4rem; margin-top: .8rem; margin-bottom: .3rem; font-size: 16px; min-width: 46px; } @media (min-width: 600px) { .sr_otg .LoginWrap-disambiguationWrap .OTGBtn--large { margin-left: .8rem; margin-top: 0; margin-bottom: 0; } } .sr_otg .login-magic-link-success { margin-bottom: 0; } .sr_otg .login-magic-link-spinner { color: #3acfa7; display: none; font-size: 39px; margin-top: 1.2rem; padding: 0; text-align: center; } .sr_otg .dont-break-out { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; } .sr_otg { /*EVENT TABLE STYLING*/ /* Table column sizing ================================== */ /* Apply styles ================================== */ /* .Rtable { position: relative; top: 3px; left: 3px; }*/ /* .Rtable-cell { margin: -3px 0 0 -3px; background-color: white; border-color: #e2e6e9; }*/ /* Cell styles ================================== */ /* Responsive ==================================== */ /*THIS LET'S THE CITY AND STATE SIT ON ONE LINE ON MOBILE*/ } .sr_otg .EventPackagesHero { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#141c21+0,212c35+25,212c35+25,212c35+100&0.9+0,0.85+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.9)), color-stop(25%, rgba(33, 44, 53, 0.89)), to(rgba(33, 44, 53, 0.85))), url(../images/sr_otg/events.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.9) 0%, rgba(33, 44, 53, 0.89) 25%, rgba(33, 44, 53, 0.85) 100%), url(../images/sr_otg/events.jpg); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6141c21', endColorstr='#d9212c35',GradientType=0 ), url(../images/sr_otg/events.jpg); /* IE6-9 */ background-size: cover; background-position: center; } .sr_otg .AthletePricingTable-card--events + .AthletePricingTable-card--events { margin-top: 1.5rem; } @media only screen and (min-width: 992px) { .sr_otg .AthletePricingTable-card--events + .AthletePricingTable-card--events { margin-top: 0; } } .sr_otg .u-noTopBorder { border-top: none !important; } .sr_otg .AthletePricingTable-featureValue { padding-left: 1rem; font-family: 'Oswald'; text-transform: uppercase; text-align: center; font-size: 13px; color: #173d50; } .sr_otg .AthletePricingTable-innerList li { background-color: transparent !important; list-style-type: disc; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-left: 1.5rem; } .sr_otg .toggleCards { cursor: pointer; color: #30A9DE; } .sr_otg .AthletePricingTable-switcherEvents label, .sr_otg .AthletePricingTable-switcherEvents .cd-switch { width: 110px; } .sr_otg .AthletePricingTable-switcherEvents input[type="radio"]:checked + label + .cd-switch, .sr_otg .AthletePricingTable-switcherEvents input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch { /* use label:nth-of-type(n) to fix a bug on safari with multiple adjacent-sibling selectors*/ -webkit-transform: translateX(110px); transform: translateX(110px); } .sr_otg .eventPackage-savings { text-align: center; font-size: 16px; font-weight: 400; color: white; padding: 6px .5rem; text-transform: uppercase; font-family: 'Oswald'; margin: -6px -1px 0 -1px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .sr_otg .eventPackage-savings--bronze { background-color: #d26d32; } .sr_otg .eventPackage-savings--silver { background-color: #bcc5c7; } .sr_otg .eventPackage-savings--gold { background-color: #ecc23c; } .sr_otg .eventPackage-savings--platinum { background-color: #839aa0; } .sr_otg .eventPackage-savings--film { background: #49bae7; } .sr_otg .eventPackage-savings--registration { background: #1abc9c; } .sr_otg .eventPackage-savings--fullPackage { background: #1bbd9d; } .sr_otg .mesh-bg { background-color: #212C35; background: url(../images/sr_otg/navy-jersey-mesh-tile.jpg); background-size: auto, cover; padding-top: 7rem; padding-bottom: 7rem; background-position: center; background-attachment: fixed; background-repeat: repeat; } .sr_otg .EventFilter { padding: 1rem 0; background-color: #f1f1f1; } .sr_otg .AthletePricing-sportSelect { margin: 0; } @media (min-width: 768px) { .sr_otg .AthletePricing-sportSelect { margin: 0; min-width: inherit; width: 100%; } } .sr_otg .AthletePricing-sportSelect select { font-size: 18px; } .sr_otg .EventFilter-col { padding: .5rem 0; } .sr_otg .EventFilter-col + .EventFilter-col { padding-top: 0rem; } @media (min-width: 768px) { .sr_otg .EventFilter-col { padding: .5rem; } .sr_otg .EventFilter-col + .EventFilter-col { padding-top: .5rem; } } .sr_otg .Rtable { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; } .sr_otg .Rtable-cell { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; padding: .5rem .5rem; overflow: hidden; list-style: none; border-right: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; } @media (min-width: 599px) { .sr_otg .Rtable-cell { padding: 1rem .5rem; border-right: 0; border-left: 0; } } .sr_otg .Rtable--2cols > .Rtable-cell { width: 50%; } .sr_otg .Rtable--3cols > .Rtable-cell { width: 33.33%; } .sr_otg .Rtable--4cols > .Rtable-cell { width: 25%; } .sr_otg .Rtable--5cols > .Rtable-cell { width: 20%; } .sr_otg .Rtable--6cols > .Rtable-cell { width: 16.6%; } .sr_otg .Rtable-cell--alignMiddle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media all and (max-width: 600px) { .sr_otg .Rtable--collapse { display: block; } .sr_otg .Rtable--collapse > .Rtable-cell { width: 100% !important; } .sr_otg .Rtable--collapse > .Rtable-cell--foot { margin-bottom: 1em; } } .sr_otg .no-flexbox .Rtable { display: block; } .sr_otg .no-flexbox .Rtable > .Rtable-cell { width: 100%; } .sr_otg .no-flexbox .Rtable > .Rtable-cell--foot { margin-bottom: 1em; } .sr_otg .EventListingTable { margin-top: 1.5rem; font-size: 15px; font-family: 'Helvetica Neue'; } @media (min-width: 599px) { .sr_otg .EventListingTable { margin-top: 1rem; } } .sr_otg .EventListingTable .Rtable--4cols > .Rtable-cell { width: 20%; } .sr_otg .EventListingTable .Rtable--4cols > .Rtable-cell.Rtable-cell--head { width: 40%; font-weight: bold; background-color: #f1f1f1; border-top: 1px solid #dcdcdc; } @media (min-width: 599px) { .sr_otg .EventListingTable .Rtable--4cols > .Rtable-cell.Rtable-cell--head { background-color: white; border-top: 0; } } .sr_otg .Rtable-cell--foot { border-bottom: 1px solid #dcdcdc; } @media (min-width: 599px) { .sr_otg .Rtable-cell--foot { border-bottom: 0; } } .sr_otg .Rtable-heading { font-family: 'Oswald'; font-size: 20px; font-weight: 300 !important; text-transform: uppercase; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; } @media all and (max-width: 600px) { .sr_otg .Rtable-heading { display: none !important; } } .sr_otg .Rtable-hr { height: 1px; background-color: #dcdcdc; width: 100%; } @media all and (max-width: 600px) { .sr_otg .Rtable-hr { display: none; } } .sr_otg .EventListingTable .Rtable--4cols > .Rtable-cell--foot { width: 30%; display: -webkit-box; display: -ms-flexbox; display: flex; } .sr_otg .Rtable-city { width: auto; } .sr_otg .Rtable-state { width: auto; padding-left: .2rem; } @media (min-width: 599px) { .sr_otg .Rtable-city { width: 60%; } .sr_otg .Rtable-state { width: 40%; padding-left: 1rem; } .sr_otg .Rtable-comma { display: none; } } .sr_otg .EventListingTable-emptyNotice { padding-top: 5.4rem; } .sr_otg .EventListingTable-emptyNotice p { font-weight: 300; font-size: 20px; } .sr_otg .AboutUsHero { background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.9)), color-stop(25%, rgba(33, 44, 53, 0.89)), to(rgba(33, 44, 53, 0.85))), url(../images/sr_otg/about-us-hero.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.9) 0%, rgba(33, 44, 53, 0.89) 25%, rgba(33, 44, 53, 0.85) 100%), url(../images/sr_otg/about-us-hero.jpg); background: -webkit-linear-gradient(to bottom, rgba(20, 28, 33, 0.9) 0%, rgba(33, 44, 53, 0.89) 25%, rgba(33, 44, 53, 0.85) 100%), url(../images/sr_otg/about-us-hero.jpg); background-size: cover; } .sr_otg .padding-bottom-offset { padding-bottom: 4rem; } .sr_otg .meet-team section#team { background: none; } .sr_otg .meet-team .TeamHeading { padding-bottom: 65px; } .sr_otg .meet-team img { width: 100%; } .sr_otg .meet-team .profile-image a { outline: none; display: block; position: relative; } .sr_otg .meet-team .profile-image a:after { content: 'View Bio'; border-radius: 50%; width: 100%; height: 100%; top: 0; left: 0; position: absolute; font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif; text-transform: uppercase; color: #fff; font-size: 22px; font-weight: 300; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 0.3s opacity ease-in-out; transition: 0.3s opacity ease-in-out; opacity: 0; background: rgba(0, 0, 0, 0.7); } .sr_otg .meet-team .profile-image a img { display: block; } .sr_otg .meet-team .profile-image a:hover:after { opacity: 1; } .sr_otg .meet-team .otg-team-member { padding: 0 15px; } .sr_otg .meet-team .otg-team-member .name { font-family: "Roboto", helvetica, arial, sans-serif; color: #000; font-size: 16px; line-height: 1.3; font-weight: 500; margin-top: 14px; } .sr_otg .meet-team .otg-team-member p { line-height: 1.2 !important; color: #888888; font-size: 16px; font-weight: 300; margin-bottom: 40px; } .sr_otg .meet-team .flexslider .slides img { width: 260px; margin: 80px auto 0; display: block; } .sr_otg .meet-team .flexslider .flex-direction-nav { display: none; } @media (min-width: 768px) { .sr_otg .meet-team .flexslider .flex-direction-nav { display: block; } .sr_otg .meet-team .flexslider .flex-direction-nav .flex-next { position: absolute; right: 0; top: 220px; } .sr_otg .meet-team .flexslider .flex-direction-nav .flex-prev { position: absolute; left: 0; } .sr_otg .meet-team .flexslider .flex-direction-nav a { background: transparent; text-shadow: none; } .sr_otg .meet-team .flexslider .flex-direction-nav a:before { color: #777; } .sr_otg .meet-team .flexslider .flex-direction-nav a:hover:before { color: #ce4a27 !important; } } .sr_otg .meet-team .modal.team h3 { font-family: "Roboto", helvetica, arial, sans-serif; font-size: 36px; font-weight: 300; color: #fff; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; text-align: center; } .sr_otg .meet-team .modal.team h3 + p { margin-bottom: 0; } .sr_otg .meet-team .modal.team h4 { font-family: "Roboto", helvetica, arial, sans-serif; font-size: 28px; font-weight: 300; color: #fff; margin-bottom: 20px; text-transform: none; } .sr_otg .meet-team .modal.team h4:first-child { margin-top: 0; } .sr_otg .meet-team .modal.team p { color: #fff; } .sr_otg .meet-team .modal.team .red-hr { margin-top: 30px; margin-left: auto; margin-right: auto; } .sr_otg .meet-team #team .social_icon_links a { padding: 8px; display: inline-block; } .sr_otg .meet-team #team .social_icon_links a i { padding: 0; } .sr_otg .meet-team ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .sr_otg .meet-team .hire-bubble { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .sr_otg .meet-team .hire-bubble a { display: inline-block; border-radius: 50%; font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif; color: #fff; font-size: 22px; font-weight: 300; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #2b363c; width: 100%; position: relative; line-height: 1.6; } .sr_otg .meet-team .hire-bubble a span { text-transform: uppercase; font-weight: 400; } .sr_otg .meet-team .hire-bubble a span.red { color: #ce4a27; } .sr_otg .meet-team .hire-bubble a:before { padding-top: 100%; display: block; content: ''; } .sr_otg .meet-team .hire-bubble .bubble-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } .sr_otg .modal.team { overflow-y: auto; max-height: 100%; -webkit-box-shadow: none; box-shadow: none; border: none; border-radius: 0; background: none; width: 100%; margin-left: 0; left: 0; color: #fff; } .sr_otg .modal.team .modal-team { margin: 0 auto; } .sr_otg .modal.team .modal-team .team-member .col-xs-12 { text-align: center; } .sr_otg .modal.team .modal-team .team-member .col-xs-12 p { margin: auto; } .sr_otg .modal.team .modal-team .team-member .col-xs-12 p:last-child { margin-bottom: 40px; } @media (max-width: 768px) { .sr_otg .modal.team .modal-team .team-member .col-xs-12 { width: 90%; margin-left: auto; margin-right: auto; float: none; } } @media (max-width: 640px) { .sr_otg .modal.team .modal-team .team-member .col-xs-12 { width: 85%; } } @media (max-width: 520px) { .sr_otg .modal.team .modal-team .team-member .col-xs-12 { width: 80%; } } .sr_otg .modal .close:hover { color: #e75854; } .sr_otg .modal .close:hover i { color: #e75854; } .sr_otg .modal.team.fade.in { top: 0%; } .sr_otg .modal.team .close { color: rgba(255, 255, 255, 0.5); display: block; text-align: right; margin: 10px; font-size: 30px; } .sr_otg .modal.team .flex-direction-nav a { top: 220px; } .sr_otg .arrow { text-align: center; float: right; width: 700px; position: relative; top: -16px; } .sr_otg .arrow i { color: #000; background-color: rgba(255, 255, 255, 0.6); border-radius: 50px; padding: 28px 20px 8px; font-size: 30px; -webkit-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; } .sr_otg .arrow i:hover { background-color: #ffffff; } .sr_otg #team .content { text-align: justify; } .sr_otg #team .content:after { content: ''; display: inline-block; width: 100%; } .sr_otg #team .content > h3 { color: #000; } .sr_otg #team .content article { overflow: hidden; display: inline-block; vertical-align: top; width: 480px; height: 480px; position: relative; border-radius: 260px; margin-bottom: 30px; background-color: #f3f3f3; background-position: 0 480px, 0 0; background-repeat: no-repeat; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sr_otg #team .content article:hover { background-position: 0 330px, 0 0; } .sr_otg #team .content article:hover aside { opacity: 1; } .sr_otg #team .content article aside { text-align: center; width: 480px; opacity: 0; margin-top: 350px; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .sr_otg #team .content article aside h2 { margin: 0; text-transform: capitalize; } .sr_otg #team .content article aside h2 a { color: #fff; font-size: 36px; } .sr_otg #team .content article aside h2 a:hover { color: #85d44c; } .sr_otg #team .content article aside h6 { color: #a7dfff; margin: 2px 0 8px; text-transform: uppercase; font-size: 16px; } .sr_otg #team .content article.team_message { background-color: #000; } .sr_otg #team .content .message_content { text-align: center; text-transform: uppercase; padding: 0 40px; margin-top: 190px; } .sr_otg #team .content .message_content p { margin-bottom: 0; font-size: 30px; line-height: 1em; } .sr_otg #team .content .message_content p a { color: #ffffff; } .sr_otg #team .content .message_content h2 { font-family: 'montserratregular', sans-serif; color: #fff; font-size: 4.5em; } .sr_otg #team .content .message_content h2 a { color: #A7Efff; } .sr_otg #team .social_icon_links { margin: 20px auto 20px; text-align: center; } .sr_otg #team .social_icon_links a { margin: 0 3px; width: 32px; height: 30px; font-family: FontAwesome; color: #fff; background-color: #494949; border-radius: 50px; padding: 10px; font-size: 16px; } .sr_otg #team .social_icon_links a:hover { background-color: #7c7c7c; } .sr_otg #team .social_icon_links a i { padding-top: 7px; } .sr_otg #team_carousel { margin-bottom: 20px; } .sr_otg #team_carousel li { margin: 0 9px; background-color: #000; border-radius: 100%; } .sr_otg #team_carousel li img { opacity: 0.5; } .sr_otg #team_carousel li.flex-active-slide img { opacity: 1; } .sr_otg #team_slider .flex-viewport { max-height: 3100px; } .sr_otg div.tabs { margin: 0 auto; position: absolute; left: 0; right: 0; padding: 0 40px; /* margin: 0 -480%; padding: 0 500%; */ background: url(/images/platform_bkd2.png); border-top: 2px solid #fff; } .sr_otg ul.tabs { margin: 0 auto; width: 980px; padding: 0; } .sr_otg ul.tabs:after { left: 100%; } .sr_otg ul.tabs li { display: inline-block; width: 48%; } .sr_otg ul.tabs a { display: block; text-align: center; text-transform: uppercase; padding: 20px 0; font-size: 25px; } .sr_otg ul.tabs a.active { background: #000; color: #85d44c; } .sr_otg .tabgroup div { padding: 30px 0; } .sr_otg .tabgroup p { letter-spacing: -1px; } .sr_otg .tabgroup img { display: inline-block; margin-right: 10px; } .sr_otg .tabgroup a { color: #85d44c; } .sr_otg .tabgroup a.video_link { padding-top: 40px; display: inline-block; vertical-align: top; font-size: 30px; } .sr_otg .tabgroup a.video_link:after { font-family: FontAwesome; font-size: 20px; content: '\f04b'; color: #fff; position: relative; bottom: 20px; margin-left: 10px; border: 3px solid #fff; border-radius: 50px; padding: 16px 16px 16px 20px; background: #000000; } .sr_otg .hidden { overflow-x: hidden; } .sr_otg .flexslider { margin: 0; border: none; border-radius: 0; background: transparent; -webkit-box-shadow: none; box-shadow: none; } .sr_otg .flex-viewport { margin: 0 auto; } .sr_otg .flex-direction-nav a { height: 60px; border-radius: 50px; background-color: #000; margin: 0; overflow: hidden; line-height: 58px; } .sr_otg .flex-direction-nav a:before { font-family: FontAwesome; font-size: 60px; color: #fff; content: '\f104'; } .sr_otg .flex-direction-nav a.flex-prev { padding-left: 15px; width: 45px; } .sr_otg .flex-direction-nav a.flex-next { padding-right: 17px; width: 43px; } .sr_otg .flex-direction-nav a.flex-next:before { content: '\f105'; } .sr_otg .about-us .VideoContainer-aboutUs, .sr_otg .about-us .VideoContainer-overlay-aboutUs { min-height: 420px !important; position: relative; } @media (min-width: 1400px) { .sr_otg .about-us .VideoContainer-aboutUs, .sr_otg .about-us .VideoContainer-overlay-aboutUs { height: 610px; position: relative; } } .sr_otg .about-us .hello #playbutton { z-index: 3; margin: 0 auto; margin-top: 20px; height: 74px; display: block; } .sr_otg .about-us .hello #playbutton .rectangle { background-color: #CF4C27; width: 74px; height: 74px; border-radius: 500px; opacity: 0.7; margin: 0 auto; } .sr_otg .about-us .hello #playbutton .rectangle:hover { background-color: #CF4C27; cursor: pointer; } .sr_otg .about-us .hello #playbutton .triangle { width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent white; margin: 0 auto; position: relative; bottom: 49px; pointer-events: none; left: 4px; } .sr_otg .about-us .AboutUsHero { background: url("https://s3.amazonaws.com/sportsrecruits/assets/about-us/about-us-hero.jpg"); background-size: cover; background-position: center; } .sr_otg .about-us .hello h1 { font-size: 50px; line-height: 1.2em; text-transform: uppercase; font-family: oswald; font-weight: 300; color: white; margin-bottom: 0; text-shadow: 0px 0px 60px rgba(0, 0, 0, 0.25); padding: 0 15px; } @media only screen and (min-width: 300px) { .sr_otg .about-us .hello h1 { font-size: 45px; } } @media only screen and (min-width: 400px) { .sr_otg .about-us .hello h1 { font-size: 50px; } } @media only screen and (min-width: 500px) { .sr_otg .about-us .hello h1 { font-size: 60px; } } @media only screen and (min-width: 700px) { .sr_otg .about-us .hello h1 { font-size: 75px; } } @media only screen and (min-width: 1200px) { .sr_otg .about-us .hello h1 { font-size: 80px; } } @media only screen and (max-width: 769px) { .sr_otg .about-us .hidden-video-xs { display: none; } } .sr_otg .about-us .about-us-col { padding-left: 0; padding-right: 0; } .sr_otg .about-us .otg-team-member .profile-image { margin-top: 40px; } .sr_otg .about-us .otg-team-member .profile-image a:after { content: ''; -webkit-transition: 0.3s opacity ease-in-out; transition: 0.3s opacity ease-in-out; background: transparent; } .sr_otg .about-us .otg-team-member .profile-image a img { display: block; } .sr_otg .about-us .otg-team-member .profile-image a:hover { opacity: .9; } .sr_otg .about-us .otg-team-member-title { font-family: 'Roboto', 'Helvetica Neue', helvetica, sans-serif; font-size: 13px; color: #888888; font-weight: 400; } .sr_otg .about-us .otg-team-member-sport { font-family: 'Roboto', 'Helvetica Neue', helvetica, sans-serif; font-size: 12px; color: #888888; } .sr_otg .about-us #googleMap { height: 500px; } .sr_otg .about-us .VideoContainer-aboutUs, .sr_otg .about-us .VideoContainer-overlay-aboutUs { min-height: 420px !important; position: relative; } @media (min-width: 1400px) { .sr_otg .about-us .VideoContainer-aboutUs, .sr_otg .about-us .VideoContainer-overlay-aboutUs { height: 610px; position: relative; } } .sr_otg .about-us .hello #playbutton { z-index: 3; margin: 0 auto; margin-top: 20px; height: 74px; display: block; } .sr_otg .about-us .hello #playbutton .rectangle { background-color: #CF4C27; width: 74px; height: 74px; border-radius: 500px; opacity: 0.7; margin: 0 auto; } .sr_otg .about-us .hello #playbutton .rectangle:hover { background-color: #CF4C27; cursor: pointer; } .sr_otg .about-us .hello #playbutton .triangle { width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent white; margin: 0 auto; position: relative; bottom: 49px; pointer-events: none; left: 4px; } .sr_otg .about-us .AboutUsHero { background: url("https://s3.amazonaws.com/sportsrecruits/assets/about-us/about-us-hero.jpg"); background-size: cover; background-position: center; } .sr_otg .about-us .hello h1 { font-size: 50px; line-height: 1.2em; text-transform: uppercase; font-family: oswald; font-weight: 300; color: white; margin-bottom: 0; text-shadow: 0px 0px 60px rgba(0, 0, 0, 0.25); padding: 0 15px; } @media only screen and (min-width: 300px) { .sr_otg .about-us .hello h1 { font-size: 45px; } } @media only screen and (min-width: 400px) { .sr_otg .about-us .hello h1 { font-size: 50px; } } @media only screen and (min-width: 500px) { .sr_otg .about-us .hello h1 { font-size: 60px; } } @media only screen and (min-width: 700px) { .sr_otg .about-us .hello h1 { font-size: 75px; } } @media only screen and (min-width: 1200px) { .sr_otg .about-us .hello h1 { font-size: 80px; } } @media only screen and (max-width: 769px) { .sr_otg .about-us .hidden-video-xs { display: none; } } .sr_otg .about-us .about-us-col { padding-left: 0; padding-right: 0; } .sr_otg .about-us .otg-team-member .profile-image { margin-top: 40px; } .sr_otg .about-us .otg-team-member .profile-image a:after { content: ''; -webkit-transition: 0.3s opacity ease-in-out; transition: 0.3s opacity ease-in-out; background: transparent; } .sr_otg .about-us .otg-team-member .profile-image a img { display: block; } .sr_otg .about-us .otg-team-member .profile-image a:hover { opacity: .9; } .sr_otg .about-us .otg-team-member-title { font-family: 'Roboto', 'Helvetica Neue', helvetica, sans-serif; font-size: 13px; color: #888888; font-weight: 400; } .sr_otg .about-us .otg-team-member-sport { font-family: 'Roboto', 'Helvetica Neue', helvetica, sans-serif; font-size: 12px; color: #888888; } .sr_otg .about-us #googleMap { height: 500px; } .sr_otg h1, .sr_otg p { -webkit-transition: none; transition: none; } .sr_otg #AthleteSoultions-Intro { padding-top: 6rem; padding-bottom: 2.5rem; } @media (min-width: 768px) { .sr_otg #AthleteSoultions-Intro { padding-top: 11rem; padding-bottom: 2.5rem; } } .sr_otg .AthleteSoultions-Checklist img { width: 50px; margin-top: .5rem; } @media only screen and (min-width: 48em) { .sr_otg .AthleteSoultions-Checklist img { width: 60px; } } .sr_otg .AthleteSoultions-Checklist .row { padding-top: 3.5rem; } @media only screen and (min-width: 48em) { .sr_otg .AthleteSoultions-Checklist .row { padding-top: 4.5rem; } } .sr_otg .network-bg { background-color: #273744; background-image: url(../images/sr_otg/athlete-tools-bg.png); background-size: contain; background-position: bottom; background-repeat: no-repeat; } .sr_otg .AthleteSoultions-h3 { font-size: 18px; line-height: 1.6; } @media only screen and (min-width: 48em) { .sr_otg .AthleteSoultions-h3 { font-size: 22px; } } .sr_otg .PhotoBG-manHoldingIphone { background: -webkit-gradient(linear, left top, left bottom, from(rgba(33, 44, 53, 0.8)), to(rgba(33, 44, 53, 0.8))), url(../images/sr_otg/boy-holding-phone-messaging-bg.jpg); background: linear-gradient(to bottom, rgba(33, 44, 53, 0.8) 0%, rgba(33, 44, 53, 0.8) 100%), url(../images/sr_otg/boy-holding-phone-messaging-bg.jpg); background-size: cover; background-position: right center; text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.9); padding-top: 3rem; padding-bottom: 3rem; } .sr_otg .AthleteSolutions-Messaging-iphone img { width: 80%; max-width: 250px; display: block; margin: 2.5rem auto -3rem auto; } @media (min-width: 768px) { .sr_otg .PhotoBG-manHoldingIphone { background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0)), to(rgba(33, 44, 53, 0))), url(../images/sr_otg/boy-holding-phone-messaging-bg.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0) 0%, rgba(33, 44, 53, 0) 100%), url(../images/sr_otg/boy-holding-phone-messaging-bg.jpg); background-size: cover; background-position: right center; } } @media (max-width: 500px) { .sr_otg .PhotoBG-manHoldingIphone { background-position: 550px center !important; min-height: auto; } } .sr_otg .PhotoBG-manHoldingIphone-inner { min-height: 450px; } .sr_otg .PhotoBG-csTeam { background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.2)), color-stop(30%, rgba(33, 44, 53, 0)), to(rgba(33, 44, 53, 0))), url(../images/sr_otg/cs-team-2.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.2) 0%, rgba(33, 44, 53, 0) 30%, rgba(33, 44, 53, 0) 100%), url(../images/sr_otg/cs-team-2.jpg); background-size: cover; background-position: center; } @media (max-width: 599px) { .sr_otg .PhotoBG-csTeam { min-height: auto; } } .sr_otg .PhotoBG-csTeam-inner { min-height: 500px; padding-top: 5rem; padding-bottom: 5rem; } .sr_otg .SolutionsHeroImg-athletes { width: 100%; max-width: 950px; height: auto; margin: 1rem auto -6rem; } @media (min-width: 768px) { .sr_otg .SolutionsHeroImg-athletes { margin: 0rem auto -10rem; } } @media (min-width: 1300px) { .sr_otg .SolutionsHeroImg-athletes { max-width: 1000px; } } .sr_otg .ConvergingImagesContainer { position: relative; width: 100%; max-width: 1200px; margin: auto; } .sr_otg .foregroundImage { position: relative; } .sr_otg .Rising-img { position: absolute; width: 8%; max-width: 80px; height: auto; } .sr_otg .Rising-img.can-transition { transition: 0.2s all ease-out; -moz-transition: 0.2s all ease-out; -webkit-transition: 0.2s all ease-out; } .sr_otg .Rising-img.No-1 { top: 11%; left: 0%; top: 55px; } .sr_otg .Rising-img.No-2 { top: 8%; left: 18%; top: 42px; } .sr_otg .Rising-img.No-3 { top: 6%; left: 37%; top: 30px; } .sr_otg .Rising-img.No-4 { top: 6%; left: 55%; top: 28px; } .sr_otg .Rising-img.No-5 { top: 8%; left: 73%; top: 42px; } .sr_otg .Rising-img.No-6 { top: 11%; left: 92%; top: 54px; } .sr_otg #AthleteSolutions-SchoolSearch { background: url(../images/sr_otg/school-bg.jpg); background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.5)), to(rgba(33, 44, 53, 0))), url(../images/sr_otg/school-bg.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.5) 0%, rgba(33, 44, 53, 0) 100%), url(../images/sr_otg/school-bg.jpg); background-size: cover; background-position: bottom; text-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5); } @media (min-width: 1200px) { .sr_otg #AthleteSolutions-SchoolSearch { background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0)), to(rgba(33, 44, 53, 0))), url(../images/sr_otg/school-bg.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0) 0%, rgba(33, 44, 53, 0) 100%), url(../images/sr_otg/school-bg.jpg); background-position: bottom; } } .sr_otg #AthleteSolutions-Activity .ProductOverviews-details { padding-bottom: 0; } .sr_otg .AthleteSolutions-Activity-iphoneImg { max-width: 800px; margin-bottom: 0; width: 100%; } @media (min-width: 768px) { .sr_otg .animated-hover-container { margin-left: 2.2rem; margin-right: 2.2rem; } } @media (min-width: 1400px) { .sr_otg .animated-hover-container { margin-left: auto; margin-right: auto; } } .sr_otg .HoverImages-ipad { background: url(../images/sr_otg/hover_images/blank-cropped-ipad.png); position: absolute; top: 0; left: 50%; height: 100%; width: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-size: contain; background-repeat: no-repeat; overflow: hidden; width: 100%; margin-top: 2.5rem; max-width: 800px; } .sr_otg .animated-hover-images { position: relative; padding-left: 0; padding-right: 0; margin-left: 1rem; margin-right: 1rem; } .sr_otg .animated-hover-images .changing-image { opacity: 0; position: absolute; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; z-index: 1; top: 0; left: 0; max-width: 800px; max-height: 392px; margin-top: 0; transform: translateZ(0); -webkit-transform: translateZ(0); } @media (min-width: 768px) { .sr_otg .animated-hover-images .changing-image.is-active { opacity: 1; z-index: 2; } } @media (max-width: 767px) { .sr_otg .animated-hover-images .is-active, .sr_otg .animated-hover-images img { opacity: 0; } .sr_otg .animated-hover-images .default-visible { display: block; opacity: 1 !important; } } .sr_otg .hover-slide img { display: none; } .sr_otg .hover-slide img.active-img { display: inline-block; } @media (min-width: 768px) { .sr_otg .hover-slide h4, .sr_otg .hover-slide p { color: #959595; } .sr_otg .hover-slide img { display: inline-block; } .sr_otg .hover-slide img.active-img { display: none; } .sr_otg .hover-slide.is-active img { display: none; } .sr_otg .hover-slide.is-active .active-img { display: inline-block; } .sr_otg .hover-slide.is-active h4 { color: #212C35; } .sr_otg .hover-slide.is-active p { color: #595959; } } .sr_otg .BrowserMock { width: 100%; height: auto; margin: 0 auto; -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.3); } .sr_otg .BrowserMock-browserBar img, .sr_otg .BrowserMock-screen img { width: 100%; display: block; } .sr_otg .ps-scrollbar-y-rail { display: none; } .sr_otg .ps-scrollbar-x-rail { display: none; } .sr_otg .BrowserMock-screen--scrollable { overflow: -moz-scrollbars-vertical; overflow-y: scroll; position: relative; } .sr_otg .BrowserMock-screen--scrollable::-webkit-scrollbar { width: 6px; } .sr_otg .BrowserMock-screen--scrollable::-webkit-scrollbar-track { -webkit-box-shadow: none; background-color: #f1f1f1; border-radius: 0px; } .sr_otg .BrowserMock-screen--scrollable::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: none; background-color: #bfc1c3; border: 1px solid #f1f1f1; } .sr_otg .BrowserMock-screen--scrollable::-webkit-scrollbar-button { background-color: #7c2929; } @media (min-width: 768px) { .sr_otg .BrowserMock-screen--scrollable::-webkit-scrollbar { width: 12px; height: 12px; } .sr_otg .BrowserMock-screen--scrollable::-webkit-scrollbar-thumb { border: 2px solid #f1f1f1; } } .sr_otg #AthleteSolutions-Profile .BrowserMock { width: 100%; max-width: 850px; height: auto; margin: 2.5rem auto 0 auto; -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.3); } @media (min-width: 1200px) { .sr_otg #AthleteSolutions-Profile .BrowserMock { margin-bottom: -5.8rem; } } @media (max-width: 767px) { .sr_otg #AthleteSolutions-Profile .BrowserMock { margin: 1.5rem auto 0 auto; } } .sr_otg .BrowserMock-browserBar { border: 1px solid #bfc1c3; } .sr_otg .BrowserMock-screen { border-left: 1px solid #bfc1c3; border-right: 1px solid #bfc1c3; border-bottom: 1px solid #bfc1c3; } .sr_otg #AthleteSolutions-Profile .BrowserMock-screen { height: 240px; border-bottom: 1px solid #bfc1c3; } @media (min-width: 450px) { .sr_otg #AthleteSolutions-Profile .BrowserMock-screen { height: 350px; } } @media (min-width: 550px) { .sr_otg #AthleteSolutions-Profile .BrowserMock-screen { height: 440px; } } @media (min-width: 768px) { .sr_otg #AthleteSolutions-Profile .BrowserMock-screen { height: 540px; } } @media (min-width: 1200px) { .sr_otg #AthleteSolutions-Profile .BrowserMock-screen { border-bottom: 0; height: 600px; } } .sr_otg #AthleteSolutions-SchoolSearch .BrowserMock { width: 100%; max-width: 750px; margin: 2.5rem auto 0 auto; visibility: hidden; } @media (min-width: 1200px) { .sr_otg #AthleteSolutions-SchoolSearch .BrowserMock { display: block; position: relative; top: 0; right: 0 !important; margin: 0 auto; width: 100%; min-width: 800px; } } @media (max-width: 767px) { .sr_otg #AthleteSolutions-SchoolSearch .BrowserMock { margin: 1.5rem auto 0 auto; } } .sr_otg #AthleteSolutions-HighlightReel { background-color: #008485; } .sr_otg #AthleteSolutions-HighlightReel .ProductOverviews-details { background-color: transparent; border-top: 0; padding-bottom: 0; } .sr_otg #AthleteSolutions-HighlightReel .ProductOverviews-detailsColumn img { height: 60px; width: auto; } .sr_otg #AthleteSolutions-HighlightReel .ProductOverviews-detailsColumn h4 { color: white; } .sr_otg #AthleteSolutions-HighlightReel .ProductOverviews-detailsColumn p { color: rgba(255, 255, 255, 0.6); max-width: 450px; margin: 0 auto; } body.highlight_reels { background-color: #fff; } @media (min-width: 980px) { .sr_otg .devNote { display: none; } } .sr_otg .HighlightFilterSection { padding-top: 16px; padding-bottom: 12px; overflow: visible; background: #f1f1f1; } .sr_otg .HighlightFilterSection input, .sr_otg .HighlightFilterSection .btn-group { background: #fff; } .sr_otg .HighlightFilter-select { font-size: 16px !important; } .sr_otg .EventPackagesHero p, .sr_otg .EventPackagesHero h1, .sr_otg .EventPackagesHero a { -webkit-transition: none; transition: none; } .sr_otg .HighlightFilter-appliedWrap { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 992px) { .sr_otg .HighlightFilter-appliedWrap .HighlightFilter-select + .HighlightFilter-select { margin-left: 10px; } } .sr_otg .HighlightFilter-appliedWrap h6 { font-size: 18px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; font-family: 'Oswald', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: .2rem; display: inline-block; margin-bottom: 0.7rem; } .sr_otg .HighlightFilter-appliedWrap i.fa-minus-square-o, .sr_otg .HighlightFilter-appliedWrap i.fa-plus-square-o { cursor: pointer; font-weight: 500; margin-left: 8px; margin-bottom: 15px; margin-top: 8px; margin-left: 10px; } @media (min-width: 992px) { .sr_otg .HighlightFilter-appliedWrap i.fa-minus-square-o, .sr_otg .HighlightFilter-appliedWrap i.fa-plus-square-o { display: none; } } .sr_otg .filterPill { background-color: #11bbb5; border: 1px solid #11bbb5; color: white; font-size: 14px; font-weight: 500; padding: .2rem .6rem .3rem; margin-right: 10px; margin-bottom: 15px; border-radius: 500px; float: left; cursor: pointer; text-transform: capitalize; } .sr_otg .filterPill .fa-close { padding-left: 5px; } .sr_otg a.filterPill { text-decoration: none; } .sr_otg a.filterPill:hover { opacity: .6; } .sr_otg .clear-all { background-color: transparent; color: #CE4B28; border: 1px solid #CE4B28; font-size: 14px; font-weight: 500; padding: .2rem .6rem .3rem; border-radius: 500px; cursor: pointer; float: left; } .sr_otg .clear-all:hover { opacity: 0.6; } .sr_otg .filter-header-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 992px) { .sr_otg .filter-header-wrap { display: block; } } .sr_otg .active-filters { text-align: left; padding: 0 20px; max-width: 1440px; margin-left: auto; margin-right: auto; } .sr_otg .video-container-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: auto; width: 100%; margin-bottom: auto; } @media (min-width: 992px) { .sr_otg .video-container-wrapper { padding: 0 15px; } } @media (min-width: 768px) { .sr_otg .video-container-wrapper { max-width: 760px; margin-left: auto; margin-right: auto; } } @media (min-width: 992px) { .sr_otg .video-container-wrapper { width: 970px; max-width: none; } } @media (min-width: 1200px) { .sr_otg .video-container-wrapper { width: 1170px; } } .sr_otg .videosContainer { padding: 0; padding-top: 30px; max-width: 1400px; } .sr_otg .videosContainer .video-wrapper { border: 1px solid #dcdcdc; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; position: relative; padding: 10px; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); } .sr_otg .videosContainer .video-wrapper img { display: block; } @media (max-width: 991px) { .sr_otg .videosContainer .video-wrapper img { height: auto !important; } } .sr_otg .videosContainer h5 { font-family: "Roboto", helvetica, arial, sans-serif; text-transform: none; letter-spacing: 0; font-size: 14px; margin-bottom: 0; } .sr_otg .video-container { margin-bottom: 30px; } .sr_otg .loadMoreContainer { text-align: center; padding-top: 10px; padding-bottom: 60px; } .sr_otg .video-preview:hover .hover-card { opacity: 1; visibility: visible; } .sr_otg .hover-card { position: absolute; cursor: pointer; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; display: none; padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; left: 0; color: #ffffff; -webkit-box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.3); -webkit-transition: visibility .4s, opacity .4s; transition: visibility .4s, opacity .4s; text-align: center; z-index: 1; } .sr_otg .hover-card h5 { color: #ffffff; font-size: 18px; font-family: "Roboto", helvetica, arial, sans-serif; font-weight: 400; margin-top: 16px; } .sr_otg .hover-card p { margin: 0; } .sr_otg .hover-card p.hs, .sr_otg .hover-card p.position { font-size: 14px; font-weight: 300; color: #ffffff; } .sr_otg .hover-card a { color: #ffffff; } .sr_otg .boxit, .sr_otg .boxit img { display: block; } .sr_otg .commit-banner { width: 100%; height: 142px; background: #1cb79e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif; color: #ffffff; padding: 10px; text-transform: uppercase; } .sr_otg .commit-banner .committment { margin-top: 6px; display: block; } .sr_otg .commit-banner img { display: block; } .sr_otg .video_player_content { margin-top: 12px; text-align: left; } .sr_otg .video_player_content h5 { font-weight: 400; margin-bottom: 1px; -webkit-font-smoothing: auto; } .sr_otg .video_player_content .sr { -webkit-font-smoothing: auto !important; } .sr_otg .video_player_content .viewed { color: #787878; display: inline-block; } .sr_otg .video_player_content .viewed span { font-family: "Roboto", helvetica, arial, sans-serif; } .sr_otg .icon_text { font-size: 14px; text-decoration: none; cursor: default; color: #787878; white-space: nowrap; vertical-align: text-bottom; margin-left: 5px; position: absolute; } .sr_otg .filter-settings { width: 100%; } .sr_otg .filter-settings input[type="checkbox"] { display: none; } .sr_otg .filter-settings .btn-group { position: relative; -webkit-font-smoothing: auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .sr_otg .filter-settings .btn-group:first-of-type { border-top-left-radius: 4px; border-top-right-radius: 4px; } .sr_otg .filter-settings .btn-group:last-of-type { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .sr_otg .filter-settings .btn-group .dropdown-toggle { margin-bottom: 0; max-width: none; } @media (min-width: 992px) { .sr_otg .filter-settings .btn-group .dropdown-toggle { border: 1px solid #dcdcdc; border-radius: 4px; } } .sr_otg .filter-settings .btn-group .dropdown-toggle.disabled { opacity: 0.6; cursor: auto; } .sr_otg .filter-settings .btn-group .dropdown-toggle span { font-size: 16px; } .sr_otg .filter-settings .btn-group.open .caret { border-top-width: 0; border-top-color: transparent; border-bottom: 5px dashed; } @media (min-width: 768px) { .sr_otg .filter-settings { margin-right: auto; margin-left: auto; } } @media (min-width: 992px) { .sr_otg .filter-settings { display: -webkit-box; display: -ms-flexbox; display: flex; } .sr_otg .filter-settings .btn-group { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; z-index: 99; border-radius: 4px; } .sr_otg .filter-settings .btn-group a { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .sr_otg .filter-settings .btn-group a span:first-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: left; } .sr_otg .filter-settings .btn-group a span:last-child { margin-top: 9px; } .sr_otg .filter-settings .btn-group + .btn-group { margin-left: 10px; } } .sr_otg .filter-settings .dropdown-menu { font-size: 14px; width: 100%; padding-topreel: 10px; } .sr_otg .filter-settings .dropdown-menu li { width: 100%; float: left; } .sr_otg .filter-settings .dropdown-menu label { font-size: 14px; cursor: pointer; } .sr_otg .filter-settings .dropdown-menu a { color: #333; } .sr_otg .filter-settings .dropdown-menu a:hover { color: #333; } @media (max-width: 991px) { .sr_otg .filter-settings .dropdown-menu li:hover { background-color: #fff; } } .sr_otg .filter-settings input[type=checkbox] + label, .sr_otg .filter-settings a[data-value] { padding-left: 23px; height: auto; padding-top: 0; float: left; background: transparent; } .sr_otg .filter-settings input[type=checkbox] + label:before, .sr_otg .filter-settings a[data-value]:before { content: "\f1db"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translate(0, 0); transform: translate(0, 0); margin-left: -25px; margin-right: 6px; color: #11bbb5; } .sr_otg .filter-settings a[data-value] { margin-left: 0; } .sr_otg .filter-settings input[type=checkbox]:checked + label:before, .sr_otg .filter-settings a[data-value].checked:before { content: "\f058"; } @media (max-width: 991px) { .sr_otg .filter-settings { border-radius: 3px; background: #f1f1f1; border: 1px solid #dcdcdc; text-align: left; } .sr_otg .filter-settings .btn-group { display: block; } .sr_otg .filter-settings .btn-group + .btn-group { border-top: 1px solid #dcdcdc; } .sr_otg .filter-settings .dropdown-menu { float: none; position: static; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; border: 0; border-top: 1px solid #dcdcdc; padding: 6px 10px 10px; } .sr_otg .filter-settings .dropdown-menu:after { content: ''; display: block; clear: both; } .sr_otg .filter-settings .dropdown-menu li a { display: block; color: #000; cursor: pointer; } .sr_otg .filter-settings .dropdown-menu li a:hover { background: transparent; } .sr_otg .filter-settings .dropdown-toggle { float: none; width: 100%; text-align: left; position: relative; border: 0; padding-top: 6px; padding-bottom: 6px; font-size: 18px; } .sr_otg .filter-settings .dropdown-toggle .caret { position: absolute; right: 10px; top: 50%; } } #Modal_watch_video { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } #Modal_watch_video.in { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } #Modal_watch_video .modal-header { text-align: center; border-bottom: 0; padding: 0; } #Modal_watch_video .modal-header h4 { color: #fff; font-size: 24px; } @media (min-width: 768px) { #Modal_watch_video .modal-header h4 { font-size: 36px; } } #Modal_watch_video .modal-header p { color: #fff; display: none; } #Modal_watch_video .modal-body { width: 100% !important; height: 100% !important; position: relative; margin: 0 auto; } #Modal_watch_video .dummy { z-index: 0; width: 100%; padding-top: 56.25%; } #Modal_watch_video #video_instance { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 0; width: 100% !important; height: 100% !important; overflow: visible !important; background: #000; } .kWidgetIframeContainer { margin-left: auto; margin-right: auto; width: 100% !important; } .modal.video { bottom: auto; margin-left: auto; margin-right: auto; margin-top: -20%; width: 90%; top: 50%; } @media (min-width: 480px) { .modal.video { width: 60%; } } .modal.video .modal-header { display: none; } .modal.video .modal-body { position: initial; max-height: none; padding: 0; overflow-y: initial; } .modal.video #video_description { display: none; color: #fff; padding: 10px 6px 6px; } .modal.video #video_description h4 { color: #fff; font-size: 18px; margin: 0 0 5px; } .modal.video #video_description p { margin: 0 0 0 1px; color: #999; } #ClubSoultions-EmpowerYourPlayers h4 { font-size: 22px; } .ClubSoultions-EmpowerYourPlayers-toolsWrap { margin-bottom: 2.5rem; } .ClubSoultions-EmpowerYourPlayers-toolsWrap p { color: #888888; } .ClubSoultions-EmpowerYourPlayers { width: 80%; max-width: 150px; margin-bottom: 1.5rem; margin-top: 2.5rem; } .ClubSolutions-MobilePhone { width: 80%; max-width: 300px; margin: 1.5rem auto 0; } .ClubSolutions-MobilePhone img { display: block; width: 100%; margin: 0 auto -2rem; } #ClubSolutions-CompleteOversight { background: -webkit-gradient(linear, left top, left bottom, from(rgba(33, 44, 53, 0.5)), to(rgba(33, 44, 53, 0.5))), url(../images/sr_otg/stats-bg.jpg); background: linear-gradient(to bottom, rgba(33, 44, 53, 0.5) 0%, rgba(33, 44, 53, 0.5) 100%), url(../images/sr_otg/stats-bg.jpg); background-size: cover; background-position: center; } #ClubSolutions-ourCustomers .club-logo-col { padding: 2rem; } .ClubSolutions-centralizedRecruiting-item { margin-top: 3rem; } .ClubSolutions-centralizedRecruiting-item + .ClubSolutions-centralizedRecruiting-item { margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid rgba(255, 255, 255, 0.2); } .ClubSolutions-centralizedRecruiting-item img { margin-bottom: 1rem; height: 50px; width: auto; } @media only screen and (min-width: 768px) { .ClubSolutions-centralizedRecruiting-item img { margin-bottom: 0; width: 50px; height: auto; } } .ClubSolutions-centralizedRecruiting-item h4 { font-weight: 300; font-size: 22px; letter-spacing: .03em; /*text-transform: uppercase;*/ margin-bottom: .4rem; color: white; line-height: 1.4; } .ClubSolutions-centralizedRecruiting-item p { font-weight: normal; font-size: 16px; color: rgba(255, 255, 255, 0.6); margin-bottom: 0; } .ClubSolutions-CompleteOversight-img { margin-top: 2.5rem; } @media (min-width: 1200px) { .ClubSolutions-CompleteOversight-img { margin-top: 0; } } .ClubSolutions-WhatCanYouDoSR-sectionsWrap { position: relative; margin-top: 0rem; padding-top: 1.5rem; padding-bottom: 3rem; } @media only screen and (min-width: 768px) { .ClubSolutions-WhatCanYouDoSR-sectionsWrap { margin-top: 2.5rem; padding-top: 2rem; padding-bottom: 6rem; } } .ClubSolutions-WhatCanYouDoSR-sectionsWrap::before { background: transparent; } @media only screen and (min-width: 768px) { .ClubSolutions-WhatCanYouDoSR-sectionsWrap::before { content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed; left: 50%; margin-left: -2px; border-top-right-radius: 100px; border-top-left-radius: 100px; } } .ClubSolutions-WhatCanYouDoSR-section-circle { display: none; } @media only screen and (min-width: 768px) { .ClubSolutions-WhatCanYouDoSR-section-circle { display: block; height: 9px; width: 9px; border-radius: 100px; background-color: white; border: 4px solid #d7e4ed; margin: 0 auto; } } @media only screen and (min-width: 768px) { .lightGrayHR + .ClubSolutions-WhatCanYouDoSR-section { margin-top: 6rem; } } .ClubSolutions-WhatCanYouDoSR-section h4 { font-size: 26px; } @media (min-width: 840px) { .ClubSolutions-WhatCanYouDoSR-section h4 { font-size: 32px; } } .ClubSolutions-WhatCanYouDoSR-section p { font-size: 16px; color: #888888; margin: 0 0 1.5rem 0; } @media only screen and (min-width: 768px) { .ClubSolutions-WhatCanYouDoSR-section p { margin: 0; } } @media (min-width: 840px) { .ClubSolutions-WhatCanYouDoSR-section p { font-size: 18px; } } .ClubSolutions-WhatCanYouDoSR-section img { width: 100%; } .ClubSolutions-WhatCanYouDoSR-demoRequest { border: 2px solid #d7e4ed; padding: 1.5rem 1.5rem 2rem; border-radius: 4px; } .ClubSolutions-WhatCanYouDoSR-demoRequest h3 { margin-bottom: .5rem; } @media only screen and (min-width: 768px) { .ClubSolutions-WhatCanYouDoSR-demoRequest { padding: 2.5rem 1.5rem 3rem; } } .CompleteOversight-activityFeedWrap { display: inline-block; margin: auto; } .CompleteOversight-activityFeed:first-of-type { margin-top: 2rem; } .CompleteOversight-activityFeed + .CompleteOversight-activityFeed { margin-top: 3rem; } @media only screen and (min-width: 768px) { .CompleteOversight-activityFeed { font-size: 21px; } } .CompleteOversight-activityFeed { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white; font-family: 'Helvetica Neue'; font-size: 18px; text-align: left; font-weight: 300; text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5); } @media only screen and (min-width: 768px) { .CompleteOversight-activityFeed { font-size: 21px; } } .CompleteOversight-activityFeedTime { font-size: 13px; margin-bottom: .2rem; font-weight: normal; } @media only screen and (min-width: 768px) { .CompleteOversight-activityFeedTime { margin-bottom: 0; font-size: 14px; } } .CompleteOversight-activityFeedAvatar { margin-left: 0; margin-right: .8rem; width: 52px; height: 52px; -webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.4); border-radius: 500px; background-size: cover; } .CompleteOversight-activityFeedAvatar--athlete { background-image: url(../images/sr_otg/male-athlete-avatar.png); } .CompleteOversight-activityFeedAvatar--college { background-image: url(../images/sr_otg/ohio-state-avatar.png); } .CompleteOversight-activityFeedAvatar--club { background-image: url(../images/sr_otg/male-club-avatar.png); } .CompleteOversight-activityFeedAvatar img { width: 52px; } @media only screen and (min-width: 768px) { .CompleteOversight-activityFeedAvatar { margin-left: .8rem; width: 60px; height: 60px; } .CompleteOversight-activityFeedAvatar img { width: 60px; } } .DashedLineContainer { width: 5px; } .DashedLine { background: #11bbb5; border: 1px solid #11bbb5; border-radius: 3px; width: 3px; height: 8px; margin: 4px; margin-left: 24px; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .DashedLine.is-visible { opacity: 1; } @media (min-width: 768px) { .DashedLine { margin-left: 97px; } } @media (min-width: 992px) { .DashedLine { margin-left: 98px; } } .DashedLine-main-element { opacity: 0; -webkit-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } .DashedLine-main-element.is-visible { opacity: 1; } .sr_otg .CampGuideHero { background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.9)), color-stop(25%, rgba(33, 44, 53, 0.85)), to(rgba(33, 44, 53, 0.7))), url(../images/sr_otg/lacrosse_camp_header.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.9) 0%, rgba(33, 44, 53, 0.85) 25%, rgba(33, 44, 53, 0.7) 100%), url(../images/sr_otg/lacrosse_camp_header.jpg); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6141c21', endColorstr='#d9212c35',GradientType=0 ), url(../images/sr_otg/lacrosse_camp_header.jpg); background-size: cover; background-position: center; } .sr_otg .EventGrid-eventsWrap { margin-top: 1rem; } .sr_otg .EventFilter-col { padding: .6rem 0; } .sr_otg .EventFilter-col + .EventFilter-col { padding-top: 0rem; } @media only screen and (min-width: 48em) { .sr_otg .EventFilter-col { padding: .6rem; } .sr_otg .EventFilter-col + .EventFilter-col { padding-top: .6rem; } } .sr_otg .EventGrid-card { -webkit-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; } .sr_otg .EventGrid-thumb { width: 100%; height: 220px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url(../images/sr_otg/camp-thumb-grass-bg.jpg); background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../images/sr_otg/camp-thumb-grass-bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top-left-radius: 2px; border-top-right-radius: 2px; } .sr_otg .EventGrid-thumb-horzImg { width: 90%; max-width: 330px; margin: 0 auto; } .sr_otg .EventGrid-thumb-vertImg { height: 80%; margin: 0 auto; } .sr_otg .EventGrid-description { padding: .8rem .8rem 1.2rem; padding: .8rem; background-color: white; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .sr_otg .EventGrid-descriptionName { font-family: 'Oswald','Helvetica Neue', helvetica, arial, sans-serif; font-size: 18px; text-transform: uppercase; margin-bottom: .3rem; font-weight: 400; } .sr_otg .EventGrid-descriptionDate { font-size: 15px; margin-bottom: .2rem; } .sr_otg .EventGrid-descriptionLocation { font-size: 15px; margin-bottom: 0; } .sr_otg .EventGrid-description .OTGBtn, body.sr_otg.redirect_modal .EventGrid-description .sweet-alert button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert .EventGrid-description button.sweet-confirm { margin-top: 1rem; } .sr_otg .CampGuideIntro p { line-height: 1.8; color: #494949; } .sr_otg .CampGuideIntro h2 { font-family: 'Oswald','Helvetica Neue', helvetica, arial, sans-serif; font-size: 44px; color: #888888; margin-bottom: 1.5rem; text-align: center; } @media only screen and (min-width: 48em) { .sr_otg .CampGuideIntro h2 { font-size: 60px; text-align: left; } } .sr_otg .CampGuideGridWrap { padding-top: 3rem; } @media (max-width: 767px) { .sr_otg .CampGuideGridWrap { padding-top: 1.5rem; } } .sr_otg .CampGuideGridWrap .ProductOverviews-tabBtnGroup { margin: 0rem auto 2rem auto; } @media (max-width: 767px) { .sr_otg .CampGuideGridWrap .ProductOverviews-tabBtnGroup { margin: 0rem auto 1rem auto; } } .sr_otg .ProductOverviews-tabBtn--boys { border-left: 2px solid #dcdcdc; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .sr_otg .ProductOverviews-tabBtn--boys:hover { color: #44b3da; } .sr_otg .ProductOverviews-tabBtn--boys.selected { background-color: #44b3da; border-color: #44b3da !important; color: white; } .sr_otg .ProductOverviews-tabBtn--girls { border-right: 2px solid #dcdcdc; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .sr_otg .ProductOverviews-tabBtn--girls:hover { color: #de3859; } .sr_otg .ProductOverviews-tabBtn--girls.selected { background-color: #de3859; border-color: #de3859 !important; color: white; } .sr_otg .CampGuideHero .breadcrumbs { margin-bottom: .8rem; } .sr_otg .CampGuideHero .OTGBtn, body.sr_otg.redirect_modal .CampGuideHero .sweet-alert button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert .CampGuideHero button.sweet-confirm { margin-top: .8rem; } .sr_otg .CampGuideHero .OTGBtn:hover, body.sr_otg.redirect_modal .CampGuideHero .sweet-alert button.sweet-confirm:hover, body.sr_otg.redirect_modal .sweet-alert .CampGuideHero button.sweet-confirm:hover { color: #30A9DE; } .sr_otg .CampGuideEventPageSidebar h4 { margin-bottom: .2rem; font-size: 16px; font-weight: 500; } .sr_otg .CampGuideEventPageSidebar p { margin-bottom: 1rem; } .sr_otg .CampGuideEventPageSidebar p:last-of-type { margin-bottom: 0; } .sr_otg .CampGuideEventPageSidebar a { word-break: break-all; } .sr_otg .CampGuideEventMainContent h3 { margin-top: 3rem; } @media only screen and (min-width: 48em) { .sr_otg .CampGuideEventMainContent h3:first-of-type { margin-top: 0; } } .sr_otg .event-card-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .sr_otg #toggleTabs a { cursor: pointer; } .sr_otg #googleMap { height: 400px; width: 100%; } .tooltip .tooltip-inner { text-align: left; max-width: 340px; } .tooltip { position: absolute; z-index: 1070; display: block; font-family: Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.4; opacity: 0; } .tooltip.in { opacity: 1; } .tooltip.top { margin-top: -3px; padding: 5px 0; } .tooltip.right { margin-left: 3px; padding: 0 5px; } .tooltip.bottom { margin-top: 3px; padding: 5px 0; } .tooltip.left { margin-left: -3px; padding: 0 5px; } .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px; } .tooltip .tooltip-inner { text-align: left; max-width: 340px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.top-left .tooltip-arrow { bottom: 0; right: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } body.insights { /* Hide arrow on IE10*/ /* IE9: To hide select arrow we make the select overflow on the right side there is not another way :( */ /* Hover and focus states */ /* Checked state */ /* Hover state whilst checked */ /* Disabled state */ /* Check mark */ /* Show check mark */ /* Checkbox tick */ /* Disabled tick colour */ } body.insights #wrap { min-width: 0; } body.insights #InsightsApplication { background-color: #f1f3f5; position: absolute; height: 100%; padding-top: 30px; padding-bottom: 60px; } @media (min-width: 700px) { body.insights #InsightsApplication { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/insights-form-bg.png"); background-size: 100%; background-position: top; background-repeat: no-repeat; padding-top: 60px; padding-bottom: 80px; } } body.insights #InsightsApplication .InsightsLogo { margin-bottom: 30px; } body.insights #InsightsApplication .SectionWrapper { background-color: transparent; padding-top: 40px; } body.insights #InsightsApplication .pageHeading { font-size: 25px; margin-top: 0; margin-bottom: 18px; font-weight: 700; color: #33475b; letter-spacing: .01em; } @media (min-width: 700px) { body.insights #InsightsApplication .pageHeading { font-size: 30px; } } body.insights #InsightsApplication .subHeading { font-size: 16px; color: #888888; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; } body.insights .InsightsFormCard { -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 40px 20px; max-width: 700px; margin: 0 auto; border-radius: 4px; text-align: center; background-color: white; -webkit-box-shadow: 0 10px 18px rgba(134, 142, 150, 0.2), 0 20px 20px -15px rgba(134, 142, 150, 0.2); box-shadow: 0 10px 18px rgba(134, 142, 150, 0.2), 0 20px 20px -15px rgba(134, 142, 150, 0.2); } @media (min-width: 600px) { body.insights .InsightsFormCard { padding: 50px 60px; } } body.insights .InsightsFormWrap { max-width: 450px; margin: 30px auto 30px; } body.insights .InsightsFormWrap label { display: block; text-align: left; padding: 5px 0; font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; color: #343a40; } body.insights .InsightsFormWrap .labelDescription { font-size: 13px; margin-top: 4px; color: #868e96; } body.insights .InsightsFormWrap input[type="text"], body.insights .InsightsFormWrap input[type="tel"], body.insights .InsightsFormWrap input[type="email"], body.insights .InsightsFormWrap input[type="email"], body.insights .InsightsFormWrap input[type="submit"], body.insights .InsightsFormWrap textarea { font-size: 16px !important; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: normal; color: #343a40; margin: 5px 0; border: 2px solid #ced4da; border-radius: 2px; width: 100%; padding: 10px !important; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; } body.insights .InsightsFormWrap input[type="email"]:focus, body.insights .InsightsFormWrap input[type="email"]:active, body.insights .InsightsFormWrap input[type="tel"]:focus, body.insights .InsightsFormWrap input[type="tel"]:active, body.insights .InsightsFormWrap input[type="text"]:active, body.insights .InsightsFormWrap textarea:active, body.insights .InsightsFormWrap input[type="text"]:focus, body.insights .InsightsFormWrap textarea:focus { -webkit-box-shadow: 0; box-shadow: 0; border: 2px solid #51cbee; } body.insights .InsightsFormWrap textarea { height: 180px; overflow: auto; resize: vertical; } body.insights .InsightsFormWrap input + label, body.insights .InsightsForm-Select + label { padding-top: 30px; } body.insights .InsightsForm-Select { width: 100%; max-width: 100%; margin: 6px 0; overflow: hidden; border-radius: 2px; /* */ background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E") right 10px center no-repeat; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; } body.insights .InsightsForm-Select:hover { /* */ background: white url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E") right 10px center no-repeat; border-color: #51cbee; } body.insights .InsightsForm-Select select { width: 100%; border: 2px solid #ced4da; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; background: transparent; background-image: none; -webkit-appearance: none; outline: none; cursor: pointer; /* Hide arrow on FF */ -moz-appearance: none; text-indent: 0.01px; text-overflow: ellipsis; padding: 10px 30px 10px 10px; /* You can style text of the active select option */ font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-size: 16px; font-weight: normal; color: #343a40; height: initial; } body.insights .InsightsForm-Select select::-ms-expand { display: none; } body.insights .InsightsForm-Select optgroup { color: inherit; font: inherit; } @media screen and (min-width: 0\0) { body.insights .InsightsForm-Select select { width: calc( 100% + 58px); } } body.insights #InsightsApplication .control-group { display: inline-block; text-align: left; vertical-align: top; margin: 6px 0; } body.insights #InsightsApplication .control { font-size: 15px !important; position: relative; display: block; margin-bottom: 18px; margin-top: 4px; padding-left: 24px !important; padding-top: 0px !important; padding-bottom: 0 !important; cursor: pointer; } body.insights #InsightsApplication label.control.control--checkbox { font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: normal; } body.insights #InsightsApplication .control input { position: absolute; z-index: -1; opacity: 0; } body.insights #InsightsApplication .control__indicator { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 2px; background: #dee2e6; } body.insights #InsightsApplication .control:hover input ~ .control__indicator, body.insights #InsightsApplication .control input:focus ~ .control__indicator { background: #ced4da; } body.insights #InsightsApplication .control input:checked ~ .control__indicator { background: #67D5B5; } body.insights #InsightsApplication .control:hover input:not([disabled]):checked ~ .control__indicator, body.insights #InsightsApplication .control input:checked:focus ~ .control__indicator { background: #67D5B5; } body.insights #InsightsApplication .control input:disabled ~ .control__indicator { pointer-events: none; opacity: .6; background: #e6e6e6; } body.insights #InsightsApplication .control__indicator:after { position: absolute; display: none; content: ''; } body.insights #InsightsApplication .control input:checked ~ .control__indicator:after { display: block; } body.insights #InsightsApplication .control--checkbox .control__indicator:after { top: 2px; left: 6px; width: 3px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: solid #fff; border-width: 0 2px 2px 0; } body.insights #InsightsApplication .control--checkbox input:disabled ~ .control__indicator:after { border-color: #7b7b7b; } body.insights span.required-asterisk { color: #ff8787; } body.insights .js_hidden_success { display: none; } body.insights .OTGBtn.OTGBtn--large.OTGBtn--successGreen, body.insights body.sr_otg.redirect_modal .sweet-alert button.OTGBtn--large.OTGBtn--successGreen.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert body.insights button.OTGBtn--large.OTGBtn--successGreen.sweet-confirm { border: none; } body.insights a.OTGBtn.OTGBtn--large.OTGBtn--successGreen { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; } body.insights #InsightsApplication input.form-required, body.insights #InsightsApplication .SelectDropdown.form-required, body.insights textarea.form-required { border-color: #ff8787 !important; } body.insights #InsightsApplication input.form-required::-webkit-input-placeholder, body.insights #InsightsApplication .SelectDropdown.form-required::-webkit-input-placeholder, body.insights textarea.form-required::-webkit-input-placeholder { color: #ff8787; font-style: italic; } body.insights div.alert.alert-error { max-width: 450px; margin-bottom: 30px; margin-top: 30px; } body.insights input.form-success { border-color: #ced4da !important; } body.insights input.form-error.form-success { border-color: #ff8787 !important; } body.insights .OTGBtn.OTGBtn--large.OTGBtn--successGreen, body.insights body.sr_otg.redirect_modal .sweet-alert button.OTGBtn--large.OTGBtn--successGreen.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert body.insights button.OTGBtn--large.OTGBtn--successGreen.sweet-confirm { text-shadow: none !important; } .sr_otg .OTGBtn--insightsBlue { background-color: #00b4ff; color: white; } .sr_otg .OTGBtn--insightsBlue:hover { background-color: #00b4ff; color: white; opacity: .8; } .sr_otg #Insights { /***** Customer Quotes *****/ /***** What's Included *****/ /***** Dedicated Analyst *****/ /***** Personal Curriculum *****/ /***** Data and Analytics *****/ /***** Highlight Reels *****/ } .sr_otg #Insights .u-flex-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .sr_otg #Insights .u-flex-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .sr_otg #Insights .make-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .sr_otg #Insights .ExtraColPadding { padding: 0 1rem; } @media only screen and (min-width: 48em) { .sr_otg #Insights .ExtraColPadding { padding: 0 2rem; } } .sr_otg #Insights .container-1260 { margin-right: auto; margin-left: auto; max-width: 1260px; } @media (max-width: 1300px) { .sr_otg #Insights .container-1260 { margin-left: 1.2rem; margin-right: 1.2rem; } } .sr_otg #Insights .insightsGradient-bg { background: #0080b3; background: -webkit-gradient(left top, right bottom, color-stop(0%, #0080b3), color-stop(100%, #00b3ff)); background: linear-gradient(135deg, #0080b3 0%, #00b3ff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0080b3', endColorstr='#00b3ff', GradientType=1 ); } .sr_otg #Insights .hr-insightsBlue { height: 4px; width: 16px; margin: .7rem auto; background-color: #00b4ff; } .sr_otg #Insights .calendly-overlay { background-color: rgba(31, 31, 31, 0.8) !important; } .sr_otg #Insights .pageHeading-sm { font-size: 30px; margin: 0 auto .8rem; letter-spacing: -.1px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .pageHeading-sm { font-size: 38px; margin: 0 auto .8rem; } } .sr_otg #Insights .pageSubheading-sm { font-size: 16px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .pageSubheading-sm { font-size: 19px; max-width: 750px; } } .sr_otg #Insights .cardContainer { -webkit-box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); border-radius: 4px; margin-bottom: 20px; background-color: white; } .sr_otg #Insights .grayGradient-bg { background: white; background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), to(#f1f1f1)); background: linear-gradient(to bottom, white 0%, white 50%, #f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1', GradientType=0 ); } .sr_otg #Insights #Insights p { color: #595959; } .sr_otg #Insights #Insights-Intro { padding-top: 100px; background: -webkit-gradient(linear, left top, right bottom, from(rgba(33, 44, 53, 0.7)), to(rgba(0, 0, 0, 0.5))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/insights-plexus-bg.jpg); background: linear-gradient(to bottom right, rgba(33, 44, 53, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/insights-plexus-bg.jpg); background-size: cover; background-position: left; } @media only screen and (min-width: 48em) { .sr_otg #Insights #Insights-Intro { padding-top: 150px; } } .sr_otg #Insights #Insights-Intro .InsightsLogo { width: 100%; max-width: 270px; margin: 0 auto 18px; } @media only screen and (min-width: 48em) { .sr_otg #Insights #Insights-Intro .InsightsLogo { width: 100%; max-width: 300px; } } .sr_otg #Insights #Insights-Intro .heroBtns .OTGBtn, body.sr_otg.redirect_modal #Insights #Insights-Intro .heroBtns .sweet-alert button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert #Insights #Insights-Intro .heroBtns button.sweet-confirm { margin: 14px 3px; } .sr_otg #Insights #Insights-Intro .heroBtns .OTGBtn + .OTGBtn, body.sr_otg.redirect_modal #Insights #Insights-Intro .heroBtns .sweet-alert button.sweet-confirm + .OTGBtn, body.sr_otg.redirect_modal .sweet-alert #Insights #Insights-Intro .heroBtns button.sweet-confirm + .OTGBtn, body.sr_otg.redirect_modal #Insights #Insights-Intro .heroBtns .sweet-alert .OTGBtn + button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert #Insights #Insights-Intro .heroBtns .OTGBtn + button.sweet-confirm, body.sr_otg.redirect_modal #Insights #Insights-Intro .heroBtns .sweet-alert button.sweet-confirm + button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert #Insights #Insights-Intro .heroBtns button.sweet-confirm + button.sweet-confirm { margin-top: 0; } .sr_otg #Insights .OTGBtn, body.sr_otg.redirect_modal #Insights .sweet-alert button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert #Insights button.sweet-confirm { width: 100%; } @media only screen and (min-width: 400px) { .sr_otg #Insights .OTGBtn, body.sr_otg.redirect_modal #Insights .sweet-alert button.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert #Insights button.sweet-confirm { width: auto; } } .sr_otg #Insights .insights-video-wrap { width: 100%; max-width: 1000px; margin: 30px auto -80px auto; border-radius: 4px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .insights-video-wrap { margin: 50px auto -170px auto; } } .sr_otg #Insights .insights-video-wrap .wistia_responsive_padding { background-color: #494949; -webkit-box-shadow: 0 4px 24px rgba(33, 44, 53, 0.5); box-shadow: 0 4px 24px rgba(33, 44, 53, 0.5); border-radius: 4px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .insights-intro-w-video + #Insights-Commitment { padding-top: 150px; } } .sr_otg #Insights .Quote { font-size: 24px; margin: 10px auto 30px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Quote { font-size: 36px; max-width: 1400px; padding: 10px 20px; margin: 20px auto 40px; } } .sr_otg #Insights .Quote .fa-quote-left { opacity: .5; font-size: 22px; vertical-align: top; } .sr_otg #Insights .QuoteOwner { font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif; font-weight: 500; } .sr_otg #Insights .QuoteOwnerSchool { font-weight: normal; } .sr_otg #Insights .Insights-QuoteImage { height: 60px; width: 60px; border-radius: 50%; -webkit-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.5); } .sr_otg #Insights .Insights-QuoteImage:last-of-type { margin-left: -12px; } .sr_otg #Insights .annaSpellman-bg { background: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 75, 107, 0.8)), to(rgba(0, 179, 255, 0.6))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/anna-bg.jpg); background: linear-gradient(to bottom right, rgba(0, 75, 107, 0.8) 0%, rgba(0, 179, 255, 0.6) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/anna-bg.jpg); background-size: cover; background-position: center; } .sr_otg #Insights .caseMathias-bg { background: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 75, 107, 0.8)), to(rgba(0, 179, 255, 0.6))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/case-bg.jpg); background: linear-gradient(to bottom right, rgba(0, 75, 107, 0.8) 0%, rgba(0, 179, 255, 0.6) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/case-bg.jpg); background-size: cover; background-position-y: center; background-position-x: 80%; } .sr_otg #Insights #Insights-approach { margin-bottom: 5.4rem; } .sr_otg #Insights #Insights-approach .SectionWrapper { padding-top: 3.5rem; padding-bottom: 2.5rem; border-radius: 4px; } @media only screen and (min-width: 48em) { .sr_otg #Insights #Insights-approach .SectionWrapper { background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))), url(http://sportsrecruits.com/images/sr_otg/playbook_transparent_repeatable_bg.png); background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%), url(http://sportsrecruits.com/images/sr_otg/playbook_transparent_repeatable_bg.png); background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.7))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/plexus-bg-1.png); background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/plexus-bg-1.png); background-size: cover; background-repeat: repeat-x; background-position: bottom; } } .sr_otg #Insights .Insights-approachDetails .col-xs-12 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Insights-approachDetails .col-xs-12:first-of-type { padding-left: 2rem; } .sr_otg #Insights .Insights-approachDetails .col-xs-12:last-of-type { padding-right: 2rem; } } .sr_otg #Insights .Insights-approachDetails .box { background-color: rgba(255, 255, 255, 0.45); border-radius: 4px; padding: 3rem 1.2rem 1rem; margin-top: 1.5rem; border: 1px solid #dcdcdc; border-top: 6px solid #00b4ff; } .sr_otg #Insights .Insights-approachDetails .number { font-family: 'Oswald', 'Roboto', 'Helvetica Neue', Helvetica, sans-serif; font-size: 44px; margin-bottom: 2px; opacity: .8; } .sr_otg #Insights .Insights-approachDetails { margin-top: 10px; } .sr_otg #Insights .Insights-approachDetails h3 { margin-bottom: 10px; } .sr_otg #Insights .Insights-approachDetails h4 { font-size: 22px; font-weight: 400; margin-bottom: 8px; } .sr_otg #Insights .WhatsIncluded { width: 100%; max-width: 1060px; margin: 10px auto 0px; padding: 0 1rem; } @media only screen and (min-width: 48em) { .sr_otg #Insights .WhatsIncluded { margin: 30px auto 0px; } } .sr_otg #Insights .WhatsIncluded-col { padding: 5px; } .sr_otg #Insights .WhatsIncluded-link { padding: 20px 0; border-radius: 4px; -webkit-transition: all ease .2s; transition: all ease .2s; display: block; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 48em) { .sr_otg #Insights .WhatsIncluded-link { margin: 0; padding: 25px 20px; } } .sr_otg #Insights .WhatsIncluded-link:hover { -webkit-box-shadow: none; box-shadow: none; text-decoration: none; } .sr_otg #Insights .WhatsIncluded-link img { width: 50px; height: 50px; margin-bottom: 12px; } .sr_otg #Insights .WhatsIncluded-link h4 { font-size: 13px; font-weight: 400; display: inline-block; padding-bottom: 3px; margin-bottom: 0; } @media only screen and (min-width: 48em) { .sr_otg #Insights .WhatsIncluded-link h4 { font-size: 16px; } } .sr_otg #Insights .WhatsIncluded-col:first-of-type { border-bottom: 1px solid #dcdcdc; } .sr_otg #Insights .WhatsIncluded-col:nth-of-type(2) { border-left: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; } .sr_otg #Insights .WhatsIncluded-col:last-of-type { border-left: 1px solid #dcdcdc; } @media only screen and (min-width: 48em) { .sr_otg #Insights .WhatsIncluded-col:first-of-type { border-right: 0; border-bottom: 0; } .sr_otg #Insights .WhatsIncluded-col + .WhatsIncluded-col { border-left: 1px solid #dcdcdc; border-bottom: 0; } } .sr_otg #Insights #Insights-WhatsIncluded { margin-top: -25px; } @media only screen and (min-width: 48em) { .sr_otg #Insights #Insights-WhatsIncluded .SectionWrapper { padding-left: 1rem; padding-right: 1rem; padding-top: 4.5rem; padding-bottom: 4.5rem; } } .sr_otg #Insights #Insights-WhatsIncluded .SectionWrapper:first-of-type { border-top-left-radius: 4px; border-top-right-radius: 4px; } .sr_otg #Insights #Insights-WhatsIncluded .SectionWrapper:last-of-type { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .sr_otg #Insights #Insights-WhatsIncluded .pageSubheading { max-width: 820px; } .sr_otg #Insights #Insights-DedicatedAnalyst, .sr_otg #Insights #Insights-PersonalCurriculum, .sr_otg #Insights #Insights-DataAnalytics, .sr_otg #Insights #Insights-HighlightReels { background: white; background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), to(#f1f1f1)); background: linear-gradient(to bottom, white 0%, white 50%, #f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1', GradientType=0 ); } .sr_otg #Insights .Insights-WhatsIncluded-icon { border-radius: 0; margin-bottom: 10px; width: 40px; height: 40px; } @media only screen and (min-width: 62em) { .sr_otg #Insights #Insights-DedicatedAnalyst { padding-bottom: 0 !important; } } .sr_otg #Insights .Insights-DedicatedAnalyst-quoteWrap { margin-top: 0; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Insights-DedicatedAnalyst-quoteWrap { margin-top: 30px; } } .sr_otg #Insights .analystHeadshot-mobile { display: block; width: 100%; max-width: 280px; margin: 20px auto; border: 2px solid #dcdcdc; border-radius: 50%; } @media only screen and (min-width: 48em) { .sr_otg #Insights .analystHeadshot-mobile { max-width: 320px; } } @media only screen and (min-width: 62em) { .sr_otg #Insights .analystHeadshot-mobile { display: none; } } .sr_otg #Insights .analystHeadshot { display: none; } @media only screen and (min-width: 62em) { .sr_otg #Insights .analystHeadshot { width: 100%; display: block; max-width: 500px; margin: 0 auto; } } .sr_otg #Insights .Quote-insightsAnalyst { text-shadow: none; line-height: 1.5; font-size: 18px; letter-spacing: -.01em; font-weight: 400; color: #212C35; padding: 0 .5rem; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Quote-insightsAnalyst { font-size: 22px; padding: 0 .5rem; border: none; border-radius: 0; background-color: transparent; } } @media only screen and (min-width: 62em) { .sr_otg #Insights .Quote-insightsAnalyst { font-size: 24px; } } @media only screen and (min-width: 75em) { .sr_otg #Insights .Quote-insightsAnalyst { font-size: 26px; } } .sr_otg #Insights .Quote-insightsAnalyst .fa-quote-left { color: #f03e3e; opacity: 1; font-size: 16px; vertical-align: top; text-indent: 0; margin-right: 6px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Quote-insightsAnalyst .fa-quote-left { text-indent: -28px; font-size: 20px; margin-right: 0; } } @media only screen and (min-width: 65em) { .sr_otg #Insights .Quote-insightsAnalyst .fa-quote-left { text-indent: -30px; font-size: 22px; } } .sr_otg #Insights .Quote-insightsAnalyst .pageSubheading { padding-top: 12px; display: block; } .sr_otg #Insights .CourseBlock-container { padding-left: 1rem; padding-right: 1rem; } .sr_otg #Insights .CourseBlock-image { background-color: #eee; border-top-left-radius: 4px; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 0; } @media only screen and (min-width: 48em) { .sr_otg #Insights .CourseBlock-image { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; } } .sr_otg #Insights .CourseBlock-image img { width: 100px; height: 100px; margin: 40px 30px; background-color: white; border-radius: 50%; border: 2px solid white; -webkit-box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.5); box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.5); } @media only screen and (min-width: 48em) { .sr_otg #Insights .CourseBlock-image img { margin: 40px 50px; } } .sr_otg #Insights #Course1 .CourseBlock-image { background: -webkit-gradient(linear, left top, right bottom, from(rgba(14, 35, 54, 0.85)), to(rgba(14, 35, 54, 0.85))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/recruiting-101-bg.jpg); background: linear-gradient(to bottom right, rgba(14, 35, 54, 0.85) 0%, rgba(14, 35, 54, 0.85) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/recruiting-101-bg.jpg); background-size: 100%; background-position: center; } .sr_otg #Insights #Course2 .CourseBlock-image { background: -webkit-gradient(linear, left top, right bottom, from(rgba(14, 35, 54, 0.85)), to(rgba(14, 35, 54, 0.85))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/target-school-bg.jpg); background: linear-gradient(to bottom right, rgba(14, 35, 54, 0.85) 0%, rgba(14, 35, 54, 0.85) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/target-school-bg.jpg); background-size: 100%; background-position: center; } .sr_otg #Insights #Course3 .CourseBlock-image { background: -webkit-gradient(linear, left top, right bottom, from(rgba(14, 35, 54, 0.85)), to(rgba(14, 35, 54, 0.85))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/outreach-gray-pttrn.jpg); background: linear-gradient(to bottom right, rgba(14, 35, 54, 0.85) 0%, rgba(14, 35, 54, 0.85) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/outreach-gray-pttrn.jpg); background-size: 100%; background-position: center; } .sr_otg #Insights #Course4 .CourseBlock-image { background: -webkit-gradient(linear, left top, right bottom, from(rgba(14, 35, 54, 0.85)), to(rgba(14, 35, 54, 0.85))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/insights-elective-bg.jpg); background: linear-gradient(to bottom right, rgba(14, 35, 54, 0.85) 0%, rgba(14, 35, 54, 0.85) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/insights-elective-bg.jpg); background-size: 100%; background-position: center; } .sr_otg #Insights .CourseBlock-wrap { width: 100%; max-width: 450px; border: 1px solid #dcdcdc; border-radius: 4px; margin: 1.5rem auto 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-shadow: none; box-shadow: none; background-color: white; } .sr_otg #Insights .CourseBlock-wrap:first-of-type { margin-top: 50px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .CourseBlock-wrap { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border: 0; max-width: 850px; margin-top: 60px; -webkit-box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); } } .sr_otg #Insights .CourseBlock-desc { padding: 16px 18px; background-color: white; border-top-left-radius: 0; border-bottom-left-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 4px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .CourseBlock-desc { padding: 18px 20px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } } .sr_otg #Insights .CourseBlock-desc p { font-size: 15px; line-height: 1.6; } .sr_otg #Insights .CourseBlock-desc p:last-of-type { margin-bottom: 0; } .sr_otg #Insights .CourseBlock-desc h4 { font-size: 22px; font-weight: 400; margin-bottom: 8px; } .sr_otg #Insights .CourseBlock-desc h6 { font-size: 12px; font-weight: 900; text-transform: uppercase; color: #aeaeae; letter-spacing: .05em; margin-bottom: 6px; margin-top: 2px; } .sr_otg #Insights .CourseBlock-ul { margin: 10px; padding-left: 10px; text-decoration: none; font-family: 'Helvetica Neue', 'Helvetica', arial, sans-serif; font-size: 15px; color: #494949; } .sr_otg #Insights .CourseBlock-li { margin-bottom: 4px; list-style: disc; } .sr_otg #Insights .courseItems { padding-top: 80px; } .sr_otg #Insights .courseItems p { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 300; } .sr_otg #Insights .whatsIncludedCTA { background-color: white; border-radius: 4px; padding: 35px 15px 40px 15px; width: 100%; max-width: 850px; margin: 48px auto 0; -webkit-box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.7))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/plexus-bg-1.png); background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/plexus-bg-1.png); background-size: cover; background-repeat: repeat-x; background-position: bottom; } .sr_otg #Insights .whatsIncludedCTA h3 { line-height: 1.5; font-size: 22px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .whatsIncludedCTA h3 { font-size: 26px; } } .sr_otg #Insights #Insights-DataAnalytics { overflow: hidden; } .sr_otg #Insights #Insights-DataAnalytics h4 { font-size: 26px; font-weight: 400; letter-spacing: 0; } .sr_otg #Insights .Insights-DataAnalytics-data, .sr_otg #Insights .Insights-DataAnalytics-academicFit, .sr_otg #Insights .Insights-DataAnalytics-interestScores { margin-top: 50px; } .sr_otg #Insights .Insights-DataAnalytics-academicFit img, .sr_otg #Insights .Insights-DataAnalytics-interestScores img { width: 100%; } @media only screen and (min-width: 62em) { .sr_otg #Insights .Insights-DataAnalytics-academicFit { margin-left: 0px !important; } .sr_otg #Insights .Insights-DataAnalytics-academicFit .col-xs-12 { padding-left: 0px !important; } .sr_otg #Insights .Insights-DataAnalytics-academicFit img { margin-left: -41px; } } @media only screen and (min-width: 62em) { .sr_otg #Insights .Insights-DataAnalytics-interestScores { margin-right: 0px !important; } .sr_otg #Insights .Insights-DataAnalytics-interestScores .col-xs-12 { padding-right: 0px !important; } .sr_otg #Insights .Insights-DataAnalytics-interestScores img { margin-right: -41px; } } .sr_otg #Insights #Insights-HighlightReels { background-color: white; } .sr_otg #Insights .Insights-HighlightReels-details { padding: 10px 0 20px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Insights-HighlightReels-details { padding: 50px 0 50px; } } .sr_otg #Insights .Insights-HighlightReels-details .box { padding: 0 .5rem; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Insights-HighlightReels-details .box { padding: 0 1.2rem; } } .sr_otg #Insights .Insights-HighlightReels-details .col-xs-12 { padding: 10px 0 10px; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Insights-HighlightReels-details .col-xs-12 + .col-xs-12 { border-left: 1px solid #dcdcdc; } } .sr_otg #Insights .Insights-HighlightReels-details h4 { text-transform: uppercase; font-size: 15px; letter-spacing: .02em; font-weight: 900; color: #212C35; margin-top: 0; margin-bottom: 10px; } .sr_otg #Insights .Insights-HighlightReels-detailsIcon { background-color: #ff922b; border-radius: 50%; display: inline-block; width: auto; height: auto; margin: 0 auto 16px; } .sr_otg #Insights .Insights-HighlightReels-detailsIcon img { width: 32px; height: 32px; margin: 12px; display: block; } .sr_otg #Insights .Insights-HighlightReels-hero { margin: 0 -1rem; } .sr_otg #Insights .Insights-HighlightReels-hero img { display: none; } @media only screen and (min-width: 48em) { .sr_otg #Insights .Insights-HighlightReels-hero img { width: 100%; display: block; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } } .about-us .VideoContainer-aboutUs, .about-us .VideoContainer-overlay-aboutUs { min-height: 420px !important; position: relative; } @media (min-width: 1400px) { .about-us .VideoContainer-aboutUs, .about-us .VideoContainer-overlay-aboutUs { height: 610px; position: relative; } } .about-us .hello #playbutton { z-index: 3; margin: 0 auto; margin-top: 20px; height: 74px; display: block; } .about-us .hello #playbutton .rectangle { background-color: #CF4C27; width: 74px; height: 74px; border-radius: 500px; opacity: 0.7; margin: 0 auto; } .about-us .hello #playbutton .rectangle:hover { background-color: #CF4C27; cursor: pointer; } .about-us .hello #playbutton .triangle { width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent white; margin: 0 auto; position: relative; bottom: 49px; pointer-events: none; left: 4px; } .about-us .AboutUsHero { background: url("https://s3.amazonaws.com/sportsrecruits/assets/about-us/about-us-hero.jpg"); background-size: cover; background-position: center; } .about-us .hello h1 { font-size: 50px; line-height: 1.2em; text-transform: uppercase; font-family: oswald; font-weight: 300; color: white; margin-bottom: 0; text-shadow: 0px 0px 60px rgba(0, 0, 0, 0.25); padding: 0 15px; } @media only screen and (min-width: 300px) { .about-us .hello h1 { font-size: 45px; } } @media only screen and (min-width: 400px) { .about-us .hello h1 { font-size: 50px; } } @media only screen and (min-width: 500px) { .about-us .hello h1 { font-size: 60px; } } @media only screen and (min-width: 700px) { .about-us .hello h1 { font-size: 75px; } } @media only screen and (min-width: 1200px) { .about-us .hello h1 { font-size: 80px; } } @media only screen and (max-width: 769px) { .about-us .hidden-video-xs { display: none; } } .about-us .about-us-col { padding-left: 0; padding-right: 0; } .about-us .otg-team-member .profile-image { margin-top: 40px; } .about-us .otg-team-member .profile-image a:after { content: ''; -webkit-transition: 0.3s opacity ease-in-out; transition: 0.3s opacity ease-in-out; background: transparent; } .about-us .otg-team-member .profile-image a img { display: block; } .about-us .otg-team-member .profile-image a:hover { opacity: .9; } .about-us .otg-team-member-title { font-family: 'Roboto', 'Helvetica Neue', helvetica, sans-serif; font-size: 13px; color: #888888; font-weight: 400; } .about-us .otg-team-member-sport { font-family: 'Roboto', 'Helvetica Neue', helvetica, sans-serif; font-size: 12px; color: #888888; } .about-us #googleMap { height: 500px; } .standard-form { /* Hide arrow on IE10*/ /* IE9: To hide select arrow we make the select overflow on the right side there is not another way :( */ /* Hover and focus states */ /* Checked state */ /* Hover state whilst checked */ /* Disabled state */ /* Check mark */ /* Show check mark */ /* Checkbox tick */ /* Disabled tick colour */ } .standard-form #wrap { min-width: 0; } .standard-form #StandardForm { background-color: #f1f3f5; position: absolute; height: 100%; padding-top: 30px; padding-bottom: 60px; } @media (min-width: 700px) { .standard-form #StandardForm { padding-top: 50px; padding-bottom: 80px; } } .standard-form #StandardForm .SRLogo { margin-bottom: 30px; } .standard-form #StandardForm .SectionWrapper { background-color: transparent; padding-top: 40px; } .standard-form #StandardForm .pageHeading { font-size: 25px; margin-top: 0; margin-bottom: 18px; font-weight: 700; color: #33475b; letter-spacing: .01em; } @media (min-width: 700px) { .standard-form #StandardForm .pageHeading { font-size: 30px; } } .standard-form #StandardForm .subHeading { font-size: 16px; color: #888888; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .standard-form .StandardForm-card { -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 40px 20px; max-width: 700px; margin: 0 auto; border-radius: 4px; text-align: center; background-color: white; -webkit-box-shadow: 0 10px 18px rgba(134, 142, 150, 0.2), 0 20px 20px -15px rgba(134, 142, 150, 0.2); box-shadow: 0 10px 18px rgba(134, 142, 150, 0.2), 0 20px 20px -15px rgba(134, 142, 150, 0.2); } @media (min-width: 600px) { .standard-form .StandardForm-card { padding: 50px 60px; } } .standard-form .StandardForm-formWrap { max-width: 450px; margin: 30px auto 30px; } .standard-form .StandardForm-formWrap label { display: block; text-align: left; padding: 5px 0; font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; color: #343a40; } .standard-form .StandardForm-formWrap .labelDescription { font-size: 13px; margin-top: 4px; color: #868e96; } .standard-form .StandardForm-formWrap input[type="text"], .standard-form .StandardForm-formWrap input[type="tel"], .standard-form .StandardForm-formWrap input[type="email"], .standard-form .StandardForm-formWrap input[type="email"], .standard-form .StandardForm-formWrap input[type="submit"], .standard-form .StandardForm-formWrap textarea { font-size: 16px !important; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: normal; color: #343a40; margin: 5px 0; border: 2px solid #ced4da; border-radius: 2px; width: 100%; padding: 10px !important; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; } .standard-form .StandardForm-formWrap input[type="email"]:focus, .standard-form .StandardForm-formWrap input[type="email"]:active, .standard-form .StandardForm-formWrap input[type="tel"]:focus, .standard-form .StandardForm-formWrap input[type="tel"]:active, .standard-form .StandardForm-formWrap input[type="text"]:active, .standard-form .StandardForm-formWrap textarea:active, .standard-form .StandardForm-formWrap input[type="text"]:focus, .standard-form .StandardForm-formWrap textarea:focus { -webkit-box-shadow: 0; box-shadow: 0; border: 2px solid #51cbee; } .standard-form .StandardForm-formWrap textarea { height: 180px; overflow: auto; resize: vertical; } .standard-form .StandardForm-formWrap input + label, .standard-form .StandardForm-select + label { padding-top: 30px; } .standard-form .StandardForm-select { width: 100%; max-width: 100%; margin: 6px 0; overflow: hidden; border-radius: 2px; /* */ background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E") right 10px center no-repeat; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; } .standard-form .StandardForm-select:hover { /* */ background: white url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E") right 10px center no-repeat; border-color: #51cbee; } .standard-form .StandardForm-select select { width: 100%; border: 2px solid #ced4da; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; background: transparent; background-image: none; -webkit-appearance: none; outline: none; cursor: pointer; /* Hide arrow on FF */ -moz-appearance: none; text-indent: 0.01px; text-overflow: ellipsis; padding: 10px 30px 10px 10px; /* You can style text of the active select option */ font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-size: 16px; font-weight: normal; color: #343a40; height: initial; } .standard-form .StandardForm-select select::-ms-expand { display: none; } .standard-form .StandardForm-select optgroup { color: inherit; font: inherit; } @media screen and (min-width: 0\0) { .standard-form .StandardForm-select select { width: calc( 100% + 58px); } } .standard-form #StandardForm .control-group { display: inline-block; text-align: left; vertical-align: top; margin: 6px 0; } .standard-form #StandardForm .control { font-size: 15px !important; position: relative; display: block; margin-bottom: 18px; margin-top: 4px; padding-left: 24px !important; padding-top: 0px !important; padding-bottom: 0 !important; cursor: pointer; } .standard-form #StandardForm label.control.control--checkbox { font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: normal; } .standard-form #StandardForm .control input { position: absolute; z-index: -1; opacity: 0; } .standard-form #StandardForm .control__indicator { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 2px; background: #dee2e6; } .standard-form #StandardForm .control:hover input ~ .control__indicator, .standard-form #StandardForm .control input:focus ~ .control__indicator { background: #ced4da; } .standard-form #StandardForm .control input:checked ~ .control__indicator { background: #67D5B5; } .standard-form #StandardForm .control:hover input:not([disabled]):checked ~ .control__indicator, .standard-form #StandardForm .control input:checked:focus ~ .control__indicator { background: #67D5B5; } .standard-form #StandardForm .control input:disabled ~ .control__indicator { pointer-events: none; opacity: .6; background: #e6e6e6; } .standard-form #StandardForm .control__indicator:after { position: absolute; display: none; content: ''; } .standard-form #StandardForm .control input:checked ~ .control__indicator:after { display: block; } .standard-form #StandardForm .control--checkbox .control__indicator:after { top: 2px; left: 6px; width: 3px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: solid #fff; border-width: 0 2px 2px 0; } .standard-form #StandardForm .control--checkbox input:disabled ~ .control__indicator:after { border-color: #7b7b7b; } .standard-form span.required-asterisk { color: #ff8787; } .standard-form .js_hidden_success { display: none; } .standard-form #StandardForm input.form-required, .standard-form #StandardForm .SelectDropdown.form-required, .standard-form textarea.form-required { border-color: #ff8787 !important; } .standard-form #StandardForm input.form-required::-webkit-input-placeholder, .standard-form #StandardForm .SelectDropdown.form-required::-webkit-input-placeholder, .standard-form textarea.form-required::-webkit-input-placeholder { color: #ff8787; font-style: italic; } .standard-form div.alert.alert-error { max-width: 450px; margin-bottom: 30px; margin-top: 30px; } .standard-form input.form-success { border-color: #ced4da !important; } .standard-form input.form-error.form-success { border-color: #ff8787 !important; } .standard-form .OTGBtn.OTGBtn--large.OTGBtn--successGreen, .standard-form body.sr_otg.redirect_modal .sweet-alert button.OTGBtn--large.OTGBtn--successGreen.sweet-confirm, body.sr_otg.redirect_modal .sweet-alert .standard-form button.OTGBtn--large.OTGBtn--successGreen.sweet-confirm { text-shadow: none !important; } .recruiting_guide { background-color: white; } .recruiting_guide .u-relative { position: relative; } .recruiting_guide .u-spacer-5px { width: 100% !important; height: 5px !important; } .recruiting_guide .u-spacer-10px { width: 100% !important; height: 10px !important; } .recruiting_guide .u-spacer-20px { width: 100% !important; height: 20px !important; } .recruiting_guide .u-spacer-40px { width: 100% !important; height: 40px !important; } .recruiting_guide .u-spacer-60px { width: 100% !important; height: 60px !important; } .recruiting_guide .u-spacer-80px { width: 100% !important; height: 80px !important; } @media only screen and (max-width: 48em) { .recruiting_guide .u-hidden-xs { display: none; } } @media only screen and (max-width: 48em) { .recruiting_guide .u-display-xs { display: inherit; } } @media only screen and (min-width: 48em) { .recruiting_guide .u-display-xs { display: none; } } @media only screen and (max-width: 65em) { .recruiting_guide .u-hidden-sm { display: none; } } .recruiting_guide .darkGray-bg { background-color: #ECEDEF !important; } .recruiting_guide header, .recruiting_guide .Footer { display: none !important; } .recruiting_guide h1, .recruiting_guide h2, .recruiting_guide h3, .recruiting_guide h4, .recruiting_guide h5, .recruiting_guide h6 { color: #222C35; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.1em; font-weight: 400; margin-bottom: .8em; text-transform: uppercase; } .recruiting_guide h2 { font-size: 32px; } .recruiting_guide p { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; line-height: 2; color: #222C35; font-weight: 400; font-size: 18px; margin-bottom: 1.5em; } .recruiting_guide p:last-of-type { margin-bottom: 0; } .recruiting_guide ol, .recruiting_guide ul { font-size: 18px; margin: 1.5em 10px; padding: 0 0 0 40px; } @media only screen and (min-width: 48em) { .recruiting_guide ol, .recruiting_guide ul { margin: 1.5em 15px; } } .recruiting_guide ol li, .recruiting_guide ul li { font-size: 18px; color: #222C35; font-weight: 700; line-height: 2; padding-left: 2px; font-size: inherit; } .recruiting_guide ol li { list-style-type: decimal; } .recruiting_guide ul li { list-style-type: disc; } .recruiting_guide li span { font-weight: 400; } .recruiting_guide a { font-weight: 500; } .recruiting_guide .guideHR { height: 6px; width: 80px; background-color: #D04C28; margin: 30px 0 26px; } @media only screen and (min-width: 48em) { .recruiting_guide .guideHR { width: 100px; } } .recruiting_guide #Chapter1 .guideHR { background-color: #EF3E36; } .recruiting_guide #Chapter2 .guideHR { background-color: #03b17f; } .recruiting_guide #Chapter3 .guideHR { background-color: #01a2ed; } .recruiting_guide #Chapter4 .guideHR { background-color: #6369d1; } .recruiting_guide .leftPane-container { position: initial; width: 100%; height: auto; padding: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0px 0px; background-color: #222C35; overflow: auto; text-align: center; } @media only screen and (min-width: 65em) { .recruiting_guide .leftPane-container { position: fixed; left: 0; top: 0; width: 50%; height: 100%; padding: 120px 65px; } } .recruiting_guide #Chapter1 .leftPane-container, .recruiting_guide #Chapter2 .leftPane-container, .recruiting_guide #Chapter3 .leftPane-container, .recruiting_guide #Chapter4 .leftPane-container, .recruiting_guide #GuideHome .leftPane-container { display: none; } @media all and (min-width: 65em) { .recruiting_guide #Chapter1 .leftPane-container, .recruiting_guide #Chapter2 .leftPane-container, .recruiting_guide #Chapter3 .leftPane-container, .recruiting_guide #Chapter4 .leftPane-container, .recruiting_guide #GuideHome .leftPane-container { display: -webkit-box; display: -ms-flexbox; display: flex; } } .recruiting_guide .leftPane-imagehelmet { background: -webkit-gradient(linear, left top, left bottom, from(rgba(33, 44, 53, 0.95)), to(rgba(33, 44, 53, 0.95))), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/home.jpg); background: linear-gradient(to bottom, rgba(33, 44, 53, 0.95), rgba(33, 44, 53, 0.95)), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/home.jpg); background-size: cover; background-position: center; } .recruiting_guide .leftPane-imagehockey { background: -webkit-gradient(linear, left top, left bottom, from(rgba(33, 44, 53, 0.95)), to(rgba(33, 44, 53, 0.95))), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/building_online.jpg); background: linear-gradient(to bottom, rgba(33, 44, 53, 0.95), rgba(33, 44, 53, 0.95)), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/building_online.jpg); background-size: cover; } .recruiting_guide .leftPane-imageContactCoaches { background: -webkit-gradient(linear, left top, left bottom, from(rgba(33, 44, 53, 0.95)), to(rgba(33, 44, 53, 0.95))), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/share-video.jpg); background: linear-gradient(to bottom, rgba(33, 44, 53, 0.95), rgba(33, 44, 53, 0.95)), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/share-video.jpg); background-size: cover; } .recruiting_guide .leftPane-howitWorks { background: -webkit-gradient(linear, left top, left bottom, from(rgba(33, 44, 53, 0.95)), to(rgba(33, 44, 53, 0.95))), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/create_connected.jpg); background: linear-gradient(to bottom, rgba(33, 44, 53, 0.95), rgba(33, 44, 53, 0.95)), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/create_connected.jpg); background-size: cover; } .recruiting_guide .leftPane-imagebball { background: -webkit-gradient(linear, left top, left bottom, from(rgba(33, 44, 53, 0.95)), to(rgba(33, 44, 53, 0.95))), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/collegePrep.jpg); background: linear-gradient(to bottom, rgba(33, 44, 53, 0.95), rgba(33, 44, 53, 0.95)), url(https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/collegePrep.jpg); background-size: cover; } .recruiting_guide .leftPane-title { font-size: 40px; color: white; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.1em; text-transform: uppercase; text-shadow: 0px 2px 30px rgba(0, 0, 0, 0.3); margin-bottom: 0; letter-spacing: .02em; } @media only screen and (min-width: 48em) { .recruiting_guide .leftPane-title { font-size: 56px; } } .recruiting_guide #Chapter1 .leftPane-title { color: #EF3E36; } .recruiting_guide #Chapter2 .leftPane-title { color: #03b17f; } .recruiting_guide #Chapter3 .leftPane-title { color: #01a2ed; } .recruiting_guide #Chapter4 .leftPane-title { color: #6369d1; } .recruiting_guide .leftPane-container p { font-size: 18px; color: white; } .recruiting_guide .leftPane-inner { width: 100%; max-width: 800px; height: auto; margin: auto; } .recruiting_guide .leftPane-inner .guideHR { margin-left: auto; margin-right: auto; } .recruiting_guide .CoreMobileText { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (min-width: 48em) { .recruiting_guide .CoreMobileText { display: none; } } .recruiting_guide .CoreMobileText p { font-size: 24px; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 300; line-height: 1.3em; text-align: center; color: #222C35; display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (min-width: 48em) { .recruiting_guide .CoreMobileText p { display: none; } } .recruiting_guide .rightPane-container { background-color: #FFFFFF; margin-top: -10px; overflow: auto; padding: 60px 0 0; } @media only screen and (min-width: 65em) { .recruiting_guide .rightPane-container { right: 0; top: 0; width: 50%; height: 100%; margin-left: 50%; margin-top: 0px; padding: 0px 0px; } } @media only screen and (min-width: 65em) { .recruiting_guide #GuideHome .rightPane-container { position: fixed; width: 50%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } } .recruiting_guide .rightPane-inner { width: 100%; max-width: 800px; height: auto; margin: auto; } .recruiting_guide .rightPane-text { padding: 0 15px; margin: 0 auto; max-width: 800px; } @media only screen and (min-width: 48em) { .recruiting_guide .rightPane-text { padding: 0 60px; } } .recruiting_guide .rightPane-text h2 { font-size: 36px; margin-bottom: 0; } @media only screen and (min-width: 48em) { .recruiting_guide .rightPane-text h2 { font-size: 56px; } } .recruiting_guide .rightPane-text h3 { font-size: 22px; } @media only screen and (min-width: 48em) { .recruiting_guide .rightPane-text h3 { font-size: 32px; } } .recruiting_guide .rightPane-text h4 { font-size: 20px; } @media only screen and (min-width: 48em) { .recruiting_guide .rightPane-text h4 { font-size: 24px; } } .recruiting_guide .rightPane-text h5 { font-size: 18px; } @media only screen and (min-width: 48em) { .recruiting_guide .rightPane-text h5 { font-size: 18px; } } .recruiting_guide .quote { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/quotemark.svg"); background-repeat: no-repeat; background-size: 30%; padding: 12px 12px 25px 12px; } @media only screen and (min-width: 48em) { .recruiting_guide .quote { padding: 40px; } } .recruiting_guide .quote blockquote { margin: 0px; } .recruiting_guide .quote blockquote p { font-size: 20px; font-weight: 300; font-style: italic; } @media only screen and (min-width: 48em) { .recruiting_guide .quote blockquote p { font-size: 24px; } } .recruiting_guide .quote blockquote h3 { font-size: 18px; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; line-height: 1.5em; font-weight: 600; font-style: italic; margin: 12px 0 0 0; } @media only screen and (min-width: 48em) { .recruiting_guide .quote blockquote h3 { font-size: 20px; } } .recruiting_guide .quote blockquote span { font-size: 16px; color: #aeaeae; line-height: 1em; } @media only screen and (min-width: 48em) { .recruiting_guide .quote blockquote span { font-size: 18px; } } .recruiting_guide .CTA { -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -ms-flex-line-pack: center; align-content: center; margin: auto; display: inline-block; } .recruiting_guide .CTA p { -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-weight: 700; font-size: 18px; padding: 10px; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; } @media only screen and (min-width: 65em) { .recruiting_guide .coreMenu-itemRow { padding-left: 1.3rem; padding-right: 1.3rem; } } .recruiting_guide .coreMenu-item { text-align: center; margin: 25px 0; } .recruiting_guide .coreMenu-item a { display: block; } .recruiting_guide .coreMenu-item a img { -webkit-transition: all ease .2s; transition: all ease .2s; } .recruiting_guide .coreMenu-item a:hover img { -webkit-box-shadow: 0 5px 20px rgba(134, 142, 150, 0.5); box-shadow: 0 5px 20px rgba(134, 142, 150, 0.5); } .recruiting_guide .coreMenu-item-blue a:hover h2 { color: #01a2ed; } .recruiting_guide .coreMenu-item-green a:hover h2 { color: #03b17f; } .recruiting_guide .coreMenu-item-red a:hover h2 { color: #EF3E36; } .recruiting_guide .coreMenu-item-purple a:hover h2 { color: #6369d1; } .recruiting_guide .coreMenu-item img { width: 100%; margin: 0 0 20px 0; display: inline-block; max-width: 200px; border-radius: 50%; } .recruiting_guide .coreMenu-item h2 { font-size: 24px; color: #222C35; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; text-align: center; } @media only screen and (min-width: 48em) { .recruiting_guide .coreMenu-item h2 { font-size: 26px; } } @media only screen and (min-width: 95em) { .recruiting_guide .coreMenu-item h2 { font-size: 28px; } } .recruiting_guide .mobileChapterNav { position: fixed; z-index: 2; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; top: 0; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; color: white; text-align: center; } @media all and (min-width: 65em) { .recruiting_guide .mobileChapterNav { display: none; } } .recruiting_guide .mobileChapterNav-chapterTitle { padding: 15px 0; margin: 0; font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1em; } @media only screen and (min-width: 48em) { .recruiting_guide .mobileChapterNav-chapterTitle { padding: 26px 0; margin: 0; font-size: 22px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1em; } } @media only screen and (min-width: 65em) { .recruiting_guide .mobileChapterNav-chapterTitle { padding: 15px 0; margin: 0; font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1em; } } .recruiting_guide .mobileChapterNav a { color: white; text-decoration: none; } .recruiting_guide .mobileChapterNav-bumper { width: 100%; height: 50px; } @media only screen and (min-width: 48em) { .recruiting_guide .mobileChapterNav-bumper { height: 76px; } } .recruiting_guide .homeIcon { width: 20px; height: 20px; } @media only screen and (min-width: 48em) { .recruiting_guide .homeIcon { width: 30px; height: 30px; } } @media only screen and (min-width: 65em) { .recruiting_guide .homeIcon { width: 36px; height: 36px; position: fixed; top: 15px; left: 15px; margin-top: 10px; } } @media only screen and (min-width: 65em) { .recruiting_guide .backIcon { position: fixed; width: 32px; height: 32px; top: 20px; left: 15px; } } .recruiting_guide #GuideHome .spinIcon { color: transparent; cursor: default !important; } .recruiting_guide .mobileChapterNav-trigger { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; background-color: #222C35; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .recruiting_guide .mobileChapterNav-trigger div { width: 100%; color: white; cursor: pointer; text-transform: uppercase; } .recruiting_guide .mobileChapterNav-icons { width: initial !important; padding: 15px; font-size: 22px; font-family: sans-serif; line-height: 0; } @media only screen and (min-width: 48em) { .recruiting_guide .mobileChapterNav-icons { padding: 20px; font-size: 30px; font-family: sans-serif; line-height: 0; } } @media only screen and (min-width: 65em) { .recruiting_guide .mobileChapterNav-icons { padding: 0; } } .recruiting_guide .mobileChapterNav-dropdown { position: relative; display: block; } .recruiting_guide .mobileChapterNav-dropdown ul { display: none; list-style-type: none; position: absolute; left: 0; right: 0; margin: 0 auto; padding: 0; text-align: center; background-color: #2c3e50; } .recruiting_guide .mobileChapterNav-dropdown li { border-bottom: solid 1px rgba(0, 0, 0, 0.3); } .recruiting_guide .mobileChapterNav-dropdown li:last-child { border-bottom: none; } .recruiting_guide .mobileChapterNav-dropdown a { display: block; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1em; padding: 15px; color: rgba(255, 255, 255, 0.5); } @media only screen and (min-width: 48em) { .recruiting_guide .mobileChapterNav-dropdown a { display: block; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1em; padding: 22px; color: rgba(255, 255, 255, 0.5); } } @media only screen and (min-width: 65em) { .recruiting_guide .mobileChapterNav-dropdown a { display: block; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1em; padding: 15px; color: rgba(255, 255, 255, 0.5); } } .recruiting_guide .mobileChapterNav-dropdown a:hover { background-color: rgba(0, 0, 0, 0.1); color: white; } .recruiting_guide .desktopChapterNav { margin-top: 30px; } .recruiting_guide .desktopChapterNav li { display: block; text-align: center; margin: 0px auto; padding-left: 0; } .recruiting_guide .desktopChapterNav li a { font-size: 18px; color: white; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.2em; font-weight: 400; text-decoration: none; text-transform: uppercase; padding: 14px; display: block; border: 2.5px solid white; max-width: 310px; margin: 0 auto; } .recruiting_guide .nav-verticalLine { margin: 0 auto; height: 24px; width: 3px; border: none; background-color: white; } .recruiting_guide .chapterNav-active { color: white !important; } @media all and (min-width: 65em) { .recruiting_guide #Chapter1 .chapterNav-active { border-color: #EF3E36 !important; } .recruiting_guide #Chapter2 .chapterNav-active { border-color: #03b17f !important; } .recruiting_guide #Chapter3 .chapterNav-active { border-color: #01a2ed !important; } .recruiting_guide #Chapter4 .chapterNav-active { border-color: #6369d1 !important; } } .recruiting_guide .bottomGradientFade { position: fixed; bottom: 0px; left: 0px; width: 50%; height: 80px; background: rgba(33, 44, 53, 0); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(33, 44, 53, 0)), color-stop(100%, #212c35)); background: -webkit-gradient(linear, left top, left bottom, from(rgba(33, 44, 53, 0)), to(#212c35)); background: linear-gradient(to bottom, rgba(33, 44, 53, 0) 0%, #212c35 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212c35', endColorstr='#212c35', GradientType=0 ); } .recruiting_guide .pagination-button { padding: 1rem 1.7rem; border-radius: 3px; text-align: center; font-size: 22px; font-weight: 400; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; background-color: #03b17f; color: white; border: 0px solid #03b17f; margin: auto; display: block; width: 100%; } .recruiting_guide .pagination-button:hover { opacity: .9; -webkit-box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); text-decoration: none; } @media only screen and (min-width: 48em) { .recruiting_guide .pagination-button { letter-spacing: 0.02em; background-color: #03b17f; color: white; border: 0px solid #03b17f; margin: auto; display: block; max-width: 400px; } } .recruiting_guide #Chapter2 .pagination-button { background-color: #01a2ed !important; } .recruiting_guide #Chapter3 .pagination-button { background-color: #6369d1 !important; } .recruiting_guide #Chapter4 .pagination-button { background-color: #D04C28 !important; } .recruiting_guide .pagination { border-top: solid #aeaeae 2px; font-weight: 500; font-size: 14px; text-transform: uppercase; padding: 30px; } .recruiting_guide #Introduction .leftPane-inner { padding-top: 50px; padding-bottom: 50px; } .recruiting_guide #Introduction .leftPane-inner blockquote p { font-size: 20px; line-height: 1.6; font-style: italic; margin-bottom: 10px; } @media only screen and (min-width: 48em) { .recruiting_guide #Introduction .leftPane-inner blockquote p { font-size: 28px; } } .recruiting_guide #Introduction img { display: block; margin: 0 auto 30px auto; width: 160px; height: auto; } @media only screen and (min-width: 48em) { .recruiting_guide #Introduction img { width: 200px; } } .recruiting_guide #Introduction .map { width: 100%; } .recruiting_guide #Introduction .map2 { margin-top: 60px; } .recruiting_guide #Introduction .leftPane-inner blockquote h3 { font-size: 18px; color: #D04E28; line-height: 1.6em; font-weight: 500; text-align: center; display: block; margin-left: -40px; margin-right: -40px; margin-bottom: 0px; } @media only screen and (min-width: 48em) { .recruiting_guide #Introduction .leftPane-inner blockquote h3 { font-size: 20px; } } .recruiting_guide #Introduction .guideIntro-button { padding: 1rem 1.7rem; border-radius: 3px; text-align: center; font-size: 22px; font-weight: 400; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; background-color: #D04C28; color: white; border: 0px solid #D04C28; margin: auto; display: block; width: 100%; } .recruiting_guide #Introduction .guideIntro-button:hover { opacity: .9; -webkit-box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); text-decoration: none; } @media only screen and (min-width: 48em) { .recruiting_guide #Introduction .guideIntro-button { letter-spacing: 0.02em; background-color: #D04C28; color: white; border: 0px solid #D04C28; margin: auto; display: block; width: 280px; } } .recruiting_guide .paperplane { width: 50%; padding: 15px; } .recruiting_guide .map h4 { text-align: center; } .recruiting_guide #GuideHome .leftPane-container p { margin: 0; margin-bottom: 0; } .recruiting_guide .doIT h4 { font-size: 28px; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.2em; text-align: left; } @media only screen and (min-width: 48em) { .recruiting_guide .doIT h4 { font-size: 30px; line-height: 1.1em; } } .recruiting_guide .doIT h4 span { font-size: 88%; } .recruiting_guide #Chapter1 h4 span { color: #EF3E36; } .recruiting_guide #Chapter2 h4 span { color: #03b17f; } .recruiting_guide #Chapter3 h4 span { color: #01a2ed; } .recruiting_guide #Chapter4 h4 span { color: #6369d1; } .recruiting_guide .doitList { margin: auto; padding-left: 20px; text-align: center; display: table; } @media only screen and (min-width: 48em) { .recruiting_guide .doitList { text-align: left; margin: 0; } } .recruiting_guide .doitList li { font-size: 18px; color: #222C35; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; line-height: 1.6em; font-weight: 700; text-align: left; list-style-type: decimal; list-style-position: initial; } @media only screen and (min-width: 48em) { .recruiting_guide .doitList li { text-align: left; } } .recruiting_guide .doitList li span { font-weight: 400; text-align: center; } @media only screen and (min-width: 48em) { .recruiting_guide .doitList li span { text-align: left; } } .recruiting_guide .doIt-accordian { border-radius: 4px; } .recruiting_guide .doIt-accordianBtn { background-color: white; font-family: 'Oswald'; font-size: 16px; text-transform: uppercase; color: #222C35; cursor: pointer; padding: 15px; width: 100%; border: none; text-align: left; outline: none; -webkit-transition: ease all 0.45s; transition: ease all 0.45s; border-top-right-radius: 4px; border-top-left-radius: 4px; } .recruiting_guide .doIt-accordianBtn.active, .recruiting_guide .doIt-accordianBtn:hover { background-color: #dcdcdc; } .recruiting_guide .doIt-accordianBtn:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .recruiting_guide .doIt-accordianBtn.active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } .recruiting_guide .doIt-accordianContent { background-color: white; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.2s ease-out; transition: max-height 0.2s ease-out; } .recruiting_guide .doIt-accordianContentInner { padding: 15px; border-top: 1px solid #dcdcdc; } .recruiting_guide .doIt-accordianContentInner p { margin-top: 0; font-size: 16px; line-height: 1.7em; } .recruiting_guide .doIt-accordianContentInner p:last-of-type { margin-bottom: 0; } .recruiting_guide .doIt-accordianContentInner strong { color: #03b17f; } .recruiting_guide .yourRolebox { margin-top: 50px; padding: 25px; width: 100%; } @media only screen and (min-width: 48em) { .recruiting_guide .yourRolebox { padding: 40px; } } .recruiting_guide .yourRolebox p, .recruiting_guide .yourRolebox li { font-size: 16px; } .recruiting_guide .yourRolebox p:last-of-type, .recruiting_guide .yourRolebox li:last-of-type { margin-bottom: 0; } .recruiting_guide .yourRole li { font-weight: 700; list-style-type: decimal; list-style-position: initial; } .recruiting_guide .yourRole li span { font-weight: 400; } .recruiting_guide .yourRolebox h4 { font-size: 18px; } @media only screen and (min-width: 48em) { .recruiting_guide .yourRolebox h4 { font-size: 22px; } } .recruiting_guide #Chapter3 .yourRolebox h4 { color: #01a2ed; } .recruiting_guide #Chapter4 .yourRolebox h4 { color: #6369d1; } .recruiting_guide .infographic { width: 100%; max-width: 460px; margin: 0 auto; display: block; } .recruiting_guide .targetList .infographic { max-width: 300px; } .recruiting_guide .importanceMeter-wrapper { width: 100%; height: 16px; border-radius: 500px; margin: 8px 0 20px 0; } .recruiting_guide .importanceMeter-item { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-right: 2px solid #ECEDEF; background-color: #222C35; width: 20%; height: 16px; display: inline-block; } .recruiting_guide .importanceMeter-item:first-of-type { border-top-left-radius: 500px; border-bottom-left-radius: 500px; } .recruiting_guide .importanceMeter-item:last-of-type { border-top-right-radius: 500px; border-bottom-right-radius: 500px; border-right: none; } .recruiting_guide #Chapter1 .importanceMeter-item-active { background-color: #EF3E36; } .recruiting_guide #Chapter2 .importanceMeter-item-active { background-color: #03b17f; } .recruiting_guide #Chapter3 .importanceMeter-item-active { background-color: #01a2ed; } .recruiting_guide #Chapter4 .importanceMeter-item-active { background-color: #6369d1; } .recruiting_guide .targetList { padding: 20px; } @media only screen and (min-width: 48em) { .recruiting_guide .targetList { padding: 0px; } } @media only screen and (min-width: 65em) { .recruiting_guide .targetList { padding: 0px; } } .recruiting_guide .leftILLUSTRAIONS .responsive-image { margin: 0 auto; width: 100%; max-width: 400px; display: block; margin-bottom: 20px; } @media only screen and (min-width: 48em) { .recruiting_guide .leftILLUSTRAIONS .responsive-image { margin-bottom: 0; } } .recruiting_guide .stepbySTEP { padding: 20px 0px 20px 0px; } .recruiting_guide .scholarship { width: 100%; } .recruiting_guide .scholarshipTitle1 { margin-left: 0px; } .recruiting_guide .scholarshipSport { background-repeat: no-repeat; background-size: cover; width: 100%; min-height: 130px; padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; background-position: top right; text-transform: uppercase; } @media only screen and (min-width: 48em) { .recruiting_guide .scholarshipSport { min-height: 230px; padding: 20px; } } @media only screen and (min-width: 65em) { .recruiting_guide .scholarshipSport { min-height: 260px; padding: 20px; } } .recruiting_guide .scholarshipP1 { font-size: 24px; color: white; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; line-height: 1.2em; font-weight: 800; text-align: left; font-style: italic; margin: auto; } @media only screen and (min-width: 48em) { .recruiting_guide .scholarshipP1 { font-size: 24px; } } @media only screen and (min-width: 65em) { .recruiting_guide .scholarshipP1 { font-size: 42px; } } .recruiting_guide .scholarshipP2 { font-size: 12px; color: white; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; line-height: 1.4em; font-weight: 800; text-align: left; font-style: italic; } @media only screen and (min-width: 48em) { .recruiting_guide .scholarshipP2 { font-size: 12px; } } @media only screen and (min-width: 65em) { .recruiting_guide .scholarshipP2 { font-size: 18px; } } .recruiting_guide .scholarship1 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/football.jpg"); } .recruiting_guide .scholarship2 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/basketball.jpg"); } .recruiting_guide .scholarship3 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/gymnastics.jpg"); } .recruiting_guide .scholarship4 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/tennis.jpg"); } .recruiting_guide .scholarship5 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/volleyball.jpg"); } .recruiting_guide .scholarship6 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/d1ncaa.jpg"); } .recruiting_guide .scholarship7 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/ncaa.jpg"); } .recruiting_guide .scholarship8 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/naia.jpg"); } .recruiting_guide .scholarship9 { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/recruiting-guide/njcaa.jpg"); } .recruiting_guide .SignUp { padding: 30px 20px 40px 20px; border-radius: 4px; background-color: white; -webkit-box-shadow: 0 5px 20px rgba(134, 142, 150, 0.5); box-shadow: 0 5px 20px rgba(134, 142, 150, 0.5); width: 100%; margin-top: 50px; } .recruiting_guide .SignUp-heading { font-size: 24px; text-align: center; font-weight: 300; margin-bottom: 16px !important; line-height: 1.5; } .recruiting_guide .SignUp-insightsBG { background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.7))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/plexus-bg-1.png); background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/plexus-bg-1.png); background-size: cover; background-repeat: repeat-x; background-position: bottom; } .recruiting_guide .notableFact { width: 100%; border: 1px solid #dcdcdc; margin: 40px auto; } .recruiting_guide .notableFact h5 { color: white; margin: 0; padding: 14px 16px; } .recruiting_guide .notableFact p { font-size: 16px; margin: 0; padding: 10px 16px; color: #777; } .recruiting_guide #Chapter3 .notableFact { border-color: #01a2ed; } .recruiting_guide #Chapter3 .notableFact h5 { background-color: #01a2ed; } .recruiting_guide .haveApurposeList { display: grid; margin: 5px; padding-bottom: 15px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media only screen and (min-width: 48em) { .recruiting_guide .haveApurposeList { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 20px; } } .recruiting_guide .SignUp-insights { background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))), url(http://sportsrecruits.com/images/sr_otg/playbook_transparent_repeatable_bg.png); background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%), url(http://sportsrecruits.com/images/sr_otg/playbook_transparent_repeatable_bg.png); background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.7))), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/plexus-bg-1.png); background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/insights/plexus-bg-1.png); background-size: cover; background-repeat: repeat-x; background-position: bottom; padding: 30px 15px 40px 15px; border-radius: 4px; background-color: white; -webkit-box-shadow: 0 5px 20px rgba(134, 142, 150, 0.5); box-shadow: 0 5px 20px rgba(134, 142, 150, 0.5); display: inline-block; margin: auto; width: 100%; height: 100%; } .recruiting_guide .SignUp-button { display: inline-block; } .sr_otg.recruiting_guide_landing .recruitingGuideLanding-hero { padding: 6rem 0 4rem; text-align: center; } @media (min-width: 990px) { .sr_otg.recruiting_guide_landing .recruitingGuideLanding-hero { padding: 10rem .5rem 4rem; text-align: left; } } .sr_otg.recruiting_guide_landing .recruitingGuideLanding-hero .pageSubheading { font-size: 18px; } .sr_otg.recruiting_guide_landing .chapterOverview-chapterDesc { font-size: 17px; line-height: 1.6; font-family: 'Roboto'; } .sr_otg.recruiting_guide_landing .chapterOverview-chapterDesc strong { font-size: 21px; } .sr_otg.recruiting_guide_landing #InsightsVideoBlock .insights-video-wrap { max-width: 700px; margin: 50px auto; } .sr_otg.recruiting_guide_landing #InsightsVideoBlock .wistia_responsive_padding { -webkit-box-shadow: 0 5px 30px 1px rgba(134, 142, 150, 0.7); box-shadow: 0 5px 30px 1px rgba(134, 142, 150, 0.7); } .BackToSchoolPromo .promo-header { background-color: #2b7cd7; text-align: left; padding: 10px 80px 10px 12px; font-size: 20px; margin: -7px -1px 0 -1px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .BackToSchoolPromo .promo-callout { position: absolute; top: 0; right: 0; border-radius: 50%; width: 74px; height: 74px; margin-top: -20px; margin-right: -11px; -webkit-box-shadow: 0px 4px 15px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 15px 2px rgba(0, 0, 0, 0.2); border: 2px solid white; } .BackToSchoolPromo .old-price { text-decoration: line-through; } .BackToSchoolPromo .promo-pricing-btn { min-width: 80%; padding-bottom: 20px; } .BackToSchoolPromo .promo-price { font-size: 70px; font-weight: 300; line-height: 1.3; font-family: "Oswald", "Roboto", "Helvetica Neue", arial, sans-serif; } .BackToSchoolPromo .promo-fine-print { margin: 10px 0 0 0; font-size: 14px; } .player_pricing .PromoBanner, .recruiting_guide .PromoBanner, .purchase_form .PromoBanner { display: none; } .PromoBanner { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: #2b7cd7; color: white; font-size: 14px; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: bold; z-index: 5; } .PromoBanner-header { padding: 4px 0; text-align: left; padding: 12px 9px; } .PromoBanner-footer { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; padding: 15px 5px; } @media (min-width: 830px) { .PromoBanner-footer { display: none; } } .PromoBanner div { padding: 0px 5px; } .PromoBanner-close { cursor: pointer; font-size: 15px; } .club_customers { /* Social media tweet blocks */ /* Muncian quote and video testimonial block*/ /* 3 quote testimonial block*/ /* club list */ /* * Table styles */ /* * Control feature layout */ } .club_customers #Club-ClubsKillingIt h4 { font-size: 22px; } .club_customers .Club-ClubsKillingIt-toolsWrap p { color: #888888; } .club_customers .Club-ClubsKillingIt { width: 80%; max-width: 150px; margin-top: 2.5rem; border-radius: 50%; -webkit-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.5); } .club_customers .ClubSolutions-MobilePhone { width: 80%; max-width: 300px; margin: 1.5rem auto 0; } .club_customers .ClubSolutions-MobilePhone img { display: block; width: 100%; margin: 0 auto -2rem; } @media only screen and (max-width: 48em) { .club_customers #ClubsList { padding-top: 50px; } } .club_customers .CTAheader { line-height: 1.4em; } @media only screen and (max-width: 48em) { .club_customers .CTAheader { font-size: 28px; } } .club_customers .mapClubs-bg { background-image: url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/map.svg); background-size: 80%; background-position: top; background-repeat: no-repeat; margin-top: 50px; } @media only screen and (max-width: 48em) { .club_customers .mapClubs-bg { background-size: 90%; } } .club_customers .logo { -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } .club_customers .logo:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: transform .5s ease-in-out; } .club_customers .logo h4 { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 600; font-size: 18px; text-align: center; line-height: 1.2; color: white; margin-top: 10px; } .club_customers .logo p { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 400; font-size: 18px; text-align: center; line-height: 1.4; color: white; } .club_customers .ClubSolutions-centralizedRecruiting-item { margin-top: 3rem; } .club_customers .socialBlocks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 10px 100px 10px; margin-top: 30px; } @media only screen and (max-width: 48em) { .club_customers .socialBlocks { padding: 0px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .club_customers .socialBlocks h4 { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 600; font-size: 24px; text-align: left; line-height: 1.6; color: white; } @media only screen and (max-width: 48em) { .club_customers .socialBlocks h4 { font-size: 21px; } } .club_customers .socialBlocks p { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 400; font-size: 18px; text-align: left; line-height: 1.6; color: white; } .club_customers .tweetIcon { width: 13%; float: left; padding-right: 2px; } @media only screen and (min-width: 95em) { .club_customers .tweetIcon { width: 7%; } } @media only screen and (max-width: 65em) { .club_customers .tweetIcon { width: 6%; } } @media only screen and (max-width: 48em) { .club_customers .tweetIcon { width: 7%; } } @media only screen and (max-width: 40em) { .club_customers .tweetIcon { width: 13%; } } .club_customers .linkTweet { margin-top: 10px; } .club_customers .box1, .club_customers .box2, .club_customers .box3, .club_customers .box4, .club_customers .box5, .club_customers .box6 { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 35px; width: 33.33333%; opacity: .98; filter: alpha(opacity=98); /* For IE8 and earlier */ border: 4px solid #f1f1f1; background-size: cover; background-position: center; background-repeat: no-repeat; } @media only screen and (max-width: 48em) { .club_customers .box1, .club_customers .box2, .club_customers .box3, .club_customers .box4, .club_customers .box5, .club_customers .box6 { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (max-width: 65em) { .club_customers .box1, .club_customers .box2, .club_customers .box3, .club_customers .box4, .club_customers .box5, .club_customers .box6 { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (min-width: 95em) { .club_customers .box1, .club_customers .box2, .club_customers .box3, .club_customers .box4, .club_customers .box5, .club_customers .box6 { width: 50%; } } .club_customers .box1:hover, .club_customers .box2:hover, .club_customers .box3:hover, .club_customers .box4:hover, .club_customers .box5:hover, .club_customers .box6:hover { opacity: 0.7; -webkit-transition: .6s ease-in-out; } .club_customers .box1, .club_customers .box3, .club_customers .box5 { background-color: #0080D4; } .club_customers .box1 { background-image: url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/njRebelsBlue.png); } .club_customers .box3 { background-image: url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/412eliteBlue.png); } .club_customers .box5 { background-image: url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/riseAboveBlue%402x.png); } .club_customers .box2, .club_customers .box4, .club_customers .box6 { background-color: #000000; } .club_customers .box2 { background-image: url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/massEliteBlack.png); } .club_customers .box4 { background-image: url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/abVballBlack%402x.png); } .club_customers .box6 { background-image: url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/powerhouseBlack.png); } .club_customers #CTA { padding-top: 0px; } .club_customers .muncianaVid { text-align: center; margin: auto; display: block; } .club_customers .munciana-video-wrap { max-width: 1000px; margin: 50px auto; } @media only screen and (max-width: 48em) { .club_customers .munciana-video-wrap { margin-top: 0px; } } .club_customers .pattyQuote { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 300; font-size: 36px; font-style: italic; text-align: center; line-height: 1.8em; color: #222C35; max-width: 1060px; margin: auto; display: block; margin-bottom: 40px; } @media only screen and (max-width: 78em) { .club_customers .pattyQuote { font-size: 34px; padding: 20px; line-height: 1.8em; } } @media only screen and (max-width: 48em) { .club_customers .pattyQuote { font-size: 22px; padding: 5px; line-height: 1.8em; } } .club_customers .munciana { width: 5%; margin: auto; border-radius: 50%; -webkit-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.5); height: 60px; width: 60px; } .club_customers .QuoteOwner { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 500; font-size: 20px; margin-top: 0.5rem; } .club_customers .QuoteOwnerjob { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6em; } .club_customers .pull { margin-top: 0px; padding: 40px; } @media only screen and (max-width: 65em) { .club_customers .pull { margin-top: 10px; } } @media only screen and (max-width: 48em) { .club_customers .pull { margin-top: 0px; } } .club_customers .quotes { background-color: #202427; } .club_customers .quoteHeading { color: white; text-align: center; max-width: 900px; margin: auto; font-size: 44px; line-height: 1.6em; } @media only screen and (max-width: 48em) { .club_customers .quoteHeading { padding-left: 10px; padding-right: 10px; font-size: 28px; } } .club_customers .quotation { height: 100px; width: 100px; margin: auto; display: block; padding-bottom: 30px; } @media only screen and (max-width: 48em) { .club_customers .quotation { margin: auto; display: block; height: 80px; width: 80px; } } .club_customers .pullquotes { padding: 70px; } @media only screen and (max-width: 48em) { .club_customers .pullquotes { padding: 0px; } } .club_customers .pullquotes h3 { color: white; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 300; font-size: 30px; font-style: italic; text-align: center; line-height: 1.4em; } @media only screen and (max-width: 48em) { .club_customers .pullquotes h3 { font-size: 24px; line-height: 1.6; } } .club_customers .pullquotes p { color: white; color: white; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 400; font-size: 18px; text-align: center; margin-top: 20px; } .club_customers .clubquote { height: 60px; width: 60px; margin: auto; display: block; } @media only screen and (max-width: 48em) { .club_customers { /* Force table to not be like tables anymore */ /* Hide table headers (but not display: none;, for accessibility) */ } .club_customers table, .club_customers thead, .club_customers tbody, .club_customers th, .club_customers td, .club_customers tr { display: block; } .club_customers thead tr { position: absolute; top: -9999px; left: -9999px; } .club_customers tr { border: 1px solid #ccc; } .club_customers td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding: .5rem; text-align: center; } } .club_customers .caseStudyRow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media only screen and (max-width: 48em) { .club_customers .caseStudyRow { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .club_customers .caseStudyRow-col { padding: 0px; background-color: red; margin: auto; width: 33.33333%; margin: 30px; } @media only screen and (max-width: 48em) { .club_customers .caseStudyRow-col { width: 90%; } } .club_customers a.caseStudy { color: white; text-decoration: none; font-size: 26px; font-weight: 400; text-align: center; font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; } .club_customers .caseStudy { padding: 3rem 1rem; display: block; } .club_customers .caseLogo { max-width: 170px; max-height: 170px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .club_customers .caseStudy-lacrosse { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/patriots.png); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/patriots.png); background-size: cover; background-position: center; background-repeat: no-repeat; } .club_customers .caseStudy-lacrosse:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: transform .5s ease-in-out; -webkit-box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); } .club_customers .caseStudy-volleyball { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/muncaseBG.svg); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/muncaseBG.svg); background-size: cover; background-position: center; background-repeat: no-repeat; } .club_customers .caseStudy-volleyball:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: transform .5s ease-in-out; -webkit-box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); } .club_customers .caseStudy-fieldhockey { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/hockey.png); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/hockey.png); background-size: cover; background-position: center; background-repeat: no-repeat; } .club_customers .caseStudy-fieldhockey:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: transform .5s ease-in-out; -webkit-box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.22); } .club_customers table.dataTable { width: 100%; margin: 0 auto; clear: both; border-collapse: collapse; border-spacing: 0; } .club_customers table.dataTable thead th, .club_customers table.dataTable tfoot th { font-weight: bold; } .club_customers table.dataTable thead th, .club_customers table.dataTable thead td { background-color: #24292D; color: white; padding: 10px 12px; border-bottom: 1px solid #111; text-align: left; } .club_customers table.dataTable thead th:active, .club_customers table.dataTable thead td:active { outline: none; } .club_customers table.dataTable tfoot th, .club_customers table.dataTable tfoot td { padding: 10px 18px 6px 18px; border-top: 1px solid #111; } .club_customers table.dataTable thead .sorting, .club_customers table.dataTable thead .sorting_asc, .club_customers table.dataTable thead .sorting_desc, .club_customers table.dataTable thead .sorting_asc_disabled, .club_customers table.dataTable thead .sorting_desc_disabled { cursor: pointer; *cursor: hand; } .club_customers table.dataTable thead .sorting, .club_customers table.dataTable thead .sorting_asc, .club_customers table.dataTable thead .sorting_desc, .club_customers table.dataTable thead .sorting_asc_disabled, .club_customers table.dataTable thead .sorting_desc_disabled { background-repeat: no-repeat; background-position: center right; } .club_customers table.dataTable thead .sorting { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/sort_both.png"); } .club_customers table.dataTable thead .sorting_asc { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/sort_asc.png"); } .club_customers table.dataTable thead .sorting_desc { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/sort_desc.png"); } .club_customers table.dataTable thead .sorting_asc_disabled { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/sort_asc_disabled.png"); } .club_customers table.dataTable thead .sorting_desc_disabled { background-image: url("https://s3.amazonaws.com/sportsrecruits/assets/Clubs-platform/sort_desc_disabled.png"); } .club_customers table.dataTable tbody tr { background-color: #ffffff; } .club_customers table.dataTable tbody tr.selected { background-color: #B0BED9; } .club_customers table.dataTable tbody td:first-child { font-weight: 500; } .club_customers table.dataTable tbody th, .club_customers table.dataTable tbody td { padding: 12px; } @media only screen and (max-width: 48em) { .club_customers table.dataTable tbody td { padding: 12px; } .club_customers table.dataTable tbody td + td { padding: 0 12px 12px; } } .club_customers table.dataTable.row-border tbody th, .club_customers table.dataTable.row-border tbody td, .club_customers table.dataTable.display tbody th, .club_customers table.dataTable.display tbody td { border-top: 1px solid #ddd; } .club_customers table.dataTable.row-border tbody tr:first-child th, .club_customers table.dataTable.row-border tbody tr:first-child td, .club_customers table.dataTable.display tbody tr:first-child th, .club_customers table.dataTable.display tbody tr:first-child td { border-top: none; } .club_customers table.dataTable.cell-border tbody th, .club_customers table.dataTable.cell-border tbody td { border-top: 1px solid #ddd; border-right: 1px solid #ddd; } .club_customers table.dataTable.cell-border tbody tr th:first-child, .club_customers table.dataTable.cell-border tbody tr td:first-child { border-left: 1px solid #ddd; } .club_customers table.dataTable.cell-border tbody tr:first-child th, .club_customers table.dataTable.cell-border tbody tr:first-child td { border-top: none; } .club_customers table.dataTable.stripe tbody tr.odd, .club_customers table.dataTable.display tbody tr.odd { background-color: #e1f3fe; } .club_customers table.dataTable.stripe tbody tr.odd.selected, .club_customers table.dataTable.display tbody tr.odd.selected { background-color: #acbad4; } .club_customers table.dataTable.hover tbody tr:hover.selected, .club_customers table.dataTable.display tbody tr:hover.selected { background-color: #aab7d1; } .club_customers table.dataTable.order-column tbody tr > .sorting_1, .club_customers table.dataTable.order-column tbody tr > .sorting_2, .club_customers table.dataTable.order-column tbody tr > .sorting_3, .club_customers table.dataTable.display tbody tr > .sorting_1, .club_customers table.dataTable.display tbody tr > .sorting_2, .club_customers table.dataTable.display tbody tr > .sorting_3 { background-color: #fafafa; background-color: #e1f3fe; } .club_customers table.dataTable.order-column tbody tr.selected > .sorting_1, .club_customers table.dataTable.order-column tbody tr.selected > .sorting_2, .club_customers table.dataTable.order-column tbody tr.selected > .sorting_3, .club_customers table.dataTable.display tbody tr.selected > .sorting_1, .club_customers table.dataTable.display tbody tr.selected > .sorting_2, .club_customers table.dataTable.display tbody tr.selected > .sorting_3 { background-color: #acbad5; } .club_customers table.dataTable.display tbody tr.odd > .sorting_1, .club_customers table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 { background-color: #f1f1f1; } .club_customers table.dataTable.display tbody tr.odd > .sorting_2, .club_customers table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 { background-color: #f3f3f3; } .club_customers table.dataTable.display tbody tr.odd > .sorting_3, .club_customers table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 { background-color: whitesmoke; } .club_customers table.dataTable.display tbody tr.odd.selected > .sorting_1, .club_customers table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 { background-color: #a6b4cd; } .club_customers table.dataTable.display tbody tr.odd.selected > .sorting_2, .club_customers table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 { background-color: #a8b5cf; } .club_customers table.dataTable.display tbody tr.odd.selected > .sorting_3, .club_customers table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 { background-color: #a9b7d1; } .club_customers table.dataTable.display tbody tr.even > .sorting_1, .club_customers table.dataTable.order-column.stripe tbody tr.even > .sorting_1 { background-color: #fafafa; } .club_customers table.dataTable.display tbody tr.even > .sorting_2, .club_customers table.dataTable.order-column.stripe tbody tr.even > .sorting_2 { background-color: #fcfcfc; } .club_customers table.dataTable.display tbody tr.even > .sorting_3, .club_customers table.dataTable.order-column.stripe tbody tr.even > .sorting_3 { background-color: #fefefe; } .club_customers table.dataTable.display tbody tr.even.selected > .sorting_1, .club_customers table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 { background-color: #acbad5; } .club_customers table.dataTable.display tbody tr.even.selected > .sorting_2, .club_customers table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 { background-color: #aebcd6; } .club_customers table.dataTable.display tbody tr.even.selected > .sorting_3, .club_customers table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 { background-color: #afbdd8; } .club_customers table.dataTable.display tbody tr:hover > .sorting_1, .club_customers table.dataTable.order-column.hover tbody tr:hover > .sorting_1 { background-color: #eaeaea; } .club_customers table.dataTable.display tbody tr:hover > .sorting_2, .club_customers table.dataTable.order-column.hover tbody tr:hover > .sorting_2 { background-color: #ececec; } .club_customers table.dataTable.display tbody tr:hover > .sorting_3, .club_customers table.dataTable.order-column.hover tbody tr:hover > .sorting_3 { background-color: #efefef; } .club_customers table.dataTable.display tbody tr:hover.selected > .sorting_1, .club_customers table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 { background-color: #a2aec7; } .club_customers table.dataTable.display tbody tr:hover.selected > .sorting_2, .club_customers table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 { background-color: #a3b0c9; } .club_customers table.dataTable.display tbody tr:hover.selected > .sorting_3, .club_customers table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 { background-color: #a5b2cb; } .club_customers table.dataTable.no-footer { border-bottom: 2px solid #dcdcdc; } .club_customers table.dataTable.nowrap th, .club_customers table.dataTable.nowrap td { white-space: nowrap; } .club_customers table.dataTable.compact thead th, .club_customers table.dataTable.compact thead td { padding: 4px 17px 4px 4px; } .club_customers table.dataTable.compact tfoot th, .club_customers table.dataTable.compact tfoot td { padding: 4px; } .club_customers table.dataTable.compact tbody th, .club_customers table.dataTable.compact tbody td { padding: 4px; } .club_customers table.dataTable th.dt-left, .club_customers table.dataTable td.dt-left { text-align: left; } .club_customers table.dataTable th.dt-center, .club_customers table.dataTable td.dt-center, .club_customers table.dataTable td.dataTables_empty { text-align: center; } .club_customers table.dataTable th.dt-right, .club_customers table.dataTable td.dt-right { text-align: right; } .club_customers table.dataTable th.dt-justify, .club_customers table.dataTable td.dt-justify { text-align: justify; } .club_customers table.dataTable th.dt-nowrap, .club_customers table.dataTable td.dt-nowrap { white-space: nowrap; } .club_customers table.dataTable thead th.dt-head-left, .club_customers table.dataTable thead td.dt-head-left, .club_customers table.dataTable tfoot th.dt-head-left, .club_customers table.dataTable tfoot td.dt-head-left { text-align: left; } .club_customers table.dataTable thead th.dt-head-center, .club_customers table.dataTable thead td.dt-head-center, .club_customers table.dataTable tfoot th.dt-head-center, .club_customers table.dataTable tfoot td.dt-head-center { text-align: center; } .club_customers table.dataTable thead th.dt-head-right, .club_customers table.dataTable thead td.dt-head-right, .club_customers table.dataTable tfoot th.dt-head-right, .club_customers table.dataTable tfoot td.dt-head-right { text-align: right; } .club_customers table.dataTable thead th.dt-head-justify, .club_customers table.dataTable thead td.dt-head-justify, .club_customers table.dataTable tfoot th.dt-head-justify, .club_customers table.dataTable tfoot td.dt-head-justify { text-align: justify; } .club_customers table.dataTable thead th.dt-head-nowrap, .club_customers table.dataTable thead td.dt-head-nowrap, .club_customers table.dataTable tfoot th.dt-head-nowrap, .club_customers table.dataTable tfoot td.dt-head-nowrap { white-space: nowrap; } .club_customers table.dataTable tbody th.dt-body-left, .club_customers table.dataTable tbody td.dt-body-left { text-align: left; } .club_customers table.dataTable tbody th.dt-body-center, .club_customers table.dataTable tbody td.dt-body-center { text-align: center; } .club_customers table.dataTable tbody th.dt-body-right, .club_customers table.dataTable tbody td.dt-body-right { text-align: right; } .club_customers table.dataTable tbody th.dt-body-justify, .club_customers table.dataTable tbody td.dt-body-justify { text-align: justify; } .club_customers table.dataTable tbody th.dt-body-nowrap, .club_customers table.dataTable tbody td.dt-body-nowrap { white-space: nowrap; } .club_customers table.dataTable, .club_customers table.dataTable th, .club_customers table.dataTable td { -webkit-box-sizing: content-box; box-sizing: content-box; } .club_customers .dataTables_wrapper { position: relative; clear: both; *zoom: 1; zoom: 1; } .club_customers .dataTables_wrapper .dataTables_length { float: left; } .club_customers .dataTables_wrapper .dataTables_filter { float: right; text-align: right; } .club_customers .dataTables_wrapper .dataTables_filter input { margin-left: 0.5em; } .club_customers .dataTables_wrapper .dataTables_info { clear: both; float: left; padding-top: 0.755em; } .club_customers .dataTables_wrapper .dataTables_paginate { padding-top: 0.25em; } .club_customers .dataTables_wrapper .dataTables_paginate .paginate_button, .club_customers .next, .club_customers .paginate_form_link { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0 6px; text-align: center; text-decoration: none !important; cursor: pointer; border: 2px solid transparent; background-color: #24292D; color: white; padding: .7rem 1.2rem; border-radius: 3px; text-transform: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; -webkit-transition: all 0.15s ease 0s; transition: all 0.15s ease 0s; } .club_customers .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .club_customers .next:hover, .club_customers .paginate_form_link:hover { -webkit-box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2); text-decoration: none; opacity: .9; } .club_customers #myTable_previous { border: 2px solid #24292D; background-color: transparent; color: #24292D; } .club_customers #myTable_previous:hover { -webkit-box-shadow: none; box-shadow: none; } .club_customers .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .club_customers .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .club_customers .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { cursor: default; color: #aeaeae !important; border-color: transparent !important; background: transparent; -webkit-box-shadow: none; box-shadow: none; } .club_customers .dataTables_wrapper .dataTables_paginate .paginate_button:active { -webkit-box-shadow: inset transparent; box-shadow: inset transparent; } .club_customers .dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 1em; } .club_customers .dataTables_wrapper .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 100%; height: 40px; margin-left: -50%; margin-top: -25px; padding-top: 20px; text-align: center; font-size: 1.2em; background-color: white; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); } .club_customers .dataTables_wrapper .dataTables_length, .club_customers .dataTables_wrapper .dataTables_filter, .club_customers .dataTables_wrapper .dataTables_info, .club_customers .dataTables_wrapper .dataTables_processing, .club_customers .dataTables_wrapper .dataTables_paginate { color: #333; } .club_customers .dataTables_wrapper .dataTables_scroll { clear: both; } .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody { *margin-top: -1px; -webkit-overflow-scrolling: touch; } .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td { vertical-align: middle; } .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing, .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing, .club_customers .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing { height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; } .club_customers .dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 1px solid #111; } .club_customers .dataTables_wrapper.no-footer div.dataTables_scrollHead > table, .club_customers .dataTables_wrapper.no-footer div.dataTables_scrollBody > table { border-bottom: none; } .club_customers .dataTables_wrapper:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } @media screen and (max-width: 767px) { .club_customers .dataTables_wrapper .dataTables_info, .club_customers .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; } .club_customers .dataTables_wrapper .dataTables_paginate { margin-top: 0.5em; } } @media screen and (max-width: 640px) { .club_customers .dataTables_wrapper .dataTables_length, .club_customers .dataTables_wrapper .dataTables_filter { float: none; text-align: center; } .club_customers .dataTables_wrapper .dataTables_filter { margin-top: 0.5em; } } .club_customers #ClubCustomerTable-wrap { padding: 3rem 1rem 5rem; } .club_customers #myTable { margin-bottom: 20px; } .club_customers #myTable td { border: none !important; } .club_customers #myTable_wrapper { max-width: 1000px; margin: 0 auto; } .club_customers #myTable_paginate { text-align: center; padding-top: 0; padding-bottom: 20px; border-bottom: 2px solid #dcdcdc; } .club_customers .dataTables_filter input { border-radius: 2px; padding: 4px 6px; } .athletes_commit { /****************** COMMIT CARDS ***********************/ background-color: white; /****************** QUOTE TESTIMONIALS ***********************/ /****************** VIDEO TESTIMONIAL PEYTON ***********************/ } .athletes_commit .EventPackagesHero { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#141c21+0,212c35+25,212c35+25,212c35+100&0.9+0,0.85+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.9)), color-stop(25%, rgba(33, 44, 53, 0.89)), to(rgba(33, 44, 53, 0.85))), url(https://s3.amazonaws.com/sportsrecruits/assets/Athlete-commit/college_logosBG.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.9) 0%, rgba(33, 44, 53, 0.89) 25%, rgba(33, 44, 53, 0.85) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/Athlete-commit/college_logosBG.jpg); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6141c21', endColorstr='#d9212c35',GradientType=0 ), url(https://s3.amazonaws.com/sportsrecruits/assets/Athlete-commit/college_logosBG.jpg); /* IE6-9 */ background-size: cover; background-position: center; } .athletes_commit .headercommit { margin-bottom: 50px; } .athletes_commit .StandardHeroSection { padding-bottom: 2rem; } .athletes_commit .HighlightFilterSection { background: none; } .athletes_commit h6 { color: white; } .athletes_commit .filter-settings .btn-group { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media (min-width: 992px) { .athletes_commit .filter-settings .btn-group { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; } } @media (min-width: 1198px) { .athletes_commit .filter-settings .btn-group { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media only screen and (max-width: 75em) { .athletes_commit .SportsFilter { width: 300px !important; } } @media only screen and (max-width: 62em) { .athletes_commit .SportsFilter { width: 100% !important; } } @media only screen and (max-width: 48em) { .athletes_commit .SportsFilter { width: 100% !important; } } @media only screen and (max-width: 75em) { .athletes_commit .GradYr { width: 150px !important; } } @media only screen and (max-width: 62em) { .athletes_commit .GradYr { width: 100% !important; } } @media only screen and (max-width: 48em) { .athletes_commit .GradYr { width: 100% !important; } } @media only screen and (max-width: 75em) { .athletes_commit .divsionFilter { width: 80px !important; } } @media only screen and (max-width: 62em) { .athletes_commit .divsionFilter { width: 100% !important; } } @media only screen and (max-width: 48em) { .athletes_commit .divsionFilter { width: 100% !important; } } .athletes_commit .searchNameCollege { margin-right: 10px; padding-left: 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; z-index: 99; border-radius: 4px; position: relative; -webkit-font-smoothing: auto; font-family: "Helvetica Neue"; font-weight: 300; color: black; background: #fff; } @media only screen and (max-width: 65em) { .athletes_commit .searchNameCollege { padding: 10px; width: 100%; margin: auto; margin-right: 10px; } } @media only screen and (max-width: 48em) { .athletes_commit .searchNameCollege { padding: 10px; width: 100%; margin: auto; } } .athletes_commit .commitCardsRow { margin-left: 0; margin-right: 0; } @media (min-width: 350px) { .athletes_commit .commitCardsRow { margin-left: 1.2rem; margin-right: 1.2rem; } } @media (min-width: 1440px) { .athletes_commit .commitCardsRow { margin-left: auto; margin-right: auto; } } .athletes_commit .card-wrapper { background-color: #ffffff; border-radius: 4px; overflow: hidden; max-width: 315px; -webkit-box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); -webkit-transition: all .5s ease-out; transition: all .5s ease-out; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .athletes_commit .card-wrapper a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .athletes_commit .card-wrapper:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: transform .5s ease-in-out; -webkit-box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); box-shadow: 0 5px 20px rgba(134, 142, 150, 0.7); } .athletes_commit .wrapper { width: 100%; display: inline-block; position: relative; } .athletes_commit .wrapper:after { padding-top: 79%; display: block; content: ''; } .athletes_commit .main { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .athletes_commit .corner-wrap { position: relative; height: 100%; overflow: hidden; } .athletes_commit .corner-bottom-left { background: transparent; position: absolute; z-index: 2; height: 100%; } .athletes_commit .corner-bottom-left:before { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 60px solid #ECEDEF; border-right: 350px solid transparent; width: 0; } .athletes_commit .school-logo-wrap { padding: 20px 0; } .athletes_commit .school-logo { margin: 0 auto; display: block; width: 66%; } .athletes_commit .video-icon { position: absolute; top: 12px; right: 14px; } .athletes_commit .commitCards { margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; } .athletes_commit .details-wrap { padding: 5px 15px 15px 15px; background-color: #ECEDEF; margin-top: -6px; position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .athletes_commit .details-wrap img { position: absolute; right: 12px; bottom: 12px; } .athletes_commit .gradYr { color: #00BFB6; font-weight: 600; font-size: 16px; line-height: .2em; margin-bottom: 10px; position: absolute; bottom: 0; left: 15px; } .athletes_commit .Commitname { font-family: "Oswald", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 22px; text-transform: uppercase; line-height: 1.2em; margin-bottom: 10px; } .athletes_commit .playerContent p { font-weight: 400; font-size: 15px; line-height: 1.4em; margin: 0 0 .3em 0; color: #494949; } .athletes_commit .playerContent p strong { color: #212C35; } .athletes_commit .playerContent p:last-of-type { margin: 0 0 0 0; } .athletes_commit .Loadmore { display: block; margin: 80px auto; width: 100%; text-align: center; } .athletes_commit .loadmoreButton { border-radius: 3px; text-decoration: none; display: inline-block; padding: .7rem 1.2rem; border-radius: 3px; text-transform: inherit; font-size: 16px; font-weight: 500; border: 2px solid #24292D; background-color: transparent; color: #24292D; } .athletes_commit .loadmoreButton:hover { background-color: #24292D; color: white; } .athletes_commit .loadmoreSpinner { color: #24292D; font-size: 40px; line-height: 61px; } .athletes_commit .Commit-QuoteImage { height: 60px; width: 60px; border-radius: 50%; -webkit-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.5); } .athletes_commit .Commit-QuoteImage:last-of-type { margin-left: -12px; } .athletes_commit .quotation { height: 100px; width: 100px; margin: auto; display: block; padding-bottom: 30px; } @media only screen and (max-width: 48em) { .athletes_commit .quotation { height: 80px; width: 80px; } } .athletes_commit .commitPullquotes h3 { color: #24292D; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 300; font-size: 26px; font-style: italic; text-align: center; line-height: 1.5em; margin-top: 12px; } @media only screen and (max-width: 48em) { .athletes_commit .commitPullquotes h3 { font-size: 24px; line-height: 1.6; } } .athletes_commit .pullTestcommits { padding: 40px; } @media only screen and (max-width: 48em) { .athletes_commit .pullTestcommits { padding: 15px; margin-top: 20px; } } .athletes_commit .QuoteOwnerCommit p { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; } .athletes_commit .PeytonBG { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#141c21+0,212c35+25,212c35+25,212c35+100&0.9+0,0.85+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.9)), color-stop(25%, rgba(33, 44, 53, 0.89)), to(rgba(33, 44, 53, 0.85))), url(https://s3.amazonaws.com/sportsrecruits/assets/Athlete-commit/peyton.jpg); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.9) 0%, rgba(33, 44, 53, 0.89) 25%, rgba(33, 44, 53, 0.85) 100%), url(https://s3.amazonaws.com/sportsrecruits/assets/Athlete-commit/peyton.jpg); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6141c21', endColorstr='#d9212c35',GradientType=0 ), url(https://s3.amazonaws.com/sportsrecruits/assets/Athlete-commit/peyton.jpg); /* IE6-9 */ background-size: cover; background-position: center; } .athletes_commit .videosContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .athletes_commit .video { height: 300px; width: 300px; margin: auto; display: block; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } @media only screen and (max-width: 48em) { .athletes_commit .video { margin-top: 40px; height: 270px; width: 270px; } } .athletes_commit .video:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: transform .5s ease-in-out; opacity: 0.5; z-index: 100; display: block; } .athletes_commit .quoteVideo { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 300; font-size: 30px; font-style: italic; text-align: center; line-height: 1.5em; padding: 40px 40px 20px; } @media only screen and (max-width: 48em) { .athletes_commit .quoteVideo { font-size: 26px; padding: 15px; } } .athletes_commit .QuoteVid p { color: white; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 300; font-size: 21px; text-align: center; line-height: 1.4em; } .demo_landing_page { background-color: white; } .demo_landing_page .wrapper_row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .demo_landing_page header, .demo_landing_page .Footer { display: none !important; } .demo_landing_page .StandardForm-card { -webkit-box-shadow: none; box-shadow: none; padding: 0 15px; } .demo_landing_page .StandardForm-card h2 { font-size: 18px; font-weight: 300; margin-bottom: 0; padding: 15px; } @media (min-width: 900px) { .demo_landing_page .StandardForm-card h2 { padding: 15px; } } .demo_landing_page .StandardForm-formWrap input + label { padding-top: 10px; } .demo_landing_page .StandardForm-select + label { padding-top: 10px; } .demo_landing_page .SRlogo { margin: 0 auto; padding: 15px; width: 100%; max-width: 200px; display: block; } .demo_landing_page .StandardForm-formWrap { margin: 15px auto 25px; } .demo_landing_page .formheadingdesktop { font-size: 20px; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 500; line-height: 1.1em; margin-bottom: 0; letter-spacing: .02em; display: none; } @media only screen and (min-width: 900px) { .demo_landing_page .formheadingdesktop { display: block; } } .demo_landing_page .formheading { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.8em; font-style: normal; margin-top: 10px; display: block; } @media only screen and (min-width: 900px) { .demo_landing_page .formheading { display: none; } } .demo_landing_page .leftPane-container { position: inherit; width: 100%; height: auto; display: block; background-color: #222C35; overflow: auto; text-align: center; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media only screen and (min-width: 900px) { .demo_landing_page .leftPane-container { position: relative; left: 0; top: 0; width: 60%; height: 100%; } } .demo_landing_page .testimonialOwner-clubLogo, .demo_landing_page .testimonialOwner-commitImage { margin: 25px auto 10px auto; width: 50px; height: 50px; height: auto; border-radius: 50%; } @media only screen and (min-width: 48em) { .demo_landing_page .testimonialOwner-clubLogo, .demo_landing_page .testimonialOwner-commitImage { width: 72px; height: 72px; margin: 40px auto 15px auto; } } .demo_landing_page .testimonialOwner-commitImageRight { margin-left: -12px; } .demo_landing_page .testimonialOwner-name { font-size: 18px; font-weight: 500; color: white; margin-bottom: 4px; } @media only screen and (min-width: 900px) { .demo_landing_page .testimonialOwner-name { font-size: 22px; } } .demo_landing_page .testimonialOwner-title { font-size: 14px; font-weight: 400; color: white; opacity: .7; } @media only screen and (min-width: 900px) { .demo_landing_page .testimonialOwner-title { font-size: 17px; } } .demo_landing_page .quoteBlock1 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+b.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+b.jpg); } .demo_landing_page .athlete-quoteBlock1 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/volleyballform.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/volleyballform.jpg); } .demo_landing_page .quoteBlock2 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/faceofff.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/faceofff.jpg); } .demo_landing_page .athlete-quoteBlock2 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/faceofff.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/faceofff.jpg); } .demo_landing_page .quoteBlock3 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+7.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+7.jpg); } .demo_landing_page .athlete-quoteBlock3 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/lacrossegirls.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/lacrossegirls.jpg); } .demo_landing_page .quoteBlock4 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/volleyballform.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/volleyballform.jpg); } .demo_landing_page .athlete-quoteBlock4 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+7.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+7.jpg); } .demo_landing_page .quoteBlock5 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/lacrosseform.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/lacrosseform.jpg); } .demo_landing_page .athlete-quoteBlock5 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+b.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+b.jpg); } .demo_landing_page .quoteBlock6 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+8.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+8.jpg); } .demo_landing_page .athlete-quoteBlock6 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+2.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+2.jpg); } .demo_landing_page .quoteBlock7 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+2.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+2.jpg); } .demo_landing_page .athlete-quoteBlock7 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/baseballathleteForm.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/baseballathleteForm.jpg); } .demo_landing_page .quoteBlock8 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+3.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+3.jpg); } .demo_landing_page .athlete-quoteBlock8 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/HOCKEYFORM.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/HOCKEYFORM.jpg); } .demo_landing_page .quoteBlock9 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+1.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+1.jpg); } .demo_landing_page .athlete-quoteBlock9 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/swimmingForm.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/swimmingForm.jpg); } .demo_landing_page .quoteBlock10 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+9.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+9.jpg); } .demo_landing_page .athlete-quoteBlock10 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/vball3.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/vball3.jpg); } .demo_landing_page .quoteBlock1, .demo_landing_page .quoteBlock2, .demo_landing_page .quoteBlock3, .demo_landing_page .quoteBlock4, .demo_landing_page .quoteBlock5, .demo_landing_page .quoteBlock6, .demo_landing_page .quoteBlock7, .demo_landing_page .quoteBlock8, .demo_landing_page .quoteBlock9, .demo_landing_page .quoteBlock10, .demo_landing_page .athlete-quoteBlock1, .demo_landing_page .athlete-quoteBlock2, .demo_landing_page .athlete-quoteBlock3, .demo_landing_page .athlete-quoteBlock4, .demo_landing_page .athlete-quoteBlock5, .demo_landing_page .athlete-quoteBlock6, .demo_landing_page .athlete-quoteBlock7, .demo_landing_page .athlete-quoteBlock8, .demo_landing_page .athlete-quoteBlock9, .demo_landing_page .athlete-quoteBlock10 { background-size: cover; background-position: center; padding-top: 40px; padding-bottom: 40px; margin: 15px 0px; } @media only screen and (min-width: 48em) { .demo_landing_page .quoteBlock1, .demo_landing_page .quoteBlock2, .demo_landing_page .quoteBlock3, .demo_landing_page .quoteBlock4, .demo_landing_page .quoteBlock5, .demo_landing_page .quoteBlock6, .demo_landing_page .quoteBlock7, .demo_landing_page .quoteBlock8, .demo_landing_page .quoteBlock9, .demo_landing_page .quoteBlock10, .demo_landing_page .athlete-quoteBlock1, .demo_landing_page .athlete-quoteBlock2, .demo_landing_page .athlete-quoteBlock3, .demo_landing_page .athlete-quoteBlock4, .demo_landing_page .athlete-quoteBlock5, .demo_landing_page .athlete-quoteBlock6, .demo_landing_page .athlete-quoteBlock7, .demo_landing_page .athlete-quoteBlock8, .demo_landing_page .athlete-quoteBlock9, .demo_landing_page .athlete-quoteBlock10 { padding-top: 80px; padding-bottom: 80px; } } .demo_landing_page .Commit-QuoteImage { height: 60px; width: 60px; border-radius: 50%; } @media only screen and (min-width: 48em) { .demo_landing_page .Commit-QuoteImage { height: 80px; width: 80px; } } .demo_landing_page .Commit-QuoteImage:last-of-type { margin-left: -12px; } .demo_landing_page .Commit-QuoteImagesingle { height: 60px; width: 60px; border-radius: 50%; } @media only screen and (min-width: 48em) { .demo_landing_page .Commit-QuoteImagesingle { height: 80px; width: 80px; } } .demo_landing_page .VideoContainer video { height: -webkit-fill-available; width: initial; margin-left: -20%; position: initial; } .demo_landing_page video { display: inline-block; } .demo_landing_page .VideoContainer-overlay { background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 28, 33, 0.9)), color-stop(25%, rgba(33, 44, 53, 0.89)), to(rgba(33, 44, 53, 0.85))); background: linear-gradient(to bottom, rgba(20, 28, 33, 0.9) 0%, rgba(33, 44, 53, 0.89) 25%, rgba(33, 44, 53, 0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6141c21', endColorstr='#d9212c35',GradientType=0 ); position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; text-align: center; display: block; padding: 0px; display: -ms-flexbox; } @media (min-height: 580px) and (min-width: 768px) { .demo_landing_page .VideoContainer-overlay { /* padding: 180px 0 170px; */ } } .demo_landing_page .VideoContainer-overlay h1 { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; margin-top: 100px; } .demo_landing_page .hello #playbutton { z-index: 3; margin: 0 auto; margin-top: 180px; height: 74px; display: block; } .demo_landing_page .hello #playbutton .rectangle { background-color: #CF4C27; width: 74px; height: 74px; border-radius: 500px; opacity: 0.7; margin: 0 auto; } .demo_landing_page .hello #playbutton .rectangle:hover { background-color: #CF4C27; cursor: pointer; } .demo_landing_page .hello #playbutton .triangle { width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent white; margin: 0 auto; position: relative; bottom: 49px; pointer-events: none; left: 4px; } .demo_landing_page .rightPane-container { position: initial; background-color: #FFFFFF; overflow: auto; padding: 0; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; padding-bottom: 30px; } @media only screen and (min-width: 900px) { .demo_landing_page .rightPane-container { margin-bottom: 0; position: fixed; width: 40%; height: 100%; margin-left: 60%; padding: 50px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media only screen and (min-width: 900px) and (min-height: 700px) { .demo_landing_page .rightPane-container { padding: 0 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .demo_landing_page .mobileTestimonial { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (min-width: 900px) { .demo_landing_page .mobileTestimonial { display: none; } } .demo_landing_page .mobileTestimonial h1 { color: white; font-size: 22px; font-weight: 400; line-height: 1.6em; font-style: italic; margin-bottom: 0; } .demo_landing_page .mobileTestimonial h3 { color: white; font-size: 16px; font-weight: 600; margin-bottom: 2px; } .demo_landing_page .mobileTestimonial p { color: white; font-size: 14px; opacity: .7; } .demo_landing_page .formquote-container { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.85)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+9.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.85), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/Group+9.jpg); background-size: cover; background-position: center; padding: 30px; margin-bottom: 30px; } .demo_landing_page .clubForm-videoBG { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5%, #212c35), color-stop(rgba(33, 44, 53, 0.9)), color-stop(99.5%, #212c35)), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/vbBG.jpg); background: linear-gradient(to bottom, #212c35 0.5%, rgba(33, 44, 53, 0.9), #212c35 99.5%), url(https://s3.amazonaws.com/sportsrecruits/assets/Demo-landing-pages/vbBG.jpg); background-size: cover; background-position: center; height: 100vh; } @media only screen and (max-width: 900px) { .demo_landing_page .clubForm-videoBG { display: none; } } .demo_landing_page .clubForm-videoBG .leftPane-inner { padding-top: 50px; overflow: hidden; } .demo_landing_page .clubForm-videoBG .wistia_responsive_padding { -webkit-box-shadow: 0 4px 24px #212c35; box-shadow: 0 4px 24px #212c35; } .demo_landing_page .clubForm-videoBG h1 { margin: 30px 0; padding: 0 30px; line-height: 1.3; } @media only screen and (min-width: 900px) { .demo_landing_page .clubForm-videoBG h1 { margin: 30px 0; padding: 0 30px; font-size: 34px !important; } } .demo_landing_page .leftPane-inner blockquote { margin: 0 30px; font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; } .demo_landing_page .leftPane-inner blockquote p { font-size: 24px; line-height: 1.8em; font-weight: 300; font-style: italic; margin-bottom: 0; color: white; } @media only screen and (min-width: 48em) { .demo_landing_page .leftPane-inner blockquote p { font-size: 32px; } } .demo_landing_page .quoteIcon { display: block; margin: 0 auto 25px auto; width: 15%; height: auto; } @media only screen and (min-width: 48em) { .demo_landing_page .quoteIcon { width: 10%; margin: 40px auto 30px auto; } } .demo_landing_page .leftPane-inner h1 { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 26px; margin-bottom: 46px; color: white; font-weight: 400; line-height: 1.6em; } @media only screen and (min-width: 48em) { .demo_landing_page .leftPane-inner h1 { font-size: 42px; } } .demo_landing_page .videorefTitle { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 16px; color: white; line-height: 1.6em; font-weight: 400; text-align: center; display: block; margin-left: -40px; margin-right: -40px; margin-bottom: 0px; } @media only screen and (min-width: 48em) { .demo_landing_page .videorefTitle { font-size: 20px; line-height: 1.9em; } } .demo_landing_page .vidsubheader { padding-bottom: 20px; padding: 20px 40px; } @media only screen and (min-width: 48em) { .demo_landing_page .vidsubheader { padding: 20px 65px 20px 65px; } } .demo_landing_page .leftPane-inner h2 { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 20px; color: white; font-weight: 400; line-height: 1.6em; } @media only screen and (min-width: 48em) { .demo_landing_page .leftPane-inner h2 { font-size: 20px; } } .demo_landing_page .leftPane-inner li { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 16px; color: white; font-weight: 400; line-height: 2em; text-align: left; list-style: disc !important; } @media only screen and (min-width: 48em) { .demo_landing_page .leftPane-inner li { font-size: 18px; } } .demo_landing_page .leftPane-inner ul { list-style: display !important; padding: 0px 60px; } @media only screen and (min-width: 48em) { .demo_landing_page .leftPane-inner ul { padding: 10px 100px; } } .demo_landing_page .formVideo { width: 75%; height: auto; margin: 0 auto; } @media only screen and (min-width: 900px) { .demo_landing_page .formVideo { max-width: 750px; } } .demo_landing_page .formHR { height: 6px; width: 80px; background-color: #1F80CE; margin: auto; } @media only screen and (min-width: 48em) { .demo_landing_page .formHR { width: 80px; } } .demo_landing_page .VideoContainer-overlay h1 { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 26px; color: white; font-weight: 400; line-height: 1.6em; } @media only screen and (min-width: 48em) { .demo_landing_page .VideoContainer-overlay h1 { font-size: 36px; } } .demo_landing_page .VideoContainer-overlay h2 { font-family: "Roboto", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 26px; color: white; font-weight: 300; line-height: 1.6em; } @media only screen and (min-width: 48em) { .demo_landing_page .VideoContainer-overlay h2 { font-size: 30px; } } .demo_landing_page .formheroHeading { margin-top: 70px; } .demo_landing_page #backTopBtn { display: block; text-align: center; position: fixed; bottom: 0; width: 100%; margin: 0; /* right: 30px; */ z-index: 99; border: none; outline: none; background-color: rgba(58, 207, 167, 0.93); color: white; cursor: pointer; padding: 15px; /* border-radius: 4px; */ } @media only screen and (min-width: 48em) { .demo_landing_page #backTopBtn { display: none !important; } } .demo_landing_page #backTopBtn:hover { background-color: #3acfa7; /* Add a dark-grey background on hover */ }