*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

@font-face {
  font-family: IRANSansX;
  src: url('./fonts/IRANSansX-Medium.woff2') format('woff2') /* FF39+,Chrome36+, Opera24+*/,
       url('./fonts/IRANSansX-Medium.woff') format('woff') /* FF3.6+, IE9, Chrome6+, Saf5.1+*/,
       url('./fonts/IRANSansX-Medium.ttf') format('truetype');
}
@font-face {
  font-family: IRANSansXBold;
  src: url('./fonts/IRANSansX-Bold.woff2') format('woff2') /* FF39+,Chrome36+, Opera24+*/,
       url('./fonts/IRANSansX-Bold.woff') format('woff') /* FF3.6+, IE9, Chrome6+, Saf5.1+*/,
       url('./fonts/IRANSansX-Bold.ttf') format('truetype');
}

html
{
	font-size:100%;
}

body
{
	-webkit-font-smoothing:antialiased;
	color:#333332;
        font-family:IRANSansX;
	font-size:18px;
	font-weight:500;
	line-height:1.4;
	text-rendering:optimizeLegibility;
}

.skill-set li:hover
{
/*	background:#3498db; */
}

h1
{
	color:rgba(0,0,0,.75);
}

.wrapper
{
	height:100%;
}

.left
{
	background-color:rgba(0,0,0,.025);
	border-right:1px solid rgba(0,0,0,.05);
	float:right;
	height:100%;
	margin-left:-1px;
	min-width:256px;
	position:fixed;
	width:33.33%;
  
}

.right
{
	float:right;
	height:100%;
	position:relative;
	width:66.66%;
}


.name-hero
{
	background:rgba(0,0,0,.001);
	bottom:0;
	height:290px;
	left:0;
	margin:auto;
	position:absolute;
	right:0;
	top:0;
	width:85%;
}

.me-img
{
	background:url(https://qodsi.ir/LhamQodsiAvatar.jpeg) no-repeat center center ;
	background-size:100%;
  background-position:0px;
	border-radius:100%;
	height:150px;
	margin:0 auto;
	position:relative;
	width:150px;
}

.name-hero h1
{
        font-family:IRANSansXBold;
        font-weight: bold;
	font-size:2em;
	text-align:center;
}

.name-hero h1 em
{
	color:rgba(0,0,0,.55);
	font-style:normal;
	font-weight:800;
}

.name-hero p
{
	color:rgba(0,0,0,.85);
	font-size:1em;
	line-height:1.25;
	margin:0 8px 0 0;
	text-align:center;
}

.name-hero .name-text
{
	margin:0 auto;
	width:85%;
}

.inner
{
	margin:0 auto;
	max-width:975px;
	padding:3em;
}

.inner h1
{
	font-size:1.75em;
}

.inner p
{
	color:rgba(0,0,0,.5);
}

.inner p em
{
	color:rgba(0,0,0,1);
	font-style:normal;
}

.inner section
{
	margin:70px auto;
}


.show-ul
{
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
	background:rgba(10,10,10,.45);
	border-radius:5px;
	margin:15px 15px 15px 15px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.35);
}

.job-details
{
	background:rgba(10,10,10,.55);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}
.job-details-sub
{
	background:rgba(10,10,10,.35);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:10px 10px 0 0;
	padding:10px;
	text-align:justify;
}
.profile-link
{
        text-decoration: none;
	color:rgba(0,0,0,.75);
}
.ul-link
{
	color:#FFF;
        text-decoration: none;
}
.show-ul:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.job-section ul
{
	list-style-type:none;
	margin-top:-10px;
	max-width:1200px;
	padding:0;
}

.skill-section ul
{
	list-style-type:none;
	margin-top:-10px;
	max-width:570px;
	padding:0;
}

.skill-set li
{
	background:rgba(0,0,0,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}
.skill-set1
{
	background:rgba(0,40,0,.85);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}
.skill-set2
{
	background:rgba(55, 106, 15,.85);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}
.skill-set3
{
	background:rgba(22,73,7,.85);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}
.skill-set3-blue
{
	background:rgba(0,0,40,.85);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job
{
	background:rgba(0,0,0,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job1
{
	background:rgba(0,0,80,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job2
{
	background:rgba(0,80,00,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job3
{
	background:rgba(160,00,80,.95);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job4
{
	background:rgba(80,80,00,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job5
{
	background:rgba(80,0,80,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job6
{
	background:rgba(80,160,00,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job7
{
	background:rgba(80,0,160,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

.job8
{
	background:rgba(160,80,00,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}
.job9
{
	background:rgba(160,00,80,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

@media screen and (max-width: 48em) {
	.right,.left
	{
		float:none;
    position:relative !important;
		width:100%;
    min-height:500px;
	}
  .handmade {
  text-align:center !important;
  margin-top:0px !important;
}

@media screen and (max-width: 75em) {
    body
{ font-size:16px;}
}

@media screen and (max-width: 60em) {
    body
{ font-size:14px;}
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.handmade {
  text-align:right;
  margin-top:100px;
}
.handmade em {
  font-family: 'Shadows Into Light', cursive;
  font-size: 1.25em;
  margin-left:5px;
}