.html-borrow {
font-family: 'ITC Quorum Std';
}
.html-borrow .form-field input,
.contact-true-submit {
pointer-events: none;
}
/* ## Font Imports
--------------------------------------------- */
@font-face {
font-family: 'ITC Quorum Std';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Light.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Light.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'ITC Quorum Std';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Black.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Black.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'ITC Quorum Std';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Book.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Book.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ITC Quorum Std';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Medium.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Medium.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'ITC Quorum Std';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Bold.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Bold.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/QuorumStd-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Light.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Light.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-RegularItalic.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-RegularItalic.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-RegularItalic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-BlackItalic.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-BlackItalic.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Black.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Black.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-LightItalic.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-LightItalic.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-BoldItalic.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-BoldItalic.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Medium.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Medium.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Regular.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Regular.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Bold.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Bold.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Cenzo Flare';
src: url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-MediumItalic.woff2') format('woff2'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-MediumItalic.woff') format('woff'),
url('https://pittsburghbrewing.com/wp-content/themes/pittsburgh-brewing-company/fonts/CenzoFlare-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
/* ## Animations
--------------------------------------------- */
@-webkit-keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@-ms-keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@-o-keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
/*fifty*/
@-webkit-keyframes fadeInUpfifty {
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:translateY(-50%);;transform:translateY(-50%);}
}
@-moz-keyframes fadeInUpfifty{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:translateY(-50%);;transform:translateY(-50%);}
}
@-ms-keyframes fadeInUpfifty{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:translateY(-50%);;transform:translateY(-50%);}
}
@-o-keyframes fadeInUpfifty{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:translateY(-50%);;transform:translateY(-50%);}
}
@keyframes fadeInUpfifty{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:translateY(-50%);;transform:translateY(-50%);}
}
.pbco-footer {
float: left;
width: 100%;
background-color: #000;
padding: 100px 0 150px;
overflow: hidden;
position: relative;
}
.footer-text {
color: #fff;
width: 400px;
max-width: 90%;
margin: 0 auto;
font-size: 30px;
font-weight: 900;
line-height: 1.3;
text-align: center;
letter-spacing: 1px;
}
.footer-signup {
width: 650px;
margin: 40px auto;
text-align: center;
max-width: 90%;
}
/* ## Blog Post
--------------------------------------------- */
.blog-hero {
height: 80vh;
}
.title-holder {
width: 450px;
max-width: 90%;
margin: 0 auto;
left: 0;
right: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
z-index: 25;
text-align: center;
color: #fff;
}
.title-holder h1:before {
top: 0;
}
.title-holder h1:after {
bottom: 0;
}
.title-holder h1:before,
.title-holder h1:after {
content: '';
position: absolute;
width: 40%;
margin: 0 auto;
left: 0;
right: 0;
height: 5px;
background-color: #fff;
}
.title-holder h1 {
position: relative;
padding: 25px 0 20px;
line-height: 1.3;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
transform: translateZ(0);
will-change: transform;
z-index: 2;
}
.bg:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
content: '';
}
.pub-date {
font-family: 'Cenzo Flare';
font-weight: bold;
}
.main-blog-body {
padding: 100px 0;
}
.blog-container {
width: 900px;
max-width: 90%;
margin: 0 auto;
}
.blog-intro {
width: 40%;
margin-right: 10%;
float: left;
}
.blog-main {
float: left;
width: 50%;
}
.blog-intro h2 {
line-height: 1.6;
position: relative;
padding-bottom: 30px;
}
.blog-intro h2:after {
content: '';
background-color: #ffa400;
left: 0;
height: 6px;
position: absolute;
bottom: 0;
width: 75px;
}
.pbco-main-container {
width: 950px;
margin: 0 auto;
max-width: 90%;
left: 0;
right: 0;
}
.related-holder {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.related-holder a {
text-decoration: none;
color: #000;
width: 22.75%;
margin-right: 3%;
padding-bottom: 75px;
position: relative;
}
.related-holder a:last-child,
.related-holder a:nth-child(4n) {
margin-right: 0;
}
.other-posts {
padding: 100px 0 250px;
}
.related-post-pub {
font-family: 'Cenzo Flare';
font-weight: normal;
font-size: 15px;
margin-bottom: 5px;
}
.related-post-image {
float: left;
width: 100%;
background: no-repeat center center / cover;
}
.square-maker {
padding-top: 100%;
width: 100%;
position: relative;
}
.rect-maker {
padding-top: 120%;
width: 100%;
}
.related-post-title {
font-size: 19px;
margin-top: 20px;
float: left;
width: 100%;
line-height: 1.3;
font-weight: 500;
}
.related-learn-more-button:before,
.related-learn-more-button:after {
content: '';
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 5px;
background-color: #000;
}
.related-learn-more-button:before {
top: 0;
}
.related-learn-more-button:after {
bottom: 0;
}
.related-learn-more-button {
position: absolute;
bottom: 0;
left: 0;
font-weight: 900;
text-transform: uppercase;
padding: 6px 0 1px;
}
/* ## Events
--------------------------------------------- */
.ui-datepicker-inline.ui-datepicker.ui-widget {
top: 100px;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}
.hidden-date-set,
.ui-datepicker-year {
display: none;
}
.ui-datepicker-title .ui-datepicker-year {
display: inline-block!important;
}
.ui-state-disabled {
opacity: 0;
visibility: hidden;
}
#calendar,
.calendar-day-breakdown {
width: 45%;
float: left;
}
#calendar {
margin-right: 10%;
}
#calendar th {
padding: 0;
}
.ui-datepicker-prev span,
.ui-datepicker-next span {
display: block;
width: 16px;
height: 100%;
text-indent: -9999px;
background-image: url(/wp-content/themes/pittsburgh-brewing-company/secret-sauce/assets/dark-arrow-left.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
overflow: hidden;
}
.ui-datepicker-next span {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ui-datepicker-prev, .ui-datepicker-next {
position: absolute;
top: -2px;
padding: 5px;
cursor: pointer;
}
.ui-datepicker-prev {
left: 0px;
padding-left: 0;
}
.ui-datepicker-next {
right: 0px;
padding-right: 0;
}
.ui-datepicker-title {
text-align: center;
font-size: 24px;
font-weight: 900;
letter-spacing: 0;
color: #000;
text-transform: uppercase;
margin-bottom: 35px;
}
.ui-datepicker-header {
position: relative;
}
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
text-align: center;
border: 0px!important;
font-weight: 700;
}
td a {
pointer-events: none!important;
}
tbody {
border: 0px!important;
}
.the-calendar {
background-color: #ffa400;
padding: 100px 0 60px;
min-height: calc(100vh - 131px);
}
.the-calendar,
.author-section {
margin-top: -3px;
}
td a {
color: #fff;
text-decoration: none;
}
td a:not(.ui-state-active) {
pointer-events: none!important;
}
.ui-state-active {
position: relative;
}
.ui-state-active a,
td.ui-state-active.highlight a {
position: relative;
color: #ffa400!important;
z-index: 2;
}
td.ui-state-active:before {
height: 40px;
width: 40px;
background-color: #000;
border-radius: 50%;
position: absolute;
content: '';
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 0;
margin: 0 auto;
right: 0;
z-index: 1;
}
td.highlight {
position: relative;
}
td.highlight .ui-state-default {
color: #000!important;
position: relative;
z-index: 5;
}
td.highlight.rounded-left:after {
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
margin-left: 5px;
}
td.highlight.rounded-right:after {
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
margin-right: 5px;
}
td.highlight:after {
height: 50px;
width: 100%;
background-color: #fff;
border-radius: 0;
position: absolute;
content: '';
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 0;
margin: 0 auto;
right: 0;
z-index: 0;
}
.individual-event {
display: flex;
display: -webkit-flex;
display: -moz-flex;
position: relative;
padding: 15px 0 20px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
.individual-event:first-child {
padding-top: 0px;
}
.individual-event:last-child {
border-bottom: 0px!important;
padding-bottom: 0px;
}
.individual-event:nth-last-child(n+3) ~ .individual-event:last-child {
margin-bottom: 200px;
}
.mid-dot {
font-size: 29px;
line-height: 14px;
position: relative;
top: 3px;
padding: 0 7px;
}
.event-small-desc {
font-size: 14px;
margin: 9px 0;
}
.date-area {
color: #ffa400;
text-align: center;
font-weight: bold;
align-items: center;
width: 69px;
justify-content: center;
margin-right: 26px;
}
.date-info {
width: 100%;
height: 69px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
background-color: #000;
}
.event-meta,
.event-title {
width: 100%;
}
.event-info-area {
width: calc(100% - 69px);
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
}
.connect a:hover {
color: #000;
}
.connect-day {
font-size: 23px;
line-height: 1;
margin-bottom: auto;
font-family: 'Cenzo Flare';
}
.connect-day-small {
font-size: 14px;
width: 100%;
float: left;
margin-bottom: auto;
}
.date-info {
margin: auto 0;
}
.event-time {
font-size: 13px;
background-color: #ffa400;
margin-top: auto;
width: 100%;
text-align: center;
line-height: 1;
padding: 7px 0;
}
.safari .event-time {
font-size: 11px;
}
.event-time a {
text-decoration: none;
color: #000;
}
.connect-month,
.connect-day,
.connect-year {
width: 100%;
float: left;
}
.connect-month {
margin-top: auto;
font-family: 'Cenzo Flare';
}
.connect-month,
.connect-year {
font-size: 15px;
}
.event-meta {
font-size: 15px;
letter-spacing: .5px;
font-family: 'Cenzo Flare';
font-weight: 500;
}
.event-title {
font-size: 28px;
margin: 0px 0 auto;
width: 100%;
font-weight: 500;
letter-spacing: 1px;
}
.learn-more-down {
color: #000;
text-decoration: none;
font-size: 15px;
font-weight: 900;
text-transform: uppercase;
display: flex;
display: -webkit-flex;
display: -moz-flex;
align-items: center;
}
.learn-more-down img {
margin-right: 5px;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
width: 20px;
}
.learn-more-down,
.event-title {
line-height: 1;
}
.infinite-post-flow.event {
padding-top: 75px;
}
.event-page-title {
width: 100%;
text-align: center;
text-transform: uppercase;
padding: 50px 0 100px;
}
.news-listing {
padding: 150px 0 0;
}
.featured-post .related-learn-more-button {
position: relative;
color: #000;
text-decoration: none;
padding: 12px 0 7px;
}
.featured-main {
width: 300px;
float: left;
margin-right: 75px;
padding-right: 14px;
margin-top: -40px;
}
.excerpt {
font-size: 15px;
margin: 29px 0 50px;
font-weight: 500;
}
.featured-main h2 {
margin-top: 25px;
position: relative;
padding-bottom: 20px;
}
.featured-main h2:after {
width: 75px;
background-color: #000;
position: absolute;
content: '';
height: 5px;
left: 0;
bottom: 0;
}
.feature-feature-image {
width: calc(100% - 375px);
float: left;
background: no-repeat center center / cover;
}
.feature-feature-maker {
width: 100%;
padding-top: 87%;
}
.featured-post,
.news-listing .related-holder {
float: left;
width: 100%;
}
.news-listing .related-holder {
padding: 100px 0 0;
}
.alm-reveal {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.alm-reveal a {
margin-bottom: 150px;
}
.alm-load-more-btn.done {
display: none!important;
}
.alm-btn-wrap {
width: 100%;
text-align: center;
float: left;
}
.alm-load-more-btn {
margin-bottom: 100px;
position: relative;
color: #ffa400;
text-decoration: none;
padding: 12px 0 7px;
background-color: transparent!important;
position: relative;
bottom: 0;
left: 0;
font-weight: 900;
text-transform: uppercase;
pointer-events: none;
}
.alm-load-more-btn:before,
.alm-load-more-btn:after {
content: '';
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 5px;
background-color: #ffa400;
}
.alm-load-more-btn:before {
top: 0;
}
.alm-load-more-btn:after {
bottom: 0;
}
/* ## Beer
--------------------------------------------- */
.beer-hero {
height: 80vh;
z-index: 2;
}
.beer-hero.blockhouse {
z-index: 5;
}
.beer-meta-bar {
height: 20vh;
z-index: 3;
border-top: 2px solid #000;
overflow: hidden;
}
.beer-canvas-logo {
width: 71%;
background: no-repeat center center / contain;
position: fixed;
z-index: 2;
left: -19%;
top: -9%;
}
.beer-canvas-logo.hidden {
display: none;
}
.beer-canvas-maker {
padding-top: 100%;
width: 100%;
}
.beer-side-holder {
width: 40%;
left: 60%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
position: absolute;
z-index: 4;
padding-right: 5%;
}
.beer-side-holder.fade-in {
-webkit-animation-name: fadeInUpfifty!important;
animation-name: fadeInUpfifty!important;
}
.beer-page-description {
width: 300px;
max-width: 100%;
font-size: 17px;
}
.beer-meta {
width: 800px;
max-width: 100%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.beer-meta-box {
width: 33%;
}
.square-innards {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
}
.beer-meta-number {
font-family: 'Cenzo Flare';
font-weight: 600;
font-size: 45px;
line-height: 1;
margin-bottom: 5px;
}
.beer-meta-item {
font-weight: 900;
letter-spacing: 1px;
font-size: 14px;
}
.percent {
font-size: 22px;
}
.instagram-break {
padding: 100px 0 150px;
}
.flexed {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.insta-grid {
width: 60%
}
.hashtag {
width: 40%;
}
.hashtag.fade {
opacity: 1!important;
}
.hashtag {
display: flex;
display: -webkit-flex;
display: -moz-flex;
justify-content: center;
align-items: center;
font-size: 25px;
font-weight: 500;
}
.instagram-tile {
width: 31%;
margin-right: 2%;
float: left;
margin-bottom: 2%;
}
.instagram-tile:nth-child(3n) {
margin-right: 0;
}
.instagram-tile .insta-maker {
padding-top: 100%;
}
.the-instagram-tile {
background: no-repeat center center / cover;
}
.big-beer-break {
padding: 150px 0;
}
.beer-posts {
padding: 150px 0;
}
.bad {
width: 100%;
position: relative;
height: 100%;
min-height: 100%!important;
outline: none!important;
}
.bad-background {
background: no-repeat center center / cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
z-index: 1;
}
.bad-roller .slick-list,
.bad-roller .slick-track {
height: 100%;
}
.bad-roll-container {
height: 100vh;
float: left;
position: relative;
width: 100%;
}
.the-image-grid {
padding: 100px 0;
}
.the-image-grid.atop {
z-index: 10;
}
.image-grid-container {
margin: 0 auto;
width: 90%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
position: relative;
}
.image-grid-image {
background: no-repeat center center / cover;
}
.image-grid-image:first-child {
width: 45%;
}
.image-grid-image:first-child .image-grid-image-maker {
padding-top: 121%;
}
.image-credit {
background-color: #000;
color: #fff;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
padding: 4px 9px;
line-height: 1;
font-family: 'Cenzo Flare';
font-size: 14px;
}
.image-grid-image:nth-child(2),
.image-grid-image:nth-child(3) {
width: 23%;
left: 47%;
height: 48%;
position: absolute;
}
.image-grid-image:nth-child(4) {
position: absolute;
height: 100%;
left: 72%;
width: 28%;
}
.image-grid-image:nth-child(3) {
top: 52%;
}
.video {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.video-bg {
background: center center no-repeat;
background-size: cover;
width: 100%;
float: left;
height: 100%;
margin: 0 auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.video-bg video {
height: 100%;
object-fit: cover!important;
}
.video-bg .video-file {
z-index: 3;
position: relative;
}
.nav {
position: absolute;
z-index: 20;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
top: 50%;
width: 39px;
cursor: pointer;
}
.nav-left {
left: 5%;
}
.nav-right {
right: 5%;
}
.bad:hover .bad-hover {
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
opacity: .5;
}
.bad-hover {
height: 100%;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: '';
background-color: #000;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.bad-on-top {
position: absolute;
width: 244px;
max-width: 37%;
z-index: 100;
left: 50%;
top: 50%;
transform: translate(-30%,-50%);
-ms-transform: translate(-30%,-50%);
-webkit-transform: translate(-30%,-50%);
-moz-transform: translate(-30%,-50%);
-o-transform: translate(-30%,-50%);
}
.atop {
z-index: 3;
background-color: #fff;
}
.fade {
opacity: 0;
}
.fade-in {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 0.45s;
-moz-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.beer-can.effects-effect {
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
left: -150%;
}
.beer-can {
width: 32%;
position: relative;
z-index: 4;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
left: 0;
transition-delay: .5s;
}
.beer-quote {
width: 74%;
margin-left: -6%;
position: relative;
z-index: 3;
}
.flexed.flexaligncenter {
align-items: center;
}
.flexed.justifycenter {
justify-content: center;
}
.beer-combo {
width: 650px;
max-width: 90%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
align-items: center;
}
.video-fallback {
display: none;
position: absolute;
height: 100%;
width: 100%;
content: '';
z-index: 10;
background: no-repeat center center / cover;
}
.bottles {
width: 50%;
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
background: no-repeat center center / contain;
}
.bottle-maker {
padding-top: 100%;
}
.block-beer {
float: left;
width: 50%;
text-align: center;
padding-bottom: 150px;
position: relative;
cursor: pointer;
}
.block-beer img {
width: 50%;
min-width: 200px;
margin: 70px auto 0;
}
.block-house-beers {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.top-half {
position: relative;
height: 80vh;
z-index: 2;
}
.top-half .beer-side-holder,
.beer-cal-andsuch .beer-side-holder {
left: 50%;
}
.top-half .beer-page-description {
width: 400px;
}
.top-half .beer-page-description.Light {
color: #fff;
}
.top-half .beer-page-description.Dark {
color: #000;
}
.seasonal-info {
position: absolute;
left: 0;
right: 0;
width: 55%;
margin: 0 auto;
bottom: 10%;
min-width: 234px;
max-width: 90%;
}
.beer-cal-andsuch {
height: 20vh;
z-index: 1;
background-color: #fff;
position: relative;
}
.bottle-holder {
width: 50%;
position: absolute;
height: 100%;
}
.bottle-holder img {
width: auto;
height: 100%;
bottom: -15%;
position: absolute;
right: 20%;
min-width: 234px;
}
.seasonal-info.Light {
color: #fff;
}
.seasonal-info.Dark {
color: #000;
}
.season-info:before,
.season-info:after {
content: '';
position: absolute;
height: 3px;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.block-beer:hover .season-info:before,
.block-beer:hover .season-info:after {
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
width: 50%;
}
.season-info:before {
top: 0;
}
.season-info:after {
bottom: 0;
}
.seasonal-info.Light .season-info:before,
.seasonal-info.Light .season-info:after {
background-color: #fff;
}
.seasonal-info.Dark .season-info:before,
.seasonal-info.Dark .season-info:after {
background-color: #000;
}
.season-info {
font-weight: 600;
letter-spacing: 1px;
font-size: 21px;
position: relative;
padding: 6px 0 1px;
margin-bottom: 5px;
}
.get-it {
font-weight: 600;
letter-spacing: 1px;
font-size: 13px;
text-transform: uppercase;
}
.beer-combo {
position: relative;
}
/*Old german*/
@-webkit-keyframes herm {
0% { -webkit-transform: translate(0,0) rotate(0deg); }
25% { -webkit-transform: translate(1px,-2px) rotate(3deg); }
50% { -webkit-transform: translate(0,0) rotate(0deg); }
75% { -webkit-transform: translate(-1px,2px) rotate(-3deg); }
100% { -webkit-transform: translate(0,0) rotate(0deg); }
}
@-moz-keyframes herm {
0% { -moz-transform: translate(0,0) rotate(0deg); }
25% { -moz-transform: translate(1px,-2px) rotate(3deg); }
50% { -moz-transform: translate(0,0) rotate(0deg); }
75% { -moz-transform: translate(-1px,2px) rotate(-3deg); }
100% { -moz-transform: translate(0,0) rotate(0deg); }
}
@-o-keyframes herm {
0% { -o-transform: translate(0,0) rotate(0deg); }
25% { -o-transform: translate(1px,-2px) rotate(3deg); }
50% { -o-transform: translate(0,0) rotate(0deg); }
75% { -o-transform: translate(-1px,2px) rotate(-3deg); }
100% { -o-transform: translate(0,0) rotate(0deg); }
}
.herm-bobble.herm-head {
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: .5s;
-webkit-transform-style: preserve-3d;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: .5s;
-moz-transform-style: preserve-3d;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-duration: .5s;
-o-transform-style: preserve-3d;
-webkit-animation-name: herm;
-moz-animation-name: herm;
-o-animation-name: herm;
}
.herm-head {
width: 200px;
position: absolute;
top: -124px;
z-index: 11;
left: 77px;
}
.herm-body {
width: 400px;
left: -52px;
bottom: -75px;
z-index: 10;
position: relative;
}
.herm-section .beer-quote {
margin-left: -174px;
}
.big-beer-break.herm-section {
padding: 200px 0 150px;
}
.beer-meta-gradient-transition {
position: absolute;
float: left;
content: '';
width: 100%;
height: 150%;
left: 0;
top: -50%;
right: 0;
z-index: 3;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .6), #fff)!important;
}
.alert-message {
background-color: #000;
color: #fff;
text-align: center;
padding: 5px 0 2px;
font-size: 13px;
text-transform: uppercase;
font-family: 'Cenzo Flare';
font-weight: 900;
}
/* ## Contact
--------------------------------------------- */
.contact-main-section {
height: 100vh;
}
.pbco-contact-container {
margin: 0 auto;
width: 90%;
left: 0;
right: 0;
position: relative;
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.pbco-contact-container .bg-wrap {
height: auto;
top: 20px;
bottom: 20px;
}
.photo-half,
.form-half-container {
width: 50%;
}
.form-half-container {
min-height: 100vh;
}
.form-half-container {
padding: 0 50px 0;
position: relative;
}
.form-half-container .wpcf7 {
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
position: absolute;
}
.pbco-contact-container .bg-wrap,
.pbco-contact-container .bg {
width: 50%;
}
.pbco-contact-container .bg:before {
display: none;
}
.form-half {
width: 48%;
float: left;
margin-bottom: 50px;
}
.form-full {
float: left;
width: 100%;
}
.form-half.first {
margin-right: 4%;
}
.pbco-contact-page .site-footer {
display: none!important;
}
.form-half input,
.form-half select.active {
color: #ffa400;
}
.form-half input,
.form-half select {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 4px solid #000;
padding: 0 0px 2px;
border-radius: 0px!important;
appearance: none;
-webkit-appearance: none;
font-weight: 900;
letter-spacing: .5px;
outline: none!important;
}
.form-half input::-moz-placeholder {
color: #000;
opacity: 1;
}
.form-half input::-webkit-input-placeholder {
color: #000;
opacity: 1;
}
.form-full textarea {
border: 4px solid #000;
font-weight: 900;
letter-spacing: .5px;
height: 30vh;
color: #ffa400;
resize: none;
}
.form-full textarea::-moz-placeholder {
color: #000;
opacity: 1;
}
.form-full textarea::-webkit-input-placeholder {
color: #000;
opacity: 1;
}
.form-half select {
cursor: pointer;
}
.form-half select {
background-image: url(/wp-content/themes/pittsburgh-brewing-company/secret-sauce/assets/gold-arrow.svg);
background-repeat: no-repeat;
background-size: 25px;
background-position: top right;
}
.form-half select::-moz-placeholder {
color: #000;
opacity: 1;
}
.form-half select::-webkit-input-placeholder {
color: #000;
opacity: 1;
}
.form-full input[type="submit"] {
background-color: transparent!important;
color: #000;
text-decoration: none!important;
display: inline-block;
padding: 8px 3px 2px 3px;
text-transform: uppercase;
font-weight: 900;
position: relative;
letter-spacing: 1px;
font-size: 20px;
z-index: 10;
}
.form-full .submit-wrap:hover input[type="submit"] {
color: #fff;
}
.form-full .submit-wrap {
display: inline-block;
float: left;
position: relative;
margin-top: 30px;
}
.form-full .submit-wrap:hover:before {
height: 52%;
transition-duration: .5s;
}
.form-full .submit-wrap:hover:after {
height: 52%;
transition-duration: .5s;
}
.form-full .submit-wrap:before {
content: '';
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 4px;
transition-duration: .5s;
background-color: #000;
}
.form-full .submit-wrap:after {
content: '';
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 4px;
transition-duration: .5s;
background-color: #000;
bottom: 0;
}
div.wpcf7 .ajax-loader {
display: none!important;
}
.pbco-contact-page form span.wpcf7-not-valid-tip {
color: #ffa400;
font-family: 'Cenzo Flare';
font-weight: 900;
}
.pbco-contact-page .wpcf7-response-output.wpcf7-validation-errors {
display: none!important;
}
.pbco-contact-page .wpcf7-response-output {
border: 0px!important;
background-color: #000!important;
float: left;
width: 100%;
text-align: center;
color: #fff;
}
/*Form Loading Indicator*/
.dot_loader {
display: block;
margin: 0 auto;
position: relative;
width: 100%;
text-align: left;
}
.dot {
display: inline-block;
margin:0 5px;
width:10px;
height: 10px;
border-radius: 50%;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation: 1s infinite dot;
-webkit-animation: 1s infinite dot;
-moz-animation: 1s infinite dot;
-o-animation: 1s infinite dot;
}
.dot:nth-child(2) {
animation-delay: .1s;
-webkit-animation-delay: .1s
}
.dot:nth-child(3) {
animation-delay: .2s;
-webkit-animation-delay: .2s;
}
@keyframes dot {
0% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
30% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
50% {transform:translateY(25px) scale(1.8); -moz-transform:translateY(25px) scale(1.8); background-color:#000; -webkit-transform:translateY(25px) scale(1.8); -o-transform:translateY(25px) scale(1.8);}
70% {transform:translateY(-15px) scale(.8); -webkit-transform:translateY(-15px) scale(.8); -moz-transform:translateY(-15px) scale(.8); -o-transform:translateY(-15px) scale(.8); background-color:#000;}
100% {transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
}
@-webkit-keyframes dot {
0% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
30% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
50% {transform:translateY(25px) scale(1.8); -moz-transform:translateY(25px) scale(1.8); background-color:#000; -webkit-transform:translateY(25px) scale(1.8); -o-transform:translateY(25px) scale(1.8);}
70% {transform:translateY(-15px) scale(.8); -webkit-transform:translateY(-15px) scale(.8); -moz-transform:translateY(-15px) scale(.8); -o-transform:translateY(-15px) scale(.8); background-color:#000;}
100% {transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
}
@-moz-keyframes dot {
0% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
30% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
50% {transform:translateY(25px) scale(1.8); -moz-transform:translateY(25px) scale(1.8); background-color:#000; -webkit-transform:translateY(25px) scale(1.8); -o-transform:translateY(25px) scale(1.8);}
70% {transform:translateY(-15px) scale(.8); -webkit-transform:translateY(-15px) scale(.8); -moz-transform:translateY(-15px) scale(.8); -o-transform:translateY(-15px) scale(.8); background-color:#000;}
100% {transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
}
@-o-keyframes dot {
0% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
30% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
50% {transform:translateY(25px) scale(1.8); -moz-transform:translateY(25px) scale(1.8); background-color:#000; -webkit-transform:translateY(25px) scale(1.8); -o-transform:translateY(25px) scale(1.8);}
70% {transform:translateY(-15px) scale(.8); -webkit-transform:translateY(-15px) scale(.8); -moz-transform:translateY(-15px) scale(.8); -o-transform:translateY(-15px) scale(.8); background-color:#000;}
100% {transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
}
@-ms-keyframes dot {
0% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
30% {transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
50% {transform:translateY(25px) scale(1.8); -moz-transform:translateY(25px) scale(1.8); background-color:#000; -webkit-transform:translateY(25px) scale(1.8); -o-transform:translateY(25px) scale(1.8);}
70% {transform:translateY(-15px) scale(.8); -webkit-transform:translateY(-15px) scale(.8); -moz-transform:translateY(-15px) scale(.8); -o-transform:translateY(-15px) scale(.8); background-color:#000;}
100% {transform:translateY(0) scale(1); -webkit-transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); background-color:#ffa400;}
}
/* ## Home
--------------------------------------------- */
.home-slides {
width: 100%;
float: left;
height: 80vh;
z-index: 99;
}
.color-background {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
}
/*
.home-slides.slick-slider .slick-track,
.home-slides.slick-slider .slick-list {
transform: none!important;
-ms-transform: none!important;
-webkit-transform: none!important;
-moz-transform: none!important;
-o-transform: none!important;
}
*/
.home-hero {
overflow: hidden;
background-color: #fff;
}
.beer-background {
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
z-index: 3;
}
.home-slide {
width: 100%;
position: relative;
height: 100%;
min-height: 100%!important;
outline: none!important;
}
.home-hero .slick-list,
.home-hero .slick-track {
height: 100%;
overflow: visible!important;
}
.the-beer-menu-selector {
height: 20vh;
float: left;
width: 100%;
background-color: #fff;
border-top: 3px solid #000;
}
.timeline {
background-color: #ffa400;
z-index: 1000;
-webkit-transform: translate3d(0,0,0)!important;
transform: translate3d(0,0,0)!important;
}
.timeline.fixed {
position: fixed;
}
.beer-menu-item {
float: left;
width: 16.6666666667%;
height: 100%;
position: relative;
}
.beer-menu-item .clicker {
position: absolute;
top:0;
right: 0;
left: 0;
bottom: 0;
z-index: 100;
cursor: pointer;
}
.beer-logo,
.beer-logo-hover {
height: 90%;
width: 90%;
top: 50%;
margin: 0 auto;
left: 0;
right: 0;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
z-index: 1;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.beer-logo-hover {
opacity: 0;
}
.background-hover {
z-index: 0;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
content: '';
opacity: 0;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.clicker:hover + .beer-holder .beer-logo,
.beer-menu-item.active .beer-logo {
opacity: 0;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.clicker:hover + .beer-holder .background-hover,
.beer-menu-item.active .background-hover {
opacity: 1;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.clicker:hover + .beer-holder .beer-logo-hover,
.beer-menu-item.active .beer-logo-hover {
opacity: 1;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.home-slide-text {
position: absolute;
transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
-webkit-transform: translate(-100%, -50%);
-moz-transform: translate(-100%, -50%);
-o-transform: translate(-100%, -50%);
z-index: 101;
font-weight: 500;
line-height: 2;
width: 500px;
padding-right: 80px;
max-width: 90%;
left: 50%;
top: 56%;
}
.timeline-container {
width: 1200px;
margin: 0 auto;
max-width: 85%;
}
.timeline-year {
display: none;
}
.timeline-slide.active .timeline-year {
display: block;
}
#slides {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0px;
}
.timeline-slide,
.regular-timeline-holder {
height: 79vh;
position: absolute;
margin: 0 auto;
max-width: 85%;
width: 1200px;
left: 0;
right: 0;
top: 11vh;
overflow: hidden;
}
.regular-timeline-holder.timeline-holder2 {
top: 150vh!important;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.regular-timeline-holder.timeline-holder2.active {
top: 11vh!important;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide {
z-index: 2;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.regular-timeline-holder {
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.regular-timeline-holder .timeline-slide-white {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background-color: #fff;
content: '';
}
.regular-timeline-holder .timeline-slide-black {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background-color: #000;
content: '';
}
.timeline-half.image {
height: 100%;
position: absolute;
left: 0;
width: 50%;
overflow: hidden;
}
.timeline-half.text {
width: 50%;
position: absolute;
right: 0;
height: 100%;
overflow: hidden;
}
.timeline-slide.active .the-timeline-text {
top: 50%;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide.inactive .the-timeline-text {
top: -150%;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide.inactive.push-up .the-timeline-text,
.timeline-slide.inactive.push-up .timeline-half.image img {
top: 50%!important;
}
.the-timeline-text {
position: absolute;
top: 150%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 60%;
color: #fff;
font-size: 22px;
font-weight: 500;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide.active .timeline-half.image img {
top: 50%;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide.inactive .timeline-half.image img {
top: 150%;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-half.image img {
position: absolute;
width: 50%;
left: 0;
right: 0;
margin: 0 auto;
top: -150%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-year {
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 0;
right: 0;
padding-top: 7px;
margin: 0 auto;
text-align: center;
width: 88px;
height: 88px;
line-height: 1;
background-color: #fff;
z-index: 11;
border: 7px solid #000;
}
.timeline-year span {
font-size: 34px;
margin: 0 3px;
color: #000;
font-weight: 900;
line-height: 1;
}
.backdrop-logo {
position: absolute;
left: 50%;
top: 56%;
height: 70%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
z-index: 2;
}
.home-slide-text.Light {
color: #fff;
}
.home-slide-text.Dark {
color: #000;
}
.home-slide-text a {
text-decoration: none!important;
display: inline-block;
padding: 7px 3px 1px 3px;
text-transform: uppercase;
font-weight: 900;
position: relative;
letter-spacing: 1px;
}
.home-slide-text a:hover:before {
height: 52%;
transition-duration: .5s;
}
.home-slide-text a:hover:after {
height: 52%;
transition-duration: .5s;
}
.home-slide-text span {
z-index: 3;
position: relative;
}
.home-text-area {
padding-left: 3px;
margin-bottom: 11px;
position: relative;
float: left;
font-size: 16px;
line-height: 28px;
font-weight: 600;
}
.home-slide-text.Light a:before,
.home-slide-text.Light a:after {
background-color: #fff;
}
.home-slide-text.Dark a:before,
.home-slide-text.Dark a:after {
background-color: #000;
}
.home-slide-text a:before {
top: 0;
}
.home-slide-text a:after {
bottom: 0;
}
.home-slide-text a:before,
.home-slide-text a:after {
content: '';
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 4px;
transition-duration: .5s;
}
.home-slide-text.Light a {
color: #fff;
}
.home-slide-text.Dark a {
color: #000;
}
.home-text-area h2 {
font-weight: 900;
color: #ffa400;
font-size: 43px;
line-height: 1;
}
.mobile-hero-text h2 {
font-weight: 900;
color: #ffa400;
font-size: 36px;
line-height: 1;
margin-bottom: 5px;
}
.mobile-hero-text {
font-weight: 500;
line-height: 1.5;
z-index: 4;
position: relative;
font-size: 19px;
margin: 0 auto;
width: 500px;
max-width: 80%;
padding-bottom: 13vh;
}
.mobile-hero-pbco-logo-holder {
width: 500px;
margin: 0 auto;
text-align: center;
max-width: 80%;
padding: 5vh 0 7vh;
}
.pbco-mobile-crest {
width: 50%;
margin: 0 auto;
min-width: 185px;
}
.mobile-beer-selector {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.mobile-beer-hero {
position: relative;
}
.home-page .faux-touch-menu-logo {
left: 50px;
position: absolute;
}
.home-page .mobile-logo-holder {
left: 0;
right: 0;
}
.home-page .pbco-footer .mobile-logo-holder {
display: none!important;
}
.home-page .the-logo-menu {
left: 50px;
right: auto;
position: absolute;
}
.home-page .mobile-mobile.mobile {
right: -100px!important;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.home-page .home-logo-mobile.mobile img {
left: -100px!important;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.home-page .popover .mobile-mobile.open {
z-index: 5001!important;
}
.home-page .site-inner .mobile-mobile.open {
z-index: 1!important;
}
.home-page .mobile-mobile,
.home-logo-mobile {
z-index: 5000!important;
}
.home-page .mobile-mobile, .home-logo-mobile {
display: none;
}
.home-logo-mobile img {
width: 50px;
position: fixed;
top: 0;
left: 10px;
top: 10px;
cursor: pointer;
z-index: 1001;
-webkit-transform: translate3d(0,0,0)!important;
transform: translate3d(0,0,0)!important;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.beer-logo-mobile {
background: no-repeat center center / contain;
height: 80%;
position: absolute;
width: 80%;
margin: 0 auto;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
top: 50%;
left: 0;
right: 0;
bottom: 0;
}
.mobile-beer {
width: 50%;
}
.mobile-beer-logo {
width: 100%;
padding-top: 100%;
position: relative;
}
.the-beers {
position: absolute;
top: 0;
width: 100%;
right: -100%;
bottom: 0;
height: 110%;
z-index: 99;
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.home-slide.slick-active .the-beers {
right: 0%;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.home-slide.prev .the-beers {
right: 200%;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.trigger {
position: absolute;
left: 0;
right: 0;
content: '';
}
.frame-top,
.frame-left,
.frame-right,
.frame-bottom {
position: absolute;
z-index: 3;
content: '';
background-color: #ffa400;
}
.frame-top,
.frame-bottom {
height: 6px;
width: 95%;
margin: 0 auto;
left: 0;
right: 0;
}
.frame-top {
top: 2.5%;
}
.frame-bottom {
bottom: 2.5%;
}
.frame-left,
.frame-right {
height: 95%;
width: 6px;
}
.frame-left {
left: 2.5%;
top: 2.5%;
}
.frame-right {
right: 2.5%;
top: 2.5%;
}
.timeline-slide.solid-yellow {
top: 100vh;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide.solid-yellow.active {
top: 11vh;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide.solid-yellow.inactive {
top: -150vh;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide.solid-yellow {
background-color: #ffa400;
z-index: 3;
}
.timeline-slide.solid-yellow .slide-text {
width: 721px;
margin: 0 auto 50px;
max-width: 100%;
font-size: 65px;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.2;
color: #fff;
text-align: center;
}
.timeline-image {
width: 500px;
margin: 0 auto;
max-width: 100%;
}
.text-based-holder {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.slide-text span {
color: #000;
}
.timeline-slide.inactive.push-up,
.regular-timeline-holder.push-up {
top: -150vh;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.regular-timeline-holder.timeline-holder2.push-up.active {
top: -150vh!important;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-bar {
position: absolute;
left: 50%;
height: 91vh;
top: 5vh;
background-color: #000;
content: '';
width: 6px;
transition-delay: .3s;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.timeline-slide.solid-yellow.regular .slide-text {
font-size: 35px;
color: #000;
}
.timeline-slide.solid-yellow.regular .slide-text span {
color: #fff;
}
.timeline-bar.short {
height: 84vh;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
/* # Common Classes
---------------------------------------------------------------------------------------------------- */
/* ## Avatar
--------------------------------------------- */
.avatar {
border-radius: 50%;
float: left;
}
.author-box .avatar,
.alignleft .avatar {
margin-right: 24px;
}
.alignright .avatar {
margin-left: 24px;
}
.comment .avatar {
margin: 0 16px 24px 0;
}
/* ## Genesis
--------------------------------------------- */
.breadcrumb {
background-color: #fff;
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 1px;
padding: 12px 30px;
}
.after-entry,
.archive-description,
.author-box {
background-color: #fff;
font-size: 18px;
font-size: 1.8rem;
margin-bottom: 40px;
padding: 60px;
}
.archive-description p:last-child,
.author-box p:last-child {
margin-bottom: 0;
}
/* ## Search Form
--------------------------------------------- */
.search-form {
overflow: hidden;
}
.entry-content .search-form,
.site-header .search-form {
margin-bottom: 40px;
width: 50%;
}
.site-header .search-form {
float: right;
margin: 12px auto 0;
}
.post-password-form input[type="submit"],
.search-form input[type="submit"] {
margin-top: 10px;
}
.genesis-nav-menu .search input[type="submit"],
.widget_search input[type="submit"] {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
}
/* ## Titles
--------------------------------------------- */
.archive-description .entry-title,
.archive-title,
.author-box-title {
font-size: 20px;
font-size: 2rem;
}
.entry-title {
font-size: 36px;
font-size: 3.6rem;
}
.entry-title a,
.sidebar .widget-title a {
color: #333;
text-decoration: none;
}
.entry-title a:focus,
.entry-title a:hover {
color: #c3251d;
}
.widget-title {
font-size: 18px;
font-size: 1.8rem;
margin-bottom: 20px;
}
/* ## WordPress
--------------------------------------------- */
a.aligncenter img {
display: block;
margin: 0 auto;
}
a.alignnone {
display: inline-block;
}
.alignleft {
float: left;
text-align: left;
}
.alignright {
float: right;
text-align: right;
}
a.alignleft,
a.alignnone,
a.alignright {
max-width: 100%;
}
img.centered,
.aligncenter {
display: block;
margin: 0 auto 24px;
}
img.alignnone,
.alignnone {
margin-bottom: 12px;
}
a.alignleft,
img.alignleft,
.wp-caption.alignleft {
margin: 0 24px 24px 0;
}
a.alignright,
img.alignright,
.wp-caption.alignright {
margin: 0 0 24px 24px;
}
.gallery-caption,
.wp-caption-text {
font-size: 14px;
font-size: 1.4rem;
font-weight: 600;
margin: 0;
text-align: center;
}
.entry-content p.wp-caption-text {
margin-bottom: 0;
}
.entry-content .wp-audio-shortcode,
.entry-content .wp-playlist,
.entry-content .wp-video {
margin: 0 0 28px;
}
/* # Widgets
---------------------------------------------------------------------------------------------------- */
.widget {
margin-bottom: 40px;
word-wrap: break-word;
}
.widget p:last-child,
.widget ul > li:last-of-type,
.widget-area .widget:last-of-type {
margin-bottom: 0;
}
.widget ul > li {
margin-bottom: 10px;
padding-bottom: 10px;
}
.widget ul > li:last-of-type {
padding-bottom: 0;
}
.widget ol > li {
list-style-position: inside;
list-style-type: decimal;
padding-left: 20px;
text-indent: -20px;
}
.widget li li {
border: 0;
margin: 0 0 0 30px;
padding: 0;
}
.widget_calendar table {
width: 100%;
}
.widget_calendar td,
.widget_calendar th {
text-align: center;
}
/* ## Featured Content
--------------------------------------------- */
.featured-content .entry {
background: none;
padding: 0;
}
.featured-content .entry:last-of-type {
margin-bottom: 0;
}
.featured-content .entry-title {
font-size: 20px;
font-size: 2rem;
}
/* # Plugins
---------------------------------------------------------------------------------------------------- */
/* ## Genesis eNews Extended
--------------------------------------------- */
.sidebar .enews-widget,
.sidebar .enews-widget .widget-title {
color: #fff;
}
.sidebar .widget.enews-widget {
background-color: #333;
}
.sidebar .enews-widget input,
.sidebar .enews-widget input:focus {
border: 1px solid #333;
}
.sidebar .enews-widget input[type="submit"] {
background-color: #c3251d;
color: #fff;
}
.sidebar .enews-widget input[type="submit"]:focus,
.sidebar .enews-widget input[type="submit"]:hover {
background-color: #fff;
color: #333;
}
.enews-widget input {
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 16px;
}
.enews-widget input[type="submit"] {
margin: 0;
width: 100%;
}
.enews form + p {
margin-top: 24px;
}
/* ## Jetpack
--------------------------------------------- */
#wpstats {
display: none;
}
/* # Skip Links
---------------------------------------------------------------------------------------------------- */
.genesis-skip-link {
margin: 0;
}
.genesis-skip-link li {
height: 0;
list-style: none;
width: 0;
}
/* # Site Header
---------------------------------------------------------------------------------------------------- */
.mobile-mobile,
.home-logo-mobile,
.mobile-logo-mobile,
.mobile-logo-holder {
display: none!important;
}
/* # Site Navigation
---------------------------------------------------------------------------------------------------- */
/* # Content Area
---------------------------------------------------------------------------------------------------- */
/* ## Entries
--------------------------------------------- */
.entry {
background-color: #fff;
margin-bottom: 40px;
padding: 70px 80px;
}
.entry-content ol,
.entry-content ul {
margin-bottom: 28px;
margin-left: 40px;
}
.entry-content ol > li {
list-style-type: decimal;
}
.entry-content ul > li {
list-style-type: disc;
}
.entry-content ol ol,
.entry-content ul ul {
margin-bottom: 0;
}
.entry-content code {
background-color: #333;
color: #eee;
}
/* ## Entry Meta
--------------------------------------------- */
p.entry-meta {
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 0;
}
.entry-header .entry-meta {
margin-bottom: 24px;
}
.entry-footer .entry-meta {
border-top: 1px solid #eee;
padding-top: 24px;
}
.entry-categories,
.entry-tags {
display: block;
}
.entry-comments-link::before {
content: "\2014";
margin: 0 6px 0 2px;
}
/* ## Pagination
--------------------------------------------- */
.pagination {
clear: both;
margin: 40px 0;
}
.adjacent-entry-pagination {
margin-bottom: 0;
}
.archive-pagination li {
display: inline;
}
.archive-pagination a {
background-color: #fff;
color: #333;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-size: 1.6rem;
font-weight: 600;
padding: 8px 12px;
text-decoration: none;
}
.archive-pagination a:focus,
.archive-pagination a:hover,
.archive-pagination .active a {
background-color: #c3251d;
color: #fff;
}
/* ## Comments
--------------------------------------------- */
.comment-respond,
.entry-comments,
.entry-pings {
background-color: #fff;
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 40px;
}
.comment-respond,
.entry-pings {
padding: 60px 60px 32px;
}
.entry-comments {
padding: 60px;
}
.comment-list li {
padding: 40px 0 0 30px;
}
.comment-list .depth-1 {
padding-left: 0;
}
.comment-header {
margin-bottom: 30px;
}
.comment-content {
clear: both;
}
.comment-content ul > li {
list-style-type: disc;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 50%;
}
.comment-respond label {
display: block;
margin-right: 12px;
}
.comment-header p {
margin-bottom: 0;
}
.entry-pings .reply {
display: none;
}
/* # Sidebars
---------------------------------------------------------------------------------------------------- */
.sidebar {
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 40px;
}
.sidebar .widget {
background-color: #fff;
padding: 40px;
}
/* # Footer Widgets
---------------------------------------------------------------------------------------------------- */
.footer-widgets {
background-color: #fff;
clear: both;
font-size: 18px;
font-size: 1.8rem;
padding: 60px 0;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
width: 380px;
}
.footer-widgets-1 {
margin-right: 70px;
}
.footer-widgets-1,
.footer-widgets-2 {
float: left;
}
.footer-widgets-3 {
float: right;
}
/* # Site Footer
---------------------------------------------------------------------------------------------------- */
.site-footer {
position: relative;
float: left;
width: 100%;
z-index: 3;
}
.home-page .site-footer {
z-index: 1000;
-webkit-transform: translate3d(0,0,0)!important;
transform: translate3d(0,0,0)!important;
}
.site-footer {
overflow: hidden;
}
.pbco-footer {
float: left;
width: 100%;
background-color: #000;
padding: 100px 0 150px;
}
.site-footer p {
margin-bottom: 0;
}
.footer-text {
color: #fff;
width: 400px;
max-width: 90%;
margin: 0 auto;
font-size: 30px;
font-weight: 900;
line-height: 1.3;
text-align: center;
letter-spacing: 1px;
}
.form-field.third {
width: 31%;
float: left;
margin-right: 2%;
}
.form-field input {
background-color: transparent!important;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
border-left: 0px;
border-right: 0px;
color: #fff;
text-align: center;
font-size: 20px;
font-weight: 500;
padding: 8px 10px 6px;
border-radius: 0px!important;
}
.form-field input::-moz-placeholder {
color: #fff;
opacity: 1;
}
.form-field input::-webkit-input-placeholder {
color: #fff;
opacity: 1;
}
.form-field.third:last-of-type {
margin-right: 0;
}
.footer-signup {
width: 650px;
margin: 40px auto;
text-align: center;
max-width: 90%;
}
.footer-signup input[type="submit"] {
display: none!important;
}
.contact-true-submit {
margin: 25px 0;
cursor: pointer;
}
.beer-can-bottles {
width: 850px;
max-width: 90%;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: -98px;
z-index: 3;
}
.beer-can-bottle {
float: left;
width: 16.6666666667%;
position: relative;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
top: 0;
}
.beer-can-bottle:hover {
top: -39px;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.footer-signup .ajax-loader {
display: none!important;
}
.footer-signup span.wpcf7-not-valid-tip {
color: #fff!important;
font-family: 'Cenzo Flare';
font-weight: 900;
}
.the-form-fields {
float: left;
width: 100%;
}
.wpcf7-response-output {
border: 0px!important;
background-color: #fff!important;
}
.wpcf7-response-output.wpcf7-validation-errors {
display: inline-block!important;
}
/* # Media Queries
---------------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.home-slide-text {
left: 50px;
transform: translate(-0%, -50%);
-ms-transform: translate(-0%, -50%);
-webkit-transform: translate(-0%, -50%);
-moz-transform: translate(-0%, -50%);
-o-transform: translate(-0%, -50%);
}
}
@media (max-width: 990px) {
.timeline-slide, .regular-timeline-holder {
max-width: calc(100% - 20px);
}
}
@media (max-width: 951px) {
.home-slide-text {
width: 450px;
}
.the-timeline-text {
font-size: 18px;
}
.timeline-year {
width: 75px;
height: 75px;
}
.timeline-year span {
font-size: 25px;
}
.timeline-slide.solid-yellow .slide-text {
font-size: 41px;
}
.frame-top, .frame-bottom {
height: 4px;
}
.frame-left, .frame-right {
width: 4px;
}
}
@media (max-width: 900px) {
.photo-half {
display: none!important;
}
.form-half-container {
width: 500px;
max-width: 100%;
padding: 0;
margin: 0 auto;
}
}
@media (max-width: 875px) {
.home-text-area h2 {
font-size: 35px;
margin-bottom: 5px;
}
.home-text-area {
font-size: 14px;
line-height: 1.5;
}
}
@media only screen and (max-width: 860px) {
body,
body > div {
font-size: 18px;
font-size: 1.8rem;
}
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}
}
@media (max-width: 850px) {
.built-by-top-hat.desktop {
display: none;
}
.built-by-top-hat-2.mobile,
.built-by-top-hat-2 {
display: block;
}
.popover .beer-can-bottles {
bottom: -20%!important;
}
.pbco-footer .beer-can-bottles {
bottom: -12%;
}
.popover.open .beer-can-bottles {
bottom: -6%!important;
}
.blog-intro h2 {
font-size: 22px;
}
.home-slide-text {
width: 400px;
}
}
.mobile-hero {
display: none;
background-color: #fff;
}
.faux-touch-hamburger {
height: 23px;
width: 23px;
right: 10px;
display: none;
z-index: 5000;
position: fixed;
top: 3%;
cursor: pointer;
}
.faux-touch-logo {
display: none;
z-index: 5000;
height: 35px;
position: fixed;
width: 50px;
top: 3%;
left: 10px;
content: '';
cursor: pointer;
}
.beer-hero-inner {
float: left;
}
.alert-message.mobile {
display: none;
position: absolute;
left: 0;
right: 0;
width: 100%;
bottom: 0;
}
@media (max-width: 770px) {
.form-half input, .form-half select {
font-size: 14px;
border-bottom: 3px solid #000;
}
.form-full textarea {
border: 3px solid #000;
font-size: 14px;
}
.form-half {
margin-bottom: 38px;
}
.alert-message.desktop {
display: none;
}
.alert-message.mobile {
display: block;
}
.alert-message {
font-size: 10px;
display: inline-block;
padding: 5px 5px 2px;
}
.herm-head {
width: 151px;
position: absolute;
top: -76px;
z-index: 11;
left: 39px;
}
.herm-body {
width: 300px;
left: -52px;
bottom: -75px;
z-index: 10;
position: relative;
}
.big-beer-break.herm-section {
padding: 150px 0 150px;
}
.beer-meta {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}
.blockhouse-beer-renderer .beer-side-holder.fade-in {
-webkit-animation-name: fadeInUpfifty!important;
animation-name: fadeInUpfifty!important;
}
.top-half {
height: 350px;
}
.blockhouse-beer-renderer .beer-side-holder {
top: 50%!important;
transform: translateY(-50%)!important;
-ms-transform: translateY(-50%)!important;
-webkit-transform: translateY(-50%)!important;
-moz-transform: translateY(-50%)!important;
-o-transform: translateY(-50%)!important;
}
.season-info {
font-size: 18px;
}
.bottle-holder img {
display: none!important;
}
.get-it {
font-size: 11px;
}
.block-beer img {
min-width: auto;
max-width: 90%;
}
.block-house-beers {
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.block-beer {
flex: 0 0 auto;
width: 41%;
}
.beer-canvas-logo.hidden {
display: block!important
}
.home-page .mobile-mobile, .home-logo-mobile {
display: block;
}
.faux-touch-menu-logo {
display: none;
}
.faux-touch-logo {
display: block;
}
.faux-touch-hamburger {
display: block;
}
.beer-can-bottle:hover {
top: 0!important;
}
.popover .beer-can-bottles {
z-index: 2001;
}
.popover-nav-items a {
text-align: center;
}
.the-timeline-text {
line-height: 1.3;
}
.the-timeline-text {
width: 400px;
text-align: center;
max-width: 80%;
}
.timeline-bar {
display: none;
}
.timeline-half.image img {
position: absolute;
max-height: 68%;
width: auto;
}
.timeline-half.image {
z-index: 10;
}
.timeline-half.image,
.regular-timeline-holder .timeline-slide-white {
height: 50%;
width: 100%;
top: 0;
}
.timeline-half.text,
.regular-timeline-holder .timeline-slide-black {
width: 100%;
position: absolute;
right: 0;
height: 50%;
top: 50%;
}
.home-hero {
display: none;
}
.mobile-hero {
display: block;
}
.bad-roll-container {
height: 400px;
}
.popover.open .popover-nav-items {
transition-delay: .2s;
}
.popover-nav-items a {
font-size: 40px;
}
.pbco-logo-bleed {
display: none!important;
}
.mobile-logo, .mobile-menu {
display: block;
}
.the-logo-menu {
display: none!important;
}
.beer-meta-bar {
background-color: #fff;
}
.nav-left {
left: 2%;
}
.nav-right {
right: 2%;
}
.video-bg video {
display: none!important;
}
.video-fallback {
display: block!important;
}
.nav {
width: 29px;
}
#calendar, .calendar-day-breakdown {
width: 500px;
margin: 0 auto;
float: left;
display: block;
max-width: 100%;
}
.event-page-title {
padding: 25px 0 50px;
}
.event-page-title h1 {
font-size: 25px;
}
.ui-datepicker-title {
font-size: 18px;
}
.ui-datepicker-inline.ui-datepicker.ui-widget {
top: 0;
position: relative!important;
}
.calendar-day-breakdown {
padding: 50px 0 75px;
}
td.highlight:after {
height: 37px;
}
td.ui-state-active:before {
height: 36px;
width: 36px;
}
.related-holder a {
width: 31%;
margin-right: 2%;
}
.related-holder a:nth-child(4n) {
margin-right: 2%;
}
.related-holder a:nth-child(3n) {
margin-right: 0px;
}
.related-post-title {
font-size: 17px;
}
.alm-reveal a {
margin-bottom: 70px;
}
.featured-main {
width: 100%;
order: 2;
float: left;
margin-right: 0;
padding-right: 0;
margin-top: 0;
}
.feature-feature-image {
order: 1;
width: 100%;
margin-bottom: 20px;
}
.featured-post {
width: 500px;
margin: 0 auto;
float: none;
display: block;
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
max-width: 100%;
}
.news-listing {
padding: 100px 0 50px;
}
.beer-hero-inner {
width: 500px;
max-width: 90%;
margin: 0 auto;
text-align: center;
float: none;
}
.beer-hero {
padding: 87px 0 50px;
height: auto;
z-index: 2;
}
.beer-meta {
width: 500px;
margin: 0 auto;
max-width: 80%;
}
.beer-meta-box {
text-align: center;
}
.bottles {
width: 300px!important;
}
.bottles,
.beer-canvas-logo {
width: 200px;
max-width: 50%;
background: no-repeat center center / contain;
position: relative;
z-index: 2;
display: block;
margin: 0 auto 25px;
float: none;
left: 0;
right: 0;
top: 0;
transform: translateY(-0%);
-ms-transform: translateY(-0%);
-webkit-transform: translateY(-0%);
-moz-transform: translateY(-0%);
-o-transform: translateY(-0%);
}
.beer-side-holder {
width: 100%;
left: 0!important;
right: 0!important;
top: 0;
transform: translateY(-0%);
-ms-transform: translateY(-0%);
-webkit-transform: translateY(-0%);
-moz-transform: translateY(-0%);
-o-transform: translateY(-0%);
position: relative;
z-index: 4;
padding-right: 0;
}
.beer-page-description {
width: 300px;
max-width: 100%;
margin: 0 auto;
font-size: 15px;
text-align: center;
}
.beer-page-description p {
margin-bottom: 13px;
}
.beer-meta-bar {
height: auto;
}
.beer-side-holder.fade-in {
-webkit-animation-name: fadeInUp!important;
animation-name: fadeInUp!important;
}
.beer-meta-gradient-transition {
display: none;
}
.instagram-break {
padding: 50px 0 100px;
}
.insta-grid {
width: 500px;
max-width: 100%;
margin: 0 auto;
order: 1;
}
.hashtag {
text-align: center;
padding: 50px 0 0;
width: 100%;
order: 2;
}
.beer-posts .related-holder a,
.other-posts .related-holder a {
margin-bottom: 70px;
}
.image-grid-image:first-child,
.image-grid-image:nth-child(3) {
width: 48.5%;
margin-right: 3%;
}
.image-grid-image:nth-child(1),
.image-grid-image:nth-child(2) {
margin-bottom: 3%;
}
.image-grid-image:nth-child(2),
.image-grid-image:nth-child(3),
.image-grid-image:nth-child(4) {
width: 48.5%;
float: left;
left: auto;
position: relative;
height: auto;
top: auto;
}
.image-grid-image:nth-child(2n) {
margin-right: 0;
}
.image-grid-container {
width: 90%;
margin: 0 auto;
}
.image-grid-image-maker {
padding-top: 121%;
position: relative;
}
.footer-text {
font-size: 23px;
}
.pbco-footer {
padding: 50px 0 16%;
}
.contact-true-submit {
width: 110px;
}
.form-field input {
font-size: 15px;
}
.rect-maker {
padding-top: 100%;
}
.mobile-logo-mobile {
display: block;
}
.mobile-logo-holder {
display: none;
}
.blog-intro,
.blog-main {
width: 500px;
display: block;
max-width: 100%;
float: none;
margin: 0 auto;
}
.main-blog-body {
padding: 50px 0;
}
.blog-main {
margin-top: 50px;
}
.timeline-slide.solid-yellow .slide-text {
font-size: 35px;
}
/*
.timeline-half.image img {
top: 50%;
display: none;
}
.timeline-slide.inactive .timeline-half.image img {
top: 50%;
display: none;
}
.timeline-slide.active .timeline-half.image img {
top: 50%;
display: block;
}
*/
}
@media (max-width: 600px) {
.season-info:before, .season-info:after {
height: 2px;
}
.season-info {
font-size: 16px;
}
.block-beer {
padding-bottom: 100px;
}
.block-beer img {
margin: 45px auto 0;
}
.block-beer {
width: 61%;
}
.timeline-slide.solid-yellow.regular .slide-text {
font-size: 22px;
color: #000;
}
.timeline-slide.solid-yellow .slide-text {
font-size: 30px;
margin: 0 auto 20px;
}
.timeline-half.image img {
max-height: 60%;
}
.timeline-slide, .regular-timeline-holder {
height: 88vh;
top: 10vh;
}
.regular-timeline-holder.timeline-holder2.active {
top: 10vh!important;
}
.event-page-title h1 {
font-size: 20px;
}
.title-holder h1 {
font-size: 25px;
}
.pub-date {
font-size: 15px;
}
.related-post-title {
font-size: 15px;
}
.beer-meta-number {
font-size: 31px;
}
.beer-meta-item {
font-size: 12px;
}
.big-beer-break {
padding: 50px 0;
}
.beer-posts {
padding: 50px 0;
}
.the-image-grid {
padding: 50px 0;
}
.footer-text {
font-size: 17px;
padding: 0 41px;
}
.related-holder a {
padding-bottom: 55px;
}
.related-learn-more-button {
font-size: 15px;
}
.beer-posts .related-holder a,
.other-posts .related-holder a {
margin-bottom: 46px;
}
}
@media (max-width: 530px) {
.related-holder a {
width: 48%;
margin-right: 3%;
}
.related-holder a:nth-child(3n),
.related-holder a:nth-child(4n) {
margin-right: 3%;
}
.related-holder a:nth-child(2n) {
margin-right: 0;
}
.related-learn-more-button,
.form-full input[type="submit"] {
font-size: 16px;
}
.form-half select {
background-size: 20px;
}
span.wpcf7-not-valid-tip {
font-size: 12px!important;
}
}
@media (max-width: 500px) {
.image-credit {
font-size: 9px;
}
.mobile-hero-text h2 {
font-size: 29px;
}
.mobile-hero-text {
font-size: 17px;
}
.blog-intro h2 {
font-size: 18px;
}
.blog-main {
margin-top: 32px;
font-size: 15px;
}
.blog-main p {
margin-bottom: 17px;
}
.other-posts {
padding: 50px 0;
}
.related-post-pub {
font-size: 12px;
}
.hashtag {
font-size: 20px;
}
.news-listing .related-holder {
padding: 63px 0 0;
}
.excerpt {
margin: 29px 0;
}
.featured-main h2 {
margin-top: 13px;
font-size: 23px;
}
.news-listing {
padding: 50px 0;
}
.event-title {
font-size: 22px;
}
.event-meta {
font-size: 12px;
}
.calendar-day-breakdown {
padding: 25px 0 50px;
}
.pbco-footer .beer-can-bottles {
bottom: -32px!important;
}
}
@media (max-width: 450px) {
.herm-body {
width: 222px;
left: -24px;
bottom: -43px;
z-index: 10;
position: relative;
}
.herm-head {
width: 119px;
position: absolute;
top: -76px;
z-index: 11;
left: 39px;
}
.herm-section .beer-quote {
margin-left: -35%;
}
.big-beer-break.herm-section {
padding: 125px 0 100px;
}
}
@media (max-width: 400px) {
}
/* # Print Styles
---------------------------------------------------------------------------------------------------- */
@media print {
*,
*::before,
*::after {
background: transparent !important;
box-shadow: none !important;
color: #000 !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
abbr[title]::after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]::after,
a[href^="#"]::after,
.site-title > a::after {
content: "";
}
thead {
display: table-header-group;
}
img,
tr {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 2cm 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
blockquote,
pre {
border: 1px solid #999;
page-break-inside: avoid;
}
.content,
.content-sidebar {
width: 100%;
}
button,
input,
select,
textarea,
.breadcrumb,
.comment-edit-link,
.comment-form,
.comment-list .reply a,
.comment-reply-title,
.edit-link,
.entry-comments-link,
.entry-footer,
.genesis-box,
.header-widget-area,
.hidden-print,
.home-top,
.nav-primary,
.nav-secondary,
.post-edit-link,
.sidebar {
display: none !important;
}
.title-area {
text-align: center;
width: 100%;
}
.site-title > a {
margin: 0;
text-decoration: none;
text-indent: 0;
}
.site-inner {
padding-top: 0;
position: relative;
top: -100px;
}
.author-box {
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
orphans: 3;
page-break-after: avoid;
page-break-inside: avoid;
widows: 3;
}
img {
page-break-after: avoid;
page-break-inside: avoid;
}
blockquote,
pre,
table {
page-break-inside: avoid;
}
dl,
ol,
ul {
page-break-before: avoid;
}
}