/* Desktop
Fonts//
font-family: 'ardaghbold'; Ardagh
font-family: 'banglenormal'; Bangle

Colors//
dark maroon #391100
lighter maroon #39090A
darker maroon #220A00
yellow-ish #FFD961
lighter yellow #FFF0C0
light blue #BEE7FA


*/
*{
    text-decoration: none; box-sizing: border-box;}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: #39090A; font-size: 100%;
}
img {max-width: 100%;}

header {
    width: 100%;
    height: 266px;
    background-image: url(images/map1bg.jpg);
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}
.logo:hover{opacity: .7;}

.navbrown{
    padding-top: 45px;
    padding-bottom: 45px;
    width: 100%;
    height: 100%;
    background-color: #39090A;

}
nav {
    padding: 1.5%;
    width: 66%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
nav a {
    font-family: 'ardaghbold';
    font-size: 52px;
    font-style: normal;
    color: #FFD961;
    transition: all .2s ease;
    letter-spacing: 2px;
}
nav a:hover {
    color: #FFF0C0;
}
.rectangle_up{
    margin: auto;
    width: 80%;
    height: 10px;
    background-color: #FFD961;
}
.rectangle_down{
    margin: auto;
    width: 80%;
    height: 10px;
    background-color: #FFD961;
}

main{
    background-color: #220A00;
    height: 100%;
}
.area1{
    width: 100%;
    height: 1340px;
    background-image: url(images/swirls.png);
    background-repeat: no-repeat;
    background-size: 100%; 
    /* reduce image size 75% NEVER MIND SCALE: WORKS IGUESS */
    margin: auto;
    padding-top: 6%;
}
.slideshow{
    width: 856px;
    height: 690px;
    scale: 110%;
    background-color: #39090A;
    border-radius: 25px;
    filter: drop-shadow(11px 14px 20px black);
    padding-top: 1.5%;

    margin: auto;
    align-items: center;
    text-align: center;
}
/*slideshow*/
.carousel-cell {
    height: 622px;
    margin-right: 10px;
    background: #FFF;
    counter-increment: gallery-cell;
}
.carousel {max-width:960px; margin:auto;}

.suns{
    top: 1450px;
    position: absolute;
}
.button-wrapper-cta {
    display: block;
    text-align: center;
    margin-top: 5%;
}
  
.cta-button {
    border: none;
    border-radius: 25px;
    box-shadow: 2px 9px 11px rgba(0, 0, 0, 0.5);
    color: #000;
    display: inline-block;
    font-family: ardaghbold;
    font-size: 36px;
    text-decoration: none;
    padding: 0.7em 1.5em;
    width: auto;
}
.cta-button:hover{
    color:#fff;
}
  
.button-cta {
    background-color: #FFD961;
    transition: all .2s ease;
}
.button-cta:hover {
    background-color: #39090A;
}
#ourstoryyellow{
    background-color: #FFF0C0;
}
.ourstoryarea {
    width: 100%;
    height: 950px;
    max-width: 1400px;
    margin: auto;
    background-color: #FFF0C0;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.left {width: 40%;}
.right {width: 40%;}
h1 {
    margin: auto;
    font-family: 'ardaghbold';
    font-size: 76px;
    font-style: normal;
    letter-spacing: 6px;
}
.story_underline{    
    width: 100%;
    height: 10px;
    background-color: #4D291A;
}
p {
    font-family: 'banglenormal';
    font-size: 20px;
    font-style: normal;
    line-height: 30px;
}
.food_img {width: 105%; filter: drop-shadow(6px 6px 12px black);}

.drink_container {
    width: 100%;
    height: 1380px;
    max-width: 1400px;
    margin: auto;
}
.drink_container h3 {margin: 0;}
.drinkheader {
    margin-top: 20px;
    /* background-color: #220A00; */

    display:flex;
    flex-direction:column; 
    flex-wrap:wrap; 
    justify-content:space-between;
    align-items: center;
}
h2 {
    font-family: 'ardaghbold';
    font-size: 60px;
    font-style: normal;
    letter-spacing: 6px;
    color: white;
}
.drinkrectangle_top {
    margin: 2%;
    width: 900px;
    height: 9px;
    background-color: #FFD961;
}
.drinkrectangle_bottom {
    margin-bottom: 50px;
    position: relative;
    bottom: 20px;
    width: 900px;
    height: 9px;
    background-color: #FFD961;
}
.drinkrectangle_horizontal {
    position: absolute;
    width: 1300px;
    height: 9px;
    background-color: #FFD961;
    border-radius: 25px;
}
.drinkrectangle_vertical {
    position: absolute;
    width: 9px;
    height: 870px;
    background-color: #FFD961;
    border-radius: 25px;
}

h3 {
    font-family: 'banglenormal';
    font-size: 30px;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 1px;
    color: #FFD961;
}

.drink_all {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.left_drinks {width: 40%;}
.right_drinks {width: 40%;}
.drink1{padding-bottom: 10%; text-align: center;}
.drink2{padding-bottom: 10%; text-align: center;}
.drink3{text-align: center;}
.drink4{text-align: center;}

footer {
    width: 100%;
    height: 100%;
    background-image: url(images/footer.jpg);
    background-size: cover;

    display:flex; 
    flex-direction:row; 
    flex-wrap:wrap; 
    justify-content: space-around;
    align-items: center;

}
footer p{
    font-family: 'banglenormal';
    font-size: 20px;
    font-style: normal;
    letter-spacing: 1px;
    line-height: 10px;
}
h4 {
    padding-top: 20px;
    margin: 0%;
    font-family: 'banglenormal';
    font-size: 32px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 1px;
    line-height: 42px;
}
.footer_headline{
    width: 100%;
    text-align: center;
}
.footer_socials{
    text-align: center;
    width: 33%;
}
.footer_socials a img{
    height: 90px;
}
.footer_icons{
    padding: 3%;
}
.footer_icons:hover {opacity: 0.7;}
.footer_left{
    padding-left: 60px;
    text-align: left;
    width: 33%;
}
.footer_right{
    padding-right: 60px;
    text-align: right;
    width: 33%;
}

/*start of menu html*/
strong {
    font-family: 'banglenormal';
    font-size: 28px;
    font-style: normal;
    letter-spacing: -2px;
}
.tabs h4 {
    padding-top: 0;
    font-size: 26px;
}
.tabs p {
    padding-bottom: 40px;
    font-size: 18px;
}
.menuYellow {
    background: #FFF0C0; 
    background-image: url(images/bg-swirls-menu.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.menuContainer {
    padding-top: 30px;
    width: 100%;
    height: 100%;
    max-width: 1100px;
    margin: auto;
}
 /*Tabs*/
 .menu_underline{
    top: 120px;
    position: relative;
    width: 100%;
    height: 10px;
    background-color: #39090A;
 }
 .tabs {
   display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
     width:100%;
     max-width:1200px;
     margin: auto;
 }
 
 .tabs label {
   -webkit-box-ordinal-group: 2;
           order: 1;
   display: block;
   padding: 1rem 3rem;
   margin-right: 2rem;
   filter: drop-shadow(5px 7px 10px black);
   border-radius: 15px;
   cursor: pointer;
   background: #FFD961;
   font-family: ardaghbold;
   font-size: 32px;
   letter-spacing: 1px;
   color: #39090A;
   -webkit-transition: background ease 0.2s;
   transition: background ease 0.2s;
 }
 
 .tabs .tab {
   -webkit-box-ordinal-group: 100;
           order: 99;
   -webkit-box-flex: 1;
           flex-grow: 1;
   width: 100%;
   display: none;
   padding: 3rem;
   margin: 5%;
   /* text-align: center; */
 }
 
 .tabs input[type="radio"] {
   display: none;
 }
 
 .tabs input[type="radio"]:checked + label {
   background: #39090A;
   color:#FFD961; /*changes text color on click*/
 }
 
 .tabs input[type="radio"]:checked + label + .tab {
   display: flex;
 }
 
 @media (max-width: 45em) {
   .tabs .tab,
   .tabs label {
     -webkit-box-ordinal-group: initial;
             order: initial;
   }
 
   .tabs label {
     width: 100%;
     margin-right: 0;
     margin-top: 0.2rem;
   }
 }
 /*Generic Styling*/
/*start of items on the left*/
.menuLeft {width: 50%; padding-right: 50px;}
/*start of items on the right*/
.menuRight {width: 50%; padding-left: 30px;}
.menuDrinkRight {width: 50%; padding-left: 80px;}
.menuDrinkLeft {width: 50%; padding-right: 60px;}
.menuDessertsLeft {width: 50%; padding-right: 60px;}
.menuDessertsRight {width: 50%; padding-left: 80px;}

/*GALLERY HTML*/
.gallery_area{width: 100%; height: 100%;}
.gallery_box {
    padding-left: 10%;
    padding-right: 10%;
    margin: auto;
    align-items: center;
    text-align: center;
    background-color: #220A00;
    background-image: url(images/bg-swirls-menu.png);
    background-size: cover;
    background-repeat: repeat-y;
    padding-top: 7px;
    padding-bottom: 60px;
}
.gallery_box h3 {font-size: 48px;}
h5 {
    font-family: 'banglenormal';
    font-size: 48px;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 1px;
    color: #FFD961;
}
.gallery_box .drinkrectangle_top {
    margin: -20px auto;
    width: 100%;
    background-color: #FFD961;
}
.gallery-carousel-cell {
    height: 890px;
    margin-right: 60px;
    counter-increment: gallery-cell;
  }
.gallery-carousel-cell p {
    margin: -20px;
    color: #FFF;
  }
.gallery-carousel {max-width:960px; margin:auto; padding-top: 60px;}

/*CONTACT FORM HTML*/
.contact_background{
    width: 100%;
    height: 100%;
    padding: 2.5%;
    background-image: url(images/bg-swirls-menu.png);
    background-size: cover;
    background-repeat: repeat-y;
}
.contact_background h4{
    font-size: 40px;
    text-align: center;
    padding-bottom: 40px;
    color: #FFF0C0;
    text-decoration: underline;
}
.contact_background p{
    font-size: 20px;
    text-align: center;
    padding-top: 40px;
    color: #FFF0C0;
}
 /* Style inputs with type="text", select elements and textareas */
 input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    font-weight: 550;
    background-color: #FFD961;
    color: #220A00;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #FFF0C0;
  }
  
  /* Add a background color and some padding around the form */
  .container {
    margin: auto;
    width: 40%;
    border-radius: 5px;
  } 

  .container label {
    font-family: banglenormal;
    font-size: 20px;
    color: #FFD961;
    letter-spacing: 1px;
  }


/* Tablet
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 551px) and (max-width: 900px)
{
    .navbrown {display:none;}
    nav {display:none;}
    body {background-color: #39090A;}
    .drinkrectangle_vertical {display: none;}
    .drinkrectangle_horizontal {display: none;}
    .drinkrectangle_top {display: none;}
    .drinkrectangle_bottom {margin-bottom:-3%; width:465px;}
    header {height:100%;}
    h1 {font-size: 60px; padding-top: 25px;}
    .area1 {height:100%; background-size: contain; background-repeat: repeat-y;}
    .slideshow {width:500px; height:430px; scale: 100%; bottom:0px; position: relative; filter: drop-shadow(0px 0px 15px black);}
    .carousel-cell {height:380px;}
    .cta-button {font-size: 32px;}
    .suns{top:80px; width: 100%; position: relative;}
    .ourstoryarea{height: 100%; text-align: center; padding: 5%; flex-direction: column;}
    .food_img{padding-top: 40px; width: 100%;}
    .left{width:100%;}
    .left p {font-size: 16px;}
    .right{width:50%;}
    .drink_container{
        width: 100%; 
        height: 100%;     
        background-image: url(images/bg-swirls-menu.png);
        background-repeat: repeat-y;
        background-size: 100% 100%;
    }
    .drinkheader{margin-top: 40px; text-align: center;}
    .drinkheader img {width: 35%;}
    .left_drinks{width:100%;}
    .right_drinks{width:100%;}
    .drink1{padding: 4%;}
    .drink2{padding: 4%;}
    .drink3{padding: 4%;}
    .drink4{padding: 4%;}
    h2 {font-size: 42px;}
    h3 {font-size: 26px;}
    h4 {padding-top: 22px;}
    footer h4 {font-size: 26px;}
    footer p{font-size: 18px;}
    .footer_socials{width: 100%; text-align: center;}
    .footer_socials a img{height: 110px;}
    .footer_left{width:100%; text-align: center; padding-left: 0px;}
    .footer_right{width:100%; text-align: center; padding-right: 0px;}

    /*menu page tablet*/
    .menuYellow {background-repeat: repeat-y;}
    .menuRight {width: 100%; padding: 0;}
    .menuRight img {display:none;}
    .menuLeft {width: 100%; padding: 0;}
    .menuLeft img {display:none;}
    .menuDrinkLeft {width: 100%;}
    .menuDrinkRight {width: 100%;}
    .menuDrinkLeft img {display: none;}
    .menuDrinkRight img {display: none;}
    .menuDessertsLeft {width: 100%;}
    .menuDessertsRight {width: 100%;}
    .menuDessertsLeft img {display: none;}
    .menuDessertsRight img {display: none;}
    .menu_underline {display: none;}
    .menuContainer {max-width: 100%; padding-bottom: 25px;}
    .tabs {max-width: 90%;}
    .tabs .tab{margin: auto; padding: 0; padding-top: 30px; padding-left: 20px;}

    /*gallery page tablet*/
    .gallery_box{background-image: none;}
    .gallery_box h3 {padding-bottom: 0px; font-size: 22px;}
    .gallery_box p {padding-bottom: 0px; font-size: 14px;}
    .gallery-carousel {padding-top: 30px;}
    .gallery-carousel-cell{height: 600px;}
    h5 {font-size:42px;}
    .gallery_box .drinkrectangle_top{display: block; margin: auto; height:5px;}

    .container{width:90%;}
    .contact_background {background-image: none;}
    .contact_background p {padding-top: 10px;}


}
/* Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 550px)
{
    .navbrown {display:none;}
    nav {display:none;}
    body{background-color: #39090A;}
    .drinkrectangle_vertical {display: none;}
    .drinkrectangle_horizontal {display: none;}
    .drinkrectangle_top {display: none;}
    .drinkrectangle_bottom {position: absolute; margin-bottom:-6%; width:300px;}
    header {height:100%;}
    h1 {font-size: 60px; padding-top: 25px;}
    .area1 {padding-top: 10%; height: 440px; background-size: contain; background-repeat: repeat-y;}
    .slideshow {padding-top: 3%; width:250px; height:230px; scale: 100%; bottom:0px; position: relative; filter: drop-shadow(0px 0px 15px black);}
    .carousel-cell {height:187px;}
    .cta-button {font-size: 26px; padding: 0.6em 1.4em;}
    .suns{top:30px; position: relative;}
    .ourstoryarea{height: 100%; text-align: center; padding: 5%; flex-direction: column;}
    .food_img{padding-top: 40px; padding-bottom: 20px; width: 100%;}
    .left{width:100%;}
    .left p {font-size: 16px;}
    .right{width:80%;}
    .drink_container{width: 100%; height: 100%;}
    .drinkheader{margin-top: 20px; scale: 90%; text-align: center;}
    .left_drinks{width:100%;}
    .right_drinks{width:100%;}
    .drink1{padding: 5%;}
    .drink2{padding: 5%;}
    .drink3{padding:5%;}
    .drink4{padding:5%;}
    h2 {font-size: 42px;}
    h3 {font-size: 26px;}
    h4 {padding-top: 22px;}
    footer h4 {font-size: 22px;}
    footer p{font-size: 16px;}
    .footer_socials{width: 100%; text-align: center;}
    .footer_socials a img{height: 72px;}
    .footer_left{width:100%; ;}
    .footer_right{width:100%; text-align: left; padding-right: 0px; padding-left: 60px;}

    /*menu page mobile*/
    .tabs input[type="radio"]:checked + label + .tab {
        display: flex;
        flex-direction: column;
      }
    .menuYellow {background-image: none;}
    .menuRight {width: 100%; padding: 0;}
    .menuRight img {display:none;}
    .menuLeft {width: 100%; padding: 0;}
    .menuLeft img {display:none;}
    .menuLeft h4 {font-size: 20px;}
    .menuRight h4 {font-size: 20px;}
    .menuDrinkLeft {width: 100%; padding: 0;}
    .menuDrinkRight {width: 100%; padding: 0;}
    .menuDrinkRight br {display: none;}
    .menuDrinkLeft img {display: none;}
    .menuDrinkRight img {display: none;}
    .menuDessertsLeft {width: 100%; padding: 0;}
    .menuDessertsRight {width: 100%; padding: 0;}
    .menuDessertsLeft img {display: none;}
    .menuDessertsRight img {display: none;}
    .menu_underline {display: none;}
    .menuContainer {max-width: 100%; padding-bottom: 25px;}
    .tabs {max-width: 90%;}
    .tabs .tab{margin: auto; padding: 0; padding-top: 30px; padding-left: 0px;}

    /*gallery page mobile*/
    .gallery_box{background-image: none;}
    .gallery_box h3 {padding-bottom: 0px; font-size: 22px;}
    .gallery_box p {padding-bottom: 0px; font-size: 14px;}
    .gallery-carousel {padding-top: 30px;}
    .gallery-carousel-cell{height: 380px;}
    h5 {font-size:16px}
    .gallery_box .drinkrectangle_top{display: block; margin: auto; height:5px;}

    .container{width:90%;}
    .contact_background {background-image: none;}
    .contact_background p {padding-top: 0px;}
}