/* CSS Document */
#mobileMenuToggle {display:none !important;}
#mobileHeader {border-bottom:1px solid #fff;}
#altMenuToggle,#altMenuClose {
    position: absolute;
    top: 2px;
    right: 15px;
    font-size: 2.4em;
}
#altMenuToggle i,#altMenuClose i {}
#altMenuClose,#socialNavHomeClose {
    display: none;
}
#mainCarousel {width:100%;}
/*#mobileHeader {display:none !important;}*/
#homeContentWrapper {margin-top:0px;}
#footer {margin-top:10px; padding-bottom:30px;}
.carousel-item {
	width:100%;
	height:400px;
	background-size:cover;
  	background-repeat: no-repeat;
}
.carousel-caption {
    width: 100%;
    height: 100%;
    padding:0; right:0;
    left:0; top:0; bottom:0;
    background:url(/images/grid.png) repeat;
}
.carousel-caption a {
    display: block;
    width: 100%;
    height: 100%;
    position:relative;
}
.carousel-caption a span {
    display: block;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.6em;
    line-height: 1.2em;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    left: 15%;
    right: 15%;
    bottom: 10%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    padding:10px 0px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {width:30px; height:30px;}

#homeWrapper {position:relative;}
#homeMenu {
    position: relative;
    /* width: calc(100vw); */
    margin: 0 -15px 20px -15px;
    padding: 0;
    box-sizing: border-box;
    display: block;
}
#homeMenu div {margin:0; padding:0;}
.contentBox {
    height: 110px;
    position: relative;
    border-bottom: 1px solid #fff;
}

.contentBox,#topLeft,#topRight {
    width: 100%;
    max-width: 100%;
}
.contentBox .btn:not(.secondBtn) {
    border: 0px;
    background-color: transparent;
    color: transparent;
    position: absolute;
    /* left: -20px; */
    top: 0px;
    width: 100%;
    height: 100%;
}
.contentBox .secondBtn {display:none;}
.contentBox .btn::after {
    content: "\f105";
    font-family: "Font Awesome 5 Pro";
    color: #fff;
    font-size: 2em;
    position: absolute;
    right: 10px;
    top: calc(50% - 22px);
}
.contentBox.dark .btn::after {color:#333;}


.contentBoxTitle {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.5em;
    border-bottom: 1px solid #fff;
    font-weight: bold;
    position: absolute;
    top: 35px;
    left: 20px;
}
.contentBox p, .contentBox ul,.contentBox>img {display:none;}


.contentBox.dark .contentBoxTitle, .contentBox.dark p, .contentBox.dark ul li a,.contentBox.dark ul li::before {color:#242424; 
    border-color:#242424;}





#homeMenuBox1 {
    background-image: url(/images/home/homeMenuBG_joinUs.png);
    background-position-y: 10%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    background-color: #e51937;
}
#homeMenuBox2 {
    background-image: url(/images/home/homeMenuBG_membershipA.jpg);
    background-size: cover;
    background-position-x: right;
    background-position-y: 30%;
    position: relative;
}
#homeMenuBox2 .secondaryBG {
	position: absolute;
	z-index: 0;
	left: 60%;
	top: 0px;
	height: 100%;
	width: 30%;
	background-image: url(/images/home/homeMenuBG_membershipB.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-y: 5%;
}
#homeMenuBox2 .secondaryBG img {display:none;}
#homeMenuBox2 .contentBoxInner {
    position: absolute;
    z-index: 2;
    width:100%;
    height:100%;
}
#homeMenuBox3 {
    background-image: url(/images/home/homeMenuBG_shows.jpg);
	background-size: cover;
	background-position-x: 80%;
	background-position-y: 20%;
	top: 110px;
}
#homeMenuBox4 {
    background-image: url(/images/home/homeMenuBG_international.jpg);
	background-size: cover;
	background-position-x: 50%;
	background-position-y: 40%;
	background-repeat: no-repeat;
	top: -110px;
}
#homeMenuBox5 {
    background-image: url(/images/home/homeMenuBG_training.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
    background-color: #edf6ff;
    top:330px;
}
#homeMenuBox6 {
    background-image: url(/images/home/homeMenuBG_leagues.jpg);
    background-size: cover;
    background-position-x: left;
    background-position-y:7%;
}
#homeMenuBox7 {
    background-color: #e51837;
    top:-220px
}
#homeMenuBox8 {
    background-image: url(/images/home/homeMenuBG_regional.jpg);
    background-position: 100% 98%;
    top:-110px;
}
#homeMenuBox9 {
    background-image: url(/images/home/homeMenuBG_britishEquestrianSport.jpg);
} 
#homeMenuBox10 {
    background-image: url(/images/shopBG.jpg);background-position: 50% 75%;
} 
@media (max-width:375px) {
       #homeMenuBox10 .contentBoxTitle {font-size:1.2em !important;}
}
@media (min-width:500px) {
    #homeMenuBox10 {background-position:30% 18%;}
    
}



.carousel-item {
    
    /*height: calc(100vh - 357px);*/
	height: calc(75vh);
}

#menuRight>div>img {
    position: absolute;
    top: 0px;
    right: 20px;    
    max-width: 100px;
    height: auto;
}

#footer::before {display:none;}
    



@media (min-width: 500px) {
    .contentBox .btn::after {right:20px;}
    
}

@media (min-width: 576px) { 
	.carousel-caption a span {
    font-size: 2em;
    line-height: 1.2em;
} 
.contentBox.dark ul li a {text-shadow: 1px 1px rgba(255,255,255,0.5);/* color: #313131; */}
 
    
    
    
 }
@media (min-width: 768px) { 
   .carousel-caption a span {
    font-size: 3em;
    line-height: 1em;
    padding:20px 0px;
} 
    .carousel-item {/*height: calc(100vh - 200px);*/}
    
}

@media (min-width: 835px) {
    #homeMenu {display:flex;}
    #menuLeft {
		flex: 1;
		/* border-bottom: 20px solid #fff; */
		flex-basis: 100%;
	}
	#menuRight {
		flex: 1;
		flex-basis: 100%;
		flex-direction:row;
		flex-wrap:nowrap;
		display:flex;
	}
	#homeMenu #menuRight>div {
		padding-bottom:10px;
	}
	
	.topRow {height:56%;display:flex;}
	 
	#topLeft {display:flex;}
	#topRight {
		display: flex;
		flex-wrap: nowrap;
		flex-direction:column;
	}
	#topRight>div {
		width: 100%;
		max-width: 100%;
		flex: 1;
		flex-basis: 50%;
		
	}
    #homeMenuBox3 {flex-basis:calc(50% -10px) !important;}
    
	.bottomRow {
		height: 44%;
		display: flex;
	}
	.topRow>div,.bottomRow>div {
		height: 100%;
	}
	.contentBox {
    height: auto;
    border-bottom:none;
}
	.contentBox p {
		display:block;
		color: #fff;
		font-size: 0.8em;
		margin-left: 30px !important;
		margin-right: 30px;
		line-height: 1.25em;
	}
    #homeMenu div.contentBoxTitle {margin: 30px 0px 20px 30px; position:relative; 
        top:auto; left:auto; padding-bottom: 15px !important;line-height:0.9em;}
    #homeMenuBox4 .contentBoxTitle {margin-top:20px !important;}
	.contentBoxNewsTitle {margin-bottom:3px; font-weight:bold;}
	.contentBoxNewsSynopsis a { color:#fff; text-transform:lowercase; padding-left:3px;}
	.contentBox ul {display:block;padding-left: 30px;list-style:none;margin-bottom: 0.7rem;}
	.contentBox ul li {
		font-size: 0.8em;
		padding: 0px;
		position: relative;
		font-weight:bold;
	}
	.contentBox ul li::before {content: "\2022"; color:#fff; position:absolute; left:-13px; font-size:0.8em; top:2px;}
	.contentBox ul li a {color:#fff;}	
	
	.contentBox .btn:not(.secondBtn) {
		margin-left: 20px;
		text-transform: uppercase;
		font-size: 0.8em;
		padding: 10px 30px;
		background-color: rgba(0, 0, 0, 0.2);
		width: auto;
		height: auto;
		border: 1px solid #fff;
		color: #fff;
		position: relative;
		left:auto;
		top:auto;
}
    .contentBox .btn.secondBtn {display:none;}
    .contentBox .btn::after {content:none;}
	.contentBox.dark .btn {
		background-color: rgba(255, 255, 255, 0.3);
		border-color:#343a40;
		color:#343a40;
	}
	
	#homeMenuBox1 {
		background-image: url(/images/home/homeMenuBG_joinUs.png);
		background-position-y: 120px;
		background-position-x: 20%;
		background-repeat: no-repeat;
		background-color: #e51937;
	}
	#homeMenuBox2 {
		background-image: url(/images/home/homeMenuBG_membershipA.jpg);
		background-size: cover;
		background-position: left bottom;
		position: relative;
	}
	#homeMenuBox2 .secondaryBG {
		position: absolute;
		z-index: 0;
		right: -30px;
		top: 30px;
		width: auto;
		height: auto;
		background-image: none;
		left:auto;
}
    #homeMenuBox2 .secondaryBG img {
    display: block;
}
	#homeMenuBox2 .contentBoxInner {position:absolute; z-index:2;}
	#homeMenuBox2 p {
		margin-right: 40%;
	}
	#homeMenuBox3 {
		background-image: url(/images/home/homeMenuBG_shows.jpg);
		background-size: cover;
		background-position-x: right;
		background-position-y: 50%;
		top: auto;
	}
	#homeMenuBox4 {
		background-image: url(/images/home/homeMenuBG_international.jpg);
		background-size: cover;
		background-position: left bottom;
		top: auto;
	}
	#homeMenuBox5 {
		background-image: url(/images/home/homeMenuBG_training.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position-x: right;
		background-position-y: top;
		background-color: #edf6ff;
		top:auto;
}
	#homeMenuBox6 {
		background-image: url(/images/home/homeMenuBG_leagues.jpg);
		background-size: cover;
		background-position: left bottom;
	}
	#homeMenuBox7 {
		background-color: #e51837;
		position: relative;
		order: 2;
		flex: 0 0 39%;
		max-width: 58.333333%;
		top:auto;
}
	#homeMenuBox8 {
		background-image: url(/images/home/homeMenuBG_regional.jpg);
		background-position: 100% 98%;
		position: relative;
		flex: 0 0 27.75%;
		max-width: 27.75%;
		order: 1;
        top:auto;
	}
	#homeMenuBox9 {
		background-image: url(/images/home/homeMenuBG_britishEquestrianSport.jpg);
		position: relative;
		order: 3;
		flex:1;
	} 
	#homeMenuBox9 .btn {
		position: absolute;
		right: 20px;
		bottom: 30px;
		width: 124px;
		height:41px
	}
	
}
 
@media (min-width: 992px) { 	
    #homeContentWrapper {margin-top:30px;}
    
	#altMenuToggle,#altMenuClose {display:none !important;} 
    
	


		
	
}

@media (min-width: 1200px) { 
	.carousel-item {
		/*height:calc(100vh - 150px);*/
		}
	#footer::before {display:block;}
	#homeMenu {
		flex-wrap: nowrap;
		height: calc(100vh - 357px);
		min-height: 750px;
		margin-top: 25px;
		margin-bottom: 20px;
}
	#menuLeft {
		flex-basis: auto;
		/* border-bottom: 0px; */
		border-right: 20px solid #fff;
}
	#homeMenu div#menuRight {
		flex: 0 0 382px;
		flex-wrap: nowrap;
		display: flex;
		flex-direction: column;
		height: 100%;
        position:relative;
        margin-top:-40px !important;
	}
 
    
	#menuRight>div {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    max-width: 100%;
    order: 0;
    flex-basis: 20%;
    padding-bottom: 0px;
    text-align: right;
    padding-left: 10px;
    position: relative;
    /* overflow-y:hidden; */
}
	#menuRight>div>div, #menuRight>div>p, #menuRight>div>a, #menuRight>div>ul, #homeMenu #menuRight .contentBoxTitle {
    
    margin-right: 30px;

	
	}
    #homeMenu div#homeMenuBox8 .contentBoxTitle {margin-top:55px;}
    #menuRight ul li::before {left:auto; right:-10px;}
    #menuRight>div>p {
    padding-left: 28%;
}
    
    #menuRight>div#homeMenuBox9>p {padding-left:20px;}
    #menuRight>div>.btn {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
    #homeMenuBox9 .btn {top:auto; bottom:20px !important;}
    #homeMenuBox9 .btn.secondBtn {display:block; left:auto; right:-10px; position:absolute;height:41px;
    margin-left: 20px;
		text-transform: uppercase;
		font-size: 0.8em;
		padding: 10px 30px;
		background-color: rgba(0, 0, 0, 0.2);}
    #homeMenuBox9 ul li:last-child {display:none;}
    #homeMenuBox10 {display:none;}
    #menuRight>div>img {
    position: absolute;
    top: 65px;
    left: 20px;
    transform: skewY(6deg) translateZ(0);
    width:auto;
    max-width: 100px;
    height: auto;
    right: auto;
        display:block;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-backface-visibility: hidden;
}
    #homeMenuBox7,#homeMenuBox9 {
    flex-basis: 40% !important;
}
    #homeMenuBox7::before {content:""; width:0; height:0; z-index:2;border-style: solid;
border-width: 0px 0px 40px 382px;
border-color: transparent transparent  transparent #fff; position:absolute; top:0px; left:0px;}
    #homeMenuBox7 {padding-top:35px !important;}
    #homeMenuBox7 ul {padding-left:10px;}
    #homeMenuBox7 ul li a {text-decoration:none; }
    #homeMenuBox7 ul li a:last-child {font-size:0.9em; font-weight: normal;}
    #homeMenuBox7 ul li {margin-bottom: 7px;}
    #homeMenuBox7 ul li::before {content:"";}
    #menuRight>div#homeMenuBox7>.btn {bottom:-10px; z-index:200}
    #menuRight>div#homeMenuBox8>.btn {bottom:-15px; z-index:200;}
    #menuRight>div#homeMenuBox8>.contentBoxTitle {margin-top:40px;}
    #menuRight>div#homeMenuBox7,#menuRight>div#homeMenuBox8 {overflow-y:visible !important;}
    #menuRight>div#homeMenuBox9>.contentBoxTitle {margin-left:2px; margin-top:50px;}
	#homeMenuBox8::before {content:""; width:0; height:0; z-index:2;border-style: solid;
border-width: 0px 0px 40px 382px;
border-color: transparent transparent  transparent #e51837; position:absolute; top:0px; left:0px;}
	#homeMenuBox9::before {content:""; width:0; height:0; z-index:2;border-style: solid;
border-width: 0px 0px 40px 382px;
border-color: transparent transparent  transparent #242424; position:absolute; top:0px; left:0px;}
    #homeMenuBox9::after {content:""; position:absolute; width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 40px 382px;
border-color: transparent transparent transparent #004a91;right:0px; bottom:-40px;}
}
@media (min-width: 1550px) {
    .contentBox.dark ul li a {text-shadow: none;}
    
}