/**********************************************
 * Mobile style sheet for tcatullo.com        *
 *                                            *
 * @author Tom Catullo (tcatullo25@gmail.com) *
 **********************************************/

@media (max-width: 800px) {

	header .content,
	#main .content,
	footer .content {
		width: 100%;
		text-align: center;
	}

	#topbar {
		padding-top: 35px;
	}

	#topbar .title.left,
	#topbar .info.right {
		float: none;
	}

	#topbar .info {
		line-height: 2;
		margin-top: 10px;
		font-size: 1em;
	}

	#focusbar {
		padding-top: 40px;
		padding-bottom: 45px;
		padding-left: 10px;
		padding-right: 10px;

	}

	#focusbar img {
		float: none;
		margin: 0;
		margin-bottom: 20px;
	}

	#main {
		margin-top: 45px;
	}

	#main h1 {
		padding-bottom: 40px;
	}

	#main section .section_icon {
		display: none;
	}

	#projects_list {
		margin-left: auto;
		margin-right: auto;
	}

	#projects_list a:nth-child(odd) .project_box {
		margin-right: 15px;
		float: left;
	}

	#projects_list a:nth-child(even) .project_box {
		margin-left: 15px;
		margin-right: 0;
		float: right;
	}

	#projects_list .project_box p,
	#projects_list .project_box h3 {
		text-align: left;
	}

	footer {
		padding: 20px;
		line-height: 2;
		font-size: 1.1em;
	}

	#back_to_top {
		margin-top: 10px;
		font-size: 3.6em;
		opacity: 0.7;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	#back_to_top:hover {
		opacity: 0.8;
		color: #4d4d4d;
		transition: all 0.2s ease;
		transform: translateY(0);
	}

}

@media (max-width: 800px) and (min-width: 720px) {

	#projects_list a:nth-child(odd) .project_box {
		margin-left: 30px;
	}

	#projects_list a:nth-child(even) .project_box {
		margin-right: 30px;
	}

}

@media (max-width: 720px) {

	#projects_list {
		width: 304px;
	}

	footer .left,
	footer .right {
		float: none;
	}

	#focusbar .second {
		padding-top: 2.2em;
	}

}