/*mobile320*/
@media only screen and (min-width: 10px) and (max-width: 1000px) {
	body{width:100%; margin:0 auto; padding:0; overflow-x:hidden;}
	
	.m-no{display:none;}
	.m-yes{display:block;}
	
	/*textfield*/
	#searchfield{width:65%;}
	#loginmofields{width:14%;}
	#loginmofieldl{width:60%;}
	#logincodefield{width:12%;}
	.logincodebox{width:12%;}
	#registerfield{width:90%;}
	
	/*header*/
	.header-content{text-align:center;}
		.menu, .header-r{display:none;}
		.header-l{float:none; position:relative; margin:0 auto; padding-top:2px;}
			.header-l img{max-height:62px; width:auto;}
	.mobile-menu{display:block; width:100%; position:absolute; z-index:8; top:10px; left:0;}
	.dl-menuwrapper{font-family: "Cabin", serif !important; font-weight: 600 !important;}
	
	/*body*/
	.main{padding-top:40px;}
	
		/*home*/
		.home{width:95%; margin-top:60px;}
			.home-title{text-align:center; padding:10px 0 20px 0;}
			.grid-home li{width:100%; margin:0; margin-bottom:20px; text-align:center;}
			.spotify-m{display:none; text-align:center;}
			.spotify-style, .spotify-button-open, .spotify-button-close, .spotify-content{display:none;}
			.banner{margin-top:60px;}
		
		/*login*/
		.login{width:80%; margin:0 auto; margin-top:60px;}
		.login-detail{width:100%; margin:0 auto; margin-top:60px;}
			.login .hd-title, .login-detail .hd-title-2{text-align:center; font-family: "Open Sans", serif; font-weight: 800; font-style: italic; color:#fff;}
			.login-detail .hd-text-1, .login-detail .hd-text-2, .login-detail .hd-text-2 a, .login-detail .hd-link-1 a{color:#fff; width:90%;}
			.login-detail .hd-next{border:solid 1px #fff;}
				.login-detail a.hd-next{color:#fff;}
			.login-dom{width:100%;}
				.login-dom img{max-width:100%;}
			.login-ga, .login-fb, .login-tw, .login-mo{width:100%;}
			#login-mo, #login-mo-2, #login-mo-3, #login-mo-4{width:100%;}
		
		/*register*/
		.register{width:100%; margin:0 auto; margin-top:60px; text-align:center;}
			.register .hd-title, .register .hd-text-3, .register .hd-text-3 a{color:#fff;}
		
		/*product*/
		.product{width:100%; margin:0 auto; margin-top:60px;}
			.product-title{font-size:6vh;}
			.product-slider{width:90%; margin:0 auto;}
				.product-slider img{max-width:90%;}
			.product-filter{display:none;}
			.product-filter-mobile{position:absolute; z-index:8; top:0; left:0; right:0; margin:0 auto; display:block; padding-top:20px;}
			.product-slider img{max-width:90%;}
				/*product dom*/
				.product-dom{width:100%; min-width:100%; height:auto; overflow-x:hidden}
					.pd-title{font-size:28px; left:0; right:0; margin:0 auto}
					.pd-1, .pd-2{display:inline-block; vertical-align:top;}
						.pd-1{width:100%; text-align:center; padding-top:10px;}
							.pd-1 img{max-width:90%; width:90%; margin:0 auto;}
						.pd-2{width:100%; padding-left:0; padding-top:20px;}
					.pd-share{display:none;}
						
						
		
		/*gallery*/
		.gallery{width:95%; margin-top:60px;}
			.gallery-title-1, .gallery-title-2{left:0; text-align:center; margin-left:0px;} 
				.gallery-title-1{font-size:6vh;}
				.gallery-title-2{font-size:7.5vh;}
			.gallery-text-1{font-size:3vh; left:0; margin-left:0px; margin-top:10px; text-align:center;}
			.gallery-filter{width:100%; text-align:left; font-size:14px;}
				.gl-1{width:48%;}
					.gl-1 .f-right{padding:10px 10px 0 10px; float:none;}
					.gl-1 .f-right span{display:none;}
			.grid {width:100%;}
			/*gallery dom*/
			.gallery-dom{width:100%;}
		
		/*event*/
		.event{width:95%; margin-top:60px;}
			.event-title-1, .event-title-2, .event-title-3, .event-title-4{left:0; text-align:center; margin-left:0;} 
				.event-title-1{font-size:6vh;}
				.event-title-2{font-size:7.5vh;}
				.event-title-3{font-size:7.5vh;} 	
			.event-text-1{font-size:3vh; left:0; margin-left:0px; margin-top:10px; text-align:center; width:100%;}
			.event-detail{width: 100%;}
				.event-l, .event-r{padding-top:40px;}
					.event-l{width:100%;}
						.event-l img{max-width:98%;}
					.event-r{width:100%; padding-left:0;}
			.event-winner{width:90%;}
				.winner-name{font-size:17px;}
				.winner-address{font-size:15px;}
		
		/*FAQ*/
		.faq{width:95%; margin-top:60px;}
			.faq-title-1{font-size:6vh;}	
				.acc-head{font-size:16px; padding-right:30px; height:auto; padding-bottom:5px;}
					.acc-open, .acc-close{background-size:18px 10px; background-position: right 10px bottom 15px;}
				.acc-body{width:100%;}
			.faq-search{width:100%;}
		
		/*contact*/
		.contact-l, .contact-r{width:100%; margin-left:0;}
			.contact-r{width:95%;}
			#map{height:300px;}
		
		/*general*/
		.general{width:95%; margin-top:60px;}
			.general-title-1{font-size:6vh;}	
			.general-img-1{padding-top:40px;}
				.general-img-1 img{max-width:80%;}
			
	
	/*footer*/
	.footer{height:50px; margin-top:30px;}
		.footer-l{float:none; text-align:center; padding-top:20px;}
		.footer-l, .footer-menu, .footer-r{display:none;}
		.footer-mobile{display:block; font-family: "Cabin", serif; font-weight: 400; font-size:14px; color:#12609b; padding-top:15px; text-align:center;}
}

/*mobile320*/
@media only screen and (min-width: 20px) and (max-width: 540px) {
	.social-wall{width:100%;}
	#filters{float:none; margin:0 auto; text-align:center;}
}

/*mobile568*/
@media only screen and (min-width: 540px) and (max-width: 960px) {
	/*home*/
	.grid-home li{width:45%; margin:0 10px;}	
	.social-wall{width:100%;}
	
	/*login*/
	.login{width:60%;}
	
	/*register*/
	.register{width:60%;}
	
	/*gallery*/
	.gallery-filter{text-align:center;}
		.gl-1{width:28%;}
		.grid li{width:45%; margin:10px 10px;}
	
	/*faq*/
	.faq{width:85%;}
}

/*mobile768*/
@media only screen and (min-width: 720px) and (max-width: 1200px) {
	/*contact*/
	.contact-l{width:30%;}
	.contact-r{width:60%; margin-left:5%;}
	#map{height:300px;}	
}

/*mobile1024*/
@media only screen and (min-width: 1000px) and (max-width: 1170px) {
	/*home*/
	.grid-home li{width:30%; margin:0 10px;}
		.spotify-style{zoom: 1; -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); text-align:left; vertical-align:top; width:230px; height:280px; margin-bottom:5px;}
	.social-wall{width:74%;}
}

/*mobile1280*/
@media only screen and (min-width: 1200px) and (max-width: 1300px) {
	
}

/*mobile1400*/
@media only screen and (min-width: 1400px) and (max-width: 1940px) {
	.spotify-style{width:264px;}
	.banner img{width:100%;}
}

/*========================================================*/
/*edit 10Mar2017*/
/*mobile320*/
@media only screen and (min-width: 10px) and (max-width: 1000px) {
	.event-l{margin-top:40px; padding-top:0;}
		.event-l img{max-width:100%;}
}

/*mobile1024*/
@media only screen and (min-width: 1000px) and (max-width: 1170px) {
	/*event*/
	.event, .gallery{width:100%;}	
		.grid{width:92%; margin:0 auto;}
		.grid li{margin:0;}
		.element-item img{max-width:90%;}	
}
/*mobile1280*/
@media only screen and (min-width: 1200px) and (max-width: 1300px) {
	/*event*/
	.event, .gallery{width:90%;}	
}


/*========================================================*/
/*edit 17Mar2017*/
/*mobile320*/
@media only screen and (min-width: 10px) and (max-width: 710px) {
	.userprofile{width:100%; margin-top:60px; text-align:center;}
		.userprofile-l, .userprofile-r{width:100%; margin:0 auto; text-align:center;}
			.userprofile-l{margin-bottom:50px;}
			.userprofile-r{float:none; width:300px; display:inline-block; margin:0 auto;}	
			.userprofile-title{text-align:center; font-size:25px;}
			#userprofilefields{width: 28%; margin-right:14px;}
}

@media only screen and (min-width: 711px) and (max-width: 1024px) {
	.userprofile{width:98%; margin-top:60px;}
		.userprofile-l, .userprofile-r{width:40%; margin:0; margin-top:40px;}
		.userprofile-r{margin-left:80px;}
		#userprofilefields{width: 28%; margin-right:12px;}
	
}