/*
Website Name: BerkshireElegantCountryInns.com
Description: A responsive website framework, agile and progressively enhanced
Version: 1.0
Author: Adworkshop
Author URI: http://www.adworkshop.com
*/

/* ======================================================= */
/*                        ADWORKSHOP MENU                  */
/* ======================================================= */

  /* Mobile Navigation Toggle */
  .mobileBtnWrapper {
  position: absolute;
  top: 17px;
  right: 20px;
  line-height: 0;
  }
  
  a.mainMenuToggle {
  position: relative;
  font-family: 'FontAwesome';	  
  font-size: 24px;
  line-height: 1;
  font-weight: normal;
  color: #7a7a48;
  text-decoration: none;
  }
  
  a.mainMenuToggle:hover {
  color: #535423;
  }  
  
  /* ADW Navigation */
  nav#mainMenu { 
  display: none; /* Hide Initially */
  margin: 40px 0 0 0; /* Alter to match bottom padding of header container (or whatever spacing is desired) */
  padding: 0;
  text-align: left; 
  }
  
  nav#sidebarMenu {
  display: none; /* Hide Initially */
  }
  
  ul.adwMenu {
  display: block;	 
  font-size: 0; 
  text-align: left;  
  }
  
  ul.adwMenu ul {
  padding: 0;
  }
  
  ul.adwMenu li {
  display: block;	  
  position: relative;
  }
  
  /* -- Navigation Toggles*/
  ul.adwMenu li .openChild {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  height: 100%;
  font-family: 'FontAwesome';
  font-size: 14px;
  line-height: 1;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  -webkit-transition: background-color .3s ease;
  -moz-transition: background-color .3s ease;
  -ms-transition: background-color .3s ease;
  -o-transition: background-color .3s ease;
  transition: background-color .3s ease;
  }
  
  ul.adwMenu li .openChildInner:before {
  display: block;	  
  position: relative;
  top: 16px;
  content: "\f078";
  }
  
  ul.adwMenu li .openChild:hover {
  background-color: #eee;
  }
  
  ul.adwMenu li.over > .openChild {
  background: #eee;
  }
  
  ul.adwMenu li.over > .openChild .openChildInner:before { 
  content: "\f077"; 
  color: #8b8b8b;
  }
  
  /* -- 2nd Tier and Lower Overrides */
  ul.adwMenu li ul li .openChild {
  color: #aaa;
  }
  
  ul.adwMenu li ul li .openChildInner:before {
  top: 13px; 
  color: #555;
  }
  
  ul.adwMenu li ul li .openChild:hover {
  background: #aaa;
  }
  
  ul.adwMenu li ul li.over > .openChild {
  background: #aaa;
  }
  
  ul.adwMenu li ul li .openChild:hover .openChildInner:before {
  color: #fff;
  }
  
  ul.adwMenu li ul li.over > .openChild .openChildInner:before {
  color: #fff; 
  }
  
  /* -- Navigation Styles*/
  ul.adwMenu li > a {
  display: block;
  padding: 15px 45px 15px 0;
  text-rendering: auto;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: #7e7e7e;
  text-decoration: none;
  border-top: 1px solid #ddd;
  -webkit-transition: all .3s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  }
  
  ul.adwMenu li > a:hover {
  text-decoration: none;
  color: #333;
  }
  
  ul.adwMenu > li > ul {
  border-top: 0 !important;
  }
  
  ul.adwMenu > li ul {
  display: none;
  }
  
  ul.adwMenu > li > ul li {
  display: block; 
  position: relative;
  }
  
  ul.adwMenu > li > ul li a:before {	  
  content: "\203A"; 
  padding: 0 5px 0 0; 
  font-size: 18px;
  color: #999; 
  }
  
  ul.adwMenu > li > ul > li a {
  display: block;	  
  padding: 10px 45px 10px 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #808080;
  border-top: 1px solid #ddd;
  background: #eee;
  }
  
  ul.adwMenu > li > ul > li a:hover {
  color: #fff; 
  background: #ccc;
  }
  
  ul.adwMenu > li > ul > li li a {
  border-top: 1px solid #bbb;
  }
  
  ul.adwMenu > li > ul > li li li a {
  padding-left: 20px;
  }
  
  ul.adwMenu > li > ul > li > ul > li a {
  background: #aaa; 
  color: #fff;
  }
  
  ul.adwMenu > li > ul > li > ul > li a:hover {
  color: #fff;
  background: #999; 
  }
  
  ul.adwMenu > li > ul > li > ul > li a:before {
  color: #fff;
  }

/* ======================================================= */
/*                        MEDIA QUERIES                    */
/* ======================================================= */
  
  @media all and (min-width: 320px) {
  
  }
  
  @media all and (min-width: 480px) {
  
  }  
  
  @media all and (min-width: 600px) {
	  
	/**************************************
	*
	* ADWORKSHOP MENU
	*
	**************************************/	
	/* Mobile Navigation Toggle */
	.mobileBtnWrapper {
	top: 20px;
	right: 30px;
	}
	  
  }
  
  @media all and (min-width: 768px) {	
	  
  }
  
  @media all and (min-width: 960px) {
	
	/**************************************
	*
	* ADWORKSHOP MENU
	*
	**************************************/	
	/* Mobile Navigation Toggle */
	.mobileBtnWrapper {
	top: 25px;
	right: 40px;
	}  
	
  }
  
  @media all and (min-width: 1024px) {
  
  }
  
  @media only screen and (min-width: 1100px) {
	  
    /**************************************
	*
	* ADWORKSHOP MENU
	* Our mobile to desktop navigation flip is being done at 1100px, but this can be altered to whatever breakpoint best matches the site's design, header elements, length of main navigation items, etc.
	*
	**************************************/	
	/* Mobile Navigation Toggle */
	.mobileBtnWrapper {
	display: none;
	}	
	/* ADW Navigation */
	nav#mainMenu { 
	display: block !important; /* Show even if expanded and then hidden by .mainMenuToggle */
	position: absolute; 
	right: 40px; 
	bottom: 0;
	margin: 0;
	overflow: visible !important; /* Show overflow even if expanded and then hidden by .mainMenuToggle */
	}
	nav#sidebarMenu {
	display: block;
	}
	/* -- Navigation Styles*/
	nav#mainMenu ul.adwMenu {
	text-align: right;
	}
	nav#mainMenu ul.adwMenu li {
	display: inline-block;
	}
	nav#mainMenu ul.adwMenu li > a {
	margin: 0;	
	border-top: none;
	}
	nav#mainMenu ul.adwMenu > li ul {
	position: absolute;
	text-align: left;
	border-right: 2px solid #e4e4e4;
	border-left: 2px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	background: #fff;
	}
	nav#mainMenu ul.adwMenu > li > ul > li a {
	width: auto;
	margin: 0;
	white-space: nowrap;
	color: #777;
	border-bottom: 1px solid #e4e4e4;
	border-top: none;
	background: #fff;
	}
	nav#mainMenu ul.adwMenu > li > ul > li a:hover {
	background: #f3f3f3; 
	color: #333;
	}
	nav#mainMenu ul.adwMenu li .openChild:active {
	background-color: #fff;
	}
	nav#mainMenu ul.adwMenu li.tierMenu > a {
	margin: 0 5px 0 20px;
	}
	nav#mainMenu ul.adwMenu li.tierMenu.empty > a {
	margin: 0 -20px 0 20px;
	}
	nav#mainMenu ul.adwMenu li > a:hover {
	background-color: none;
	}
	/* -- Navigation: If Tier 3 exposed on Desktop*/
	nav#mainMenu ul.adwMenu > li ul li ul {
	position: relative; 
	text-align: left;
	border: none; 
	background: #f3f3f3; 
	}
	nav#mainMenu ul.adwMenu > li.tierMenu> ul > li a {
	padding: 10px 20px 10px 15px;
	}
	nav#mainMenu ul.adwMenu > li.tierMenu.withSubs > ul.subMenu > li a {
	padding: 10px 55px 10px 15px;
	}	
	nav#mainMenu ul.adwMenu > li > ul > li > ul > li a {
	background: #f3f3f3;	
	}
	nav#mainMenu ul.adwMenu > li > ul > li > ul > li a:hover {
	color: #fff;	
	background: #ccc;	
	}
	nav#mainMenu ul.adwMenu > li > ul > li > ul > li a:before {
	color: #999;
	}
	/* -- Navigation: Last Element Flip*/
	nav#mainMenu ul.adwMenu > li.tierMenu.last ul {
	right: 0;
	}
  
  }
  
  @media only screen and (min-width: 1200px) {
	
	/**************************************
	*
	* ADWORKSHOP MENU
	*
	**************************************/	
	/* ADW Navigation */
	nav#mainMenu {
	right: 0;
	}
	  
  }
  
  @media all and (min-width: 1400px) {
	  
  }
  
  @media all and (min-width: 1600px) {

  }
  
  @media all and (min-width: 1800px) {	 

  }