@font-face {
	font-family: 'iran';
	src: url('../fonts/IRANSansWeb_Light.eot');
	src: url('../fonts/IRANSansWeb_Light.eot') format('embedded-opentype'),
		url('../fonts/IRANSansWeb_Light.woff2') format('woff2'),
		url('../fonts/IRANSansWeb_Light.woff') format('woff'),
		url('../fonts/IRANSansWeb_Light.svg#CenturyGothic') format('svg');
}

body {
	margin: 0;
	padding: 0;
	font-family: inter, Arial, sans-serif;

	background: #3f424d;
}

body.homepage {

	overflow: hidden;
}
.footer_p2 a {
  color: #77d0b0;
  text-decoration: none;
}
#yoo-zoo div.box-1 div.row {
  height: 40vw;
  position: relative;
}

#yoo-zoo div.box-1 div.row .width50 {
  position: relative;
} 

#yoo-zoo div.box-1 div.row .width50 .pos-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  height: 21vw;
  width: auto;
}
#yoo-zoo .items h2.pos-title a {
  color: #fff;
  font-family: inter;
  text-align: center;
  width: 70%;
  position: absolute;
  top: 5vw;
  font-size: 1.3vw;
  text-transform: capitalize;
  font-weight: 200;
  left: 50%;
  transform: translate(-50%); 
}
#yoo-zoo div.box-1 div.row .width50 .pos-media a {
    transition: all ease .25s;  z-index: 2;
}
#yoo-zoo div.box-1 div.row .width50 .pos-media a:hover, #yoo-zoo div.box-1 div.row .width50 .pos-media a:active {
  background-color: rgba(0,0,0,.1);
  border: none !important;
}

#yoo-zoo .items .linkText {
  color: #77d1b0;
  font-size: 1vw;
  position: absolute;
  top: 35vw;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
}
#yoo-zoo .items .pos-links a {
  color: #77d1b0;
  top: 35vw;
  position: absolute;
  left: 50%;
  transform: translate(-50%,1.5vw);
}

#yoo-zoo .items .pos-links a::after {
  display: none;
}


#yoo-zoo div.box-1 div.row .width50 .pos-media a {
  width: 100%;
  height: 40vw;
  position: absolute;
  left: 0;
  top: 0;
}
#yoo-zoo .items div.box-1, #yoo-zoo .items div.box-1 .row {
  border: none;
}
#yoo-zoo .items div.box-1 .row {
  background: url('/templates/garnella/images/rows_bg.png');
    
  background-repeat: repeat-x;
  background-position: 50% 50%;
}





.thisIsHome .logo {display:none;}
.thisIsNotHome header .logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.thisIsNotHome header .logo {
  position: absolute;
  left: 70vw;
  width: 10vw;
  height: auto;
  bottom: 0;
  transform: translate(0 , 45%);
}
.thisIsNotHome .home_artwork_categories {
  top: 6vw;
  left: 6vw;
  transform: translate(0,0);
}
.thisIsNotHome header {
  height: 45svh;
  background: url('/templates/garnella/images/bg-header.webp');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
  width: 100%;
  background-position: 10% 70%;
  background-size: 120vw 65svh;
    position: relative;
    min-height:300px;
}
.thisIsNotHome header::before {
  content: "";
  width: 70vw;
  height: 5px;
  background: #77d1b0;
  position: absolute;
  bottom: 0;
  left:0;
}
.thisIsNotHome header::after {
  content: "";
  width: 20vw;
  height: 5px;
  background: #fff;
  position: absolute;
  bottom: 0;
  right:0;
}
#yoo-zoo .item div.box-1 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #fff;
}
#yoo-zoo .item h1.pos-title {
  width: 87vw;
  margin: auto;
    margin-top: auto;
  font-size: 5vw;
  color: #fff;
  line-height: 6vw;
  margin-top: 2vw;
  text-transform: uppercase;
}
#yoo-zoo .item div.pos-description {
  width: 87vw;
  margin: auto;
  font-family: inter;
  font-size: 1.2vw;
  text-align: justify;
  line-height: 1.6vw;
}

#yoo-zoo .item .element-textarea > h2 {
  color: #77d1b0;
  font-weight: 600;
  font-size: 2vw;
  line-height: 2.5vw;
}
#yoo-zoo .item .element-textarea .about_artist {
  display: flex;
  align-items: flex-end;
  margin: 3vw 0 1vw 0;
}
.about_artist img {
  width: 27vw;
}
#yoo-zoo .item .element-textarea .about_artist > div:last-child h3 {
  font-size: 10vw;
  line-height: 9vw;
  border-bottom: 1vw solid;
  color: #77d0b0;
  padding: .5vw 1vw;
  margin: 0 0 .3vw 1vw;
  text-transform: uppercase;
}
#yoo-zoo .item .element-textarea :last-child {
  margin-bottom: 0px;
  max-width: 60vw;
}
#yoo-zoo .item .element-textarea > .notes {
  background: #77d0b0;
  color: #333;
  padding: 1vw 1.5vw !important;  margin: 2vw 0;
}
#yoo-zoo .item .element-textarea a {
  color: #77d0b0;
  text-decoration: none;
}
footer {
  background: url('/templates/garnella/images/footerbg2.webp');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
  background-position: 0 100%;
  min-height: 530px;
  background-size: 100%;
  position: relative;
}
footer div {
  font-family: inter;
  color: #fff;
  position: absolute;
  bottom: 3svh;
  left: 6vw;
}
.footer_p1 {
  color: #77d0b0;
  text-transform: uppercase;
  text-shadow: 2px 2px 1px #20573f;
  width: 30vw;
  font-size: 1vw;
}

.footer_p2{
      font-size: 1.2vw;
  line-height: 1.5vw;
}

.footer_p3{
    font-size: 2svh;
}
.footer_h4 {
  text-transform: uppercase;
  font-size: 3vw;
  line-height: 2vw;
  margin: 2vw 0 0 0;
}
.footer_p3 {
  font-size: .7vw;
  line-height: .8vw;
}

#yoo-zoo div.box-1 {
  background: none;
  color: #fff;
}

.emza_home {
	color: #b4ffe2;
	position: absolute;
	left: 50%;
	bottom: 2svh;
	font-size: .7rem;
	text-transform: capitalize;
	font-family: inter;
	font-weight: 300;
	opacity: 1;
	transform: translate(-50%);
}

.emza_home a {
	color: #b4ffe2;
	text-decoration: none;
	transition: all ease .25s;
}

.emza_home a:hover {
	color: #fff;
	font-weight: bold;
}

#nav_btn .mm {
	color: #fff;
	font-family: inter;
	font-weight: 300;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(120%, -50%);
	font-size: 1vw;
	line-height: 1vw;
}

.mainMenuHolder {
	display: none;
	position: fixed;
	width: 100vw;
	height: 100svh;
	background: #74ccaa;
	z-index: 11;
	overflow: hidden;
}

.mainMenuHolder .closebtn img {
	max-width: 100%;
	max-height: 100%;
}

.mainMenuHolder .closebtn {
	position: absolute;
	width: 4svh;
	height: 4svh;
	left: 6svh;
	top: 6svh;
}

.mainMenuHolder .item-126.divider.deeper.parent {
	display: none;
}

.mainMenuHolder .item-132 {
	display: none;
}

.mainMenuHolder .item-152 {
	display: none;
}

.mainMenuHolder ul li {
	list-style: none;
}

.mainMenuHolder .part01 ul li a {
	color: #fff;
	text-decoration: none;
	font-family: inter;
	font-size: 6.5svh;
	text-transform: uppercase;
	font-weight: 600;
	transition: all ease .25s;
	border-left: 0px solid #333;
	padding-left: 0;
	display: block;
}

.mainMenuHolder .part01 ul li a:hover {
	color: #333;
	border-left: 4px solid #333;
	padding-left: 10px;
}

.part01_bottom {
	position: fixed;
	bottom: 1svh;
	color: #3f444c;
	font-family: inter;
	font-size: 2svh;
}

.mainMenuHolder .part02 {
	position: fixed;
	left: 60vw;
	height: 100svh;
	background: url('/templates/garnella/images/Menubg.webp');
	background-position-x: 0%;
	background-position-y: 0%;
	background-size: auto;
	width: 40vw;
	background-size: cover;
	background-position: 50% 100%;

}

.mainMenuHolder .part02 ul li a {
	color: #fff;
	text-decoration: navajowhite;
	font-family: inter;
	font-size: 4svh;
	font-weight: 200;
	text-transform: uppercase;
	transition: all ease .25s;
	line-height: 5svh;
	border-left: 0px solid #fff;
	padding-left: 0;
}

.mainMenuHolder .part02 ul li a:hover {
	border-left: 4px solid #74ccaa;
	padding-left: 10px;
	color: #74ccaa;
	background: #333;
	padding-right: 10px;
}

.closebtn {
	cursor: pointer;
	transition: all ease .25s;
}

.closebtn:hover {
	transform: rotate(90deg);
	filter: invert(1);
}

.mainMenuHolder .part02 ul {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	top: 26svh;
	width: 70%;
}

.p2arrow {
	color: #fff;
	font-family: inter;
	font-size: 3svh;
	position: absolute;
	width: 70%;
	left: 50%;
	transform: translate(-50%);
	top: 22svh;
}

.p2title {
	color: #7fddb9;
	font-family: inter;
	font-size: 5svh;
	font-weight: 200;
	width: 70%;
	left: 50%;
	position: absolute;
	transform: translate(-50%);
	top: 15svh;
}

.mainMenuHolder ul {
	margin: 0;
	padding: 0;
	width: 55vw;
}

.mainMenuHolder .part01 {
	position: absolute;
	left: 6svh;
	top: 16svh;
}

.header-right {
	position: absolute;
	z-index: 10;
	right: 6vw;
	top: 2.2vw;
}

.header-right>div {
	display: inline-block;
}

.header-right ul,
.header-right li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-right * {
	color: #fff;
}

.socials_holder img {
	width: 1.5vw;
	height: 1.5vw;
}

.language_holder a {
	vertical-align: middle;
	display: block;
	transform: translate(.5vw, .45vw);
	transition: all ease .25s;
	font-family: inter;
}

.home_artwork_categories {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 6vw;
	transform: translate(0, 18svh);
}

.home_artwork_categories * {
	font-family: inter;
	text-transform: uppercase;
	list-style: none;

	padding: 0;
	color: #fff;
	text-decoration: none;
	transition: color ease .25s;
}

.home_artwork_categories .content_of_menu ul li a {
	font-size: 4svh;
}

.home_artwork_categories .content_of_menu ul li:last-child a {
	font-size: 2svh;
	font-weight: 300;
}

.home_artwork_categories .content_of_menu ul li:last-child {
	margin-top: 2svh;
	line-height: 3svh;
}

.home_artwork_categories .title {
	color: #7fddb9;
	font-size: 2.5svh;
	font-weight: 300;
}

.home_artwork_categories ul {
	margin: 1svh 0;
}

.home_artwork_categories .down_arrow {
	font-size: 2svh;
}

.home_artwork_categories .content_of_menu ul li a::after {
	content: "";
	width: 0;
	height: 5svh;
	background: #78cfad;
	position: absolute;
	left: -1vw;
	z-index: -1;
	transition: width ease .25s;
}

.home_artwork_categories .content_of_menu ul li:last-child a::after {
	content: "";
	width: 0;
	height: 3svh;
	background: #78cfad;
	position: absolute;
	left: -1vw;
	z-index: -1;
	transition: width ease .25s;
}

.home_artwork_categories .content_of_menu ul li:hover a::after {

	width: calc(100% + 2vw);

}

.home_artwork_categories .content_of_menu ul li a:hover {
	color: #333;
}

.part01_bottom a {
	color: #74ccaa;
	text-decoration: none;
}

.mainMenuHolder a {
	text-decoration: none !important;
}



#yoo-zoo .item h1.pos-title {
  color: #77d1b0;
  font-size: ;
}

#yoo-zoo .item div.pos-top .element.element-itemname {
  color: #77d1b0;
  font-size: 5vw;
  text-transform: capitalize;
  line-height: 6vw;
  margin: 6vw 6vw 2vw;
}
#yoo-zoo .item div.media-right {
  float: none;
  padding: 0;
  margin: 0;
    margin-top: 0px;
  background: #77d1b0;
  margin-top: 5vw;
  position: relative;
}


.categories {
  margin-top: 50px !important;
}
#yoo-zoo .categories h2.title {
  display: none;
}
#yoo-zoo .categories div.box-1 div.row, #yoo-zoo .categories div.box-1 div.row *, #yoo-zoo .categories div.box-1 {
  height: auto;
  border:
none !important;
}
#yoo-zoo .categories a.teaser-image {
  transition:
all ease .25s;
}
#yoo-zoo .categories a.teaser-image:hover {
  transform: scale(1.05);
  filter: brightness(1.1) contrast(1.2);
}

@media (orientation: landscape) {
    #yoo-zoo .item div.pos-media .element.element-image.last {
  position: absolute;
  right: 0;
  top: 50%;
  height: 60vh;
  overflow: hidden;
  transform: translate(-50% , -50%);
}
  #yoo-zoo .item div.pos-media .element.element-image.last img {
    width: auto;
    max-height: 60vh;
    max-width: 40vw;
  }
#yoo-zoo .item div.pos-media .element.element-image.last {
    position: absolute;
    left: calc(60vw + 20vw);
    top: 50%;
    height: 60vh;
    overflow: hidden;
    transform: translate(-50%,-50%) !important;
    bottom: inherit;
    right: inherit;
  }
	.part01_bottom a {
		color: #fff !important;
	}

	.slogan.homeslogan {
		left: 50%;
		top: 50%;
		transform: translate(28vw, 1vw);
	}

	.slogan {
		color: #fff;
		font-size: 1vw;
		font-family: inter;
		position: absolute;
	}

	#nav_btn {
		position: absolute;
		left: 6vw;
		top: 3vw;
		z-index: 10;
		cursor: pointer;
	}

	#nav_btn>div.b1,
	#nav_btn>div.b2,
	#nav_btn>div.b3 {
		width: 40px;
		height: 5px;
		background: #fff;
		margin: 7px 0;
		border-radius: 5px;
	}

	#nav_btn>div.b2 {
		width: 30px;
		transform: translate(10px);
	}
	
	#yoo-zoo .item div.pos-description .element.element-image.first {
  display: none;
}
#yoo-zoo .item div.pos-description .element-textarea {
  margin-top: 2vw;
  font-size: 1vw;
  text-transform: capitalize;
}


#yoo-zoo .item div.pos-description .element-textarea {
  margin-top: 2vw !important;
}

}





#yoo-zoo .item div.pos-media .element.element-image.first {
  position: relative;
  height: 60vh;
  overflow: hidden;
  display: flex;
  justify-content: left;
  align-items: center;
}

#yoo-zoo .item div.pos-media .element.element-image.first img {
  height: auto;
  width: 60vw;
  object-fit: cover;
  top: 10vh;
  position: absolute;
}



.products #yoo-zoo .item div.pos-description .element-textarea {
  margin-top: 9vw;
  background: rgba(0,0,0,.2);
  padding: 4vw;
  border-radius: 16px;
}



@media (orientation: portrait) {
#yoo-zoo .item div.pos-media .element.element-image.first {
  position: inherit;
  height: 30vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
 #yoo-zoo .item div.pos-media .element.element-image.first img {
    height: auto;
    width: 125vw;
    object-fit: cover;
    top: 16vw;
    position: absolute;
    max-width: 150vw;
  }
#yoo-zoo .item div.pos-top .element.element-itemname {
  color: #77d1b0;
  font-size: 7vw;
  text-transform: capitalize;
  line-height: 7vw;
  margin: 6vw 6vw 2vw;
}
#yoo-zoo .item div.pos-media .element.element-image.last {
  position: inherit;
  transform: translate(0 ,0);
  margin: 2vw auto;
  text-align: center;
}
	.home_artwork_categories {
		transform: translate(0, 13svh);
	}

	.emza_home {
		color: #b4ffe2;
		position: absolute;
		left: 0;
		bottom: 1svh;
		font-size: 1.2rem;
		text-transform: capitalize;
		font-family: inter;
		font-weight: 300;
		opacity: 1;
		transform: none;
		width: 100%;
		text-align: center;
	}

	.slogan.homeslogan {
		left: 50%;
		top: 24.5vw;
		transform: translate(-50%);
	}

	.slogan {
		color: #fff;
		font-size: 1.8rem;
		font-family: inter;
		position: absolute;
		width: 100vw;
		text-align: center;
	}

	#nav_btn {
		position: absolute;
		left: 6vw;
		top: 6vw;
		z-index: 10;
		cursor: pointer;
	}

	#nav_btn>div.b1,
	#nav_btn>div.b2,
	#nav_btn>div.b3 {
		width: 10vw;
		height: 1.5vw;
		background: #fff;
		margin: 2vw 0;
		border-radius: 1.5vw;
	}

	#nav_btn .mm {
		font-size: 3vw;
		line-height: 3vw;
	}

	#nav_btn>div.b2 {
		width: 7vw;
		transform: translate(3vw);
	}

	.socials_holder img {
		width: 8vw;
		height: 8vw;
	}

	.language_holder a {
		font-size: 5vw;
		margin: 0 2vw;
	}

	.header-right {
		top: 6vw;
	}


	.home_artwork_categories .content_of_menu ul li a:active::after {
		transition: none;
	}

	.home_artwork_categories .content_of_menu ul li:active a::after {
		transition: none;
	}

	.mainMenuHolder .part02 {
		left: 0;
		bottom: 0;
		height: 60svh;
		width: 100%;
	}

	.p2title {
		top: 4svh;
		font-size: 3svh;
		width: 80%;
	}

	.p2arrow {
		top: 8svh;
		font-size: 2svh;
		width: 80%;
	}

	.mainMenuHolder .part02 ul.nav.menu.mod-list {
		top: 11svh;
		width: 80%;
	}

	.mainMenuHolder .part02 ul.nav.menu.mod-list a {
		font-size: 2.8svh;
	}

	.mainMenuHolder .part01 ul li a {
		font-size: 3svh;
	}

	.mainMenuHolder .part01 {
		left: initial;
		width: initial;
		transform: none;
		width: 100%;
	}

	.part01_bottom {
		color: #fff;
		z-index: 11;
		width: 80%;
		font-size: 1.5svh;
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translate(-50%);
	}

	.mainMenuHolder .part01 .nav.menu.mod-list {
		width: 80%;
		left: 50%;
		position: absolute;
		transform: translate(-50%);
	}

	.part02 canvas {
		width: 100vw;
		height: 60svh;
	}
.thisIsNotHome .home_artwork_categories {
  top: 22vw;
  left: 6vw;
  transform: translate(0,0);
}

.thisIsNotHome .home_artwork_categories .content_of_menu ul li a {
  font-size: 3svh;line-height:4svh;
}
.home_artwork_categories .content_of_menu ul li a::after {
  height: 4svh;
}
.thisIsNotHome header {
  height: 40svh;
}

.thisIsNotHome header::after {
  width: 10vw;
}

.thisIsNotHome header::before {

  width: 60vw;


}
.thisIsNotHome header .logo {
  position: absolute;
  left: 60vw;
  width: 30vw;
  height: auto;
  bottom: 0;
  transform: translate(0 , 45%);
}
main {
  margin-top: 3svh;
}

#yoo-zoo .item h1.pos-title {
  font-size: 4svh;
  line-height: 5svh;
}
#yoo-zoo .item .element-textarea > h2 {
  font-size: 2.5svh;
  line-height: 4svh;
}
#yoo-zoo .item div.pos-description {
  font-size: 1.8svh;
  line-height: 2.5svh;
  text-align: left;
}
#yoo-zoo .item div.pos-description > div p {
  padding-bottom: 3svh !important;
}

.about_artist > div {
  display: block;
  width: 100%;
  height: auto;
}

.about_artist > div img {
  width: 100%;
  height: auto;
}

#yoo-zoo .item .element-textarea .about_artist > div:last-child h3 {
  font-size: 16vw;
  line-height: 15vw;
  border-bottom: none;
  color: #77d0b0;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  width: 100%;
  display: block;
}

#yoo-zoo .item .element-textarea .about_artist {
  display: block;
  margin: 3svh 0 1svh 0;
  border-bottom: 1svh solid #77d0b0;
}
.home_artwork_categories .content_of_menu ul li:last-child a {
  font-size: 2svh;
}
.mainMenuHolder ul li {
  margin: 1svh 0;
}
.footer_h4 {
  margin-top: 1svh;
  font-size: 3svh;
  line-height: 3svh;
}
.footer_p2 {
  font-size: 2svh;
  line-height: 2.5svh;
  margin: 2vw 0;
}
.footer_p1 {
  font-size: 1.5svh;
  width: 87vw;
}
.footer_p3 {
  font-size: 1.5svh;    line-height: 1.6svh;
}
footer {
  background-size: 100% 100%;    margin: 8svh 0 0 0;
}
#yoo-zoo div.box-1 div.row .width50 {
  width: 100%;
}
#yoo-zoo .items div.box-1 .row {
    height: auto;
    background: none;
  }

#yoo-zoo div.box-1 div.row .width50 .pos-media a {
  height: 45svh;
}

#yoo-zoo div.box-1 div.row .width50 .pos-media img {
  position: initial;
  transform: translate(0,0);
  width: 65vw;
  height: auto;
}
#yoo-zoo div.box-1 div.row .width50 .pos-media a {
  position: initial;
  transform: translate(0,0);
  width: 100%;
  display: block;
  text-align: center;
  height: auto;    padding: 7svh 0;    background-image: url('/templates/garnella/images/rows_bg.png');
    background-repeat: repeat-x;
    background-position: 50% 50%;
}
#yoo-zoo .items div.media-left {
  float: none;
  clear: both;    margin: 0;
    padding: 0;
}
#yoo-zoo .items div.teaser-item {
  margin: 0;
  padding: 0;
}
#yoo-zoo .width50 {
  float: none;
  clear: both;
}

#yoo-zoo .items h2.pos-title a {
    font-size: 3.5vw;
    line-height: 3.5vw;
    top: 6vw;
  }
  #yoo-zoo .items .pos-links a {
  top: initial;
  bottom: 4vw;
  font-size: 2.5vw;
}
#yoo-zoo .items .linkText {
  top: initial;
  bottom: 6vw;
  font-size: 4vw;
}

#yoo-zoo .item div.pos-description .element.element-image.first img {
  width: 75vw;
  height: auto;
  margin: auto;
}

#yoo-zoo .item div.pos-description .element.element-image.first {
  text-align: center;
}
.products #yoo-zoo .item h1.pos-title {
    font-size: 4svh;
    line-height: 5svh;
    text-align: center;
  }
  
  #yoo-zoo .item div.pos-description > div p {
  font-size: 4vw;
  line-height: 5vw;
  width: 100% !important;
  max-width: 100% !important;
      text-transform: capitalize;
}
   .products #yoo-zoo .item h1.pos-title {
    font-size: 2svh;
    line-height: 3svh;
    text-align: center;
    background: #77d1b0;
    padding: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    margin: 0;
    margin-top: 0px;
    margin-top: 0px;
    width: auto;
    color: #333;
    text-align: center;
    padding-left: 6vw;
    padding-right: 6vw;
    margin-top: -2.1vw;
  } 
  #yoo-zoo .item div.pos-description .element.element-image.first img {
  margin-top: 10vw;
}


#yoo-zoo .item div.pos-media .element.element-image.last {
  display: none;
}






}