/* MAIN HTML TAG STYLES */


/* Resize checkboxes for IE10 and under */
html[data-useragent*='MSIE 10.0'] .notIE {
    display: none; 
	}
	
html[data-useragent*='MSIE 10.0'] input[type=checkbox]  {
    width: 20px; 
    height: 20px; 
	}	
	
body {
	font-family: 'Oregano', sans-serif;
		font-family: 'Bubblegum Sans', cursive;	
	font-size: 120%;
	background: url('../images/cocktailBarBack.png');
	/*background: url('../images/cocktailBackImageVert.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	*/
	color: #fff;
	padding: 0;
	}

h1,h2,h3 {
	font-weight: 400;
	}

h1 { 
	font-size: 1.2em;
	color: #ffbe00;
	margin-bottom: 5px;
	}
	
h2 {
	font-size: 2.2em;
	margin: 20px 0;
	color: #ffbe00;
		color: #fe0032;
	}

h3 {
	font-size: 1.5em;
	margin: 0 0 0.625em 0;
	color: #fe0032;
	color: #0c0;
	}
	
p,ul li {
	font-size: 1.3em;
	line-height: 1.2;
	font-weight: 400;
	}
	
ul {
    padding: 0;
    margin: 20px 0 20px 20px;
	}	
	
ul.basket {
	list-style: none;
	margin: 20px 0;
	}	

ul.basket li:before {
	font-family: "Font Awesome 5 Free";
    content: "\f291"; 
    padding-right: 8px;
    color: #ffbe00; 
	font-size: 0.9em;
	font-weight: 700;
	}	 	

a {
	color: #0c0;
	}

a:hover {
	color: #fd0600;
	}
	
/* HEADER STYLES */
	
	
#cocktailHeader {
	position: fixed;
	width: 98%;
	padding: 1% 1% 30px 1%;
	height: 140px;
	text-align: center;
	background: url('../images/cocktailBarBack.png');
	z-index: 999;
	overflow: hidden;
	
			border-bottom: solid 10px rgba(255,255,255,0.2);	
	/*border-bottom: solid 1px rgba(255,255,255,0.5);
	margin-bottom: 10px;
	padding-bottom: 10px;*/
	}
	
#cocktailSign {
	margin-bottom: 20px;
	}
	
.light-up-letters {
	font-family: 'Yellowtail', cursive;
	font-family: 'Grand Hotel', cursive;
	display: inline-block;
	font-weight: 100;
	font-size: 5em;
	margin-right: 0.2em;
	}

.light-up-letters .fade {
	-webkit-animation: fade 5s linear infinite;
	animation: fade 5s linear infinite;
	}

.light-up-letters .flicker {
	-webkit-animation: flicker 6s 1s linear infinite;
	animation: flicker 6s 1s linear infinite;
	}

.light-up-letters .sparkle {
	-webkit-animation: sparkle 3s 3s linear infinite;
	animation: sparkle 3s 3s linear infinite;
	}

@-webkit-keyframes fade {
	0%,9%,11%,13%,15%,41%,43%,45% {
		text-shadow: 0 0 5px #0c0, 0 0 10px #0c0, 0 0 85px #0c0, 0 0 85px #0c0, 0 0 85px #0c0;
		opacity: 1;
		}
	10%,12%,14%,42%,44% {
		opacity: 0.6;
		text-shadow: none; 
		}
	}

@keyframes fade {
	0%,9%,11%,13%,15%,41%,43%,45% {
		text-shadow: 0 0 5px #0c0, 0 0 10px #0c0, 0 0 85px #0c0, 0 0 85px #0c0, 0 0 85px #0c0;
		opacity: 1;
		}
	10%,12%,14%,42%,44% {
		opacity: 0.6;
		text-shadow: none; 
		}
	}

@-webkit-keyframes flicker {
	51% {
		text-shadow: 0 0 5px #fd0600, 0 0 10px #fd0600, 0 0 85px #fd0600, 0 0 85px #fd0600, 0 0 85px #fd0600;
		opacity: 1;
		}
	0%,50%,52%,100% {
		opacity: 0.6;
		text-shadow: none; 
		}
	}

@keyframes flicker {
	51% {
		text-shadow: 0 0 5px #fd0600, 0 0 10px #fd0600, 0 0 85px #fd0600, 0 0 85px #fd0600, 0 0 85px #fd0600;
		opacity: 1;
		}
	0%,50%,52%,100% {
		opacity: 0.6;
		text-shadow: none; 
		}
	}

@-webkit-keyframes sparkle {
	0%,9%,11%,13%,15%,41%,43%,45% {
		text-shadow: 0 0 5px #fc0, 0 0 10px #fc0, 0 0 85px #fc0, 0 0 85px #fc0, 0 0 85px #fc0;
		opacity: 1;
		}
	10%,12%,14%,42%,44% {
		opacity: 0.6;
		text-shadow: none; 
		}
	}

@keyframes sparkle {
	0%,9%,11%,13%,15%,41%,43%,45% {
		text-shadow: 0 0 5px #fc0, 0 0 10px #fc0, 0 0 85px #fc0, 0 0 85px #fc0, 0 0 85px #fc0;
		opacity: 1;
		}
	10%,12%,14%,42%,44% {
		opacity: 0.6;
		text-shadow: none; 
		}
	}
	
.redGlow {
	color: #fd0600;
	text-shadow: 0 0 5px #fd0600, 0 0 10px #fd0600, 0 0 85px #fd0600, 0 0 85px #fd0600, 0 0 85px #fd0600;
	}

.yellowGlow {
	color: #fc0;
	text-shadow: 0 0 5px #fc0, 0 0 10px #fc0, 0 0 85px #fc0, 0 0 85px #fc0, 0 0 85px #fc0;
	}

.greenGlow {
	color: #0c0;
	text-shadow: 0 0 5px #0c0, 0 0 10px #0c0, 0 0 85px #0c0, 0 0 85px #0c0, 0 0 85px #0c0;
	}	
	
#drinkInfo {
	color: #fc0;
	font-size: 1.2em;
	margin-top: 10px;
	}


/*  BODY STYLES */	
	
	
#cocktailBody {
	width: 98%;
	margin: 0;
	padding: 190px 1% 1% 1%;
	height: auto;
	}	
	
	
/* Ingredients */
	
.cocktailIngredients {
	width: 98%;
	padding: 0 1%;
	}	
	
 .drinks {
	padding: 20px 0 10px 0;
	}

.item {
	text-align: center;
	}

	
/* Ingredient checkbox/add/remove selection */


input[type=checkbox] {
	display:none;
	}	
	
input[type=checkbox]:before {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	}

input[type=checkbox]:before { 
	content: "\f0fe";
	font-weight: 700;
	font-size: 3em;
	}

input[type=checkbox]:checked:before { 
	content: "\f146";
	} 

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    width: 40px; 
    height: 40px; 
    cursor: pointer;
    display: inline-block;
	color: #0c0;
	border: none;
    box-sizing: content-box;
	text-align: center;
	}

input[type="checkbox"]:checked {
    position: relative;
	color: #fe0032;
    cursor: pointer;
	}

input[type="checkbox"]:focus {
    outline: 0 none;
    border-radius: 2px;
    box-shadow: none;
	}

input[type=submit] {
	background: rgba(255,255,255,0.1);
	width: 98%;
	border-radius: 10px;
	padding: 10px;
	color: #fff;
	border: solid 5px rgba(255,255,255,0.2);
	}

input[type=submit]:hover {
	background: rgba(153,0,0,0.1);
	width: 98%;
	border-radius: 10px;
	padding: 10px;
	color: #fff;
	border: solid 5px rgba(153,0,0,0.2);
	}	


/* Carousel styles */

.owl-carousel {
	display: none;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 1;
	}

.owl-carousel .owl-stage {
	position: relative;
	-ms-touch-action: pan-Y;
	}

.owl-carousel .owl-stage:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}

.owl-carousel .owl-stage-outer {
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(0px, 0px, 0px);
	}
	
.owl-prev {
	position: absolute;
	top: 35%;
	left: -40px;
	}

.owl-next {
	position: absolute;
	top: 35%;
	right: -40px;
	}
	
.owl-prev:before {
	font-family: 'FontAwesome';
    content: '\f0a8';
	color: rgba(0,204,0,0.5);
	font-size: 2em;
	}

.owl-next:before {
	font-family: 'FontAwesome';
    content: '\f0a9';
	color: rgba(0,204,0,0.5);
	font-size: 2em;
	}
	
.owl-prev:hover:before,  .owl-next:hover:before{
	color: rgba(255,190,0,1);
	}

.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
	cursor: pointer;
	cursor: hand;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

.owl-carousel.owl-loaded {
	display: block;
	}
.owl-carousel.owl-loading {
	opacity: 0;
	display: block;
	}

.owl-carousel.owl-hidden {
	opacity: 0;
	}

.owl-carousel .owl-refresh .owl-item {
	display: none;
	}

.owl-carousel .owl-item {
	position: relative;
	min-height: 1px;
	float: left;
	-webkit-backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

.owl-carousel.owl-text-select-on .owl-item {
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
	}

.owl-carousel .owl-grab {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -o-grab;
	cursor: -ms-grab;
	cursor: grab;
	}

.owl-carousel.owl-rtl {
	direction: rtl;
	}

.owl-carousel.owl-rtl .owl-item {
	float: right;
	}

.no-js .owl-carousel {
	display: block;
	}		
	
	
/* Results */

#cocktailResults {
	width: 100%;
	}

#selectedCtails {
	font-size: 1.2em;
	width: 98%;
	margin: 10px 0;
	padding: 10px 1%;
	border-top: solid 10px rgba(255,255,255,0.2);		
	border-bottom: solid 10px rgba(255,255,255,0.2);	
	color: #fff;
	text-align: center;
	}	

#cocktailBlock {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	}


	#cocktailRecipes {
		display: block;
		width: 50%;
		margin: 0 25%;
		padding: 0;
		}	

	#cocktailBlockGlass {
		display: inline-block;
		width: 24%;
		padding: 0 1%;
		vertical-align: text-top;
		text-align: center;
		}
		
	#cocktailBlockingredients {
		display: inline-block;
		width: 35%;
		padding: 0 1%;
		vertical-align: text-top;
		text-align: left;
		}
		
	#cocktailBlockRecipe {
		display: inline-block;
		width: 35%;
		padding: 0 1%;
		vertical-align: text-top;
		text-align: left;
		}	







	
.printButton {
	color: #000;	
	width: 120px;
	background: rgba(0,204,0,0.3);
	background: #0c0;
	display: inline-block;
	padding: 5px 10px;
	text-align: center;
	font-size: 1.2em;
		font-family: 'Bubblegum Sans', cursive;	
	margin: 20px 0;
	border: none;
	-webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
	border-radius: 25px;
	}
		
.printButton:hover {
	background: rgba(0,204,0,0.5);
	background: #fd0600;
	color: #fff;
	}		

	
.tooltip{
	position: relative;
	}
	
.tooltip:before, .tooltip:after {
	font-weight: 400;
	position: absolute;
	transition: All 0.5s ease;
	-webkit-transition: All 0.5s ease;
	-moz-transition: All 0.5s ease;
	-o-transition: All 0.5s ease;
	margin-left: -75px;
	left: 50%;
	display: block;
	color: #fff;
	opacity: 0;
    visibility:hidden;
	}
	
.tooltip:before, .tooltip:after {
	bottom: 300%;
	}	

.tooltip:before  {
	content: attr(title);
	border: none;
	border-radius: 20px;
	background: rgba(255,204,0,0.8);
	background: #fd0600;
	width: 250px;
	text-align: center;
	z-index: 2;
	font-size: 1em;
	line-height: 1em;
	padding: 10px;
	}

.tooltip:after  {
	font-family: "Font Awesome 5 Free";
	content: '\f0d7 ';
	/*-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg));*/
	margin-left: 0;
	margin-top: 0;
	width: 0;
	height: 0;
	z-index: 1;
	line-height: 10px;
	color: #fd0600;
	font-size: 50px;
	font-weight: 700;
	}

.tooltip:hover:before, .tooltip:hover:after {
	bottom: 200%;
	opacity: 1;
    visibility:visible;
	}	
	
	
	
	
	
/* ASSORTED CLASSES */


.angled10 {
	-ms-transform: rotate(-10deg); 
    -webkit-transform: rotate(-10deg); 
    transform: rotate(-10deg);
	}

.angled5 {
	-ms-transform: rotate(-5deg); 
    -webkit-transform: rotate(-5deg); 
    transform: rotate(-5deg);
	}
		
.numCocktails {

	font-size: 2.5em;
	}
	
.imageFit {
	width: 85%;
	height: auto;

	}

.red {
	color: #fd0600;
	}
	
.yellow {
	color: #fc0;
	}
	
.green {
	color: #0c0;
	}	


/* RESPONSIVE STYLES */
	
@media only screen and (max-width: 1024px) {
	body {
		background: #000;
		}	

	#cocktailHeader {
		background: #000;
		position: relative;
		height: auto;
		border-bottom: solid 10px rgba(255,255,255,0.3);	
		}	

	#cocktailBody {
		padding: 10px 1%;
		}		
		
	#selectedCtails {
		border-top: solid 10px rgba(255,255,255,0.3);		
		border-bottom: solid 10px rgba(255,255,255,0.3);	
		}
	}
	
@media only screen and (min-width: 1171px) and (max-width: 1340px) {	
	.light-up-letters {
		font-size: 4.5em;
		}	
	
	.numCocktails {
		font-size: 2em;
		}	
		
	#cocktailRecipes {
		width: 56%;
		margin: 0 22%;
		}			
	}

@media only screen and (min-width: 1025px) and (max-width: 1170px) {	
	.light-up-letters {
		font-size: 4.0em;
		}	
	
	.numCocktails {
		font-size: 1.7em;
		}	

	#cocktailRecipes {
		width: 62%;
		margin: 0 19%;
		}	
	}		

@media only screen and (min-width: 931px) and (max-width: 1024px) {	
	.light-up-letters {
		font-size: 4.5em;
		}	
	
	.numCocktails {
		font-size: 2em;
		}	

	#cocktailRecipes {
		width: 68%;
		margin: 0 16%;
		}	
	}	

@media only screen and (min-width: 831px) and (max-width: 930px) {	
	.light-up-letters {
		font-size: 4em;
		}	
	
	.numCocktails {
		font-size: 1.7em;
		}	

	#cocktailRecipes {
		width: 74%;
		margin: 0 13%;
		}	
	}

@media only screen and (min-width: 731px) and (max-width: 830px) {	
	.light-up-letters {
		font-size: 3.5em;
		}	
	
	.numCocktails {
		font-size: 1.6em;
		}	

	#cocktailRecipes {
		width: 80%;
		margin: 0 10%;
		}	
	}

@media only screen and (min-width: 641px) and (max-width: 730px) {	
	.light-up-letters {
		font-size: 3em;
		}	
	
	.numCocktails {
		font-size: 1.5em;
		}	

	#cocktailRecipes {
		width: 86%;
		margin: 0 7%;
		}	
	}

@media only screen and (max-width: 640px) {	
	.light-up-letters {
		font-size: 3.5em;
		}	
	
	.numCocktails {
		font-size: 1.8em;
		}	

	#cocktailRecipes {
		width: 96%;
		margin: 0 2%;
		}	
	}
	
@media only screen and (max-width: 640px) and (orientation: portrait){		
	#cocktailBlockingredients,#cocktailBlockGlass,#cocktailBlockRecipe {
		display: block;
		width: 100%;
		padding: 0;
		text-align: center;
		}
	}