@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");
@import url("fontawesome-all.min.css");

/*
	Aerial by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;

			scroll-padding-top: 9em; /* height of sticky header */

	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		/*background: #4ea876;*/
		background: url("images/cocktailsbg.webp") bottom left;
		/*overflow: hidden; url("images/bg.jpg") bottom left*/
		background-attachment: fixed;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, select, textarea {
		color: #fff;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 20pt;
		font-weight: 300 !important;
		letter-spacing: -0.025em;
		line-height: 1.75em;
	}

	a {
		-moz-transition: border-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: inherit;
		outline: 0;
		text-decoration: none;
	}

		a:hover {
			border-color: transparent;
		}
	.header{
		position: fixed; 
		top: 0; 
		left: 0; 
		z-index: 9999; 
		width: 100%; 
		height: 5.5em; 
		background-color: #14ada8;


	}
	nav {
		list-style: none;
	}
	.logo{
		float:left;
		margin: auto;
		width: 35%;
	}
	nav ul{

		margin: auto;
		width: 35%;
		
		text-align: center;
	}
	nav li a{
		list-style: none;
		display: inline-block;
		text-align: center;
		border: 1px solid;
		margin: 0.1em;
		height: 2em;
		line-height:1.4em;
		padding:5px;


	}


	.content{
		margin: 6em auto;
		text-align:center;
		//background-color: #ffffffbe;
		width:50%;
	}
	.content img{
		width:100%;
	}
	.content li{
		list-style: none;
	}





/* Icon */

	.icon {
		text-decoration: none;
		position: relative;
		
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display:inline;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		/* ------------------------------------------
		*  Responsive Grid Media Queries - 1280, 1024, 768, 480
		*   1280-1024   - desktop (default grid)
		*   1024-768    - tablet landscape
		*   768-480     - tablet 
		*   480-less    - phone landscape & smaller
		* --------------------------------------------
		*/
	   @media all and (min-width: 1024px) and (max-width: 1280px) { 
		.header{
			height: 4em; 
	
		}
		nav {
			list-style: none;
		}
		.logo{
			float:none;
			margin: auto;
			width: 50%;
		}
		nav ul{
	
			margin: auto;
			width: 100%;
			
		
		}
		nav li a{

			display: none;	

	
		}
	
		.content{
			margin: 4em auto;
			width:100%;
		}
		.content img{
			width:100%;
		}
	   }
	   
	   @media all and (min-width: 768px) and (max-width: 1024px) { 
		.header{
			height: 8em; 
	
		}
		nav {
			list-style: none;
		}
		.logo{
			float:none;
			margin: auto;
			width: 50%;
		}
		nav ul{
	
			margin: auto;
			width: 100%;
			
		
		}
		nav li a{

			display: none;	

	
		}
	
		.content{
			margin: 8em auto;
			width:100%;
		}
		.content img{
			width:100%;
		}
	   }
	   
	   @media all and (min-width: 480px) and (max-width: 768px) {
			.header{
				height: 6em; 
		
			}
			nav {
				list-style: none;
			}
			.logo{
				float:none;
				margin: auto;
				width: 50%;
			}
			nav ul{
		
				margin: auto;
				width: 100%;
				
			
			}
			nav li a{

				display: none;	

		
			}
		
			.content{
				margin: 6em auto;
				width:100%;
			}
			.content img{
				width:100%;
			}
	
	   }
	   
	   @media all and (max-width: 480px) {
				.header{
					height: 4em; 
			
				}
				nav {
					list-style: none;
				}
				.logo{
					float:none;
					margin: auto;
					width: 50%;
				}
				nav ul{
			
					margin: auto;
					width: 100%;
					
				
				}
				nav li a{

					display: none;	

			
				}
			
				.content{
					margin: 4em auto;
					width:100%;
				}
				.content img{
					width:100%;
				}

	    }
	   
	   
	   /* Portrait */
	   @media screen and (orientation:portrait) { /* Portrait styles here */ }
	   /* Landscape */
	   @media screen and (orientation:landscape) { /* Landscape styles here */ }
	   
	   
	   /* CSS for iPhone, iPad, and Retina Displays */
	   
	   /* Non-Retina */
	   @media screen and (-webkit-max-device-pixel-ratio: 1) {
	   }
	   
	   /* Retina */
	   @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (-o-min-device-pixel-ratio: 3/2),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5) {
	   }
	   
	   /* iPhone Portrait */
	   @media screen and (max-device-width: 480px) and (orientation:portrait) {
	   } 
	   
	   /* iPhone Landscape */
	   @media screen and (max-device-width: 480px) and (orientation:landscape) {
	   }
	   
	   /* iPad Portrait */
	   @media screen and (min-device-width: 481px) and (orientation:portrait) {
	   }
	   
	   /* iPad Landscape */
	   @media screen and (min-device-width: 481px) and (orientation:landscape) {
	   }