/* tw-sidebar{display: none} */
body{ background-color: #081129; color: #fff; font-family: 'Barlow', sans-serif !important; font-size: 1.125rem; line-height: 1.38888888889; font-weight: 400; display: block; position: relative;}
p{margin: 0; padding-bottom: 20px}
p:last-of-type{padding-bottom: 0}
img{max-width: 100%}
button{font-family: inherit;}

nav item{display: block;}

head{display: none !important}
title{display: none !important}


.button{background-color: #fff; color: #081129; padding: 10px 40px; border-radius: 25px; max-width: 250px; margin: auto; text-transform: uppercase; font-weight: 600; transition: background-color 0.3s; font-family: inherit; cursor: pointer;}
.button:hover{background-color: #9541d4 ; color: #fff}
button:hover{color: #15f0ab}

.font-small {font-size:0.8rem;}
.font-italic {font-style: italic;}

ul {text-align: left;margin-top:10px}
ul li {margin-bottom:8px;}
.green-button{background-color: #15f0ab}
.green-button:hover{background-color: #9541d4; color: #fff;}
.purple-button{background-color: #9541d4; color: #fff; }
.purple-button:hover{background-color: #15f0ab; color: #081129; }

.toggleMenu{ font-weight: bold; padding: 10px 15px; color: #fff;}

.strike-example{ margin: 40px auto}

page .two-col li{display: inline-block; width: calc(50% - 2px)}

.headerOne{color: #15f0ab; font-weight: 900; font-size: 1.75rem; line-height: 1.25; letter-spacing: 0.025rem; text-transform: uppercase;}
.headerTwo{color: #15f0ab;font-weight: 900; font-size: 1.4375rem; line-height: 1.30434782609; letter-spacing: 0.025rem; text-transform: uppercase;}
.headerThree{color: #15f0ab;font-weight: 900; font-size: 1.4375rem; line-height: 1.30434782609; letter-spacing: 0.025rem;}

.cream-font{color: #ffe8cf}

.arrow-above{margin-top: 130px; position: relative;}
.arrow-above::before{content: ''; background-image: url('../img/down-arrow.svg'); display: block;height: 60px; width: 30px; background-size: 100% auto; margin: auto; background-position: center top; background-repeat: no-repeat; position: absolute; left: 0; right: 0; top: -90px}


.mesage-container{float: left;width: 100%}
.mesage-container + p{ padding-bottom: 20px;}
.message{width: auto; padding: 15px 20px; border-radius: 25px; position: relative; margin-bottom: 20px; clear: both;text-align: left;}
.messageCont-button{ width: 100%}
.message-left{background-color: #15f0ab;color: #000; margin-left: 0; float: left; text-align: left; margin-left: 20px}
.message-left::after{content: ''; display: block; width: 40px; height: 32px; position: absolute; bottom: 0; left: -17px; background-image: url(../img/speech-bubble-flick-green-left.svg); background-size: 100% auto; z-index: 1; background-repeat: no-repeat;}
.message-right{background-color: #9541d4; color: #fff; float: right;  margin-right: 20px}
.message-right::after{content: ''; display: block; width: 40px; height: 32px; position: absolute; bottom: 0; right: -17px; background-image: url(../img/speech-bubble-flick-purple-right.svg); background-size: 100% auto; z-index: 1; background-repeat: no-repeat;}
.messanger-icon{margin: 40px auto; display: block;}

.purple_message{
	background-color: #9541d4;
	color: #fff;
}

.purple_message:after{
	background-image: url(../img/speech-bubble-flick-purple-left.svg);
}

.green_message{
	background-color: #15f0ab;
	color: #000;
}

.green_message:after{
	background-image: url(../img/speech-bubble-flick-green-right.svg);
}

.message-profile-3{
	background-color: #edb942;

}
.message-profile-3::after{
	background-image: url(../img/speech-bubble-flick-third-left.svg);
}
.sofa-img{margin: auto;}
.choices-container{margin: 40px auto 0 auto; max-width: 200px}
.choices-container tw-expression{margin-bottom: 40px}
.choices-container tw-expression:last-of-type{margin-bottom: 0}
.choices-container button{margin-bottom: 25px; line-height: 25px;}
.choices-container button:last-child{margin-bottom: 0}
.choice-icon{display: block;margin: auto; height: 135px}

.beerq3a-button{margin: 40px auto 20px auto;}
.beerq3a-button p{ display: inline-block; vertical-align: middle; margin-bottom: -80px;}
.beerq3a-button img{display: inline-block; vertical-align: middle;}

.beerq3b-button p{ display: inline-block; vertical-align: middle; margin-bottom: -80px; margin-left: -30px}
.beerq3b-button img{display: inline-block; vertical-align: middle; width: 190px}

.beer-choice2-canContainer{margin-top: 20px}
.leftCol-beer{width: 134px; display: inline-block; vertical-align: middle; margin-left: -20px; position: relative;}
.leftCol-beer::after{content: ''; background-image: url('../img/arrow.svg'); display: block; width: 99px; height: 80px; background-size: 121px; background-position: top -12px left -12px; background-repeat: no-repeat; position: absolute; top: 62px; right: -80px;}
.rightCol-beer-button{display: inline-block; width: 122px; vertical-align: middle; position: relative;}

.top-button{position: absolute;top: -90px}
.bottom-button{position: absolute;bottom: -80px}

.qMark-img{margin: 0px auto 35px auto; width: 220px;}

.beerquestion5{max-width: 100%; margin-top: 0px}

.info-box{background-color: #283044; padding: 40px 20px; margin-top: 80px; max-width: 400px; margin: auto; position: relative}
.thumbsUp-infoBox{margin-top: 83px}
.pizza-infoBox{margin-top: 49px}
.brain-infoIcon{position: absolute; top: -68px; left: -47px; width: 180px}
.tp-infoIcon{position: absolute; top: -73px; left: 0; width: 160px;}
.head-infoIcon{    position: absolute; top: -95px; left: -25px; width: 160px;}
.bowl-infoIcon{position: absolute; top: -117px; left: -23px; width: 160px;}
.card-infoIcon{position: absolute; top: -87px; left: -5px; width: 185px;}
.vomit-infoBox{margin-top: 120px}
.vomit-infoIcon{position: absolute; width: 150px; top: -90px; right: 0;}

.can-infoIcon{position: absolute; width: 150px; top: -116px; right: -31px;}

.water-infoIcon{ position: absolute; width: 150px; top: -90px; right: -30px;}
.thumbsUp-infoIcon{position: absolute; top: -85px; right: 0; width: 140px;}
.scaleAnimation{animation: scale-animation 0.5s linear; /* IE 10+, Fx 29+ */}

.bottombar{ width: 100%; margin: auto; left: 0; right: 0;  text-align: center; color: #081129;   transition: all 2s;     background-color: rgb(255 255 255 / 10%); display: flex; padding: 10px 0;}
.bottomBar-container{background-color: #ffe8cf; padding: 0; height: 100vh;}
.bottomBar-container nav{max-width: 320px; margin: auto; padding: 20px 40px}
.bottombar item{padding: 10px 0}
.bottombar.open-bar{top: 0}

.close-menu{margin-right: 0}

@keyframes scale-animation {
	0%   { transform: scale(0);}
	100%   { transform: scale(1.0);}
}


.pizza-infoIcon{position: absolute; top: -68px; left: 0; width: 160px;}
.glass01-infoIcon{position: absolute; top: -68px; left: 0; width: 100px;}
.glass02-infoIcon{position: absolute; top: -68px; right: 0; width: 100px;}
.story-infoIcon {position: absolute;top:40px; width:125px;left: calc(50% + 90px);}
.info-box .button{margin-top:40px}

.green-infoBox{background-color: #15f0ab; color: #081129}
.green-infoBox .headerTwo{color: #081129}
.info-box .headerTwo{padding: 10px 0}



topbar{position: absolute; left: 0; right: 0; top: 0px; max-width: 380px; z-index: 9999; margin: auto; padding: 40px;}

time{display: inline-block; text-align: right; width: calc(100% - 134px); vertical-align: middle;}
time img{margin: auto;margin-right: 0; height: 30px}

lives{display: inline-block; width: 114px; vertical-align: middle; text-align: left;}
life{display: inline-block; margin-right: 5px}
life img{height: 54px}
life img.life1{ height: 60px }
life img.life2{ height: 51px }
life img.life3{ height: 35px }
/* life:first-of-type{margin-right: -3px;} */
life:last-of-type{margin-right: 0}

.results-desc{text-align: left}
.results-desc ul{list-style: disc; padding-left: 20px; padding-top: 40px; padding-bottom: 40px}
.results-desc ul li{padding-bottom: 20px}
.results-desc ul li:last-of-type{padding-bottom: 0}

.results-icon{height: 170px}

.results-header{padding: 20px; background-color: #283044; margin-bottom: 40px}

.canchoice-img{height: 170px}

@media screen and (max-width: 365px) {
	/* life{margin-right: 5px} */
	/* life img{ width: 30px} */
}

.gray-out{filter: grayscale();}
.form-link{text-align: center; display: block; color: #fff; margin-top: 20px}

.pick-drink{padding: 0; font-size: 1.125rem; line-height: 1.38888888889; letter-spacing: 0.025rem; font-weight: 400; color: #fff; max-width: 600px; margin: 20px auto;}
.pick-drink tw-link{font-weight: 400; color: #fff}
.pick-drink li{vertical-align: top;  width: 100%; margin-bottom: 10px; text-align: center; background-color:rgb(255 255 255 / 10%);border-radius: 10px;}

	.pick-drink li:hover {background-color:#15f0ab;}
.pick-drink button { width:90%;margin:0 auto;display: flex; justify-content: center;
    flex-direction: row;margin:0 10px;}
    .pick-drink button:hover {color:#081129;cursor: pointer;}
    .pick-drink .flex-item {flex-grow:1;justify-content: center;
  align-self: center;font-weight:bold;}
  	.pick-drink .flex-none {flex:none;width:90px;}
  /*.pick-drink button img {flex:150px;}*/
  

/*.pick-drink li img{float:left;}*/
/*.pick-drink li:nth-child(even){margin-left: 20px}*/
/*.pick-drink li:nth-child(odd){margin-right: 20px}*/
.pick-drink li .pickDrink-icon{}
.pickDrink-icon{height: 100px}


.yourAim-icon{display: block;margin: auto; margin-bottom: 40px; width: 140px}

.crushedCans-crossed{padding: 0; margin: 40px auto;}
.crushedCans-crossed li{display: inline-block;vertical-align: middle; margin-right: 40px; position: relative;}
.crushedCans-crossed li:last-of-type{margin-right: 0}
.crushedCans-crossed li:before{content: ''; display: block; width: 3px; height: 60px;background-color: #15f0ab; position: absolute; z-index: 1; right: 0; left: 0; transform: rotate(45deg); top: 0; bottom: 0; margin: auto;}
.crushedCans-crossed li:after{content: ''; display: block; width: 3px; height: 60px;background-color: #15f0ab; position: absolute; z-index: 1; right: 0; left: 0; transform: rotate(-45deg); top: 0; bottom: 0; margin: auto;}
.crushedCan-icon{margin: auto; display: block; width: 40px}
.sofa-button{margin-top:40px}

.showMsg-left::before{
	content: '';
	width: 20px; height: 20px;
 }


@media screen and (max-width: 650px) {
	body{width: 100%}
	tw-story{padding: 40px; margin: auto; width: auto}
	/*.pickDrink-icon{height: 150px;}*/
}

/* button[goto="beerq1a"]{margin-bottom: -5px} */
/* button[goto="beerq1a"] img{ margin-bottom: -20px} */

.strike-can{height: 216px}
.checkpoint-desc{margin-bottom: 30px}

button[action="reset"]{margin-top: 10px}

.about,
.privacy-policy{ position: absolute; background-color: #081129; bottom: 58px; height: calc(100% - 58px); width: 100%; overflow: scroll; z-index: 999999}

.fixed{overflow:hidden;}



button#shotq1a img{
	width: 120px
}


page[name="shotq1"] button#shotq1a{
	margin-top: 10px;
	margin-bottom: 40px
}

page[name="shotq1"] button#shotq1a p{
	max-width: 160px;
}

page[name="shotq1dyk"] .dyk_icon{
	width: 140px;
    top: -89px;
}

page[name="shotq2dyk"] .dyk_icon{
    top: -78px;
}

page[name="shotq3"] button#shotq3a{
	margin-top: 30px;
	margin-bottom: 40px
}

page[name="shotq3"] button p{
	max-width: 200px;
	margin: auto;
}

page[name="shotq3"] button#shotq3b{
	margin-bottom: 40px
}

page[name="shotq3dyk"] .dyk_icon{
	width: 160px;
    top: -89px;
}

page[name="shotq5dyk"] .dyk_icon{
	top: -85px;
}

page[name="shotq6"] #shotq6b img{
	width: 130px
}

page[name="shotq6dyk"] .dyk_icon{
	top: -72px;
    width: 147px;
}

page[name="shotq7"] #shotq7b{
	margin-top: -60px;
	/*margin-right: 0;*/
}

page[name="shotq7dyk"] .dyk_icon{
    top: -97px;
    left: -36px;
    width: 207px;
}

page[name="shotq8dyk"] .dyk_icon{
	top: -93px;
}

page[name="shotq9b"] img.icon{
	width: 200px;
	top: -60px;
}

page[name="shotq9dyk"] .dyk_icon{
	top: -109px
}

page[name="wineq1"] button p{
	max-width: 200px;
	margin: auto;
}

page[name="wineq1"] #wineq1a{
	margin-bottom: 20px;
}

page[name="wineq1a"] #wineq1a{
	margin-bottom: 20px;
}

#path page[name="wineq1a"] .info-box p,
#path page[name="wineq1b"] .info-box p{
	padding-top: 10px;
}

#path page[name="wineq1dyk"] .icon.dyk_icon{
	top: -75px;
}

#path page[name="wineq1transition"] .results-desc{
	text-align: center;
}

#path page[name="wineq1transition"] .results-desc img{
	margin-right: -25px;
}

#path page[name="wineq2a"] .info-box p,
#path page[name="wineq2b"] .info-box p{
	padding-top: 10px
}

#path page[name="wineq2dyk"] .icon.dyk_icon{
	top: -95px;
    width: 145px;
}

#path page[name="wineq3"] #wineq3a{
	margin-bottom: 20px;
	margin-top: 10px
}

#path page[name="wineq3a"] .info-right_icon,
#path page[name="wineq3b"] .info-right_icon{
	width: 119px;
}

#path page[name="wineq3a"] .info-box p,
#path page[name="wineq3b"] .info-box p{
	padding-top: 20px;
}

page[name="wineq3dyk"] .dyk_icon{
	top: -92px;
    width: 140px;
}

#path page[name="wineq4"] button#wineq4a{
	margin-bottom: 10px;
	margin-top: 10px;
}

#path page[name="wineq4b"] .info-right_icon{
	width: 160px
}

#path page[name="wineq4dyk"] .dyk_icon{
	width: 130px;
    top: -80px;
}

#path page[name="wineq5dyk"] .dyk_icon{
	width: 130px;
    top: -85px;
}

#path page[name="wineq6"] .sideImg_button img{
	width: 135px
}

#path page[name="wineq6b"] .info-right_icon{
	width: 160px;
    top: -67px;
}

#path page[name="wineq6dyk"] .dyk_icon{
	top: -90px
}


page[name="wineq7"] button#wineq7a{
	margin-top: 20px;
}

page[name="wineq7"] button.sideImg_button img{
	width: 130px;
}

page[name="wineq7"] button.sideImg_button p{
    max-width: 160px;
}

page[name="wineq7"] button#wineq7b img{
	width: 203px;
    max-width: initial !important;
}

page[name="wineq7"] button#wineq7b img{
	max-width: 159px;
}

@media screen and (max-width: 399px) {
	page[name="wineq7"] button#wineq7a{

		margin-bottom: 20px
	}

	page[name="wineq7"] button#wineq7a img{
		width: 103px;
	}

	page[name="wineq7"] button#wineq7b img{
		width: 135px;
	}
}

page[name="wineq7dyk"] .dyk_icon{
	top: -80px;
    width: 140px;
}

page[name="wineq8dyk"] .dyk_icon{
	top: -80px;
    width: 140px;
}

page[name="wineq9"] button{
	margin-bottom: 20px;
}

page[name="wineq9dyk"] .dyk_icon{
	top: -105px
}

.position-relative {position: relative;}

.text-bold {font-weight: bold;}

.text-size-2 {font-weight: 900;
font-size: 1.4375rem;
line-height: 1.30434782609;
letter-spacing: 0.025rem;}

.text-uppercase {text-transform: uppercase;}
.text-green {color:#15f0ab;}
.text-dark {color:#081129;}

.align-left, .pageContainer .align-left {text-align: left;}
.align-center, .pageContainer .align-center {text-align: center;}

.bg-green {background-color:#15f0ab;}
.bg-dark-10 {background-color: rgb(255 255 255 / 10%);}
.bg-dark {background-color: rgb(255 255 255 / 100%);}
.bg-white {background-color:white;}
.bg-purple {background-color:#9541d4;}
.bg-circle {border-radius: 50%;display:block;text-align: center;}
.bg-circle-25 {width: 25px;line-height: 25px;}
.bg-circle-30 {width: 30px;line-height: 30px;}

.b-radius-25 {border-radius: 25px;}

.underline-none {text-decoration: none}
.m-b-0 {margin-bottom:00px;}
.m-b-10 {margin-bottom:10px;}
.m-b-20 {margin-bottom:20px;}
.m-b-30 {margin-bottom:30px;}
.m-b-40 {margin-bottom:40px;}
.m-b-50 {margin-bottom:50px;}
.m-b-60 {margin-bottom:60px;}
.m-b-70 {margin-bottom:70px;}
.m-b-80 {margin-bottom:80px;}
.m-b-100 {margin-bottom:100px;}

.m-t-0 {margin-top:00px !important;}
.m-t-10 {margin-top:10px;}
.m-t-20 {margin-top:20px;}
.m-t-30 {margin-top:30px;}
.m-t-40 {margin-top:40px;}
.m-t-50 {margin-top:50px;}
.m-t-60 {margin-top:60px;}
.m-t-70 {margin-top:70px;}
.m-t-80 {margin-top:80px;}
.m-t-100 {margin-top:100px;}

.m-y-0 {margin-top:00px;margin-bottom: 00px;}
.m-y-10 {margin-top:10px;margin-bottom: 10px;}
.m-y-20 {margin-top:20px;margin-bottom: 20px;}
.m-y-30 {margin-top:30px;margin-bottom: 30px;}
.m-y-40 {margin-top:40px;margin-bottom: 40px;}
.m-y-50 {margin-top:50px;margin-bottom: 50px;}
.m-y-60 {margin-top:60px;margin-bottom: 60px;}
.m-y-70 {margin-top:70px;margin-bottom: 70px;}
.m-y-80 {margin-top:80px;margin-bottom: 80px;}
.m-y-100 {margin-top:100px;margin-bottom: 100px;}

.m-l-0 {margin-left:00px;}
.m-l-10 {margin-left:10px;}
.m-l-20 {margin-left:20px;}
.m-l-30 {margin-left:30px;}
.m-l-40 {margin-left:40px;}
.m-l-50 {margin-left:50px;}
.m-l-60 {margin-left:60px;}
.m-l-70 {margin-left:70px;}
.m-l-80 {margin-left:80px;}
.m-l-100 {margin-left:100px;}

.m-r-0 {margin-right:00px;}
.m-r-10 {margin-right:10px;}
.m-r-20 {margin-right:20px;}
.m-r-30 {margin-right:30px;}
.m-r-40 {margin-right:40px;}
.m-r-50 {margin-right:50px;}
.m-r-60 {margin-right:60px;}
.m-r-70 {margin-right:70px;}
.m-r-80 {margin-right:80px;}
.m-r-100 {margin-right:100px;}



.p-b-0 {padding-bottom:00px;}
.p-b-10 {padding-bottom:10px;}
.p-b-20 {padding-bottom:20px;} p.p-b-20:last-of-type {
    padding-bottom: 20px;
}
.p-b-30 {padding-bottom:30px;}
.p-b-40 {padding-bottom:40px;}
.p-b-50 {padding-bottom:50px;}
.p-b-60 {padding-bottom:60px;}
.p-b-70 {padding-bottom:70px;}
.p-b-80 {padding-bottom:80px;}
.p-b-100 {padding-bottom:100px;}

.p-t-0 {padding-top:00px;}
.p-t-10 {padding-top:10px;}
.p-t-20 {padding-top:20px;}
.p-t-30 {padding-top:30px;}
.p-t-40 {padding-top:40px;}
.p-t-50 {padding-top:50px;}
.p-t-60 {padding-top:60px;}
.p-t-70 {padding-top:70px;}
.p-t-80 {padding-top:80px;}
.p-t-100 {padding-top:100px;}

.p-y-0 {padding-bottom:00px;padding-top:00px;}
.p-y-10 {padding-bottom:10px;padding-top:10px;}
.p-y-20 {padding-bottom:20px;padding-top:20px;}
.p-y-30 {padding-bottom:30px;padding-top:30px;}
.p-y-40 {padding-bottom:40px;padding-top:40px;}
.p-y-50 {padding-bottom:50px;padding-top:50px;}
.p-y-60 {padding-bottom:60px;padding-top:60px;}
.p-y-70 {padding-bottom:70px;padding-top:70px;}
.p-y-80 {padding-bottom:80px;padding-top:80px;}
.p-y-100 {padding-bottom:100px;padding-top:100px;}

.p-x-0 {padding-left:00px;padding-right:00px;}
.p-x-10 {padding-left:10px;padding-right:10px;}
.p-x-20 {padding-left:20px;padding-right:20px;}
.p-x-30 {padding-left:30px;padding-right:30px;}
.p-x-40 {padding-left:40px;padding-right:40px;}
.p-x-50 {padding-left:50px;padding-right:50px;}
.p-x-60 {padding-left:60px;padding-right:60px;}
.p-x-70 {padding-left:70px;padding-right:70px;}
.p-x-80 {padding-left:80px;padding-right:80px;}
.p-x-100 {padding-left:100px;padding-right:100px;}

.width-min-400 {min-width:400px;}
.width-min-200 {min-width:200px;}
.width-min-100 {min-width:100px;}

.width-max-400 {max-width:400px;}
.width-max-200 {max-width:200px;}
.width-max-100 {max-width:100px;}

.flex-container {display:flex;}

.vertical-middle {vertical-align: middle}

.privacyPolicy {font-weight: normal;font-size:0.9rem;}

button p {text-decoration: underline;}
button {cursor: pointer;}

.magpieLogo { font-size: 0.9rem; padding: 10px 15px; color: #fff; text-decoration: none; display: flex; margin: auto; white-space: nowrap; }
.magpieLogo:hover { color: #15f0ab; }
.magpieLogo img {margin: 4px 0 0;}

.logo-block { display: flex; flex-wrap: wrap; justify-content: space-between; }

.logo-block img { margin-bottom: 15px; }

.cookie_banner_container {
	display: none;
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0 auto;
	background: #2A3043;
	padding: 10px 20px;
}

.cookie_banner_container.visible {
	display: block;
}

.cookie_banner {
	width: 100%;
	margin: 0 auto;
	max-width: 850px;
	text-align: center;
}

.cookie_banner_blurb {
	width: 100%;
}

.cookie_banner p {
	width: 100%;
	font-size: 0.9rem;
	margin: 0 0 10px;
}

.cookie_banner_link {
	width: 100%;
	max-width: 100%;
	margin: 0 0 10px;
	text-transform: none;
	white-space: nowrap;
}

@media screen and (min-width: 420px) {
	.cookie_banner {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
	}

	.cookie_banner p {
		max-width: 415px;
		margin: 0 auto 10px;
	}

	.cookie_banner_link {
		width: auto;
		margin: 0 0 0 10px;
	}
}

@media screen and (min-width: 850px) {
	.cookie_banner {
		flex-wrap: nowrap;
		text-align: left;
	}

	.cookie_banner_blurb {
		width: auto;
	}

	.cookie_banner p {
		margin: 0 20px auto 0;
	}
}