/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
	
	/* pagewrap */
	.container {width: 95%;}
	.motto-area h1 {
		font-size: 2.6em;
		letter-spacing: -2px;
		line-height: normal;
		padding:10px 0;
	}
	
	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		width: 100%;
		height: auto;
		min-height: 300px;
	}

}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

.top-navigation	{float: right;margin-bottom: 2em;margin-top: 5em;}
header#main .logo {padding: 5.3em 0 0;}
	
        nav { position: fixed; float: none; margin: 0; padding: 0; top: 0; left: 0; width: 100%; z-index:9999999}
        
        nav a.mobile_handle { 
			display: block;
			padding: 10px;
			background: #EEEEEE;
			text-align: center;
			font-size: 12px;
			letter-spacing: 0;
			text-transform: uppercase;
			font-family: 'OpenSansBold';
		}
        
        nav ul { display: none; }
        nav ul li { display: block; position: relative; float: none; padding: 0; background: #ddd; border-top: 1px solid #bbb; }
		nav ul li ul li{background: #eee; border-top: 1px solid #999; }
        nav ul a, nav ul a:link, nav ul a:visited { display: block; position: relative; float: none; padding: 10px; clear: both; font-size:12px; }
            
        /* Second Level */
        
        nav ul ul { display: none; position: relative; width: 100%; top: 0; left: 0; margin: 0; padding: 0; background: none; border-bottom: 2px solid #999; }
            nav ul ul a, nav ul ul a:link, nav ul ul a:visited { color: #444; padding: 10px 10px 10px 25px; }
            
        /* Third level */
        nav ul ul ul { top: 0; left: 0; }
            nav ul ul ul a, nav ul ul ul a:link, nav ul ul ul a:visited { padding: 15px 10px 15px 45px; }
            
        nav .sub_nav { position: absolute; right: 0; top: 0; width: 10%; padding: 15px 20px; margin: 0; cursor: pointer; }
        nav .arrow_up { float: right; width: 0; height: 0; padding: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; }
        nav .arrow_down { float: right; width: 0; height: 0; padding: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #000; }
    
	
	.widget .latest-popular-post-meta {
		width: 100%;
		margin-top:20px;
	}
	.widget .latest-post li figure {
		float: none;
		margin-right: 0;
		text-align: center;
		width: 100%;
	}
	.portfolio-area a.website {
		float: left;
		font-size: 12px;
		margin-top: 0px;
		text-align: left;
		width: 100%;
	}
	
	.portfolio-area-content { width:100%;}
	.portfolio-area-project-meta { width:96%; float:left; margin-bottom:20px;}
	
	.masonry-navigation ul a:after, .masonry-navigation ul a:before,
	.masonry-navigation ul a:hover:after, .masonry-navigation ul a:hover:before,
	.masonry-navigation ul a.selected:after	 { background:none;}
	 
	.masonry-navigation ul a { padding: 0.03em 1em 0.03em 1em; border-radius:0}
	.masonry-navigation ul li {margin: 0 0.5em 0 0; }
	

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		min-height: 250px;
	}

}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}
	
	.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { width:100% !important;}
	
	ul.contact-widget li {
		margin-left: 0px;
	}
	
	.sidebar { width:95% !important;}
	
	
	
	.services-area .one_third figure { margin-right:5px;}
	
	.footer-module-middle .one_third { margin-bottom: 2.25em;}
	
	ul.contact-widget li { width:80%;}
	
	.team figure { text-align:center;}
	
	input, select, textarea { width:92% !important;}
	
	.blog-full-width .content { width:100%;}
	
	.blog-full-width figure.styled { float:none;margin:0 auto 20px auto;}
	
	.masonry-navigation ul a { margin-bottom:10px;}

}