*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

:root {
    --primary: brown;
}

.logo-outter {
  width: 100%;
  background: #603813;  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg,#25190D ,#603813, #25190D);  /* Chrome 10-25, Safari 5.1-6 */
  padding-bottom: 30px;
  border-bottom: 3px solid #fff;
  border-top: 3px solid #fff;
}

.logo-inner {
  position: relative;
  top: 20%;
  text-align: center;
}

.logo-back {
  position: relative;
  top: 20%;
  background-color: #000;
  padding: 20px 0 20px 0;
  filter: drop-shadow(0px 5px 3px #111);
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

p {
  position: relative;
  font-family: 'Dancing Script', cursive;
  font-size: 10em;
  letter-spacing: 4px;
  overflow: hidden;
  background: -webkit-linear-gradient(#25190D,gold, #25190D);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

.pepper {
  width: 200px;
  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation-delay: 3s;
}

.pepper-div{
  position: relative;
  top: 15%;
  text-align: center;
}

.arrow-div {
  position: relative;
  top: 27%;
  text-align: center;
}

.arrow {
  filter: drop-shadow(0px 5px 3px #111);
  animation: arrow .35s ease-in alternate infinite, pepper 2s linear;
}

main {

}

.header-text{
  font-size: 80px;
  font-weight: bold;
  color: #fff;
  padding: 30px 0 30px 0;
  text-shadow: 0 0 5px #000;
  font-family: 'Dancing Script', cursive;
}

.header-text-outter {
  text-align: center;
  width: 100%;
  background: -webkit-linear-gradient(180deg,#25190D ,#603813, #25190D);
  filter: drop-shadow(0px 5px 3px #111);
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
}


.main-pic-div {
  padding: 50px 0 50px 0;
}

.main-pic-div-outter {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.main-pic {
  display: block;
  border-radius: 5px;
  max-width: 750px;
  border: 3px solid #000;
  box-shadow: 0 0 5px black;
  margin: 0 auto;
}

.about-text {
  text-align: justify;
  background: -webkit-linear-gradient(180deg,#25190D ,#603813, #25190D);
  border-radius: 5px;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  box-shadow: 0 0 5px black;
  width: 700px;
  margin: 0 auto;
}

.inner-text {
  color: #fff;
  text-shadow: 0 0 5px #000;
  font-weight: bold;
  padding: 20px;
}

.about {
  background-image: url(./Media/salad-2068220_1920.jpg);
  height: 100%;
  padding-bottom: 50px;
}

.about-inner {

}

.arrows {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  width: 750px;
  display: flex;
}

.prev{
  flex: 1;
  padding-top: 500px;
  width: 100%;
}

.next{
  padding-top: 500px;
  width: 100%;
  flex: 1;
}

.music {
  padding-bottom: 100px;
  padding-top: 100px;
  margin-left: 20%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 20px 20px;
}

.music-outter {
 background-image: url(./Media/microphone-2130806_1920.jpg);
 padding: 100px 0 100px 0;
}

.square-flip{
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;

  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  transform: perspective(1000px);

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

  /*border:1px solid #efefef;*/
  
  position:relative;
  float:left;
  margin:20px;
  flex: 1;
  }



  .square-flip{
    width:400px;
    height:400px;
  }
  .square,.square2{
    width:100%;
    height:100%;
  }
  .square{

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

    -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
        transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
        -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
    overflow: hidden;

    position:absolute;
    top:0;


    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
  }
  .square-flip .square{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    z-index:1;
  }
  .square-flip:hover .square{
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    transform-style: preserve-3d;
  }

  .square2{

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

    -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
        transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
        -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
    overflow: hidden;

    position:absolute;
    top:0;

    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
  }
  .square-flip .square2{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    z-index:1;
  }
  .square-flip:hover .square2{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    transform-style: preserve-3d;
  }

  /*Square content*/
  .square-container{
    padding:40px;
    text-align:center;
    position:relative;
    top:50%;

    -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
        transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
        -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);

  
    -webkit-transform: translateY(-50%) translateX(0px)  scale(1);
    -ms-transform: translateY(-50%) translateX(0px)  scale(1);
transform: translateY(-50%) translateX(0px)  scale(1);
    transform-style: preserve-3d;
    z-index:2;
  }
  .square-flip:hover .square-container{
    
    -webkit-transform: translateY(-50%) translateX(-650px)  scale(.88);
    -ms-transform: translateY(-50%) translateX(-650px)  scale(.88);
    transform: translateY(-50%) translateX(-650px)  scale(.88);
    transform-style: preserve-3d;

  }

  .square-container2{
    padding:40px;
    text-align:center;
    position:relative;
    top:50%;

    -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
        transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
        -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);

    
    -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
    -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
    transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);

    transform-style: preserve-3d;
    z-index:2;
  }
  .square-flip:hover .square-container2{
    
    -webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
    -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
    transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
    transform-style: preserve-3d;
  }



  /*Style text*/
  .square-flip h2{
    color:white;
    font-family: 'Poppins', sans-serif;
    font-weight:700;
    font-size:22px;
  }
  .square-flip h3{
    color:white;
    font-family: 'Poppins', sans-serif;
    font-weight:500;
    font-size:16px;
    line-height:26px;
  }
  /*Elements*/
  .flip-overlay{
    display:block;
    background:rgba(0,0,0,0.5);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
  }
  .align-center{
    margin:0 auto;
  }
  .kallyas-button{
    display:block;
    width:160px;
    padding:18px 30px;
    font-family: 'Poppins', sans-serif;
    font-weight:600;
    color:#fff;
    background:#FF2024;
    margin:0 auto;
    border-radius:2px;
    text-decoration:none;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa067+0,ff2959+49,ff2024+100 */
    background: #ffa067; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #ffa067 0%, #ff2959 49%, #ff2024 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #ffa067 0%,#ff2959 49%,#ff2024 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #ffa067 0%,#ff2959 49%,#ff2024 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa067', endColorstr='#ff2024',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }


  /*ADD SHADOWS OPTIONAL*/
  .square-flip .square .boxshadow, .square-flip .square .textshadow, .square-flip .square2 .boxshadow, .square-flip .square2 .textshadow{
    -ms-transition: 0.60s;
        transition: 0.60s;
        -webkit-transition: 0.60s;
  }

  .square-flip .square .boxshadow{
    -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
    -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
    box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  }
  .square-flip .square .textshadow{
    -webkit-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
    -moz-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
    text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  }
  .square-flip:hover .square .boxshadow, .square-flip:hover .square .textshadow{
    -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
    -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
    box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  }


  .square-flip .square2 .boxshadow{
    -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
    -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
    box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  }
  .square-flip .square2 .textshadow{
    -webkit-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
    -moz-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
    text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  }
  .square-flip:hover .square2 .boxshadow, .square-flip:hover .square2 .textshadow{
    -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
    -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
    box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  }

  
  /*You can delete this style*/
  .centerflipcards{
    display: flex;
    width:1330px;
    height:440px;
    text-align:center;
    margin:0 auto;
  }

.clearfix{clear:both;}
.centerflipcards p{
  font-family: 'Poppins', sans-serif;
    font-size:13px;
    margin-top:10px;
    font-weight:700;
}

.band {
  width: 300px;
  box-shadow: 0 0 5px #fff;
}

.meni  {
 background-image: url(./Media/menu-3206749_1920.jpg);
}

.catalogue {
  margin: 0 20% 0 20%;
  padding: 100px 0 100px 0;
}

.offers {
  padding: 10px 0px 10px 0px;
  display: flex;
}

.offer-des {
  flex: 5;
}

.price {
  flex: 1;
  justify-content: flex-end;
}

.collapsible {
  background-color: #603813;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-weight: bold;
  border-radius: 6px;
}

.active, .collapsible:hover {
  background-color: #25190D;
  color: #fff;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px ;
}

.catalogue-kind {
  margin: 10px 0px 10px 0px;
  box-shadow: 0 0 5px #111;
  border: 3px solid #000;
  border-radius: 10px;
}

footer {
  height: auto;
  background: -webkit-linear-gradient(180deg,#25190D ,#603813, #25190D);
  border-top: 5px solid #25190D;
}

.footer-content {
  margin-left: 25%;
  margin-right: 25%;
  display: flex;
}

.contact-header {
  text-align: center;
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  padding: 15px 0px 30px 0px;
}

.contact-icons {
  display: flex;
  justify-content: center;
}

.cnt {
  padding: 5px 5px 5px 5px;
}

.contact-info {
  flex: 1;
  color: #fff;
  font-size: 20px;
}

.soc-media {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.social-media {
  flex: 1;
}

.contacts {
  padding: 5px 0px 5px 0px;
  display: flex;
}

.cnt-info {
  padding-left: 10px;
}

.copy-right {
  text-align: center;
  color: #fff;
  margin-top: 80px;
  padding-bottom: 20px;
}


@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

@keyframes pepper {
  0%{
    opacity: 0;
  }
  25%{
    opacity: 0.25;
  }
  50%{
    opacity: 0.50;
  }
  75%{
    opacity: 0.75;
  }
  100%{
    opacity: 1;
  }
}

@keyframes arrow {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media screen and (max-width: 1100px) {
  .centerflipcards {
    width: 1000px;
  }

  .square-flip {
    width: 300px;
    height: 300px;
  }

  .band {
    width: 210px;
  }

  .music-outter {
    padding: 50px 0 50px 0;
  }
}

@media screen and (max-width: 800px) {
  .centerflipcards {
    flex-direction: column;
    width: 700px;
    height: 1300px;
  }

  .music-outter {
    padding: 50px 0 50px 0;
  }

  .main-pic {
    max-width: 700px;
  }

  .about-text {
    width: fit-content;
   margin: 0 20px 0 20px;
  }

  p {
    font-size: 8em;
  }

  .square-flip {
    margin: 0 auto;
    margin-bottom: 50px;
  }

  .catalogue {
    margin: 0 10% 0 10%;
  }

  .footer-content {
    margin: 0 15% 0 15%;
  }

  .soc-media {
    padding-top: 30px;
  }

  .prev {
    padding-top: 450px;
  }

  .next {
    padding-top: 450px;
  }
}

@media screen and (max-width: 600px) {
  .centerflipcards {
    flex-direction: column;
    width: 400px;
    height: 1200px;
  }

  .main-pic {
    max-width: 400px;
  }


  .square-flip {
    width: 350px;
    height: 350px;
  }

  .band {
    width: 270px;
  }

  .catalogue {
    margin: 0 20px 0 20px;
  }

  .footer-content {
    margin: 0 20% 0 20%;
  }

  .social-media {
    padding-top: 30px;
  }

  .arrows {
    width: 400px;
  }

  .prev {
    padding-top: 300px;
  }

  .next {
    padding-top: 300px;
  }

  .about-text {
    margin: 0 10px 0 10px;
  }

  p {
    font-size: 4em;
  }

  .contacts {
    justify-content: center;
  }

  .contacts {
    flex-direction: column;
    padding: 10px 0 10px 0;
  }

  .cnt-info {
    padding: 0;
    text-align: center;
  }

  .social-media {
    padding-top: 10px;
  }

  .footer-content {
    flex-direction: column;
  }
}

@media screen and (max-width: 400px) {
  .pepper {
    width: 150px;
  }

  .centerflipcards {
    width: 375px;
  }

  .square-flip {
    width: 330px;
  }

  .band {
    width: 250px;
  }

  p {
    font-size: 3.5em;
  }

  .main-pic {
    max-width: 350px;
  }

  .cnt-info {
    font-size: 15px;
  }

  .arrows {
    width: 350px;
  }

  .prev {
    padding-top: 270px;
  }

  .next {
    padding-top: 270px;
  }

  .header-text {
    font-size: 50px;
  }

  .inner-text {
    font-size: 12px;
  }
}

@media screen and (max-width: 350px) {
  .centerflipcards {
    width: 300px;
  }

  .square-flip {
    width: 300px;
  }

  .band {
    width: 220px;
  }


  p {
    font-size: 3em;
  }

  .main-pic {
    max-width: 300px;
  }

  .arrows {
    width: 300px;
  }

  .prev {
    padding-top: 250px;
  }

  .next {
    padding-top: 250px;
  }
}