/* ---------- Media specific for responsive design -----------*/



@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/************************************************************************************
smaller than 800
*************************************************************************************/

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

	#header {
		border-bottom: 0;
		min-height: 0;
	}
	#headerBox {
    		width: 30%;
	}
	#phone {
		display: none;
		}
	#small-screen-phone {
		display: block;
		}
	#small-screen-phone a:link, #small-screen-phone a:visited {
    		color: #ffffff;
	}
	#large-screen-navigation {
		display: none;
	}
	#small-screen-navigation {
		display: block;
		background-color: #162352;
		border-bottom: 1px solid #ffffff;
	}
	.redBackground {
		background-color: red !important;
	}
	#navContainer {
  		height: auto;
		padding: 0;
		}
	.navigation li {
		float: none;
		width: 100%;
		padding: 10px 0;
		line-height:1.5em;
		}

	.navigation #contactPageLink,
	.navigation #treatmentsPageLink{
  		border-left: 0;
		}


	#mainContent {
  		width: 96%;
  		float: none;
  		padding: 15px 2% 20px 2%;
	}
	#sideNav {
  		width: 96%;
  		float: none;
		overflow: hidden;
		background: none;
	}

	#sideNav a:link, #sideNav a:visited {
		padding: 0;
		background: none;
		border: 0;
		}

	#sideNav a:hover {
		background: #eeeeee;
		}

	#sideNav a:active {
		padding: 0;
		background-color: #dddddd;
		color: #eeeeee;
		border: 0;
		}

	.sideBox {
		width: 40%;
		margin-right: 5%;
		margin-left: 5%;
		float: left;
		background: none;
	}
	.sideText {
		width: 96%;
		float: none;
		margin-top: 20px;
		margin-right: 2%;
		margin-bottom: 20px;
		padding: 20px 2%;
		text-align:center;
		background: none;
		border-top: 1px solid #000000;
		}

	.largeScreen {
		display: none;
	}

	.smallScreen {
		display: block;
	}

	.responsive-footer p{
		display: block;
	}

	#contact {
		float: none;
		text-align: left;
		width: 96%;
		padding: 20px 2%;
		margin: 0 auto;
		}

	#map {
		float: none;
		width: 96%;
		margin: 0 auto;
		position: relative;
  		padding-bottom: 0%;
  		overflow: hidden;
		}



}
/************************************************************************************
smaller than 680
*************************************************************************************/

@media all and (max-width: 640px) {


	#logo {
		width: 100%;
		float: none;
		}
	#headerBox {
		width: 100%;
		float: none;
		text-align: center;
		padding: 20px 2% 0 0;
		}
	#small-screen-phone {
		float: left;
		width: 70%;
		}

	.menu-button {
		width: 20%; 
		float: right;
		}

	.sideBox {
		width: 100%;
		float: none;
	}

	.largeScreen {
		display: none;
	}

	.smallScreen {
		display: block;
	}

}

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

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}

	h1 {
		font-size: 1.6em;
	}

	.sideBox {
		width: 100%;
		float: none;
	}

	.largeScreen {
		display: none;
	}

	.smallScreen {
		display: block;
	}
	.menu {
  		width: 96%;
  		float: none;
  		padding: 0 2% 20px 0;
	}

}