/*------------------------------------------------
Item 	: Kilat - Coming Soon HTML with Captcha Form Validation
Author  : igdepe
Email	: igp.ekasuryawan@gmail.com
-------------------------------------------------*/

/*------------------------------------------------|
Fonts typography
--------------------------------|

font-family: 'Montserrat', sans-serif;
font-family: 'Source Sans Pro', sans-serif;

-------------------------------------------------*/
/*------------------------------------------------|
Table of content
--------------------------------|

1. Public style
2. Loader style
3. Notification
4. Slider style
5. Main content
6. Form Style
7. Popup Form Style
8. Media Query ( Resposive Part )

-------------------------------------------------*/

/*-------------------------------
1. Public style
--------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

*{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
}
html,body{
	width: 100%;
	height: 100%;
}
.tb{
	display: table;
	width: 100%;
	height: 100%;
}
.cell{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

/*-------------------------------
2. Loader style
--------------------------------*/
.openingloader{
	position: absolute;
	z-index: 9999;
	opacity: 1;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.openingloaderhide{
	z-index: -1;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.openingloader .wrapspin{
	width: 62px;
	height: 62px;
	display: block;
	margin:0 auto;
}
.openingloader .loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #fbda66;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spinner 2s linear infinite;
}
@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*-------------------------------
3. Notification
--------------------------------*/
.notif{
	position: absolute;
	z-index: -1;
	opacity: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.8);
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.notifopen{
	z-index: 9999;
	opacity: 1;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.notif .wrapinner{
	width: 620px;
	display: block;
	margin: 0 auto;
	background: #fbda66;
	padding: 30px;
	box-shadow: 0 0 40px #0003;
	border-radius: 4px;
}
.notif .wrapinner h3{
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	margin:0 0 30px;
	font-size: 40px;
}
.notif .wrapinner p{
	color:#484848;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 16px;
	text-align: center;
}
.notif .wrapinner .atag{
	margin:30px 0 0;
}
.notif .wrapinner .atag a{
	width: 200px;
	display: block;
	margin: 0 auto;
	background: #d2b654;
	text-align: center;
	padding: 10px;
	border-radius: 4px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
}
.notif .wrapinner .atag a:hover{
	background: #bba24a;
}
.notif .wrapinner .mainbox{
	display: none;
}
.notifopen .wrapinner .openbox{
	display: block;
}

/*-------------------------------
4. Slider style
--------------------------------*/
.owl-banner,
.owl-banner .owl-stage-outer,
.owl-banner .owl-stage-outer .owl-stage,
.owl-banner .owl-stage-outer .owl-stage .owl-item,
.owl-banner .owl-stage-outer .owl-stage .owl-item .wrapitem ,
.owl-banner .owl-stage-outer .owl-stage .owl-item .wrapitem .item{
	width: 100%;
	height: 100%;
}
.owl-banner{
	position: absolute;
	width: 50%;
}
.owl-bannerfull{
	position: absolute;
	width: 100%;
}
.owl-banner:before{
	content: " ";
	position: absolute;
	z-index: 999;
	background-image: linear-gradient(to bottom right, #ff00d7b8, #0800ff82);
	width: 100%;
	height: 100%;
}

/*-------------------------------
5. Main Content
--------------------------------*/
.maincontent{
	width: 100%;
	height: 100%;
}
.maincontent .leftcontent,
.maincontent .rightcontent{
	float:left;
	width: 50%;
	height: 100%;
}
.maincontent .leftcontent{
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-ms-background-size: cover !important;
	-o-background-size: cover !important;
	padding:20px;
}
.maincontent .leftcontentslider{
	padding:0;
}
.maincontent .leftcontent img{
	width: 300px;
	display: block;
	margin:0 auto;
}
.maincontent .leftcontent h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-align: center;
	color:#fff;
	text-transform: uppercase;
	font-size: 50px;
	margin:25px 0;
}
.maincontent .leftcontent h1 span{
	color:#fbda66;
	font-weight: 900;
}
.maincontent .leftcontent h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	text-align: center;
	color:#fff;
	font-size: 28px;
	margin:0;
}

.maincontent .leftcontent h7{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	text-align: center;
	color:#fff;
	font-size: 10px;
	margin:0;
}

.maincontent .leftcontent h8{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	text-align: center;
	color:#fff;
	font-size: 12px;
	margin:0;
}

.maincontent .leftcontent .line{
	width: 1px;
	height: 50px;
	background: #fbda66;
	margin:25px auto;
}
.maincontent .leftcontent h3{
	font-weight: 300;
	text-align: center;
	color:#fff;
	font-size: 20px;
	margin:0;
}
.maincontent .wraptextforslider{
	position: relative;
	z-index: 555;
	width: 100%;
	height: 100%;
}
.maincontent #timepost{
	text-align: center;
	margin:25px 0;
}
.maincontent #timepost .box{
	display: inline-block;
	width: 90px;
	height: 90px;
	margin:0 15px;
	background: #fbda66;
	color:#000;
	padding:5px;
}
.maincontent #timepost .box h4{
	line-height: 75px;
	font-size: 60px;
	font-weight: 300;
	text-align: center;
}
.maincontent #timepost .box p{
	color:#fff;
	text-transform: uppercase;
	margin:25px 0 0;
	text-align: center;
}
.maincontent .rightcontent .wrapcontent{
	padding:15px 25px;
	background: #fff;
}
.maincontent .rightcontent h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-align: center;
	color: #41434a;
	font-size: 38px;
	margin:25px 0;
}
.maincontent .leftcontent h7{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	text-align: center;
	color:#fff;
	font-size: 10px;
	margin:0;
}

.maincontent .leftcontent h8{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	text-align: center;
	color:#fff;
	font-size: 12px;
	margin:0;
}
.maincontent .rightcontent p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	color: #6f6f6f;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	margin: 0;
}
.maincontent .rightcontent .line{
	width: 1px;
	height: 50px;
	background: #fbda66;
	margin:25px auto;
}

/*-------------------------------
6. Form Style
--------------------------------*/
.maincontent .rightcontent form .f_group{
	position: relative;
}
.maincontent .rightcontent form label{
	color: #b5b4b4;
    font-size: 18px;
}
.maincontent .rightcontent form textarea::placeholder,
.maincontent .rightcontent form input::placeholder{
	color:#a8a4a4;
}
.maincontent .rightcontent form input[type=text],
.maincontent .rightcontent form input[type=email],
.maincontent .rightcontent form input[type=tel],
.maincontent .rightcontent form input[type=num],
.maincontent .rightcontent form select{
	width: 100%;
	margin-bottom: 25px;
	font-size: 18px;
	height: 55px;
	border:none;
	border-radius: 0;
	display: block;
	padding:0;
	outline: 0;
	border-bottom:1px solid #000;
}
.maincontent .rightcontent form textarea{
	width: 100%;
	margin-bottom: 25px;
	border:none;
	border-bottom:1px solid #000;
	border-radius: 0;
	display: block;
	padding:0;
	outline: 0;
}

.maincontent .rightcontent form input[type=text]:focus,
.maincontent .rightcontent form input[type=email]:focus,
.maincontent .rightcontent form input[type=tel]:focus,
.maincontent .rightcontent form input[type=num]:focus,
.maincontent .rightcontent form select:focus,
.maincontent .rightcontent form textarea:focus{
	border-bottom:2px solid #fbda66;
}
.maincontent .rightcontent form input[type=submit],
.maincontent .rightcontent form button{
	background: #fbda66;
	border: none;
	padding: 15px 30px;
	width: 200px;
	display: block;
	margin: 0 auto;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	color: #6a5c29;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.maincontent .rightcontent form input[type=submit]:hover,
.maincontent .rightcontent form button:hover{
	color:#000;
}
.maincontentfull .leftcontent,
.maincontentfull .rightcontent{
	width: 100%;
	float:none;
}

/*-------------------------------
7. Popup Form Style
--------------------------------*/
.maincontentfull .popupforms{
	width: 100%;
	position: absolute;
	opacity: 0;
	z-index: -1;
	top:0;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transform:translate(0, -100px);
	-webkit-transform:translate(0, -100px);
	-moz-transform:translate(0, -100px);
	-ms-transform:translate(0, -100px);
	-o-transform:translate(0, -100px);
}
.maincontentfull .popupformsopen{
	opacity: 1;
	z-index: 7777;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transform:translate(0, 0);
	-webkit-transform:translate(0, 0);
	-moz-transform:translate(0, 0);
	-ms-transform:translate(0, 0);
	-o-transform:translate(0, 0);
}
.maincontentfull .popupformsopen .wrapclose_btn{
	position: absolute;
	z-index: 9999;
}
.maincontentfull .popupformsopen .wrapclose_btn a{
	display: block;
	width: 70px;
	height: 70px;
	background: #fbda66;
}
.maincontentfull .popupformsopen .wrapclose_btn a .bar{
	display: block;
	margin:0 auto;
	width: 45px;
	height: 1px;
	background: #000;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	position: relative;
	top:35px;
}
.maincontentfull .popupformsopen .wrapclose_btn a .bar:last-child{
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
.maincontentfull .btn_contact{
	margin-top:40px;
}
.maincontentfull .btn_contact a{
	display: block;
	width: 200px;
	margin: 0 auto;
	text-align: center;
	background: #5973ff;
	color: #fff;
	padding: 10px 0px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 700;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.maincontentfull .btn_contact a:hover{
	background: #4c63dd;
}

/*-------------------------------
8. Media Query ( Resposive Part )
--------------------------------*/
@media only screen and (max-width: 1199px){
	.customrow{
		display: block;
		margin:0;
	}
	.tb,
	.cell{
		display: block;
	}
	.notif .tb{
		display: table;
	}
	.notif .cell{
		display: table-cell;
	}
	.fullwrapslider .tb{
		display: table;
	}
	.fullwrapslider .cell{
		display: table-cell;
	}
	.maincontent .leftcontent img{
		margin:0 auto;
	}
	.maincontent .leftcontent,
	.maincontent .rightcontent{
		float:none;
		width: 100%;
		height: auto;
		padding: 0;
	}
	.maincontentfull .leftcontent,
	.maincontentfull .rightcontent{
		height: 100%;
		min-height: 1000px;
	}
	.singlecover .leftcontent{
		height: 700px;
	}
	.owl-banner{
		width: 100%;
	}
	.owl-banner, .owl-banner .owl-stage-outer, .owl-banner .owl-stage-outer .owl-stage, .owl-banner .owl-stage-outer .owl-stage .owl-item, .owl-banner .owl-stage-outer .owl-stage .owl-item .wrapitem, .owl-banner .owl-stage-outer .owl-stage .owl-item .wrapitem .item{
		height: 700px;
	}
	
	.owl-bannerfull, .owl-bannerfull .owl-stage-outer, .owl-bannerfull .owl-stage-outer .owl-stage, .owl-bannerfull .owl-stage-outer .owl-stage .owl-item, .owl-bannerfull .owl-stage-outer .owl-stage .owl-item .wrapitem, .owl-bannerfull .owl-stage-outer .owl-stage .owl-item .wrapitem .item{
		height: auto;
		min-height: 1000px;
	}
	.maincontent .wraptextforslider{
		height: 700px;
		padding: 90px 0;
	}
	.maincontent .fullwrapslider{
		height: 100%;
		padding:0;
	}
	.maincontentfull{
		min-height: 1000px;
	}
	.maincontentfull .popupforms{
		display: none;
	}
	.maincontentfull .popupformsopen{
		display: block;
	}
	.maincontent .rightcontent h2{
		margin: 0 0 25px;
	}
	.maincontentfull .rightcontent h2 {
	    margin: 60px 0;
	}
	.singlecover .rightcontent h2{
		margin: 0 0 25px;
	}
	.maincontent .rightcontent .wrapcontent{
		padding:90px 0;
	}
}

@media only screen and (max-width: 820px){
	.notif .wrapinner{
		width: 100%;
	}
}

@media only screen and (max-width: 480px){
	.maincontent .leftcontent h1{
		font-size: 25px;
	}
	.maincontent .leftcontent h2{
		font-size: 20px;
	}
	.maincontent .rightcontent h2{
		font-size: 32px;
	}
	.maincontent #timepost .box{
		margin:0 5px 0;
	}
}