/* CSS Document */
@font-face {
	font-family: 'Frutiger';
	src: url('../fonts/Frutiger-Normal.woff2') format('woff2'),
	     url('../fonts/Frutiger-Normal.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Frutiger';
	src: url('../fonts/Frutiger-Bold.woff2') format('woff2'),
	     url('../fonts/FrutigerL-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

:root{
	--bs-primary:#da2c3a;
	--bs-primary-rgb:218,44,58;
	--bs-secondary:#9634d9;
	--bs-secondary-rgb:150,52,217;
	--bs-dark:#889094;
	--bs-dark-rgb:136,144,148;
}

html,body {font-family:'Frutiger', Arial, "sans-serif";}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,strong,.fw-bold{font-family:'Frutiger', Arial, "sans-serif"; font-weight: bold;}

header{background-image: url('../img/bg.webp'); background-size:100%; background-position: bottom; background-repeat: no-repeat; padding-bottom:10vw;}
.fs-0{font-size: 4rem}
.circle{background-image: url("../img/circle.webp"); background-repeat: no-repeat; background-position: top center; background-size: contain; padding:6.5rem 4.5rem 6.5rem 4.5rem; margin-top:-3rem}

.hero-kicker {
	font-size: 1.65rem !important;
	margin-bottom: 1.1rem;
}

.hero-title {
	font-size: 2.35rem !important;
	line-height: .98;
	margin-bottom: .35rem;
}

.hero-label {
	font-size: 2.35rem;
	line-height: 1.05 !important;
	padding-top: .4rem;
	padding-bottom: .45rem;
}

.hero-date {
	font-size: 1.8rem !important;
	margin-top: 0;
	margin-bottom: .95rem;
}

.hero-pills {
	margin-top: .4rem;
}

.points{ padding-right: 8px}
.points li{border-right:3px solid #da2c3a;list-style: none;margin-right: -15px; line-height: 1}
.points li .point-circle{display: inline-block; width: 11px; height: 11px; border:3px solid #da2c3a; border-radius: 100rem;  background-color:#fff;}
.points li .point-circle{transform: translate(7px,0px)}
.points li .point-txt{display: inline-block; transform: translate(0px,0px)}
.points li:first-of-type .point-circle{transform: translate(7px,-9px)}
.points li:first-of-type .point-txt{transform: translateY(-9px)}
.points li:last-of-type .point-circle{transform: translate(7px,9px)}
.points li:last-of-type .point-txt{transform: translateY(9px)}
.points li.line-change{border-color:#ffe600!important;}

.points li.deleted .point-circle{     border: 0;    background: transparent;    font-size: 15px;    font-weight: bold;    -webkit-text-stroke: 1px black;    color: white;    font-family: arial;}
.points li.deleted .point-txt{opacity: 0.5; position: relative;}
.points li.deleted .point-txt:before{content: ''; width: 100%; height: 2px; background-color:red; top:50%; left: 0; position: absolute;}

.points.line3 li{border-color:#d83d96;}
.points.line3 li .point-circle{border-color:#d83d96;}
.bg-line3{background-color:#d83d96;}

.points.line4 li{border-color:#6dc067;}
.points.line4 li .point-circle{border-color:#6dc067;}
.bg-line4{background-color:#6dc067;}

.points.line5 li{border-color:#447bbe;}
.points.line5 li .point-circle{border-color:#447bbe;}
.bg-line5{background-color:#447bbe;}

.points.line-m li{border-color:#00b2b0;}
.points.line-m li .point-circle{border-color:#00b2b0;}
.bg-muni{background-color:#00b2b0;}

.points.line-ntt li{border-color:#f23042;}
.points.line-ntt li .point-circle{border-color:#f23042;}
.bg-ntt{background-color:#f23042;}

.border-md-end-3{border-left: 3px solid var(--bs-border-color)!important;}
.border-md-start-3{border-right: 3px solid var(--bs-border-color)!important;}
.border-md-bottom-3{border-bottom: 3px solid var(--bs-border-color)!important;}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #841720;
    --bs-btn-hover-border-color: #841720;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #841720;
    --bs-btn-active-border-color: #841720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.top-link {
	color: var(--bs-primary);
	font-family: 'Frutiger', Arial, sans-serif;
	text-decoration: none;
}

.top-link:hover {
	color: #841720;
	text-decoration: underline;
}

.hero-pill {
	min-height: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	line-height: 1.15;
	white-space: normal;
	word-break: normal;
}

/* inner grid only — no outer border */
.route-card {
	border-left: 1px solid var(--bs-border-color);
	border-bottom: 1px solid var(--bs-border-color);
	padding: 1rem;
}
/* remove left border from leftmost column (3rd in DOM = 1st visually in RTL) */
.row-cols-md-2 .route-card:nth-child(2n),
.row-cols-md-2 .route-card:last-child {
	border-left: none;
}
/* remove bottom border from last row */
.row-cols-md-2 .route-card:nth-last-child(-n+2) {
	border-bottom: none;
}

@media screen and (width <= 776px) {
	header{background-size:300%; background-position: bottom; background-repeat: no-repeat; padding-bottom:36vw;}
	.logo{height: 40px}
	.fs-0{font-size: 2rem}
	.fs-3{font-size: 1rem!important}
	.circle{padding: 4.25rem 2.75rem 3rem 2.75rem; margin-top:0rem}
	.hero-kicker {font-size: .95rem !important; margin-bottom: .55rem;}
	.hero-title {font-size: 1.35rem !important; margin-bottom: .25rem;}
	.hero-label {font-size: 1.35rem; padding-top: .3rem; padding-bottom: .35rem;}
	.hero-date {font-size: 1.1rem !important; margin-bottom: .65rem;}
	.hero-pill {font-size: .92rem; min-height: 2rem;}
	.border-md-end-3 {border-left: 0 !important;}

	
}