/* ============================================================================ Base =============================================================================== Version 1.0 =============================================================================== 1. General ------------------------------------------------------------------------------- 1.1 Font-Face 1.2 Layout 1.2 Highlighted Text 1.3 Anchor 1.4 Form Wrap, Fields, Inputs ------------------------------------------------------------------------------- 2. Plugin & JS Shortcodes ------------------------------------------------------------------------------- 2.1 Password Input 2.2 Custom Select Stylsheet Template 2.3 Custom Radio/Checkbox Template 2.4 jQuery Placeholder ------------------------------------------------------------------------------- 3. Layout & Content ------------------------------------------------------------------------------- 3.1 Default Article 3.2 Typography 3.3 Header 3.4 Footer 3.5 Main Menu 3.6 Transitions for BCCA 3.7 Extra Shortcodes BCCA 3.8 CSS3 Spinner ------------------------------------------------------------------------------- 4. Animate CSS ------------------------------------------------------------------------------- 4.1 FadeInUp 4.2 FadeInDown 4.3 FadeInLeft 4.4 FadeInRight 4.5 FadeIn 4.6 FadeOut 4.7 FadeOutUp 4.8 FadeOutUpBig 4.9 FadeOutRightBig 5.0 ZoomIn ============================================================================== ------------------------------------------------------------------------------- 1.1 Font-Face ------------------------------------------------------------------------------- ------------------------------------------------------------------------------- 4. Ext. shortcodes CSS -------------------------------------------------------------------------------*/ /******* Brandon Grotesque ****** @font-face { font-family: 'bgT'; src: url('/media/templates/Brandon_thin.eot'); src: url('/media/templates/Brandon_thin.eot?#iefix') format('embedded-opentype'), url('/media/templates/Brandon_thin.otf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'langdonregular'; src: url('/media/langdon-webfont.eot'); src: url('/media/langdon-webfont.eot?#iefix') format('embedded-opentype'), url('/media/langdon-webfont.woff2') format('woff2'), url('/media/langdon-webfont.woff') format('woff'), url('/media/langdon-webfont.ttf') format('truetype'), url('/media/langdon-webfont.svg#langdonregular') format('svg'); font-weight: normal; font-style: normal; }*/ @font-face { font-family: 'tradegothic20'; src: url('/media/TradeGothicLTStd-BdCn20.eot'); src: url('/media/TradeGothicLTStd-BdCn20.woff') format('woff'), url('/media/TradeGothicLTStd-BdCn20.svg#TradeGothicLTStd-BdCn20') format('svg'); } @font-face { font-family: 'tradegothic18'; src: url('/media/TradeGothicLTStd-Cn18.eot'); src: url('/media/TradeGothicLTStd-Cn18.woff') format('woff'), url('/media/TradeGothicLTStd-Cn18.svg#TradeGothicLTStd-Cn18') format('svg'); } /*------------------------------------------------------------------------------- 1.2 Layout -------------------------------------------------------------------------------*/ body { color: #000;/* font-family: osR, Arial, Tahoma, sans-serif;*/ position:relative; margin:0; padding:0; } #page { min-height: 100%; height: auto !important; height: 100%; } #content{} /*------------------------------------------------------------------------------- 1.3 Highlighted Text -------------------------------------------------------------------------------*/ ins { background-color: #1179AC;text-decoration: none;} mark { background-color: #1179AC;font-style: normal; font-weight: normal;} a { color:#0078ae; } /*------------------------------------------------------------------------------- 1.4 Anchor -------------------------------------------------------------------------------*/ a, a:hover, a:active { -webkit-transition:color 300ms ease; -moz-transition:color 300ms ease; -o-transition:color 300ms ease; transition:color 300ms ease; } a{text-decoration:none;} /*------------------------------------------------------------------------------- 1.4 Form Wrap, Fields, Inputs (Empty Template) -------------------------------------------------------------------------------*/ /* CSS Hack for iOS devices */ input[type="submit"], input[type="text"], input[type="password"], input[type="email"], textarea { -webkit-appearance:none; -webkit-border-radius:0; } input[type="checkbox"]:checked, input[type="radio"]:checked { background:rgba(0, 0, 0, 0.8); } input, input:hover, input:focus, textarea, textarea:hover, textarea:focus{ transition: 250ms all ease; -moz-transition: 250ms all ease; -webkit-transition: 250ms all ease; -o-transition: 250ms all ease; -ms-transition: 250ms all ease; -webkit-appearance:none; -webkit-border-radius:0; } fieldset,input,select,textarea { border:0px none; background:transparent; } form { margin:0;padding:0; } .form input:hover, .form input:focus, .form textarea:hover, .form textarea:focus{ border-color:#111; } .form.style1 .field{ } .form.style1 .field label{ } .form.style1 .field input{ } .form.style1 .field textarea{ } .form.style1 .field select{ } .form.style1 .field label.error{ display:none !important; } .form.style1 .field input.error, .form.style1 .field textarea.error, .form.style1 .field select.error{ border-color:red !important; } /*------------------------------------------------------------------------------- 2.1 Password Input (Empty Template) -------------------------------------------------------------------------------*/ .password-input-wrap{ position: relative; width:100%; } .password-input-wrap .password-label{ position: absolute; top:0; left:0; display:block; cursor: text; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .password-input-wrap.error .password-input{ border-color:red !important; } /*------------------------------------------------------------------------------- 2.3 Custom Radio/Checkbox Template (Empty Template) -------------------------------------------------------------------------------*/ .ez-hide { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; } .field .checkbox { display:inline-block; width:24px; height:24px; float:left; cursor:pointer; } .field .radio { display:inline-block; width:24px; height:24px; float:left; cursor:pointer; } .checkbox.checked { background-position: 0 -30px; } .radio.selected { background-position: 0 -30px; } .checkbox, .radio { zoom: 1; *display:inline; _height:24px; } /*------------------------------------------------------------------------------- 2.4 jQuery Placeholder -------------------------------------------------------------------------------*/ .placeholder{ color:#666; } .placeholderFocus{ color:#000; } /*------------------------------------------------------------------------------- 3.1 Default Article -------------------------------------------------------------------------------*/ .marticle .btext h1, .marticle .btext h2, .marticle .btext h3, .marticle .btext h4, .marticle .btext h5, .marticle .btext h6{ margin:0; padding:0; } .marticle .btext h1{ font-size:35px; } .marticle .btext h2{ font-size:30px; } .marticle .btext h3{ font-size:25px; } .marticle .btext h4{ font-size:20px; } .marticle .btext h5{ font-size:17px; } .marticle .btext h6{ font-size:14px; } .marticle .btext ol, .marticle .btext ul{ margin-left:30px; margin-bottom:30px; } .marticle .btext ol li{ list-style: decimal; } .marticle .btext a:hover, .marticle .btext a:active{ text-decoration: underline; } .marticle .btext p{ margin-bottom:15px; } .marticle .btext ul li, .marticle .btext ol li, .marticle .btext p { /*font-size:16px;*/line-height:24px; } .marticle .btext strong { font-weight:normal; font-family: 'osB'; } blockquote{ content:'"'; display: block; margin-bottom:15px; font-style: italic; font-family: Georgia !important; font-style: italic !important; } blockquote p{ display: inline; font-family: Georgia !important; font-style: italic !important; } /*------------------------------------------------------------------------------- 3.2 Typography -------------------------------------------------------------------------------*/ h1,h2,h3,h4,h5,h6 { font-weight: normal; margin:0; padding:0; } h1 { font-size: 40px; } h2 { font-size: 35px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 15px; } h6 { font-size: 10px; } strong { font-weight: bold; } em { font-style: italic; } small { font-size: 85%; } /*------------------------------------------------------------------------------- 3.3 Header -------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------- 3.4 Footer -------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------- 3.5 Main Menu -------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------- 3.6 Transitions -------------------------------------------------------------------------------*/ /* fade */ @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { -webkit-opacity: 0; } to { -webkit-opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* scale */ @keyframes scale { from { transform:scale(0.6); } to { transform:scale(1); } } /* Firefox < 16 */ @-moz-keyframes scale { from { transform:scale(0.6); } to { transform:scale(1); } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes scale { from { -webkit-transform:scale(0.6); } to { -webkit-transform:scale(1); } } /* Internet Explorer */ @-ms-keyframes scale { from { transform:scale(0.6); } to { transform:scale(1); } } /* Opera < 12.1 */ @-o-keyframes scale { from { transform:scale(0.6); } to { transform:scale(1); } } /*------------------------------------------------------------------------------- 3.7 Extra Shortcodes -------------------------------------------------------------------------------*/ .alpha { padding-left:0px; } .omega { padding-right:0px; } .block { display:block; } .inline-block { display:inline-block; } .inline { display:inline; } .table-cell { display:table-cell; } .valign { display:table-cell;vertical-align:middle; } .vcenter-outer { display:table;position:absolute;width:100%;height:100%;top:0px;left:0px; } .vcenter-middle { display:table-cell;vertical-align:middle; } .vcenter-inner { position:relative; } /* different approach - parent needs to be relative */ .vcenter { position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);width:100%; } .center { text-align:center;margin-left:auto;margin-right:auto;float:none; } .tleft { text-align:left; } .tright { text-align:right; } .tcenter { text-align:center; } .border-dot { border:1px dotted #ccc; } .border-dot-top { border-top:1px dotted #ccc; } .border-dot-right { border-right:1px dotted #ccc; } .border-dot-bottom { border-bottom:1px dotted #ccc; } .border-dot-left { border-left:1px dotted #ccc; } /*------------------------------------------------------------------------------- 3.8 CSS3 Spinner -------------------------------------------------------------------------------*/ #global-spinner { position:fixed; width:100%; height:100%; min-height:100%; left:0; top:0; background-color:rgba(251,251,251,.7); } .spinner { width: 60px; height: 60px; z-index:999; left:50%; top:50%; position:absolute; margin-top:-30px; margin-left:-30px; /* -webkit-animation: rotateplane 1.2s infinite ease-in-out; -moz-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out;*/ } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @-moz-keyframes rotateplane { 0% { -moz-transform: perspective(120px) } 50% { -moz-transform: perspective(120px) rotateY(180deg) } 100% { -moz-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /*------------------------------------------------------------------------------- 1.5 Float Left, Right, Clearfix, Alignment -------------------------------------------------------------------------------*/ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } .cf { zoom:1; } .clear{ clear:both; overflow: hidden; height:0; zoom: 1; } .right { float:right; display:block; } .left { float:left; display:block; } body .show { display:block; } body .show-0 { display:none; } body .show-1 { display:block; } body .hide { display:none; } body .hide-0 { display:block; } body .hide-1 { display:none; } .show-if-not-empty{ display:none; } .tl{ text-align:left; } .tr{ text-align:right; } .tc{ text-align:center; } .tl > img, .tr > img, .tc > img{ display: inline; } /*------------------------------------------------------------------------------- Z Index -------------------------------------------------------------------------------*/ /* z-index: 1-10 */ .z1{position:relative;z-index:1}.z2{position:relative;z-index:2}.z3{position:relative;z-index:3}.z4{position:relative;z-index:4}.z5{position:relative;z-index:5}.z6{position:relative;z-index:6}.z7{position:relative;z-index:7}.z8{position:relative;z-index:8}.z9{position:relative;z-index:9}.z10{position:relative;z-index:10} .static{ position: static; } .relative{ position: relative; } .absolute{ position:absolute; } .fixed{ position:fixed; } /*------------------------------------------------------------------------------- Margin -------------------------------------------------------------------------------*/ .mauto{ margin-left:auto; margin-right:auto; } .m5{ margin:5px; } .mt5{ margin-top:5px; } .mb5{ margin-bottom:5px; } .ml5{ margin-left:5px; } .mr5{ margin-right:5px; } .m10{ margin:10px; } .mt10{ margin-top:10px; } .mb10{ margin-bottom:10px; } .ml10{ margin-left:10px; } .mr10{ margin-right:10px; } .m15{ margin:15px; } .mt15{ margin-top:15px; } .mb15{ margin-bottom:15px; } .ml15{ margin-left:15px; } .mr15{ margin-right:15px; } .m20{ margin:20px; } .mt20{ margin-top:20px; } .mb20{ margin-bottom:20px; } .ml20{ margin-left:20px; } .mr20{ margin-right:20px; } .m25{ margin:25px; } .mt25{ margin-top:25px; } .mb25{ margin-bottom:25px; } .ml25{ margin-left:25px; } .mr25{ margin-right:25px; } .m30{ margin:30px; } .mt30{ margin-top:30px; } .mb30{ margin-bottom:30px; } .ml30{ margin-left:30px; } .mr30{ margin-right:30px; } .m35{ margin:35px; } .mt35{ margin-top:35px; } .mb35{ margin-bottom:35px; } .ml35{ margin-left:35px; } .mr35{ margin-right:35px; } .m40{ margin:40px; } .mt40{ margin-top:40px; } .mb40{ margin-bottom:40px; } .ml40{ margin-left:40px; } .mr40{ margin-right:40px; } .m45{ margin:45px; } .mt45{ margin-top:45px; } .mb45{ margin-bottom:45px; } .ml45{ margin-left:45px; } .mr45{ margin-right:45px; } .m50{ margin:50px; } .mt50{ margin-top:50px; } .mb50{ margin-bottom:50px; } .ml50{ margin-left:50px; } .mr50{ margin-right:50px; } .ml1p{ margin-left:1%; } .ml2p{ margin-left:2%; } .ml3p{ margin-left:3%; } .ml4p{ margin-left:4%; } .ml5p{ margin-left:5%; } .ml6p{ margin-left:6%; } .ml7p{ margin-left:7%; } .ml8p{ margin-left:8%; } .ml9p{ margin-left:9%; } .ml10p{ margin-left:10%; } .ml11p{ margin-left:11%; } .ml12p{ margin-left:12%; } .ml13p{ margin-left:13%; } .ml14p{ margin-left:14%; } .ml15p{ margin-left:15%; } .ml16p{ margin-left:16%; } .ml17p{ margin-left:17%; } .ml18p{ margin-left:18%; } .ml19p{ margin-left:19%; } .ml20p{ margin-left:20%; } .mr1p{ margin-right:1%; } .mr2p{ margin-right:2%; } .mr3p{ margin-right:3%; } .mr4p{ margin-right:4%; } .mr5p{ margin-right:5%; } .mr6p{ margin-right:6%; } .mr7p{ margin-right:7%; } .mr8p{ margin-right:8%; } .mr9p{ margin-right:9%; } .mr10p{ margin-right:10%; } .mr11p{ margin-right:11%; } .mr12p{ margin-right:12%; } .mr13p{ margin-right:13%; } .mr14p{ margin-right:14%; } .mr15p{ margin-right:15%; } .mr16p{ margin-right:16%; } .mr17p{ margin-right:17%; } .mr18p{ margin-right:18%; } .mr19p{ margin-right:19%; } .mr20p{ margin-right:20%; } /*------------------------------------------------------------------------------- Padding -------------------------------------------------------------------------------*/ .p5{ padding:5px; } .pt5{ padding-top:5px; } .pb5{ padding-bottom:5px; } .pl5{ padding-left:5px; } .pr5{ padding-right:5px; } .p10{ padding:10px; } .pt10{ padding-top:10px; } .pb10{ padding-bottom:10px; } .pl10{ padding-left:10px; } .pr10{ padding-right:10px; } .p15{ padding:15px; } .pt15{ padding-top:15px; } .pb15{ padding-bottom:15px; } .pl15{ padding-left:15px; } .pr15{ padding-right:15px; } .p20{ padding:20px; } .pt20{ padding-top:20px; } .pb20{ padding-bottom:20px; } .pl20{ padding-left:20px; } .pr20{ padding-right:20px; } .p25{ padding:25px; } .pt25{ padding-top:25px; } .pb25{ padding-bottom:25px; } .pl25{ padding-left:25px; } .pr25{ padding-right:25px; } .p30{ padding:30px; } .pt30{ padding-top:30px; } .pb30{ padding-bottom:30px; } .pl30{ padding-left:30px; } .pr30{ padding-right:30px; } .p35{ padding:35px; } .pt35{ padding-top:35px; } .pb35{ padding-bottom:35px; } .pl35{ padding-left:35px; } .pr35{ padding-right:35px; } .p40{ padding:40px; } .pt40{ padding-top:40px; } .pb40{ padding-bottom:40px; } .pl40{ padding-left:40px; } .pr40{ padding-right:40px; } .p45{ padding:45px; } .pt45{ padding-top:45px; } .pb45{ padding-bottom:45px; } .pl45{ padding-left:45px; } .pr45{ padding-right:45px; } .p50{ padding:50px; } .pt50{ padding-top:50px; } .pb50{ padding-bottom:50px; } .pl50{ padding-left:50px; } .pr50{ padding-right:50px; } .pl1p{ padding-left:1%; } .pl2p{ padding-left:2%; } .pl3p{ padding-left:3%; } .pl4p{ padding-left:4%; } .pl5p{ padding-left:5%; } .pl6p{ padding-left:6%; } .pl7p{ padding-left:7%; } .pl8p{ padding-left:8%; } .pl9p{ padding-left:9%; } .pl10p{ padding-left:10%; } .pl11p{ padding-left:11%; } .pl12p{ padding-left:12%; } .pl13p{ padding-left:13%; } .pl14p{ padding-left:14%; } .pl15p{ padding-left:15%; } .pl16p{ padding-left:16%; } .pl17p{ padding-left:17%; } .pl18p{ padding-left:18%; } .pl19p{ padding-left:19%; } .pl20p{ padding-left:20%; } .pr1p{ padding-right:1%; } .pr2p{ padding-right:2%; } .pr3p{ padding-right:3%; } .pr4p{ padding-right:4%; } .pr5p{ padding-right:5%; } .pr6p{ padding-right:6%; } .pr7p{ padding-right:7%; } .pr8p{ padding-right:8%; } .pr9p{ padding-right:9%; } .pr10p{ padding-right:10%; } .pr11p{ padding-right:11%; } .pr12p{ padding-right:12%; } .pr13p{ padding-right:13%; } .pr14p{ padding-right:14%; } .pr15p{ padding-right:15%; } .pr16p{ padding-right:16%; } .pr17p{ padding-right:17%; } .pr18p{ padding-right:18%; } .pr19p{ padding-right:19%; } .pr20p{ padding-right:20%; } /*------------------------------------------------------------------------------- Border Radius -------------------------------------------------------------------------------*/ .br1{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .br2{ border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .br3{ border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .br4{ border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .br5{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .br6{ border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .br7{ border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; } .br8{ border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .br9{ border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; } .br10{ border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .br11{ border-radius: 11px; -moz-border-radius: 11px; -webkit-border-radius: 11px; } .br12{ border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; } .br13{ border-radius: 13px; -moz-border-radius: 13px; -webkit-border-radius: 13px; } .br14{ border-radius: 14px; -moz-border-radius: 14px; -webkit-border-radius: 14px; } .br15{ border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } /*------------------------------------------------------------------------------- Center UL -------------------------------------------------------------------------------*/ .cul { width:100%; overflow:hidden; position:relative } .cul > ul { clear:left; float:left; position:relative; left:50%; text-align:center; list-style:none; margin:0; padding:0 } .cul > ul > li { display:block; float:left; position:relative; right:50% } .cul > ul > li > a { display:block; margin:0 10px } .cul > ul > li > a:hover, .cul > ul > li > a:active, .cul > ul > li.active > a { } /*------------------------------------------------------------------------------- Horizontal UL -------------------------------------------------------------------------------*/ .hul > ul{ display:block; float:left; width:auto; } .hul > ul > li{ display:block; float:left; } .hul > ul > li > a{ display:block; float:left; } .hul > ul > li > a:hover, .hul > ul > li > a:active, .hul > ul > li.active > a{ } /*------------------------------------------------------------------------------- Animate CSS -------------------------------------------------------------------------------*/ /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.d05s { -webkit-animation-duration: .5s; animation-duration: .5s; } /* delay */ .delay-01s { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .delay-02s { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .delay-03s { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .delay-04s { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .delay-05s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .delay-06s { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .delay-07s { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .delay-08s { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .delay-09s { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-105s { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; } /* reverse */ .reverse,.fadeInDownBig-reverse { animation-direction:reverse;-webkit-animation-direction:reverse; } /* fade in up */ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } /* fade in down */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } /* fade in left */ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } /* fade in right */ @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } .wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; } .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight, .bounceInDown { visibility: visible; } /* fade in */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } /* fade out */ @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } /* fade out up */ @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } /* fade out right */ @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } /* zoom */ @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } /*------------------------------------------------------------------------------- CSS LIBRARIES - PLUGINS ================================================================================= 1. jQuery mmenu 2. jQuery tiptip - Tooltip Plugin 3. Slick 4. Nano Scroller 5. Fancybox -------------------------------------------------------------------------------*/ /*--------------------------------------------------------------- 1. jQuery.mmenu panels CSS ----------------------------------------------------------------*/ .mm-menu.mm-horizontal > .mm-panel { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } .mm-menu .mm-hidden { display: none; } .mm-wrapper { overflow-x: hidden; position: relative; } .mm-menu, .mm-menu > .mm-panel { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .mm-menu { background: inherit; display: block; overflow: hidden; padding: 0; } .mm-menu > .mm-panel { background: inherit; -webkit-overflow-scrolling: touch; overflow: scroll; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 20px; -webkit-transform: translateX(100%); transform: translateX(100%); } .mm-menu > .mm-panel.mm-opened { -webkit-transform: translateX(0%); transform: translateX(0%); } .mm-menu > .mm-panel.mm-subopened { -webkit-transform: translateX(-30%); transform: translateX(-30%); } .mm-menu > .mm-panel.mm-highest { z-index: 1; } .mm-menu .mm-list { padding: 20px 0; } .mm-menu > .mm-list { padding-bottom: 0; } .mm-menu > .mm-list:after { content: ''; display: block; height: 40px; } .mm-panel > .mm-list { margin-left: -20px; margin-right: -20px; } .mm-panel > .mm-list:first-child { padding-top: 0; } .mm-list, .mm-list > li { list-style: none; display: block; padding: 0; margin: 0; } .mm-list { font: inherit; font-size: 14px; } .mm-list a, .mm-list a:hover { text-decoration: none; } .mm-list > li { position: relative; } .mm-list > li > a, .mm-list > li > span { text-overflow: ellipsis; color:#666; white-space: nowrap; overflow: hidden; color: inherit; line-height: 20px; display: block; padding: 10px 10px 10px 20px; margin: 0; } .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after { content: ''; border-bottom-width: 1px; border-bottom-style: solid; display: block; width: 100%; position: absolute; bottom: 0; left: 0; } .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after { width: auto; margin-left: 20px; position: relative; left: auto; } .mm-list a.mm-subopen { background: rgba(3, 2, 1, 0); width: 40px; height: 100%; padding: 0; position: absolute; right: 0; top: 0; z-index: 2; } .mm-list a.mm-subopen:before { content: ''; border-left-width: 1px; border-left-style: solid; display: block; height: 100%; position: absolute; left: 0; top: 0; } .mm-list a.mm-subopen.mm-fullsubopen { width: 100%; } .mm-list a.mm-subopen.mm-fullsubopen:before { border-left: none; } .mm-list a.mm-subopen + a, .mm-list a.mm-subopen + span { padding-right: 5px; margin-right: 40px; } .mm-list > li.mm-selected > a.mm-subopen { background: transparent; } .mm-list > li.mm-selected > a.mm-fullsubopen + a, .mm-list > li.mm-selected > a.mm-fullsubopen + span { padding-right: 45px; margin-right: 0; } .mm-list a.mm-subclose { text-indent: 20px; padding-top: 30px; margin-top: -20px; } .mm-list > li.mm-label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 10px; text-transform: uppercase; text-indent: 20px; line-height: 25px; padding-right: 5px; } .mm-list > li.mm-spacer { padding-top: 40px; } .mm-list > li.mm-spacer.mm-label { padding-top: 25px; } .mm-list a.mm-subopen:after, .mm-list a.mm-subclose:before { content: ''; border: 2px solid transparent; display: inline-block; width: 7px; height: 7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-bottom: -5px; position: absolute; bottom: 50%; } .mm-list a.mm-subopen:after { border-top: none; border-left: none; right: 18px; } .mm-list a.mm-subclose:before { border-right: none; border-bottom: none; margin-bottom: -15px; left: 22px; } .mm-menu.mm-vertical .mm-list .mm-panel { display: none; padding: 10px 0 10px 10px; } .mm-menu.mm-vertical .mm-list .mm-panel li:last-child:after { border-color: transparent; } .mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel { display: block; } .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen { height: 40px; } .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 16px; right: 16px; } .mm-menu.mm-vertical .mm-list > li.mm-opened.mm-label > a.mm-subopen { height: 25px; } html.mm-opened .mm-page { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .mm-menu { background: #FFF; color: rgba(255, 255, 255, 0.6); } .mm-menu .mm-list > li:after { border-color: rgba(0, 0, 0, 0.15); } .mm-menu .mm-list > li > a.mm-subclose { background: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-list > li > a.mm-subopen:after, .mm-menu .mm-list > li > a.mm-subclose:before { border-color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-list > li > a.mm-subopen:before { border-color: rgba(0, 0, 0, 0.15); } .mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen), .mm-menu .mm-list > li.mm-selected > span { background: rgba(0, 0, 0, 0.1); } .mm-menu .mm-list > li.mm-label { background: rgba(255, 255, 255, 0.05); } .mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen, .mm-menu.mm-vertical .mm-list li.mm-opened > ul { background: rgba(255, 255, 255, 0.05); } /* jQuery.mmenu offcanvas addon CSS */ .mm-page { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-opened { overflow: hidden; position: relative; } html.mm-opened body { overflow: hidden; } html.mm-opened .mm-page { box-sizing: border-box; position: relative; } html.mm-background .mm-page { background: inherit; } #mm-blocker { background: rgba(3, 2, 1, 0); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -999999; } html.mm-opened #mm-blocker, html.mm-blocking #mm-blocker { display: block; } .mm-menu.mm-offcanvas { display: none; position: fixed; } .mm-menu.mm-current { display: block; } .mm-menu { width: 80%; min-width: 140px; max-width: 440px; } html.mm-opening .mm-page, html.mm-opening #mm-blocker { -webkit-transform: translate(80%, 0); transform: translate(80%, 0); } @media all and (max-width: 175px) { html.mm-opening .mm-page, html.mm-opening #mm-blocker { -webkit-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 550px) { html.mm-opening .mm-page, html.mm-opening #mm-blocker { -webkit-transform: translate(440px, 0); transform: translate(440px, 0); } } /* jQuery.mmenu position extension CSS */ .mm-menu.mm-top, .mm-menu.mm-bottom { width: 100%; min-width: 100%; max-width: 100%; } .mm-menu.mm-right { left: auto; right: 0; } .mm-menu.mm-bottom { top: auto; bottom: 0; } html.mm-right.mm-opening .mm-page, html.mm-right.mm-opening #mm-blocker { -webkit-transform: translate(-80%, 0); transform: translate(-80%, 0); } @media all and (max-width: 175px) { html.mm-right.mm-opening .mm-page, html.mm-right.mm-opening #mm-blocker { -webkit-transform: translate(-140px, 0); transform: translate(-140px, 0); } } @media all and (min-width: 550px) { html.mm-right.mm-opening .mm-page, html.mm-right.mm-opening #mm-blocker { -webkit-transform: translate(-440px, 0); transform: translate(-440px, 0); } } /* jQuery.mmenu z-position extension CSS */ html.mm-front .mm-page, html.mm-front #mm-blocker { -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; z-index: 0; } .mm-menu.mm-front { z-index: 1; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } html.mm-opened.mm-next .mm-page { box-shadow: none; } .mm-menu.mm-front, .mm-menu.mm-next { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } .mm-menu.mm-front.mm-right, .mm-menu.mm-next.mm-right { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } .mm-menu.mm-front.mm-top { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } .mm-menu.mm-front.mm-bottom { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } html.mm-opening .mm-menu.mm-front, html.mm-opening .mm-menu.mm-next { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .mm-menu.mm-front.mm-top, .mm-menu.mm-front.mm-bottom { height: 80%; min-height: 140px; max-height: 880px; } /* jQuery.mmenu footer addon CSS */ .mm-footer { background: inherit; border-top: 1px solid transparent; text-align: center; line-height: 20px; box-sizing: border-box; width: 100%; height: 40px; padding: 10px 10px 0 20px; position: absolute; z-index: 2; bottom: 0; left: 0; } .mm-menu.mm-hasfooter > .mm-panel:after { height: 80px; } .mm-menu .mm-footer { border-color: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.3); } /*--------------------------------------------------------------- 2. jQuery tiptip - Tooltip Plugin ----------------------------------------------------------------*/ /* TipTip CSS - Version 1.2 */ #tiptip_holder { display: none; position: absolute; top: 0; left: 0; z-index: 99999; } #tiptip_holder.tip_top { padding-bottom: 5px; } #tiptip_holder.tip_bottom { padding-top: 5px; } #tiptip_holder.tip_right { padding-left: 5px; } #tiptip_holder.tip_left { padding-right: 5px; } #tiptip_content { font-size: 10px; line-height:13px; width:180px; color: #fff; text-shadow: 0 0 2px #000; padding: 4px 6px 8px; border: 1px solid rgba(255,255,255,0.25); background-color: rgb(25,25,25); background-color: rgba(25,25,25,0.92); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000)); } #tiptip_arrow, #tiptip_arrow_inner { position: absolute; border-color: transparent; border-style: solid; border-width: 6px; height: 0; width: 0; } #tiptip_holder.tip_top #tiptip_arrow { border-top-color: #fff; border-top-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: #fff; border-bottom-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_right #tiptip_arrow { border-right-color: #fff; border-right-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_left #tiptip_arrow { border-left-color: #fff; border-left-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_top #tiptip_arrow_inner { margin-top: -7px; margin-left: -6px; border-top-color: rgb(25,25,25); border-top-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_bottom #tiptip_arrow_inner { margin-top: -5px; margin-left: -6px; border-bottom-color: rgb(25,25,25); border-bottom-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_right #tiptip_arrow_inner { margin-top: -6px; margin-left: -5px; border-right-color: rgb(25,25,25); border-right-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_left #tiptip_arrow_inner { margin-top: -6px; margin-left: -7px; border-left-color: rgb(25,25,25); border-left-color: rgba(25,25,25,0.92); } /* Webkit Hacks */ @media screen and (-webkit-min-device-pixel-ratio:0) { #tiptip_content { padding: 4px 8px 5px 8px; background-color: rgba(45,45,45,0.88); } #tiptip_holder.tip_bottom #tiptip_arrow_inner { border-bottom-color: rgba(45,45,45,0.88); } #tiptip_holder.tip_top #tiptip_arrow_inner { border-top-color: rgba(20,20,20,0.92); } } /*--------------------------------------------------------------- 3. Slick ----------------------------------------------------------------*/ .slick-prev{ position: absolute; left: 0; top: 50%; } .slick-next{ position: absolute; right: 0; top: 50%; } /*--------------------------------------------------------------- 4. nano scroller ----------------------------------------------------------------*/ .nano { position : relative; width : 100%; height : 100%; overflow : hidden; } .nano > .nano-content { position : absolute; overflow : scroll; overflow-x : hidden; top : 0; right : 0; bottom : 0; left : 0; } .nano > .nano-content:focus { outline: thin dotted; } .nano > .nano-content::-webkit-scrollbar { display: none; } .has-scrollbar > .nano-content::-webkit-scrollbar { display: block; } .nano > .nano-pane { background : rgba(0,0,0,.25); position : absolute; width : 10px; right : 0; top : 0; bottom : 0; visibility : hidden9; /* Target only IE7 and IE8 with this hack */ opacity : .01; -webkit-transition : .2s; -moz-transition : .2s; -o-transition : .2s; transition : .2s; -moz-border-radius : 0px; -webkit-border-radius : 0px; border-radius : 0px; } .nano > .nano-pane > .nano-slider { background: #fff; background: rgba(255,255,255,.5); position : relative; margin : 0; -moz-border-radius : 0px; -webkit-border-radius : 0px; border-radius : 0px; } .nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { visibility : visible9; /* Target only IE7 and IE8 with this hack */ opacity : 0.99; } /*------------------------------------------------------------------------------- 5. Fancybox Core CSS -------------------------------------------------------------------------------*/ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; text-shadow: none; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: visible !important; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('/media/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('/media/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background:rgba(0,0,0,0.8); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('/media/fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('/media/fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } /*------------------------------------------------------------------------------- Fancybox Buttons Helper -------------------------------------------------------------------------------*/ #fancybox-buttons { position: fixed; left: 0; width: 100%; z-index: 8050; } #fancybox-buttons.top { top: 10px; } #fancybox-buttons.bottom { bottom: 10px; } #fancybox-buttons ul { display: block; width: 166px; height: 30px; margin: 0 auto; padding: 0; list-style: none; border: 1px solid #111; border-radius: 3px; -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); background: rgb(50,50,50); background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51))); background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 ); } #fancybox-buttons ul li { float: left; margin: 0; padding: 0; } #fancybox-buttons a { display: block; width: 30px; height: 30px; text-indent: -9999px; background-color: transparent; background-image: url('/media/fancybox_buttons.png'); background-repeat: no-repeat; outline: none; opacity: 0.8; } #fancybox-buttons a:hover { opacity: 1; } #fancybox-buttons a.btnPrev { background-position: 5px 0; } #fancybox-buttons a.btnNext { background-position: -33px 0; border-right: 1px solid #3e3e3e; } #fancybox-buttons a.btnPlay { background-position: 0 -30px; } #fancybox-buttons a.btnPlayOn { background-position: -30px -30px; } #fancybox-buttons a.btnToggle { background-position: 3px -60px; border-left: 1px solid #111; border-right: 1px solid #3e3e3e; width: 35px } #fancybox-buttons a.btnToggleOn { background-position: -27px -60px; } #fancybox-buttons a.btnClose { border-left: 1px solid #111; width: 35px; background-position: -56px 0px; } #fancybox-buttons a.btnDisabled { opacity : 0.4; cursor: default; } /*------------------------------------------------------------------------------- Fancybox Thumb Helper -------------------------------------------------------------------------------*/ #fancybox-thumbs { position: fixed; left: 0; width: 100%; overflow: hidden; z-index: 8050; } #fancybox-thumbs.bottom { bottom: 2px; } #fancybox-thumbs.top { top: 2px; } #fancybox-thumbs ul { position: relative; list-style: none; margin: 0; padding: 0; } #fancybox-thumbs ul li { float: left; padding: 1px; opacity: 0.5; } #fancybox-thumbs ul li.active { opacity: 0.75; padding: 0; border: 1px solid #fff; } #fancybox-thumbs ul li:hover { opacity: 1; } #fancybox-thumbs ul li a { display: block; position: relative; overflow: hidden; border: 1px solid #222; background: #111; outline: none; } #fancybox-thumbs ul li img { display: block; position: relative; border: 0; padding: 0; max-width: none; } /***************************************************/ /*@ General */ /*@ Race Face Specific CSS */ /*@ Header */ /*@ Footer */ /*@ Content / Common Elements */ /*@ Homepage */ /*@ Sub Page Template */ /*@ Riders Landing */ /*@ Individual Rider */ /*@ Dealers & Distributors */ /*@ Warranty / Contact Form */ /*@ Product Catalogue */ /*@ Product Details */ /*@ The Latest */ /*@ FAQs */ /***************************************************/ /* TEMP HIDDEN FOR INITIAL LAUNCH - CL */ .signin-trigger, #content .sign-in{ display: none; } .header-newsletter{ margin-right: 0 !important; } /* IE img/svg fix */ /* * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files */ .ie9 img[src$=".svg"] { width: 100%; } /* html[data-useragent*='MSIE 10.0'] img[src$=".svg"] { width: 100%; }*/ /***************************************************/ /*@ 404 */ #page.is-404{ height: 100% !important; } .is-404 .logo{ position: absolute; bottom: 0; right: 0; padding: 2%; } .is-404 a{ text-decoration: underline; } .is-404 a:hover{ color: #000; text-decoration: underline; } .is-404 .logo img{ display: block !important; } .is-404 .bgimg{ height: 100%; width: 100%; background-size: cover !important; } .is-404 *{ color: #fff; } .is-404 h1{ text-transform: uppercase; line-height: 58px; } .is-404 h2{ text-transform: uppercase; font-size: 34px; font-family: "tradegothic18", Helvetica, Arial, sans-serif; margin: 0; line-height: 28px; } .is-404 p{ font-size: 20px; } .is-404 .cf{ padding: 60px 60px 0 60px; } /***************************************************/ /*@ General */ html, html body { width: 100%; height: 100%; } .width50p{ width: 50%; } .width100p{ width: 100%; } *:focus{ outline: none !important; } .is-hidden{ display: none; } .divider{ margin: 0 10px; color: #414143; } div.fancybox-skin{ background-color: #454545; } ::-webkit-input-placeholder { color: #000; } ::-moz-placeholder { color: #000; } :-ms-input-placeholder { color: #000; } input:-moz-placeholder { color: #000; } .search-bar ::-webkit-input-placeholder { color: #a7a9ac; } .search-bar ::-moz-placeholder { color: #a7a9ac; } .search-bar :-ms-input-placeholder { color: #a7a9ac; } .search-bar input:-moz-placeholder { color: #a7a9ac; } body{ background: #000; font-family: "tradegothic18", Helvetica, Arial, sans-serif; } .border{ border-bottom: 2px solid #414143; } .btn, .btn.btn-Black{ -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-family: 'tradegothic20', Helvetica, Arial, sans-serif; font-size: 18px; line-height: normal; border: 1px solid #414143; color:#fff; min-width: 165px; display: inline-block; text-align: center; /*padding: 12px 0;*/ padding: 10px 10px 6px; border-radius: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background: rgb(54,54,54); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM2MzYzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNTI1MjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(54,54,54,0.75) 0%, rgba(37,37,37,0.75) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,54,54,0.75)), color-stop(100%,rgba(37,37,37,0.75))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(54,54,54,0.75) 0%,rgba(37,37,37,0.75) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(54,54,54,0.75) 0%,rgba(37,37,37,0.75) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(54,54,54,0.75) 0%,rgba(37,37,37,0.75) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(54,54,54,0.75) 0%,rgba(37,37,37,0.75) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#252525',GradientType=0 ); /* IE6-8 */ } .btn:hover, .btn.btn-Black:hover{ background: rgb(54,54,54); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM2MzYzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNTI1MjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(54,54,54,1) 0%, rgba(37,37,37,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,54,54,1)), color-stop(100%,rgba(37,37,37,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(54,54,54,1) 0%,rgba(37,37,37,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(54,54,54,1) 0%,rgba(37,37,37,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(54,54,54,1) 0%,rgba(37,37,37,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(54,54,54,1) 0%,rgba(37,37,37,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#252525',GradientType=0 ); /* IE6-8 */ } .btn.btn-White{ color: #414143; background: #e4e4e4; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZTRlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #e4e4e4 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e4e4e4 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e4e4e4 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e4e4e4 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #e4e4e4 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ } .btn.btn-White:hover{ color: #414143; } .btn.focus, .btn:focus, .btn:hover { text-decoration: none; color: #fff; } .inactive-msg{ color: #fff; } .play-link.is-hidden{ display: none; } #global-spinner { position: fixed; z-index: 250; width: 100%; height: 100%; min-height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.7); } .spinner { width: 32px; height: 32px; top: 50%; left: 50%; margin: -16px 0 0 -16px; position: absolute; } .cube1, .cube2 { background-color: #fff; border: 1px solid #414143; width: 20px; height: 20px; position: absolute; top: 0; left: 0; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } .forgot-pwd{ display: none; border-top: 1px solid #414143; } .forgot-pwd-wrapper{ clear: both; display: none; } .forgot-pwd-wrapper .forgot-pwd{ clear: both; border: none; margin-top: 0px; padding-top: 0px; } .mobile-tabs .tab.active{ display: block; } #mobile-logo{ display: none; padding: 10px 0; /*width: 185px;*/ max-width: 50%; } #mobile-nav-wrap{ font-family: "tradegothic18", Helvetica, Arial, sans-serif; position: absolute; height: 100%; top: 50px; width: 100%; background-color: rgba(0, 0, 0, 0.85); text-transform: uppercase; font-size: 16px; } #mobile-nav{ top: 80px; padding-top: 20px; } #mobile-nav:before{ height: 0; } .mm-menu > .mm-panel.mm-hasnavbar{ top: 80px; padding-top: 40px; } #mobile-nav .mm-navbar{ display: none; } .mm-navbar { top: 20px; } #mobile-nav-wrap .mm-navbar .mm-prev{ left: 35px; } #mobile-nav-wrap .mm-panel ul{ margin: 0 15px; padding: 0; list-style: none; } .is-mobile-headnav a{ top: 15px; position: relative; } .is-mobile-headnav span{ position: relative; top: 15px; } #mobile-nav-wrap .mm-panel li{ border-bottom: 1px solid #111; } #mobile-nav-wrap .mm-panel li a{ display: inline-block; padding: 12px 0; } #mobile-nav-wrap .mm-panel a i{ font-size: 24px; } #mobile-nav-wrap .mm-panel a div{ position: relative; top: 3px; } .tileview li{ width: 33.333%; float: left; text-align: center; } .tileview li div{ width: 40px; height: 40px; position: relative; margin: 0 auto 15px; } .tileview.groups li div{ width: 75px; height: 40px; margin: 0; } .tileview li div img, .tileview li div svg{ left: 50%; top: 50%; position: absolute; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 90%; height: 100%; } #mobile-nav-wrap .mm-panel .tileview li{ border-right: 1px solid #111; border-bottom: 1px solid #111; min-height: 107px; } #mobile-nav-wrap .mm-panel .tileview li:after{ border: none; } #mobile-nav-wrap .mm-panel .tileview li:nth-of-type(3n){ border-right: none; } #mobile-nav-wrap .mm-panel .tileview li:nth-last-of-type(1), #mobile-nav-wrap .mm-panel .tileview li:nth-last-of-type(2), #mobile-nav-wrap .mm-panel .tileview li:nth-last-of-type(3) { border-bottom: none; } .mm-menu .mm-listview > li .mm-next:after, .mm-menu .mm-listview > li .mm-arrow:after, .mm-menu .mm-navbar .mm-btn:before, .mm-menu .mm-navbar .mm-btn:after{ border-color: rgba(255, 255, 255, 0.6); } .mm-menu .mm-navbar > *, .mm-menu .mm-navbar a{ color: rgba(255, 255, 255, 0.6); } #hamburger-wrapper{ margin-left: 35px; } #hamburger{ position: relative; bottom: 2px; } #hamburger .burger{ width: 26px; float: right; display: block; padding: 0 4px; position: relative; top: 4px; } #hamburger .line{ display: block; height: 2px; margin-bottom: 4px; width: 100%; position: relative; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; background-color: #fff; } .menu-text{ position: relative; top: 3px; margin-left: 10px; } a{ color: inherit; /*color: #a7a9ac;*/ display: inline-block; opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a:focus{ color: inherit; text-decoration: inherit; } a:hover{ color: #a7a9ac; opacity: 0.75; text-decoration: none; } a.link-style{ color: #a7a9ac; text-decoration: underline; } .no-caps{ text-transform: none; } .caps{ text-transform: uppercase; } .bgcover{ background-size: cover !important; } .bgcontain { background-size:contain !important; } .gray-text{ color: #a7a9ac; } h1, h2, h3, h4, h5, h6{ font-family: 'tradegothic20', Helvetica, Arial, sans-serif; color: #fff; } h1{ font-size: 60px; } h2{ font-size: 24px; margin-bottom: 20px; } h3{ font-size: 17px; margin-bottom: 20px; } h4, h5{ margin: 15px 0; } h6{ font-size: 14px; font-family: 'tradegothic18', Helvetica, Arial, sans-serif; margin: 10px 0; } .boxsizing{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .mc{ margin-left: auto; margin-right: auto; } .popup{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: left; background: rgba(0,0,0,0.7); z-index: 100; } .popup .vcenter-middle{ max-width: 100%; left: 50%; top: 50%; position: absolute; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .popup .vcenter-inner{ width: 35%; width: 500px; max-width: 100%; padding: 30px; /*background-color: #a7a9ac;*/ background-color: #111; border: 1px solid #414143; } .popup a.btn-close:hover{ } .popup a.forgot-password:hover{ color: #414143; } .btn-close{ cursor: pointer; font-size: 20px; } #product-options-popup .total-items{ position: relative; top: 10px; } #total-addtocart-qty{ margin-left: 15px; } #product-options-popup.popup .vcenter-middle{ top: 115px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); width: 95%; /*width: 90%; max-width: 1170px;*/ } #product-options-popup .vcenter-inner{ width: auto; height: 100%; background-color: #000; border: 2px solid #414143; padding: 40px; font-size: 18px; } #product-options-popup .nano{ /*min-width: 580px;*/ } #product-options-popup .nano-content{ /*overflow-x: scroll; min-width: 580px;*/ } #product-options-popup td.attr-description{ /*font-size: 14px; text-transform: none;*/ margin: 0; } #product-options-popup table{ border-bottom: 2px solid #414143; width: 100%; } #product-options-popup th.colour-set{ min-width: 100px; } #product-options-popup th.stock-lvl{ width: 12%; min-width: 140px; } #product-options-popup th.unit-price{ min-width: 100px; } #product-options-popup th.attr-description{ width: 20%; } #product-options-popup th, #product-options-popup td{ text-align: left; /*width: 15%;*/ min-width: 9%; padding: 0 2% 25px 0; } .product-opts-head{ border-bottom: 2px solid #414143; } #product-options-popup th{ color: #a7a9ac; } #product-options-popup th.size{ width: 10%; } #page #product-options-popup td{ vertical-align: middle; } #page #product-options-popup .sku{ word-wrap: break-word; min-width:80px; } #product-options-popup .colour-set span{ margin-right: 10%; position: relative; top: 1px; cursor: default; } #product-options-popup .colour-set p{ position: relative; top: 5px; } #product-options-popup .qty input{ background-color: #1a1a1b; color: #fff; width: auto; padding: 8px 10px 4px 10px; max-width: 37px; } .out-of-stock i{ margin-left: 10px; } #tiptip_holder{ left: 5px; } #tiptip_content{ font-size: 14px; text-align: center; padding: 8px 0 4px; } #productList .col-sm-4{ min-height: 355px; } /***************************************************/ /*@ Race Face Specific CSS */ .rf .custom-checkbox, .rf .custom-radio{ cursor: pointer; width: 20px; height: 20px; display: inline-block; background: #414143 url(/media/rf-sprite-checkbox.png) no-repeat 0 10px; } .rf .custom-checkbox.checked, .rf .custom-radio.checked{ background-position: -60px -20px; } .rf .custom-radio + label{ position: relative; bottom: 5px; } .radio+.radio{ margin-top: 10px; } /***************************************************/ /*@ Header */ #header{ text-transform: uppercase; color: #fff; position: relative; z-index: 12; font-family: 'tradegothic20', Helvetica, Arial, sans-serif; letter-spacing: 0.05em; } #logo{ max-width: 220px; max-height: 19px; } #page.product-details.one-column #logo, #page.product-details.full-width-img #logo{ display: block !important; } #page.product-details.full-width-img{ /*background-position: 5% 10% !important; background-position: 5% 210px !important;*/ background-position: 5% 100px !important; background-size: 1100px !important; } #header-top-bar{ background-color: #000; padding: 10px 0; } .product-details #header-top-bar{ background-color: transparent; } #header-top-bar div.right > div{ margin-right: 75px; } #header-top-bar i, .social i{ margin-right: 15px; } #header-top-bar .social a:last-of-type i, .social a:last-of-type i{ margin-right: 0; } #header-top-bar i.user-fname{ font-style: normal; } #header-top-bar a.minicart{ margin-left: 20px; } #header-top-bar a.minicart i{ margin-right: 5px; } a.close{ text-shadow: none; color: inherit; font-size: inherit; opacity: 1; } a.close:hover{ color: inherit; } #header-top-bar div.right .profile-nav{ background-color: #000; min-width: 150px; margin: 0; padding: 20px; position: absolute; right: 27px; top: 30px; z-index: 11; } #site-search{ position: absolute; right: 15px; top: -14px; z-index: 2; overflow: hidden; } #site-search .search-bar a{ position:relative; z-index: 5; display: inline-block; height: 45px; padding: 13px 0; cursor: pointer; } #site-search .search-bar input[type="text"]{ height: 45px; width: 850px; position: relative; right: -933px; z-index: 2; margin: 0; padding-left: 45px; display: none; border: none; } .search-bar #productSearch input[type="text"]{ background-color: transparent; } #site-search .search-bar a.search-close{ left: 60px; display: none; } #main-nav ul{ margin-bottom: 0; } #main-nav li{ padding-bottom: 10px; margin-right: 35px; position: relative; } #main-nav a{ font-size: 16px; color: #a7a9ac; padding-bottom: 16px; /*border-bottom: 1px solid transparent;*/ } #main-nav li.hover > a, #main-nav a:hover, #main-nav a.active{ opacity: 1; color: #fff; /*border-bottom: 1px solid #fff;*/ } #main-nav li.lvl-1 a:after { background: #fff; content: ""; height: 2px; left: 0; opacity: 0; position: absolute; top: 100%; transform: translateY(10px); transition: opacity 0.3s ease 0s,transform 0.3s ease 0s; width: 100%; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -webkit-transform: translateY(10px); } #main-nav li.hover > a:after, #main-nav a.active:after{ -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); transform: translateY(-5px); opacity: 1; } #main-nav .wrap-level-2{ position: absolute; z-index: 10; left: -20px; top: 47px; width: 225px; background-color: rgba(0,0,0,0.86); padding: 20px; display: none; } #main-nav .wrap-level-2 .lvl-2-link{ height: auto; border: none; width: auto; display: block; padding-bottom: 10px; text-align: left; } #main-nav .wrap-level-2 a.lvl-2-link:last-of-type{ padding-bottom: 0; } #minicart{ min-width: 360px; background-color: #000; display: none; position: absolute; right: 0; top: 30px; z-index: 11; font-family: 'tradegothic18', Helvetica, Arial, sans-serif; } #minicart h5{ margin-top: 0; font-family: 'tradegothic18', Helvetica, Arial, sans-serif; } #minicart .expand{ position: relative; bottom: 8px; cursor: pointer; } #minicart .fa-caret-up, #minicart .fa-caret-down{ font-size: 25px; margin-right: 0; } #minicart h2{ font-family: 'tradegothic18', Helvetica, Arial, sans-serif; font-size: inherit; margin-bottom: 5px; line-height: normal; top: 2px; } #minicart .items .nano { height: 250px; } #minicart .product-info{ width: 95px; /*width: 160px;*/ } #minicart .attr{ font-size: 12px; color: #a7a9ac; } #minicart .attr span{ display: block; } #minicart .btn-close{ position: relative; bottom: 2px; font-size: 15px; } #minicart .fa-times, #cart .fa-times{ font-size: 0.45em; color: #000; } #minicart .fa-lg, #cart .fa-lg{ top: -1px; width: .75em; height: .75em; line-height: .75em; } #minicart .fa-stack-2x, #cart .fa-stack-2x{ font-size: 0.75em; } #minicart .subtotal{ border-top: 2px solid #414143; border-bottom: 2px solid #414143; } #minicart .subtotal-label{ margin-left: 85px; width: 75px; } #product-dropdown{ background-color: rgba(0, 0, 0, 0.86); clear: both; width: 100%; position: absolute; top: 0; padding: 80px 0 40px; display: none; /*display: block !important;*/ } /* #product-dropdown .soft-goods-dropdown{ display: block !important; }*/ #product-dropdown .product-cat{ /*min-height: 235px;*/ } #product-dropdown .product-cat h5{ margin: 5px 0; } #product-dropdown .components-dropdown, #product-dropdown .guards-dropdown, #product-dropdown .soft-goods-dropdown{ display: none; } #product-dropdown .components-dropdown > .col-lg-11, #product-dropdown .guards-dropdown > .col-lg-11, #product-dropdown .soft-goods-dropdown > .col-lg-11{ border-right: 1px solid #414143; } #product-dropdown header{ text-align: center; min-height: 105px; } #product-dropdown .guards-dropdown header, #product-dropdown .soft-goods-dropdown header, #product-dropdown .rider-dropdown header{ min-height: 0; } #product-dropdown header div{ height: 40px; } #product-dropdown header.hover h5{ color: #fff; } #product-dropdown header.hover svg path, #product-dropdown header.hover svg polygon{ fill: #fff; } #product-dropdown .col-lg-11 img, #product-dropdown .col-lg-11 svg{ max-width: 28px; max-height: 26px; position: absolute; top: 50%; left: 50%; -moz-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); width: 100%; } #product-dropdown h5{ color: #a7a9ac; font-family: 'tradegothic18', Helvetica, Arial, sans-serif; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } #product-dropdown .guards-dropdown h5, #product-dropdown .soft-goods-dropdown h5, #product-dropdown .rider-dropdown h5{ left: auto; -webkit-transform: none; -moz-transform: none; transform: none; text-align: left; position: relative; } #product-dropdown .product-cat > a, #product-dropdown .group a{ font-family: 'tradegothic18', Helvetica, Arial, sans-serif; font-size: 12px; color: #a7a9ac; margin-bottom: 10px; display: block; } #product-dropdown a{ display: inline-block; line-height: normal; } #product-dropdown .product-cat a:hover, #product-dropdown .group a:hover{ color: #fff; text-decoration: underline; } #product-dropdown .group img, #product-dropdown .group svg{ max-width: 65px; max-height: 30px; } #product-dropdown svg path{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /***************************************************/ /*@ Footer */ #footer-nav-tablet{ background-color: #000; } #footer{ background-color: #111; text-transform: uppercase; } #footer-socials .container .col-md-3{ margin-top: 30px; margin-bottom: 30px; } #footer-socials .container .col-md-3 > div{ background-color: #000; padding:30px 0; } #footer-socials h2{ font-size: 1.65em; letter-spacing: 0; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #414143; } #footer-socials .desc{ padding:0 25px; } .adjust-fnav-height{ height:273px; } #footer-socials .btn{ width: 100%; margin-top: 10px; position: relative; font-size: 16px; } #footer-socials .newsletter{ font-family: 'tradegothic20', Helvetica, Arial, sans-serif; } #footer-socials .newsletter input[type="text"], #footer-socials .newsletter input[type="email"] { padding: 6px 12px 3px; } #footer-socials .interest-group label{ font-size: 12px; padding-left: 5%; } #footer-socials .interest-group > div.left{ width:36%; } #footer-socials .interest-group > div.left:last-of-type{ width:63%; } #footer-socials .fa-square:before{ content: ""; } #footer-socials .fa-stack-2x{ background-color: #636363; width: 24px; height: 24px; } #footer-socials .fa-stack-1x{ color: #282828; width: 24px; height: 24px; font-size: 12px; } #footer-socials span.fa-stack { width: 24px; height: 24px; font-size: 12px; margin-right: 12px; position: absolute; left: 6px; top: 6px; } .instagram .img-wrap{ display: inline-block; width: 48%; margin-right: 2%; /*margin-bottom: 2%;*/ margin-bottom: 4%; } .instagram a.img-wrap:nth-of-type(even){ margin-right: 0; } .instagram img{ width:100%; } #footer-nav{ font-family: 'tradegothic20', Helvetica, Arial, sans-serif; background-color: #252525; padding: 25px 0; min-height: 150px; } #footer-nav nav{ margin: 0 auto; } #footer-nav ul{ margin: 0 auto; padding: 0; } /* Footer sub nav */ #footer-nav ul ul{ text-align: left; margin-left: 10px; padding-top: 10px; list-style: none; display: none; } #footer-nav ul ul a{ font-family: 'tradegothic18', Helvetica, Arial, sans-serif; border: none; } #footer-nav ul ul a:hover{ border: none; color: #414143; } #footer-nav a{ color: #a7a9ac; padding: 6px 12px 2px; border: 1px solid #252525; } #footer-nav a:hover, #footer-nav a.active{ border: 1px solid #fff; } #footer-search{ display: none; } #footer-search, #mobile-search{ color: #fff; position: relative; } #footer-search a, #mobile-search a{ position: absolute; right: 30px; top: 18px; font-size: 18px; } .btn-label{ text-align: center; } #instagram-feed{ margin-bottom: 53px; } #twitter-feed{ color: #fff; text-transform: none; } #twitter-feed ul, #facebook-feed ul{ margin: 0; padding: 0; list-style: none; } #twitter-feed li, #facebook-feed li{ padding: 19px 0; border-bottom: 1px solid #414143; /*min-height: 165px;*/ height: 129px; font-size: 12px; word-break: break-word; } #twitter-feed li:first-of-type, #facebook-feed li:first-of-type{ padding-top: 0; } #twitter-feed li:last-of-type, #facebook-feed li:last-of-type{ border-bottom: none; } #twitter-feed img, #facebook-feed img{ max-width:70px; max-height: 70px; } #twitter-feed .user, #facebook-feed div.img-wrap{ float: left; margin-right: 15px; min-height: 125px; height: 125px; width: 70px; } #twitter-feed .user span{ display:none; } #twitter-feed .tweet{ float: left; width: 115px; height: 115px; font-size: 12px; color: #a7a9ac; word-break: break-word; } #twitter-feed .tweet a{ display: inline-block; color: #fff; } /* #facebook-feed li{ font-size: 12px; word-break: break-word; }*/ #facebook-feed .left{ width: 115px; height: 115px; } #facebook-feed p.desc{ padding: 0; } .footer-block-wrap{ padding:0 25px; } /***************************************************/ /*@ Content / Common Elements */ #page table td{ vertical-align: top; } #content{ text-transform: uppercase; margin-top: -79px; padding-bottom: 30px; } .desc{ color: #a7a9ac; } .desc img{ max-width: 100%; } .full-slider-wrap .desc, .desc-White{ color: #fff; } .full-slider-wrap .desc.desc-Black, .desc-Black{ color: #414143; } .product-details #content, .riders-landing #content{ margin-top: 0; } /* Temp. hide when there's no content below*/ .product-landing #content{ padding-bottom: 0; } #product-main-details #swatches span { cursor:pointer; } .full-banner.container{ margin: 30px auto; padding-right: 15px; padding-left: 15px; } .short-banner > div{ height: 270px; } .short-banner img{ display:none; } .short-banner .title-wrap{ position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .short-banner h1{ font-size: 76px; margin-top: 30px; text-align: center; } /*.short-banner h1, */ .rf-full-bg .desc{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .short-banner.long-banner > div{ max-height: 670px; height: 80vh; background-size: cover !important; } .short-banner > .container{ position: absolute; top: 0%; left: 50%; z-index: 2; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .short-banner.long-banner .title-wrap{ position: relative; } .search-bar.form input, .search-bar.form a, #productSearch button{ color: #fff; } .search-bar.form a, #productSearch button{ font-size: 19px; position: absolute; right: 15px; top: 15px; } #productSearch button{ padding: 0; border: none; } .search-bar input[type="text"]{ border: 1px solid #a7a9ac; padding: 15px; width: 100%; font-size: 16px; } form input[type="text"], form input[type="password"], form input[type="email"], form select, form textarea, form input[type="radio"]{ background-color: #414143; /*padding:10px;*/ padding: 8px 12px 6px; margin-bottom:8px; width: 100%; border-radius: 0; -webkit-appearance: none; } form .login-form input[type="text"], form .login-form input[type="password"], form .login-form input[type="email"]{ color: #fff; } form .select-wrap, form select{ position: relative; color: #000; -moz-appearance: none; } form select option{ -moz-appearance: none; margin-bottom: 5px; border: none; outline: none; } select.hasCustomSelect{ width: 100% !important; } .select-wrap.select.has-error{ margin-bottom: 32px; } .select-wrap.select{ height: 32px; background-color: #414143; padding: 0 10px; margin-bottom: 8px; } .select span.custom-select{ /*color: #000;*/ color: #fff; font-size: 14px; height: 32px; line-height: 32px; overflow: hidden; padding: 0; width: 100%; text-transform: none; } .select .custom-selectInner{ width: 100% !important; } .form.default .custom-select .custom-selectInner:after { float: right; } .custom-select .custom-selectInner:after { content: "â–¼"; float: right; margin: 0 0 0 5px; } form label.error{ color: #fff; } /* form .select-wrap span{ position: absolute; color: #000; display: block; top: 7px; right: 10px; font-size: 20px; } */ form .select-wrap label.error{ position: absolute; top: 49px; left: 0; } form .select-wrap label.error + .custom-select{ top: 0; left: 10px; } form label[for="recurring-first-time"]{ position: absolute; top: 30px; min-width: 200px; padding-left: 0; } form textarea{ height: 200px; resize: none; } form input[type="radio"]{ width: auto; margin-right: 3%; } form .checkbox label{ position: relative; bottom: 5px; } form .date .col-sm-4, form .phone .col-sm-4{ width: 31.333333%; min-width: 0; margin-right: 3%; } form .date .col-sm-4:last-child, form .phone .col-sm-4:last-child{ margin-right: 0; } .newsletter h4{ font-size: 14px; } section.breadcrumb{ /*color: #fff;*/ color: #a7a9ac; background-color: transparent; margin: 0 auto; padding: 0; position: relative; z-index: 1; } .breadcrumb ul{ margin: 0; padding: 0; } .breadcrumb .divider{ margin:0 10px; } .breadcrumb li:last-of-type a{ color: #fff; } .block-wrap{ padding: 30px 30px 0; height: 240px; position: absolute; bottom: 0; width: 100%; margin-bottom: 30px; } .block-wrap section{ position: absolute; bottom: 0; } .block-wrap div, .intro{ color: #a7a9ac; text-transform: none; } .full-width-img .block-wrap div, .intro{ background: rgba(0, 0, 0, 0.55); } .block-wrap .btn{ width: 190px; } .overlay{ width: 100%; position: absolute; top: 0; height: 230px; z-index: 1; background-size: cover !important; } .block-overlay{ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViNWI1YiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU0JSIgc3RvcC1jb2xvcj0iIzNmM2YzZiIgc3RvcC1vcGFjaXR5PSIwLjU0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjk5Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(91,91,91,0) 0%, rgba(63,63,63,0.54) 54%, rgba(0,0,0,0.99) 99%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(91,91,91,0)), color-stop(54%,rgba(63,63,63,0.54)), color-stop(99%,rgba(0,0,0,0.99)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(91,91,91,0) 0%,rgba(63,63,63,0.54) 54%,rgba(0,0,0,0.99) 99%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(91,91,91,0) 0%,rgba(63,63,63,0.54) 54%,rgba(0,0,0,0.99) 99%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(91,91,91,0) 0%,rgba(63,63,63,0.54) 54%,rgba(0,0,0,0.99) 99%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(91,91,91,0) 0%,rgba(63,63,63,0.54) 54%,rgba(0,0,0,0.99) 99%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005b5b5b', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ top: 0; height: 100%; } #full-slider{ border-bottom: 7px solid #1b1b1b; } #full-slider h1, #full-slider .full-slider-title strong{ display: block; font-size: 150px; /*line-height: 110px;*/ line-height: 130px; margin-top: 30px; } #full-slider h2, #full-slider .full-slider-title{ font-size: 30px; font-family: 'tradegothic20', Helvetica, Arial, sans-serif; margin: 0 auto; max-width: 100%; width: 1170px; padding-left: 15px; padding-right: 15px; } #full-slider .full-slider-title { /*min-height:400px; */ min-height: 320px; } .full-slider-desc{ font-size: 20px; margin: 0 auto; max-width: 100%; width: 1170px; padding-left: 15px; padding-right: 15px; } .full-slider-desc strong{ font-family: "tradegothic20", Helvetica, Arial, sans-serif; } #full-slider .max-width{ width: 1170px; padding-left: 15px; padding-right: 15px; } #full-slider div.wrap{ position: absolute; width: 100%; text-align: center; } #slide-pause-wrap{ position: absolute; top: 80px; z-index: 9; width: 100%; } #slide-pause-btn{ background: url(/media/play-pause-button.png) no-repeat; background-position: 0 -70px; width: 70px; height: 70px; opacity: 0.55; } #slide-pause-btn.paused{ background-position: 0 0; } #slide-pause-btn:hover{ opacity: 0.75; } .slide-pause{ width: 100%;max-width: 1170px; position: relative; } #full-slider .slick-prev{ left: 25px; } #full-slider .slick-next{ right: 25px; } /* enable user select to highlight text */ .slick-slider { -webkit-user-select: text !important; -khtml-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } .slider-nav .slick-slide{ -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; opacity: 0.45; cursor: pointer; } .slider-nav .slick-slide.slick-active{ opacity: 1; } .slider-nav div.slick-slide{ /*height: 120px;*/ height: 165px; } #full-slider .bgimg{ height: 670px; width: 100% !important; } #full-slider .slick-list{ width: 100%; } /* div.slick-slide img{ width: 100%; } */ div.slick-slide img.play-btn{ width: auto; } ul.slick-dots{ margin: 0; padding: 0; list-style: none; text-align: center; position: absolute; width: 97.5%; bottom: 5px; } ul.slick-dots li{ display: inline; margin: 0 6px; } ul.slick-dots li.slick-active button{ background-color: #fff; } .slick-dots button{ text-indent: -9999px; background-color: #414143; border: none; border-radius: 15px; padding: 0; width: 12px; height: 12px; } .slick-slider .slick-prev, .slick-slider .slick-next{ border: none; text-indent: -99999px; width: 25px; padding: 0; height: 50px; top: 40%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .slick-slider .slick-prev{ background: url(/media/left-arrow.svg) no-repeat; left: -25px; } .slick-slider .slick-next{ background: url(/media/right-arrow.svg) no-repeat; right: -25px; } .slick-slider .slick-prev:hover, .slick-slider .slick-next:hover, .arrow-down:hover img{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .slick-slider.sub-slick-slider .slick-prev{ left: -38px; } .slick-slider.sub-slick-slider .slick-next{ right: -38px; } /***************************************************/ /*@ Homepage */ .home #home-feature-category .bgimg{ height: 296px; } #home-feature-articles .desc{ margin-bottom: 20px; } #full-slider .wrap, .home .full-banner .container{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .home article:first-of-type{ padding-top:0; } .home section .rf-layout, .home section .rf-layout:last-child{ margin-bottom: 90px; } /***************************************************/ /*@ Sub Page Template */ section .rf-layout{ margin-bottom: 50px; } section .rf-layout:last-child{ margin-bottom: 0; } .rf-full-bg{ height:295px; background-size:cover !important; } .rf-full-bg .desc{ font-family: 'tradegothic20', Helvetica, Arial, sans-serif; color: #fff; text-transform: uppercase; font-size: 26px; letter-spacing: 0.05em; line-height: 34px; text-align: center; max-width: 65%; } .rf-full-slider .bgimg, .sub-slick-gallery .bgimg{ height: 640px; } .sub-slick-gallery ul.slick-dots{ width: 100%; } .rf-full-slider a:hover, .sub-slick-gallery a:hover{ opacity: 1; } .sub-slick-gallery .slick-prev{ left: 0; } .sub-slick-gallery .slick-next{ right: 0; } .rf-full-slider .bgimg img{ width: 100%; } /*.rf-two-col article:nth-of-type(even) img, */ .rf-two-col article:nth-of-type(even) div.relative.left{ float: right; } /* .rf-two-col.image-left article div.left, .rf-two-col article:nth-of-type(even) div.left{ margin-left: 0; margin-right: 2.5%; } .rf-two-col article > .left{ width:48.75%; } .rf-two-col article div.left{ margin-left: 2.5%; } */ .rf-two-col article .desc, .rf-three-col article .desc, .rf-four-col article .desc{ text-transform: none; } .rf-three-col table td{ padding-right: 15px; width: 50%; } .rf-three-col table td:nth-of-type(2){ padding-right: 0px; padding-left: 15px; } .rf-four-col img{ margin-bottom: 20px; } .rf-four-col .col-sm-3{ margin-bottom: 30px; } .tile{ position: relative; display: block; margin: 0px 0px 30px; overflow: hidden; float: left; text-decoration: none; width: 250px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .tile:nth-child(1), .tile:nth-child(5), .tile:nth-child(7), .tile.large{ width: 530px; } .tile img{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); position: relative; left: 50%; } .tile:hover img{ transform: translateX(-50%) scale(1.1); -ms-transform: translateX(-50%) scale(1.1); -webkit-transform: translateX(-50%) scale(1.1); } .masonry-nav .tile:hover img{ transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); } .play-btn.play-btn-small{ cursor: pointer; transform: scale(0.4); -ms-transform: scale(0.4); -webkit-transform: scale(0.4); -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; margin-top: -12px; } .play-btn.play-btn-small:hover{ -webkit-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } .play-btn{ opacity: 0.75; transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .play-btn:hover{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /***************************************************/ /*@ Riders Landing */ .a-rider{ text-align: center; position: relative; margin-bottom: 50px; } .a-rider img{ /*width: 100%;*/ height: 100%; width: auto; left: 50%; position: absolute; -webkit-transform: translateX(-50%) rotate(0); -moz-transform: translateX(-50%) rotate(0); transform: translateX(-50%) rotate(0); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .rider-img-wrap{ height: 540px; overflow: hidden; width:100%; } .a-rider > a{ display: block; } .a-rider a:hover img{ -webkit-transform: translateX(-50%) scale(1.1); -ms-transform: translateX(-50%) scale(1.1); transform: translateX(-50%) scale(1.1); } .rider-overlay{ position: absolute; top: 0; left: 0; background: transparent; width: 100%; height: 100%; } .a-rider a:hover .rider-overlay{ background: rgba(0,0,0,0.5); } .rider-overlay + div{ overflow: hidden; z-index: -1; position: relative; } /***************************************************/ /*@ Individual Rider */ #rider-twitter-feed ul, #rider-facebook-feed ul{ margin: 0; padding: 0; list-style: none; } #rider-twitter-feed li{ height: 65px; position: relative; } #rider-twitter-feed a{ display: inline-block; } #rider-twitter-feed .user img, #rider-twitter-feed .tweet span{ display: none; } #rider-twitter-feed li:last-of-type, #rider-facebook-feed li:last-of-type{ border-bottom: none; } #rider-twitter-feed h5, #rider-facebook-feed h5{ font-family: 'tradegothic18', Helvetica, Arial, sans-serif; margin: 2px 0 8px; } #rider-twitter-feed .bgimg{ width: 48px; height: 48px; } #rider-facebook-feed .bgimg{ width: 90px; height: 90px; } #rider-twitter-feed .col-sm-10{ top: 50%; left: 48px; position: absolute; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } #instafeed .slide { /*height: 208px;*/ height: 170px; overflow: hidden; margin: 0px 15px; position: relative; } #instafeed .slide a { width: 170px; height: 170px; display: block; transition: 800ms all ease 0s; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform-style: preserve-3d; position: absolute; top: 50%; left: 50%; margin: -85px 0 0 -85px; } .social, .tabs, .riders-info{ color: #fff; } .tabs article.item{ padding: 40px; } .tabs.product-info .bgcover{ background-size: contain !important; } .tabs .slick-nav.tab-nav ul{ bottom: auto; position: relative; width: 100%; display: block; padding: 0; } .rf .tabs .slick-nav.tab-nav li, .rf .tabs.panel-group li{ color: #000; text-align: center; width: 33.3%; height: 100%; margin: 0; display: block; float: left; border: 1px solid #414143; cursor: pointer; background: rgb(114,114,114); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyJSIgc3RvcC1jb2xvcj0iIzcyNzI3MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NzU4NTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(114,114,114,1) 2%, rgba(87,88,89,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(114,114,114,1)), color-stop(100%,rgba(87,88,89,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(114,114,114,1) 2%,rgba(87,88,89,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(114,114,114,1) 2%,rgba(87,88,89,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(114,114,114,1) 2%,rgba(87,88,89,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(114,114,114,1) 2%,rgba(87,88,89,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#575859',GradientType=0 ); /* IE6-8 */ } .rf .tabs .slick-nav.tab-nav li.slick-active, .rf .tabs.panel-group .active li{ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MxYzFjMSIgc3RvcC1vcGFjaXR5PSIwLjU1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3OTc5NzkiIHN0b3Atb3BhY2l0eT0iMC41NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(193,193,193,0.55) 0%, rgba(121,121,121,0.55) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(193,193,193,0.55)), color-stop(100%,rgba(121,121,121,0.55))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(193,193,193,0.55) 0%,rgba(121,121,121,0.55) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(193,193,193,0.55) 0%,rgba(121,121,121,0.55) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(193,193,193,0.55) 0%,rgba(121,121,121,0.55) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(193,193,193,0.55) 0%,rgba(121,121,121,0.55) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cc1c1c1', endColorstr='#8c797979',GradientType=0 ); /* IE6-8 */ } .rf .tabs .slick-nav.tab-nav li h4, .rf .tabs.panel-group li h4{ color: #000; margin: 12px 0 8px; } .rf .tabs .slick-nav.tab-nav li.slick-active h4, .rf .tabs.panel-group .active li h4{ color: #fff; } .tabs .col-sm-4{ padding: 0 40px; } .tabs .col-sm-4.alpha{ padding-left: 0; } .tabs .col-sm-4.omega{ padding-right: 0; } .riders-info .highlight-year{ padding: 0 10px; } .riders-info .highlight-year h5{ font-size: 30px; text-align: center; margin-bottom: 40px; } .riders-info .highlight-year p{ font-size: 22px; line-height: normal; margin-bottom: 30px; } .riders-info .highlight-year span{ color: #a7a9ac; font-size: 18px; } .riders.riders-individual .rf-full-slider{ margin: 50px auto; } .riders-info.tabs .slick-track{ margin: 0 auto; } /***************************************************/ /*@ Dealers & Distributors */ .googlemap-results .location{ position: relative; padding: 25px; border-bottom: 1px solid #414143; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .gm-style-mtc{ display: none; } .infobox .gmap_link{ max-width: 85%; } #distributor-container .left-col, #telize-info .left-col, .infobox .left-col, .marker-infowindow .left-col, .locations .nano .left-col{ width: 10%; float: left; } #distributor-container .right-col, #telize-info .right-col, .infobox .right-col, .marker-infowindow .right-col, .locations .nano .right-col{ width: 90%; float:left; } .tabs .googlemap-results #distributor-container .locations .col-sm-4{ padding: 0 15px; } .tabs .googlemap-results #distributor-container .location{ } .distributors-slide, .distributors-slide .distributors{ height: 1160px; } .googlemap-results #distributor-container .locations .col-sm-4{ min-height: 145px; } .googlemap-results #distributor-container .location{ /*min-height: 145px;*/ min-height: 234px; } .googlemap-results .location:hover{ background-color: #1D1D1D; } .googlemap-results .location.active{ background-color: #242424; } .googlemap-results .marker-info{ width: auto; float: left; position: relative; z-index: 2; background-color: #000; min-width: 275px; } .googlemap-results h3{ font-size: 20px; margin-bottom: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .googlemap-results a:hover h3{ color: #a7a9ac; opacity: 0.75; } .googlemap-results .info{ color: #a7a9ac; } .googlemap-results .infobox{ display: none; } .googlemap-results .infobox, .infobox-onhover,.infobox { position: absolute; height: auto !important; background-color: #000; padding: 25px; border-bottom: 1px solid #414143; } .infobox-onhover{ } .infobox .btn-close{ position: relative; bottom: 4px; font-size: inherit; } #map{ width: 100%; min-height: 450px; height: 100%; position: absolute; z-index: 1; } /*Google Map Autocomplete dropdown list - disabled*/ .pac-container{ display: none; background: transparent; } #map .gm-style{ font-family: inherit; font-size: inherit; } .locations .nano{ height: 450px; } .marker-down{ width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #000; position: absolute; bottom: -19px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } .arrow-down { position: absolute; bottom: 30px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } .arrow-down img{ display: block !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /***************************************************/ /*@ Warranty / Contact Form */ .has-form .forgot-pwd-trigger{ position: relative; top: 20px; } .has-form form input[type="text"], .has-form form input[type="password"], .has-form form input[type="email"], .has-form form select, .has-form form input[type="radio"] { padding: 8px 12px 6px; } .has-form input[readonly]{ margin-bottom: 12px; } #warranty-form, #contact-form{ color: #fff; } #warranty-form .custom-checkbox, #warranty-form .custom-radio, #contact-form .custom-checkbox, #contact-form .custom-radio{ width: 30px; height: 30px; } .rf #warranty-form .custom-checkbox.checked, .rf #warranty-form .custom-radio.checked, .rf #contact-form .custom-checkbox.checked, .rf #contact-form .custom-radio.checked{ background-position: -55px -15px; } #warranty-form .form-label, #contact-form .form-label{ position: relative; top: 13px; } #warranty-form .cf, #contact-form .cf{ margin-bottom: 20px; } #for-rider-team-support textarea, #for-event-support textarea{ height: 80px; } .conditional-set{ border-top: 1px solid #414143; border-bottom: 1px solid #414143; } .form-three-set label.error{ display: none !important; } .form-three-set label:last-of-type{ display: block !important; clear: both; } .form-three-set input:last-of-type, .form-three-set select:last-of-type{ margin-right: 0; } .form-three-set .select-wrap{ padding: 0 10px; } .form-three-set .select-wrap.has-error{ margin-bottom: 52px; } #support-type-options .checkbox + .checkbox{ margin-top: 10px; } .contact-info a{ display: inline-block; } /***************************************************/ /*@ Product Catalogue */ /*Video Grid*/ .video-set .col-sm-4{ min-height: 245px; } .product-pagination{ clear:both; } .product-pagination ul{ margin: 0; padding: 0; list-style: none; } .product-pagination ul li{ display: inline-block; margin: 0 5px; } .product-pagination li a{ padding: 10px; } .product-catalogue .col-sm-3{ /*background-color: #111;*/ background-color: #000; } .product-set img.pv-image{ -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100%; height: auto; } #catalogue-nav{ color: #fff; } #catalogue-nav span.fallback-text{ display: block; margin-left: 10px; } .product-catalogue .col-sm-3 h2{ /*padding: 0 20px; margin: 50px 0 0;*/ padding: 20px; background: #000; cursor: pointer; padding-top: 50px; } .product-catalogue .col-sm-3 h2:first-of-type{ margin-top: 0; } .product-catalogue .col-sm-3 h2 i, .product-catalogue .col-sm-3 h4 i{ float: right; position: relative; bottom: 4px; } #catalogue-nav h4{ background-color: #1b1b1b; border-bottom: 2px solid #414143; padding: 20px; margin: 0; } #catalogue-nav img, #catalogue-nav svg{ max-height: 20px; max-width: 85px; width: 85px; transform-origin: 0; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } #catalogue-nav .component-cat-nav img, #catalogue-nav .component-cat-nav svg{ max-height: 30px; max-width: 26px; } #catalogue-nav .component-cat-nav svg path, #catalogue-nav .component-cat-nav svg polygon{ fill: #fff; } #catalogue-nav .img-wrap{ width: 40px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } #catalogue-nav ul{ margin: 0; padding: 0; list-style: none; } #catalogue-nav li{ padding: 14px 20px 11px; font-size: 16px; border-bottom: 2px solid #000; color: #a7a9ac; background-color: #111; height: 52px; position: relative; } #catalogue-nav li.active a{ color: #fff; } .product-catalogue .col-sm-9 h2{ padding-bottom: 30px; border-bottom: 1px solid #414143; } .product-set h4, .product-set h5{ font-family: 'tradegothic18', Helvetica, Arial, sans-serif; margin: 10px 0; } .product-set h5 p{ margin-bottom: 0; } .manual-and-care h4, .pdf-set h4, .product-set h4:last-child, .product-set h5:last-child{ border-bottom: 2px solid #414143; padding-bottom: 10px; } .product-set .btn{ width: auto; min-width: 170px; left: 50%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform:translateX(-50%) translateY(-50%) translateZ(0) rotate(0) translate3d(0,0,0); -moz-transform:translateX(-50%) translateY(-50%) translateZ(0) rotate(0) translate3d(0,0,0); transform:translateX(-50%) translateY(-50%) translateZ(0) rotate(0) translate3d(0,0,0); opacity: 0; } .product-set .title-wrap a p{ margin-bottom: 0; } .featured-set.product-set .btn{ /*left: auto;*/ position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; opacity: 1; } .featured-set .col-sm-3{ min-height: 300px; } .product-set .img-wrap{ overflow: hidden; } .product-set div.img-wrap:hover a.btn{ opacity: 1; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .product-set .bgimg{ position: relative; height: 100%; -webkit-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); width: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .product-set .bgimg:hover{ -webkit-transform: scale(1.15) translateZ(0); -moz-transform: scale(1.15) translateZ(0); transform: scale(1.15) translateZ(0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .product-set img{ /*width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);*/ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); text-align: center; display: block; height: 100%; width: auto; position: absolute; left: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .product-tag{ position: absolute; left: 0; top: 0; background-color: #3d3d3d; padding: 5px 5px 0; color: #fff; } #product-grid h1{ font-size: 30px; } #product-grid .product-set .img-wrap img{ position: absolute; top: 50%; left: 50%; display: none; } #product-grid .product-set .img-wrap img:first-of-type{ display: block; } .product-set .product-set-link{ width: 100%; height: 205px; position: relative; } #by-filter{ color: #fff; text-transform: none; } #by-filter .checkbox{ text-transform: uppercase; } #by-filter .col-sm-12 .checkbox{ margin-top: -5px; } #by-filter .expand{ color: #a7a9ac; } #by-filter .expand .custom-checkbox{ width: 26px; height: 26px;/* background-color: #000000;*/ background-color: #414143; border: 2px solid #414143; } #by-filter i{ font-size: 24px; position: relative; bottom: -4px; margin-left: 15px; } #by-filter p{ margin: 25px 0; } #by-builtfor .custom-checkbox{ top: 7px; margin-right: 10px; } #by-builtfor label{ font-weight: normal; } #by-builtfor li:nth-of-type(3n+1){ width: 26%; } #by-builtfor li:nth-of-type(3n){ width: 39%; } .colour-set span{ border: 1px solid #414143; background: #000; width: 26px; height: 26px; display: inline-block; margin-right: 10px; cursor: pointer; } #product-main-details .colour-set span{ cursor: default; } .product-set .colour-set span{ margin: 0 0 10px 8px; float: right; } .product-set .colour-set span:first-of-type{ margin-left: 8px; } .colour-set span:first-of-type{ margin-left: 0; } .colour-set span[data-colour="red"]{ background-color: #B52929; } .colour-set span[data-colour="yellow"]{ background-color: yellow; } .colour-set span[data-colour="green"]{ background-color: #83BA83; } .colour-set span[data-colour="grey"]{ background-color: grey; } .colour-set span[data-colour="black"]{ background-color: black; } .colour-set span[data-colour="pink"]{ background-color: pink; } .colour-set span[data-colour="blue"]{ background-color: blue; } .colour-set span[data-colour="orange"]{ background-color: #E88A0E; } /***************************************************/ /*@ Product Details */ #full-width-img-wrap{ height: 597px; position: absolute; max-width: 740px; width: 100%; margin-top: -85px; } .is-full-width-mobile-image{ height: 300px; background-size: contain !important; } .success-message{ font-size: 14px; max-width: 165px; margin-top: 10px; } #product-main-details{ min-height: 444px; } #product-main-details h1{ font-size: 30px; margin-bottom: 20px; } #product-main-details .price-range{ margin: 20px 0; font-size: 18px; color: #fff; } #product-main-details .attributes .link-style.no-caps{ position: relative; top: 35px; clear: both; } .size-options *[data-size], .size-options .new-span{ border: 2px solid #414143; display: inline-block; margin: 0 8px 8px 0; padding: 2px 5px 0px; font-size: 11px; min-width: 23px; text-align: center; } .attributes, .social-sharing{ color: #fff; } .social-sharing .fa-stack-2x{ background-color: #a7a9ac; width: 100%; height: 100%; } .social-sharing a:hover .fa-stack-2x{ background-color: #fff; } .social-sharing .fa-stack-2x:before{ content: ""; } .social-sharing .fa-inverse{ color: #000; } .social-sharing a{ opacity: 1; margin-left: 15px; } .technical-specs table{ font-size: 16px; width: 100%; } .technical-specs .attributes{ text-transform: none; } .technical-specs table td{ width: 50%; padding: 5px 0; } .technical-specs table td:nth-of-type(2){ color: #a7a9ac; } .manual-and-care img, .pdf-set img{ height: 100px; margin-bottom: 25px; opacity: 0.35; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .manual-and-care a:hover img, .pdf-set a:hover img{ opacity: 1; } .manual-and-care a:hover h4, .pdf-set a:hover h4{ background-color: #111; } .manual-and-care a:hover, .pdf-set a:hover{ color: inherit; opacity: 1; } .manual-and-care h4, .pdf-set h4{ padding-top: 10px; } /* #related-products img{ width: 100%; }*/ .dd-slick-slider .slide .container{ width: 100%; padding: 0; } .dd-slick-slider .googlemap-results > .full-banner.container{ margin-top: 0; } /***************************************************/ /*@ The Latest */ .pagination{ display: block; color: #fff; text-align:center; } .pagination .pager { color: #a7a9ac; margin: 10px; display: inline-block; } .pagination .pager.active { color: #fff; } /***************************************************/ /*@ FAQs / Order History */ .accordion .panel{ border: none; background: none; box-shadow: none; } .accordion .panel .desc a { text-decoration:underline; } .accordion .panel-body{ display: none; } .accordion.tabs .active h4{ color: #fff; } .order-history .accordion.tabs li h4{ display: inline-block; margin-right: 20px; } .order-history .accordion.tabs ul{ margin: 0; padding: 0; list-style: none; } .panel-question{ margin: 0; padding: 0; list-style: none; } .panel-group .panel+.panel{ margin-top: 0; } .panel-question .fa{ font-size: 28px; position: relative; top: 5px; } .accordion.tabs.panel-group li{ width: 100%; text-align: left; padding: 0 15px; } .pdf-set a{ min-height: 280px; } .pdf-set .auto-ellipsis{ height:60px; width: 100%; } /* jQuery.mmenu fullscreen extension CSS */ .mm-menu.mm-fullscreen { width: 100%; min-width: 140px; max-width: 10000px; } html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } @media all and (max-width: 140px) { html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 10000px) { html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(10000px, 0); -moz-transform: translate(10000px, 0); -ms-transform: translate(10000px, 0); -o-transform: translate(10000px, 0); transform: translate(10000px, 0); } } html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } @media all and (max-width: 140px) { html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-140px, 0); -moz-transform: translate(-140px, 0); -ms-transform: translate(-140px, 0); -o-transform: translate(-140px, 0); transform: translate(-140px, 0); } } @media all and (min-width: 10000px) { html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-10000px, 0); -moz-transform: translate(-10000px, 0); -ms-transform: translate(-10000px, 0); -o-transform: translate(-10000px, 0); transform: translate(-10000px, 0); } } .mm-menu.mm-fullscreen.mm-top, .mm-menu.mm-fullscreen.mm-bottom { height: 100%; min-height: 140px; max-height: 10000px; } html.mm-opened.mm-fullscreen .mm-page { box-shadow: none !important; } /* Cart & Checkout CSS */ .checkout{ color: #FFF; } .checkout-cart{ color: #fff; } .checkout-cart .lg-font{ font-size: 17px; } .checkout-cart h2{ padding-bottom: 25px; border-bottom: 2px solid #414143; } .checkout-cart h2 .divider{ margin: 0 8px; font-family: 'tradegothic18', Helvetica, Arial, sans-serif; color: #414143; } .checkout-cart-table{ width: 100%; font-size: 17px; padding: 30px 0; } .checkout-cart-table label{ font-weight: normal; } #page.cart .checkout-cart-table tr{ border-bottom: 15px solid #000; } .checkout-cart-table th, .checkout-cart-table tfoot td{ color: #a7a9ac; padding: 30px 0; padding: 30px 4% 30px 0; } #page.cart .checkout-cart-table th:nth-of-type(2){ padding-left: 25px; /*width: 518px;*/ width: 425px; } #page.cart .checkout-cart-table td{ background-color: #111; vertical-align: middle; } #page.cart .checkout-cart-table td:first-of-type{ background-color: transparent; vertical-align: middle; /*width: 10%;*/ max-width: 165px; } #page.cart .checkout-cart-table td:first-of-type img{ width: 100%; max-width: 219px; } #page.cart .checkout-cart-table td:nth-of-type(2){ vertical-align: top; padding: 25px; } #page.cart .checkout-cart-table td:nth-of-type(4){ padding-right: 25px; } #page.cart .checkout-cart-table strong{ margin-bottom: 15px; display: inline-block; } #page.cart .checkout-cart-table .attributes, .variant-desc{ color: #a7a9ac; font-size: 15px; line-height: normal; } #page.cart .checkout-cart-table .attribute{ margin-bottom: 5px; } #page.cart .checkout-cart-table label{ min-width: 65px; margin-bottom: 0; } #page.cart .checkout-cart-table tfoot td{ background-color: transparent; } #page.cart .checkout-cart-table tfoot td:nth-of-type(2){ text-align: right; vertical-align: middle; } #checkout-progress ul{ margin: 0; padding: 0; list-style: none; } #checkout-progress li{ margin-right: 30px; } #checkout-progress li.active{ color: #fff; } #page section.checkout .btn.active{ text-transform: none; } /* .promocode-row .col-sm-4, .review-row .col-sm-4{ max-width: 29.85%; } */ #addressForm p{ color: #a7a9ac; } #addressForm input, #addressForm label{ color: #fff; } #addressForm input[readonly]{ opacity: 0.5; } /* cart -------------------------------------------------------------------- */ #page .products-table{margin:0;} .cart.products-table .table { border:0px; } .cart.products-table .table tr td { /*font-size:12px;*/ text-transform:none;vertical-align:top; } .cart.products-table .table tr td, .cart.products-table .table tr th { border-bottom:1px solid #E6E6E6; } .cart.products-table .table table { overflow:hidden; } .cart.products-table .table table th.tleft { text-align:left; } .store .cart h1 { margin:0px 0px 10px; } .cart.products-table .table .product-info { text-align:left; } .cart.products-table .table .close { width:20px;display:block; } .cart.products-table .table .close img { max-width:100%; } .store .home-features.related-products h2 { margin:0px 0px 50px;text-align:center; } .store .home-features.related-products { padding-bottom:80px; } .products-table { margin:0px 0px 20px; } .products-table table th,.products-table footer .total-items,.products-table footer .subtotal{ font-size:24px; text-transform:uppercase; } .products-table table,#page .cart.products-table h2.product-info { font-size:12px;width:100%; } .products-table .table { padding:25px 0px;border-top:2px solid #414143; } .products-table .table table { } .products-table table th, .products-table footer .total-items, .products-table footer .subtotal, .products-table h2, .products-table table td { font-size:17px; } #page .products-table table td{vertical-align: middle;} .products-table h2{margin-bottom:0;} .products-table table .fa-stack { font-size:11px; } .products-table table i.fa-stack-2x { font-size:22px; } .products-table table tr:nth-child(1) { -webkit-animation-delay:0.1s;animation-delay:0.1s; } .products-table table tr:nth-child(2) { -webkit-animation-delay:0.2s;animation-delay:0.2s; } .products-table table tr:nth-child(3) { -webkit-animation-delay:0.3s;animation-delay:0.3s; } .products-table table tr:nth-child(4) { -webkit-animation-delay:0.4s;animation-delay:0.4s; } .products-table table tr:nth-child(5) { -webkit-animation-delay:0.5s;animation-delay:0.5s; } .products-table table tr:nth-child(6) { -webkit-animation-delay:0.6s;animation-delay:0.6s; } .products-table table tr:nth-child(7) { -webkit-animation-delay:0.7s;animation-delay:0.7s; } .products-table table tr:nth-child(8) { -webkit-animation-delay:0.8s;animation-delay:0.8s; } .products-table table tr:nth-child(9) { -webkit-animation-delay:0.9s;animation-delay:0.9s; } .products-table table tr:nth-child(10) { -webkit-animation-delay:1s;animation-delay:1s; } .products-table table td, .products-table table th{ color: #a7a9ac; padding: 30px 4% 30px 0; font-size: 17px; } .products-table table td{ color: #fff; } .products-table table td .attributes{ color: #a7a9ac; } .products-table table td:first-of-type{ background-color: transparent; vertical-align: middle; /* width: 10%; */ max-width: 165px; padding: 0; } .products-table table td.avail.out-of-stock { color:#808080; } .products-table table td .text { width:25px;text-align:center;border:2px solid #c2c2c2;background:#fff; } .products-table header { margin:0px 0px 20px; } .products-table footer { margin:20px 0px 0px; } .products-table table .btn.bold { height:30px;line-height:30px;padding:0px 35px;width:100%;white-space:nowrap; } .products-table table td.two, .products-table table td.three, .products-table table td.four, .products-table table td.five{ background:#111111; } section.checkout .products-table table td.two, section.checkout .products-table table td.three, section.checkout .products-table table td.four, section.checkout .products-table table td.five{ background:#111111; } .order.products-table table td.two, .order.products-table table td.three, .order.products-table table td.four, .order.products-table table td.five{ background: none; } .products-table .swatch { width:20px;height:20px;border:2px solid #c2c2c2;margin-right:10px;display:inline-block;vertical-align:middle; } .products-table .swatch.black { background:#000; } .borderbottom { border-bottom: 2px solid #414143; } .bordertop { border-top: 2px solid #414143; } .field.bg.inline-btn { padding:0;overflow:hidden; } .field.bg.inline-btn .text { width:70%;float:left;border:0;} .field.bg.inline-btn.file-upload { position:relative; } .field.bg.inline-btn.file-upload .text.file { position:absolute;z-index:1;width:100%;height:45px;visibility:hidden; } .field.bg.inline-btn.file-upload .file-label { position:absolute;z-index:2;width:100%;padding-left:10px;cursor:pointer; } .field.bg.inline-btn .btn { width:30%;float:right; min-width:1px;border:0;} .promocode-row{ margin-top: -70px; } #promo-form input.text{ width: 60%; } #promo-form .btn{ width: 40%; max-height: 34px; } .order.products-table .col-sm-offset-8{ margin-left: 50.75%; } /* .calc-total{ width: 27%; float: right; } */ .order.products-table .col-sm-offset-8 .subtotal{ margin-right: 89px; } .calculation, .calc-total h4{ margin-right: 74px; } .calculation strong, .calc-total strong{ display: inline-block; min-width: 120px; font-weight: normal; } .order.products-table .col-sm-offset-8 .totals .desc{ font-family: "tradegothic20", Helvetica, Arial, sans-serif; } .review-row .calculation span{ font-family: "tradegothic18", Helvetica, Arial, sans-serif; } .review-row h4{ font-size: 17px; } .review-row .calculation h4{ margin: 10px 0 0; } #cart input[type="text"]{ background-color: #000; max-width: 45px; padding: 5px 8px 3px; text-align: center; } /* ------------------------------------------------------------------------------- media queries ---------------------------------------------------------------------------------- */ .mobile-only, .tablet-only, .desktop-only, .md-tablet-only, .sm-tablet-only{ display: none; } .browser-only{ display: block; } .mobile-logo-wrap{ position: relative; top: 3px; } @media only screen and (max-width: 1550px){ #page.product-details.full-width-img{ background-position: -35% 100px !important; } } @media only screen and (max-width: 1450px){ #page.product-details.full-width-img{ background-position: -200px 100px !important; } } /* desktop 1200px -------------------------------------------------- */ @media only screen and (max-width: 1199px){ .mobile-head-icons-wrap{ position: relative; top: 10px; } .mobile-only{ display: block; } .browser-only{ display: none; } .desktop-only{ display: block; } .mobile-tabs .tab{ display: none; } .googlemap-results #distributor-container .location{ min-height: 253px; } #mobile-logo{ display: block !important; } .product-details #header-menu-bar{ display: none; } #header{ z-index: 3; } #header-menu-bar{ visibility: hidden !important; } #header-top-bar span{ display: none; } #header-top-bar span.subtotal-value, #header-top-bar span.price{ display: inline; } #mobile-nav-wrap{ top: 40px; } #header-top-bar div.right .profile-nav{ right: 0; } #header-top-bar div.right > div, #header-top-bar a.minicart{ margin-right: 0; margin-left: 0; } #header-top-bar div.right > div.social{ margin-right: 15px; padding-right: 15px; border-right: 2px solid #414143; } .adjust-fnav-height{ height:346px; } #footer-socials span.fa-stack{ display: none; } #footer-nav-tablet .col-sm-5{ font-size: 18px; } #footer-nav-tablet .col-sm-5 a{ margin-left: 15px; } .footer-block-wrap {/* padding-left: 5px; padding-right: 5px;*/ padding: 0 25px; } #footer-socials .interest-group > div.left, #footer-socials .interest-group > div.left:last-of-type{ width: 100%; } #footer-socials .interest-group > div.left .checkbox{ margin-top: 0; margin-bottom: 0; } #twitter-feed, #facebook-feed, #instagram-feed{ min-height: 346px; margin-bottom: 0; } #twitter-feed .user, #facebook-feed div.img-wrap{ width: 60px; } #twitter-feed .tweet, #facebook-feed .left.auto-ellipsis{ width: 85px; } #facebook-feed img{ width: 100%; } .has-form .contact-info{ clear: both; } #by-filter .col-sm-6{ width: 100%; } #slide-pause-wrap{ top: 20px; left: 5px; z-index: 9; } .slide-pause{ max-width: 970px; } #full-slider .bgimg { height:450px; } #full-slider h1,#full-slider .full-slider-title strong { font-size: 65px; line-height: 65px; } .full-slider-wrap .overlay { height:0; } #full-slider .full-slider-title { min-height:210px; } .checkout-cart .promocode-row input[type="submit"]{ min-width: 0; width: 100%; } .order.products-table .col-sm-offset-8 { margin-left: 55%; } .order.products-table .col-sm-offset-8 .subtotal, .calculation, .calc-total h4{ margin-right: 48px; } .review-row .btn{ min-width: 0; } #full-slider .full-slider-title, .full-slider-desc, #full-slider .max-width{ width: 970px; } .full-slider-desc{ max-height: 90px; } #related-products .bgcover{ background-size: contain !important; } #footer-search{ display: block; } #footer-search input[type="text"]{ background-color: transparent; border: 2px solid #414143; padding: 15px; } #full-width-img-wrap{ max-width: 58.66666667%; } } @media only screen and (max-width: 1080px){ #product-options-popup table{ font-size: 16px; } #instafeed.slick-slider .slick-prev{ left: 20px; } #instafeed.slick-slider .slick-next{ right: 20px; } } /* tablet (portrait) -------------------------------------------------- */ @media only screen and (max-width: 991px){ .short-banner.long-banner > div{ max-height: 510px; } #distributor-container .col-sm-4{ width: 100%; } .googlemap-results #distributor-container .location{ padding-left: 25%; padding-right: 25%; } .colour-set span{ width: 24px; height: 24px; } #product-main-details .attributes .link-style.no-caps{ width: 100%; } .tablet-only{ display: block; } #page.cart .checkout-cart-table th:nth-of-type(2), #page.cart .checkout-cart-table td:nth-of-type(2){ padding-left: 0; } #full-slider{ border-bottom: none; } .adjust-fnav-height{ height: auto; } #home-feature-category .bgimg{ margin: 10px 0; } #footer-socials .container .col-md-3.newsletter{ margin-top: 0; } #footer-socials .container .col-md-3.newsletter > div{ background-color: transparent; padding: 0; } #mobile-search input[type="text"]{ background-color: transparent; border: 2px solid #414143; } #footer-socials .interest-group > div.left div.checkbox{ width:33.333%; float: left; } #footer-socials .interest-group > div.left div.checkbox.is-dirt-jump-slopstyle{ width: 49.333%; } #footer-socials .interest-group > div.left div.checkbox.is-trail{ width: 17.333%; } #footer-socials .newsletter span.fa-stack { display: inline; } #footer-socials{ margin-top: 15px; margin-bottom: 0; } #footer-socials .col-lg-3{ display: none; } #footer-socials .col-lg-3.col-sm-12{ display: block; width: 100%; } #footer-socials .newsletter{ text-align: center; } #footer-socials .newsletter h2{ border-bottom: none; padding: 20px 0; margin: 0; border-top: 2px solid #414143; } #footer-socials .newsletter h2 span{ display: inline; } #footer-socials .newsletter h4 { font-size: initial; text-align: center; } #footer-socials div.interest-group{ text-align: left; } #footer-socials div.interest-group > div.left, #footer-socials div.interest-group > div.left:last-of-type{ width: 50%; } #footer-socials .btn{ max-width: 200px; } #full-slider .full-slider-title, .full-slider-desc, #full-slider .max-width{ width: 750px; } #product-main-details .colour-set, #product-main-details .size-options{ width: 50%; } .tab-nav h4 span{ display: none; } .tab-nav h4 i{ margin-right: 0; font-size: 22px; } #page.product-details.full-width-img{ background-position: -325px 100px !important; } /* Bootstrap Override */ .container { width: inherit; } /* vertical table popup */ #product-options-popup .table { padding:0; } #product-options-popup table { display:block; } #product-options-popup tr { display:inline-block;padding:0 0 20px; } #product-options-popup thead { display:block;float:left; } #product-options-popup tbody { display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch; } #product-options-popup .table table::after { content:""; display:table; clear:both; position:absolute; top:70px; right:0; height:500px; width:40px; z-index:1; pointer-events:none; background:-webkit-linear-gradient( right , #f9f9f9, rgba(248, 247, 238, 0)); background:linear-gradient(to left, #f9f9f9, rgba(248, 247, 238, 0)); visibility:visible; opacity:1; -webkit-transition:opacity .3s 0s, visibility 0s 0s; -moz-transition:opacity .3s 0s, visibility 0s 0s; transition:opacity .3s 0s, visibility 0s 0s; } #product-options-popup tbody tr:last-child { padding-right:40px; } #product-options-popup th,#product-options-popup td { display:block; height:45px; padding-right: 12px; } #product-options-popup th { padding:0px 10px 15px 0px;text-align:left;width:auto !important; } #product-options-popup.products-table table .btn.bold { padding:0px 20px; } #product-options-popup table td.avail.out-of-stock .mt10 { margin:0; } } @media only screen and (max-width: 900px){ .product-catalogue .col-sm-3 h2{ font-size: 22px; } .googlemap-results #distributor-container .location { min-height: 234px; } .order.products-table .col-sm-offset-8 .subtotal, .calculation{ margin-right: 8.5%; } .calc-total h4{ margin-right: 38px; } .review-row .col-sm-8{ display: none; } .calc-total{ width: 100%; } .checkout-cart-table th.quantity{ min-width: 80px; } .checkout-cart-table th.total{ min-width: 80px; } #product-options-popup .colour-set p{ display: none; } } @media only screen and (max-width: 854px){ .tile:nth-child(4), .tile:nth-child(6){ width: 530px; margin-bottom: 30px; border: 1px solid rgba(44, 44, 44, 1); } .tile:nth-child(4) img, .tile:nth-child(6) img{ display: block; margin: 0 auto; } #product-options-popup table{ font-size: 13px; /*min-width: 580px;*/ overflow-x: scroll; } #product-options-popup .vcenter-inner{ padding: 5%; } #product-options-popup .btn{ font-size: 13px; min-width: 122px; width: 122px; } #product-options-popup th.stock-lvl{ min-width: 97px; } #product-options-popup th.unit-price { min-width: 78px; } #product-options-popup .colour-set span { /*border: none;*/ width: 20px; height: 20px; } #product-options-popup .total-qty{ display: none; } #contact-form .col-xs-12, #warranty-form .col-xs-12{ width: 100%; } #warranty-form .form-label, #contact-form .form-label { top: auto; } } /* mobile (portrait and landscape) -------------------------------------------------- */ @media only screen and (max-width: 767px){ .is-404 h2{ line-height: normal; } .md-tablet-only{ display: block !important; } #full-slider .max-width{ max-width: 100%; padding-left: 35px; padding-right: 35px; } #full-slider ul.slick-dots{ bottom: 100px; } #slide-pause-wrap{ top: 12px; z-index: 9; left: 5px; } .play-btn.play-btn-small, .play-btn.play-btn-small:hover{ transform: scale(0.3); -ms-transform: scale(0.3); -webkit-transform: scale(0.3); } .product-set img.pv-image{ max-height: 100%; width: auto; max-width: 100%; } .product-catalogue aside, #full-width-img-wrap{ display: none; } #product-grid{ width: 100%; } .product-set .bgimg{ background-size: contain !important; } .full-slider-wrap .overlay{ height: 70px; } .slider-nav{ display: none; } #product-main-details #full-width-img + div.bgimg{ display: block; } #header-top-bar .container a i { font-size: 18px; margin-right: 0; margin-left: 15px; } #header-top-bar .col-lg-12 div.right{ top: 50%; position: absolute; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); right: 15px; } #header-top-bar div.right .profile-nav{ right: -15px; min-width: 250px; max-width: 100%; } .short-banner h1 { font-size: 50px; } .menu-text, .hide-in-sm-tablet{ display: none; } #hamburger-wrapper { margin-left: 15px; } #footer-socials .desc{ padding: 0; } #footer-socials .newsletter h2{ font-size: 1.25em; padding-top: 25px; } .home #content{ padding-bottom: 0; } #home-feature-category h1{ font-size: 46px; } .rf-layout.rf-two-col h2{ margin-top: 20px; } #rider-twitter-feed .bgimg, #rider-facebook-feed .bgimg{ display: none; } #rider-twitter-feed li { height: auto; } #rider-twitter-feed .col-sm-10{ padding-left: 0; left: 0; position: relative; top: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } #full-slider, .full-slider-wrap{ max-height: 342px; } #full-slider div.wrap{ position: relative; top: 0; -webkit-transform: none; -ms-transform: none; transform: none; padding: 30px 0; max-width: 100%; } #full-slider .md-tablet-only h2{ font-size: 16px; } #full-slider .md-tablet-only h2 strong{ font-size: 45px; display: block; /*margin-bottom: 30px;*/ line-height: 32pt; margin-bottom: 0; } #full-slider .full-slider-title.desc{ padding: 0 15px; color: #fff !important; font-family: 'tradegothic18', Helvetica, Arial, sans-serif; display:none; } #full-slider .full-slider-title.desc p{ text-align: center !important; } #full-slider .full-slider-title.desc strong{ font-size: inherit; line-height: normal; display: inline; margin: 0; } #full-slider .full-slider-desc{ text-transform: uppercase; padding: 15px; color: #a7a9ac; display:none; } #full-slider .full-slider-desc p{ text-align: center !important; } #full-slider .btn{ margin: 0 0 10px; } #full-slider .arrow-down{ display: none; } #full-slider .bgimg{ height: 250px; } #full-slider.slick-slider .slick-prev, #full-slider.slick-slider .slick-next{ top: 55%; } #full-slider .slick-prev{ left: 15px; } #full-slider .slick-next{ right: 15px; } .slick-slider .slick-prev, .slick-slider .slick-next { top:25%; } /*#full-slider.slick-slider .slick-prev, #full-slider.slick-slider .slick-next { top:65%; }*/ #full-slider .header-wrap.md-tablet-only{ position: absolute; top: 24px; padding: 20px; width: 100vw; } #product-main-details{ min-height: 0; } #home-feature-articles{ padding: 0; } #home-feature-articles img.left, #home-feature-articles div.left{ float: none; width: 100%; text-align: center; } #home-feature-articles div.left{ padding-right: 3.5%; padding-left: 3.5%; box-sizing: border-box; margin: 0; } #home-feature-articles h2{ margin-top: 25px; text-align: left; } #home-feature-articles .desc{ text-align: left; } #home-feature-articles .btn{ margin: 20px 0 40px; } #home-feature-articles .rf-layout{ margin-bottom: 0; } #home-feature-articles + div{ display: none; } .rf-two-col article img{ /*margin-bottom: 30px;*/ margin-bottom: 5px; } .rf-full-slider .bgimg, .sub-slick-gallery .bgimg{ height: 480px; } .rf-full-slider .bgimg + .vcenter .iframe-html, .sub-slick-gallery .bgimg + .vcenter .iframe-html{ height: 100% !important; /*min-height: 320px;*/ } #map{ position: relative; } .googlemap-results #distributor-container .location { min-height: 110px; } #product-main-details .border{ width: 100%; } .social-sharing .right{ float: left; } .product-details .social-sharing a{ margin-left: 0; margin-right: 15px; } aside.locations{ margin-top: 20px; } .slick-slider.dd-slick-slider .slick-prev, .slick-slider.dd-slick-slider .slick-next{ top: 320px; } /*.tabs article.item, #product-reviews .pl40.pr40, #related-products .pl40.pr40{ padding-left: 15px; padding-right: 15px; }*/ .pdf-set a{ display: block; max-width: 450px; min-height: inherit; margin-bottom: 30px; } .pdf-set h4.tl{ text-align: center; } .a-rider{ width: 100% !important; } #search-results .bgimg{ margin-bottom: 30px; } #by-builtfor li:nth-of-type(3n+1), #by-builtfor li:nth-of-type(3n){ width: auto; } #warranty-form .form-label, #contact-form .form-label{ top: auto; } #warranty-form .radio+.radio, #contact-form .radio+.radio, #warranty-form .checkbox, #warranty-form .radio, #contact-form .checkbox, #contact-form .radio, #support-type-options .checkbox + .checkbox{ margin-top: 0; margin-bottom: 0; } form .date .col-sm-4, form .phone .col-sm-4 { margin-right: 2%; } form label[for="recurring-first-time"]{ top: 69px; } #page.product-details.full-width-img{ background: none !important; } .checkout-cart .promocode-row .col-sm-6{ display: block; padding-right: 15px; } .checkout-go-back{ position: absolute; top: 60px; } #product-grid .colour-set{ float: none; } #product-grid .colour-set span:last-of-type{ margin-right: 0; } #related-products .col-sm-3{ max-width:305px; margin: 0 auto; display:block; float:none; } #page.cart .checkout-cart-table .attributes, #cart.checkout-cart-table{ font-size: 13px; } #page.cart .checkout-cart-table td:first-of-type{ width: 20%; min-width: 100px; } /* #page #product-options-popup .stock-lvl{ display: none; }*/ .order.products-table .col-sm-offset-8{ margin: 0; } .promocode-row { margin-top: 0; } .calculation{ margin: 40px auto 0; border-top: 2px solid #414143; padding: 40px 0 10px; width: 100%; } .calculation > div{ float: right; clear: right; } .order.products-table .col-sm-offset-8 .subtotal{ margin-right: 15px; } .calc-total h4{ margin-right: 0; } .review-row .alpha, .review-row .omega{ padding-left: 15px; padding-right: 15px; } #product-options-popup th.colour-set { min-width: 65px; } .short-banner.long-banner > div{ max-height: 220px; } } @media only screen and (max-width: 640px){ .sm-tablet-only{ display: block; } .sm-tablet-hide{ display: none; } .checkout-cart-table th.quantity { min-width: 40px; } .checkout-cart-table th.total { min-width: 50px; } .product-opts-head h2{ font-size: 15px; margin: 0; } .product-opts-head h2 + .btn-close{ font-size: 16px; position: relative; bottom: 4px; } #product-options-popup table, #product-options-popup .btn{ font-size: 11px; } /* #product-options-popup .colour-set p, #product-options-popup .attr-description{ display: none; }*/ #product-options-popup .continue{ margin: 0; } #product-main-details .colour-set, #product-main-details .size-options{ width: 100%; } #cart + .pull-right{ width: 100%; } #cart + .pull-right a{ width: 100%; margin-bottom: 20px; } #cart + .pull-right button{ width: 100%; margin: 0; } #checkout-progress{ display: none; } #footer-socials .interest-group > div.left div.checkbox{ width: auto !important; float: none; } #footer-socials div.interest-group > div.left{ width: 48%; } #footer-socials div.interest-group > div.left:last-of-type{ width: 52%; } .riders-info h4 span{ display: none; } .riders-info h4 i.fa{ margin-right: 0; font-size: 120%; } .rf-three-col table td{ width: 100% !important; padding: 0 !important; display: block; } .order-history .accordion.tabs li h4{ margin-right: 10px; font-size: 14px; } .order-history .accordion.tabs table img{ max-width: 60px; } .order-history .panel-question .fa { font-size: 16px; top: 9px; } #cart.checkout-cart-table th:first-of-type, #cart.checkout-cart-table td:first-of-type{ display: none; } #page #cart.checkout-cart-table th:nth-of-type(2), #page #cart.checkout-cart-table td:nth-of-type(2){ padding-left: 0; } #product-options-popup .btn { min-width: 0; width: 75px; } #product-options-popup .btn.continue{ width: 122px; } } @media only screen and (max-width: 574px){ #full-slider .md-tablet-only .btext{ font-size: 20px; } .tile:nth-child(4), .tile:nth-child(6){ width: 250px; /*margin-bottom: 30px;*/ border: none; } .masonry div.tile, .masonry div.tile.large{ width: 250px; } .order-history .cart.products-table .table tr th{ padding: 0 0 0 2%; } .rf-layout.rf-full-bg{ display: none; } #addressForm .checkbox label, #addressForm .radio label{ padding-left: 2%; margin-left: 0; font-size: 13px; } .technical-specs table td{ padding: 5px 5px 5px 0; } #product-options-popup th.unit-price{ min-width: 40px; padding-right: 5%; } #product-main-details .bgimg{ background-size: contain !important; max-height: 250px; } } /* mobile (portrait) -------------------------------------------------- */ @media only screen and (max-width: 479px){ #full-slider .btn{ font-size: 13px; min-width: 120px; } #full-slider .max-width{ padding-left: 5px; padding-right: 5px; } #full-slider .tleft + .max-width{ padding-left: 35px; } #full-slider .tright + .max-width{ padding-right: 35px; } #page.cart .checkout-cart-table td:nth-of-type(2) { padding: 0 5% 0 25px; padding-left: 0; } .checkout-cart-table th, .checkout-cart-table tfoot td { padding: 5px 4% 5px 0; } .total-items{ padding: 0; } #header-top-bar .user-fname{ display: none; } .tabs article.item { padding: 40px 0; } } /* mobile (landscape) -------------------------------------------------- */ @media only screen and (min-width: 480px) and (max-width: 767px) { } @media only screen and (max-width: 400px){ #footer-nav-tablet .col-sm-5, #footer-nav-tablet .col-sm-7{ float: none; text-align: center; margin-bottom: 10px; } #footer-nav-tablet .col-sm-5 a:first-of-type{ margin-left: 0; } .review-row h6{ margin-top: 30px; } } @media only screen and (max-width: 275px){ #full-slider a.btn.is-hidden{ display: none !important; } } #mini-cart-count{ display:inline; } .fancybox-skin{background-color:#FFF;} .fancybox-inner{color:#000;} #error-message{color:#FFF;}