body#calendar-event {
		background-color:#4e5b4d;
	}
	
	body#calendar-event #more-news {
		background:linear-gradient(0deg, rgb(30 30 30) 50%, rgba(255,255,255,0) 100%);
	}
	
	#more-news {
		margin-bottom:0px;
	}
	
	section#date,
	section#intro #route-by-car,
	section#intro #route-by-car .route_finder,
	section#cal,
	section#cal year,
	section#cal months,
	section#cal month,
	section#cal month > div,
	section#cal month day,
	section#cal month day h2 {
		display:flex;
		display:-webkit-flex;
		flex-wrap:wrap;
		-webkit-flex-wrap:wrap;
	}

	section#date,
	section#intro,
	section#cal {
		margin-left: 20px;
		width: calc(100% - 40px);
	}

	section#date,
	section#cal {
		margin-top: 30px;
		padding:20px 25px 15px 25px;
	}

	section#date {
		border-radius:5px 5px 0px 0px;
		background-color:#c14440;
		color:#fff;
		font-weight:600;
		letter-spacing:3px;
	}

	section#date h1,
	section#date h2 {
		letter-spacing:3px;
	}

	section#date h1 {
		font-weight:600;
	}

	.ordinal:after,
	.from:before,
	.from:after,
	.duration {
		font-size:16px;
		letter-spacing:1px;
		text-transform:none;
	}

	.from:after,
	.ordinal:after {	margin-left:2px; }
	
	.from:before {		content:'Starts '; }
	.from.am:after {	content:'am'; }
	.from.pm:after {	content:'pm'; }
	
	.ordinal.th:after {	content:'th'; }
	.ordinal.rd:after {	content:'rd'; }
	.ordinal.st:after {	content:'st'; }



	section#intro {
		align-items:flex-start;
		-webkit-align-items:flex-start;
		flex-wrap:wrap;
		-webkit-flex-wrap:wrap;
		background: #fff;
		border-radius:0px 0px 5px 5px;
		overflow-y:clip;
		position:relative;
	}
	
	
	section#intro,
	section#cal {
		margin-bottom:3vw;	
	}


	#intro h3 {
		color:#c14440;
		font-weight:bold;
		margin-bottom:calc(15px + 1vw);
		text-align:left;
	}

	#intro p,
	#intro ul {
		font-size: calc(0.7em + 0.4vw);
	}
	
	#intro picture img {
		height:auto;
	}

	section#intro #route-by-car,
	section#intro #route-by-car .route_finder {
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		width:100%;	
	}

	#route-by-car .route_finder > * {
		margin-top:calc(30px + 1vw);
	}
	
	#route-by-car .btn.back {
		border:none;
		margin-left:0px;
		margin-right:auto;
	}
	
	#route-by-car .btn.back:before {
		color:#C95764;
		content: "\e079";
		font-family: 'glyphicons halflings';
		font-size: calc(1rem + .4vw);
		height: 100%;
	}
	

	section#intro div#timescale {
		display:none;
		height: 100%;
		min-height: 1130px;
		position:absolute;
		top: 0px;
	}
	
	#time {
		background-color: #e3a3a3;
		border-radius:8px;
		display:none;
		height: 6px;
		left: 11px;
		position: absolute;
		top: 10px;
		width: 6px;
		z-index: 1;
	}
	
	
	
	section#cal {
		background-color:#f8f8f8;
		border-radius:5px;
	}
	
	section#cal > * {
		width:100%;
	}
		
	section#cal h2 {
		color: #6e2d35;
		margin: 0px;
		padding: 0px;
	}
	
	section#cal year > h2,
	section#cal month > h2 {
		padding-bottom:calc(15px + 1vw);
		padding-top:10px;
	}
	
	section#cal month > h2:before {
		background: url(/_images/icons/calendar2.svg) no-repeat center 70%;
		background-size: 18px;
		content: ' ';
		float:left;
		height: 1em;
		margin-right: 7px;
		width: 24px;
	}	
	
	section#cal month day {
		background-color:#fff;
		border-radius:5px;
		box-shadow: 0px 0px 50px #9d833b0f;
		margin-bottom:20px;
		padding-bottom: 20px;
		-webkit-transition:.3s box-shadow;
		transition:.3s box-shadow;
		width:100%;
	}
	
	
	section#cal month day h2 {
		border-radius: 5px 5px 0 0;
		letter-spacing:normal;
		margin-bottom:10px;
		padding: 10px 20px;
		text-transform:none;
		width:100%;
		-webkit-transition:.3s background-color;
		transition:.3s background-color;
	}
	
	
	section#cal month day:hover {
		box-shadow: 0px 0px 50px #b960223f;
	}
	
	
	section#cal month day:hover h2,
	section#cal month day:hover .btn.ani {
		background-color:#C95764;
		color:#fff;
	}
	
	

	section#cal month day picture {
		filter: saturate(0) opacity(0.2) blur(0.5px);
		-webkit-filter: saturate(0) opacity(0.2) blur(0.5px);
		border-radius: 5px;
		height: 70%;
		margin-left: 20px;
		margin-bottom: auto;
		overflow: hidden;
		transition:.3s filter;
		-webkit-transition:.3s filter;
		width: 25%;
	}
	
	section#cal month day:hover picture {
		filter: saturate(1) opacity(1) blur(0px);
		-webkit-filter: saturate(1) opacity(1) blur(0px);
	}
	
	section#cal month day p {
		font-size: calc(1.2em + .3vw);
		margin-bottom: auto;
		padding-left: 20px;
		width: calc(70% - 30px);
	}
	
	section#cal month day p strong {
		color: #b11f30;
		font-weight: 600;
	}
	
	section#cal month day .btn {
		background-color: #f26676;
		margin-left: auto;
		margin-top: 5px;
	}
	
	section#cal month day .btn:before {
		background-color: #7a0000;
	}
	
	section#cal month day .btn.ani:before {
		background-color: #f7a0aa;
	}
	
	
	#timetable-box {
		margin-bottom: 20px;
		margin-top: 20px;
		width: 100%;
	}
	#timetable { border-collapse: collapse; width: 760px; max-width: 100%; table-layout: fixed; font-size:calc(0.6em + 0.3vw); }
	#timetable th, 
	#timetable td { border: 1px solid #3333; padding: 4px 6px; vertical-align: top; text-align: left; }
	#timetable th { background:#fff; }
	#timetable .time { width:15%; min-width:90px; text-align:right; background:#fff; }
	#timetable .hour { font-weight:bold; }
	#timetable .col {     min-width: 200px;   width: 20%; }
	#timetable .purple { background:#ffe9ff; color:#000; } 
	#timetable .blue   { background:#cbdded; color:#000; } 
	#timetable .red    { background:#ffcaca; color:#000; }
	#timetable .yellow { background:#fff9cf; color:#000; } 
	#timetable .fit { line-height: 1.1; }

	


	@media screen and (max-width:640px) {
		#time {
			display:block;
			left: 15px;
		}
	}



	@media screen and (max-width:991px) {

		section#date {
			margin-top: 20px;
			padding: 15px 15px 12px 15px;
		}

		section#date > *,
		section#cal month > *,
		section#cal year > h2 {
			width:100%;
		}

		section#date h1,
		section#date h2 {
			font-size: 2.25rem;
			font-weight: 600;
			letter-spacing: 1px;
			margin-bottom:15px;
		}
		
		section#cal {
			margin-left:15px;
			margin-top:15px;
			padding:0px;
			width:calc(100% - 30px);
		}
		
		section#cal h2 {
			color: #320000;
		}
		
		section#cal year > h2 {
			border-bottom:3px solid #efedec;
			font-weight: 700;
			margin-bottom:15px;
			padding:0px 0px 15px 30px;
		}
		
		section#cal month > h2 {
			padding-top:0px;
		}

		section#intro {
			padding-bottom:0px;
		}

		section#intro .col_a,
		section#intro .img {
			max-width: 100%;
			padding:20px 20px 0px 80px;			
		}

		section#intro .img {
			padding-bottom:15px;
		}

		#intro h3 {
			margin-bottom:15px;
		}

		#intro p, 
		#intro ul {
			font-size: 1.7rem;
		}
		
		section#intro div#timescale {
			background: url('/_images/991/timescale.svg') repeat-y;
			display:block;
			left: -6px;
			width:70px;
		}
		
		section#intro .btn {
			color: #c6eb70;
		}
		
		section#intro .btn:not(.view_menu) {
			min-width: 70%;
			width:  unset;
		}
		
		section#cal month:not(:first-of-type) {
			margin-top:40px;
		}
		
		section#cal month day {
			padding-bottom: 15px;
		}
		
		section#cal month day h2 {
			font-size:1.8rem;
			font-weight:bold;
			padding: 10px 15px 5px 15px;
		}
		

		section#cal month day h2 span.from:before {
			content: '/';
			margin:0px 8px;
		}

		
		section#cal month day p {
			font-size: 1.8rem;
			padding-left: 20px;
			width: calc(70% - 10px);
		}
		
		section#cal month day picture {
			-webkit-filter: saturate(1.6) opacity(0.5) blur(0.6px) brightness(0.9);
			filter: saturate(1.6) opacity(0.5) blur(0.6px) brightness(0.9);
			height:25%;
			margin-left:15px;
		}
		
		section#cal month day .btn {
			border: 2px solid #f5f4f1;
			background-color: transparent;
			height: 4rem;
			margin-top:10px;
			padding: 10px 15px;
			position:relative;
			width:120px;
		}
		
		section#cal month day .btn.ani:before {
			background-color: #fdecec;
			content: 'More';
			font-size:1.8rem;
			font-weight:700;
			left: 10px;
			letter-spacing:0.5px;
			right: unset;
		}
		
		section#cal month day .btn.ani:after {
			color: #f04c5c;
			position:absolute;
			right:15px;
			top:10px;
		}
		
	

		#timetable { 
			width: 100%; 
			table-layout: auto; 
		}
		#timetable .time { 
			width:auto; 
			min-width:auto; 
		}
		#timetable .col {     
			min-width: auto;   
			width: 30%; 
		}
		#timetable th, #timetable td {
			padding: 2px 3px;
		}

	
	
		
		#route-by-car {
			background-color:#fff;
			margin-bottom:0px;
			padding:15px 0px 0px 0px;
			z-index: 1;
		}
		
		#route-by-car .route_finder {
			display:flex;
			display:-webkit-flex;
			flex-direction:column-reverse;
			-webkit-flex-direction:column-reverse;
			padding:0px 20px 20px 20px;
		}
		
		#route-by-car .route_finder .btn {
			flex:1;
			-webkit-flex:1;
			margin: 20px auto auto auto;
			width: 100%;
		}

		#route-by-car .btn.back {
			background-color: transparent;
			border: 2px solid #659562;
			color: #333;
		}
				
		
		
		#stay-in-the-know {
			margin:10px 0px 0px 0px;
			width:100%;
		}
				
		#stay-in-the-know h3,
		#stay-in-the-know p {
			padding-left:30px;
		}
	}


	@media screen and (min-width:992px) {
		
		section#date > * {
			width:50%;
		}

		section#date time {
			text-align:right;
		}

		section#date h2 {
			margin-bottom:13px;
		}

		section#intro .col_a {	width:60% }
		section#intro .img {	width:40% }

		section#intro .col_a,
		section#intro .img {
			margin-bottom:calc(20px + 2vw);
		}

		section#intro {
			padding: calc(30px + 1vw) 7vw calc(30px + 1vw) 13vw;
		}
		
		section#cal {
			padding: calc(30px + 1vw) 7vw;
		}
		
		

		section#cal year > h2 {
			margin-right: 2vw;
			padding-right: 2vw;
			width: auto;
		}
		
		section#cal month > div {
			width: 70%;
		}

		section#cal months { width: 85%; }
		section#cal month { width: 100%; }
		section#cal month > h2 { width: 25%; }

		section#cal month day h2 {
			justify-content: space-between;
			-webkit-justify-content: space-between;
		}		

		section#cal month day h2 span.from {
			flex:1;
			-webkit-flex:1;
			letter-spacing:0.5px;
			text-align:right;
		}

		section#cal month day .address {
			margin-left: 35px;
			display: block;
		}

		section#cal month day .address:before {
			background: url(/_images/icons/placemark-small-blue.svg) no-repeat center bottom;
			background-size: 16px;
			content: ' ';
			float:left;
			height: 30px;
			margin-left: -30px;
			margin-right: 3px;
			width: 27px;
		}


		#route-by-car .route_finder > *:not(:first-of-type) {
			margin-left:15px;
		}
		
		
		#stay-in-the-know {
			background-color:#f8f8f8;
			margin:0px;
			padding:3vw 20px;
			width:100%;
		}
	}
	
	
	@media screen and (min-width:1201px) {
		section#intro div#timescale {
			background: url('/_images/timescale.svg') repeat-y;
			display:block;
			left: 21px;
			width:80px;
		}

		#time {
			display:block;
		}
	}
	


	@media screen and (min-width:1601px) {
		#logo-home {
			background-color:#fff;
		}
		
		section#date,	
		section#intro {
			margin-left:10vw;
			width: calc(100% - 20vw);
		}

		section#intro {
			box-shadow: 0px 0px 6vw rgba(50,50,50,0.5);
		}
	}
	
	
	
	
	
	
	
	/* custom ............................................................... */
	

	@media screen and (max-width:991px) {
		
		body#calendar-event.wkgb-welsh-youth-competition-2025-20 section#intro .col_a {
			padding-left: 75px;
			padding-right: 15px;
		}
		
	}