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

/* for 600px or less */
@media screen and (max-width: 600px) {

	body { background: #fff; margin: 0; padding: 0; }
	* { font-size: 13px!important; line-height: 1.5em!important; }
	a { text-decoration: underline; }
	h1 { font-size: 19px!important; }

	#mob-header { display: block; float: left; width: 100%; background:#121C26; /* Change BG color to suit clients color scheme */ }
    #mob-menu-btn { float: left; width: 35%; font-size: 15px; color: #fff; cursor: pointer; cursor: hand; padding: 10px 5% 10px 12%; text-transform: uppercase; font-weight: bold; background: url(../images/mobile/nav-menu.png) no-repeat 8% center; background-size: auto 12px;  }
    #mob-logo { background: #A60016; display: block; float: left; width: 100%; text-align: center; margin: 0; padding: 10px 0 0 0 }
    #mob-logo img { max-width: 70%; max-height: 75px; }	
	#mob-header .phone { float: right; padding: 10px 15px 8px 0; color: #fff; font-size: 15px; }
	#mob-header .phone a { color: #fff; text-decoration: none; }
    #mob-book-now .mob-book-button{display:block;color:#fff;background-color:#ffbc00;margin:10px 0 0 0;padding:10px;}
	#mob-book-now a{text-decoration:none; font-size:20px!important;-webkit-transition: all 0.2s linear;transition: all 0.2s linear;}
	#mob-book-now a:hover{background-color:#ffebb4; color:#121c26; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
    
	#container,
	#content-holder,
	#header,
	#footer
	{ float: left; width: 100%; }
	img {
    	max-width: 100%;
	}
	/* For anything that requires hiding */
	#logo,
    hr,
	#header,
	#nav,
	#slider_controls,
	.cleaner
    { display: none; }
    /* Mobile Navigation --------------- */
	#mob-nav { 
		float: left; 
		width: 100%; 
	}
    #mob-nav ul { 
        float: left; 
        width: 100%; 
        margin: 0; 
        padding: 0;
		border-top: none;
    }
    #mob-nav ul li { 
        float: left; 
        width: 100%;
        margin: 0;
		padding: 0;
		background: none;
        list-style-type: none;
    }
    #mob-nav ul li a {
        float: left;
        width: 85%;
        padding: 8px 10% 8px 5%;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        font-size: 14px;
        background:#121C26; 
        background-size: 10px auto;
        border-top: solid 1px #ccc;
		text-decoration: none!important;
    }
    #mob-nav ul li a:hover { background-color: #666; }


	/* Feature Panel --------------- */
	#contentholder {
    	width: 90%;
    	padding: 3%;
    	float: none;
    	margin: 0px auto !important;
	}

	#contentholder_two_col {
		width: 90%;
    	padding: 3%;
    	float: none;
    	margin: 0px auto !important;
	    background: none;
	}
	#content {
	    width: 100%;
	    margin: 0px auto;
	    padding-left: 0px;
	}

	#content .innerpad {
		float: left;
		width: 100% ;
	}

	#column_left, #column_right {
		width: 100%;
		display: block;
		float: left;
		clear: both;
	}


	.innerpad {
	    width: 100%;
	    padding-top: 0px !important;
	    padding-right: 0px !important;
	    padding-left: 0px !important;
	    padding-bottom: 0px !important;
	}
	#feature-panel, #feature_panel { float: left; width: 100%; background-size: 100% auto; }
	#feature-panel article, #feature_panel article { background-size: 100% auto; }
	#feature_panel #banners { float: left; width: 100%; }
	#feature_panel #banners img { width: 100%!important; height: auto!important; }
	
    /* General --------------- */

	.mob-hide { display: none; } /* can be used to hide elements only on small screen */
	.expand-menu-btns { display: none; } /* hide initially */
	#content-holder img { max-width: 100%!important; height: auto!important; } /* Adjusts width on photos within content */

	.mob-btns, .subList, #footer ul {
		/* Any list within content can be made into a nice button format by adding this class to the ul */ 
		float: left;
		width: 100%!important; 
		margin: 0 0 20px 0!important;
		padding: 0!important;
	}
	.mob-btns li, .subList li, #footer ul li { 
		float: left;
		width: 100%!important;
		list-style-type: none;
		margin: 0!important;
		padding: 0!important;
	}
	.mob-btns li a, .subList li a, .mob-btn, .map-btn, #footer ul li a { 
		float: left;
		width: 90%;
		padding: 8px 5%;
        background: url(../images/mobile/subnav-arrow.png) no-repeat 94% center #000; 
		color: #fff;
        background-size: 8px auto;
		text-decoration: none;
		border-bottom: solid 1px #666;
	}
	.mob-btns li:first-child a, .mob-btns li.first a, .subList li.first a  { border-radius: 5px 5px 0 0; }
	.mob-btns li:last-child a, .mob-btns li.last a, .subList li.last a { border-radius: 0 0 5px 5px; border-bottom: none; }
	.mob-btn, .map-btn { margin: 0 0 15px 0; border-radius: 5px; border: none; }
	.map-btn { background: url(../images/mobile/icon-map.png) no-repeat 95% center #000; background-size: 20px auto; }
	
	.mob-btns li a:hover, .subList li a:hover, .mob-btn:hover, .map-btn:hover { background-color: #666; }

	/* Sidebar --------------- */
	
	#sidebar { float: left; width: 100%; border-top: solid 1px #d4d4d4; padding: 30px 0 10px 0; }
	#sidebar h2, #sidebar #subnav h2 { 
		float: left;
		width: 90%!important;
		padding: 10px 5%!important;
		margin: 0 0 1px 0;
        background: #000!important; 
		color: #fff;
        background-size: 8px auto;
		text-decoration: none; 
		border-radius: 5px 5px 0 0;
		border-bottom: solid 4px #ccc;
		font-weight: bold;
	 }

    /* Fieldset --------------- */

	fieldset, #field_form { width: 90%;	}
	fieldset p,
	fieldset label,
	fieldset span {
		width: 100%;
		float: left;
	}
	fieldset { float: left; width: 88%; padding: 10px 6%; margin: 0; background: #efefef; border: solid 1px #d5d5d5; margin: 0 0 10px 0; }
	fieldset legend { font-weight: bold; }
	
	fieldset input[type="text"],
	fieldset input[type="email"],
	fieldset input[type="tel"],
	fieldset input.txtshort,
	fieldset input.txtshorter,
	fieldset textarea,
	fieldset .commentBox, 
	fieldset .long
	fieldset #enquiry,
	fieldset select
	{ width: 95%!important; padding: 4px; border-radius: 5px; border: solid 1px #d5d5d5; }
	
	fieldset input[type="submit"], #submit { 
		-webkit-appearance: none;
		background: #f33e51;
		padding: 5px 10px; 
		border-radius: 5px; 
		color: #fff;
		border: none;
		font-size: 1.1em;
	}
	
	 /* Footer --------------- */

	#footer { 
			height: auto;
		float: left;
		background: #333;
		padding: 20px 6% 0 6%;
		width: 88%;
		text-align: center;
	}
	#footer p,
	#footer p a, 
	#footer ul li,
	#footer ul li a { 
		color: #fff;
	}
	#footer a { 
		text-decoration: underline; 
	}
	#footer p, 
	#footer ul { 
		width: 100%!important; 
		margin: 0 0 15px 0;
		padding: 0;
		text-align: center;
	}
	#footer p { font-size: 11px!important; }
	#footer ul li { 
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.clearfix:after { 
	   content: "."; 
	   visibility: hidden; 
	   display: block; 
	   height: 0; 
	   clear: both;
	}
}