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

/*************************************************************
greater than 768
************************************************************/

@media screen and (min-width: 799px) {

/* Responsive line - use with span to break line */

	.rwd-break {
	    display: none;
	}
	
	.restaurant-guru-small-screen {
	    display: none;
	}
}
/*************************************************************
smaller than 801
************************************************************/

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

	#header {
		border-bottom: 0;
		min-height: 0;
	}
	#headerLargeScreen {
		display: none;
		}
	#headerMediumScreen {
		display: block;
		width: 100%;
		}
	#headerSmallScreen {
		display: none;
		}

	#large-screen-navigation {
		display: none;
	}
	#navMediumScreen {
		display: block;
		width: 70%;
		float: left;
		}
	#navMediumScreen img {
    		float: left;
    		padding: 2% 0 0 2%;
}	
.redBackground {
		background-color: red !important;
	}
	#navContainer {
  		height: auto;
		}
	.navigation li {
		float: none;
		width: 100%;
		padding: 10px 0;
		line-height:1.5em;
		}

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

	.fa-border {
    		border: solid .08em #ff0000 !important;
	}
	#mainContent {
  		width: 96%;
  		float: none;
  		padding: 15px 2% 20px 2%;
	}

	#rightMargin {
    		width: 96%;
    		float: none;
	}
	#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;
		}

	.restaurant-guru-small-screen {
	    display: block;
	}

	.restaurant-guru-margin {
	    display: none;
	}

	.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;
		width: 96%;
		padding: 20px 2%;
		margin: 0 auto;
		}

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

	#facebook {
		width: 15%;
		}

	#address {
		width: 70%;
		margin-left: 15%;
    		text-align: center;
		padding-top: 0;
		}
	#address p{
		display: block;
		}
	h2 {
	    margin-bottom: 1em;
	}
/* Responsive line - use with span to not break line */

	.rwd-nobreak {
	    display: none;
	}


}


/*************************************************************
smaller than 641
*************************************************************/

@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: 25%; 
		float: right;
		}

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

	.largeScreen {
		display: none;
	}

	.smallScreen {
		display: block;
	}
	#leftContainer {
   		width: 100%;
   		float: left;
	}
	#rightContainer {
    		width: 100%;
    		float: none;
	}
	.menuBox h2 {
    		margin: 0;
		text-align: left;
	}
}

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

	#headerMediumScreen {
		display: none;
		}
	#headerSmallScreen {
		display: block;
		width: 100%;
		}
	#bookingForm {
		width: 100%;
		}

}

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

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

	h1 {
		font-size: 2em;
	}

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

	.largeScreen {
		display: none;
	}

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