/* ////////////////////////////////// HEADER STYLE SHEEET ///////////////////////////////////// */ 

/* Fix Nav Bar to top for mobiles */

.fix-nav { z-index: 9999; position: fixed; left: 0; top: 0; }

/* Mobile Side Bar and Navigation styling */

#mobile-nav { position: fixed; z-index: 7000; top: 0; width: 100%; height: 100%; background: #EEE; overflow-y: auto; display: none; 
  -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow:    3px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow:         3px 0px 5px 0px rgba(0, 0, 0, 0.75);
  font-family: 'Roaleway', 'helvetica neue', helvetica, arial, sans-serif;
}

#mobile-nav a.close-mobile-nav { position: absolute; right: 0px; top: 0px; padding: 18px; background: url(../img/icons/icon-close.svg) no-repeat center; background-size: 100%; margin: 8px; text-decoration: none; font-weight: normal; }

#mobile-nav ul { clear: both; margin: 50px 0 0 0; padding: 0;}
#mobile-nav ul li { margin: 0; padding: 0; }
#mobile-nav ul li a { 
	font-size: 14px; display: block; 
	border-bottom: 1px solid #CCC;
	color: #666; padding: 15px; text-align: center;
	text-decoration: none; font-weight: 200; letter-spacing: 0.2em; cursor: pointer;
}
#mobile-nav ul li:last-child a { border-bottom: 1px solid #CCC; }
#mobile-nav ul ul { display: none; background: #CCC; }

#mobile-nav a.book { position: relative; margin: 10px; bottom: 0; display: block; padding: 10px 0; border-radius: 0; }
#mobile-nav a.hide { display: none; }

#mobile-nav ul li.dropdown a:after { content: "+"; }
#mobile-nav ul li.dropdown ul li a:after { content: ""; }

#mobile-nav .social-icons { display: block; position: absolute; bottom: 0; width: 100%; overflow: hidden; }
#mobile-nav .social-icons-inner { display: block; padding: 15px; overflow: hidden; }
#mobile-nav .social-icons i.fa { float:right; background-color: rgba(0,0,0,0.2); color:#FFF; font-size: 18px; border-radius:50%; width: 35px; height: 18px; padding: 8px 0; text-align:center; }
#mobile-nav .social-icons i.fa:hover { background-color: rgba(0,0,0,0.6); }

#site-switch-mobile { display: table; table-layout: fixed; width: 100%; position: absolute; bottom: 0; }
#site-switch-mobile a { display: table-cell; padding: 12px; background: #212121; color: #FFF; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: 200; font-size: 14px; letter-spacing: 0.02em; }
#site-switch-mobile a.site-active { background: #0083A0; }


/* ///////////////////////////////////// HEADER ///////////////////////////////////// */

#top-bar { display: none; }

#head { position: absolute; margin-top: 20px; background: rgba(255,255,255,1); padding: 0; margin: 0; height: 51px; z-index: 8000; width: 100%; -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15); }

#head { -webkit-transition: all 0.6s ; transition: all 0.6s; }

#head.fix-nav { position: fixed; background: rgba(255,255,255,1); }

#header { height: 100%; }

#menu { display: none; list-style-type: none; }
.subMenu { display: none; }

#head .container { margin: 0; padding: 0;}

a.logo { 
	display: none; margin: 0 auto; padding: 0 20px; display: block; 
	width: 100px; height: 40px; margin-top: 5px; 
	background: url(../img/logo-yachtsmans-rest-grey.png) no-repeat center; background-size: 80%; 
}

/* Mobile Menu Switch */

#switch { float: left; margin: -10px 0 0 0; top: 0px; width: 20px; color: #CCC; text-align: center; font-size: 35px; cursor: pointer; padding: 8px 15px; }
#switch:hover, #switch:focus { color: #0083A0; }

.gradient { 
	width: 100%; height: 100px; position: absolute; z-index: 1000; top: 0; left: 0; display: block; 
	background: -webkit-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); 
}	

/* /////////////////////////////////// Nav Icon ////////////////////////////////// */

.nav-icon {
	top: 10px; right: 15px;
  	width: 30px; height: 20px;
  	position: absolute; margin: 0; z-index: 9999;
  	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
  	-webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;
  	cursor: pointer;
}

.nav-icon span {
	display: block; position: absolute;
  	height: 2px; width: 100%;
  	background: #666;
  	border-radius: 0px; opacity: 1; left: 0;
  	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg);
  	transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;
}

.nav-icon span:nth-child(1) { top: 0px; }
.nav-icon span:nth-child(2), .nav-icon span:nth-child(3) { top: 10px; }
.nav-icon span:nth-child(4) { top: 20px; }

.nav-icon.cross span:nth-child(1) { top: 10px; width: 0%; left: 50%; }
.nav-icon.cross span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.nav-icon.cross span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.nav-icon.cross span:nth-child(4) { top: 12px; width: 0%; left: 50%; }





/* ///////////////////////////////////// FOOTER ///////////////////////////////////// */

#footer { background: none; background-size: cover; color: #FFF; }

.footer-wrap { overflow: hidden; display: block; background: url(../img/bkg/amps3.jpg) no-repeat center; background-size: cover; }

#footer .container { padding: 20px; }
#footer .col { display: block; overflow: hidden; }

#footer h4 { color: #FFF; font-weight: 400; margin: 10px 0 20px 0; display: block; text-transform: uppercase; }

#footer h4.instagram { background: url(../img/icons/icon-instagram.png) no-repeat left center; }
#footer h4.twitter { background: url(../img/icons/icon-twitter.png) no-repeat left center; }
#footer h4.navigate { background: url(../img/icons/icon-navigate.png) no-repeat left center; }

#footer h4.icon { padding: 15px 0 15px 50px; background-size: 35px; }

#footer p { line-height: 20px; font-size: 14px; color: #999; margin-bottom: 15px; }
#footer p span { color: #FFF; font-weight: bold; margin-right: 15px; }
#footer ul { overflow: hidden; margin: 0; padding: 0; }
#footer ul li { overflow: hidden; margin: 0px 10px 10px 0; float: left; display: inline-block; padding: 0; line-height: 40px;  }
#footer ul li a {text-decoration: none; color: #FFF; font-size: 14px; padding: 10px; text-transform: uppercase; }

#footer ul li a { background-color: rgba(255,255,255,0.1); font-weight: 400; }
#footer ul li a:hover { color: #FFF; background-color: rgba(255,255,255,0.2); text-decoration: none; }

#footer .caa-logo { float: right; margin-left: 20px; }

#footer a { color: #FFF; }
#footer a.button { display: inline-block; margin: 15px 0 0 0; }
#footer a:hover { color: #6D8B91; text-decoration: underline; }

#footer form span { color: #CCC; }
#footer input, #footer select { width: 97%; padding: 7px; border-radius: 4px; background: #FFF; color: #666; -webkit-border-radius: 4px; margin: 10px 0; }
#footer label { font-size: 12px; display: block; color: #CCC; margin: 0; }
#footer input.submit { width: 95%; text-align: center; background: #6D8B91; border: none; color: #FFF; font-size: 12px; }
#footer button.book { width: 100%; padding: 5px; margin-top: 10px; cursor: pointer; }

#footer .wrecks { display: none; width: 500px; height: 250px; background: url(../img/footer/profile.png) no-repeat; background-size: 100%; position: absolute; bottom: -20px; right: 0; z-index: 1; }

/* Bottom BAR */

#bottom { clear: both; margin: 0; bottom: 0; padding: 30px 0 20px 0; background: #666; }

#bottom .container {  }

#bottom a, #bottom p { color: #CCC; font-size: 14px; padding-top: 10px; }

#bottom .copyright { float: left; text-align: left; margin-top: 15px; }

#bottom a.admin-login { width: 120px; float: right; text-align: center; color: #FFF; background: rgba(217,217,217,0.2); margin: 0px; text-decoration: none; padding: 5px 0px; border-radius: 4px; -webkit-border-radius: 4px; }

#bottom a.social { margin: 0px 0px 0px 10px !important; float: right; width: 40px; height: 40px; padding: 0; display: block; text-decoration: none; background-color: #999; border-radius: 50%; -webkit-border-radius: 50%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; display: block; }
#bottom a.social:hover { background-color: #999; }
#bottom a.social.fb { background-color: #336699; }
#bottom a.social.twitter { background-color: #0099CC; }
#bottom a.social.vimeo { background-color: #0099CC; }
#bottom a.social.instagram { background-color: #a28a6d; }
#bottom a.social img { width: 100%; }

/* Social Icons - font awesome */

.widget-social-icons { clear: both; display: block; overflow: hidden; }
.widget-social-icons.right { float: right; }

.widget-social-icons p { margin: 0; padding: 0 !important; }


.widget-social-icons a { display:inline-table; background:none; margin: 0 5px 0 0; padding: 0; float: left; }

.widget-social-icons i.fa { float:right; background-color: rgba(255, 255, 255, 0.2); color:#FFF; font-size: 15px; border-radius:50%; width: 30px; height: 15px; padding: 7.5px 0; text-align:center; }
.widget-social-icons i.fa:hover { background-color: rgba(255, 255, 255, 0.4); }

.widget-social-icons.dark i.fa { float:right; background-color: rgba(0,0,0, 0.5); color:#FFF; font-size: 15px; border-radius:50%; width: 30px; height: 15px; padding: 7.5px 0; text-align:center; }
.widget-social-icons.dark i.fa:hover { background-color: rgba(0,0,0,0.4); }


.widget-social-icons.right i.fa { float: right !important; }
.widget-social-icons.big i.fa { font-size: 20px !important; line-height: 30px; width: 50px !important; height: 30px !important; padding: 10px 0 !important; margin-left: 10px; }

#bottom .widget-social-icons { display: inline-block; float: left; }
#bottom .widget-social-icons a { float: left; display: inline-block; }


/* Back to Top Link */

#top-link { display: block; position: fixed; z-index: 500; width: 40px; height: 40px; right: 0px; bottom: 20px; background-color: rgba(0,0,0,0.5); cursor: pointer; }
#top-link:hover { background-color: #999; background-color: rgba(0,0,0,0.8); }
#top-link span { display: block; width: 40px; height: 40px; background: url(../img/icons/icon-arrow2.svg) no-repeat center; background-size: 20px; }




/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////// START OF RESPONSIVE STYLES /////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */






@media screen and (orientation: landscape) and (max-width: 768px) {

	#mobile-nav { width: 50%; }

}

@media screen and (orientation: portrait) {

}



/* ////////////////////////////////  bigger than mobile version //////////////////////////////// */

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


	
}

/* //////////////////////////////// ipad mini or galaxy note version //////////////////////////////// */  

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



}

/* //////////////////////////////// big ipad version //////////////////////////////// */

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

	/* Header */

	.nav-icon { display: none; }

	#wrapMenu { display: block; }

	#head { margin-top: 0px; position: absolute; padding: 0; margin: 0; height: 55px; z-index: 6000; width: 100%; background: rgba(255,255,255,1); }
	#head .container { margin: auto; padding: 0 20px; width: auto; }

	a.logo  { 
		display: block; position: absolute; z-index: 3000; top: 0px; margin: 0; padding: 0; 
		width: 150px; height: 55px; 
		background: url(../img/logo-yachtsmans-rest-grey.png) no-repeat left center; background-size: 100%; 
		-webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; 
	}

	/* Top Bar */

	#top-bar { display: none; background: #CCC; height: 40px; padding-top: 0px; }
	#top-bar a { float: left; margin-left: 10px; text-decoration: none; color: #666; }
  	#top-bar a:hover { color: #666; }

	#top-bar p { color: #666; font-size: 14px; line-height: 40px; margin: 0 20px 0 0; padding: 0; float: right; font-weight: 400;}
  	#top-bar p span { font-weight: bold; }

 	#top-bar a.website-switch { background-color: #c1c1c1; color: #666 !important; top: -10px; height: 40px; line-height: 40px; margin: 0; font-size: 14px; padding: 0 20px; float: right; z-index: 4000; left: 135px;  text-transform: uppercase; font-family: 'Titillium Web', helvetica, arial, serif; font-weight: 400; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }
 	#top-bar a.website-switch:hover { background-color: #999; color: #FFF !important; }
 	#top-bar a.website-switch.site-active { background-color: #EEE; } 

	#switch { display: none; }

	/*  Menu */

	#menu { display: block; pointer-events: auto; position: static; margin: 0; float: right; list-style-type: none;  }
	#menu ul { float: right; display: block; text-align: right; margin: 0; height: 100%; padding: 0; }
	#menu ul li { float: left; margin: 0; height: 100%; line-height: 0px; list-style-type: none; padding: 0; }
	#menu ul li a { 
		display: block; position: relative; margin: 0; padding: 22px 12px; 
		text-decoration: none; text-transform: uppercase; font-size: 10px; line-height: 12px; color: #666; font-weight: 400; 
		-webkit-transition: all 0.3s ; transition: all 0.3s; 
	}	


	#menu ul li a.mPS2id-highlight { background: #EEE !important; color: #333 !important; }

	#menu ul li a:hover { color: #FFF; background: #f6f6f6 !important; }

	#menu li.active a { border-top: 3px solid #666; color: #666; }
	#menu li.active a:hover { background: none !important; }

	#menu a:hover, #menu li:hover a, #menu li.hover a { color: #333; } 	
	#menu li:hover, #menu li.hover { position: relative; z-index: 15; cursor: default; }

	#menu ul li.dropdown { font-weight: 400; }
	#menu ul li.dropdown a:hover { /* background: #FFF !important; */ }
	#menu ul li.dropdown a:after { content: "+"; padding-left: 5px; }
	#menu ul li.dropdown ul li a:after { content: ""; padding-left: 0px; }
	#menu ul li.dropdown:hover > a { border-bottom: 0; color: #FFF; background: rgba(255,255,255,0.3); }


	#menu ul ul { display: none; height: 0; visibility: hidden; position: absolute; padding: 0; top: 100%; left: 0; margin-top: -5px; padding-top: 5px; z-index: 5000; text-align: left; height: auto; overflow: hidden; }
	#menu ul ul li { float: none; display: block; width: 100%; border: none; padding: 0; border-bottom: 1px solid #EEE; min-width: 200px; }
	#menu ul ul li:last-child { border-bottom: none; }

	#menu ul ul li a { 
		position: static; display: block; height: auto; 
		background: #FFF !important; border: 0 !important; 
		border-radius: 0px; -webkit-border-radius: 0px; 
		font-size: 14px; line-height: 14px; padding: 10px; 
		margin: 0; color: #666 !important; 
		font-weight: 400;
	}
	#menu ul li.dropdown li a:hover { background: #FFF !important; }

  	#menu ul ul li:first-child a {  }
  	#menu ul ul li:last-child a {  }
	#menu ul ul li a:hover { border: 0 !important; color: #666 !important; background: #FFF !important; }
	#menu li:hover > ul, #menu li.hover > ul { visibility: visible; display: block; }

  	#menu ul li.active:hover a { color: #FFF; }
  	#menu ul li.active ul li a {  }
  	#menu ul li.active ul li:last-child a { }
	
  	/* Social icons in Nav */
	
  	#menu a.social { width: 20px; height: 20px; padding: 0; background-color: #333; border-radius: 50%; -webkit-border-radius: 50%; }
  	#menu a.social img { width: 100%; }
  	#menu a.social:hover { background-color: #999; }
  	#menu a.social.fb { background-color: #336699; }
  	#menu a.social.twitter { background-color: #0099CC; }
  	#menu a.social.vimeo { background-color: #0099CC; }
  	#menu a.social.instagram { background-color: #a28a6d; }
	
	/* Footer */

	#footer .footer-wrap { }
	#footer .col {  }
	#footer ul li { line-height: 22px; display: block; float: none; }
	#footer ul li a {text-decoration: none; display: block; background-size: 30px; font-size: 12px; line-height: 14px; }
	#footer .profile { display: block; width: 350px; height: 250px; bottom: -53px; right: 0; }
	#footer a.social { width: 40px; height: 40px; }	

	/* Social Media Icons - font awesome */

	.widget-social-icons p a { margin: 0 8px 0 0; float: right; }
	.widget-social-icons i.fa { float:right; font-size: 20px; width: 40px; height: 20px; padding:10px 0; }

	#bottom .widget-social-icons { display: inline-block; float: right; }
	#bottom .widget-social-icons a { float: left; display: inline-block; }


}

/* //////////////////////////////// full wide version //////////////////////////////// */ 

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

  	/* Header */
	
  	#head { height: 65px; }

  	a.logo  { width: 150px; height: 65px; }

  	#head ul li a { font-size: 12px; line-height: 14px; padding: 25.5px 10px; }

  	#menu ul ul {  }

  	/* Footer */

	#footer .container { padding: 60px 0; }
	#footer .footer-wrap {  }

	#footer ul { }
	#footer ul li a { font-size: 14px; } 
  	#footer p { font-size: 12px; line-height: 18px; font-size: 400; }
  	#footer h4 { margin-bottom: 30px; }

  	#bottom { padding: 40px 0 40px 0; }

}

/* //////////////////////////////// wide version //////////////////////////////// */ 

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

	 #head .container { padding: 0 20px; width: 1200px; }

/* 	 #menu ul li a { font-size: 16px; padding: 25px 15px; }
	 #menu ul ul { }
	 #menu ul ul li a { font-size: 14px; line-height: 18px; padding: 15px 20px; } */

	 #footer h4 { margin-bottom: 40px; }

	 #footer .footer-wrap {  }

}

/* //////////////////////////////// very wide version //////////////////////////////// */ 

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





}

/* //////////////////////////////// extra wide version //////////////////////////////// */ 

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



}

/* //////////////////////////////// extra extra wide version //////////////////////////////// */ 

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



}