/*


    Template Name   : Capture
    Template Author : pixelhint.com
    Author Email    : contact@pixelhint.com
    License         : pixelhint.com/license
    
    
    *****************************************
    
    
    - Header
    - Hero section
    - Featured on seaction
    - About section
    - App features section
    - Testimonials section
    - Subscription section
    - Footer
    - Responsive CSS
    

    */




    /*		Fonts		*/
    @font-face {
    	font-family: 'khmer_mnbold';
    	src: url('../fonts/khmermn-bold-webfont.woff2') format('woff2'),
    	url('../fonts/khmermn-bold-webfont.woff') format('woff');
    	font-weight: normal;
    	font-style: normal;
    }

/*
@font-face {
    font-family: 'open_regular';
    src: url('../fonts/opensans-regular.eot');
    src: url('../fonts/opensans-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular.woff') format('woff'),
         url('../fonts/opensans-regular.ttf') format('truetype'),
         url('../fonts/opensans-regular.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

/*		General CSS		*/

body,html {
	height: 100%;
}

body{
	background: #fff;
	padding: 0px;
	margin: 0px;
	font-family:"ヒラギノ角ゴシック W1", "Hiragino Kaku Gothic W1", "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: normal;
}

a:focus{
	color: #fff!important;
	text-decoration: none!important;
}

.container{
	max-width: 1130px;
}

.page p {
	margin: 0 0 50px;
}

body.page {
	font-size: 16px;
	line-height: 2;
}

body.page .content ul {
	margin: 50px 0 50px;
	padding-left: 20px;
}

body.page .content li {
	margin-bottom: 30px;
}

section.content {
	padding: 0 20px;
}

.page .content th {
	width: 40%;
	vertical-align: top;
}

/*		Header 		*/

header {
	position: fixed;
	display: block;
	width: 100%;
	height: 60px;
	z-index: 99;
	background-color: #fff;
	top: 0;
}

header .logo{
	display: table-cell;
	margin: 45px 100px 0 0;
}

.overlay {
	display: none;
	position: fixed;
	z-index: 1;
	background-color: rgba(255,255,255,.95);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.overlay.show {
	display: block;
}


/*
header .burger_icon{
	display: none;
	float: right;
	background: #ffffff;
	padding: 5px 10px;
	text-transform: uppercase;

	color: #43b779;
	font-size: 14px;

	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;

	margin: 45px 10px 0 0;
}
*/


header .burger_icon {
	position: fixed;
	display: none;
	width: 80px;
	height: 80px;
	text-indent: -900000px;
	margin: 10px 10px 0 0;
	background: url('../img/menu_button.png') no-repeat center center;
	background-size: contain; 
}

header .burger_icon:hover{
	cursor: pointer;
}

header .burger_icon.active{
	background: url('../img/menu_close_button.png') no-repeat center center;
	background-size: contain;
}

header nav{
	margin-top: 0;
	line-height: 0.8;
}

header nav li {
	display: inline-block;
	width: 19%;
}

header nav li:first-child{
	margin: 0;
}

header nav li a {
	color: #282828;
	font-size: 20px;
	transition: all .2s linear;
	-o-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	text-align: center;
	display: block;
	padding: 16px 0;
	border-right: 2px solid #ddd;
}

header nav li a:hover,
header nav li a:focus{
	text-decoration: none;
	color: #00d8ff!important;
}

header nav li a span {
	font-family: 'khmer_mnbold';
	display: block;
	font-size: 14px;
	color: #a1a1a1;
}

.page h1 span {
	font-family: 'khmer_mnbold';
	display: block;
	font-size: 24px;
	color: #a1a1a1;
}

.page h1 {
	padding-bottom: 20px;
	border-bottom: 2px solid #ccc;
	margin-bottom: 30px; 
}

header .social{
	display: table-cell;
	margin-top: 45px;
}

header .social li{
	float: left;
	margin-left: 20px;
}

header .social li:first-child{
	margin: 0;
}

.col-centered{
	float: none;
	margin: 0 auto;
}

/*		Hero section 		*/

.hero {
	display: block;
	position: relative;
	height: 500px;
	background: #56afef url('../img/main_bg.jpg') no-repeat center top;
	background-size: cover; 
	margin-top: 60px;
}

.gradient{
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 100px;
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.page_hero {
	margin-top: 0;
	padding-top: 50px;
	height: 540px;
}

.page .page_hero {
	height: 100px;
	padding-top: 0;
	background: url(../img/main_bg.jpg) no-repeat center bottom;
	background-size: cover;
	margin-top: 60px;
}

.key_visual {
	height: 500px;
}

.page .key_visual {
	height: 100px;
	position: relative;
}

.key_visual .girls {
	width: 400px;
	height: 500px;
	margin: 0 auto;
	background: url(../img/girls.png) no-repeat center top;
}

.key_visual .logo {
	width: 410px;
	height: 230px;
	background: url(../img/negimate_logo.png) no-repeat center top;
	background-size: contain;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -205px;
}

.page .key_visual .logo {
    width: 160px;
    height: 93px;
    bottom: -30px;
    margin-left: -130px;
}

.twitter {
	background: url('../img/tw_bg.jpg') no-repeat center top;
	background-size: cover;
	position: relative;
}

.twitter .container {
	padding: 0 30px;
}

.twitter_button {
	margin: 60px auto;
	width: 330px;
}

.twitter .yukihime {
	background: url(../img/yukihime.png) no-repeat;
	background-size: contain;
	position: absolute;
	height: 220px;
	width: 140px;
	left: 50%;
	margin-left: 340px;
	top: 30px;
}

.twitter .yue {
	background: url(../img/yue.png) no-repeat;
	background-size: contain;
	position: absolute;
	height: 200px;
	width: 150px;
	left: 50%;
	margin-left: -480px;
	bottom: 50px;
}

.hero .caption {
	position: absolute;
	max-width: 550px;
	margin-left: 80px;
	top: 50%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	-moz-transform:translate(0,-50%);
	-o-transform:translate(0,-50%);
}

a.app_store_btn{
	display: inline-block;
	text-decoration: none;
	margin: 0px;
	width: 252px;
	height: 82px;
}

a.app_store_btn span {
	display: none;
}

.play_store{
	background: url('../img/play_store.png') no-repeat;
}

.apple_store{
	background: url('../img/app_store.png') no-repeat;
}

a.app_store_btn:hover,
a.app_store_btn:focus{
	border-color: #41c27d;
	color: #41c27d!important;
}

a.app_store_btn:hover .play_icon{
	background: url('../img/play_hover.png') no-repeat;
}

a.app_store_btn:hover .iphone_icon{
	background: url('../img/iphone_app_hover.png') no-repeat;
}

a.app_store_btn:hover .android_icon{
	background: url('../img/android_app_hover.png') no-repeat;
}

a.app_link{
	text-transform: lowercase;
	letter-spacing: .5px;
	color: #636363;
	font-family: "open_regular", Helvetica, Arial, sans-serif;
	font-size: 16px;
}

a.app_link:hover,
a.app_link:focus{
	text-decoration: none;
	color: #41c27d!important;
}

a.app_store_btn,
.play_icon,
.iphone_icon,
.android_icon,
a.app_link{
	transition: all .2s linear;
	-o-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
}

.twitter .col-centered {
	max-width: 600px;
	height: 705px;
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	margin-bottom: 60px;
}

.about_video{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: rgba(0, 0, 0, .8);
	display: none;
}

.about_video iframe{
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.close_video{
	text-decoration: none;
	position: absolute;
	width: 38px;
	height: 38px;
	top: 50px;
	right: 50px;
	background: url('../img/close_video.png') no-repeat;
	z-index: 9999;
}


/*		Featured on section 		*/

.featured_on{
	width: 100%;
	padding: 25px 0;
	background: #fff;
}

.featured_on ul{
	margin: 0;
}

.featured_on li {
	position: relative;
	height: 100%;
	display: inline-block;
}

.featured_on li:first-child{
	margin-left: 0;
}

.twitter_button {
    margin: 60px auto;
    width: 100%;
    text-align: center;
    position: relative;
}


/*		About section 		*/

.about{
	padding: 100px 0;
}

.about .iphone{
	max-width: 339px;
	position: relative;
	display: inline-block;
	text-align: center;
}

.about .iphone img{
	width: 100%;
	height: auto;
}

.about .features_list{
	margin-left: 50px;
}

.about .features_list h1{
	color: #525151;
	font-family: "open_bold", Helvetica, Arial, sans-serif;
	font-size: 34px;
	font-weight: bold;
	line-height: 46px;
	margin: 0 0 20px 0;
	word-break: break-word;
}

.about .features_list p{
	color: #767272;
	font-family: "open_regular", Helvetica, Arial, sans-serif;
	font-size: 16px;
	margin-bottom: 45px;
	line-height: 32px;
}

.about .features_list ul{
	margin-bottom: 30px;
}

.about .features_list ul li{
	display: block;
	position: relative;
	color: #6c6c6c;
	font-family: "open_semibold", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 44px;
	text-indent: 25px;

	transition: all .2s linear;
	-o-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
}

.about .features_list ul li.camera_icon{	
	background: url('../img/icon1.png') no-repeat;
	background-position: 0 15px; 
}

.about .features_list ul li.video_icon{	
	background: url('../img/icon2.png') no-repeat;
	background-position: 0 15px; 
}

.about .features_list ul li.eye_icon{	
	background: url('../img/icon3.png') no-repeat;
	background-position: 0 14px; 
}

.about .features_list ul li.pic_icon{	
	background: url('../img/icon4.png') no-repeat;
	background-position: 0 14px; 
}

.about .features_list ul li.loc_icon{	
	background: url('../img/icon5.png') no-repeat;
	background-position: 3px 13px; 
}

.about .features_list ul li span{
	display: inline-block;
}


section h2 {
	font-size: 32px;
	margin: 0 0 0 0;
	font-weight: normal;
	text-align: center;
	line-height: .8;
}

section h2 span {
	color: #ccc;
	font-family: 'khmer_mnbold';
	font-size: 24px;
	font-weight: normal;
	display: block;
}



/*		App features 		*/

.episode {
	width: 100%;
	padding: 40px 0 40px 0;
	background: #120a24 url('../img/episode_bg.jpg') repeat-x top center;
	background-size: cover;
	margin-bottom: 40px;
	margin-top: 40px;
}

.episode h2 {
	color: #fff;
}

.episode_btn {
	display: block;
	background: url('../img/episode_btn.png') no-repeat top center;
	background-size: contain;
	width: 100%;
	padding-top: 50%;
	margin: 40px auto;
}

.episode_btn span {
	display: none;
}

/*		Testimonials section 		*/

.characters {
	padding: 0;
}

.characters h2 {
	margin: 30px 0;
}

.characters h3 {
	text-indent: -900000px;
	height: 90px;
	margin: 40px 0 0;
}

.characters h3.uqholder {
	background: url('../img/uq_logo.png') no-repeat center top; 
	background-size: contain;
}

.characters h3.mahora {
	background: url('../img/mahora_logo.png') no-repeat center top;
	background-size: contain;
}

.characters .characters_list{
	max-width: 1020px;
	margin: 40px auto 0;
}

.characters .characters_list .block {
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 0;
	width: 300px;
	left: 50%;
	margin-left: -150px;
}

.characters .characters_list .block .name {
	font-weight: bold;
	font-size: 24px;
	line-height: 1;
}
.characters .characters_list .block .name,
.characters .characters_list .block .voice {
	display: block;
	color: #673504;
}

.characters .characters_list .character_100 .block .name {
	font-size: 20px;
}

.characters .character_1 {
	background: url('../img/panel_character_1.png') no-repeat center top;
	background-size: contain;
} 

.characters .character_2 {
	background: url('../img/panel_character_2.png') no-repeat center top;
	background-size: contain; 
} 

.characters .character_3 {
	background: url('../img/panel_character_3.png') no-repeat center top;
	background-size: contain; 
} 

.characters .character_5 {
	background: url('../img/panel_character_5.png') no-repeat center top;
	background-size: contain; 
} 

.characters .character_6 {
	background: url('../img/panel_character_6.png') no-repeat center top;
	background-size: contain; 
} 


.mahora_characters .character_18 {
	background: url('../img/panel_character_18.png') no-repeat center top;
	background-size: contain;
} 

.mahora_characters .character_19 {
	background: url('../img/panel_character_19.png') no-repeat center top;
	background-size: contain; 
} 

.mahora_characters .character_100 {
	background: url('../img/panel_character_100.png') no-repeat center top;
	background-size: contain; 
} 

.mahora_characters .character_20 {
	background: url('../img/panel_character_20.png') no-repeat center top;
	background-size: contain; 
} 

.mahora_characters .character_23 {
	background: url('../img/panel_character_23.png') no-repeat center top;
	background-size: contain; 
} 

.characters_list li {
	position: relative;
	padding-top: 85%;
}

.#tslider{
	text-align: center!important;
	position: relative!important;
}

.owl-controls{
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 40px;
	padding: 0;
}

.owl-controls .owl-prev,
.owl-controls .owl-next{
	display: inline-block;
	width: 32px;
	height: 32px;
	background: url('../img/nav_arrow.png') no-repeat;
	text-indent: -200px;
	overflow: hidden;

	transition: all .2s linear;
	-o-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
}

.owl-controls .owl-prev{
	background-position: 0 0;
}
.owl-controls .owl-next{
	background-position: -33px 0;
	margin-left: 40px;
}

.owl-controls .owl-prev:hover,
.owl-controls .owl-next:hover{
	cursor: pointer;
	background: url('../img/nav_arrow_hover.png') no-repeat;
}

.owl-controls .owl-prev:hover{
	background-position: 0 0;
}
.owl-controls .owl-next:hover{
	background-position: -33px 0;
}



/*		Gameplay section 		*/


.gameplay {
	width: 100%;
	padding: 40px 0 0px 0;
	background: #679245 url('../img/battle_bg.jpg') repeat-x top center;
	background-size: cover;
	margin-top: 40px;
	margin-bottom: 40px;

}

.battles_list {
	max-width: 820px;
	margin: 40px auto; 
}

.gameplay h2 {
	color: #fff;
	font-weight: normal;
}

.gameplay .battles_list li {
	padding-top: 45%;
	position: relative;
}

.gameplay .battles_list li .block {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.gameplay .battles_list li .block .img,
.gameplay .battles_list li .block .description {
	float:left;
	width: 30%;
	height: 100%;
}

.gameplay .battles_list li .block .description {
	word-break: break-word;
	display: inline;
	text-align: left;
	color: #fff;
	width: 60%;
	margin-left: 3%;
	padding: 30px;
	background-color: rgba(255,255,255,0.2);
	border-radius: 10px;
}

.gameplay .battles_list li .description h3,
.gameplay .battles_list li .description p {
}

.gameplay .battles_list li .description p {
	font-size: 15px;
	margin: 20px 0;
	line-height: 2;
}

.gameplay .battles_list .img {
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain; 
}

.gameplay .battles_list .battle_1 .img {
	background-image: url('../img/battle_1.png');
}

.gameplay .battles_list .battle_2 .img {
	background-image: url('../img/battle_2.png');
}

.gameplay .battles_list .battle_3 .img {
	background-image: url('../img/battle_3.png');
}

.gameplay .battles_list .battle_4 .img {
	background-image: url('../img/battle_4.png');
}

.gameplay .battles_list .battle_5 .img {
	background-image: url('../img/battle_5.png');
}


/*		End Gameplay section 		*/

/*		Gallery section 		*/


.gallery {
	width: 100%;
	padding: 40px 0 0px 0;
	background-size: cover;
	margin-top: 40px;
	margin-bottom: 40px;

}

.gallery_list {
	max-width: 820px;
	margin: 40px auto; 
}

.gallery_list .img {
	position: absolute;
	top: 6.2%;
	left: 0;
	right: 1.1%;
	bottom: 10.2%;
}

.gallery h2 {
	font-weight: normal;
}

.gallery .gallery_list li {
	position: relative;
	padding-top: 40%;
	background: url('../img/gallery_phone.png') no-repeat center center;
	background-size: contain;
}

.gallery .gallery_list li .block {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.gallery .gallery_list .gallery_1 .img {
}

.gallery .gallery_list .gallery_2 .img {
	background: url('../img/ss_home.png') no-repeat top center;
	background-size: contain; 
}

.gallery .gallery_list .gallery_3 .img {
	background: url('../img/ss_grow.png') no-repeat top center;
	background-size: contain; 
}

.gallery .gallery_list .gallery_4 .img {
	background: url('../img/ss_episodes.png') no-repeat top center;
	background-size: contain; 
}

.gallery .gallery_list .gallery_5 .img {
	background: url('../img/ss_battle.png') no-repeat top center;
	background-size: contain; 
}

.gallery .gallery_list .gallery_6 .img {
	background: url('../img/ss_gacha.png') no-repeat top center;
	background-size: contain; 
}


/*		End Gallery section 		*/



/*		Footer 		*/

footer {
	padding: 40px 0;
	text-align: left;
	background: #222;
	color: #eee;
}

footer .app_platform li{
	margin: 0 0 0 60px;
}

footer .app_platform li:first-child{
	margin: 0;
}

footer div {
	margin-bottom: 40px;
}

footer h2 {
	color: #eee;
	margin: 0;
	font-size: 16px;
}

footer table td {
	padding: 5px; 
}

footer li {
	text-align: right;
	line-height: 2.3;
}

footer li a {
	color: #fff;
	text-decoration: underline; 
}

footer .copyright{
	margin-top: 60px;
	color: #ccc;
	font-size: 12px;
	letter-spacing: .5px;
	clear: both;
}

/*		Responsive CSS 		*/

@media (max-width: 400px) {
	.twitter .col-centered iframe{
    width: 340px !important;
	}
}

@media (max-width: 360px) {
	.featured_on li{
		display: block;
		width: 100%;
	}
	.twitter .col-centered iframe{
    width: 320px !important;
	}
}

@media (max-width: 320px) {
	.featured_on li{
		display: block;
		width: 100%;
	}
	.twitter .col-centered iframe {
    width: 280px !important;
	}
}

@media (max-width: 767px) {


	/*		Header 		*/
	header .logo{
		margin-right: 0;
	}

	header .burger_icon{
		display: block;
	}

	header nav {
		width: 100%;
		float: none;
		background: #fff;
		position: absolute;
		margin-top: 0;
		left: 0;
		display: none;
		padding: 100px 0; 
	}

	header nav.show{
		display: block;
	}

	header nav li{
		display: block;
		width: 100%;
		margin: 0;
		text-align: center;
	}

	header nav li a{
		display: block;
		width: 100%;	
		padding: 20px 0;
		border-bottom: 1px solid #ccc;
	}

	header nav li:first-child a{
		border-top: 1px solid #ccc;
	}

	header .social{
		display: none;
	}

	header .social li{
		margin-left: 10px;
	}

	/*		Hero section 		*/


	.app_store_btn{
		display: block;
		width: 90%;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	/*		Featured on section		*/
	.featured_on{
		padding: 25px 0!important;
	}

	.featured_on ul li{
		margin-bottom: 0 !important;
	}

	.key_visual .logo {
		width: 88%;
		background: url(../img/negimate_logo.png) no-repeat center bottom;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100%;
		margin: 0 6%;
		background-size: contain;
	}

	.key_visual .girls {
	    width: 100%;
	}

	/*		About Section 		*/
	.about .features_list {
		text-align: center;
		margin: 0;
	}

	.about .features_list ul li{
		text-indent: 0;
		background: transparent!important;
		margin-bottom: 20px;
	}

	.about .features_list ul li:last-child{
		margin: 0;
	}

	a.app_link{
		display: block;
		margin-top: 20px;
	}

	footer li {
		text-align: left;
		line-height: 2.3;
	}

	header {
		position: fixed;
		display: block;
		width: 100%;
		height: 60px;
		z-index: 99;
		background-color: transparent;
		top: 0;
	}

	.hero {
		margin-top: 0;
		padding-top: 50px;
		height: 540px;
		width: 100%;
		background: #56afef url('../img/main_bg.jpg') no-repeat center center;
		background-size: cover%;
	}

	.page_hero {
		margin-top: 0;
		padding-top: 50px;
		height: 540px;
	}

	.page .page_hero {
		height: 100px;
		padding-top: 0;
		background: url(../img/main_bg.jpg) no-repeat center bottom;
		background-size: 160%;
		margin-top: 0; 
	}
	
	.page .key_visual {
		height: 100px;
	}
	
	.page .key_visual .logo {
		width: 160px;
		height: 93px;
		right: 0;
		left: initial;
		bottom: initial;
		top: 0;
	}

	.twitter .yukihime,
	.twitter .yue {
		display: none;
	}

	.gameplay h3 {
    font-size: 20px;
    margin: 0;
	}

	.gameplay .battles_list li .block .description {
		padding: 15px; 
	}

	.gameplay .battles_list li .description p {
	    font-size: 12px;
	    margin: 5px 0;
	    line-height: 1.4;
	}

	.gameplay .battles_list li {
    padding-top: 135%;
    position: relative;
	}

	.gameplay .battles_list li .block .img {
    float: none;
    width: 100%;
    height: 65%;
	}

	.gameplay .battles_list li .block .description {
    float: none;
    width: 80%;
    height: 30%;
    display: block;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
	}

	.gameplay .battles_list .img {
		background-position: center center;
	}


}