/* YLI STYLE By @fahmiyasha - Catalyze 2017 */
@charset "utf-8";
@import url("reset.css");
/*@import url("button.css");*/

body{
	margin:0;
	padding:0;
	background:#fff;
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	font-size:18px;
	color:#252525;
}

.bold { font-weight: 700; }

.left { float:left; } /**/ .right{ float:right; } /**/ .clear{ clear:both; } /**/ .hidden{ display:none; }
.center { position: relative; text-align: center; margin: 37px auto 17px; }

img { border:none; }
p { margin:0 0 15px; }

a { color: #ff6500; text-decoration:none; cursor:pointer !important; -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s; text-decoration: none!important;  }
a:hover{ 	-webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s; color: #ea5615; text-decoration: none;  } 
:focus{ outline:none; }

.placeholder{ color:#888; }
.relative{ position:relative; }
.red{ color:#e14739; }

h1, h2, h3, h4{ padding:0; margin:0; }

button{ border:none; cursor:pointer; }

textarea{
	resize:none;
}

.button { color: #464646; height: 50px; border: 2px solid #e0e0e0; background: url(../images/btn_arrow.png) right center no-repeat; line-height: 50px; font-size: 20px; padding-left: 10px; padding-right: 34px; display: inline-block;}

.button:hover { color: #000; border: 2px solid #464646!important;}

.container{
	max-width: 1020px;
	width: 100%;
	position: relative;
	padding: 0px 20px;
}

#Banner{
	height: 100vh;
	background: url(../images/header-bg.jpg) center center no-repeat;
	background-size: cover;
}


#Banner .container{
	height: 100%;
	display: table;
}


#Banner .container .scrolldown{
	position: absolute;
	bottom: 30px;
	width: 52px;
	height: 52px;
	background: url(../images/Banner-ScrollDown.png) center center no-repeat;
	left: 50%;
	margin-left: -26px;
	cursor: pointer;
}

#Banner .container .cell{
	display: table-cell;
	text-align: center;
	color: #fff;
	vertical-align: middle;
}

#Banner .container .cell .icon{
	width: 60px;
	height: 60px;
	background: url(../images/Banner-LeafIcon.png) center center no-repeat;
	background-size: cover;
	display: block;
	margin: 0px auto 30px;
}

#Banner .container .cell h1,
#Banner .container .cell h2{
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

#Banner .container .cell h2{
	font-size: 18px;
	margin-bottom: 20px;
}

#Banner .container .cell h1{
	font-size: 45px;
	margin-bottom: 30px;
}

#Banner .container .cell p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	margin-bottom: 30px;
}

#Banner .container .cell .link-area{
	display: block;
}

#Banner .container .cell .link-area a{
	display: inline-block;
	margin: 0px 5px;
	width: 55px;
	height: 55px;
	font-size: 0px; 
	border-radius: 60px;
	vertical-align: top;
	-webkit-transition: all .25s ease-in-out;
	   -moz-transition: all .25s ease-in-out;
	    -ms-transition: all .25s ease-in-out;
	     -o-transition: all .25s ease-in-out;
	        transition: all .25s ease-in-out;
}

#Banner .container .cell .link-area a.fb{
	background: url(../images/fb.png) center center no-repeat;
}

#Banner .container .cell .link-area a.tw{
	background: url(../images/tw.png) center center no-repeat;
}

#Banner .container .cell .link-area a.ig{
	background: url(../images/ig.png) center center no-repeat;
}

#Banner .container .cell .link-area a:hover{
	background-color: rgba(0, 0, 0, .3);
}

#PrizeInfo{
	background: url(../images/prize-bg.jpg);
	padding: 60px 0px;
}

#PrizeInfo .container{
	padding-right: 276px;
	background: url(../images/Hadiah.png) center right 60px no-repeat;
	color: #fff;
}

#PrizeInfo .container .title{ 
	font-size: 25px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;	
}

#PrizeInfo .container ul{ 
	margin-top: 30px;
	padding-left: 20px;
	list-style-type: disc;
	line-height: 30px;  
}

#Howto{ padding: 50px 0px 60px; }

#Howto h1{
	font-size: 25px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;	
}

#Howto .HTlist{
	padding: 60px 0px 80px;
	border-bottom: 1px solid #e1e1e1;           
}

#Howto .HTlist .img,
#Howto .HTlist .text{
	width: 50%;
	display: block;
}

#Howto .HTlist .img img{ 
	width: 100%; 
	display: block;
	margin: 0px auto;
	max-width: 450px;
}

#Howto .HTlist .text{
	padding-left: 50px;
	position: relative;
}

#Howto .HTlist .text .num{
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	color: #fff;
	font-size: 25px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-align: center;
	position: absolute;
	top: -5px;
	left: 0px;
	background-color: #ee7813;
}

#Howto .HTlist .text h2{
	font-size: 25px;
	line-height: 35px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;	
}

#Howto .HTlist .text ul,
#Howto .HTlist .text p{
	margin: 0px;
	margin-top: 10px;
	line-height: 30px;
}

#Howto .HTlist .text ul{ padding-left: 20px; }

#Howto .HTlist .text .periode,
#Howto .HTlist .text .video-rule{
	display: inline-block;
	padding: 14px 20px;
	border-radius: 3px;
	color: #fff;
	position: relative;
	margin-top: 30px;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;	
}

#Howto .HTlist .text .periode{
	background-color: #55a954;
}

#Howto .HTlist .text .video-rule{
	background-color: #00b1c3;
}

#Howto .HTlist .text .periode::before,
#Howto .HTlist .text .video-rule::before {
	content: '';
	width: 57px;
	height: 11px;
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform: translateY(-100%);
	   -moz-transform: translateY(-100%);
	    -ms-transform: translateY(-100%);
	     -o-transform: translateY(-100%);
	        transform: translateY(-100%);
}

#Howto .HTlist .text .periode::before{
	background: url(../images/periode-arrow.png) center center no-repeat;
}

#Howto .HTlist .text .video-rule::before{
	background: url(../images/video-rule-arrow.png) center center no-repeat;
}

#Howto .HTlist .text .button-area { margin-top: 40px; }
#Howto .HTlist .text .button-area .btn_{
	padding-bottom: 17%;
	display: inline-block;
	font-size: 0px;
	background-size: 100% auto!important;
	-webkit-transition: all .25s ease-in-out;
	   -moz-transition: all .25s ease-in-out;
	    -ms-transition: all .25s ease-in-out;
	     -o-transition: all .25s ease-in-out;
	        transition: all .25s ease-in-out;
}

#Howto .HTlist .text .button-area .btn_.appstore{
	width: 43.63636363636364%;
	margin-right: 4.545454545454545%;
	background: url(../images/APPLE.png) center top no-repeat;
}

#Howto .HTlist .text .button-area .btn_.appstore:hover{
	background: url(../images/APPLE.png) center bottom no-repeat;
}

#Howto .HTlist .text .button-area .btn_.playstore{
	width: 49.54545454545455%;
	background: url(../images/ANDROID.png) center top no-repeat;
}

#Howto .HTlist .text .button-area .btn_.playstore:hover{
	background: url(../images/ANDROID.png) center bottom no-repeat;
}

#Sponsorship{
	padding-bottom: 60px;
}

#Sponsorship .organized{
	width: 64.30612244897959%;
	float: left;
}

#Sponsorship .sponsored {
    width: 26.693878%;
    float: right;
}

#Sponsorship .title{
	font-size: 12px;
	color: #7d7d7d;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	margin-bottom: 30px;
}

#Sponsorship a{
	display: inline-block;
	vertical-align: middle;
	margin-right: 80px;
	-webkit-transition: all .25s ease-in-out;
	   -moz-transition: all .25s ease-in-out;
	    -ms-transition: all .25s ease-in-out;
	     -o-transition: all .25s ease-in-out;
	        transition: all .25s ease-in-out;
}


#Sponsorship a:hover{ opacity: .6;}
#Sponsorship a:last-child{ margin: 0px; }

#Info{
	background: #f7f7f7;
	padding: 60px 0px;
	text-align: center;
}

#Info h1{ 
	font-size: 25px; 
	margin-bottom: 20px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}

#Info p{ 
	line-height: 30px;
	margin: 0px auto;
	margin-bottom: 30px;
	max-width: 680px;
}

#Info .link-area a{
    display: inline-block;
    margin: 0px 20px;
    max-width: 180px;
    width: 50%;
    border-radius: 3px;
    border: 2px solid #ef8021;
    color: #ef8021;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    height: 50px;
    line-height: 45px;
    font-size: 16px;
}

#Info .link-area a:hover{
	background: #ef8021;
	color: #fff;
	text-decoration: none;
}

footer{
	text-align: center;
	background: #ebebeb;
	height: 80px;
	line-height: 80px;
	font-size: 13px;
	color: #636363;
}


@media screen and (max-width: 1030px) {
	#Sponsorship .sponsored,
	#Sponsorship .organized {
	    width: 100%;
	    float: left;
	    text-align: center;
	}

	#Sponsorship .sponsored{ 
	    margin-top: 23px;
	}

	#Sponsorship a{
		margin: 0px 20px!important;
	}

}

@media screen and (max-width: 768px) {
	#PrizeInfo .container {
	    padding-right: 20px;
	    background: none;
	    color: #fff;
	}

	#PrizeInfo .container .title {
	    padding-left: 20px;
	    background: url(../images/Hadiah.png) center left no-repeat;
	}

	#PrizeInfo .container .title {
	    background: url(../images/Hadiah.png) center left no-repeat;
	    background-size: auto 47px;
	    padding: 20px 0px;
	    padding-left: 56px;
	}

	#PrizeInfo{ padding: 30px 0px; }

	#PrizeInfo .container ul{ margin-top: 20px;}

	#Banner .container .cell p br{ display: none; }

	#Banner .container .cell h1 {
	    font-size: 30px;
	    margin-bottom: 20px;
	}

	#Banner .container .cell{ padding: 50px 0px 120px }


}

@media screen and (max-width: 700px) {
	#Howto .HTlist {
	    padding: 40px 0px;
	    position: relative;
	}

	#Howto .HTlist .img, #Howto .HTlist .text {
	    width: 100%;
	    display: block;
	    float: none;
	    max-width: 480px;
	    margin: 0px auto;
	    /*padding: 0px;*/
	}

	#Howto .HTlist .img{ margin-bottom: 20px; }

}


@media screen and (max-width: 480px) {
	#Info p, #PrizeInfo .container ul, #Howto .HTlist .text ul, #Howto .HTlist .text p, #Banner .container .cell p{
		font-size: 16px; 
		line-height: 25px;
	}

	#Info .link-area a {
	    margin: 0px 12px;
	    max-width: 160px;
	    font-size: 14px;
	}

	#Howto .HTlist .text h2 {
	    font-size: 20px;
	    line-height: 25px;
	}

	#Banner{ height: auto; }

	#Howto .HTlist .text .num{
		top: -11px; 
	}

}

@media screen and (max-width: 480px) {
	#Info .link-area a {
	    width: 100%;
	    max-width: none;
	    margin: 0px;
	    margin-bottom: 20px;
	}

	#Howto .HTlist .text .periode, #Howto .HTlist .text .video-rule {
	    padding: 10px;
	    margin-top: 20px;
	    font-size: 12px;
	}

	#Banner .container .cell h1 {
	    font-size: 25px;
	    margin-bottom: 20px;
	}

	#Banner .container .cell h2 {
	    font-size: 15px;
	    margin-bottom: 20px;
	}

	#Banner .container .cell .icon{ margin: 0px auto 20px; }

	#Info p, #PrizeInfo .container ul, #Howto .HTlist .text ul, #Howto .HTlist .text p, #Banner .container .cell p {
	    font-size: 14px;
	    line-height: 20px;
	}

	#Banner .container .cell .link-area a {
	    display: inline-block;
	    margin: 0px 5px;
	    width: 30px;
	    height: 40px;
	    background-size: auto 60%!important;
	}

}

@media screen and (max-width: 366px) {
	#Banner .container .cell h2 {
	    font-size: 14px;
	    margin-bottom: 10px;
	}

	#Banner .container .cell h1 {
	    font-size: 20px;
	    margin-bottom: 10px;
	}

	#Banner .container .cell p {
	    margin-bottom: 10px;
	}

	#Howto .HTlist .text .button-area{ margin-top: 0px;}
}

.bounces {
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
}