@viewport{
	width=device-width;
}

/* ------ container fix: to make sure the header, logo, and arrow are aligned */

/* 4 cols */
.wrapper {
}
nav {
	width: 170px;
}
#container {
	width: 990px;
}
.headercontainer{
	width: 990px;
	z-index: 999;
}
#grid {
	/* height: 750px; */
}
/* 3 cols */ 
@media (max-width: 1200px) { 
	.wrapper {
		width: 930px;
	}
	#container{
		width: 740px;		
	}
	.headercontainer{
		width: 740px;
		z-index: 999;
	}
	#grid {
		/* height: 1003px; */
		
	}
}
/* 2 cols */
@media (max-width:810px) { 
	.wrapper {
		width: 95%;
		
	}
	#container{
		width: 100%;
		margin-left: 0px;
	}
	.headercontainer{
		width: 95%;
		z-index: 999;
	}
	#grid {
		width: 500px;
		margin: 0 auto;
	}
}
/* 1 cols */
@media (max-width:480px) { 
	.wrapper {
		width: 95%;
	}
	#container{
		width: 100%;
		margin-left: 0px;
		
	}
	#grid {
		/* height: 2950px; */
		width: 260px;
		margin: 0 auto;
	}
	.headercontainer{
		width: 95%;
		z-index: 999;
	}
}

/* top bar merges */
@media screen and (max-width: 950px) { 
	#top_bar_right{
		display: inline;
		float: none !important;
	}
	#top_bar_left{
		display: inline;
		float: none;
	}
	.hiddenseparator {
		display: inline;
	}
}
/* ------ navigation etc */

@media screen and (max-width: 810px) { 
	.cols4 .col{
		width: 240px !important;
		height: 240px;
	}
	
	nav{
		display: none !important;
	}
	
	.top_bar {
		display: inline;
		float: none;
	}

	#logo{
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 30px;		
	}
	
	.over{
		left: 7em !important;
	}
	
	.dropdown_menu{
		display: block;
		text-transform: uppercase;
		margin: auto;
		clear: both;
		margin: 50px 0;
		background-color: #CCC;
	}
	#content.projectgrid {
		margin-top: 150px;
	}
		
	.dropdown_menu ul{
		padding-left: 0;
		margin: 0;
	}
	
	.dropdown_menu ul li a.selected:before{
		content: ".";
		font-size: 15px;
	}
	.dropdown_menu ul li a.selected:after{
		content: ".";
		font-size: 15px;
	}

	.dropdown_menu li{
		color: rgb(128,128,128);
		list-style-type: none;
		padding-left: 10px;
		margin-top: 2px;
	}
	.dropdown_menu p{
		margin: 0;
		color: #000;
	}
	.dropdown_menu a{
		text-decoration: none;
		color: #000000;
	}
	.dropdown_menu a:hover{
		color: #000000;
	}
	.dropdown_menu a:active{
		text-decoration: underline !important;
		color: #000000;
	}
	.dropdown_menu li a{
		color: rgb(128,128,128);
	}
	.into_menu{
		padding-top: 5%;
	}
	.one_menu{
		padding-left: 0%;
	}
	.one_menu a{
		color: #000 !important;
	}
	#menu {
		display: block;
		width: 370px;
		margin: 0 auto;
		padding-left: 55px;
	}
	#menu ul {
	list-style: none;
	}
	
	#menu li {
		float:left;
		list-style:none;
		cursor: pointer;
		display:block;
		border-right:0px solid #333;
		padding: 0 30px 0 0;
	}
	#menu li:hover {
		color: #000000;
	}
	#menu a, #menu a:visited {
		margin: 0px;
		padding: 0%;
		width: 100%;
		color: black;
		display:block;
	}
	#menu a:hover {
		text-decoration:none;
		display:block;
	}
	
	#menu li li {
		float: left;
		margin: 0 0 0 10px;
		padding: 0;
		width: auto;
		text-transform:none;
		width: 135px;
	}
	#menu li li a, #menu li li a:link, #menu li li a:visited {
		background: #fff;
		width: 133px;
		float: none;
		margin: 0px;
		border: 0px;
		text-transform: uppercase;
		border:1px solid #FFF;
		padding: 1px 3px;
		margin-left: -3px;
		font-size: 11px;
		line-height: 13px;
	}
	#menu li li a:hover, #menu li li a:active {
		color:#000;
		border:dotted 1px rgb(128,128,128);
	}
	#menu li ul {
		position: absolute;
		width: 150px;
		left: -999em;
	}
	#menu li:hover ul {
	left: auto;
	display: block;
	}
	#menu li:hover ul, #menu li.sfhover ul {
	left: auto;
	}
	a{
		text-decoration:none;
	}
	
	#top_bar{
		margin-left: 0px;
	}

	#container{
		margin-left: 0px;
	}

}

@media screen and (max-width: 360px){
	.dropdown_menu ul{
		padding-left: 0 !important;
		margin: 0;
	}
}

..fluid-width-video-wrapper iframe, 
.fluid-width-video-wrapper object, 
.fluid-width-video-wrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}