/*---------------------------------------------------------------------------
[CSS LAYOUT FOR ONEDERFUL PARTY HAUS]


How to use :
- Simply copy the title to do a search in this file
- Or copy the individual content to go straight to that element/class/id


[Table of content]


Master_html_tag [control shared html tag css]
	-	body

	-	textarea, input, button, fieldset

	-	textarea, input

	-	span


Master_class [control shared class css]
	-	.icon

	-	.btn


Navigation [control the navigation menu css]
	-	#nav_container

	-	.nav

	-	#menu_icon

Slideshow [control the slideshow css]
	-	.slideshow_container

	-	.slides

	-	.slide_prev, .slide_next

	-	.slide_text

	-	.dot

	-	.active

	-	.fade

Footer
	-	#footer

	-	#footer span



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


/*-----------------------------[Master_control]-------------------------------*/

html{
	height: 100%;
}

*, *:before, *:after{
	-moz-box-sizing			: border-box;
	-webkit-box-sizing		: border-box;
	box-sizing				: border-box;
}

body{
	/*background: url(../img/background.jpg) center;*/
	position				: relative;
	margin					: 0;
	padding-bottom			: 100px;
	width					: 100%;
	min-height				: 100%;
}

textarea, input, button, fieldset{
	outline					: none;
	border					: none;
}

a{
	text-decoration: none;
}

h2, span, input{
	color					: #6A6A6A;
	font-family				: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size				: 1.25em;
	letter-spacing			: 2px;
	line-height				: 1.6;
}

label{
	display					: block;
}

/*-----------------------------[Master_class]---------------------------------*/

.icon{
	width					: 20px;
	height					: 20px;
}

.btn{
	background				: none;
	border					: none;
	padding-right			: 10px;
	cursor					: pointer;
	height					: 50px;
}

.btn:focus{
	outline					: none;
}

/*-----------------------------[Login_pop_up]---------------------------------*/

/*#login_box_container{
	display					: none;
	width					: 100%;
	height					: 100%;
	position				: fixed;
	overflow				: auto;
	z-index					: 1;
	top						: 0;
	left					: 0;
	background-color		: rgba(0,0,0,0.4);
}

#login_box{
	border-radius			: 10px;
	width					: 100%;
	max-width				: 18em;
	background				: #F0F0F0;
	margin					: 250px auto auto auto;
	padding-bottom			: 10px;
}

#login_box #login_deco{
	max-width				: 18em;
	min-height				: 0.5em;
	position				: absolute;
	z-index					: 2;
	display					: inline-block;
	border-radius			: 10px 10px 0px 0px;
	width					: inherit;
}

#login_box .close{
	cursor					: pointer;
	float					: right;
	margin-top				: 20px;
	margin-right			: 10px;

}

#login_box span{
	display					: block;
}

#login_box .login_title{
	width					: 100%;
	font-size				: 16px;
	padding-top				: 40px;
	padding-bottom			: 30px;
	text-align				: center;
}

#login_box .input_icon{
	position				: absolute;
	margin-top				: 10px;
	margin-left				: 10px;
}

#login_box input{
	background-color		: #DDDDDD;
	height					: 40px;
	margin-bottom			: 5px;
	font-size				: 12px;
}

#login_box input:not([type="submit"]){
	width					: 100%;
	padding-left			: 38px;
}

#login_box input[type="submit"]{
	width					: 100%;
	margin					: 20px auto 30px auto; 
}

#login_box input[type="submit"]:hover{
	background-color		: #888888;
	color 					: #DDDDDD;
	cursor					: pointer;
}


#login_box .login_box_text_1{
	font-size				: 10px;
}

#login_box .login_box_text_2{
	float					: right;
	margin-top				: -12px;
	font-size				: 10px;
}

@media only screen and (max-width: 600px){
	#login_box{
		margin-top			: 100px;
	}
	#login_box .input_icon{
		display				: none;
	}
	#login_box input:not([type="submit"]){
		width				: 100%;
		text-align			: center;
		padding-left		: 0px;
	}
	#login_box .login_box_text_2{
		float				: left;
		margin-top			: 12px;
	}

}*/

/*-----------------------------[Logo]-----------------------------------------*/

#logo_container{
	width					: 100%;
	margin-bottom			: 8px;
}

.logo{
	max-width				: 6em;
	margin-top				: 10px;
	margin-left				: 15px;
}

.logo_name{
	cursor					: pointer;
	margin-bottom			: 20px;
	margin-left				: -3px;
	max-width				: 13em;
}

@media only screen and (max-width: 600px){
	.logo{
		max-width			: 5em;
	}
	.logo_name{
		max-width			: 10em;
	}
	
}

/*-----------------------------[Navigation]------------------------------------*/

#nav_container{
	text-align				: center;
	width					: 100%;
}

.nav_class{
	background-color		: #EEEEEE;
}

.nav{
	margin-left				: 20px;
	margin-right			: 10px;
	padding-top				: 5px;
	display					: inline;
	transition				: 0.2s ease;
	border-bottom			: solid transparent 3px;
}

.nav:hover{
	border-bottom			: solid #AAAAAA 3px;
}

#menu_icon{
	margin-top				: -3px;
	margin-bottom			: -3px;
	display					: none;
}

/*.back_btn{
	margin-top				: -3px;
	margin-bottom			: -3px;
	padding-top				: 10px;
	margin-left				: 15px;
	float					: left;
}

.back_btn img{
	width					: 20px;
	height					: 20px;
}*/

.sticky{
	position				: fixed;
	top						: 0;
	z-index					: 1;
	background-color		: rgba(230,230,230,0.8);
}

.sticky:hover{
	background-color		: #EEEEEE;
}
@media only screen and (max-width: 860px){
	.nav{
		font-size: 0.6em;
	}
}

@media only screen and (max-width: 600px){
	#nav_container{
		text-align			: right;
		z-index				: 1;
	}
	.back_btn{
		padding-top				: 3px;
	}
	.nav_class{
		position			: absolute;
		background-color	: rgba(230,230,230,0.8);
	}
	.sticky{
		position: fixed;
	}
	.sticky:hover{
		background-color	: rgba(230,230,230,0.8);
	}
	.nav{
		width				: 100%;
		margin-left			: 0px;
		margin-right		: 0px;
		margin-top			: -10px;
		display				: none;
	}
	.nav:hover{
		border-bottom		: solid transparent 5px;
	}
	#menu_icon{
		display				: inline-block;
		margin-right		: 15px; 
	}
}

/*-----------------------------[Slideshow]------------------------------------*/

.slideshow_container{
	width					: 100%;
	position				: relative;
	margin					: auto;
}

.slides{
	display					: none;
	background-color			: #f8f8f8;
	text-align				: center;
}

.slides img{
	margin-bottom				: -10px;
	max-width				: 80vh;
}

.slide_prev, .slide_next{
	cursor					: pointer;
	position				: absolute;
	top						: 50%;
	width					: auto;
	margin-top				: -22px;
	padding					: 16px;
	color					: #bbb;
	font-weight				: bold;
	font-size				: 2em;
	transition				: 0.3s ease;
}

.slide_next{
	right					: 0;
}

.slide_prev:hover, .slide_next:hover {
	background-color		: rgba(20,20,20,0.6);
}

.slide_text{
	font-family				: Arial, sans-serif;
	color					: #303030;
	font-size				: 1.8vh;
	padding					: 8px 12px;
	position				: absolute;
	bottom					: 30px;
	width					: 100%;
	text-align				: center;
  	background				: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 49%, rgba(255, 255, 255, 0) 100%);
}

.dot {
	cursor					: pointer;
	height					: 8px;
	width					: 8px;
	margin					: 0 2px;
	background-color		: #bbb;
	border-radius			: 50%;
	display					: inline-block;
	transition				: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color			: #717171;
}

.fade {
	-webkit-animation-name	: fade;
	-webkit-animation-duration: 1.5s;
	animation-name			: fade;
	animation-duration		: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .6} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .6} 
  to {opacity: 1}
}

@media only screen and (max-width: 600px){
	.slideshow_container{
		margin-top			: 52px;
	}
	.slide_text{
		font-size			: 0.8em;
		margin-bottom			: -15px;
	}
	.slide_prev, .slide_next{
		color				: white;
	}
}

/*-----------------------------[Main_content]---------------------------------*/

.main_content{
	margin-bottom			: 250px;
	text-align				: center;
}

.content_box{
	padding-top				: 30px;
	padding-bottom			: 30px;
	width					: 100%;
	text-align				: center;
	
}

.main_content:after, .content_box:after{
	content: "";
	display: table;
	clear: both;
}

.content{
	margin-top				: 30px;
	width					: 33.3333333%;
	/* float					: left; */
	display					: inline-block;
	object-fit				: cover;
}

.content img{
	width					: 70%;
	max-height				: 20vw;
	object-fit				: cover;
}

.content span{
	margin					: 5px;
	display					: block;
	font-size				: 0.75em;
	font-family				: Arial, sans-serif;
}

.view_all{
	font-size				: 1em;
	color					: #7DD8D9;
}

@media only screen and (max-width: 600px){
	.main_content{
		margin-top			: 50px;
		margin-bottom		: 400px;
	}
	.main_adjust{
		margin-top			: 0px;
		margin-bottom		: 450px;
	}
	.content{
		width				: 100%;
	}
	.content img{
		max-height			: 50vw;
	}
}
/*-----------------------------[Fullscreen]-----------------------------------*/

#fullscreen{
	display					: none;
	width					: 100%;
	height					: 100%;
	position				: fixed;
	overflow				: auto;
	z-index					: 2;
	top						: 0;
	left					: 0;
	background-color		: rgba(0,0,0,0.8);
}

#fullscreen span{
	color					: #D0D0D0;
	font-size				: 0.8em;
	padding					: 8px 12px;
	position				: absolute;
	bottom					: 5%;
	width					: 100%;
	text-align				: center;
	font-weight				: 200;
	background-color		: rgba(30,30,30,0.8);
}

.fullscreen_close{
	cursor					: pointer;
	position				: absolute;
	right					: 0;
	z-index					: 1;
	margin-top				: 2%;
	margin-right			: 2%;
}

.fullscreen_expand{
	cursor					: pointer;
	position				: absolute;
	right					: 0;
	z-index					: 1;
	margin-top				: 2%;
	margin-right			: 2%;
}

#fullscreen_image{
	position				: fixed;
	top						: 50%;
	left					: 50%;
	max-width				: 100%;
	max-height				: 100%;
	transform				: translate(-50%, -50%);
}

@media only screen and (max-width: 600px){
	#fullscreen{
		background-color		: black;
	}
}

/*-----------------------------[Gallery]--------------------------------------*/

.gallery_content_box{
	width: 100%;
	padding: 20px;
}

.gallery_main{
	cursor					: pointer;
	width					: 20%;
	min-width				: 300px;
	height					: 300px;
	display					: inline-block;
	margin-bottom			: 20px;
	margin-left				: 10px;
	text-align				: center;
}

.gallery_main img{
	margin-top				: 20px;
	margin-bottom			: 20px;
	width					: 100%;
	height					: 100%;
	object-fit				: cover;
}

.gallery_main span{
	display					: block;
	font-size				: 0.8em;
	white-space				: nowrap;
	overflow				: hidden;
	text-overflow			: ellipsis;
	padding-bottom			: 10px;
}

.gallery_content{
	width					: 100%;
	text-align				: center;
	padding-left			: 20px;
	padding-right			: 20px;
	padding-bottom			: 20px;
	/*border: 1px solid black;*/
}

.gallery_content h2{
	font-size				: 1em;
	font-weight				: 400;
	text-align				: center;
}


.gallery_thumb{
	width					: 8%;
	min-width				: 210px;
	height					: 210px;
	display					: inline-block;
	margin-bottom			: 20px;
	margin-left				: 10px;
	text-align				: center;
}

.gallery_thumb img{
	cursor					: pointer;
	margin-top				: 20px;
	margin-bottom			: 20px;
	width					: 100%;
	height					: 100%;
	object-fit				: cover;
}

.gallery_thumb span{

	display					: block;
	font-size				: 0.7em;
	white-space				: nowrap;
	overflow				: hidden;
	text-overflow			: ellipsis;
	padding-bottom			: 10px;
}

.album{
	box-shadow			: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	width						: 960px;
	height					: 720px;
}

@media only screen and (max-width: 820px){
	.gallery_thumb{
		min-width			: 200px;
		height				: 200px;
	}
}

@media only screen and (max-width: 680px){
	.gallery_thumb{
		min-width			: 180px;
		height				: 180px;
	}
}

@media only screen and (max-width: 600px){
	.gallery_content_box{
		padding: 0px;
	}
	.gallery_main{
		width					: 33%;
		margin-left				: 0px;
	}
	.gallery_content{
		margin-top: -10px;
		/*padding-left: 4%;*/
		padding: 4%;
		/*padding: 5%;*/
	}
	.gallery_thumb{
		min-width				: 170px;
		height					: 170px;
		width					: 30%;
		margin-left				: 5px;
		margin-right			: 5px;
	}
	.gallery_content h2{
		font-size				: 1.3em;
	}
}

@media only screen and (max-width: 570px){
	.gallery_thumb{
		min-width: 120px;
		height: 120px;
	}
}

@media only screen and (max-width: 480px){
	.gallery_thumb{
		min-width: 120px;
		height: 120px;
	}
}

@media only screen and (max-width: 400px){
	.gallery_main{
		width: 50%;
	}
	.gallery_thumb{
		min-width: 155px;
		height: 155px;
		/*width: 30%;*/
	}
	.gallery_thumb img{
		/*max-width: 140px;
		max-height: 140px;*/
	}
	.gallery_content h2{
		font-size				: 1.2em;
	}
}

@media only screen and (max-width: 360px){
	.gallery_thumb{
		min-width: 150px;
		height: 150px;
		width: 30%;
	}
	.gallery_content h2{
		font-size				: 1.1em;
	}
}

@media only screen and (max-width: 350px){
	.gallery_thumb{
		min-width: 130px;
		height: 130px;
		/*width: 30%;*/
	}
	.gallery_content h2{
		font-size				: 1.1em;
	}
	.gallery_main{
		/*width						: 30%;*/
		min-width: 260px;
		height: 260px;
	}
}

/*-----------------------------[Content]--------------------------------------*/

.content_split{
	width						: 50%;
	float						: left;
	margin-top					: -30px;
	text-align					: left;
	/*padding-left				: 15px;*/
}

.content_slide_container{
	max-width					: 100%;
}

.content_slide{
	text-align					: center;
	background-color			: black;
}

.content_slide_container .slide_prev{
	position					: absolute;
	left						: 0;
}



.content_dot{
	max-width					: 100%;
	text-align					: center;
}

.content_dot .dot{
	display						: inline-block;
	margin						: 0 auto;
	margin-left					: 2px;
}

.content_slide img{
	margin						: 0 auto;
	width						: 100%;
	max-height					: 100%;
	margin-bottom				: -5px;
	max-width					: 53em;
	max-height					: 24vw;
	object-fit					: contain;
}


#down_icon{
	cursor						: pointer;
	width						: 100%;
	display						: none;
	max-height					: 30px;
	margin-bottom				: 10px;
}

#down_icon img{
	position					: absolute;
	display						: inline;
	/* margin-top					: -3px; */
}

#down_icon span{
	display						: inline;
}

.content_split h2{
	/*border: 1px solid black;*/
	font-size					: 1.2em;
	font-weight					: 400;
	/*font-size					: 1em;*/
	text-align					: center;
}

.content_split span{
	margin						: 30px;
	display						: block;
	font-size					: 0.75em;
	font-family					: Arial, sans-serif;
}

.content_detail{
	padding						: 30px;
	padding-top					: 150px;
	/*text-align: left;*/
}

.gallery_container{
	padding-left: 10px;
	/*border: 1px solid black;*/
}

.content_gallery{
	margin: 5px;
	width						: 15%;
	display						: inline-block;
	min-width					: 160px;
	height						: 160px;
	/*border: 1px solid black;*/
}

.content_gallery img{
	cursor						: pointer;
	width						: 100%;
	height						: 100%;
	/*max-width					: 160px;
	max-height					: 160px;*/
	object-fit					: cover;
}

@media only screen and (max-width: 1080px){
	.content_gallery{
		min-width				: 125px;
		height					: 125px;
		width					: 30%;
	}
}

@media only screen and (max-width: 600px){
	.content_slide_container{
		max-width				: 100%;

	}
	.content_dot{
		max-width				: 100%;

	}
	.content_split{
		width					: 100%;
	}
	.content_main_content{
		margin-top				: -9px;
	}
	.content_slide img{
		max-width				: 60em;
		max-height				: 75vw;
	}
	.content_split span{
		font-size				: 0.7em;
	}
	.gallery_container{
		padding-left: 3%;
		/*border: 1px solid black;*/
	}
	.content_gallery{
		margin-bottom			: 10px;
		min-width				: 160px;
		height					: 160px;
		width					: 30%;
		padding					: 0px;
		display					: none;
	}
	.content_detail{
		padding					: 30px;
	}
	#down_icon{
		display					: block;
	}
}

@media only screen and (max-width: 480px){
	.content_gallery{
		min-width				: 135px;
		height					: 135px;
		width					: 45%;
	}
}

/*-----------------------------[About]----------------------------------------*/

.about_us{
	background					: url(../img/about.jpg);
	background-size				: 100%;
	/*height						: 500px;*/
}

.about_us_text{
	/*text-align: center;*/
	margin: 0 auto;
	padding: 60px;
	width: 50%;
	min-width: 600px;
	/*border: 1px solid black;*/
	min-height: 800px;
	background-color		: rgba(240,240,240,0.8);
}

.about_us_text h2{
	color					: #303030;
	font-size				: 1.5em;
	font-weight				: 400;
	/*font-size: 1em;*/
}

.about_us_text span{
	color					: #303030;
	font-size				: 0.9em;
	/*font-weight				: 200;*/
}

.about_us_text br{
	margin-bottom: 50px;
}

@media only screen and (max-width: 600px){
	.about_us{
		margin-top				: 52px;
	}

	.about_us_text{
		min-width: 300px;
		padding: 30px;
	}
	.about_us_text h2{
		font-size				: 1.3em;
	}
	.about_us_text span{
		font-size				: 0.8em;
	}
}

/*-----------------------------[Footer]---------------------------------------*/


#footer{
	position				: absolute;
	right					: 0;
	left					: 0;
	bottom					: 0;
	padding					: 10px;
	white-space				: nowrap;
	/*border: 1px solid black;*/
	background-color		: #EEEEEE;
}

.footer_div{
	width					: 50%;
	margin-top: 10px;
	padding-left			: 20px;
	padding-bottom			: 20px;
	float					: left;
}

.copyright{
	float					: left;
	width					: 100%;
	padding-bottom			: 20px;
}

#footer span{
	margin-top				: 10px;
	display					: block;
	font-size				: 0.8em;
	
}

#footer img{
	width					: 20%;
	margin-right			: 10px;
	max-width				: 25px;
}

@media only screen and (max-width: 600px){
	.footer_div{
		width				: 100%;
		padding-top			: 20px;
		padding-bottom		: 20px;
		padding-left		: 0px;
		text-align: center;
	}
}

/*-----------------------------[Contact]--------------------------------------*/

.contact_form label{
	width					: 100%;
	margin-bottom				: 10px;
	margin-left				: -10px;
	font-size				: 0.9em;
}

.contact_form label span{
	font-size				: 0.9em;
}

.contact_form input{
	width					: 100%;
	margin-top				: 10px;
	max-width				: 400px;
	height					: 30px;
	padding-left				: 10px;
	font-size				: 0.8em;
}

.contact_form textarea{
	width					: 100%;
	max-width				: 400px;
	height					: 150px;
	padding-left				: 10px;
	margin-top				: 10px;
	color					: #6A6A6A;
	font-family				: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size				: 0.8em;
	letter-spacing				: 1px;
	line-height				: 1.6;
	color					: #555;
}

.contact_form input[type="submit"]{
	border-radius				: 5px;
	padding					: 5px;
	font-size				: 0.8em;
	background-color			: #f8f8f8;
}

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

.swipe_test{
	border: 1px solid black;
	width: 100%;
	height: 100px;
}