html,
body
{
	scroll-behavior: smooth;
}
body
{
	background		: #FFF;
	margin			: 0;
	padding			: 0;
	margin-top		: 10%;
}

* {outline: none;}


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

.main-info
{
	width			: 40%;
	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				: 50%;
	left			: 50%;
	transform		: translateX(-50%) translateY(-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			: 80%;
	z-index			: 2;
	top				: 0;
	background-color: #EEE;
	z-index			: 10002;
	transition		: all .2s ease;
	position		: fixed;
	padding			: 1% 10%;
	overflow		: hidden;
}

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

.navhead
{
	font-family		: "Arima Madurai", cursive;
	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 h1
{
	margin			: 0;
	padding			: 0;
}
.search-bar
{
	display			: block;
	position		: absolute;
	top				: 5%;
	width			: 50%;
	z-index			: 10;
	left			: 55%;
	transform		: translateX(-50%);
	top				: 5%;
	margin			: 20px auto;
}
.search-inputs
{
	font-family		: "Open Sans", arial;
	color			: #333;
	display			: inline-block;
	font-size		: 1.2em;
	text-decoration	: none;
	padding			: 15px 15px;
	border-radius	: 5px;
	border			: 1px solid #CCC;
	min-width		: 100px;
	width			: calc(100% - 120px);
	font-weight		: 300;
	vertical-align	: middle;
	transition		: 0.2s ease;
}
.search-buttons
{
	width			: auto;
	margin			: 0px;
	border			: none;
	border-radius	: 5px;
	background-color: #E85858;
	font-family		: 'Cormorant Garamond', arial;
	font-size		: 1.2em;
	color			: #FFF;
	font-weight		: 300;
	padding			: 20px 20px 19px;
	display			: inline-block;
	text-align		: center;
	vertical-align	: middle;
	margin-left		: 10px;
	transition		: 0.2s ease;
	text-decoration	: none;
}

.menu
{
	opacity			: 1;
	visibility		: visible;
	display			: block!important;
	position		: absolute;
	top				: 50%;
	transform		: translateY(-50%);
	right			: 10%;
	transition		: 0.5s ease;
	height			: 70px;
	width			: 70px;
	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: 70 70;
  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%;
	min-height		: 90vh;
	display			: block;
	width			: 20%;
	right			: -10%;
	min-width		: 300px;
	background-color: #EEE;
	visibility		: hidden;
	z-index			: 10002!important;
	transition		: all .3s ease;
	opacity			: 0;
	margin			: 0;
	padding			: 20px 0;
	list-style		: none;
}
.navigation.active
{
	visibility		: visible;
	right			: 0%;
	z-index			: 10002!important;
	transition		: all .2s ease;
	opacity			: 1;
	box-shadow		: 0px 40px 30px #00000050;
}
.navigation li
{
	display			: block;
	border-bottom	: 1px solid #FFF;
	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	: 10%;
	padding			: 0 10%;
}

.navigation li a:hover
{
	background-color: #FFF;
}



.main-slider
{
	width			: 100%;
	bottom			: 0;
	position		: relative;
	background-color: #2a2d33;
	height			: 70vh;
	min-height		: 600px;
}

.info
{
	width			: 50%;
	position		: absolute;
	top				: 10%;
	left			: 7%;
	padding-right	: 37%;
	height			: 80%;
	min-height		: 460px;
}

.info .head
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 3em;
	font-weight		: 300;
	color			: #FFF;
	display			: block;
	opacity			: 0;
}
.info p
{
	font-family		: "Open Sans", times;
	font-size		: .9em;
	font-weight		: 300;
	line-height		: 2em;
	color			: #666666;
	opacity			: 0;
}

.info .link
{
	width			: 70%;
	height			: 80%;
	background-color: #DDD;
	background-size	: cover;
	margin-top		: 40px;
	margin-left		: 15%;
	text-align		: right;
	position		: relative;
	opacity			: 0;
}

.info .image
{
	max-width		: 45%;
	min-width		: 45%;
	height			: 80%;
	position		: absolute;
	right			: 15%;
	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 .link img,
.info .image img
{
	width			: auto;
	height			: 100%;
	max-width		: 100%;
	display			: block;
}
.info .detail
{
	width			: 200px;
	margin			: 0px;
	border			: none;
	border-radius	: 5px;
	background-color: #E85858;
	height			: 40px;
	font-family		: 'Cormorant Garamond', arial;
	font-size		: 1em;
	color			: #FFF;
	font-weight		: 300;
	padding			: 0px;
	display			: block;
	text-align		: center;
	text-decoration	: none;
	line-height		: 40px;
	opacity			: 0;
	position		: absolute;
	bottom			: 5%;
	right			: 10%;
}

.course-share
{
	visibility		: hidden;
	width			: 200px;
	padding			: 30px;
	background-color: #FFF;
	border-radius	: 10px;
	box-shadow		: 0 0 30px rgba(0,0,0, .3);
	opacity			: 0;
	transition		: all .2s ease;
	position		: relative;
}
.course-share.active
{
	visibility		: visible;
	opacity			: 1;
	transition		: all .2s ease;
	margin-top		: -20px;
}
.course-share span.close
{
	display			: block;
	position		: absolute;
	top				: 5px;
	right			: 5px;
	color			: #FFF;
	background-color: red;
}


.course-holder
{
	width			: 100%;
	bottom			: 0;
	position		: relative;
	background-color: #2a2d33;
	height			: 40vh;
	min-height		: 350px;
	min-width		: 1200px;
	margin-bottom	: 160px;
}
.course-holder-big
{
	width			: 100%;
	bottom			: 0;
	position		: relative;
	background-color: #2a2d33;
	height			: auto;
	margin-bottom	: 160px;
}

.course-info
{
	width			: 40vw;
	height			: 40vh;
	min-height		: 350px;
	min-width		: 500px;
	position		: absolute;
	bottom			: -20%;
	left			: 10%;
}
.course-info h1
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 3em;
	color			: #FEFEFE;
	padding-bottom	: 20px;
	margin-bottom	: 20px;
}

.course-holder-big h1
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 2em;
	color			: #FEFEFE;
	line-height		: 100px;
	font-weight		: 300;
	margin-left		: 10%;
}

.course-info h2
{
	font-family		: "Open Sans Condensed", sans-serif;
	font-size		: 2.4em;
	color			: #FEFEFE;
	margin			: 0;
	padding			: 0;
	font-weight		: 400;
}


.course-info h4
{
	font-family		: "Open Sans Condensed", sans-serif;
	font-size		: 1.2em;
	color			: #FEFEFE;
	margin			: 5px 0;
	font-weight		: 400;
}
.course-info ul
{
	width			: 100%;
	margin			: 0;
	padding			: 0;
	position		: absolute;
	bottom			: 5%;
	list-style		: none;
}

.course-info ul li
{
	display			: inline-block;
	font-family		: "Open Sans", sans-serif;
	font-size		: .8em;
	margin-right	: 5%;
}

.course-info-big
{
	width			: 80%;
	min-width		: 800px;
	margin			: 0px auto;
}
.course-info-big h1
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 3em;
	color			: #444;
	padding-bottom	: 20px;
	margin-bottom	: 20px;
}

.course-info-big h2
{
	font-family		: "Open Sans Condensed", sans-serif;
	font-size		: 2.4em;
	color			: #444;
	margin			: 0;
	padding			: 0;
	font-weight		: 400;
}


.course-info-big h4
{
	font-family		: "Open Sans Condensed", sans-serif;
	font-size		: 1.2em;
	color			: #FEFEFE;
	margin			: 5px 0;
	font-weight		: 400;
}

.course-video
{
	width			: 40vw;
	height			: 40vh;
	min-height		: 300px;
	min-width		: 400px;
	position		: absolute;
	bottom			: -10%;
	right			: 10%;
	text-align		: right;
}
.course-video img
{
	width			: auto;
	height			: 100%;
	image-orientation	: contain;
}
.course-details
{
	width			: 80%;
	bottom			: 0;
	position		: relative;
	min-width		: 1200px;
	margin			: 0px 10%;
}
.course-content
{
	display			: inline-block;
	font-family		: "Open Sans", sans-serif;
	font-size		: 1em;
	font-weight		: 300;
	max-width		: 70%;
}


.course-attend
{
	position		: absolute;
	border-radius	: 5px;
	background-color: #E85858;
	text-align		: center;
	padding			: 10px;
	width			: 200px;
	top				: 0;
	right			: 5%;
}
.course-attend h4
{
	display			: inline-block;
	font-family		: "Arima Madurai", sans-serif;
	font-size		: 2em;
	font-weight		: 300;
	color			: #FFF;
	margin			: 0px;
}
#attend
{
	width			: 100%;
	background-color: #FFF;
	font-family		: "Open Sans", sans-serif;
	font-size		: 1em;
	color			: #444;
	display			: block;
	text-decoration	: none;
	line-height		: 40px;
	border-radius	: 5px;
}

.trainer-note
{
	width			: 100%;
	margin			: 10% 0;
	padding			: 2% 0;
	background-color: #406c96;
}
.trainer-note h2
{
	font-family		: "Open Sans Condensed", sans-serif;
	font-size		: 2em;
	color			: #FFF;
	margin			: 0 10%;
}

.trainer-note p
{
	font-family		: "Open Sans", sans-serif;
	font-size		: 1em;
	color			: #FFF;
	margin			: 1%  10%;
}

.trainer-info
{
	background-color: #707276;
	margin			: 10%;
	padding			: 50px;
	border-radius	: 10px;
	position		: relative;
}

.trainer-img
{
	width			: 25%;
	display			: inline-block;
}
.trainer-img img
{
	max-width		: 250px;
	height			: auto;
}
.trainer-bio
{
	font-family		: "Open Sans", sans-serif;
	font-size		: 1em;
	color			: #FFF;
	display			: inline-block;
	width			: 70%;
	vertical-align	: top;
	font-weight		: 300;
	line-height		: 1.7em;
}

.trainer-info h1
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 3em;
	color			: #FEFEFE;
	margin			: 0;
}

.footer-content
{
	width			: 100%;
	padding-top		: 25%;
	background		: #242424 url(/img/promo-texture.png) no-repeat center center;
	background-size	: cover;
	position		: relative;
}
.footer-form
{
	width			: 35%;
	left			: 10%;
	top				: 15%;
	position		: absolute;
}
.footer-info
{
	width			: 35%;
	right			: 10%;
	top				: 15%;
	position		: absolute;
	font-family		: "Open Sans", times;
	font-size		: .9em;
	font-weight		: 300;
	letter-spacing	: 1px;
	color			: #eee;
	line-height		: 1.7em;
}

.footer-info ul
{
	margin			: 0;
	padding			: 0;
	list-style		: none;
}
.footer-info li a
{
	font-family		: "Open Sans", times;
	font-size		: .9em;
	font-weight		: 300;
	letter-spacing	: 1px;
	color			: #eee;
	text-decoration	: none;
	line-height		: 30px;
}

.footer-content h1 span
{
	font-family		: "Abhaya Libre", times;
	font-size		: 2em;
	font-weight		: 300;
	letter-spacing	: 1px;
	color			: #eee;
}

.footer-content h1 em
{
	font-family		: "Arima Madurai", times;
	color			: #ec1e24;
	display			: inline-block;
	font-weight		: bold;
	font-size		: 1.5em;
}

.form-control
{
	font-family		: "Open Sans", 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)
}

.btn_submit
{
	width			: 230px;
	font-family		: "Open Sans", arial;
	font-size		: 0.9em!important;
	display			: block;
	background-color: #ec1e24;
	line-height		: 40px;
	color			: #FFF;
	text-decoration	: none;
	text-align		: center;
	margin-top		: 20px;
	border			: none;
}


.footer
{
	background-color: #434343;
	padding			: 80px 0;
	font-family		: "Open Sans", arial;
	color			: #CCC;
	font-weight		: 300;
	font-size		: .9vw;
	text-align		: center;
}


.courses
{
	width			: 50%;
	border-radius	: 100%;
	position		: absolute;
	bottom			: -40px;
	left			: 50%;
	transform		: translateX(-50%);
	text-align		: center;
}

.courses a
{
	text-decoration	: none;
	height			: 10px;
	width			: 10px;
	display			: inline-block;
	transition		: all .3s ease;
	background-color: #EEE;
	border-radius	: 100%;
	margin			: 0 10px;
}


.courses a.courses-current
{
	background-color: red;
	font-weight		: 500;
}

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

.buy-btn,
.con-btn,
.det-btn
{
	font-family		: "Open Sans", arial;
	font-size		: .8em;
	font-weight		: 300!important;
	text-align		: center;
	border			: none;
	background-color: #666;
	width			: 35%;
	padding			: 12px 0;
	margin			: 0 5% auto;
	color			: #FFF;
	display			: inline-block;
	text-decoration	: none;
	border-radius	: 5px;
}
.buy-btn
{
	background-color: #E85858;
	color			: #FFF;
	width			: 40%;
}
.det-btn
{
	background-color: #F3F3F3;
	color			: #E85858;
	width			: 40%;
	border			: 1px solid #DDD;
	cursor			: pointer;
}
.det-btn:hover
{
	background-color: #E85858;
	color			: #FFF;
	width			: 40%;
	border			: 1px solid #E85858;
}

.footer-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;
}
.footer-form h2
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 1.4em!important;
	font-weight		: 400;
	color			: #333;
}

.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;
}
.center
{
	position		: relative;
}
.center h1
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 2.4em!important;
	font-weight		: 400;
	color			: #333;
}
.center h4
{
	font-family		: "Cormorant Garamond", times;
	font-size		: 1.4em!important;
	font-weight		: 400;
	color			: #333;
	position		: absolute;
	right			: 0;
	top				: -10px;
}

.form-control
{
	font-family		: "Open Sans", 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
	{
		margin-top	: 12vh;
	}

	.logo-menu
	{
		width			: 100%;
		padding			: 0;
	}

	.logo
	{
		width			: 30%;
		height			: 10vh;
		margin-left		: 5%;
		margin-top		: 5%;
	}

	.search-bar
	{
		display			: none;
	}

	.menu
	{
		right			: 5%;
	}

	.main-slider
	{
		display		: none;
	}


	.footer-content
	{
		width			: 100vw;
		height			: 100vh;
	}
	.footer-form
	{
		width			: 75%;
		left			: 10%;
		top				: 15%;
		position		: absolute;
	}
	.footer-info
	{
		width			: 75%;
		left			: 10%;
		top				: 60%;
	}

	.course-holder
	{
		width			: 100vw;
		height			: 70vh;
		min-height		: 70vh;
		min-width		: 320px;
		margin-bottom	: 160px;
		padding-top		: 4vw;
	}
	.course-holder-big
	{
		width			: 100%;
		bottom			: 0;
		position		: relative;
		background-color: #2a2d33;
		height			: auto;
		margin-bottom	: 160px;
	}
	.course-holder-big h1
	{
		font-family		: "Cormorant Garamond", times;
		font-size		: 2em;
		color			: #FEFEFE;
		line-height		: 50px;
		font-weight		: 300;
		margin-left		: 10%;
	}

	.course-info
	{
		width			: 90vw;
		height			: 42vh;
		min-height		: 42vh;
		min-width		: 300px;
		position		: absolute;
		top				: 35vh;
		bottom			: auto;
		left			: 5%;
	}


	.course-video
	{
		width			: 80vw;
		min-height		: 35vh;
		max-height		: 30vh;
		height			: 30vh;
		min-width		: 90vw;
		max-width		: 90vw;
		position		: static;
		margin			: 5vw;
	}
	.course-video img
	{
		width			: auto;
		height			: 100%;
		image-orientation	: contain;
	}
	.course-details
	{
		width			: 90%;
		bottom			: 0;
		position		: relative;
		min-width		: 320px;
		margin			: 0px 5%;
	}

	.course-content
	{
		display			: inline-block;
		font-family		: "Open Sans", sans-serif;
		font-size		: 1em;
		font-weight		: 300;
		max-width		: 100%;
		margin-top		: 80px;
	}

	.course-info h1
	{
		font-family		: "Cormorant Garamond", times;
		font-size		: 2.2em;
		color			: #FEFEFE;
		padding-bottom	: 20px;
		margin-bottom	: 20px;
	}

	.course-attend
	{
		position		: absolute;
		border-radius	: 5px;
		background-color: #E85858;
		text-align		: center;
		padding			: 10px;
		width			: 200px;
		top				: -5%;
		left			: 50%;
		right			: auto;
		transform		: translateX(-50%);
	}

	.trainer-img
	{
		width			: 100%;
		display			: block;
		text-align		: center;
	}

	.trainer-bio
	{
		width			: 90%;
		text-align		: center;
	}
	.trainer-info
	{
		background-color: #707276;
		margin			: 5%;
		padding			: 20px;
		border-radius	: 10px;
		position		: relative;
		text-align		: center;
	}
	.trainer-info h1
	{
		font-family		: "Cormorant Garamond", times;
		font-size		: 3em;
		color			: #FEFEFE;
		margin			: 0;
		line-height		: 40px; 
	}

}