html,
body
{
	scroll-behavior: smooth;
}
body
{
	background		: #FFF;
	margin			: 0;
	padding			: 0;
	min-width		: 1024px;
}


@media print {
    html, body {
       display: none;  /* hide whole page */
    }
}

* {outline: none;}

.watermark
{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	bottom:0;
	top:0;
	background-color: #000;
	z-index:100000;
	background: transparent url(/img/watermark.png) no-repeat center center;
	background-size	: 50%;
	opacity		: .4;
	-moz-opacity : .4;
}
.logo-menu
{
	width			: 83%;
	height			: 7vh;
	padding			: 2% 10% 2% 7%;
	position		: fixed;
	z-index			: 2222;
	top				: 0;
	background-color: #FFF;

}

.logo
{
	width			: 20%;
	height			: 80px;
	background		: transparent url(/img/ponart-akademi-logo.png?sd=23) no-repeat left top;
	display			: inline-block;
	background-size	: contain;
	vertical-align	: top;
}

.navmenu
{
	width			: 75%;
	display			: inline-block;
	position		: relative!important;
	vertical-align	: top;
	text-align		: right;
}
.navhead
{
	font-family		: "Arima Madurai", arial;
	color			: #000;
	display			: block;
	font-size		: 1.2em;
	font-weight		: 200;
	padding			: 0;
	padding-right	: 40px;
}
.navhead a
{
	text-decoration	: none;
	color			: rgb(232, 34, 45);
	font-size		: .9em!important;
}

.navhead h3
{
	margin			: 0;
	padding			: 0;
}
.navhead ul
{
	width			: 40%;
	position		: absolute;
	list-style		: none;
	right			: -3%;
	padding			: 0 3%;
	background-color: #FFF;
	visibility		: hidden;
	transition		: all .3s ease;
	opacity			: 0;
	top				: 0%;
}
.navhead ul.morefrom.active
{
	visibility		: visible;
	opacity			: 1;
	top				: 80%;
	box-shadow		: 0px 30px 30px #00000030;
}


.navhead li
{
	display			: block;
	border-bottom	: 1px solid #EEE;
	margin			: 0 ;
}
.navhead li:first-child
{
	border-top		: 1px solid #EEE;
}
.navhead li a
{
	font-family		: "Cormorant Garamond", arial;
	color			: #333;
	display			: block;
	font-size		: 1.2em;
	letter-spacing	: 1px;
	text-align		: right;
	line-height		: 50px;
	font-weight		: 300;
	text-decoration	: none;
}
.navhead li a:hover
{
	color			: rgb(232, 34, 45);
}

.menu
{
	opacity			: 1;
	visibility		: visible;
	display			: block!important;
	position		: absolute;
	top				: 5%;
	padding			: 20px;
	right			: 8%;
	padding-right 	: 0;
	transition		: 0.5s ease;
	height			: 110px;
	width			: 110px;
	border			: none;
	background		: transparent;
}
.line
{
  fill: none;
  stroke: black;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}


.navigation
{
	position		: fixed;
	top				: 100px;
	bottom			: 0;
	height			: auto;
	min-height		: 70vh;
	display			: block;
	width			: 20%;
	min-width		: 250px;
	right 			: -10%;
	background-color: #FFF;
	visibility		: hidden;
	z-index			: 100002!important;
	transition		: all .3s ease;
	opacity			: 0;
	margin			: 0;
	padding			: 2% 0%;
	padding-right	: 0;
	list-style		: none;
}
.navigation.active
{
	visibility		: visible;
	right			: 0%;
	z-index			: 100002!important;
	transition		: all .2s ease;
	opacity			: 1;
	box-shadow		: 0px 40px 30px #00000050;
}
.navigation li
{
	display			: block;
	border-bottom	: 1px solid #EEE;
	margin			: 0 9%;
}
.navigation li:last-child
{
	border			: none;
}
.navigation li a
{
	font-family		: "Cormorant Garamond", arial;
	color			: #000;
	display			: block;
	font-size		: 1.1em;
	letter-spacing	: 1px;
	text-align		: right;
	line-height		: 50px;
	text-decoration	: none;
	margin-right	: 10%;
}




.main-slider
{
	width			: 100%;
	padding-top		: 53.5%;
	bottom			: 0;
	position		: relative;
	background		: transparent url(/img/big-circle.jpg) no-repeat top right;
	background-size	:  auto 100%;
}

.info
{
	width			: calc(43% - 15px);
	position		: absolute;
	top				: 25%;
	left			: 7%;
	padding-right	: 37%;
}

.info .head
{
	font-family		: "Arima Madurai", times;
	font-size		: 3em;
	font-weight		: 300;
	color			: #333;
	padding-bottom	: 20px;
	border-bottom	: 1px solid #EEE;
	display			: inline-block;
	margin-bottom	: 20px;
	opacity			: 0;
}
.info p
{
	font-family		: "Roboto", times;
	font-size		: .9em;
	font-weight		: 300;
	line-height		: 2em;
	color			: #666666;
	opacity			: 0;
}

.info .link
{
	width			: 95%;
	background		: transparent url(/img/sml-circle.jpg) no-repeat left top;
	background-size	: cover;
	margin-top		: 40px;
	padding-top		: 5%;
	text-align		: right;
	padding-right	: 15%;
	position		: relative;
	opacity			: 0;
}
.info .link span
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 1.3em;
	font-weight		: 300;
	color			: rgb(232, 34, 45);
	text-decoration	: none;
	display			: block;
	border-bottom	: 1px solid #FFF;
	padding-bottom	: 5%;
	width			: 80%;
	margin-left		: 20%;
}

.info ul
{
	width			: 80%;
	margin-left		: 20%;
	padding			: 0;
	list-style		: none;
	margin-top		: 3%;
	margin-bottom	: 5%;
	padding-bottom	: 5%;
}
.info ul li a
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 1.3em!important;
	font-weight		: 300;
	color			: #333;
	text-decoration	: none;
	display			: block;
	text-align		: right;
	line-height		: 40px;
	padding			: 0!important;
	border			: none!important;
	transition		: all .2s ease;
}

.info ul li a:hover
{
	color			: rgb(232, 34, 45);
}

.info .image
{
	max-width		: 35%;
	min-width		: 30%;
	position		: absolute;
	right			: 10%;
	top				: 0;
	border			: 1px solid #FFF;
	box-shadow		: 0 0 20px rgba(0,0,0, .4);
	display			: block;
	vertical-align	: bottom;
	opacity			: 0;
	z-index			: 4;
}
.info .image img
{
	width			: 100%;
	height			: auto;
	display			: block;
}
.contact-info
{
	width			: 50px;
	height			: 22%;
	left			: 0;
	bottom			: 0;
	position		: fixed;
	background		: #000; /*#000 url(/img/Artboya-Logo.png) no-repeat  center left;*/
	background-size	: 50%;
	z-index			: 5;
}

.contact-info ul
{
	margin			: 0;
	padding			: 0;
	list-style		: none;
	padding-left	: 10px;
	margin-left		: 10px;
	border-left		: 1px solid #FFF;
	vertical-align	: middle;
}
.contact-info li a
{
	font-family		: "Roboto", times;
	font-size		: 1.2em;
	font-weight		: 300;
	letter-spacing	: 1px;
	color			: #eee;
	text-decoration	: none;
	line-height		: 50px;
}

.artists
{
	width			: 20%;
	height			: 60%;
	position		: absolute;
	top				: 20%;
	right			: 50px;
}

.artists a
{
	font-family		: "Arima Madurai";
	font-size		: 1.7em;
	font-weight		: 300;
	letter-spacing	: 1px;
	color			: #FFF;
	text-decoration	: none;
	line-height		: 50px;
	border-bottom	: 1px solid rgb(232, 34, 45);
	text-align		: right;
	display			: block;
	margin-bottom	: 30px;
	transition		: all .3s ease;
}


.artists a.artists-current
{
	border-color	: #FFF;
	font-weight		: 500;
}

@media only screen and (max-width:1366px)
{
	.info
	{
		width			: calc(43% - 12px);
	}
	.contact-info
	{
		background		: #000 url(/img/Artboya-Logo.png) no-repeat 20px center;
		background-size	: 40%;
	}
	.contact-info li a
	{
		font-size		: 1em;
		line-height		: 42px;
	}
}


.galeri-slider
{
	width			: 100%;
	position		: absolute;
	top				: 15%;
	height			: 85%;
	bottom			: 0;
}

.buy-btn,
.con-btn
{
	font-family		: "Roboto", arial;
	font-size		: .8em;
	font-weight		: 300!important;
	text-align		: center;
	border			: none;
	background-color: #DDD;
	width			: 35%;
	padding			: 15px 0;
	margin			: 0 5% auto;
	color			: #666;
	display			: inline-block;
	text-decoration	: none;
}
.con-btn
{
	background-color: rgb(232, 34, 45);
	color			: #FFF;
}

.contact-form
{
	width			: 35%;
	left			: 50%;
	transform		: translateX(-50%);
	top				: -20%;
	position		: fixed;
	z-index			: 20000;
	background-color: #EEE;
	padding			: 5%;
	transition		: all .3s ease;
	box-shadow		: 0 0 100px #00000090;
	text-align		: center;
	opacity			: 0;
	z-index			: -1;
}

.contact-form.active
{
	width			: 35%;
	left			: 50%;
	transform		: translateX(-50%) translateY(-50%);
	top				: 50%;
	position		: fixed;
	z-index			: 200001;
	background-color: #EEE;
	padding			: 5%;
	opacity			: 1;
	z-index			: 10;
}
.contact-form h2
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 1.4em!important;
	font-weight		: 400;
	color			: #333;
}

.form-control
{
	font-family		: "Roboto", arial;
	color			: #333;
	display			: block;
	font-size		: .8em;
	text-decoration	: none;
	padding			: 13px 15px;
	border-radius	: 2px;
	border			: 1px solid #CCC;
	width			: calc(100% - 32px)
}




@media only screen and (max-width: 600px)
{
	.logo-menu
	{
		width			: 100vw;
		padding			: 5%;
	}

	.logo
	{
		width			: 35%;
		height			: 10vh;
	}

	.navmenu
	{
		width			: 75%;
		display			: inline-block;
		position		: relative!important;
		vertical-align	: top;
		text-align		: right;
	}
	.navhead
	{
		font-family		: "Arima Madurai", arial;
		color			: #000;
		display			: block;
		font-size		: 1.2em;
		font-weight		: 200;
	}
	.navhead a
	{
		text-decoration	: none;
		color			: rgb(232, 34, 45);
		font-size		: .9em!important;
	}


	.navhead ul
	{
		width			: 40%;
		position		: absolute;
		list-style		: none;
		right			: -3%;
		padding			: 0 3%;
		background-color: #FFF;
		visibility		: hidden;
		transition		: all .3s ease;
		opacity			: 0;
		top				: 0%;
	}
	.navhead ul.morefrom.active
	{
		visibility		: visible;
		opacity			: 1;
		top				: 80%;
		box-shadow		: 0px 30px 30px #00000030;
	}


	.navhead li
	{
		display			: block;
		border-bottom	: 1px solid #EEE;
		margin			: 0 ;
	}
	.navhead li:first-child
	{
		border-top		: 1px solid #EEE;
	}
	.navhead li a
	{
		font-family		: "Cormorant Garamond", arial;
		color			: #333;
		display			: block;
		font-size		: 1.2em;
		letter-spacing	: 1px;
		text-align		: right;
		line-height		: 50px;
		font-weight		: 300;
		text-decoration	: none;
	}
	.navhead li a:hover
	{
		color			: rgb(232, 34, 45);
	}

	.menu
	{
		opacity			: 1;
		visibility		: visible;
		display			: block!important;
		position		: absolute;
		top				: 50%;
		padding			: 0;
		right			: 10%;
		transform		: translateY(-50%);
		transition		: 0.5s ease;
		height			: 10vh;
		width			: 10vh;
		border			: none;
		background		: transparent;
	}
	.line
	{
	  fill: none;
	  stroke: black;
	  stroke-width: 6;
	  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.line1 {
	  stroke-dasharray: 60 207;
	  stroke-width: 6;
	}
	.line2 {
	  stroke-dasharray: 60 60;
	  stroke-width: 6;
	}
	.line3 {
	  stroke-dasharray: 60 207;
	  stroke-width: 6;
	}
	.opened .line1 {
	  stroke-dasharray: 90 207;
	  stroke-dashoffset: -134;
	  stroke-width: 6;
	}
	.opened .line2 {
	  stroke-dasharray: 1 60;
	  stroke-dashoffset: -30;
	  stroke-width: 6;
	}
	.opened .line3 {
	  stroke-dasharray: 90 207;
	  stroke-dashoffset: -134;
	  stroke-width: 6;
	}


	.navigation
	{
		position		: fixed;
		top				: 10%;
		bottom			: 0;
		height			: auto;
		display			: block;
		width			: 15%;
		right 			: -10%;
		background-color: #FFF;
		visibility		: hidden;
		z-index			: 100002!important;
		transition		: all .3s ease;
		opacity			: 0;
		margin			: 0;
		padding			: 2% 0%;
		padding-right	: 5%;
		list-style		: none;
	}
	.navigation.active
	{
		visibility		: visible;
		right			: 0%;
		z-index			: 100002!important;
		transition		: all .2s ease;
		opacity			: 1;
		box-shadow		: 0px 40px 30px #00000050;
	}
	.navigation li
	{
		display			: block;
		border-bottom	: 1px solid #EEE;
		margin			: 0 9%;
	}
	.navigation li:last-child
	{
		border			: none;
	}
	.navigation li a
	{
		font-family		: "Cormorant Garamond", arial;
		color			: #000;
		display			: block;
		font-size		: 1.1em;
		letter-spacing	: 1px;
		text-align		: right;
		line-height		: 50px;
		text-decoration	: none;
		margin-right	: 10%;
	}



	.main-slider
	{
		width			: 100%;
		padding-top		: 0;
		bottom			: 0;
		position		: relative;
		background		: #FFF;
		background-size	:  auto 100%;
		padding-top		: 15vh;
	}

	.info
	{
		width			: 320px;
		max-width		: 320px;
		min-width		: 320px;
		position		: relative;
		top				: 25%;
		left			: 10vw;
		padding			: 0;
		padding-right	: 0px ;
		padding-top		: 50vh;
		text-align		: center;
		border-bottom	: 1px solid #CCC;
		padding-bottom	: 20px;
		margin-bottom	: 50px; 
	}



	.info .image
	{
		max-width		: 300px;
		min-width		: 200px;
		max-height		: 45vh;
		position		: absolute;
		right			: auto;
		left			: 50%;
		transform		: translateX(-50%);
		top				: 0%;
		border			: 1px solid #FFF;
		box-shadow		: 0 0 20px rgba(0,0,0, .4);
		display			: block;
		vertical-align	: bottom;
		opacity			: 1;
		z-index			: 400;
		padding			: 0;
	}
	.info .image img
	{
		width			: 100%;
		width			: auto;
		height			: auto;
		display			: block;
		max-height		: 45vh;

	}

	.info .head
	{
		font-family		: "Arima Madurai", times;
		font-size		: 2.2em;
		font-weight		: 300;
		color			: #333;
		padding-bottom	: 20px;
		border-bottom	: 1px solid #EEE;
		display			: inline-block;
		margin-bottom	: 20px;
		opacity			: 1;
	}
	.info p
	{
		font-family		: "Roboto", times;
		font-size		: .9em;
		font-weight		: 300;
		line-height		: 2em;
		color			: #666666;
		opacity			: 1;
	}

	.info .link
	{
		width			: 100%;
		background		: transparent url(/img/sml-circle.jpg) no-repeat left top;
		background-size	: cover;
		margin-top		: 40px;
		margin-bottom	: 100px;
		padding-bottom	: 30px;
		text-align		: center;
		padding-right	: 0%;
		position		: relative;
		opacity			: 1;
		border-bottom	: 1px solid #CCC;
	}
	.info .link span
	{
		width			: 100%;
		margin-left		: 0%;
	}
	.info ul
	{
		width			: 100%;
		margin-left		: 0%;
		padding			: 0;
	}
	.info ul li a
	{
		text-align		: center;
	}

	.artists
	{
		display			: none;
		visibility		: hidden;
	}

	.navhead
	{
		padding-left	: 0;
		padding-right	: 0px;
		width			: 100%;
	}
	.navhead span
	{
		display			: none;
	}

	.navhead h3
	{
		font-size		: 1em;
		margin			: 0;
		padding			: 0;
		width			: 100vw;
		position		: absolute;
		top				: 0vw;
		left			: 0;
		right			: 0;
		text-align		: left;
	}

	.contact-form
	{
		width			: 85%;
		left			: 50%;
		transform		: translateX(-50%);
		top				: -20%;
		position		: fixed;
		z-index			: 20000;
		background-color: #EEE;
		padding			: 5%;
		transition		: all .3s ease;
		box-shadow		: 0 0 100px #00000090;
		text-align		: center;
		opacity			: 0;
		z-index			: -1;
	}

	.contact-form.active
	{
		width			: 85%;
		left			: 50%;
		transform		: translateX(-50%) translateY(-50%);
		top				: 50%;
		position		: fixed;
		z-index			: 200001;
		background-color: #EEE;
		padding			: 5%;
		opacity			: 1;
		z-index			: 10000;
	}

}


.Overlay
{
	width			: 100%;
	height			: 100%;
	position		: fixed;
	top				: 0;
	left			: 0;
	background 		: #000;
	z-index			: 1000;
	background 		: rgba(0,0,0, 0.6) ;
}