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

	/* Portfolio */
	.portfolio-wrapper {
		width: 80%;
	}

}

@media only screen and (max-width: 1000px) {
	.menu-background {
		height: 78px;
	}

}

@media only screen and (max-width: 940px) { 
	
	/* Logo */
	.name img {
		width: 41%;
		max-width: 99px;
		min-width: 98px;
	}
	.top-bar .name {
		height: 60px;
	}

	/* Menu Setting */
	.top-bar-section ul li {
		padding: 0px 4px;
		border-bottom: 1px solid #EEEEEE;
	}
	.top-bar-section ul li:first-child {
		border-top: 1px solid #EEEEEE;
	}
	.top-bar-section li a:not(.button){
		background: white;
	}
	.top-bar-section li a:not(.button):hover{
		color: #464646;
	}
	.menu-background {
		height: 78px;
	}
	.top-bar-section ul {
	background: white;
	margin-top: 8px;
	}
	.btn-1b:hover .menu-link {
	color: #464646;
	}
	.contain-to-grid {
	position: relative;
	}

	.front-text {
		margin-top: 40px;
	}

	.blog-section {
		padding-top: 0px;
	}

	/* Pop up Box Comment */
	.comment-icon {
		padding-right: 10px;
	}
	.comments .comment-box .comment, .comments .comment-box .children {
		margin-left: 0px;
	}

}


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

	/* Portfolio Width */
	.portfolio-wrapper {
		width: 70%;
	}

	/* contact us */
	.contact {
		margin-bottom: 18px;
	}

	/* services */
	.our-service {
		margin-bottom: 30px;
	}

	/* blog page */
	.blog-posts {
		margin-bottom: 50px;
	}

	/* Menu SETTING */
	.contain-to-grid {
		position: relative;
	}

	/* Pop up box */
	.reveal-modal .portfolio-title {
		margin-left: -20px;
		margin-right: -20px;
		margin-top: -20px;
	}

}

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

	/* Portfolio Pop up */
	.reveal-modal .close-reveal-modal {
		display: none;
	}
	.comments .comment-box .comment, .comments .comment-box .children {
		margin-left: 0px;
	}
}

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

	h2 {
		font-size: 50px;
	}

}

@media only screen and ( max-width: 40em ) /* 640px */
{
    #list
    {
        -webkit-column-count: 2;
        -webkit-column-gap: 0.938em; /* 15px */
        -moz-column-count: 2;
        -moz-column-gap: 0.938em; /* 15px */
        column-count: 2;
        column-gap: 0.938em; /* 15px */
    }
        .item
        {
            margin-bottom: 0.938em; /* 15px */
        }
}
@media only screen and ( max-width: 30em ) /* 320px */
{
    #list
    {
    	-webkit-column-count: auto;
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: 1;
    }
}