/* 
/* Copyright (c) 2022 Samuel ONeal 
/* Author: Samuel ONeal 
/* This files is for custom CSS rules for new pages for Tokyo specific pages 01) WORK EXPERIENCE 02) Theme 
/*---------------------------------------------------*/
/* 01) WORK EXPERIENCE 
/*---------------------------------------------------*/
:root {
	 --background-color-primary: #ebebeb;
	 --background-color-secondary: #fafafa;
	 --accent-color: #cacaca;
	 --text-primary-color: #222;
	 --element-size: 4rem;
	 --accent-color-2: #a44a37;
}

.tokyo_tm_custom_work_experience {
	 width: 100%;
	 height: auto;
	 clear: both;
	 float: left;
	 padding: 100px 0px 50px 0px;
	 position: relative;
}

.tokyo_tm_custom_work_experience .work_experience_timeline {
	display: block;
	min-height: 100vh;
	padding: 100px 0;
}

.tokyo_tm_custom_work_experience .work_experience_timeline .timeline-item {
	padding: 3em 2em 2em;
	position: relative;
	color: var(--background-color-primary);
	border-left: 2px solid var(--background-color-secondary);

	p {
		font-size: calc(var(--element-size) / var(--element-size));
		color: var(--text-primary-color);
	}

	&::before {
		content: attr(date-is);
		position: absolute;
		left: 2em;
		font-weight: bold;
		top: 1em;
		display: block;
		font-weight: 700;
		font-size: calc(var(--text-primary-color) * 0.5);
		color: var(--text-primary-color);
	}

	&::after {
		width: 10px;
		height: 10px;
		display: block;
		top: 1em;
		position: absolute;
		left: -7px;
		border-radius: 10px;
		content: '';
		border: 2px solid var(--accent-color-2);
		background: var(--background-color-primary);
	}

	&:last-child {
		border-image: linear-gradient(
			to bottom,
			var(--accent-color-2) 60%,
			rgba(var(--accent-color-2), 0)) 1 100%;
	}

	.date, .title, .employeer, .description {
		width: 100%;
		display: block;
	}
}

/*---------------------------------------------------*/
/* 02) Theme 
/*---------------------------------------------------*/
 .tokyo_tm_all_wrap .leftpart .leftpart_inner .switch-checkbox {
	 display: none;
}
 .tokyo_tm_all_wrap .leftpart .leftpart_inner .switch-label {
	 width: var(--element-size);
	 border-radius: var(--element-size);
	 border: calc(var(--element-size) * 0.025) solid var(--accent-color);
	 padding: calc(var(--element-size) * 0.1);
	 font-size: calc(var(--element-size) * 0.3);
	 height: calc(var(--element-size) * 0.5);
	 align-items: center;
	 background: var(--text-primary-color);
	 cursor: pointer;
	 display: flex;
	 position: relative;
	 transition: background 0.5s ease;
	 justify-content: space-between;
	 z-index: 1;
}
 .tokyo_tm_all_wrap .leftpart .leftpart_inner .switch-label .switch-toggle {
	 position: absolute;
	 background-color: var(--background-color-primary);
	 border-radius: 50%;
	 top: calc(var(--element-size) * 0.02);
	 left: calc(var(--element-size) * 0.001);
	 height: calc(var(--element-size) * 0.4);
	 width: calc(var(--element-size) * 0.4);
	 transform: translateX(0);
	 transition: transform 0.3s ease, background-color 0.5s ease;
}
 .tokyo_tm_all_wrap .leftpart .leftpart_inner .switch-label .switch-toggle-checked {
	 transform: translateX(calc(var(--element-size) * 0.6)) !important;
}
 .tokyo_tm_all_wrap .dark .leftpart .leftpart_inner .logo {
	 margin-top: 15px;
}
 
/*---------------------------------------------------*/
/* 03) BLOG 
/*---------------------------------------------------*/

.tokyo_tm_custom_blog {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 100px 0px 50px 0px;
	position: relative;
}

.tokyo_tm_custom_blog .blog-card {
	display: flex;
	flex-direction: column;
	margin: 1rem auto;
	box-shadow: 0 3px 7px -1px rgba(#000, .1);
	margin-bottom: 1.6%;
	line-height: 1.4;
	border-radius: 5px;
	overflow: hidden;
	z-index: 0;
	a {
	  color: inherit;
	}
	&:hover {
	  .photo {
		transform: scale(1.3) rotate(3deg);
	  }
	}
	.meta {
	  position: relative;
	  z-index: 0;
	  height: 200px;
	}
	.photo {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-size: cover;
	  background-position: center;
	  transition: transform .2s;
	}
	.details,
	.details ul {
	  margin: auto;
	  padding: 0;
	  list-style: none;
	}
  
	.details {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: -100%;
	  margin: auto;
	  transition: left .2s;
	  background: rgba(#000, .6);
	  padding: 10px;
	  width: 100%;
	  font-size: .9rem;
	  a {
		text-decoration: dotted underline
	  }
	  ul li {
		display: inline-block;
	  }
	  .author:before {
		margin-right: 10px;
		content: "\f007";
	  }
  
	  .date:before {
		margin-right: 10px;
		content: "\f133";
	  }
  
	  .tags {
		ul:before {
		  content: "\f02b";
		  margin-right: 10px;
		}
		li {
		  margin-right: 2px;
		  &:first-child {
			margin-left: -4px;
		  }
		}
	  }
	}
	.description {
	  padding: 1rem;
	  position: relative;
	  z-index: 1;
	  h1 {
		line-height: 1;
		margin: 0;
		font-size: 1.7rem;
	  }
	  h2 {
		font-size: 1rem;
		font-weight: 300;
		text-transform: uppercase;
		margin-top: 5px;
	  }
	  .read-more {
		text-align: right;
		a {
		  display: inline-block;
		  position: relative;
		  &:after {
			content: "\f061";
			margin-left: -10px;
			opacity: 0;
			vertical-align: middle;
			transition: margin .3s, opacity .3s;
		  }
  
		  &:hover:after {
			margin-left: 5px;
			opacity: 1;
		  }
		}
	  }
	}
	p {
	  position: relative;
	  margin: 1rem 0 0;
	  &:first-of-type {
		margin-top: 1.25rem;
		&:before {
		  content: "";
		  position: absolute;
		  height: 5px;
		  width: 35px;
		  top: -0.75rem;
		  border-radius: 3px;
		}
	  }
	}
	&:hover {
	  .details {
		left: 0%;
	  }
	}
  
  
	@media (min-width: 640px) {
	  flex-direction: row;
	  max-width: 700px;
	  .meta {
		flex-basis: 40%;
		height: auto;
	  }
	  .description {
		flex-basis: 60%;
		&:before {
		  transform: skewX(-3deg);
		  content: "";
		  background: #fff;
		  width: 30px;
		  position: absolute;
		  left: -10px;
		  top: 0;
		  bottom: 0;
		  z-index: -1;
		}
	  }
	  &.alt {
		flex-direction: row-reverse;
		.description {
		  &:before {
			left: inherit;
			right: -10px;
			transform: skew(3deg)
		  }
		}
		.details {
		  padding-left: 25px;
		}
	  }
	}
  }