/* RESET */

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-weight: 400;
    overflow-x: hidden !important;
    background-color: #F0F0F0;
}

body > *:not(:first-child) {
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 16px;
    position: relative;
    
}

.main-wrapper {
    width: 1280px;
    margin: 0 auto;
}


/*=======================
        TYPOGRAPHY
=======================*/


h1 {
    font-size: 48px;
    font-weight: bold;
    color: #141414;
    line-height: 56px;
}

.our-story h1 {
    margin-bottom: 8px;
}

.hero-h1 {
    font-size: 64px;
    font-weight: bold;
    line-height: 72px;
    color: #141414;
    margin-bottom: 8px;
}

h2 {
    font-size: 24px;
    font-weight: bold;
    color: #D2BC8A;
    line-height: 32px;
    margin-bottom: 16px;
}

p {
    font-weight: 400;
    color: #505050;
    line-height: 24px;
}

.hero-p {
    max-width: 530px;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #505050;
    margin: 0 auto;
}

#lang-separator {
    width: 2px;
    height: 20px;
    background-color: #D8D8D8;
    margin-bottom: -5px;
    margin-left: 6px;
    margin-right: 6px;
}

.tan {
    color: #D2BC8A;
}

.bold {
    font-weight: bold;
}

a {
    color: #505050;
    font-weight: 400;
    text-decoration: none;
}

a:visited {
    color: #505050;
}

a:hover {
    color: #D3BD8C;
}

.a-footer {
    color: #D3BD8C;
}

sup {
    font-size: 26px;
    font-weight: 700 !important;
}


/*=======================
        HEADER
=======================*/

header {
    width: 100% !important;
    height: 72px;
    margin: 0 auto;
    border-bottom: 1px solid #E0E0E0;
    font-size: 14px;
}

/* Language Menu */

select {
    max-width: 72px;
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    border: 0 none;
    color: #FFFFFF;
    background: transparent;
}

.dd {
    max-width: 70px !important;
    outline: none !important;
    font-weight: 400;
}

#webmenu_title,
.ddChild {
    display: flex;
    align-items: center;
}

.fnone {
    width: 25px;
    height: 20px;
}

.selected {
    display: none !important;
}

/* Header Wrapper */

.header-wrapper {
    width: 67vw;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.header-wrapper > * {
    width: 33.33%;
}

.main-nav {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 0 0 30px;
}

.main-nav li {
    display: inline-block;
    color: #505050;;
    margin-left: 20px;
    font-weight: 400;
}

.main-nav li:first-child {
    margin-left: 0;
}

.social {
    display: flex;
    width: 100px;
    justify-content: space-between;
    justify-self: end;
}

.social img:hover {
    cursor: pointer;
}


/*=======================
        HERO SECTION
=======================*/
.white-bg {
    width: 100%;
    height: 545px;
    background-color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.gradient-bg {
    width: 100%;
    height: 480px;
    background: linear-gradient(180deg, #FFF 0%, #F0F0F0 100%);
    position: absolute !important;
    top: 545px;
    left: 0;
}

.logo {
    width: 120px;
    display: block;
    margin: 64px auto 55px auto;
    -webkit-animation: moveInTop .8s ease-out;
    animation: moveInTop .8s ease-out;
}

.hero {
    z-index: 1;
}

.hero-content {
    margin: 64px auto;
    max-width: 620px;
    text-align: center;
    -webkit-animation: moveInTop .8s ease-out;
    animation: moveInTop .8s ease-out;
}

.intro-images-wrapper {
    margin: 0 auto;
    padding-top: 32px;
    position: relative;
    z-index: 2;
    -webkit-animation: moveInBottom .8s ease-out;
    animation: moveInBottom .8s ease-out;
}

.intro-image {
    height: 100%;
    display: block;
    margin: 0 auto;
    z-index: 1;
}

.intro-base {
    position: absolute;
    top: 505px;
    margin: 0 auto;
    z-index: -1;
}


/*==========================
OUR STORY & PRODUCTS SECTION
==========================*/


.product,
.copyright {
    margin-top: 40px;
    background-color: #FFFFFF;
}

.footer {
    background-color: #FFFFFF;
}

.our-story {
    margin-top: 32px;
    padding: 80px 0;
    background-color: #FFFFFF;
    z-index: 1;
}

.story-content {
    margin: 0 auto;
    padding-bottom: 40px;
    padding-top: 40px;
    text-align: center;
    max-width: 620px;
}

.product {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 756px;
    background-color: #FFFFFF;
    margin-bottom: 0;
}

.bottle {
    display: block;
    width: 169px;
    height: 567px;
    margin-top: 80px;
    margin-bottom: 80px;  
}

.mg-left {
    margin-left: 90px;
}

.mg-right {
    margin-right: 90px;
}

.beer-content {
    list-style: none;
    line-height: 24px;
    color: #505050;
    text-align: left;

    max-width: 480px;
    justify-self: start;
}

.beer-content-small {
    margin-top: 16px !important; 
}

.beer-content-small li {
    list-style: none;
}

.beer-content-left {
    margin-right: 20px;
    justify-self: end;
}

.beer-content-right {
    justify-self: start;
}

.beer-content li {
    line-height: 22px;
    font-weight: 400;
    color: #505050;
    font-size: 14px;
}


/*==========================
    LOKACIJE SECTION
==========================*/

.lokacije {
    margin-top: 120px;
}

.grad {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.grad h3 {
    color: #505050;
    padding-right: 15px;
}

.grad-line {
    display: inline-block;
    width: 100%;
    height: 4px;
    background-color: #D8D8D8;
}

.lokacije-wrapper {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.flip-container
{
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    -webkit-perspective:1000;
    perspective:1000;
}

.card {
    position: relative;
    width: 290px;
    height: 160px;
    margin-bottom: 40px;

}

.panel {
    
    width: 290px;
    height: 160px;
    position: relative;
    margin-bottom: 40px;
    -webkit-perspective: 600px;
            perspective: 600px;
  }
  /* -- make sure to declare a default for every property that you want animated -- */
  /* -- general styles, including Y axis rotation -- */
  
  .panel .front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    width: inherit;
    height: inherit;

    background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

    -webkit-transform: rotateX(0) rotateY(0);
            transform: rotateX(0) rotateY(0);

    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

    /* -- transition is the magic sauce for animation -- */
    -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
  }
  
  .panel.flip .front {
    z-index: 900;

    -webkit-transform: rotateY(179deg);
            transform: rotateY(179deg);
  }

  .panel .back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: inherit;
    height: inherit;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    

    -webkit-transform: rotateY(-179deg);
            transform: rotateY(-179deg);

    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

    /* -- transition is the magic sauce for animation -- */
    -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
  }

  .panel.flip .back {
    z-index: 1000;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #FFF;

    -webkit-transform: rotateX(0) rotateY(0);
            transform: rotateX(0) rotateY(0);
        }


/* LESKOVAC */


#front-hotel-abc {
    background-image: url('img/logo-abc-hotel.jpg');
}

#front-abc-safari {
    background-image: url('img/logo-abc-safari.jpg');
}

#front-spin {
    background-image: url('img/logo-spin.jpg');
}

#front-nasapumpa {
    background-image: url('img/logo-nasapumpa.jpg');
}

#front-gpetrol {
    background-image: url('img/logo-gpetrol.jpg');
}

/* VLASOTINCE */
#front-barley {background-image: url('img/logo-barley.jpg');
}

/* SOKOBANJA */

#front-zabac {
    background-image: url('img/logo-zabac.jpg');
}

#front-zupan {
    background-image: url('img/logo-zupan.jpg');
}

/* KRUŠEVAC */

#front-rooster {
    background-image: url('img/logo-rooster.jpg');
}

/* VRANJE */

#front-shamrock {
    background-image: url('img/logo-shamrock.jpg');
}

/* SURDULICA */

#front-bonita {
    background-image: url('img/logo-bonita.jpg');
}


.flip-container::after {
    height: 0;
    width: 290px;
    content: "";
  }

  #leskovac::after {
    width: 620px;
  }



#ostale-w {
    min-width: 130px !important;
}

/*==========================
    GALLERY SECTION
==========================*/



/*==========================
    FOOTER & COPYRIGHT 
==========================*/


.footer {
    padding-top: 20px;
    padding-bottom: 80px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
}

.info {
    padding-bottom: 8px;
}

.footer-content > *:not(:last-child) {
    margin-bottom: 16px;
}

.footer-content > *:first-child {
    margin-bottom: 32px;
}

.footer-content > *:last-child {
    margin-top: 16px;
}

.logo-footer {
    margin-top: 0;
}

.social-footer {
    margin: 0 auto;
}

.copyright {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    margin: 40px auto;
}

.copyright p {
    font-size: 14px;
    line-height: 30px;
    color: #707070;
}


/*==========================
        RESPONSIVE
==========================*/


@media (min-width: 3800px) {
    .header-wrapper {
            width: 25vw;
        }
    }

@media (min-width: 2100px) {
    .header-wrapper {
        width: 50vw;
        }
    }

@media (max-width: 1360px) {
    body > *:not(:first-child),
    .main-wrapper,
    .intro-images-wrapper,
    .intro-base {
        width: 688px;
    }

    .gradient-bg {
        width: 100% !important;
        height: 275px;
        top: 540px;
    }

    .hero-content {
        max-width: 528px;
        margin: 55px auto 60px auto;
    }

    .lokacije {
        margin-top: 80px;
    }

    .hero-p {
        font-size: 16px;
    }

    .hero-h1 {
        font-size: 48px;
    }

    .story-content {
        margin: 0 auto;
        padding-bottom: 40px;
        text-align: center;
        max-width: 528px;
    }

    .our-story {
        margin-top: 13px !important;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .product {
        flex-direction: column;
        align-items: center;
        justify-items: center;
        margin-bottom: 0;
        width: 688px;
        height: 1054px;
    }

    .beer-content {
        text-align: center;
        justify-self: center;
        margin-bottom: 50px;
        order: 2;

    }

    .mg-left,
    .mg-right {
        order: 1;
        margin: 90px auto 0 auto;
    }

    .beer-content-left {
        margin-right: 0px;
    }
    
    .beer-content-left {
        margin-top: 0 !important;
    }

    .intro-image {
        width: 445px;
    }
    .intro-base {
        top: 240px;
    }

    .gallery-wrapper {
        width: 688px;
        flex-direction: column;
    }

    .small-photos-wrapper {
        margin-top: 40px;
        width: 688px;
        height: 688px;
        align-content: space-between;
        justify-content: space-between;
    }

    .big-photo {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .small-photo {
        width: 324px;
        height: 324px;
    }

}


@media (max-width: 845px) {
    .header-wrapper {
        width: 90vw;
        }
    }

@media (max-width: 760px) {

    body > *:not(:first-child),
    .intro-base,
    .intro-images-wrapper,
    .product,
    .our-story {
        width: 100%;
        
    }
    
    .white-bg {
        height: 610px;
    }
    .gradient-bg {
        width: 100% !important;
        height: 162px !important;
        background: linear-gradient(180deg, #FFF 0%, #F0F0F0 100%);
        position: absolute !important;
        top: 605px !important;
    }

    .intro-base {
        top: 193px;
        margin: 0 auto;
    }

    .hero-content {
        padding: 0 20px;
    }

    .our-story {
        margin-top: 4px !important;
    }

    .hero-h1 {
        font-size: 48px;
        line-height: 56px;
    }

    header {
        width: 100%;
        margin: 0 auto;
        background-color: transparent;
    }

    .header-wrapper {
        width: 343px;
    }

    .main-nav {
        width: 55%;
        justify-self: end;
        margin-left: 0;
    }

    .main-nav {
        justify-self: end;
    }

    .social-header {
        display: none;
    }

    .story-content {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0 40px 0 40px;
    }

    .product,
    .footer,
    .copyright {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .product {
        height: 1126px;
        flex-direction: column;
    }

    .bottle {
        margin-top: 100px;
    }

    .beer-content {
        margin-bottom: 80px;
        margin-top: 40px !important;
        padding: 0px 40px 0px 40px;
    }

    .beer-content-left {
        margin-top: 0;
    }

    .intro-image {
        width: 260px;
    }

    .intro-base {
        top: 130px;
    }

    .lokacije {
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 80px;
    }

    .flip-container {
        width: 100%;
    }

    .last-card {
        margin-bottom: 20px !important;
    }

    .gallery {
        margin-top: 16px;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
    .gallery-wrapper {
        width: 100%;
        flex-direction: column;
    }

    .small-photos-wrapper {
        margin-top: 0px;
        width: 100%;
        height: auto;
        align-content: space-between;
        flex-direction: column;
    }

    .big-photo {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .small-photo {
        width: 100%;
        height: auto;
        object-fit: contain;
        margin-top: 16px;
    }

    .footer {
        padding-top: 20px !important;
    }

    .copyright {
        height: 104px;
        text-align: center;
        flex-direction: column;
        justify-items: center;
        padding: 20px;
        margin: 40px auto;
    }

    .hero,
    
    #nasa-piva,
    .footer,
    .copyright {
        margin: 16px 16px !important;
    }

}

@media (max-width: 660px) {
    
    .flip-container {
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
    }
    .card {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    } 

    .grad {
        margin-top: 20px;
    }
    
    .card,
    .panel,
    .front,
    .back {
        width: 100% !important;
        height: 160px !important;
    }

  .front {
      background-size: contain !important;
      background-color: #FFF;
  }

    .flip-container::after {
        display: none
      }
    }


@media (max-width: 620px) {
    
    .lokacije-wrapper {
        width: 290px;
        margin-left: auto;
        margin-right: auto;
    }
    
        
    }

@media (max-width: 340px) {
    
    .main-nav {
        width: 65%;
    }

    .product {
        flex-direction: column;
        align-items: center;
        justify-items: center;
        margin-bottom: 0;
        width: 100% !important;
        height: 1105px !important;
    }

    .beer-content {
        align-self: center;
    }

    .bottle {
        margin-bottom: 20px;
    }

    .header-wrapper {
        width: 95vw;
        }
    }


    @media all and (-webkit-min-device-pixel-ratio : 1.5),
 all and (-o-min-device-pixel-ratio: 3/2),
 all and (min--moz-device-pixel-ratio: 1.5),
 all and (min-device-pixel-ratio: 1.5) {
 
/* LESKOVAC */


#front-hotel-abc {
    background-image: url('img/logo-abc-hotel@2x.jpg');
}

#front-abc-safari {
    background-image: url('img/logo-abc-safari@2x.jpg');
}

#front-spin {
    background-image: url('img/logo-spin@2x.jpg');
}

#front-nasapumpa {
    background-image: url('img/logo-nasapumpa@2x.jpg');
}

#front-gpetrol {
    background-image: url('img/logo-gpetrol@2x.jpg');
}

/* Vlasotince */

#front-barley {
    background-image: url('img/logo-barley@2x.jpg');
}

/* Sokobanja */

#front-zabac {
    background-image: url('img/logo-zabac@2x.jpg');
}

#front-zabac {
    background-image: url('img/logo-zupan@2x.jpg');
}

/* Krusevac */

#front-rooster {
    background-image: url('img/logo-rooster@2x.jpg');
}

/* VRANJE */

#front-shamrock {
    background-image: url('img/logo-shamrock@2x.jpg');
}

/* SURDULICA */

#front-bonita {
    background-image: url('img/logo-bonita@2x.jpg');
}
 }
/*==========================
        ANIMATIONS
==========================*/

    @keyframes moveInTop {
        0% {
            opacity: 0;
            transform: translateY(-40px);
        }
    
        100% {
            opacity: 1;
            transform: translate(0);
        }
    }

    @keyframes moveInBottom {
        0% {
            opacity: 0;
            transform: translateY(40px);
        }
    
        100% {
            opacity: 1;
            transform: translate(0);
        }
    }

    @keyframes moveInRight {
        0% {
            opacity: 0;
            transform: translateX(-25px);
        }
    
        100% {
            opacity: 1;
            transform: translate(0);
        }
    }