/* CSS Document Sirona */

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (max-width: 980px) {
#	.nav { font: 80% 'Roboto Condensed', Helvetica, Verdana; width: 80%; }
	.nav.right ul { text-align: right; }
	/* primary navigation */
	
	.diagramInfo { width: 23.8%; padding: 10px 15px; }
	
	.thumb { width: 99.8%; }

}

/* */

@media screen and (max-width: 490px) {
#	.nav { font: 70% 'Roboto Condensed', Helvetica, Verdana; width: 50%; }
	.nav.right ul { text-align: left; }
	/* primary navigation */
	
	.diagramInfo { width: 23.8%; padding: 10px 15px; }
	
	.thumb { width: 99.8%; }

}

@media screen and (max-width: 800px) {
	h3 { font: 96% 'Roboto Condensed', Helvetica, Verdana; }
	.diagramInfo { width: 23.8%; }
	
	.thumb { width: 99.8%; }
	
	.btnLogin {	margin-top: 8px; }
	
	#footerArea { padding: 0% 0% 1% 4%; width: 96%; }
	.footerBlocks { padding: 12px; width: 30%; }
	.midBlockadjust { padding: 0px 0px 0px 20px; margin: 0; }

}

@media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } }
@media only screen and (max-width: 767px) { .container { width: 300px; } }

/* reset cols to 3-column */
@media screen and (max-width: 740px) {
	/* grid4 */
	.grid4 .col { width: 31.2%; }
	.grid4 .col:nth-of-type(4n+1) { margin-left: 3.2%; clear: none; }
	.grid4 .col:nth-of-type(3n+1) { margin-left: 0; clear: left; }
	
	#login { text-align: center; width: 100%; margin-bottom: 15px; }
	/* login */
	
	.nav { font: 110% 'Roboto Condensed', Helvetica, Verdana; width: 99%; }
	.nav.right ul { text-align: center; }
	/* primary navigation */
	
	.campaignOne { margin-bottom: 15px; }
	.campaignTwo { margin-bottom: 15px; }
	
	.thumb { width: 99.8%; }
	
	#footerArea { padding: 0% 2% 1% 2%; width: 96%; }
	.footerBlocks { padding: 12px; width: 29%; }
	.midBlockadjust { padding: 0px 0px 0px 20px; margin: 0; }
	
}

/* reset cols to 2-column */
@media screen and (max-width: 600px) {
	/* grid4 */
	.grid4 .col { width: 48.4%; }
	.grid4 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; }
	.grid4 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }

	/* grid3 */
	.grid3 .col { width: 48.4%; }
	.grid3 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; }
	.grid3 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }
	
	/* gridTeam */
	.gridTeam .colTeam { width: 100%; }
	.gridTeam .colTeam:nth-of-type(3n+1) { margin-left: 0%; clear: none; }
	.gridTeam .colTeam:nth-of-type(2n+1) { margin-left: 0; clear: left; }
	
	/* colLeft */
	.colLeft { width: 100%; }
	/* colRight */
	.colRight { width: 100%; margin-left: 0%; }
	
	.thumb { width: 75%; }
	
	.linkButton a { font: 66% 'Roboto Condensed', Helvetica, Verdana; width: 98%; }
	.btnLogin {	margin-top: 8px; }
	
	#footerArea { padding: 0% 2% 1% 2%; width: 96%; }
	.footerBlocks { padding: 12px; width: 26%; }
	.midBlockadjust { padding: 0px 0px 0px 0px; margin: 0; }
		
}

@media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } }

/* reset cols to fullwidth */
@media screen and (max-width: 400px) {
	/* grid4 */
	.col { width: 100% !important; margin-left: 0 !important; clear: none !important; }
	
	/* colLeft */
	.colLeft { width: 100%; }
	/* colRight */
	.colRight { width: 100%; margin-left: 0%; }
	
	#pagewrap { background-image: none; padding: 0px; }
	
	#logo { text-align: center; width: 99%; padding: 15px 0px 20px; margin: 0px 2px; }
	.bg-nav { background: none; box-shadow: none; padding: 0px; margin: 0px; }
	
	.hero {	padding: 0px; margin: 10px 0px; }
	
	.thumb { width: 99.8%; }

	.linkButton a { font: 110% 'Roboto Condensed', Helvetica, Verdana; width: 99%; }
	.btnLogin {	margin-top: 8px; }
	.diagramInfo { padding: 20px 10px 20px 10px; margin: 0; width: 90%; }
	
	#footerArea { padding: 0% 2% 1% 2%; width: 96%; }
	.footerBlocks { padding: 12px; width: 91%; }
	.midBlockadjust { padding: 0px 0px 0px 0px; margin: 0; }
	
	.pat { margin: 7px 5px 7px 5px; width: 96%; text-align: center; }
	.socialLinks { text-align: center; margin: 5px 5px 5px 5px; }
	
	/* menu icon */
	#menu-icon {
		color: #000;
		font-size: 145%;
		/*width: 42px;
		width: 80%;*/
		height: 30px;
		background: #ecebeb url(../images/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 2px #b0b0b0;
		display: block; /* show menu icon */
	}
	#menu-icon:hover { background-color: #f8f8f8; }
	#menu-icon.active { background-color: #bbb;	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		font-size: 120%;
		top: 38px;
		width: 95% !important;
		z-index: 10000;
		padding: 5px;
		background: #f8f8f8;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li { clear: both; /*float: none;*/	margin: 5px 0 5px 10px;	}
	#nav a, #nav ul a {
		font: inherit;
		display: inline;
		padding: 0;
		/*background: none;
		color: #666;
		border: none;*/
	}
	#nav a:hover, 
	#nav ul a:hover { background: none; color: #000; }
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li { margin: 3px 0 3px 15px; }
	
}