@font-face{font-family: PTSans;src: url(../fonts/PTSans.ttf);}
@font-face{font-family: PTSansB;src: url(../fonts/PTSansB.ttf);}

@font-face{font-family: PTSerif;src: url(../fonts/PTSerif.ttf);}
@font-face{font-family: PTSerifB;src: url(../fonts/PTSerifB.ttf);}

body{background:#fff;margin: 0;padding: 0;font-family: PTSans;color:#202122;font-size:19px;overflow-x:hidden;}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
h1, h2, h3, h4, h5{margin:0; padding:0; font-weight:normal; color:#2a2a2a;}
h1 {font-family: PTSerif;font-size: 43px;line-height: 45px;padding-top: 30px;background:url(../images/yellowDashLineHeading.jpg) no-repeat; background-position: top left;}
a {text-decoration:none; color:#ae0c1d; transition:all 0.3s ease-in-out;}
a:focus {outline:none;}
a:hover {transition:0.3s;cursor:pointer; color: #6797d6;}
p{margin:0; line-height:26px;margin-bottom:30px;}
hr{border-bottom: 1px solid #c2c2c2;border-top: 0;margin:0;}
.mobieView{display:none;}
.container-fluid{float:left;width:100%}
.container {width:100%;max-width:1160px;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
.container:after {clear: both;}
.row {display: flex;}
.fullWidth{float:left;width:100%;}
.text-center{text-align:center;}
ul{list-style:none; padding:0; margin: 0;}

/* Header and Navigation menu */
.topHeaderMain {position: relative;overflow-x: hidden;}
header .container{width:100%; max-width:1260px;}
.topHeader {background: linear-gradient(90deg, #fbdf37 60%, #0b0254 40%);transform: skewX(-20deg);width: calc(100% + 20px);margin-left: -10px;padding: 4px 0;}
.topHeader .container{display: flex;align-items: center;transform: skewX(20deg);}
.topLeft, .topRight{float:left; width:50%;text-align: right;}
.topLeft {font-size: 17px; color: #070707;width:60%; font-family: ptsansB; text-transform: uppercase;letter-spacing: 2px;}
.topRight, .topRight a{font-size: 25px; color: #fae239;width:40%; font-family: ptsansB; letter-spacing: 2px;}

.navMain {background: rgba(255, 255, 255, 0.7);z-index: 1;position: relative;}
.logo {margin-top: -40px;z-index: 1;position: absolute;}
.logo, .logo a, .logo img{float: left;}
#cssmenu>ul>li.tSocial {padding-top: 15px;}
#cssmenu>ul>li.tSocial a {display: inline-block;padding: 15px 4px;}
#cssmenu>ul>li {float: left;}
.tFacebook, .tTwitter{height: 45px; width: 43px;}
.tFacebook{background: url(../images/fb.png);}
.tFacebook:hover{background: url(../images/fbHover.png);}
.tTwitter{background: url(../images/twitter.png);}
.tTwitter:hover{background: url(../images/twitterHover.png);}

.mrList{display: flex;}
.mrl {width: 16.667%;float: left;position: relative;}
.mrlBg, .mrlBg img {float: left;width: 100%;}
.mrlBg img {height: 236px;object-fit: cover;object-position: center;}
.mrl span {position: absolute;display: flex;height: 100%;width: 100%;background: rgba(11, 3, 72, 0.78);justify-content: center;align-items: center;color: #fff;transition: all 0.3s ease-in-out}
.mrl .overlay {position: absolute;height: 100%;width: 100%;background: rgba(11, 3, 72, 0.78);justify-content: center;align-items: center;color: #fff;transition: all 0.3s ease-in-out}
.mrlListing .overlay {display: flex;}
.mrl .overlay div{padding-bottom: 20px;background: url(../images/yellowDashLineRides.jpg) no-repeat; background-position: bottom center;}
.mrlHeading .overlay div{font-family: PTSerif;padding-top: 20px;padding-bottom:0; background: url(../images/yellowDashLineRides.jpg) no-repeat; background-position: top left;font-size: 35px;line-height: 36px;margin-top: calc(50% - 46px);margin-left: 35px;}
.mrlListing:hover .overlay {background: transparent;}

/* Home page contents */
.homeContent{float:left;width:100%;padding-top: 50px; padding-bottom: 30px;}
.lSidebar{float:left; width: 100%; max-width: 420px;}
.rContent{float:left; width: 100%; max-width: calc(100% - 420px);}

.mBanner{height: 665px;margin-top: -75px;}
.mBannerBg{position: absolute; z-index: -1;width: 100%;}
.mBannerBg img {width: 100%;height: 665px;object-fit: cover;object-position: center;}
.springSwapMeet{float:right;height:calc(100% - 75px);width:440px;margin-top:75px;margin-right:30px;background:url(../images/springSwapMeet.png) no-repeat; background-size:100% 100%; padding-left: 50px;padding-right: 50px;padding-top: 15px;letter-spacing: 2px;}

.ssmHeading{color: #fff;font-size:48px;font-family: PTSerif;float:left;width:100%;line-height: 50px;margin-bottom: 60px;}
.ssmHeading span{font-size:72px;float:left;width:100%;line-height: 72px;}
.ssmAnniversary span, .ssmAssociation, .ssmDate, .ssmLocation{float:left;width:100%;text-transform:uppercase;font-family: ptsansB;text-align: center;}
.ssmReadMore{text-transform:uppercase;font-family: ptsansB;text-align: center;}
.ssmAnniversary{float:left;width:100%;font-family: PTSerif;color: #2d266c;font-size:63px;line-height:65px;text-transform: uppercase;text-align: center;margin-bottom:20px;}
.ssmAnniversary span{font-size:20px;line-height:20px;}
.ssmAssociation, .ssmDate{color: #191c26;font-size:23px;line-height: 25px;margin-bottom: 30px;}
.ssmLocation{color: #191c26;font-size:17px;line-height: 20px;margin-bottom: 20px;}
.ssmReadMore{color: #0b0254;font-size:19px;padding-right: 20px;background: url(../images/readMoreArrow.png) no-repeat;background-position: center right;}
.ssmReadMore:hover{color: #c8b009;background: url(../images/readMoreArrowHover.png) no-repeat;background-position: center right;}

/* Upcoming Events */
.upcomingEvent{background: url(../images/upcomingbg.jpg) no-repeat; background-position: right center; color: #fff;position: relative;}
.uceList{width:100%;height:100%;position: absolute;background: #08043f;transform: skew(-15deg, 0deg);margin-left: -50%;}
.ucelYellowBorder{background: #fbdf37; margin-right: -25px; height: calc(100% - 50px);top: 50px;width: 25px;float: right;position: absolute;right: 0;}
.uceListing {float: left;width: 45%; max-width: 360px; position: relative;padding-top: 80px;padding-bottom: 70px;}
.uceHeading{font-size: 43px;font-family: PTSerif;margin-bottom: 10px;}
.uceDetails{float:left;width:100%; padding-top: 40px;padding-bottom: 40px; background: url(../images/yellowDashLineHeading.jpg) no-repeat;background-position: bottom left;}
.uceDetails:last-child{padding-bottom: 0; background: transparent;}
.uceName a{color: #fff; font-size: 32px; line-height: 35px;}
.uceName a:hover{color: #fbdf37;}

/* Footer */
.fSections {background: #d6d6d8;text-transform: uppercase; font-family: ptsansB;padding: 50px 0 40px;}
.fTitle{font-size: 32px; color: #08043f;text-transform: initial;font-family: ptsans;margin-bottom: 10px;}
.fSec{float:left;width:100%;font-size:17px;line-height: 40px;letter-spacing: 1px;}
.fConnect{max-width:50%;}
.fAbout, .fMembership{max-width: 25%;}
.fConnect a, .fAbout a, .fMembership a{color: #202122;}
.fAbout a:hover, .fMembership a:hover{color: #0a027e;}
.fTitle, .fAddr, .fSocial, .fWebBy, .fCopyright{float:Left; width:100%;}
.fWebBy a:hover {color: #0a027e;}
.fSocial {margin: 15px 0;}
.fSocial a {float: left;margin-right: 10px;}
.fFacebook, .fTwitter{height: 45px; width: 43px;}
.fFacebook{background: url(../images/fb.png);}
.fFacebook:hover{background: url(../images/fbHover.png);}
.fTwitter{background: url(../images/twitter.png);}
.fTwitter:hover{background: url(../images/twitterHover.png);}

/* Inner Page*/
.iBanner {background: #0b0254;float:left;width:100%;margin-top: -75px;padding-top: 75px;}
.iContent h1{font-family: PTSerif;font-size: 64px;line-height: 65px; color: #fff;padding: 33px 0 33px 325px;background: transparent;}
.iContent h2{font-family: PTSerif;font-size: 43px;line-height: 45px;padding-top: 20px;margin-bottom:30px;background: url(../images/yellowDashLineHeading.jpg) no-repeat;background-position: top left;}

.services {display: flex;padding-top: 30px;padding-bottom: 30px;}
.memberRides, .upcomingEvents, .memberNews{display: flex; /* width: 33.3%; */ }
.serviceList{padding-top: 5px;padding-bottom: 5px;}
.serviceList:not(:first-child){padding-left: 50px;}
.serviceList:not(:last-child){border-right: 1px solid #ddd;}
.memberRides{}
.upcomingEvents{}
.memberNews{}
.serviceIcon{}
.servicesContent{padding-left: 35px;}
.serviceHeading{font-family: ptsansB;font-size: 23px;text-transform: uppercase;letter-spacing: 2px;color: #191c26;}
.serviceViewMore a{color:#8d8f96;font-family: ptsansB;font-size: 17px;text-transform: uppercase;letter-spacing: 2px;}
.servicesContent, .serviceHeading, .serviceViewMore {float: left;width: 100%;}

.iContent {padding-top: 30px;padding-bottom: 30px;}

.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9 {
	float: left;
	color: #000;
}
.col-md-12 {
	width: 100%;
}

.col-md-11 {
	width: 91.66666667%;
}
.col-md-10 {
	width: 83.33333333%;
}
.col-md-9 {
	width: 75%;
}
.col-md-8 {
	width: 66.66666667%;
}
.col-md-7 {
	width: 58.33333333%;
}
.col-md-6 {
	width: 50%;
}
.col-md-5 {
	width: 41.66666667%;
}
.col-md-4 {
	width: 33.33333333%;
}
.col-md-3 {
	width: 25%;
}
.col-md-2 {
	width: 16.66666667%;
}
.col-md-1 {
	width: 8.33333333%;
}

.col-md-6 a {
	color: #000;
}

.col-md-6 p {
	margin: 15px 0;
}


/* Responsive css */
@media(min-width:981px){
#nav {float: right;}
#cssmenu ul {display: inline-block !important;float:right;}
}
@media(max-width: 1260px){
header .container {max-width: 1160px;}
.iContent h1 {padding: 33px 0 33px 295px;font-size: 44px;line-height: 45px;}
}
@media(max-width: 1160px){
header .container {max-width: 1060px;}
.topHeader {background: linear-gradient(90deg, #fbdf37 65%, #0b0254 35%);}
.topLeft {width: 80%;}
#cssmenu>ul>li>a {padding: 31px 12px;}

.ssmHeading {font-size: 40px;line-height: 40px;}
.ssmHeading span {font-size: 62px;line-height: 62px;}
.ssmAnniversary {font-size: 53px;line-height: 55px;margin-bottom: 15px;}
.ssmAssociation, .ssmDate {margin-bottom: 15px;}
.mBanner, .mBannerBg img {height: 590px;}
.mrlBg img {height: 190px;}
.mrlHeading .overlay div {font-size: 28px;line-height: 30px;margin-top: calc(50% - 40px);margin-left: 30px;}

.servicesContent {padding-left: 25px;}
.serviceList:not(:first-child) {padding-left: 30px;}


}
@media(max-width: 1080px){
header .container {max-width: 980px;}
#cssmenu>ul>li>a {padding: 31px 8px;letter-spacing: 1px;}
.topHeader {background: linear-gradient(90deg, #fbdf37 70%, #0b0254 30%);}
.topLeft {letter-spacing: 1px;width: 100%;}
.topRight {letter-spacing: 1px;}

.mrlBg img {height: 160px;}
.rContent {padding-right: 15px;max-width: calc(100% - 350px);}
.lSidebar {max-width: 350px;}
h1, .iContent h2 {font-size: 33px;line-height: 35px;padding-top: 20px;}

.servicesContent {padding-left: 10px;}
.serviceList:not(:first-child) {padding-left: 15px;}
}
@media(max-width: 980px){
.mobieView{display:inline-block;}
.deskView{display:none;}
.container{width: 100%;}

.lSidebar{margin-bottom: 30px;}
.lSidebar, .rContent {max-width: 100%;}
.mrlListing .overlay div{text-align: center;line-height: 20px;font-size: 17px;}
.topRight a {width: 100%;}
.logo img {height: 125px;}

.topHeader {background: linear-gradient(180deg, #fbdf37 50%, #0b0254 50%);padding: 11px 0;transform: skewX(0deg);}
.topHeader .container {display: block;transform: skewX(0deg);}

.topLeft, .topRight{float:left;width:100%;text-align:right;padding-right: 70px;}
.topRight {padding-top: 13px;}
.logo {margin-top: -88px;}
#cssmenu>ul>li {text-align: center;}
#cssmenu>ul>li>a {padding: 10px 0;}
#cssmenu>ul>li.tSocial a {width: 43px;}
#cssmenu > ul {width: calc(100% + 30px);margin-left: -15px;}

.iContent {padding-top: 2px;}
.iBanner {padding-top: 0;margin-top: 0;}
.iContent h1 {padding: 13px 0 13px 0;font-size: 34px;line-height: 45px;text-align: center;}

.serviceIcon img {max-height: 40px;}
.serviceHeading {font-size: 20px;letter-spacing: 1px;}
.serviceViewMore a{font-size: 15px;letter-spacing: 1px;}
}
@media(max-width: 768px){
.fConnect, .fAbout, .fMembership{max-width: 100%;text-align:center;}
.fSec:not(:last-child) {margin-bottom: 50px;}
.fSocial a {margin: 0 10px;float: none;display: inline-block;}

.uceList {background: rgba(8, 4, 63, 0.8);transform: skew(0deg, 0deg);margin-left: 0;}
.ucelYellowBorder {margin-right: 0;height: calc(100% - 0px);width: 10px;top: 0;right: 0;}
.uceListing {width: 100%;max-width: calc(100% - 20px);padding-top: 60px;text-align:center;}
.uceDetails {background-position: bottom center;}

.springSwapMeet {zoom: 0.6;height: calc(100% - 0px);width: 400px;margin-top: 0;padding-left: 30px;padding-right: 30px;}
.mBanner, .mBannerBg img {height: 310px;}
.mBanner {margin-top: 0;}

.mrlHeading .overlay div {padding-top: 10px;margin-top: calc(50% - 33px);font-size: 20px;line-height: 24px;margin-left: 24px;}
.mrlBg img {height: 120px;}
.mrl .overlay div {padding-bottom: 10px;}
.mrlListing .overlay div{font-size: 15px;}
.serviceHeading, .serviceViewMore a{letter-spacing: 0;}
.uceName {margin: 10px 0;}
}
@media(max-width: 740px){
.services {flex-direction: column;}
.serviceList {padding-top: 15px;padding-bottom: 15px;}
.serviceList:not(:first-child) {padding-left: 0;}

.serviceIcon {min-width: 70px;}
.serviceHeading {font-size: 23px;letter-spacing: 1px;}
.serviceViewMore a{font-size: 20px;letter-spacing: 1px;}
.serviceIcon img {max-height: 50px;}

.serviceList:not(:last-child){border:0;}
.upcomingEvents.serviceList {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}




}
@media(max-width: 640px){
.mrl {width: 33.33%;}
.mrList {flex-wrap: wrap;}
.mrlHeading .overlay div {margin-top: calc(0px + 43px);}
.topLeft {font-size: 15px;}
.topRight a {font-size: 20px;}
.logo {margin-top: -62px;}
.logo img {height: 85px;}
h1, .iContent h2 {font-size: 26px;line-height: 26px;padding-top: 15px;}
.uceHeading {font-size: 33px;}
.uceName a {font-size: 26px;line-height: 30px;}
.uceDate, .uceLocation {font-size: 16px;}
.fSec {line-height: 30px;}
.fSec:not(:last-child) {margin-bottom: 30px;}
.fTitle {font-size: 30px;}


}
@media(max-width: 580px){
.serviceViewMore a{font-size: 16px;letter-spacing: 0;}
.serviceHeading {font-size: 20px;}
.col-md-6 {
	width: 100%;
}
}
@media(max-width: 540px){
.topHeader {background: #0b0254;padding: 4px 0 10px;}
.topRight {padding-top: 0;}
.topLeft{display: none;}

#cssmenu #menu-button {padding: 0 28px 25px 15px;margin-top: -42px;}
.logo {margin-top: -42px;}
}
@media(max-width: 480px){
.mBanner, .mBannerBg img {height: 200px;}
.mrlHeading .overlay div {margin-top: calc(0px + 35px);}
.springSwapMeet {display: none;}
.topRight a {font-size: 17px;letter-spacing: 0px;}
}
@media(max-width: 380px){
.mrl {width: 50%;}
.mrlHeading .overlay div {font-size: 22px;}
.logo {margin-top: -33px;}
.logo img {height: 65px;}
.iContent h1 {font-size: 26px;line-height: 34px;}
}