/* ........................................*/
/* ...........A B O U T ...................*/
/* ........................................*/





/* Lable */

#About h2 {
	display: none;
	color: black;
	}




#About img {
	width: 80%;
	max-width: 225px;
	margin-bottom: 4em;
	}




/* ...... Structure ...... */



.Grid
 	{
	display: flex;
	flex-wrap: wrap;	
	}



.ID,
.Grid
 	{
	position: relative;
	margin-bottom: 2em;
	padding: 0em;
	border-top: 2px solid #8F8D8D;
	margin-top: 6em;
	}
	@media (min-width:640px) {
		.ID,
		.Grid {
			margin-top: 3em;
			}
			}
			
			
	
	#About .Grid>div {
		width: 100%;
		}	
	/* info */
	#About .Grid>div:nth-of-type(1) {
		width: 70%;
	}
	/* Time */
	#About .Grid .Clock {
		width: 30%;
		max-width: 30%;
		border-left: 1px solid rgba(255,255,255,0.15);
		padding-bottom: 6rem;
		}

	
	/* text color */
	.Grid p {
		color: white;
		}



	/* No bullets */
	
		/* Overrides template.css */
		/* no custom bullets */
		[class*='Template']:not(.TemplateHead) .Grid ul:not([class]) li:before {
			display: none;
	 		}
 		
 		

/* Grid Lable */


#About h3 {
	position: absolute;
	display: block;
	height: 2em;
	width: 100%;
	padding-left: 2.75em;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #8F8D8D;
	font-size: .95em;
	top:  -2rem;;
	margin-top: 0; /* overrides typography.css */
	}
	
	


/* Grid Lable Icons */

.ID::before,	
.Grid::before {
	content: "";
	margin-left: -0.25rem;
	position: absolute;
	top: -2.75rem;
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	}

.ID::before{
	background-image: url(../images/skin/icon-id.svg);
	}
.Touch::before{
	background-image: url(../images/skin/icon-touch.svg);
	}	
.BaseCamp::before{
	background-image: url(../images/skin/icon-basecamp.svg);
	}
.Location::before{
	background-image: url(../images/skin/icon-world.svg);
	}




/* ...... Info ...... */


.Info {
	padding: 1.5rem;
	background-color: rgba(0, 0, 0, .10);
	}

	
	
	/* Location colour */		
	.Location .Info
	 	{
		background-color: rgba(0, 0, 0, .50);
		}
	
	
	

/* Typo */

.ID h4 {
	margin-top: 1.5em;
	}	
.ID p {
	padding-right: 2em;
	}
.Touch h4 {
	margin-bottom: .5em;
	}
.Touch h4:nth-of-type(n+2) {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: 1em;
	}
	



.Reverse p.Note {
	font-family: Light;
	letter-spacing: -.05em;
	}


p.Update {
	margin-top: 3em;
	font-size: .5em;
	font-family: Light;
	text-transform: uppercase;
	}

.Reverse p.Update {
	color: rgba(255,255,255,0.4);
	letter-spacing: -.1em;
	}

p.Fony {
	margin-top: -0.75em;
	margin-bottom: 3em;
	font-size: .7em;
	font-family: Light;
	}





/* ...... Clock ...... */

.Clock {
	position: relative;
	text-align: center;
	background-color: rgba(0, 0, 0, .10);
	}
	

	
	
	
	
.Location .Clock {
	background-color: rgba(0, 0, 0, .5);
	}	

	/* Clock Icons & lable */
	
	.Clock p {
		margin-top: 1.5rem;
		font-size: 1em;
		}
	
	.Clock p::before,
	.Clock p::after {
		content: "";
		display: block;
		position: absolute;
		}

	/* Clock Icons */
	.Clock p::before {
		width: 3rem;
		height: 3rem;
		top: 4.5rem;
		left: 50%;
		margin-left: -1.5rem;
		/*background-image: url(../images/skin/icon-time.svg);*/
		}


	/* Clock Lable */
	.Clock p::after {
		color: RGBA(255,255,255,0.3);
		text-transform: uppercase;
		font-size: .6rem;
		top: 2.75rem;
		line-height: .8rem;
		width: 80%;
		left: 50%;margin-left: -40%;
		
		}
	.Touch #PatricTime::after {
		content: "At Patric's location";
		}	
	.Location #LocationTime::after {
		content: "At this location";
		}
	.BaseCamp #BaseTime::after {
		content: "At Base Camp";
		}	


/* ...... I M A G E ...........*/


.Image {
	width: 100%;
	min-height: 8em;
	border: none;
	background-size: cover;
	background-position: center center;
	}
	
.BaseCamp .Image {
	background-image: url(../images/skin/basecamp.jpg);
	}
	
.Location .Image {
	background-image: url(../images/skin/location.jpg);
	}	
	
	
		

/* ....... A C T I O N  .........*/ 





/* Action */
#About .Grid .Action {
	border-top: 1px solid rgba(255,255,255,0.15);
	margin-bottom: 0;
	height: 8em;
	overflow: hidden;
	}

/* ul */

.Action ul {
	background-color: rgba(0, 0, 0, .25);
	border-radius: 0 0 1rem 1rem;
	overflow: hidden;
	padding: 0;
	display: flex;
	height: 100%;
	}	
	[class*='Template']:not(.TemplateHead) .Action ul:not([class]) {
		padding-left: 0em;
		margin-bottom: 0em;
		}
	
	.Location .Action ul {
	background-color: rgba(0, 0, 0, .55);
	}
	
	
	/*li*/
	
	.Action li {
		display: block;
		width: 100%;
		margin-bottom: 0;
		text-align: center;
		}
		
	
		
		/* Left Divider */
		.Action li:nth-child(n+2) {
			border-left: 1px solid rgba(255,255,255,0.15);
			}	
		
		

		
		
	/* Li Icons */
	.Action li::after { /* ::before conflicts with custom bullets removal */
		content: "";
		position: absolute;
		display: block;
		top: 2rem;
		left: 50%;
		width: 1.25rem;
		margin-left: -0.625rem;;
		height: 1.25rem;
		background-repeat: no-repeat;
		filter: saturate(0) opacity(0.4);
		}
		.Action li:hover::after {
			filter: saturate(0) opacity(0.8);
			}		
		
		.Action li.Mail::after {
			background-image: url(../images/skin/icon-mailpin.svg);
			}
		.Action li.Locate::after {
			background-image: url(../images/skin/icon-locationpin.svg);
			}
		.Action li.Komoot::after {
			background-image: url(../images/skin/icon-komootpin.svg);
			}
				

	.Action li>* {
		display: block;
		height: 100%;
		padding-top: 3.5rem;
		padding-bottom: 2rem;
		padding-left: 1rem;
		padding-right: 1rem;
		}	
		
		
		
	
/* URL */

.Action a{
	color: #C1D82E;
	}
	
	
	
	
	/* hover */
		.Action a:hover {
			background-color: rgba(0,0,0,0.8);
			}	
	

		
		
		
/* Phones */ 

#About .Touch .Info ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	}

	#About .Touch .Info li {
		display: block;
		width: 3.5rem;
		height: 4rem;
		background-size: 60%;
		background-position: center .25rem;
		background-repeat: no-repeat;
		background-image: url(../images/skin/icon-phone.svg);
		filter: brightness(1.25);
		margin-bottom: 0;
		transition: all .5s ease-in-out 0s;
		}

		
		
	#About .Touch .Info li.WhatsApp {
		background-image: url(../images/skin/icon-whatsapp.svg);
		}
	#About .Touch .Info li.iMessage {
		background-image: url(../images/skin/icon-imessage.svg);
		}
	#About .Touch .Info li.Facetime {
		background-image: url(../images/skin/icon-facetime.svg);
		}
	
	
	
	/* off */
	
	#About .Touch .Info li.Off::before {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent;
		border-radius: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: 70%;
		background-position: center top;
		background-image: url(../images/skin/icon-off.svg);
		filter: opacity(0);
		transition: all 1s ease-in-out 0s;
		}	

	#About .Touch .Info li.Off:hover::before {
		filter: opacity(1);
		}	

	li.Off:hover::after {
		/*content: "Off until June";*/
		}


		
		
	/* hover */	
	#About .Touch .Info li:hover {
		filter: brightness(2);'
		}


			

	/* Off */
		#About .Touch .Info li.Off {
		color: rgba(255,255,255,0.25);
		filter: brightness(.9);
		}
		
		#About .Touch .Info li.Off:hover {
		filter: brightness(1);
		}
		
		
		
		
		.Phone::after {
			content: "Canada Mobile";
			position: absolute;
			top: 2.5rem;
			text-transform: uppercase;
			font-size: .5em;
			width: 100%;
			display: block;
			text-align: center;
			line-height: 1.1em;
			}
			
			
			
			
			
		.Phone.WhatsApp::after {
			content: "WhatsApp";
			}			
		.Phone.iMessage::after {
			content: "iMessage";
			}	
		.Phone.Facetime::after {
			content: "FaceTime";
			}			
		.Phone.Travel::after {
			content: "India Mobile";
			}			
			
	
	/* url */		
			
	#About .Touch .Info li a {
	display: block;
	width: 100%;
	height: 100%;
	}		
			
	
		
/* ----- Phone tile option ------ */

#About .Touch .Info li {
		width: 3.25rem;
		/*background-color: rgba(0, 0, 0, .1);*/
		border-radius: .5rem;
		margin-right: .25em;	
		margin-bottom:  .25em;		
		}
#About .Touch .Info li:hover::after {
		color: #C1D82E;
		filter: brightness(.5);

		}
#About .Touch .Info li.Off:hover::after {
		color: rgba(255,255,255,0.25);
		filter: brightness(1);
		}		
		
		
#About .Touch .Info li.Off {
		background-color: rgba(0, 0, 0, 0);
			}
				
		
	#About .Touch .Info li:hover {
		background-color: rgba(0, 0, 0, .35);
		}		
	#About .Touch .Info li.Off:hover {
		background-color: rgba(0, 0, 0, 0);
		}