/* @override 
	http://localhost/css/style.css */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&family=Roboto:wght@100;400;700&display=swap');

:root {
  --rar: #CE2027;
  --gery:#515458;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}

html,body {
	/*overflow-x: hidden;*/
} 
footer,section {
	text-align: center;
	padding: 100px 0;
	/*background-color: #222;*/
}

/*#CE2027*/

p,ul,li,span,a {
	font-size: 16px;
	line-height: 22px;
	font-weight: 100;
}

a {
	color: var(--rar);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h1,h2,h3,h4,h5,input[type=submit] {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 100;
}

h1 {
	font-size: 32px;
	font-weight: 300;
}
h2 {
	font-size: 28px;
}
h3 {
	font-size: 24px;
}
h4 {
	font-size: 24px;

}

.iw {
	margin: 0 auto;
	padding:0 0 100px 0;
	max-width: 1024px;
	position: relative;
}

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
 
 section#strava {
 	background-color: #222222;
 	color: #f1f1f1;
 }
 
 section#strava h2 {
 	color: #222222;
 }
 
#map {
  height: 100%;
  height: 600px;
}

.filters {
	text-align: left;
	margin: 0 0 10px 0;
}
/* ROUTES */
.dropdown {
	display: inline-block;
	/*background-color: #f20;*/
	border-bottom: 1px solid #f1f1f1;
	padding: 5px 10px;
	position: relative;
	width: 110px;
}
.dropdown > div {
	position: absolute;
	width: 100%;
	background-color: #f1f1f1;
	left: 0;
	top: 32px;
	display: none;
	z-index: 1;
	position: absolute;
}
.dropdown label {
	width: 100%;
	display: block;	
	display: grid;
	grid-template-columns: auto 20px;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	padding:5px 10px;
	color: #333;
	cursor: pointer;
	font-size: 12px;

}
.dropdown label input {
	margin: auto;
	cursor: pointer;
}

.dropdown:hover > div {
	display: block;
	
}

#strava .grid-2 {
	grid-template-columns: auto 25%;
}

.route {	
	margin: 0 0 5px 0;
	background-color: #2f2f2f;
	text-align: left;
	padding: 10px;
	cursor: pointer;

}

.route.active {
	background-color: #444;
	box-shadow: 0px 1px 1px #000;
}
.route * {
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.route h4 {
	font-size: 18px;
}
.route p {
	font-size: 14px;
}
.route strong {
	color: var(--rar);
	font-weight: 300;
}

.route img {
	background-color: #F20;	
	border: 1px solid #ccc;
	width: 50px;
}

.iw > h2 {
	position: absolute;
	top: -210px;	
	font-size: 128px;
	font-weight: 900;
	height: 110px;
	width: 100%;
	overflow: hidden;
	text-align: left;
	font-style: italic;
	letter-spacing: -8px;
	
}

#banner {	
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 600px;
}

#banner > div {
	height: 100%;
	width: 100%;
	margin: 0 auto;
	background-color: var(--rar);
	background-position: center center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	transition: 1s;
}

#banner.above > div {
	 transform: scale(1.2);
}

/* GLOBALS */

.sticky {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 10px;
}

/* FROMS */

form {
	/*text-align: left;*/
	transform: skew(1deg);
}

textarea, 
input[type=text] {
	border: none;
	width: 100%;
	padding: 10px;
	margin: 0 0 10px 0;
}
input[type=submit] {
	border: none;
	padding: 10px 40px;
	background-color: #CA2024;	
	width: auto;
	font-size: 20px;
	text-transform: uppercase;
	text-align: left;
	color: #fff;
	font-weight: 800;
	font-style: italic;
	cursor: pointer;
} 
/* GRID */

.grid-2 {
	display: grid;
	grid-template-columns: auto 33%;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* HEADER  */

header {	
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;	
	/*background-color: #fff;*/
}

header h1 {
	padding: 10px;
	display: inline-block;
	border-radius: 0 0 10px 10px;
	background-color: #fff;
}

/* FEEDS */
section#updates {
	padding: 40px 0 50px 0;
}
section#updates .iw > h2 {
	color: #fff;
	top: -200px;
	text-shadow: 0 2px 2px #000;
}

#updates div.iw > p {
	font-size: 18px;
	text-align: center;
	max-width: 500px;
	margin: 50px auto 100px auto;
}

#feeds {
	text-align: left;
}

.feed {
	background-color: #f1f1f1;
	margin: 0 0 50px 0;
	padding: 20px;
	display: grid;
	grid-template-columns: 100px auto;
	grid-column-gap: 20px;
	grid-row-gap: 0px;
}

.feed img {
	background-color: #333;
	height: auto;
	max-width: 100%;
	filter: grayscale(100%); 
	transition: filter 1s ease-in-out;
}
.feed.inside img {
	filter: none;
}

.show-more a {
	text-align: center;		
	display: inline-block;
	width: 100%;
	padding:10px 20px;
	background-color: #f1f1f1;
}

.feed p {
	margin: 0 0 30px 0;
}

.feed .date {
	/*font-weight: 500;*/
	font-size: 12px;
	color:var(--rar);
	display: block;
}

.feed .read-more {
	display: none;		
}
.feed span.class-toggle {
	cursor: pointer;
	padding: 10px 0;	
	color: var(--rar);
}
	
.feed span.class-toggle:after {
	content: "Read More";	
}

.feed div.show span.class-toggle:after {
	content: "Show Less";
}

.feed div.show .read-more {
	display: block;
}

/* Calendar */

#updates .iw > .grid-2 {
	grid-template-columns: auto 386px;
}

div#calendar div.sticky div.controls {
	display: grid;
	grid-template-columns: auto 30px 30px;
	text-align: left;
	margin: 0 0 10px 0;
}

#calendar div.sticky div.controls i {
	margin: 5px 0 0 0;
}
#calendar.list i.icon-align-justify,
#calendar i.icon-calendar {
	color: #990000;
	pointer-events: none;
	cursor: auto;
}
#calendar i.icon-align-justify,
#calendar.list i.icon-calendar {
	color: #fff;
	pointer-events:  auto;
	cursor: pointer;
}


#calendar .sticky {
	background-color: var(--rar);
	background: rgb(177,0,7);
	background: linear-gradient(8deg, rgba(177,0,7,1) 0%, rgba(206,32,39,1) 82%);
	color: #fff;
	top: 10px;
	padding: 20px;
	box-shadow: 0px 1px 1px #333;
}

.calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-column-gap:1px;
	grid-row-gap: 1px;
	padding: 10px 0;
}

.calendar > div {
	height: 46px;
	/*background-color: #f20;*/
	padding: 5px;
	position: relative;
	text-align: left;
}
.calendar > div.title {
	height: 24px;
	border-bottom: 1px dashed #990000;
	padding: 0 0 5px 0;
}
.calendar > div span {
	width: 100%;
	display: block;
	height: 18px;
}

.calendar > div span.long-date {
	display: none;
}

.type-note {
	width: 10px;
	height: 10px;
	background-color: #f20;
	border-radius: 20px;
	display: inline-block;
}

.type-note.mtb {
	background-color: #fff;
}
.type-note.gravel {
	background-color: #555;
}
.type-note.road {
	background-color: #000;
}

.calendar > div .events {
	display: none;
	position: absolute;
	width: 200px;
	background-color: #f1f1f1;	
	border-radius: 4px;
	padding: 10px;
	color: #333;
	z-index: 1;
	bottom: 60px;
	left: 50%;
	margin: 0 0 0 -100px;
	text-align: left;
}
.calendar > div .event {
	border-top: 1px solid #ccc;
	padding: 10px 0;
	line-height: 16px;
}
.calendar > div .event:first-child {
	border: none;
}
.calendar > div .events h4 {
	font-size: 14px;	
}
.calendar > div .events a,
.calendar > div .events p {
	font-size: 12px;
	line-height: 14px;
}
.calendar > div.active {
	background-color: #990000;
	border-radius: 4px;
}

.calendar > div .events:after {
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-top: 20px solid #f1f1f1;
	content: "";
	position: absolute;
	bottom: -30px;
	margin: 0;
	left: 80px;
}

.calendar > div:hover .events {
	display: block;
}
.calendar-legend {
	margin: 10px 0;
}
.calendar-legend span {
	padding: 0 20px 0 10px;
}
.calendar-controls .prev {
	text-align: left;
}
.calendar-controls .next {
	text-align: right;
}




/* CALENDAR LIST STYLE */

#calendar.list .calendar {
	display: block;
	/*grid-template-columns: repeat(5, 1fr);*/
	/*grid-template-rows: repeat(5, 1fr);*/
	/*grid-column-gap: 0px;*/
	/*grid-row-gap: 0px;*/
}
#calendar.list .calendar > div .events:after,
#calendar.list .calendar .type-note,
#calendar.list .calendar .blank,
#calendar.list .calendar .date,
#calendar.list .calendar .title {
	display: none;
}

#calendar.list .calendar .date.active {
	display: block;
	height: auto;
	margin: 0 0 5px 0;
}

#calendar.list .calendar > div .events {
	display: block;
	position: relative;
	left: 0;	
	bottom: inherit;
	margin: 0;
	width: 100%;
	background-color: transparent;
	border-radius: 0;
}

#calendar.list .calendar > div .events * {
	color: #fff;
}

#calendar .calendar > div span.long-date,
#calendar.list .calendar > div span.short-date {
	display: none;
}

#calendar .calendar > div span.short-date,
#calendar.list .calendar > div span.long-date {
	display: block;
}

/* TEAMS */
section#team {
	background-color: #f1f1f1;
	color: #333;
	margin: 100px 0 0 0;
	position: relative;
	
	background: #e5e5e5;
	background: -webkit-linear-gradient(to top, #f1f1f1, #e5e5e5);
	background: linear-gradient(to top, #f1f1f1, #e5e5e5); 
	
}
section#team h2 {
	color: #e5e5e5;
}
#team .iw {
	/*overflow-x: hidden;*/
}

/*#team .iw:before {
	content: '';
	position: absolute;
	width: 102%;
	height: 100px;
	background-color: #f1f1f1;
	z-index: -1;
	left: -1%;
	top: -50px;
	transform: rotate(-1deg);
}*/

#team .iw > div {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.member {
	/*box-shadow: 0px 3px 5px #ccc;*/
}

.member .flip-card-inner {
	background-color: #fff;
	border-radius: 8px;
	height: 300px;	
	/*box-shadow: 0px 3px 5px #ccc;*/
	border: 10px solid #fff;
	position: relative;
}

.member .flip-card-inner .flip-card-front div {
	background-size: cover;
}
/*.member > div {
	height: 100%;
	width: 100%;
	border-radius: 6px;
	background-size: cover;
}*/

.member p {
	color: #fff;
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: 10px 10px 30px 10px;
	z-index: 1;
	line-height: 16px;
}
.member p:after {
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	background-color: #333;
	opacity: 0.5;
	z-index: -1;
}
.member h4 {
	position: absolute;
	bottom: -8px;
	left: 0;
	font-weight: 900;
	color: #fff;
	font-style: italic;
	z-index: 2;
}
section#image-gallery h2 {
	color: #f1f1f1;
}
section#image-gallery {  	
	background: #f1f1f1;
	/*background: -webkit-linear-gradient(to top, #CE2027, #990000);
	background: linear-gradient(to top, #CE2027, #990000); */
	color: #fff;
	text-shadow: 0 1px 1px #333;
}
section#image-gallery .iw {
	
}

.gallery  {
	display: grid;
	grid-template-columns:auto auto auto ;
	grid-template-columns:auto auto auto ;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
		transform: skew(-1deg);
}

.gallery div {
	width: 100%;
	height: 300px;
	background-size: cover;
	background-position: center;
	background-color: #000;
	opacity: 0.1;
	transition: 2s;
	box-shadow: 0px 1px 1px #fff;
}

.gallery div.inside {
	opacity: 1;
}

.gallery img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
 
footer {
	color: #f1f1f1;
	text-align: left;
	background: #222;
}

footer .iw h2 {
	color: #222;
}

footer .grid-3 {
	grid-column-gap: 100px;
}

footer textarea::placeholder,
footer input[type=text]::placeholder {
	color: #f1f1f1;
	font-style: italic;
}
footer textarea,
footer input[type=text] {
	background-color: #333;
	border: 1px solid #111;
	color: #fff;
}
footer input[type=submit] {
	/*background-color: #555;
	border: 5px solid #999;
	color: #999;
	text-shadow: none;
	box-shadow: 0px 1px 5px #000;
	transition: 0.2s;*/
}

footer input[type=submit]:hover {
	color: #fff;
	background-color: #990000;
}

footer h4 {
	margin: 0 0 20px 0;
}
footer a {
	width: 100%;
	display: block;
	text-align: left;
}

footer .copywrite {
	padding: 10px;
	font-size: 12px;
	color: #666;
	margin: 100px 0 0 0;
	text-align: center;
}

/* FLIP CARDS */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  height: 300px;  
  background-color: transparent;
  transition: 2s;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

#team.inside .flip-card {
	transform: skew(-2deg);
}

/* This container is needed to position the front and back side */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.5s;
	transform-style: preserve-3d;	
	box-shadow: 0px 3px 1px #ccc;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  border-radius: 0px;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  
}

.flip-card-front {
	border: 10px solid #fff;
	z-index: 8;
}

.flip-card-front h4 {
	position: absolute;
	bottom: -8px;
	left: 5px;
	font-weight: 900;
	color: #fff;
	font-style: italic;
	z-index: 3;
}
.flip-card-front p {
	position: absolute;
	width: 100%;
	left: 0;
	padding: 10px 10px 30px 10px;
	bottom: 0;
	z-index: 2;
	color: #f1f1f1;
	font-weight: 300;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
}

.flip-card-front p:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: -1;
	opacity: .5;
	left: 0;
	bottom: 0;
}

.flip-card-front > div {
	height: 100%;
	position: relative;
	background-size: cover;
}

/* Style the back side */
.flip-card-back {
  background-color: var(--rar);
  background: rgb(177,0,7);
  background: linear-gradient(8deg, rgba(177,0,7,1) 0%, rgba(206,32,39,1) 82%);
  color: white;
  transform: rotateY(180deg);
  text-align: left;
  padding: 20px;
  z-index: 9;
}

.flip-card-back a {
	color: #fff;
	font-size: 22px;
}

.flip-card-back * {
	margin: 0 0 10px 0;
}














/* FIN */