/* -----------------------------------
	Responsive Layout Styles
-----------------------------------*/
@media only screen and (max-width: 460px) {
	a.trigger {
		font-size: 17px;
		padding: 3px 7px;
		left: 10px;
	}

	#header {
		height: 300px;
	}

	#hidden-header {
		width: 250px! important;
	}

	#identity {
		width: 300px;
		margin-top: 35%;
	}
	
	#identity img {
		width: 100%;
	}
	
	#avatar {
		width: 80px;
		margin-right: 10px;
	}

	#logo {
		width: 180px;
	}

	body[data-menu-position="open"] #top-menu.fixed a.trigger {
		position: relative;
		left: 260px;
	}

	#main-content {
		padding-top: 80px;
	}

	article.post {
		margin-bottom: 40px;
		padding-bottom: 40px;
	}

	.format-quote blockquote, 
	.format-quote blockquote p {
		font-size: 25px;
	}

	#portfolio-archives {
		width: 100%;
	}

	#portfolio-archives li {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
	}

	#portfolio-archives .thumb img {
		width: 100%;
	}
}

@media only screen and (min-width: 461px) and (max-width: 800px) {
	#hidden-header {
		width: 250px! important;
	}

	.format-quote blockquote, 
	.format-quote blockquote p {
		font-size: 30px;
	}

	#portfolio-archives {
		width: 100%;
	}

	#portfolio-archives li {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
	}

	#portfolio-archives .thumb img {
		width: 100%;
	}
}


@media only screen and (max-width: 800px) {
	.container {
		width: 90%;
	}

	.one-fourth, .one-fourth.search {
		width: 100% !important;
		margin: 0 0 30px 0 !important;
	}
    .menu-mobile {
        display: block !important;
    }

	#footer .copyright, #footer .developer {
		float: left;
		margin-bottom: 20px;
		display: block;
		text-align: left;
		width: 100%;
	}
	
	.format-quote .inner {
		padding: 30px;
	}

	#sidebar-panel {
		display: none;
	}

	#top-menu .container ul {
		display: none;
	}

	.trigger {
		display: block !important;
	}

	#panel {
		display: none !important;
	}

	#header, #top-menu, #main-content, #footer {
		position: relative;
	}

	#top-menu {
		padding: 20px 0;
	}

    .one-fourth.about img {
        width: 60px;
        height: auto;
    }

	article.portfolio-list {
		max-width: 40%;
	}
}

@media only screen and (min-width: 800px) and (max-width: 1000px) {
	#portfolio-archives li {
		width: 45%;
		max-width: 100%;
	}

	#portfolio-archives .thumb img {
		width: 100%;
	}
}