:root {
    --TWO_PI: 6.28318530717959;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~ GENERAL ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
html {
	height: 100%;
}
body {
    opacity: 0;
	margin: 0;
	height: 100%;
	overflow-x: hidden;
	font-family: myComfortaa,sans-serif;
	background: radial-gradient(ellipse closest-side, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0)), white; /* Safari doesn't like "transparent" keyword, gotta use rgba(255,255,255,0) */
    transition: opacity 250ms, background var(--fade-time);
}
main {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    align-items: center;
	box-sizing: border-box;
	position: relative;
	padding: 15px 20px 0;
}
#content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~ SPINNING LABEL CYLINDER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#curtain_panel {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    background-color: rgba(252,252,252);
    overflow: hidden;    
    overflow: clip;
    transition: height 500ms;
}
#close_curtain_panel_button {
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 60px;
    padding: 8px;
    z-index: 300;
}
.position_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300;
    text-align: center;
}
.page_title {
    color: rgba(0, 0, 0, 0.25);
    font-size: 12pt;
    font-weight: bold;
    margin: 3px 0 0 0;
}
#curtain_panel_content {
    display: flex;
    opacity: 0;
    margin-right: -1000%;
    margin-left: -1000%;
    align-items: center;
    transition: opacity 250ms;
}
#can_label_cylinder {
    --scaled_height: calc(var(--height) * var(--zoom));  
    --scaled_width: calc(var(--scaled_height) * 1.5625);  
    --zoom: 1.1;    
    
    --x_tilt_deg: 5deg;
    --y_spin_deg: 180deg;
    --y_spin_val: 180;
    
    --radius: calc(calc(var(--scaled_width) / var(--TWO_PI)) * var(--slice_cosine)); /* Cosine factor is theoretical adjustment needed to eliminate gaps between slices. */
    --radius_percent: calc(calc(100 / var(--TWO_PI)) * var(--slice_cosine)); /* Can't mix and match types in CSS so need to make some duplicate versions as % instead of px. */
    
    --shoulder_top_angle: 25deg;
    --shoulder_top_angle_sine: 0.422618261740699; /* Maybe one day CSS can do trig functions, until then gotta hard code it... */
    --shoulder_top_angle_cosine: 0.906307787036650;
    --shoulder_top_proportion: 0.08;
    --shoulder_top_height: calc(var(--shoulder_top_proportion) * var(--scaled_height));
    --shoulder_top_height_percent: 8;
    --shoulder_top_inset: calc(50% * calc(1 - calc(var(--top_radius_percent) / var(--radius_percent))));
    
    --top_radius: calc(var(--radius) - calc(var(--shoulder_top_height) * var(--shoulder_top_angle_sine)));
    --top_radius_percent: calc(var(--radius_percent) - calc(var(--shoulder_top_height_percent) * var(--shoulder_top_angle_sine)));
    --top_offset: calc(var(--shoulder_top_height) * var(--shoulder_top_angle_cosine));
    
    --shoulder_bottom_angle: 45deg;
    --shoulder_bottom_angle_sine: 0.707106781186547;
    --shoulder_bottom_angle_cosine: 0.707106781186548;
    --shoulder_bottom_proportion: 0.025;
    --shoulder_bottom_height: calc(var(--shoulder_bottom_proportion) * var(--scaled_height));
    --shoulder_bottom_height_percent: 2.5;
    --shoulder_bottom_inset: calc(50% * calc(1 - calc(var(--bottom_radius_percent) / var(--radius_percent))));
    
    --bottom_radius: calc(var(--radius) - calc(var(--shoulder_bottom_height) * var(--shoulder_bottom_angle_sine)));
    --bottom_radius_percent: calc(var(--radius_percent) - calc(var(--shoulder_bottom_height_percent) * var(--shoulder_bottom_angle_sine)));
    --bottom_offset: calc(var(--shoulder_bottom_height) * var(--shoulder_bottom_angle_cosine));
    
    height: var(--scaled_height);
    width: var(--scaled_width);
    margin: 0 auto;
    padding-top: calc(calc(var(--scaled_height) * 0.1) + 35px);
    box-sizing: border-box;
    transform-style: preserve-3d;
    transform-origin: center;
    transform: perspective(1000px) rotateX(var(--x_tilt_deg)) rotateY(var(--y_spin_deg));
}
.can_label_slice {
    position: absolute;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: var(--slice_width);
    height: 100%;
    border-top: grey 1px solid;
    border-bottom: grey 1px solid;
    transform-style: preserve-3d;
    transform-origin: center;
    transform: rotateY(var(--deg)) translateZ(var(--radius));
}
/* Shading effect, removed due to performance hit */
/*.can_label_slice::before {
    --spin_offset_1: calc(calc(360 - var(--deg_val)) - var(--y_spin_val));
    --spin_offset_1_abs: max(var(--spin_offset_1), calc(-1 * var(--spin_offset_1)));
    --spin_offset_2: calc(var(--deg_val) + calc(2 * var(--y_spin_val)));
    --spin_offset_3: calc(calc(720 - var(--deg_val)) - var(--y_spin_val));
    --spin_offset: min(var(--spin_offset_1_abs), var(--spin_offset_2), var(--spin_offset_3)); 
    
    content: ""; *//* Required, otherwise it won't display *//*
    height: 100%;
    width: 100%;
    background: rgb(256,256,256,calc(var(--spin_offset) / 360));
    display: block;
}*/
.can_faces {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background: lightgrey;
    transform-origin: center;
}
#can_top {
    height: calc(2 * var(--top_radius));
    width: calc(2 * var(--top_radius));
    transform: rotateX(90deg) translateZ(calc(var(--top_offset) + var(--top_radius)));
}
#can_bottom {
    height: calc(2 * var(--bottom_radius));
    width: calc(2 * var(--bottom_radius));
    transform: rotateX(-90deg) translateZ(calc(var(--bottom_offset) + calc(var(--scaled_height) - var(--bottom_radius))));
}
.can_top_shoulder {
    position: absolute;
    left: 0;
    right: 0;
    width: var(--slice_width);
    height: var(--shoulder_top_height);
    margin-left: auto;
    margin-right: auto;
    background: lightgrey;
    border-top: grey 1px solid;
    transform-origin: bottom;
    
    transform: rotateY(var(--deg)) translateZ(var(--radius)) translateY(calc(-1 * var(--shoulder_top_height))) rotateX(var(--shoulder_top_angle));
    
-webkit-clip-path: polygon(var(--shoulder_top_inset) 0%, calc(100% - var(--shoulder_top_inset)) 0%, 100% 100%, 0% 100%);
        clip-path: polygon(var(--shoulder_top_inset) 0%, calc(100% - var(--shoulder_top_inset)) 0%, 100% 100%, 0% 100%);     
}
.can_bottom_shoulder {
    position: absolute;
    left: 0;
    right: 0;
    width: var(--slice_width);
    height: var(--shoulder_bottom_height);
    margin-left: auto;
    margin-right: auto;
    background: lightgrey;
    border-bottom: gray 1px solid;
    transform-origin: top;
    
    transform: rotateY(var(--deg)) translateZ(var(--radius)) translateY(var(--scaled_height)) rotateX(calc(-1 * var(--shoulder_bottom_angle)));
    
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--shoulder_bottom_inset)) 100%, var(--shoulder_bottom_inset) 100%);
        clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--shoulder_bottom_inset)) 100%, var(--shoulder_bottom_inset) 100%); 
}
@keyframes animate {
    from {
        transform: perspective(1000px) rotateX(var(--x_tilt_deg)) rotateY(var(--y_spin_deg));
    }
    to {
        transform: perspective(1000px) rotateX(var(--x_tilt_deg)) rotateY(calc(var(--y_spin_deg) - 360deg));
    }
}
#controls_container {
    display: none;
    z-index: 200;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 250ms;
}
#start_stop_spinner_button {
    position: absolute;
    top: 15px;
    left: 15px;
}
#x_tilt_slider_container {
    position: absolute;
    right: 30px;
    bottom: 20px;
    transform-origin: right;
    transform: rotate(90deg);
}
#x_tilt {
    direction: rtl;
}
.x_tilt_slider_label {
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    font-size: 6pt;
    font-family: monospace;
    color: gray;
    transform: rotate(-90deg)
}
#y_spin_slider_container {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.y_spin_slider_label {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    font-size: 6pt;
    font-family: monospace;
    color: gray;
}
.right_float {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
}
#zoom_slider_container {
    position: absolute;
    left: 30px;
    bottom: 20px;
    transform-origin: left;
    transform: rotateZ(-90deg);
}
.zoom_slider_label {
    display: inline-block;
    vertical-align: top;
    width: 3.5px;
    font-size: 6pt;
    font-family: monospace;
    color: gray;
    transform: rotate(90deg)
}
#release {
    font-style: italic;
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 5pt;
    font-family: monospace;
    color: rgb(0,0,0,0.3);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~ SPECIFIC STYLE ATTRIBUTES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
:root {
    --fade-time: 500ms;
}
.fade {
    transition: opacity var(--fade-time);
}
.hover_pointer:hover {
    cursor: pointer;
}
#header {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}
#home_button {
    padding: 5px;
    margin: -5px;
    fill: #595959;
}
#show_beer_list_button {
    margin: -5px 0;
    padding: 5px;
    color: #595959;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 5px;
    overflow-x: hidden;
    overflow-x: clip;
}
.hamburger_menu {
    font-weight: normal;
    font-size: 15pt;
}
#previous_beer_button,
#next_beer_button {
    display: inline-block;
}
.change_beer_button_text {
    font-family: 'myJosefinSans';
    font-weight: bold;
    fill: antiquewhite;
}
#home_button_hover_text {
    display: none;
    left: 30px;
}
#beer_list {
    display: none;
    z-index: 100;
    background: rgb(250,250,250,1.0);
    position: absolute;
    height: 0;
    text-align: left;
    overflow-y: hidden;
    overflow-y: clip; /*Not much support yet for clip, hidden above for fall-back*/
    right: 0;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
    transition: height 250ms;
}
.dropdown_header {
    font-weight: bold;
    padding: 8px 5px 0;
    font-size: 9pt;
    border-bottom: grey 2px solid;
}
.dropdown_content {
    padding: 3px 5px 3px;
    border-bottom: lightgrey 1px solid;
}
.highlight_yellow {
    background: rgb(250,250,250,1.0);
}
.highlight_yellow:hover {
    background: yellow;
}
.beer_list_item {
    text-decoration: none;
    display: block;   
    color: #595959;
}
.item_beer_name {
    display: inline;
    margin-right: 5px;
}
.item_beer_style {
    display: inline;
    font-size: 8pt;
    color: grey;
}
#block_1 {
    display: flex;
}
#block_2 {
    margin-left: 4px;
    min-width: 150px;
}
#block_3 {
    max-width: 500px;
    width: 100%;
    padding: 8px 8px 0;
    border-top: 1px #9e9e9e solid;
}
#block_4 {
    display: flex;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
    max-width: 500px;
    width: 100%;    
}
#block_5 {
    display: flex;
    flex-wrap: wrap;
}
#label_viewer_button {
    margin: 15px 5px 0 auto;
    font-size: 8pt;
    text-decoration: none;
    color: #595959;
    fill: #595959;
}
#label_viewer_button_text {
    display: inline-block;
}
#name {
    margin: 0;
    width: 100%;
    max-width: 500px;
    padding: 0 8px 5px;
    margin-bottom: 10px;
    border-bottom: 1px #9e9e9e solid;
    max-width: 500px;
    width: 100%;    
    font-size: 24pt;
    font-weight: bold;
    color: #595959;
}
#block_arrows {
    display: inline-block;
    margin-left: auto;
}
#style {
    font-size: 11pt;
    font-weight: bold;
    color: #595959;
    margin-bottom: 5px;
}
#image {
    max-width: 300px;
    max-height: 300px;
    position: relative;
}
.promo_image_unavailable {
    opacity: 0.5;
}
#image_unavailable_warning {
    display: none;
    position: absolute;
    font-family: 'myJosefinSans';
    font-weight: bold;
    opacity: 0.5;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
#description {
    font-size: 10pt;
    color: #595959;
    margin-bottom: 10px;
}
#supporting_info {
    margin: auto;
    padding-bottom: 15px;
}
#tasting_notes_label {
    font-size: 10pt;
    color: #595959;
    text-align: left;
    margin-bottom: 5px;
}
#tasting_notes {
    font-size: 9pt;
    color: #595959;
    margin: 0 0 8px 0;
    padding-left: 15px;
    list-style-type: none;
}
#tasting_notes > li:before {
    content: "\2012";
    position: absolute;
    margin-left: -10px;
}
li {
    padding-bottom: 5px;
}
#ABV {
    display: inline-block;
    font-size: 11pt;
    font-weight: bold;
    color: #595959;
    margin-bottom: 9px;
}
#ABV_label {
    font-size: 7pt;
    color: #A6A6A6;
    vertical-align: middle;
    margin-left: 5px;
}
#availability_message {
    display: none;
    position: absolute;
    right: 0;
    bottom: 40px;
    text-align: right;
    color: palevioletred;
}
#2_upcoming,
#3_seasonal_hiatus,
#4_no_longer_in_production {
    display: none;    
}
.link {
    display: inline-block;
    font-size: 8pt;
    text-decoration: none;
    margin-right: 15px;
}
.link_text {
    display: inline-block;
    margin: 4px 0 0 -2px;
    color: #595959;
    vertical-align: middle;
}
.icon {
    vertical-align: middle;
}
#upc_row {
    text-align: left;
}
#upc_label {
    display: flex;
    font-family: myJosefinSans;
    font-size: 8pt;
    font-weight: 400;
    text-decoration: underline;
    color: #595959;
    margin-left: 7px;
}
#upc {
    object-fit: cover;
    object-position: bottom;
    height: 42px;
    width: 109px;
    margin-bottom: 5px;
    transition: height 500ms, width 500ms, margin 500ms, padding 500ms, background 500ms;
}
.expand_condense_button {
    margin-left: auto;
    margin-right: 5px;
    line-height: 0;
}
#expand_condense_button_svg {
    fill: #595959;
}
#footer {
    display: flex;
    flex: 0;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    width: 100%;
    padding-bottom: 10px;
}
#inner_footer {
    display: flex;
    align-items: center;
}
#logo {
    fill: #595959;  
}
#address {
    font-size: 8pt;
    font-weight: bold;
    color: #595959;
    text-align: left;
    margin-left: 4px;
}
#inquiries {
    display: flex;
    flex-direction: column;
    font-size: 8pt;
    color: #595959;
    text-align: right;
    margin-left: auto;
}
#viewer_not_available {
    display: none;
}
#quote {
    text-align: end;
    font-size: 6pt;
    color: rgba(0, 0, 0, 0.2);
    padding: 5px 0 5px 130px;
}