/* ~~ Charlie Waddell ~~ */
@media screen and ( max-width: 1055px) {
	#main-left div.right {
		margin-left: 0px !important;
	}
}

@media screen and ( max-width: 1050px) {
	body {
		width: 100%;
	}
	.container {
		width: 100%;
	}
	.right, .center {
		float: left;
		margin-left: 15px;
	}
	.book-here-button {
		position: relative;
		top: 0px !important;
		left: 0px !important;
	}
	p.book-online {
		display: none;
	}
	#filler {
		height: 120px;
	}
	#wold-info {
		padding-right: 80px;
	}
	#social {
		padding: 0px 45px;
	}	
	.self-catering-column img {
		width: 100%;
	}
	.book-here-button2 {
		display: block;
		background-color: rgb(7,36,52);
		float: right;
		position: relative;
		z-index: 100000;
		top: -100px;
		padding: 10px 20px;
		font-size: 150%;
		margin-bottom : -60px;
	}
	.book-online2 {
		margin-bottom: 0px !important;
	}
	#map {
		float: none;
		width: 100%;
		margin-bottom: 40px;
		text-align: right;
	}
	#map iframe {
		width: 100%;
	}
	.contact-txt {
		width: 100%;
		text-align: center;
		margin-top: 40px;
	}
	#extra-contact-info {
		width: 100%;
		text-align: center;
	}
}
@media screen and ( max-width: 1040px) {
	#main-left {
		width: 600px;	
	}
	.bed-and-breakfast-container {
		width: 600px;
	}
}

@media screen and ( max-width: 1020px) {
	.img-nav-container {
		width: 300px;
	}
	.nav-img {
		width: 100% !important;
	}
	#twitter-feed {
		width: 100% !important;
		float: none;
		margin-top: 20px;
	}

	#fb-feed {
		float: none;
		width: 100% !important;
	}

	.main-cont-txt {
		float: none;
		width: 100%;
		margin-top: 1em;
	}
	/*~~~~~~~~~~~~~~~~~~~~~~~*/
	ul li.nav {
		padding: 25px 5px 25px 5px;
	}

}

@media screen and ( max-width: 1050px) {
	.button-grid {
		margin-left: 0px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.color {
		width: 100%;
		margin-top: 5px !important;
		margin-bottom: 5px !important;
	}
}

@media screen and ( max-width: 1010px) {
	#bnb-awards {
		width: 350px;
	}
	/*p.arrange-with-us {
		font-size: 53%;
	}*/
}
@media screen and ( max-width: 990px) {
	#bnb-awards {
		width: 320px;
	}
}
@media screen and ( max-width: 986px) {
	#tel-container {
		font-size: 120%;
	}
}
@media screen and ( max-width: 960px) {
	.img-nav-container {
		width: 280px;
	}
}
@media screen and ( max-width: 960px) {
	#bnb-awards {
		width: 290px;
	}
	#wold-info {
		padding-right: 60px;
	}
	#social {
		padding: 7px 35px;
	}
}
@media screen and ( max-width: 930px) {
	#wold-info {
		padding-right: 50px;
	}
	#social {
		padding: 7px 25px;
	}
}
@media screen and ( max-width: 930px) {
	#bnb-awards {
		width: 260px;
	}
	ul li.nav {
		padding: 25px 4px 25px 4px;
	}
}
@media screen and ( max-width: 910px) {
	#horizontal-nav {
		display: none;
	}
	#tel-container {
		display: none;
	}

	/*~~ DROP DOWN MENU TO GO HERE ~~*/
	.menu-icon {
		clear: both;
	}
	#mobile-nav {
		display: block;
		text-align: center;
		float: right;
		margin: 40px 0px 0px 0px;
		margin-top: 25px;
	}
	#nav-holder {
		padding: 10px;
		border: 2px solid black;		
	}
	#nav-holder ul li a {
		color: rgb(7,36,52);
	}
	.mobile-button:focus {
		outline: 0;
	}
	.mobile-button {
		background-color: white;
		border: none;
		color: rgb(7,36,52);
		font-size: 150%;
		padding: 15px;
	}
	#nav-holder {
		position: absolute;
		right: 14px;
		top: 85px;
		color: #072434;
		font-size: 150%;
		background-color: white;
		z-index: 1000000;
	}
	/*div#mobile-nav:hover #nav-holder {
		display: block;
		position: absolute;
		right: 14px;
		top: 85px;
		color: #072434;
		font-size: 150%;
		background-color: white;
		z-index: 1000000;
	}*/
}
@media screen and ( max-width: 905px) {
	ul li.nav {
		padding: 35px 5px 45px 5px;
	}
}

@media screen and ( max-width: 900px) {
	.img-nav-container {
		width: 270px;
	}
	#main-left {
		width: 570px;	
	}
	.bed-and-breakfast-container {
		width: 570px;
	}
	#main-left div.left {
		margin: 0px;
		margin-right: 10px;
	}
	div.ts div.carousel-inner  {
		height: 300px !important;
	}
	div.ts div.item img {
		height: 300px !important;
	}
	/*.right {
		margin-top: 0px !important;
	}*/
	.righty2 {
		margin-top: 0px !important;
	}
}
@media screen and ( max-width: 890px) {
	#wold-info {
		padding-right: 50px;
	}
	#social {
		padding: 7px 15px;
	}
}

@media screen and ( max-width: 870px) {
	.img-nav-container {
		width: 260px;
	}
	#bnb-awards {
		float: none;
		clear: both;
		width: 70%;
		margin: 0px auto;
		margin-bottom: 20px;
	}
	#main-left {
		width:100%;
	}
	/*#main-left {
		text-align: center;
	}*/
	.bed-and-breakfast-container {
		width: 100%;
	}
	#wold-info {
		padding-right: 30px;
	}
}	

@media screen and ( max-width: 850px) {
	#wold-info {
		padding-right: 20px;
	}
	#social {
		padding: 7px 10px;
	}
}

@media screen and ( max-width: 840px) {
	.img-nav-container {
		width: 250px;
	}
	#wold-info {
		padding-right: 20px;
	}
	#social {
		padding: 7px 10px;
	}
	#websell-container {
		width: 280px !important;
	}
}
@media screen and ( max-width: 830px) {
	#wold-info, #social, #awards, #designed-by {
		float: none;
		clear: both;
		text-align: center;
		border: none;
		margin-left: 0px;
	}
	#social-centered {
		width: 210px;
		margin: 0px auto;
	}
	#main-left div.col-sm-6 {
		width: 100%;
		float: none;
		clear: both;
		display: block;
		padding: 0px 10px;
	}
	#designed-by {
		position: static;
		width: 100%;
	}
	#websell-container {
		text-align: center;
		clear: both;
		margin: 0px auto;
	}
	.contact-us {
		float: none;
		width: 30%;
		margin: 0px auto;
	}
	p.websell {
		margin-top: 15px !important;
	}
	footer {
		height: auto;
	}
	
}
@media screen and ( max-width: 810px) {
	.img-nav-container {
		width: 240px;
	}
	.img-nav-info {
		font-size: 140%;
	}
	div.ts div.carousel-inner  {
		height: 260px !important;
	}
	div.ts div.item img {
		height: 260px !important;
	}
}
@media screen and ( max-width: 780px) {
	.img-nav-container {
		width: 230px;
	}
	#main-left div.col-sm-6 {
		width: 100%;
		float: none;
		clear: both;
		display: block;
		padding: 0px 10px;
	}
	#designed-by {
		position: static;
		width: 100%;
	}
	#websell-container {
		text-align: center;
		clear: both;
	}
	footer {
		height: auto;
	}
	.under {
		margin-left: 0px;
	}
}
@media screen and ( max-width: 778px) {
	.color {
		width: 100%;
		margin-top: 10px !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
		margin-bottom: 10px !important;
	}
}
@media screen and ( max-width: 770px) {
	.self-catering-column {
		margin: 0px;
		padding: 0px;
		float: none;
		clear: both;
		margin: 0px auto;
		width: 70%;
		margin-bottom: 20px;
	}
	.col-text-b, .special-list, .tnt-col-4 {
		float: none;
		clear: both;
		width: 100%;
	}
	.special-list {
		margin-bottom: 20px;
	}
	.vb-button, .view-button {
		padding: 30px 0px;
	}
	.accepted {
		width: 230px;
		margin: 0px auto;
	}
	.booking-details {
		margin-bottom: 20px !important;
	}
	.tnt-col-4 {
		padding: 0px 0px;
	}
	div.ts div.carousel-inner  {
		height: 333px !important;
	}
	div.ts div.item img {
		height: 333px !important;
	}
	.white-filler {
		height: auto !important;
	}
}
@media screen and ( max-width: 750px) {
	.img-nav-container {
		width: 220px;
	}
	.book-here-button2 {
		top: -80px;
		padding: 10px 15px;
		font-size: 120%;
		margin-bottom : -60px;
	}
}
@media screen and ( max-width: 720px) {
	.img-nav-container {
		width: 210px;
	}
}
@media screen and ( max-width: 690px) {
	.img-nav-container {
		width: 200px;
	}
	div.ts div.carousel-inner  {
		height: 300px !important;
	}
	div.ts div.item img {
		height: 300px !important;
	}
}
@media screen and ( max-width: 660px) {
	.img-nav-container {
		width: 190px;
	}
}
@media screen and ( max-width: 630px) {
	.img-nav-container {
		width: 180px;
	}
	.book-here-button2 {
		top: -60px;
		padding: 5px 10px;
		font-size: 100%;
		margin-bottom : -60px;
	}
}
@media screen and ( max-width: 600px) {
	.img-nav-container {
		width: 170px;
		height: 350px;
	}
	.self-catering-column {
		width: 100%;
	}
	div.ts div.carousel-inner  {
		height: 363px !important;
	}
	div.ts div.item img {
		height: 363px !important;
	}
}
@media screen and ( max-width: 570px) {
	#bnb-awards {
		width: 100%;
	}
	.img-nav-container {
		width: 160px;
	}
	.img-nav-info {
		font-size: 110%;
	}
}
@media screen and ( max-width: 540px) {
	.img-nav-container {
		width: 150px;
	}
	.contact-us {
		width: 50%;
	}
}
@media screen and ( max-width: 510px) {
	.img-nav-container {
		width: 140px;
	}
	div.ts div.carousel-inner  {
		height: 300px !important;
	}
	div.ts div.item img {
		height: 300px !important;
	}
}
@media screen and ( max-width: 520px) {
	.img-nav-container {
		height: 370px;
	}
}
@media screen and ( max-width: 500px) {
	img.menu-icon {
		width: 50px;
	}
	#mobile-nav {
		margin-top: 25px;
	}
	#nav-holder {
		display: none;
		position: absolute;
		right: 15px;
		top: 85px;
		color: #072434;
		font-size: 150%;
		background-color: white;
		z-index: 1000000;
	}
	/*div#mobile-nav:hover #nav-holder {
		display: block;
		position: absolute;
		right: 15px;
		top: 85px;
		color: #072434;
		font-size: 150%;
		background-color: white;
		z-index: 1000000;
	}*/
	#map {
		height: 200px;
	}
	#map iframe {
		height: 200px;
	}
}
@media screen and ( max-width: 480px) {
	.img-nav-container {
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		height: auto;
	}
	.center, .right {
		margin: 0px;
	}
	.img-nav-info {
		padding: 15px 0px 5px 0px;
		font-size: 180%;
	}
	/*#logo {
		width: 100%;
	}*/
	.right-hor-navigation {
		padding-bottom: 10px;
	}
}

@media screen and ( max-width: 450px) {
	.book-here-button2 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		text-align: center;
		margin-bottom: 0px;
		font-size: 160%;
		padding: 10px 0px;
	}
}
@media screen and ( max-width: 422px) {
	#logo {
		font-size: 80%;
		width: 250px;
	}
}
@media screen and ( max-width: 420px) {
	div.ts div.carousel-inner  {
		height: 250px !important;
	}
	div.ts div.item img {
		height: 250px !important;
	}
}
@media screen and ( max-width: 371px) {
	#logo {
		font-size: 60%;
		width: 200px;
	}
	.mobile-button {
		font-size: 120%;
		padding: 10px;	
	}
	div#mobile-nav:hover #nav-holder {
		top: 69px;
	}
}
@media screen and ( max-width: 370px) {
	
	div.ts div.carousel-inner  {
		height: 200px !important;
	}
	div.ts div.item img {
		height: 200px !important;
	}
}
@media screen and ( max-width: 320px) {
	#awards img {
		width: 45px;
	}
	div.ts div.carousel-inner  {
		height: 180px !important;
	}
	div.ts div.item img {
		height: 180px !important;
	}
}
@media screen and ( max-width: 283px) {
	#logo {
		font-size: 60%;
		width: 150px;
	}
}