body { font-family: 'Poppins', sans-serif; background: #fff; }
main { min-height: 65vh; }

.CAblue {color:#5c8fc6;}
.CAblue_bg {background-color:#5c8fc6;}
.CAorange {color:#e3a842;}
.CAorange_bg {background-color:#e3a842;}
.white {color:#fff;}
.white_bg {color:#fff;}
.black {color:#000;}
.black_bg {color:#000;}

#wrapper { position: relative; left: 0 }
#mobNav { position: fixed; width: 260px; right: -260px; top: 0; bottom: 0; z-index: 1000; background: #5c8fc6; box-shadow: 0 0 20px rgba(0,0,0,.3) }
#navBtn { position: absolute; left: -50px; top: 125px; padding: 4px 8px; border-radius: 2px; font-size: 26px; color: #fff; cursor: pointer; background:rgba(100,0,0,0.2); }
#navBtn:hover { transform: scale(1.05) }
@media (max-width: 992px) { 
	#topNav {padding:0!important;}
    .midNav .social {margin-top: -20px; padding-bottom: 10px;}
    #topNav li {display: none!important;}
}
.siteSearch { z-index: 100; width: 100%; position: relative }
.siteSearch .fa-search { position: absolute; top: 6px; left: 8px; color: #fff; font-size: 23px }
.siteSearch .fa-times-circle { position: absolute; top: 4px; right: 6px; cursor: pointer; font-size: 26px; color: #fff }
.siteSearch .fa-times-circle:hover { color: #000 }
.siteSearch input { max-width: 100%!important; width: 100%; padding: 8px 20px 8px 35px!important; color: #fff; outline: 0; border: none; border-radius: 0; background: #000 }
.siteSearch input:focus { outline: 0!important; border: none; box-shadow: none; background: #1a339a }
.mobNavOn { right: 0!important }
.wrapperOn { left: -260px!important }
#mobNav .nav_first { padding-bottom: 100px; min-width: 110%; display: block; max-height: 100vh; overflow-y: auto; text-align: left; }
#mobNav .nav_first>li>a { font-size: 16px; width: 100%; display: block; color: #ddd; padding: 5px 10px 5px 5px; border-top: 1px solid rgba(255,255,255,.05); font-weight: 300; background-color: #5c8fc6; }
#mobNav .nav_first>li>a:hover { color: #fff }
#mobNav .nav_first>li>.staticNav { position: relative }
#mobNav .nav_first>li>a:before { content: "\f105"; padding-left: 5px; font-family: fontAwesome; width: 20px; display: inline-block; color: #fff; }
#mobNav .nav_first>li>a.navOpen:before { content: "\f107" }
#mobNav .nav_second>li>a { padding: 5px 5px 0 30px; margin-bottom: 5px; line-height: 1.2; display: block; width: 100%; position: relative; color: #ddd; color: rgba(255,255,255,.6); font-size: 14px }
#mobNav .nav_second>li>a:before { position: absolute; content: ">"; left: 14px; color: rgba(255,255,255,.2); transition: all .3s ease-in-out }
#mobNav .nav_second>li>a:hover { padding-left: 40px }
#mobNav .nav_second>li>a:hover:before { left: 24px; color: #fff }
#mobNav .nav_third>li>a { padding: 10px 5px 0 45px; margin-top: 2px; margin-bottom: 3px; line-height: .8; display: block; width: 100%; position: relative; color: #ddd; color: rgba(255,255,255,.6); font-size: 13px }
#mobNav .nav_third>li>a:before { position: absolute; content: ">"; left: 30px; color: rgba(255,255,255,.2); transition: all .3s ease-in-out }
#mobNav .nav_third>li>a:hover { padding-left: 55px }
#mobNav .nav_third>li>a:hover:before { left: 43px; color: #fff }
#mobNav .nav_fourth>li>a { padding: 10px 5px 0 55px; margin-bottom: -3px; line-height: 1.2; display: block; width: 100%; position: relative; color: #ddd; color: rgba(255,255,255,.6); font-size: 12px }
#mobNav .nav_fourth>li>a:before { position: absolute; content: ">"; left: 44px; color: rgba(255,255,255,.2); transition: all .3s ease-in-out }
#mobNav .nav_fourth>li>a:hover { padding-left: 65px }
#mobNav .nav_fourth>li>a:hover:before { left: 55px; color: #fff }
.nav_second .staticNav { color: #ddd!important }
.nav_third .staticNav { color: #ddd!important }
.nav_second .staticNav:before,.nav_third .staticNav:before { content: " "!important }
#topNav .noTopNav { display: none!important }
#mobNav .firstItem { border-bottom: 0!important }
#mobNav .firstItem>.nav_second { display: block!important; padding-bottom: 5px }
#searchResults { background: #515457; position: relative; z-index: 999 }
#searchResults li { color: #999; font-weight: 100; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; padding: 6px 10px 6px 30px; border-bottom: 1px solid rgba(255,255,255,.1) }
#searchResults li a { color: #fff; font-weight: 200; font-size: 14px }
#searchResults li:hover { background-color: #1a339a }
#searchResults .search_News:before { position: absolute; content: "\f1ea"; color: #1a339a; left: 6px; top: 5px; font-size: 16px; font-family: fontAwesome }
#searchResults .search_Navigation:before { position: absolute; content: "\f054"; color: #ddd; left: 10px; top: 5px; font-size: 16px; font-family: fontAwesome }
#searchResults .selected { background-color: #46a446 }
a,body,div,h1,h2,h3,h4,h5,input,li,p,select,span,strong { font-family: 'Poppins', sans-serif; line-height: 1.3 }

header { padding: 5px 0 0 0; background:#fff; min-height: 100px; border-bottom:solid 5px #e3a842; }

header .logo {background:url(files/image/cycleAshford_final.png) no-repeat 50% 50%;background-size:contain;width:160px;height: 70px; position:absolute; top:5px; left:0; }
.btn { text-shadow: 0 1px 0 rgba(0,0,0,.5); white-space: nowrap; cursor: pointer; position: relative; font-weight: 500; color: #fff; font-size: 16px; padding: 1px 18px; border-top: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 -10px 20px rgba(0,0,0,.3); display: inline-block; margin: 10px; border-radius: 4px }
.btn:before { position: absolute; content: ""; z-index: -1; border-radius: 6px; width: 104%; height: 112%; box-shadow: inset 0 10px 20px rgba(0,0,0,.3); background: inherit; left: -2%; top: -6% }
.btn:after { position: absolute; content: ""; z-index: -2; border-radius: 6px; width: 90%; height: 100%; box-shadow: 0 2px 10px 3px rgba(0,0,50,.5); background: inherit; left: 6%; top: 0 }
.btn:active { -webkit-transform: scale(.95); -moz-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95) }
.btn:hover { background: #1a339a }
#breadcrumbs { background-color: #fff; padding: 12px 0; border-top: 1px solid #eee; font-size: 9px; white-space: nowrap; color: #444; overflow: auto }
#breadcrumbs a { color: #444; font-weight: 300; font-size: 13px; padding: 0 10px 0 5px }
#breadcrumbs a:hover { text-decoration: underline }
#breadcrumbs .col-xs-12:before { content: "You are here: "; display: inline-block; padding-right: 10px; font-size: 12px; color: #666; font-weight: 200; font-style: italic }
#topNav { font-size: 0; padding: 0; margin-left: -10px; }
#topNav ul {padding-top: 28px;}
#topNav .noTopNav { display: none }
#topNav ul {text-align: right !important;}
#topNav li { display: inline-block; padding: 8px 16px 8px 16px; position:relative;  transition:all 2s linear;  }
#topNav li a { color: #5c8fc6; font-weight: 300; font-size: 16px; transition:all 2s linear; }

#topNav li.selected {background-color:#e3a842;}
#topNav li:hover { color:#e3a842; }
#topNav li.selected a {color:#fff;}
#topNav li.selected:hover a {  color:#fff; }

.firstItem { background:#e3a842; border-radius:12px 12px 0 0; box-shadow:inset 0 -5px 5px rgba(0,0,0,0.1);}
.firstItem a { color: #fff!important; }
#megaMenu { position: absolute; width: 100%; z-index: 999; top: 134px }
.megaMenuPanel { padding: 30px 0 14px 0; height: auto; position: relative }

.newsCategory { font-size: 36px; color: #444; font-weight: 300; padding: 10px 0 10px 0; overflow: hidden; text-align: center }
.newsCategory h2 { font-weight: 100; position: relative; display: inline-block }
@media(max-width: 480px) { .newsCategory h2 { font-size:22px; padding-right: 0;}
    .content h2 {font-size: 20px !Important;}
}
.newsCategory h2 span { position: absolute; opacity: .1; transform: scaleY(-1); left: 0; bottom: -27px; font-weight: inherit!important }
.newsStoryImg { position: relative; padding: 20px; background: #5c8fc6; overflow: hidden; max-height: 600px }
.newsStoryImg span { position: absolute; z-index: 0; opacity: .4; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-size: cover; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); background-position: 50% 50% }
.newsStory { padding: 20px 5px }
.newsStoryImg p { position: relative; z-index: 10 }
.newsStoryImg img { border: 2px solid #fff; width: 100%; max-width: 992px }
.newsStory p { font-size: 15px; color: #111; margin-bottom: 10px; line-height: 1.8 }
.newsStory h2 { font-size: 24px; margin-bottom: 12px; color: #ddd }
#newsStoryShell { background: rgba(255,255,255,1) }
#newsStoryShell h1 { font-size: 32px; color: #333; font-weight: 300; text-align: center; font-size: 36px!important; margin: 20px 0 }
.newsStory li a,.newsStory p a { color: #1a339a; font-weight: 600 }
.newsStory p a:hover { color: #000 }
.newsStory sup { font-size: 50%; display: inline-block; vertical-align: top; padding-top: 5px; padding-right: 2px }
@media (max-width: 768px) { 
	#newsStoryShell h1 { font-size:24px!important; margin-bottom: 25px; }
}
@media (max-width: 992px) { 
	.newsStoryImg { margin-top:25px; position: relative; overflow: visible;}
    .newsStoryImg:before { content: ""; position: absolute; top: -66px; left: -25%; width: 150%; height: 66px; background: rgba(255,255,255,.9);}
}
#newsStoryShell time { text-align: right; display: block; margin-top: -20px }
.newsPanel { background: #fff; border: 1px solid #eee; border-radius: 3px; padding: 15px; margin: 10px 0 }
.newsPanel a { color: inherit }
.newsPanel:hover { border-color: #e9b428; }
.newsPanel .newsNanoImage,.newsPanel iframe { width: 100%; height: 220px!important; background-size: cover }
.newsPanel .newsTitle { margin: 15px 0 10px 0; font-size: 24px; color: #003b4f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.newsNanoDate { font-size: 11px!important; margin-top: 15px; margin-bottom: -20px }
.newsPanel p { overflow: hidden; width: 100%; height: 36px; font-size: 14px; color: #444; line-height: 1.4 }
.newsShortDesc:after { content: " [ read more ]"; color: red; margin-left: 5px; font-size: 75%; cursor: pointer }
.newsStory ol li { margin-left: 25px; font-size: 14px; padding-left: 10px; list-style-type: decimal; margin-bottom: 12px }
.newsGridHeader { padding: 25px 0 0 0 }
.newsGridHeader h2 { font-size: 32px!important; color: #003b4f }
.newsPanelWide .newsNanoImage { height: auto!important; padding-top: 35%; background-repeat: no-repeat; background-size: cover!important; background-position: 50% }
.newsPanelWide .newsTitle { height: 50px; overflow: hidden; text-overflow: none; white-space: normal }
.newsPanelWide p { height: 40px; margin-bottom: 6px }
.newsPanelWide p.newsNanoDate { height: 20px }

#toolTip { position: fixed; text-align: center; z-index: 10000; line-height: 1.3; padding: 5px 8px; font-size: 13px; border-radius: 3px; color: #fff; box-shadow: 2px 10px 10px rgba(0,0,0,.2); background: #222; left: -1000px; top: -1000px; max-width: 200px; pointer-events: none }

#toolTip:after { content: "\f0d7"; font-size: 20px; position: absolute; font-family: fontAwesome; bottom: -16px; left: 49%; text-shadow: 0 6px 3px rgba(0,0,0,.1); color: #222 }

.content { padding-bottom: 0 }
.content p { font-size: 16px; line-height: 1.8; margin-bottom: 8px; font-weight: 300 }
.content li a,.content p a { color: #1a339a; font-weight: 500 }
.content li a:hover,.content p a:hover { color: #000; text-decoration: underline }
.content blockquote { margin: 0 30px 20px 30px; text-align: center; position: relative; color: #ddd; font-size: 14px; line-height: 1.5; font-weight: 300 }
.content ul { margin-bottom: 10px }
.content blockquote:after,.content blockquote:before { position: absolute; font-family: Impact,Arial; color: red; font-size: 60px }
.content blockquote:before { content: "?"; left: -30px; top: -18px }
.content blockquote:after { content: "?"; right: -30px; bottom: -50px }
.content .fa-ul i { color: #09f }
.content ul li:before { position: absolute; content: "\f054"; color: #6cba5a; font-family: fontAwesome; left: 10px; top: 0 }
.content ul li { font-weight: 300; line-height: 1.4; margin-bottom: 6px; list-style-type: none; color: #111; position: relative; padding-left: 30px; margin-bottom: 5px; line-height: 1.8 }
.content h2 { color: #e3a842; font-size: 22px; font-weight: 400; margin-bottom: 12px }
.content strong {font-family:inherit !important;}
.content h3 { color: #444; font-size: 20px; font-weight: 400; margin-bottom: 12px }
.content h2 i { font-size: 75%; color: #666; display: inline-block; padding-right: 6px; position: relative; top: -2px }
.content h1 { font-size: 32px }

.formOptins { margin: 10px 0 }
.formOptins label { font-size: 12px; color: #444; font-weight: 200; position: relative; padding-left: 25px; line-height: 1.3; margin-bottom: 5px; display: inline-block; width: 100% }
.formOptins label input[type=checkbox] { position: absolute; left: 0; top: -2px }

.forms select { width: 100%; max-width: 320px; height: 26px; font-size: 16px; color: #444; margin: 3px 0 }

.error404 { transition: all 4s ease-out; transform: scale(.5); max-width: 300px; width: 100%; background: rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,.3); padding: 10px 25px; border: 6px solid #1a339a; position: absolute; margin-top: 15%; left: 50%; margin-left: -150px; z-index: 100 }
.error404 h1 { font-size: 48px; letter-spacing: 1px; color: #1a339a }
.error404 h2 { font-size: 20px; letter-spacing: 1px; color: #444 }
.error404 p { font-size: 11px; margin-top: 10px }
.error404 p a { color: #1a339a; font-weight: 700 }
.error404grow { transform: scale(1.1)!important }

@media(min-width: 992px) { #navBtn {display:none;} }
@media(max-width: 992px) { 
	#navBtn { top:32px!important;}
    header .logo { /* max-height: 50px!important; */
    margin-bottom: 20px; }
    .pageHeader h1 { font-size: 36px; padding-left: 0;}
    .content h2 { font-size: 28px;}
    #breadcrumbs { display: none;}
}

.inputWrap { position: relative; display: block; margin: 2px 0; overflow: hidden }
.inputWrap.wrapLeft input { padding-left: 50px!important; margin: 0!important }
.inputWrap.wrapRight input { padding-right: 50px!important; margin: 0!important }
.inputWrap i.wrapLeft { position: absolute; left: 11px; top: 4px; font-size: 20px; text-shadow: 0 1px 2px #fff; color: #555 }
.inputWrap i.wrapRight { position: absolute; right: 11px; top: 4px; font-size: 20px; text-shadow: 0 1px 2px #fff; color: #555 }
.inputWrap.wrapLeft:before { position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; background: #eee; width: 38px; border-radius: 3px 0 0 3px; border-right: 1px solid #ccc; box-shadow: 1px 0 2px rgba(0,0,0,.1) }
.inputWrap.wrapRight:after { position: absolute; top: 1px; right: 1px; bottom: 1px; content: ""; background: #eee; width: 38px; border-radius: 3px 0 0 3px; border-left: 1px solid #ccc; box-shadow: -1px 0 2px rgba(0,0,0,.1) }
#rgeWrapper .newsStory { background: #fff }
#rgeWrapper .faq div { display: block!important }
#rgeWrapper #modal { position: relative!important }
#rgeWrapper .shrunk { opacity: 1!important }

.developerFilters { background: #f5f5f5; text-align: center; padding: 0 0 5px 0; margin: 0 0 20px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd }
.developerFilters label { font-size: 12px; font-weight: 100; display: inline-block; padding: 0 5px 0 5px; position: relative; top: 2px; vertical-align: bottom }
.developerFilters input[type=text] { border: 1px solid #ddd; font-size: 16px; padding: 2px 10px; font-weight: 200; margin-left: 2px; border-radius: 2px }
.developerFilters select { height: 26px; font-size: 14px; font-weight: 200 }
.developerFilters input[type=submit] { display: inline-block; font-size: 16px; border-radius: 4px; margin-left: 10px; height: 28px; vertical-align: bottom; position: relative; top: 3px; padding: 2px 12px; border: 1px solid #ddd; font-weight: 200; background: #1a339a; color: #fff }
.developerPaging a { border: 1px solid #ddd; border-radius: 4px; min-width: 25px; height: 25px; display: inline-block; padding: 2px; text-align: center; font-weight: 100; margin: 0 5px 20px 5px; text-shadow: 1px 1px 0 rgba(0,0,0,.2) }
.developerPaging .pagingLess,.developerPaging .pagingMore { border: none!important }
.developerPaging .pagingCurrent { background: #0480d4; color: #fff }


@media(max-width: 480px) { #mobNav { width:100%; right: -100%;}
.siteSearch input { padding-left: 70px!important; top: -3px; position: relative;}
.siteSearch .fa-search { left: 45px; top: 5px; z-index: 300; color: #666;}
.wrapperOn #navBtn { left: 0; z-index: 200; top: 2px!important;}
.wrapperOn #accountStrap,.wrapperOn footer,.wrapperOn header,.wrapperOn main { display: none;}
.wrapperOn { background: #000!important;} }	
.shadow { background: -moz-linear-gradient(180deg,rgba(0,0,0,.31836484593837533) 0,rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(180deg,rgba(0,0,0,.31836484593837533) 0,rgba(0,0,0,0) 100%); background: linear-gradient(180deg,rgba(0,0,0,.31836484593837533) 0,rgba(0,0,0,0) 100%); height: 10px }


/* Anims*/
.scrolling {position:relative; transition:all 1s ease-in-out;}
.showStatic {opacity:1; left:0; top:0;}
@media(min-width:768px){
.inFromLeft {left:-50px; opacity:0;}
.inFromTop {top:-50px; opacity:0;}
.inFromBottom {top:50px; opacity:0;}
.inFromRight {left:50px; opacity:0;} }
span[data-id] {font-size: 10px; padding-top: 3px; text-align:center;}
 #rgeWrapper .inFromLeft,  #rgeWrapper .inFromRight,  #rgeWrapper .inFromTop,  #rgeWrapper .inFromBottom {opacity:1;}


/*HOME SLIDER*/
.homeSlider {position:relative; background:#000;}
.homeSlider ul.slides {padding-top: 40%;}
.homeSlider .slides li {position:absolute; top:0; left:0; text-align:center; width:100%; height: 100%; overflow:hidden;}
.homeSlider .slides li span {position:absolute; top:0; left:0; text-align:center; width:100%; height: 100%; background-size:cover; background-position:50% 50%;}
.homeSlider .slides li h2, .homeSlider li img, .homeSlider li a, .homeSlider li p  {position:relative; z-index:10;}
.homeSlider .slides li h2 {color:#fff; font-size: 28px; margin: 15px 0; opacity:0.8;}
.homeSlider .slides li a {border-radius: 2px; background:#fff; color:orange !important; border:none; font-weight: 300 !important; padding: 10px 40px; transition:all 0.2s ease-in-out;}
.homeSlider .slides li a:hover {color:#fff !important; background:red;}
.homeSlider .slides li .row>div {position: absolute;height: 100%;background:rgba(0,0,0,0.3);display: flex;align-items: center;}
@media(max-width:960px){
 .homeSlider ul.slides {padding-top: 50%;}
 .homeSlider .slides li img {max-width: 200px !important;}
 .homeSlider .slides li h2 {font-size: 18px;} 
}
.homeSlider .dots {position:absolute; bottom: 40px; width:100%; left:0; text-align:center;}
.homeSlider .dots span {height: 16px; width: 16px; display:inline-block; border-radius: 16px; border:3px solid #fff; margin:0 5px; background:#fff; }
.homeSlider .dots span.selected {background:#5c8fc6;}

.picZoom {position:relative; padding-top: 40%; overflow:hidden;}
.picZoom span {position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover !important; background-position:50% 50% !important; }
.picZoom:hover span {transform:scale(1.1);}
.learnMore {padding: 10px 20px 8px 20px; color:#fff; display:inline-block; background:#6cba5a; border-radius: 3px; margin:10px 0; transition:all 0.5s ease-in-out;}
.learnMore:hover {background:#000;}
@media(max-width:768px){.hideXS {display:none;}}
@media(max-width:960px){.hideSM {display:none;}}





/*CA FOOTER */

footer {overflow:hidden;max-width:100%;}
#footerSlant {height: 100px; overflow:hidden !important; position:relative;}
#footerSlant:before {content:""; width: 110%; background:#fff url(files/image/cycllists_orange.png) no-repeat calc(100% - 200px) 16px / 230px; height: 100px; border-bottom: 10px solid #e4ab43; position:absolute; top:-40px; left:-10px; transform:rotate(1.9deg); transform-origin:0 0;}
.footerSlantExt {position:relative;}
.footerSlantExt:before {content:""; position:absolute; z-index:10; background:#fff; width: 100%; height: 60px; top:0; border-bottom:10px solid #e4ab43; left:-100%;}
.footerSlantExt:after {content:""; position:absolute; z-index:10; background:#fff; width: 100%; height: 100px; top:0; border-bottom:10px solid #e4ab43; left:100%;}
.footerNote {font-size: 14px; color:#666; padding: 10px 5px;}

footer h3 {font-size: 18px; margin:0;}
footer li { font-size: 14px; padding: 2px 0; color: #fff; }
footer ul { margin: 0 0 20px 0; }
footer li a { color: #fff; }
footer li a:before {content:"• ";}
footer li a:hover { color: #000; }
.footerLogo {margin-top:-18px;}
footer .social {margin-top: 15px;}
footer .social i {font-size: 32px; margin-right: 5px;}

.slantWhiteLeft {height: 100px; overflow:hidden !important; position:relative;}
.slantWhiteLeft:before {content:""; width: 110%; background:#fff; height: 100px; position:absolute; top:-66px; left:-10px; transform:rotate(-1.9deg); transform-origin:0 0;}

.slantBlackRight {position:absolute;bottom: -78px;height: 100px;overflow:hidden !important; width: 110%;}
.slantBlackRight:before {content:""; width: 110%;background:#000 url(files/image/cyclists_white.png) no-repeat calc(20px) 50px / 160px; height: 99px; position:absolute; top:-40px; left:-10px; transform:rotate(-1.9deg); transform-origin:0 0;}

.slantWhiteLeftExtra {position:relative;}
.slantWhiteLeftExtra:before {content:""; position:absolute; width: 100%; top:0; height:  34px; background:#fff; z-index:20; left:-100%;}
.slantWhiteLeftExtra:after {content:""; position:absolute; width: 100%; top:100%; height: 37px; background:#000; z-index:20; left:-100%;}

.slantWhiteLeftExtra button {margin-bottom:50px; padding: 12px 30px;border:none; font-size: 28px; font-weight:bold; border-radius: 32px; margin-top: 20px; cursor:pointer; }

.slantHeader {background:#e3a842; color:#fff; padding-top: 20px; position:relative; margin-bottom: 80px;}
.slantHeader .contained {position:relative; padding:0 !important;}
.slantHeader h1 {font-size: 32px;}
.slantHeaderExt {position:absolute; height:40px; bottom:0; width:100%; bottom:-40px; overflow:hidden;}
.slantHeaderExt:before {content:""; position:absolute; left:-10px; top:-26px; width:110%; height: 42px; background:#e3a842; transform:rotate(-2deg);}
.slantHeader .contained:before {content:"xxx"; position:absolute; left:-100%; bottom:-39px; width:100%; height: 50px; background:#e3a842; z-index:100;}

.homeInteractive h2 {color:#fff; font-size: 36px; font-weight:bold;}
.homeInteractive h3 {color:#fff; font-weight:bold; position:relative; padding-left: 50px; margin-top: 20px;}
.homeInteractive h3 img {position:absolute; lefT:0; width: 40px; top:-6px;}

.homeSliderSlant {height:44px; background:url(files/image/homeSliderSlant.png) no-repeat 50% 0; position:relative; margin-top:-44px; z-index:30;}


.myBike {background:url(files/image/paris_rider2.jpg) no-repeat 50% 50% / cover; padding-top:0 !important}
.myBike .row {padding:20px 0 50px 0;}
.myBike .col-xs-12 {padding:100px 0 60px 0;}
.myBike .row .col-xs-12:nth-of-type(3) {background:rgba(255,255,255,0.5); border-radius: 20px;}
.myBike .row .col-xs-12:nth-of-type(3) p {padding:0 30px 30px 30px; line-height: 1.6;}
.myBike h2 {color:#fff; font-weight:900; font-size:32px;}
.myBike h3 {color:#fff; font-weight:500; font-size:22px; margin-top: 200px;}

.homeIntro h3 {font-size: 24px; line-height: 1.5;}
.homeIntro p b {font-weight: 600;}
.introStart {font-size: 20px;}
.introStart b {font-size: 22px; display:inline-block; margin-bottom: 5px;}
.introStart span {font-weight:600;}

.serviceBoxes {margin: 50px 0; padding:0 25px;}
.serviceBox {border:6px solid #e3a842; border-radius: 8px; margin-bottom:20px; }
.serviceBox>div {overflow:hidden; position:relative; padding-top: 50%;}
.serviceBox h4 {font-size: 20px; background:#e3a842; color:#fff; padding: 5px 10px 12px 10px; font-weight: 600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.serviceBox>div span {position:absolute; left:0; top:0; width:100%; height: 100%; background-position: 50% 50%; background-size: cover; transition:all 0.5s ease-in-out; transform:scale(1);}
.serviceBox:hover span {transform:scale(1.1);}

.serviceListBox {padding: 15px; border:1px solid #ddd; box-shadow:0 0 20px rgba(0,0,0,0.2); min-height: 100px; margin-bottom: 20px; position:relative;}
.serviceListBox h3 {color:orange; font-size: 24px; padding-right: 120px;}
.serviceListBox p {padding-right: 120px;}
.serviceListBox img {width:120px; position:absolute; right: 10px; top:10px;}
.serviceListBox button {background:#5c8fc6; border:none; border-radius: 32px; font-size: 18px; color:#fff; padding: 6px 20px;}
.serviceListBox button a {color:#fff;}

@media(max-width: 1200px) { 
    footer .contained {}
    #footerSlant,.slantWhiteLeft {margin:0 -20px;}
    .slantHeader h1 {padding-left: 20px;}
    .slantBlackRight {left:-0px; width:100%;}
}
@media(max-width: 1100px) { 
    #footerSlant:before { background:#fff url(files/image/cycllists_orange.png) no-repeat calc(100% - 80px) 26px / 200px;}
    
}
@media(max-width: 768px) { 
    .footerLogo {margin-bottom:30px;}
    .social {margin:-30px 0 30px 0;}
}

@media(max-width: 900px){
.myBike {background:url(files/image/paris_rider2.jpg) no-repeat 35% 50% / cover; padding-top:0 !important}
.myBike .row {padding:10px 0 50px 0;}    
.myBike h3,.myBike h2 {margin-top: 20px; text-shadow:1px 1px 1px rgba(0,0,0,0.5);}
.myBike .row .col-xs-12:nth-of-type(1) {width: 75% !important; padding-left: 20px}
.myBike .row .col-xs-12:nth-of-type(2) {padding:0;} 
.myBike .row .col-xs-12:nth-of-type(3) {width:100%; padding:20px 0 10px 0; font-size: 13px; }
.myBike .row .col-xs-12:nth-of-type(3) p {padding:0 30px 12px 30px; line-height: 1.6;}
}