﻿#bodyWebparts {
	margin-top:0px!important;

}
#mainContent{
	width:100%;
}
#pageLayout{
	padding-bottom:0px!important;
}
.COB-WebPart{
	padding-bottom:0px!important;
}
@media (max-width: 767px){
	.breadcrumb{
		display:none
	} 
	h1#pageTitle{
		padding-left:65px;
		background-color:#001429;
		margin-left:-15px;
		margin-right:-15px;
		margin-bottom:1px;
		margin-top:0px;
		color:#fff;
	}
}
@media (min-width:460px) and (max-width: 767px){
	h1#pageTitle{
		background-repeat:no-repeat;
		background-position:99% bottom;
		background-size:140px;		
	}
}
@media (min-width: 500px){
	h1#pageTitle{
		background-size:180px;
	}
}

@media (min-width: 600px){
	h1#pageTitle{
		background-size:240px;
	}
}

@media (min-width: 768px){
	h1#pageTitle{
		position:absolute;
		top:-9999px;
	}

	.bodyWebparts.topRight{
		padding-right:0px;
	}
	.bodyWebparts.topLeft,
	.bodyWebparts.topRight{
	width:100%;
	}

}
@media (min-width: 992px){
	.bodyWebparts.topLeft{
	width:66.66666667%;
	}
	.bodyWebparts.topRight{
	width:33.33333333%;
	}
}

/*****highlights styles*****/	
div.hlUnselected, div.hlSelected{
	margin-left:-15px;
	margin-top:0px;
}	
.Highlights,
div.hlUnselected, div.hlSelected {
	height:310px;
	width:100%;
}
.Highlights .container{width:100%;}
div.hlUnselected, div.hlSelected {
	top:0px;
	background-position:center top;
	background-size:100%;
	background-repeat:no-repeat;
	background-color:#001429;
}
.Highlights .slideContent{
	color:#fff;
	height:155px;
	background-color:#001429;
	font-size:90%;
	text-align:center;
}
.Highlights h3{
	font-size:160%;
	line-height:1.2;
	font-weight:500;
	margin-top: 6px;
	margin-bottom:0px;
}
.slideContent p{
	font-weight:300;
	margin:0px;
}
.Highlights .slideLink{
	display:block;
	overflow:hidden;
	text-decoration:none!important;
	color:#fff!important;
}
.Highlights .buttons-container{
	width:100%;
	position:absolute;
	bottom:0px;
	}
.Highlights .slideButton,
.Highlights .slidePlayPauseButton{top:-25px;}
.Highlights .slideButton { 
	position:absolute; 
	height:20px!important; 
	width:20px!important; 
	z-index:100;
	margin-right:5px;
	border-radius:10px;
}
.Highlights .slideButton a{
	height:12px!important; 
	width:12px!important; 
	margin:4px;
	border-radius:8px;
	display:block;
	text-indent: -99999px;
	background-color: #41566b;
	border:none;
	color:#fff!important;
}
.Highlights .slideButton a:focus{
	outline:none;
	background-color:#E68A00;
	height:12px!important; 
	width:12px!important; 
	border-radius:9px;
	margin:4px;	
	border: none;
	color:#000;
}
.Highlights .slideButton a.HLSelected{
	height:16px!important; 
	width:16px!important; 
	margin:2px;
	border-radius:8px;
	display:block;
	text-indent: -999px;
	background-color: transparent;
	border: 3px solid #41566b;
}
.Highlights .slidePlayPauseButton {
	position:absolute; 
	z-index:100; 
	height:22px; 
	width:22px; 	
	display:block;
	color:#fff;
	text-align:center;
	background-color:#41566b;
	border-radius:2px;
	left:0px;
	display:none;
}
.Highlights .slidePlayPauseButton a{
	color:#fff!important;
	text-decoration:none;
}
.Highlights .slidePlayPauseButton a:hover{text-decoration:none}
.Highlights .slidePlayPauseButton a:focus{color:#E68A00!important;outline:none; color:#000;}

.Highlights .slidePlayPauseButton span{
		line-height:22px;
		width:22px;
		font-size:14px;
		display:block;
		position:inherit;
		top:0px;
		text-align:center;
}

@media (min-width: 360px){
	.Highlights .slideContent{height:155px;}
	.Highlights,div.hlUnselected,div.hlSelected {height:320px;}
}	
@media (min-width: 400px){
	.Highlights,div.hlUnselected,div.hlSelected {height:360px;}
}
@media (min-width: 480px){
	.Highlights,div.hlUnselected,div.hlSelected {height:400px;}
}	
@media (min-width: 568px){
	.Highlights,div.hlUnselected,div.hlSelected {height:415px;}
}
@media (min-width: 600px){
	.Highlights,div.hlUnselected,div.hlSelected {height:435px;}
}

@media (min-width: 640px){
	.Highlights,div.hlUnselected,div.hlSelected {height:450px;}
}	
@media (min-width: 667px){
	.Highlights,div.hlUnselected,div.hlSelected {height:470px;}
}
@media (min-width: 720px){
	.Highlights,div.hlUnselected,div.hlSelected {height:475px;}
}	
@media (min-width: 736px){
	.Highlights,div.hlUnselected,div.hlSelected {height:490px;}
}
@media (min-width: 768px){
	.slideContent{background-color:transparent;}
	.sidebar-offcanvas.col-sm-3{padding-right:0px}
   	.Highlights,div.hlUnselected,div.hlSelected {height:415px;}
}
@media (min-width: 800px){
	.sidebar-offcanvas.col-sm-3{padding-right:0px}   
   	.Highlights,div.hlUnselected,div.hlSelected {height:460px;}
}

@media (min-width: 899px){ 
   	.Highlights,div.hlUnselected,div.hlSelected {height:480px;}
}

@media (min-width: 960px){
   	.Highlights,div.hlUnselected,div.hlSelected {height:475px;}
}

@media (min-width: 961px) and (max-width: 1024px){
.Highlights,div.hlUnselected,div.hlSelected {height:500px;}
}
@media (max-width: 1024px){
   	

	.Highlights .slideContent{
		width:100%;
		float:none;
		position:absolute;
	    bottom:0px;
	}	
	.Highlights .buttons-container div.col-sm-5.col-md-4{
		width:20%;
		float:none;
		margin:auto;
	}
}
@media (min-width: 1025px){
	.Highlights h3{
		font-size:140%;
		margin-top:22px;
		margin-bottom:3px;
	}
	.Highlights .slideContent {
		background-color:transparent;
		height:220px;	
		text-align:left
	}
	.Highlights {
		width:100%;
		height:220px;
	}
	div.hlUnselected, div.hlSelected {
		height: 221px;
		background-position: 242px center;
		background-size: 489px auto;
	}	
   	.Highlights .slideLink{height:190px;}
	.Highlights .slideLink h3:hover{text-decoration:underline}
	.Highlights .slideLink::after {
		content: "";
		background: url('../images/home/blueArrow.png');
		opacity: 0.35;
		background-repeat:no-repeat;
		background-position:bottom right;
		top:0;
		left:0;
		bottom:28px;
		right:15px;
		position: absolute;
		z-index: -1;   
	}
	.Highlights .slideLink:hover::after{opacity: 0.7;}
	.Highlights .slidePlayPauseButton{display:block;}
	.Highlights .slideButton a:hover{background-color:#E68A00}
	.Highlights a.slidePlayPauseButton:hover{color:#E68A00}
}
@media (min-width: 1200px){
	.Highlights, .Highlights .slideContent {height:266px;}	
	div.hlUnselected, div.hlSelected {
	height:266px;
	background-position:292px center;
	background-size:590px;
	}
	.Highlights .slideLink{height:230px;}
}
/*************end of home highlights*********************/
/*************home buttons****************/
#homeButtons .buttonLink{
	padding:0px;
	border-bottom:1px solid #ccc;
}
#homeButtons .Plan.your.Trip,
#homeButtons .Schedules.and.Maps{
	border-right:1px solid #ccc;
}
#homeButtons a{
	display: block;
	position: relative;
	height: 170px;
	font-weight: 400;
	font-size: 120%;
}

#homeButtons a span{
	display:block;
	position:absolute;
	padding-left:0px;
	left:0px;
	bottom:9px;
	margin-left:0px;
	height:auto;
	line-height:1.45;
	background-color:transparent;
	border-left:none;
	text-align:center;
	width:100%
}

#homeButtons a:hover{
	text-decoration:none;
}
#homeButtons a:visited{
	color:#3366cc;}
#homeButtons a:visited:hover{
	color:#000;
}
#homeButtons .Plan.your.Trip a{
	background:url('../images/home/button-PlanYourTrip.png') no-repeat center 15px;	
	background-size: 55%;
}
#homeButtons .Plan.your.Trip a:hover,
#homeButtons .Plan.your.Trip a:focus{
	background: url('../images/home/button-PlanYourTrip.png') no-repeat center 15px, 
 				url('../images/home/bg-top-left.png') no-repeat right bottom;
 	background-size: 55%, cover;
}
#homeButtons .Next.Ride a{
	background:url('../images/home/button-NextRide.png') no-repeat center 15px;	
	background-size: 55%;
}
#homeButtons .Next.Ride a:hover,
#homeButtons .Next.Ride a:focus{
	background: url('../images/home/button-NextRide.png') no-repeat center 15px, 
 				url('../images/home/bg-top-right.png') no-repeat left bottom;
 	background-size: 55%, cover;
}
#homeButtons .Schedules.and.Maps a{
	background:url('../images/home/button-Schedules.png') no-repeat center 15px;
	background-size: 55%;
	}
#homeButtons .Schedules.and.Maps a:hover,
#homeButtons .Schedules.and.Maps a:focus{
	background: url('../images/home/button-Schedules.png') no-repeat center 15px, 
 				url('../images/home/bg-bottom-left.png') no-repeat right top;
 	background-size: 45%, cover;
}
#homeButtons .Fares a{	
	background:url('../images/home/button-Fares.png') no-repeat center 15px;	
	background-size: 55%;
}
#homeButtons .Fares a:hover,
#homeButtons .Fares a:focus{
	background: url('../images/home/button-Fares.png') no-repeat center 15px, 
 				url('../images/home/bg-bottom-right.png') no-repeat left top;
 	background-size: 55%, cover;
}
@media (max-width: 599px){
	#homeButtons .buttonLink{
		width:50%
	}
}
@media (min-width: 480px){
	#homeButtons a{
		height:200px;
		font-size:110%;
	}
}
@media (min-width: 600px){
	#homeButtons .Plan.your.Trip,
	#homeButtons .Next.Ride {
	  border-bottom:1px solid #ccc;
    }
    #homeButtons .Plan.your.Trip,
	#homeButtons .Schedules.and.Maps,
	#homeButtons .Next.Ride {
	  border-right:1px solid #ccc
    }

	#homeButtons a{
		height:160px;
		font-size:110%;
	}
	#homeButtons .Plan.your.Trip a,
	#homeButtons .Plan.your.Trip a:hover,
	#homeButtons .Plan.your.Trip a:focus,
	#homeButtons .Next.Ride a,
	#homeButtons .Next.Ride a:hover,
	#homeButtons .Next.Ride a:focus,
	#homeButtons .Schedules.and.Maps a,
	#homeButtons .Schedules.and.Maps a:hover,
	#homeButtons .Schedules.and.Maps a:focus,
	#homeButtons .Fares a,
	#homeButtons .Fares a:hover,
	#homeButtons .Fares a:focus{
		background-position:center 15px, right bottom; 
		background-size: 65%, cover;
		background-color:transparent;
	}
	
	#homeButtons a:hover span {
    	background-color:transparent;
    }	
}
@media (min-width: 840px){
	#homeButtons a{
		height:170px;
	}

}
@media (min-width: 992px){
	#homeButtons .buttonLink{
		border-bottom:none;
	}
	#homeButtons .Next.Ride {
	border-right:none;
}

	#homeButtons a{
		height:245px;
		font-size:140%;
		}
	#homeButtons .Plan.your.Trip a,
	#homeButtons .Plan.your.Trip a:hover,
	#homeButtons .Plan.your.Trip a:focus,
	#homeButtons .Next.Ride a,
	#homeButtons .Next.Ride a:hover,
	#homeButtons .Next.Ride a:focus,
	#homeButtons .Schedules.and.Maps a,
	#homeButtons .Schedules.and.Maps a:hover,
	#homeButtons .Schedules.and.Maps a:focus,
	#homeButtons .Fares a,
	#homeButtons .Fares a:hover,
	#homeButtons .Fares a:focus{
	background-position:center 30px, right bottom; 
	background-size: 55%, cover;}

}
@media (min-width: 1200px){
	#homeButtons a{
	    font-size:160%;
		height:280px;
		background-size:auto;
	}
}

/**************service alerts******************/
#featuredLinks{
	margin-bottom:20px;
}
#featuredLinks a{
	display:block;
	padding-left:45px;
	background-image:url('../images/home/icon-alerts.png');
	background-repeat:no-repeat;
	background-position: -8px -10px;
	line-height:1.15;
	padding-bottom:15px;
	background-size:54px;
}
#featuredLinks a:hover{
	text-decoration:none
}
#featuredLinks a:visited{
	color:#3366cc;}
#featuredLinks a:visited:hover{
	color:#000;
}

#featuredLinks span.category{
	display:block;
	font-weight:600;
}
#featuredLinks span.title{
	color:#333;
	font-size:90%
}

#featuredLinks a:hover span.category{
	text-decoration:underline;
}
#featuredLinks br{
	display:none;
}
#featuredLinks a.updates{
	background-image:url('../images/home/icon-alerts.png');
}
#featuredLinks a.events{
	background-image:url('../images/home/icon-events.png');
}
#featuredLinks a.detours{
	background-image:url('../images/home/icon-detours.png');
}
#featuredLinks a.service{
	background-image:url('../images/home/icon-improvements.png');
}

@media (min-width: 768px){

	#featuredLinks a{
		font-size:90%;
	}
	h2.featured{
		height:62px;
		line-height:62px;
		margin:0px;
	}
}
@media (min-width: 992px){
	#featuredLinks{
		overflow-y: auto;
		height: 400px;
		margin-bottom:0px;
	}
}
@media (min-width: 1200px){	
	#featuredLinks{height: 460px}
}
/*****************transit footer***********/

.transitFooter {
	padding-bottom: 24px;
    border-top: 1px solid #ccc;
    background-color: #F9F9F9;
}
.transitFooter .small-logo{
	background-image:url('../images/logos/BTLogo.png');
	background-repeat:no-repeat;
	background-size:270px;
	background-position:15px bottom;
	height:80px;
}
.transitFooter .socialMedia p{
	margin: 0px;
    margin-left: -21px;
    margin-right: -15px;
	padding:15px 15px 20px 15px;
}
.transitFooter .socialMedia img{
	vertical-align:text-bottom;
}
.transitFooter .socialMedia .instagram img{
	height:25px;
}
.transitFooter .socialMedia a{
	text-decoration:none;
}
@media (min-width: 768px){
	.transitFooter .small-logo{
		background-size:90%;
		background-position:15px 30px;
		height:100px;
	}
	.transitFooter .socialMedia p{
		padding-top:26px
	}

}

@media (min-width: 860px){
	.transitFooter .socialMedia p{
		padding-top:32px
	}
}

@media (min-width: 992px){
	.transitFooter .socialMedia br{
		display:none
	}
	.transitFooter .socialMedia p{
		padding-top:40px
	}

}
@media (min-width: 1200px){
	.transitFooter .socialMedia p{
		padding-top:45px
	}

}


