/*
Theme Name: Mahshid Ebadi
Description:  official website
Developed by Farzin Mojaver
Developer URI: https://www.linkedin.com/in/farzin-mojaver-a687871a7/
Version: 1.0
*/
@font-face {
    font-family: sen;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Sen-Regular.ttf') format('truetype');	 
}
@font-face {
    font-family: sen;
    font-style: normal;
    font-weight: bold;
    src: url('fonts/Sen-Bold.ttf') format('truetype');	 
}
/***************************************************
				General
***************************************************/
html {
	background: #fff;
}
body {
    width: 100%;
    min-height: 200vh
	padding:0;
	margin:0;
	-webkit-font-smoothing: antialiased;
    font-family: 'sen', sans-serif;
    color: #fff;
	font-size:16px;
	-webkit-text-size-adjust: 100%;
	background:#fff !important;
    scroll-behavior: smooth;
	color: #000000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	direction:ltr;
}
* {
    outline: none;
}
*::after,
*::before {
	box-sizing: border-box;
}
ul {
	margin:0;
	padding:0;
}
li {
	list-style:none;
    color: #000;
}
a {
    font-family: 'sen', sans-serif;
    font-size:16px;
    color:#000;
}
a:link {
	text-decoration: none;
    color:#000000;
}
a:visited {
	text-decoration: none;
    color:#000000;
}
a:focus,
a:hover {
	text-decoration: none;
    color:#000000;
}
a:active {
	text-decoration: none;
    color:#000000;
}
a[href^=tel]{
	color:inherit;
	text-decoration:none;
}
img {
    width: 100%;
    height: auto;
}
input, textare{
    font-family: 'sen', sans-serif;
    font-size:1em;
}
textarea:focus, input:focus{
	outline: 0;
    font-family: 'sen', sans-serif;
}
::-webkit-input-placeholder {
	color: #000000;
    font-family: 'sen', sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
	color: #000000;
    font-family: 'sen', sans-serif;
}
::-moz-placeholder {/* Firefox 19+ */
	color: #000000;
    font-family: 'sen', sans-serif;
}
:-ms-input-placeholder {
	color: #000000;
    font-family: 'sen', sans-serif;
}
figure {
    margin: 0;
}
img {
	border:0;
	border:none;
    outline: none;
}
figure img {
	width: 100%;
    height: auto;
}
span,
p {
    font-family: 'sen', sans-serif;
    font-size:1.2vw;
    color: #000000;
}
span {
    font-family: 'sen', sans-serif;
    font-size:16px;
}
iframe {
	border:none;
}
.clear{
	clear:both;
}
.loader {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	right:0;
	z-index:999999;
	background:#fff;
    display: block;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.loader-wrap {
    width: 160px;
    height: auto;
    margin-bottom: 40px;
}
.loader-bottom {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 1px;
    right: 0;
    transform: translateY(100%);
}
body.loaded .loader {
    animation: transY 1s ease-in .5s forwards;
}
@keyframes transY {
  100% {
      transform: translateY(-120%);
  }
}
body.loaded main {
    animation: fadeIn 1s ease-in 0.7s forwards;
}
@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(40px);
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}
body.loaded .header {
    animation: slideDown 1s ease-in 0.7s forwards;
}
@keyframes slideDown {  
  0% {
      opacity: 0;
      transform: translateY(-40px);
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}
/***************************************************
				header
***************************************************/
.header,
.home-header {
    width: 280px;
    height: -moz-calc(100vh - 80px);
    height: -webkit-calc(100vh - 80px);
    height: -o-calc(100vh - 80px);
    height: calc(100vh - 80px);
    background: #fff;
    position: fixed;
    z-index: 99;
    top:40px;
    left: 40px;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-direction:column;
}

.header nav,
.home-header nav {
	display:block;
}
#logo {
    position: absolute;
    bottom: 0;
    display: block;
    left: 0;
	font-size:1.4vw;
	text-transform:uppercase;
}
nav li a {
	font-size:1.3vw;
	transition:all .3s ease-in;
}
nav li a:focus,
nav li a:hover {
	margin-left:5px;
}
nav li a.actv {
	text-decoration:line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: #777 !important;
	color:#777 !important;
}
nav li a.actv:focus,
nav li a.actv:hover {
	margin-left:0 !important;
	cursor:default !important;
}
.burger {
	width:30px;
	height:30px;
	display:none;
	cursor:pointer;
	margin-top:-5px;
	position:relative;
}
.burger span {
  position: relative;
  margin-top: 9px;
  margin-bottom: 9px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -1.5px;
}
.burger span, 
.burger span::before, 
.burger span::after {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #000;
  outline: 1px solid transparent;
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color, transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.burger span::before, 
.burger span::after {
  position: absolute;
  content: "";
}
.burger span::before {
  top: -9px;
}
.burger span::after {
  top: 9px;
}
.burger.actv span {
  background-color: transparent;
}
.burger.actv span::before {
  -webkit-transform: translateY(9px) rotate(45deg);
  -moz-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  -o-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}
.burger.actv span::after {
  -webkit-transform: translateY(-9px) rotate(-45deg);
  -moz-transform: translateY(-9px) rotate(-45deg);
  -ms-transform: translateY(-9px) rotate(-45deg);
  -o-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}
.burger.actv span:before, 
.burger.actv span:after {
  background-color: #000;
}
.burger:hover {
  cursor: pointer;
}
.lang {    
	width: 40px;
    height: 20px;
    position: fixed;
    bottom: 70px;
}
.lang-fr {
    bottom: 30px;
}
/***************************************************
				home
***************************************************/
main {
    width: -moz-calc(100% - 360px);
    width: -webkit-calc(100% - 360px);
    width: -o-calc(100% - 360px);
    width: calc(100% - 360px);
    height: -moz-calc(100vh - 80px);
    height: -webkit-calc(100vh - 80px);
    height: -o-calc(100vh - 80px);
    height: calc(100vh - 80px);
	margin:40px 40px 40px 0;
	float:right;
	justify-content:center;
	align-items:center;
}
main.home {
	display:flex;
}
main.home img {
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}
main li {
	list-style:inside;
}
.page-wrapper {
	height:auto;
    min-height: -moz-calc(100vh - 80px);
    min-height: -webkit-calc(100vh - 80px);
    min-height: -o-calc(100vh - 80px);
    min-height: calc(100vh - 80px);
}
.page-wrap {
    width: -moz-calc(100% - 280px);
    width: -webkit-calc(100% - 280px);
    width: -o-calc(100% - 280px);
    width: calc(100% - 280px);
}
.page-wrapper p {
	font-size:16px;
	margin-top:0;
}
.page-wrapper p strong {
	font-size:18px;
}
.date {
	color:#777;
	font-size:1vw;
}
.wp-container-60,
.wp-container-54,
.wp-container-57 {
	margin-bottom:0 !important;	
}
.wp-block-media-text__content {
	padding:0 0 0 20px !important;
}
.wp-block-media-text__content h2 {
	margin-top:0;	
}
.page-wrap h3,
.wp-block-columns h3 {
	font-size:1.2vw;
	border-bottom:1px solid #000;
	margin-bottom:20px;
	padding-bottom:10px;
}
.wp-block-media-text {
    grid-template-columns: 200px !important;
	margin-bottom:40px;
}
.chartbox p {
	font-size:1.2vw;
}
.skillbar-title em span,
.skillbar-title em {
	font-size:1.1vw !important;
	color:#000 !important;
	text-transform:inherit !important;
	font-style:normal !important;
}
.skillbar {
    margin-top: 30px !important;
    margin-bottom: 5px !important;
    height: 22px !important;
}
.skillbar-bar {
    height: 22px !important;
}
.skillbar-percent {
    height: 22px !important;
    line-height: 22px !important;
}
.wp-container-64 p,
.wp-container-65 p {
	margin-bottom:0;
}
/***************************************************
				Contact
***************************************************/
.page-wrapper .wpforms-container {
	margin-top:0;
	float:left;
    width: -moz-calc(100% - 280px);
    width: -webkit-calc(100% - 280px);
    width: -o-calc(100% - 280px);
    width: calc(100% - 280px);
}
#wpforms-1128-field_0,
#wpforms-1128-field_1,
#wpforms-1128-field_2,
#wpforms-21-field_0,
#wpforms-21-field_1,
#wpforms-21-field_2 {
	border:none;
	border-bottom: 2px #000 solid;
	border-radius:0;
	padding: 0 0 10px 0;
}
#wpforms-1128-field_0-container,
#wpforms-1128-field_1-container
#wpforms-1128-field_2-container,
#wpforms-21-field_0-container,
#wpforms-21-field_1-container
#wpforms-21-field_2-container {
	padding-top:0;
}
#wpforms-1128-field_2 ,
#wpforms-21-field_2 {
	resize:none;
}
#wpforms-submit-1128,
#wpforms-submit-21 {
	background:#000;
	color:#fff;
	border:none;
}

/***************************************************
				Portfolio
***************************************************/
#portfolio {
	height:auto;
}
#portfolio .page-wrap {
	display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
#portfolio .page-wrap .portfolio-post-wrap {
	display:block;
	list-style:none;
	float:left;
	position:relative;
}
#portfolio .page-wrap .portfolio-post-wrap:last-child() {
	margin-bottom:0;
}
#portfolio .page-wrap .portfolio-post-wrap a.thumb {
	max-width:100%;
	display:block;
	position:relative;
}
#portfolio .page-wrap .portfolio-post-wrap a.title {
	width:fit-cotent;
	display:block;
	font-size:1.2vw;
	z-index:2;
	margin:10px auto 0 auto;
	color:#000;
	text-align:center;
}

/***************************************************
				Single
***************************************************/
#single {
    width: -moz-calc(100% - 360px);
    width: -webkit-calc(100% - 360px);
    width: -o-calc(100% - 360px);
    width: calc(100% - 360px);
	height:auto;
	margin:40px 40px 40px 0;
	float:right;
}
#single .page-wrap h1 {
	margin-top:0;
}
#single .wp-block-image figcaption {
	/**display:none;**/
}
.wp-block-video {
	width:100%;
	padding:0 20px 20px 20px;
	margin:0 auto 20px auto;
}
.gvideo .wp-block-video {
	background:#E1E1E1;
}
.gvideo {
	margin-top:-10px;
}
.wp-block-gallery {
	margin:0 auto 10px auto;
}
/***************************************************
				404
***************************************************/
.e404 label {
	width:fit-content;
	font-size:2.5vw;
	display:block;
	margin: 0 auto;
	text-align:center;
}
.e404 span {
	width:fit-content;
	font-size:4.6vw;
	display:block;
	margin: 0 auto;
	text-align:center;
}
.e404 p {
	font-size:1.2vw;
	display:block;
	margin: 0 auto;
	text-align:center;
}
/***************************************************
				Fancy box
***************************************************/
.fancybox-button, 
.fancybox-infobar__body,
.fancybox-slider,
.fancybox-bg {
	opacity:1 !important;
	background:#fff !important;
}
.fancybox-bg {
	opacity:.9 !important;
}
.fancybox-controls {
	opacity:0.8;
}
.fancybox-button--left:after,
.fancybox-button--right:after {
    top: 15px !important;
    width: 10px !important;
    height: 10px !important;
}
.fancybox-caption {
	border:none !important;
    padding: 0 0 10px 0 !important;
    font-size: 12px !important;
    line-height: 16px !important;
	opacity:0.8;
}
.fancybox-placeholder {
	display:flex;
	justify-content:center;
	align-items:center;
}
.fancybox-image {
    width: 90% !important;
    height: 90% !important;
    margin:5% !important;
}
.fancybox-caption-wrap {
	text-align:center;
}
.fancybox-infobar span,
.js-fancybox-count,
.js-fancybox-index,
.fancybox-infobar__body,
.fancybox-button {
	color:#000 !important;
}
.fancybox-thumbs {
    background: #fff !important;
}
.fancybox-thumbs>ul>li {
    border-color:  transparent!important;
}
.fancybox-thumbs>ul>li:before {
	border-color:#000;	
}
.fancybox-button--play {
	display:none !important;
}
.fancybox-caption-wrap {
	background:transparent;
}
.fancybox-caption {
	color:#000;
}

@media screen and (max-width: 1220px) {
	.header, 
	.home-header {
		width: 220px;
	}
	#single,
	main {
		width: -moz-calc(100% - 300px);
		width: -webkit-calc(100% - 300px);
		width: -o-calc(100% - 300px);
		width: calc(100% - 300px);
	}
	#logo {
		font-size:20px;
	}
	nav li a {
		font-size:20px;
	}
	span, 
	p {
		font-size:18px;
	}
	.date{
		font-size:15px;
	}
	.page-wrap,
	.page-wrapper .wpforms-container {
		width: 100%;
		max-width: 100%;
	}
	.skillbar-title em span,
	.skillbar-title em {
		font-size:16px !important;
	}
	.page-wrap h3,
	.wp-block-columns h3 {
		font-size:22px;
	}
	.e404 label {
		font-size:32px;
	}
	.e404 span {
		font-size:62px;
	}
	.e404 p {
	font-size:16px;
	}
	#portfolio .page-wrap .portfolio-post-wrap a.title,
	#portfolio .page-wrap .portfolio-post-wrap label {
		font-size:20px;
	}
}
@media screen and (max-width: 960px) {
	.header,
	.home-header {
		width: -moz-calc(100% - 40px);
		width: -webkit-calc(100% - 40px);
		width: -o-calc(100% - 40px);
		width: calc(100% - 40px);
		height: 40px;
		background: #fff;
		position: fixed;
		z-index: 99;
		top:inherit;
		bottom:0;
		left: 0;
		padding:5px 20px 5px 20px;
		display:flex;
		justify-content:space-between;
		align-items:center;
		flex-direction:row-reverse;
	}
	#logo {
		position:relative;
		bottom: inherit;
		left: inherit;
	}
	.lang {
		bottom: 17px;
		right: 60px;
	}
	.header nav,
	.home-header nav {
		width: -moz-calc(100% - 40px);
		width: -webkit-calc(100% - 40px);
		width: -o-calc(100% - 40px);
		width: calc(100% - 40px);
		height: -moz-calc(100vh - 70px);
		height: -webkit-calc(100vh - 70px);
		height: -o-calc(100vh - 70px);
		height: calc(100vh - 70px);
		transform: translateY(-100vh);
		position:fixed;
		padding:20px 20px 0 20px;
		top:-100vh;
		left:0;
		background:#fff;
		z-index:999;
		transition:all .3s ease;
		display: flex;
		align-items: center;
	}
	.header nav.actv{	
		height: -moz-calc(100vh - 20px);
		height: -webkit-calc(100vh - 20px);
		height: -o-calc(100vh - 20px);
		height: calc(100vh - 20px);
		transform: translateY(0);
		z-index:999;
		position:absolute;
	}
	.home-header nav.actv {	
		transform: translateY(0);
		z-index:999;
		top:0;
	}
	.burger {
		display:block;
	}
	#single,
	main {
		width: -moz-calc(100% - 40px);
		width: -webkit-calc(100% - 40px);
		width: -o-calc(100% - 40px);
		width: calc(100% - 40px);
		height: -moz-calc(100vh - 80px);
		height: -webkit-calc(100vh - 80px);
		height: -o-calc(100vh - 80px);
		height: calc(100vh - 80px);
		margin:20px 20px 20px 0;
	}
	#single {
		height:auto;
	}
}
@media (max-width: 781px) {
	.wp-container-57,
	.wp-container-60,
	.wp-container-63 {
		display:block !important;	
	}
	.wp-container-55,
	.wp-container-58,
	.wp-container-61 {
		width: 33.3%!important;
		float:left;
		clear:left;
		
	}
	.wp-container-56,
	.wp-container-59,
	.wp-container-62 {
		width: 66.6%!important;
		float:left;
	}
	.chartbox p {
		font-size:14px !important;
	}
	.vertical-page .chartbox {
		margin:20px 0 !important;
	}
	.car li:nth-child(even) {
		margin-left: 30px !important;
	}
	#portfolio .page-wrap {
		gap:20px;
		margin-bottom:80px;
	}
}
@media (max-width: 640px) {
	.wp-block-columns {
		gap:0 !important;
	}
	.wp-block-media-text__content {
		padding:0 !important;
	}
	.wp-block-media-text__content h2 {
		margin-top:40px !important;
	}
}
.wp-block-separator {
    border: 1px solid #fff !important;
    height: 60px;
}

.wpml-ls-legacy-list-horizontal {
	padding:0 !important;
	margin-top:0px !important;;
}

.wpml-ls-legacy-list-horizontal a {
	padding:0 !important;
}