Psyduck - 可達鴨 之 鴨力山大 v0.1

@media only screen and (max-width: 980px) {

	#top-bar{
		.box{
			padding: 5px 25px 8px 15px;
			margin-right: 3px;

			.box-i{
				margin-left: 5px;
			}
		}
	}

	.search-box{
		width: 100%;
	}

	.grid-item{
		width: 50%;
		padding: 7.5px;
	}

	.portfolio-page.colum-2{
		.grid-item{
			width: 50%;
		}
	}

	.portfolio-page.colum-3{
		.grid-item{
			width: 50%;
			padding: 10px;
		}
	}

	.portfolio-page.colum-4{
		.grid-item{
			width: 50%;
			padding: 7px;
		}
	}

}


@media only screen and (max-width: 800px) {

	.start-bg{
		height: 200px;
	}

	.bg-head{
		height: 450px;

		.box-test{
			width: 100%;
			padding: 0 45px;

			h1{
				font-size: 48px;
			}
		}
	}

	#top-bar{
		.box-info{
			display: none;
		}
	}

	#bar{
		padding: 5px 0;

		.menu-mobile{
			display: inline-block;
		}

		.main-menu{
			visibility: hidden;
			overflow: auto;
			position: fixed;
			top: 0;
			left: -250px;
			width: 250px;
			height: 100%;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			z-index: 999;
			
			nav{
				ul{
					li{
						display: block;

						a{
							display: block;
							width: 100%;
							padding: 20px;
						}

						ul{
							display: none;
							position: relative;
							border-bottom: 1px solid #cccccc;

							li{
								display: block;
								
								a{
									width: 250px;
									padding: 17px;
									background-color: #fff;
								}
							}
						}

						&:hover ul{
							display: block;
						}
					}
				}

				.sub{
					-moz-pointer-events: none;
					-webkit-pointer-events: none;
					pointer-events: none;
				}
			}
		}
	}

	.services{
		margin-bottom: 0;

		.col-md-4{
			margin-bottom: 50px;
		}
	}

	.process{
		padding-bottom: 0;
		
		.line{
			display: none;
		}

		.step{
			width: 50%;
			margin-bottom: 80px;
		}
	}

	.characters{
		margin: 15px;

		.box{
			margin: 35px 0;

			i{
				display: block;
				margin-bottom: 10px;
			}
		}
	}

	.citation{
		.container{
			padding: 50px 15px;
		}
	}

	.prices{
		.price{
			width: 100%;
			margin-right: 0;
			margin-bottom: 30px;
			margin-top: 25px;
			transform: skew(0);

			.price-header{
				i{
					transform: skew(0);
				}
			}

			.price-body{
				transform: skew(0);
			}

			.price-footer{
				strong{
					transform: skew(0);
				}
			}
		}
	}
	
	.footer{
		padding-top: 0;

		h4{
			margin-top: 40px;
		}

		p{
			padding-right: 0;
		}
	}

}


@media only screen and (max-width: 480px) {

	.bg-head{
		height: 400px;

		.box-test{
			padding: 0 15px;

			h1{
				font-size: 40px;
			}
		}
	}

	.title-section{
		font-size: 27px;
	}
	
	.button{
		padding: 14px 24px;
		font-size: 14px;
	}

	.search-box{
		span{
			font-size: 20px;
			margin-bottom: 20px
		}
		
		.input-box{
			input{
				width: 200px;
				height: 50px;
				font-size: 16px;
				padding: 0 15px;
			}
		}
		
		button{
			width: 60px;
			height: 54px;

			i{
				display: block;
				transform: skew(25deg);
				font-size: 20px;
			}
		}
	}

	.email-form{
		.input-email{
			input{
				width: 190px;
				font-size: 14px;
			}
		}
	}

	.process{
		.step{
			width: 100%;
		}
	}

	.portfolio{
		.filter-item{
			li{
				padding: 5px 9px;
			}
		}
	}

	.grid-item{
		width: 100%;
	}

	.portfolio-page.colum-2{
		.grid-item{
			width: 100%;
		}
	}

	.portfolio-page.colum-3{
		.grid-item{
			width: 100%;
		}
	}

	.portfolio-page.colum-4{
		.grid-item{
			width: 100%;
		}
	}
	
	.contact{
		.contact-list{
			ul{
				margin-bottom: 30px;

				li{
					i{
						font-size: 30px;
						margin-right: 15px;
					}

					span{
						font-size: 14px;
					}
				}
			}
		}
	}

	.nf{
		strong{
			font-size: 150px;
		}
	}

	.bot-bar{
		text-align: center;

		p{
			width: 100%;
			padding: 0;
		}

		.social{
			width: 100%;
			margin-top: 15px;
			padding: 0;
		}
	}

}