@import url('https://fonts.googleapis.com/css?family=Lato');
html {
&, &:after, &:before {
box-sizing: border-box;
}
}
body {
font-family: 'Lato', sans-serif;
}
.towar-w-koszyku-container {
display: block;
margin: 0 auto;
width: 95%;
justify-content: center;
text-align: center;
}
@media all and (orientation:landscape) {
/* TŁO (DRUGI PLAN) */
@font-face {
font-family: "Six Caps";
src: url("../../usr/sixcaps-regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
.BWS-container {
position: absolute;
top: 54px;
left: 95px;
width: 179px;
height: 60px;
background: white;
z-index: 9999;
}
.BWS {
font-family: "Six Caps", sans-serif;
font-size: 2.8rem;
font-weight: 400;
color: #000;
text-decoration: none;
line-height: 1.1;
text-align: center;
}
.kontener-nazwy-strony {
display: block;
align-items: center; /* wyśrodkowanie w pionie */
justify-content: center; /* opcjonalnie: wyśrodkowanie w poziomie */
height: 70px; /* wymagana wysokość kontenera */
margin-left: 5px;
margin-top:-15px;
}
.page-title {
margin: 0;
text-align: center;
line-height: 1.1;
}
.page-title-small {
display: block;
font-size: 0.55em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
color: #777;
}
.page-title-large {
display: block;
font-size: 1.5em;
font-weight: 700;
color: #d39c0a;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #FFFFFF, 1px 6px 7px #3f310d;
}
.ornament{
width:100%;
height:26px;
background-image:url("/usr/ornament.svg");
background-repeat:repeat-x;
background-position:center top;
background-size:calc(100vw / 120) auto;
}
.ornament-c{
position: absolute; right: 0; top: 15px;
width:80vw;
height:26px;
background-image:url("/usr/ornament.svg");
background-repeat:repeat-x;
background-position:center top;
background-size:calc(100vw / 120) auto;
clip-path:polygon(
0 50%,
100% 0,
100% 100%
);
}
.parallax-bg {
position: fixed;
top: calc(110vh);
left: 0;
width: 100%;
height: calc(165vh);
background-image: url("https://browarwielkasowa.pl/usr/las-6-bg-landscp.jpg");
background-size: cover;
background-position: top;
z-index: -1;
transform: translateY(0);
will-change: transform;
}
.opis-kontener {
width: 80%;
justify-content: center; /* opcjonalnie: wyśrodkowanie w poziomie */
text-align: center;
margin: 0 auto;
}
.opis-head-page h2 {
font-family: Arsenal-StyG;
font-weight: bold;
font-size: 24px;
}
.opis-head-page h3 {
font-family: Arsenal-StyG;
font-weight: bold;
font-size: 17.6px;
text-indent: 18px;
}
.opis-head-page p {
font-family: Arsenal-StyG;
font-size: 17.6px;
text-align: justify;
text-indent: 18px;
column-count: 2;       /* Dzieli tekst na 2 kolumny */
column-gap: 40px;      /* Odstęp między kolumnami */
column-rule: 1px solid #ccc; /* Linia oddzielająca kolumny */
}
.opis-head-page a {
line-height: 2em;
font-size: 1.5em;
font-weight: 400;
color: grey;
text-decoration: none;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #FFFFFF, 1px 6px 7px #3f310d;
}
.btn {
display: inline-block;
max-width: 100%;
padding: 1vw 2vw;
margin: 0 auto;
font-size: 1vw;
color: white;
border-radius: 0.5vw;
text-decoration: none;
text-align: center;
transition: all 200ms ease;
&:hover {
background: rgba(0,0,0, 0.8);
}
}
.popup-container {
box-sizing: border-box;
position: relative;
top: 6vw;
width: 100%;
max-width: 50vw;
margin: 8vw auto 0;
background: white;
padding: 3vw 3vw;
text-align: center;
box-shadow: 0 0 1vw 1vw rgba(0, 0, 0, 0.5);
}
.popup-body {
box-sizing: border-box;
margin-bottom: 2vw;
font-size: 4vw;
line-height: 4vw;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04vw;
}
.popup-btn-L {
box-sizing: border-box;
margin-left: 3vw;
margin-right: 3vw;
border: none;
cursor: pointer;
padding: 1vw 1.8vw;
font-size: 3vw;
color: #2cbd00;
text-shadow: 0.2vw 0.2vw 0.4vw rgba(0, 0, 0, 1), 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 1), -0.04vw -0.04vw 0.05vw rgba(255, 255, 255, 1);
border-radius: 0 2vw 0 2vw;
background-color: rgba(0,0,0,.7);
box-shadow: 0.2vw 0.3vw 0.3vw rgba(0, 0, 0, 0.5);
}
.popup-btn-R {
box-sizing: border-box;
margin-left: 3vw;
margin-right: 3vw;
border: none;
cursor: pointer;
padding: 1vw 1.8vw;
font-size: 3vw;
color: red;
text-shadow: 0.2vw 0.2vw 0.4vw rgba(0, 0, 0, 1), 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 1), -0.04vw -0.04vw 0.05vw rgba(255, 255, 255, 1);
border-radius: 2vw 0 2vw 0;
background-color: rgba(0,0,0,.7);
box-shadow: 0.2vw 0.3vw 0.3vw rgba(0, 0, 0, 0.5);
}
}
@media all and (orientation:portrait) {
/* TŁO (DRUGI PLAN) */
@font-face {
font-family: "Six Caps";
src: url("../../usr/sixcaps-regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
.BWS-container {
position: absolute;
top: 0;
left: 0;
width: 175px;
height: 38px;
margin-top: 42px;
margin-left: 105px;
}
.BWS {
font-family: "Six Caps", sans-serif;
font-size: 2.4rem;
font-weight: 400;
color: #000;
text-decoration: none;
line-height: 1;
text-align: center;
}
.kontener-nazwy-strony {
display: block;
width: 100%;
align-items: center; /* wyśrodkowanie w pionie */
justify-content: center; /* opcjonalnie: wyśrodkowanie w poziomie */
height: 70px; /* wymagana wysokość kontenera */
text-align: center;
margin: auto;
margin-top: -8px;
margin-left: 22px;
}
.page-title {
margin: 0;
text-align: center;
line-height: 1.1;
}
.page-title-small {
display: block;
font-size: 0.55em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
color: #777;
}
.page-title-large {
display: block;
font-size: 1.5em;
font-weight: 700;
color: #d39c0a;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #FFFFFF, 1px 6px 7px #3f310d;
}
.ornament{
width:100%;
height:26px;
background-image:url("/usr/ornament.svg");
background-repeat:repeat-x;
background-position:center top;
background-size:calc(100vw / 35) auto;
margin-top: 10px;
}
.parallax-bg {
position: fixed;
top: calc(90vh);
left: 0;
width: 100%;
height: calc(80vh);
background-image: url("https://browarwielkasowa.pl/usr/las-6-bg.jpg");
background-size: cover;
background-position: top;
z-index: -1;
transform: translateY(0);
will-change: transform;
}
.opis-kontener {
width: 90%;
justify-content: center; /* opcjonalnie: wyśrodkowanie w poziomie */
text-align: center;
margin: 0 auto;
}
.opis-head-page h2 {
font-family: Arsenal-StyG;
font-weight: bold;
font-size: 22px;
}
.opis-head-page h3 {
font-family: Arsenal-StyG;
font-weight: bold;
font-size: 17px;
text-indent: 18px;
}
.opis-head-page p {
font-family: Arsenal-StyG;
font-size: 15px;
text-align: justify;
text-indent: 18px;
}
.opis-head-page a {
line-height: 2em;
font-size: 1.5em;
font-weight: 400;
color: grey;
text-decoration: none;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #FFFFFF, 1px 6px 7px #3f310d;
}
.btn {
display: inline-block;
max-width: 100%;
padding: 1vw 2vw;
margin: 0 auto;
font-size: 4vw;
color: white;
border-radius: 0.5vw;
text-decoration: none;
text-align: center;
transition: all 200ms ease;
&:hover {
background: rgba(0,0,0, 0.8);
}
}
.popup-container {
box-sizing: border-box;
position: relative;
top: 40%;
width: 80vw;
margin: 8vw auto 0;
background: white;
padding: 3vw 3vw;
text-align: center;
box-shadow: 0 0 1vw 1vw rgba(0, 0, 0, 0.5);
}
.popup-body {
box-sizing: border-box;
margin-bottom: 2vw;
font-size: 5vw;
line-height: 5vw;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04vw;
}
.popup-btn-L {
box-sizing: border-box;
margin-left: 5vw;
margin-right: 5vw;
border: none;
cursor: pointer;
padding: 1vw 2vw;
font-size: 8vw;
color: #2cbd00;
text-shadow: 0.2vw 0.2vw 0.4vw rgba(0, 0, 0, 1), 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 1), -0.04vw -0.04vw 0.05vw rgba(255, 255, 255, 1);
border-radius: 0 4vw 0 4vw;
background-color: rgba(0,0,0,.7);
box-shadow: 0.2vw 0.3vw 0.3vw rgba(0, 0, 0, 0.5);
}
.popup-btn-R {
box-sizing: border-box;
margin-left: 5vw;
margin-right: 5vw;
border: none;
cursor: pointer;
padding: 1vw 2vw;
font-size: 8vw;
color: red;
text-shadow: 0.2vw 0.2vw 0.4vw rgba(0, 0, 0, 1), 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 1), -0.04vw -0.04vw 0.05vw rgba(255, 255, 255, 1);
border-radius: 4vw 0 4vw 0;
background-color: rgba(0,0,0,.7);
box-shadow: 0.2vw 0.3vw 0.3vw rgba(0, 0, 0, 0.5);
}
}
.bestsellery {
text-decoration: none;
font-family: Arsenal-StyG;
color: rgb(0, 0, 0);
font-size: x-large;
font-weight: bold;
text-align: center;
}
.best-d {
display: flex;
width: calc(100%);
align-items: center;
justify-content: center;
position: relative;
margin: 0 auto;
overflow: hidden;
text-align: center;
border: none;
@media (min-width:320px) {
width: calc(100% - 20px);
}
z-index: 6;
}
table.best-t {
border: none;
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
}
table.best-t td, table.best-t th {
border: none;
padding: 1px 0px;
width: 25%;
}
table.best-t tbody td {
font-size: 1rem;
}
.best-t td:nth-child(4) img.piwka {
margin-right: 0;
}
p.piwka {
text-align: center;
white-space: nowrap;
color: rgb(0, 0, 0);
font-size: 1em;
font-weight: bold;
font-family: Arsenal-StyG;
mix-blend-mode: darken;
}
img.piwka {
height: 200px;
width: 200px;
border-radius: 15px;
margin-right: 40px;
mix-blend-mode: multiply;
}
@media
only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
img.piwka {
height: 64px;
width: 64px;
border-radius: 5px;
margin-right: 10px;
mix-blend-mode: multiply;
}
p.piwka {
font-size: 6;
mix-blend-mode: darken;
}
.bestsellery {
font-size:large;
}
.best-t td:nth-child(4) img.piwka {
margin-right: 0;
}
}
.menu-elastyczne {
display: flex;
flex-flow: row wrap;
position: relative;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.promocja {
text-align: center;
width: 60%;
margin: 0 auto;
display: flex;
justify-content: center;
padding: 3vw 0 4vw 0;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.promocja-2 {
text-align: center;
width: 60%;
margin: 0 auto;
display: flex;
justify-content: center;
border: 1vw solid white;
border-image: linear-gradient(45deg, rgba(255, 0, 0, 0.4), rgba(255, 240, 0, 0.3)) 1;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.7vw 0.7vw 1.8vw);
}
.promocja-3 {
text-align: center;
width: 70%;
margin: 0 auto;
margin-top: -20px;
display: flex;
justify-content: center;
padding: 3vw 0 4vw 0;
border-radius: 25% 5% / 55%;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.4vw 0.6vw 0.6vw);
}
.promocja-4 {
text-align: center;
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
padding: 3vw 0 4vw 0;
mix-blend-mode: multiply;
}
.promocja-5 {
text-align: center;
width: 60%;
margin: 0 auto;
display: flex;
justify-content: center;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.7vw 0.7vw 1.8vw);
}
.cont-jajo {
display: flex; /* Aktywacja flexbox */
justify-content: center; /* Wyśrodkowanie poziome */
align-items: center; /* Wyśrodkowanie pionowe */
height: 400px; /* Wysokość 100% okna przeglądarki */
margin: 0 auto; /* Usunięcie domyślnych marginesów */
background-color: transparent; /* Kolor tła */
}
@keyframes rotate-jajo {
0% {
transform: translateX(0) translateY(20px) rotate(0deg) scale(70%);
}
50% {
transform: translateX(100px) translateY(-100px) rotate(40deg) scale(50%);
}
100% {
transform: translateX(0) translateY(20px) rotate(0deg) scale(70%);
}
}
.jajo {
position: absolute;
width: 200px; /* Szerokość elementu */
height: 800px; /* Wysokość elementu */
background-color: transparent; /* Kolor tła elementu */
color: white; /* Kolor tekstu */
display: flex; /* Flexbox wewnątrz elementu */
justify-content: center; /* Tekst wyśrodkowany poziomo */
align-items: center; /* Tekst wyśrodkowany pionowo */
animation-name: rotate-jajo;
animation: jajo 5s infinite ease-in-out;
-webkit-animation-name: rotate-jajo;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count:infinite;
}
.cont-mowa {
position: relative;
display: flex; /* Aktywacja flexbox */
justify-content: center; /* Wyśrodkowanie poziome */
align-items: center; /* Wyśrodkowanie pionowe */
height: 50%; /* Wysokość 100% okna przeglądarki */
width: 70%; /* Wysokość 100% okna przeglądarki */
margin: 0 auto; /* Usunięcie domyślnych marginesów */
margin-top: 10px;
padding: 2vw 0 5vw 0;
background-color: transparent; /* Kolor tła */
}
.mowa {
position: relative;
width: 100%;
margin: auto;
text-align: center;
color: red;
font-size: 2.1rem;
font-weight: bold;
justify-content: center;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.15vw 0.15vw 0.2vw);
}
@media all and (orientation:landscape) {
.menu-elastyczne-elementy {
padding: 1vw 4vw 1vw 4vw;
}
/* Klasyczne */
a.btnF-1 {
text-decoration: none;
display: block;
}
.btnF-1 {
width: 20vw;
height: 20vw;
line-height: 20vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-1, .flip-front-1en, .flip-front-1de,
.flip-back-1
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-1
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-klasyczne.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-1en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-classic.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-1de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-klassiker.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-back-1
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-klasyczne-b26.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(10vw);
-ms-transform: rotateX(90deg) translateZ(10vw);
-o-transform: rotateX(90deg) translateZ(10vw);
transform: rotateX(90deg) translateZ(10vw);
}
.btnF-1:hover .flip-front-1, .btnF-1:hover .flip-front-1en, .btnF-1:hover .flip-front-1de {
-webkit-transform: rotateX(-90deg) translateZ(10vw);
-ms-transform: rotateX(-90deg) translateZ(10vw);
-o-transform: rotateX(-90deg) translateZ(10vw);
transform: rotateX(-90deg) translateZ(10vw);
}
.btnF-1:hover .flip-back-1 {
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
/* Nowofalowe */
a.btnF-2 {
text-decoration: none;
display: block;
}
.btnF-2 {
width: 20vw;
height: 20vw;
line-height: 20vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-2, .flip-front-2en, .flip-front-2de,
.flip-back-2
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-2
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-nowofalowe.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-2en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-new-wave.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-2de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-new-wave.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-back-2
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-nowofalowe-b.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(10vw);
-ms-transform: rotateX(90deg) translateZ(10vw);
-o-transform: rotateX(90deg) translateZ(10vw);
transform: rotateX(90deg) translateZ(10vw);
}
.btnF-2:hover .flip-front-2, .btnF-2:hover .flip-front-2en, .btnF-2:hover .flip-front-2de {
-webkit-transform: rotateX(-90deg) translateZ(10vw);
-ms-transform: rotateX(-90deg) translateZ(10vw);
-o-transform: rotateX(-90deg) translateZ(10vw);
transform: rotateX(-90deg) translateZ(10vw);
}
.btnF-2:hover .flip-back-2 {
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
/* Smakowe */
a.btnF-3 {
text-decoration: none;
display: block;
}
.btnF-3 {
width: 20vw;
height: 20vw;
line-height: 20vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-3, .flip-front-3en, .flip-front-3de,
.flip-back-3
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-3
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-smakowe.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-3en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-flavored.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-3de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-schmackhaftes.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-back-3
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-smakowe-b26.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(10vw);
-ms-transform: rotateX(90deg) translateZ(10vw);
-o-transform: rotateX(90deg) translateZ(10vw);
transform: rotateX(90deg) translateZ(10vw);
}
.btnF-3:hover .flip-front-3, .btnF-3:hover .flip-front-3en, .btnF-3:hover .flip-front-3de {
-webkit-transform: rotateX(-90deg) translateZ(10vw);
-ms-transform: rotateX(-90deg) translateZ(10vw);
-o-transform: rotateX(-90deg) translateZ(10vw);
transform: rotateX(-90deg) translateZ(10vw);
}
.btnF-3:hover .flip-back-3 {
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
/* Sezonowe */
a.btnF-4 {
text-decoration: none;
display: block;
}
.btnF-4 {
width: 20vw;
height: 20vw;
line-height: 20vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-4, .flip-front-4en, .flip-front-4de,
.flip-back-4
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-4
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-sezonowe.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-4en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-seasonal.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-4de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-saisonale.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-back-4
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-sezonowe-b.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(10vw);
-ms-transform: rotateX(90deg) translateZ(10vw);
-o-transform: rotateX(90deg) translateZ(10vw);
transform: rotateX(90deg) translateZ(10vw);
}
.btnF-4:hover .flip-front-4, .btnF-4:hover .flip-front-4en, .btnF-4:hover .flip-front-4de {
-webkit-transform: rotateX(-90deg) translateZ(10vw);
-ms-transform: rotateX(-90deg) translateZ(10vw);
-o-transform: rotateX(-90deg) translateZ(10vw);
transform: rotateX(-90deg) translateZ(10vw);
}
.btnF-4:hover .flip-back-4 {
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
/* Bezalkoholowe */
a.btnF-5 {
text-decoration: none;
display: block;
}
.btnF-5 {
width: 20vw;
height: 20vw;
line-height: 20vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-5, .flip-front-5en, .flip-front-5de,
.flip-back-5
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-5
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-bezalkoholowe.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-5en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-alcohol-free.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-5de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-alkoholfrei.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-back-5
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-bezalkoholowe-b26.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(10vw);
-ms-transform: rotateX(90deg) translateZ(10vw);
-o-transform: rotateX(90deg) translateZ(10vw);
transform: rotateX(90deg) translateZ(10vw);
}
.btnF-5:hover .flip-front-5, .btnF-5:hover .flip-front-5en, .btnF-5:hover .flip-front-5de {
-webkit-transform: rotateX(-90deg) translateZ(10vw);
-ms-transform: rotateX(-90deg) translateZ(10vw);
-o-transform: rotateX(-90deg) translateZ(10vw);
transform: rotateX(-90deg) translateZ(10vw);
}
.btnF-5:hover .flip-back-5 {
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
/* Akcesoria */
a.btnF-6 {
text-decoration: none;
display: block;
}
.btnF-6 {
width: 20vw;
height: 20vw;
line-height: 20vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-6, .flip-front-6en, .flip-front-6de,
.flip-back-6
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-6
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-akcesoria.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-6en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-accessories.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-front-6de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-accessoires.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
.flip-back-6
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-akcesoria-b.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(10vw);
-ms-transform: rotateX(90deg) translateZ(10vw);
-o-transform: rotateX(90deg) translateZ(10vw);
transform: rotateX(90deg) translateZ(10vw);
}
.btnF-6:hover .flip-front-6, .btnF-6:hover .flip-front-6en, .btnF-6:hover .flip-front-6de {
-webkit-transform: rotateX(-90deg) translateZ(10vw);
-ms-transform: rotateX(-90deg) translateZ(10vw);
-o-transform: rotateX(-90deg) translateZ(10vw);
transform: rotateX(-90deg) translateZ(10vw);
}
.btnF-6:hover .flip-back-6 {
-webkit-transform: rotateX(0deg) translateZ(10vw);
-ms-transform: rotateX(0deg) translateZ(10vw);
-o-transform: rotateX(0deg) translateZ(10vw);
transform: rotateX(0deg) translateZ(10vw);
}
}
@media all and (orientation:portrait) {
.menu-elastyczne-elementy {
padding: 2vw;
}
/* Klasyczne */
a.btnF-1 {
text-decoration: none;
display: block;
}
.btnF-1 {
width: 32vw;
height: 32vw;
line-height: 32vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-1, .flip-front-1en, .flip-front-1de,
.flip-back-1
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-1
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-klasyczne.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-1en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-classic.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-1de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-klassiker.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-back-1
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-klasyczne-b26.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(16vw);
-ms-transform: rotateX(90deg) translateZ(16vw);
-o-transform: rotateX(90deg) translateZ(16vw);
transform: rotateX(90deg) translateZ(16vw);
}
.btnF-1:hover .flip-front-1, .btnF-1:hover .flip-front-1en, .btnF-1:hover .flip-front-1de {
-webkit-transform: rotateX(-90deg) translateZ(16vw);
-ms-transform: rotateX(-90deg) translateZ(16vw);
-o-transform: rotateX(-90deg) translateZ(16vw);
transform: rotateX(-90deg) translateZ(16vw);
}
.btnF-1:hover .flip-back-1 {
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
/* Nowofalowe */
a.btnF-2 {
text-decoration: none;
display: block;
}
.btnF-2 {
width: 32vw;
height: 32vw;
line-height: 32vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-2, .flip-front-2en, .flip-front-2de,
.flip-back-2
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-2
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-nowofalowe.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-2en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-new-wave.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-2de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-new-wave.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-back-2
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-nowofalowe-b.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(16vw);
-ms-transform: rotateX(90deg) translateZ(16vw);
-o-transform: rotateX(90deg) translateZ(16vw);
transform: rotateX(90deg) translateZ(16vw);
}
.btnF-2:hover .flip-front-2, .btnF-2:hover .flip-front-2en, .btnF-2:hover .flip-front-2de {
-webkit-transform: rotateX(-90deg) translateZ(16vw);
-ms-transform: rotateX(-90deg) translateZ(16vw);
-o-transform: rotateX(-90deg) translateZ(16vw);
transform: rotateX(-90deg) translateZ(16vw);
}
.btnF-2:hover .flip-back-2 {
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
/* Smakowe */
a.btnF-3 {
text-decoration: none;
display: block;
}
.btnF-3 {
width: 32vw;
height: 32vw;
line-height: 32vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-3, .flip-front-3en, .flip-front-3de,
.flip-back-3
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-3
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-smakowe.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-3en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-flavored.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-3de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-schmackhaftes.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-back-3
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-smakowe-b26.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(16vw);
-ms-transform: rotateX(90deg) translateZ(16vw);
-o-transform: rotateX(90deg) translateZ(16vw);
transform: rotateX(90deg) translateZ(16vw);
}
.btnF-3:hover .flip-front-3, .btnF-3:hover .flip-front-3en, .btnF-3:hover .flip-front-3de {
-webkit-transform: rotateX(-90deg) translateZ(16vw);
-ms-transform: rotateX(-90deg) translateZ(16vw);
-o-transform: rotateX(-90deg) translateZ(16vw);
transform: rotateX(-90deg) translateZ(16vw);
}
.btnF-3:hover .flip-back-3 {
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
/* Sezonowe */
a.btnF-4 {
text-decoration: none;
display: block;
}
.btnF-4 {
width: 32vw;
height: 32vw;
line-height: 32vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-4, .flip-front-4en, .flip-front-4de,
.flip-back-4
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-4
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-sezonowe.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-4en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-seasonal.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-4de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-saisonale.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-back-4
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-sezonowe-b.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(16vw);
-ms-transform: rotateX(90deg) translateZ(16vw);
-o-transform: rotateX(90deg) translateZ(16vw);
transform: rotateX(90deg) translateZ(16vw);
}
.btnF-4:hover .flip-front-4, .btnF-4:hover .flip-front-4en, .btnF-4:hover .flip-front-4de {
-webkit-transform: rotateX(-90deg) translateZ(16vw);
-ms-transform: rotateX(-90deg) translateZ(16vw);
-o-transform: rotateX(-90deg) translateZ(16vw);
transform: rotateX(-90deg) translateZ(16vw);
}
.btnF-4:hover .flip-back-4 {
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
/* Bezalkoholowe */
a.btnF-5 {
text-decoration: none;
display: block;
}
.btnF-5 {
width: 32vw;
height: 32vw;
line-height: 32vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-5, .flip-front-5en, .flip-front-5de,
.flip-back-5
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-5
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-bezalkoholowe.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-5en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-alcohol-free.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-5de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-alkoholfrei.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-back-5
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-bezalkoholowe-b26.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(16vw);
-ms-transform: rotateX(90deg) translateZ(16vw);
-o-transform: rotateX(90deg) translateZ(16vw);
transform: rotateX(90deg) translateZ(16vw);
}
.btnF-5:hover .flip-front-5, .btnF-5:hover .flip-front-5en, .btnF-5:hover .flip-front-5de {
-webkit-transform: rotateX(-90deg) translateZ(16vw);
-ms-transform: rotateX(-90deg) translateZ(16vw);
-o-transform: rotateX(-90deg) translateZ(16vw);
transform: rotateX(-90deg) translateZ(16vw);
}
.btnF-5:hover .flip-back-5 {
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
/* Akcesoria */
a.btnF-6 {
text-decoration: none;
display: block;
}
.btnF-6 {
width: 32vw;
height: 32vw;
line-height: 32vw;
text-align: center;
position: relative;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.3vw 0.3vw 0.4vw);
}
.flip-front-6, .flip-front-6en, .flip-front-6de,
.flip-back-6
{
position: absolute;
left: .7vw;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
transform-style: flat;
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.flip-front-6
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-akcesoria.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-6en
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-accessories.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-front-6de
{
color: #313131;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-accessoires.png");
background-size: cover;
background-color: transparent;
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
.flip-back-6
{
color: #fff;
background-color: transparent;
border: none;
background-image: url("https://browarwielkasowa.pl/usr/kapsel-akcesoria-b.png");
background-size: cover;
-webkit-transform: rotateX(90deg) translateZ(16vw);
-ms-transform: rotateX(90deg) translateZ(16vw);
-o-transform: rotateX(90deg) translateZ(16vw);
transform: rotateX(90deg) translateZ(16vw);
}
.btnF-6:hover .flip-front-6, .btnF-6:hover .flip-front-6en, .btnF-6:hover .flip-front-6de {
-webkit-transform: rotateX(-90deg) translateZ(16vw);
-ms-transform: rotateX(-90deg) translateZ(16vw);
-o-transform: rotateX(-90deg) translateZ(16vw);
transform: rotateX(-90deg) translateZ(16vw);
}
.btnF-6:hover .flip-back-6 {
-webkit-transform: rotateX(0deg) translateZ(16vw);
-ms-transform: rotateX(0deg) translateZ(16vw);
-o-transform: rotateX(0deg) translateZ(16vw);
transform: rotateX(0deg) translateZ(16vw);
}
}
@media all and (orientation:landscape) {
.uwaagaa {
position: relative;
display: block;
width: 100%;
font-size: 5rem;
font-weight: bold;
font-weight: 700;
text-stroke-width: 0.5px;
text-stroke-color: black;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: black;
font-family: "Montserrat Subrayada", serif;
color: red;
margin: 0 auto;
text-align: center;
justify-content: center;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.1vw 0.3vw 0.3vw);
}
}
@media all and (orientation:portrait) {
.uwaagaa {
position: relative;
display: block;
width: 100%;
font-size: 2rem;
font-weight: bold;
font-weight: 700;
text-stroke-width: 0.5px;
text-stroke-color: black;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: black;
font-family: "Montserrat Subrayada", serif;
color: red;
margin: 0 auto;
text-align: center;
justify-content: center;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.1vw 0.3vw 0.3vw);
}
}
.st0 {
fill: #c39a27;
}
/* Kontener wyśrodkowujący SVG */
.svg-container {
display: flex;
justify-content: center; /* W poziomie */
align-items: center;     /* W pionie */
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0.1vw 0.1vw 0.1vw);
padding: 5px;
}
@media all and (orientation:landscape) {
svg {
width: 44%;  /* Możesz dostosować szerokość SVG */
}
}
@media all and (orientation:portrait) {
svg {
width: 77%;  /* Możesz dostosować szerokość SVG */
}
}
@keyframes rotate-iris {
0% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
10% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
25% {
transform: translateX(-5px) translateY(4px);
-webkit-transform: translateX(-5px) translateY(4px);
}
50% {
transform: translateX(-9px) translateY(9px);
-webkit-transform: translateX(-9px) translateY(9px);
}
75% {
transform: translateX(5px) translateY(9px);
-webkit-transform: translateX(5px) translateY(9px);
}
90% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
100% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
}
.iris {
fill: #c39a27;
animation-name: rotate-iris;
animation: rotate-R 2.5s linear infinite;
-webkit-animation-name: rotate-iris;
-webkit-animation-duration: 2.5s;
-webkit-animation-iteration-count:infinite;
}