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


* {outline: none;}


.main-back
{
	width			: 100%;
	min-width		: 1200px;
	height			: 100vh;
	background		: transparent url("/img/mainback.jpg") no-repeat center top;
	background-size	: 1900px;;
}

.main-info
{
	width			: 800px;
	height			: auto;
	font-family		: "Cormorant Garamond", arial;
	color			: #333;
	display			: block;
	font-size		: 1.2em;
	letter-spacing	: 1px;
	text-align		: left;
	line-height		: 30px;
	font-weight		: 300;
	text-decoration	: none;
	position		: fixed;
	top				: 330px;
	left			: 50%;
	transform		: translateX(-50%);
}
.main-info b
{
	font-size		: 1.4em;
}

.main-info a
{
	font-size		: 1.4em;
	text-decoration	: none;
	color			: #666;
	display			: inline-block;
	padding			: 0 30px;
}

.logo-menu
{
	width			: 83%;
	padding			: 2% 10% 2% 7%;
	position		: fixed;
	z-index			: 2;
	top				: 0;
}

.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;
}
.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		: hidden;
	display			: none!important;
	position		: absolute;
	top				: 50%;
	padding			: 0;
	right			: 10%;
	transform		: translateY(-50%);
	transition		: 0.5s ease;
	height			: 50px;
	width			: 50px;
	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		: absolute;
	top				: 10%;
	height			: auto;
	display			: block;
	width			: 45%;
	right 			: 5%;
	visibility		: visible;
	z-index			: 100002!important;
	transition		: all .3s ease;
	opacity			: 1;
	margin			: 0;
	padding			: 2% 0%;
	padding-right	: 5%;
	list-style		: none;
	text-align		: right;
}
.navigation li
{
	display			: inline-block;
	margin			: 0%;
}
.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	: 40px;
	width			: 100% ;
}




.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)
{
	body
	{
		min-width		: auto;
		overflow		: hidden;
	}

	.main-back
	{
		width			: 100%;
		min-width		: auto;
		height			: 100vh;
		background		: transparent url("/img/mainback.jpg") no-repeat center top;
		background-size	: cover;
	}


	.main-info
	{
		width			: 90%;
		height			: auto;
		font-size		: .7em;
		top				: 30vh;
		left			: 5%;
		transform		: none;
	}

	.main-info a
	{
		font-size		: 1.2em;
		text-decoration	: none;
		color			: #666;
		display			: inline-block;
		padding			: 0 10px;
	}

	.logo-menu
	{
		width			: 83%;
		padding			: 0% 10% 2% 7%;
		position		: fixed;
		z-index			: 2;
		top				: 20px;
	}

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

}