/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Contents
==================================================
01. RETINA STYLES
02. BASE STYLES (1165px)
03. #DESKTOP (960px)
04. #Tablet (Portrait)
05. #Mobile (Portrait)
06. #Mobile (Landscape)
07. TESTING TEXT
*/

.responsive-sidebar {display: none;}

/*
=============================================== 01. RETINA STYLES ===============================================
*/
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
	nav select {background: url(../images/select-arrow@2x.png) center right no-repeat; background-size:contain;}
	.flex-control-paging li a {background-image:url(../images/slider/bg_bullets@2x.png); background-size:20px 85px;}
	.flex-direction-nav a {background-image: url(../images/slider/arrows@2x.png); background-size:68px 69px;}
	a.twitter-widget-from { background-image: url(../images/twitter@2x.png) ;  background-size:20px 16px;}
	
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* IE7-IE8 Fixes*/
.lt-ie9 .flex-control-paging li a {background-image: url(../images/slider/bg_bullets.png); }
.lt-ie9 .flex-direction-nav a {background-image: url(../images/slider/arrows.png);}
.lt-ie9 a.twitter-widget-from { background-image: url(../images/twitter.png);  }

}




/*
=============================================== 02. BASE STYLES (1165px) ===============================================
*/
/* Note: Design for a width of 1165px */
body:after {content: "Wider than 1165px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */
html {-webkit-text-size-adjust: none;}	/* Removes webkit font resizing */ 
body {max-width:100%; width:100%; }
img {max-width:100%; height: auto; }
.width-container, #page-title-divider  {-moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; }

/*
=============================================== 03. #DESKTOP (960px) ===============================================
*/
/* Note: Design for a width of 960px */
@media only screen and (min-width: 959px) and (max-width: 1165px) {
body:after {content: "959px to 1139px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ 


.width-container, #page-title-divider  {width:940px;} /* Default Width */

.caption-progression {
	padding-bottom:120px;
	padding-left:80px;
	font-size:28px; 
}

#mc_embed_signup input#mce-EMAIL, #searchform input { width:100px;}
.commentlist {width:83%;}

}



/*
=============================================== 04. #Tablet (Portrait) ===============================================
*/
/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
body:after {content: "768 to 959px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ 

/* Default Width */
.width-container, #page-title-divider  { width: 95% }

.caption-progression {
	padding-bottom:75px;
	padding-left:60px;
	font-size:24px; 
}



/* Misc Fixes */
.sf-menu a {padding-right:9px; padding-left:9px;}  /* Top Menu Size */
.flex-direction-nav .flex-prev, .flex-direction-nav .flex-next {display:none !important;}
.commentlist {width:79%;}


}



/*
=============================================== 05. #Mobile (Portrait) ===============================================
*/
/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
body:after {content: "0 to 480px"; background-color: hsla(90,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ 


/* Default Width */
.width-container, #page-title-divider  { width: 300px; }

.caption-progression {
	padding-bottom:50px;
	padding-left:20px;
	font-size:14px; 
}


/* Default Grid */
#sidebar {padding:0%; border:none;}
#footer-widgets .footer-1-column .widget, #footer-widgets .footer-2-column .widget, #footer-widgets .footer-3-column .widget, .lt-ie8 #footer-widgets .footer-3-column .widget, #footer-widgets .footer-4-column .widget, .grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, .lt-ie8 .grid3column, .lt-ie8 .grid4column , .lt-ie8 .grid2column, #sidebar, #container-sidebar {float:none; width:100%; margin-bottom:25px;}
body ul#open-hours .grid2column, body #main ul.menu-items .grid2column {float:left; margin-right:2%; margin-bottom:0px; }
body ul#open-hours .grid2column, body #main ul.menu-items .grid2column { width: 49%;}
.lt-ie8 body ul#open-hours .grid2column, .lt-ie8 body #main ul.menu-items .grid2column {width: 48.5%;  }
footer .lastcolumn {margin:0px;} 

.menu-item-container .grid3column {float:left; margin-right:2%; width: 32%; }
.lt-ie8 .menu-item-container .grid3column { width: 31.5%; }
.menu-item-container .grid3columnbig {float:left; margin-right:2%;width:65.8%;}


/* Misc Fixes */
.flex-direction-nav .flex-prev, .flex-direction-nav .flex-next {display:none !important;}
footer #copyright ul {text-align:center;  float:none;}
footer #copyright ul li {float:none; display: inline;  }
#copyright .grid2column {text-align:center;}
.commentlist {width:95%; left:-10px;}
.commentlist .children li.comment .comment-meta {margin-left:0px;}
.commentlist .avatar, .commentlist > li:before {display:none;}

/* HEADER AREA */
header {position:static; background:none;}
body #logo {text-align:center; margin:0 auto 6px auto; float:none; position:relative;}
#homepage-slider, .paged-title {margin-top:30px;}
#page-title .paged-title {height:150px; }

/* Select Menu */
nav ul { display: none; }  
nav select option {font-size:12px; background:#fff; color:#888;}
header nav {float:none; position:relative; }
nav select { text-transform:none; display:block;  margin-left:auto; margin-right:auto; width:300px; min-width: 150px; max-width: 100%; -webkit-appearance: none; -moz-appearance: normal; appearance: normal;
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;-moz-user-select: none;
background:#FAFAFA url(../images/select-arrow.png) center right no-repeat;;

font-size:13px;
border: 1px solid #aaaaaa;
color: #555555;
padding:7px 5px 7px 10px;}

header:hover { height: 64px; transition: height 0.2s ease 0s;}
}


/*
=============================================== 06. #Mobile (Landscape) ===============================================
*/
/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
body:after { content: "480 to 767px"; background-color: hsla(150,50%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */

/* Default Width */
.width-container, #page-title-divider  { width: 420px; }

header:hover { height: 64px; transition: height 0.2s ease 0s;}
}



/*
=============================================== 07. TESTING TEXT ===============================================
*/
body:after {position:relative; z-index:55; content: "less than 320px";font-size: 300%;font-weight: bold;position: fixed;bottom: 60px;width: 100%;text-align: center;background-color: hsla(1,60%,40%,0.7);color: #fff;
display:none !important; /* -------------------- ADD OR REMOVE display:none !important; to display testing text -------------------- */}

@media screen and (max-width: 960px) {
    div.head-social-icons {
        display: none;
    }
    #menu-main-navigation {
        margin-right: 0;
    }
    
}

@media screen and (max-width: 766px) {
	body.page-template-homepage-php .content-container .grid2column.lastcolumn {
margin-top: 10px;
font-size: 16px;
width: 65% !important;
}
	body.page-template-homepage-php .content-container .grid2column {
width: 28%;
margin-top: 25px;
float: left !important;
}
.home .grid3column h3.home_title,
.grid4column h3.home_title {
    bottom: 5px;
    width: 100%;
    max-width: 100%;
    z-index: 9;
    top: 0;
    text-align: left;
    display: block;
    position: absolute;
    background: none;
}
.home .grid3column, .home .grid4column {
    text-align: justify;  color: #472f0f;  background: url(images/tile-bg-ie7.png);
    margin: 10px 0;
    display: block;
}
.home .grid3column .img_over_text,
.home .grid4column .img_over_text{
    display: block !important;
}


.home .grid3column .img_over_text span, 
.home .grid4column .img_over_text span {
display: block;
padding: 15% 8%;
font-size:18px
}

	body {
	position: absolute;
	}
	body > header:hover {
	height: 75px
	}
	.width-container, #page-title-divider {
		width: 93%;
		}
		header nav {
		float: right;
		
}	nav div.menu-main-navigation-container {
	float: right;
	margin: 20px 0
	}
	.width-container.paged-title {
margin-top: 75px;
}
	div#sidebar ul.child_pgae_menu:before, div#sidebar ul.child_pgae_menu:after {
	display: none;
	}
	div.bx-viewport {height: 235px !important}
	#homepage-slider-container {
margin-top: 73px;
}
#mc_embed_signup input.button {
float: left;
margin-left: 20px;
}
.responsive-sidebar {
	display: block;
	margin-top: 30px;
}


#main #sidebar {
	margin-bottom: 0;
}
#testimonials_widget-2 {
display: none;
}

.responsive-sidebar #testimonials_widget-2 {
display: block !important;
}
}

@media screen and (max-width: 580px) {
body.page-template-homepage-php .content-container .grid2column:first-of-type {
		display: none;
		
		}
		body.page-template-homepage-php .content-container .grid2column.lastcolumn {
margin-top: -20px;
margin-bottom: 7px;
font-size: 20px;
width: 95% !important;
display: block !important;
font-size: 15px;
}
}

@media screen and (max-width: 500px) {


	
/*		body header div.width-container > a > img {
display: none !important;
}*/

nav div.menu-main-navigation-container {
	float: none;
}
header nav {
float: none;
margin: 0 auto;
display: block;
}
#homepage-slider-container {
margin-top: 73px;
}
}