/* =================
    CSS Varables
==================== */
:root {
    --green: #7bed9f;
    --light-orange: #99bd99;
    --wet-asphalt: #34495e;
}

* {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    width: 100vw;
    display: block;
    font-family: 'Kodchasan', sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
}

main {
    display: none;
}

.loader {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #99bd99;
    transition: all .3s ease-out;
    transform: translateY(0);
}


.loader img {
    width: 40vh;
    display: block;
    animation: wobble-hor-bottom 0.8s infinite;

}

/* ----------------------------------------------
 * Generated by Animista on 2019-2-3 21:15:11
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-bottom fdss
 * ----------------------------------------
 */

@keyframes wobble-hor-bottom {

    0%,
    100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(-30px) rotate(-6deg);
    }

    30% {
        transform: translateX(15px) rotate(6deg);
    }

    45% {
        transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
        transform: translateX(9px) rotate(2.4deg);
    }

    75% {
        transform: translateX(-6px) rotate(-1.2deg);
    }
}


.logo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.logo a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.logo h1 {
    margin: 0;
    font-size: 18px;
    display: inline-block;
    color: #000;
    font-family: 'Kodchasan', cursive;
    font-weight: normal;
    font-stretch: condensed;
    transform: scaleY(1.8);
}

.logo img {
    width: auto;
    height: 40px;
    margin-right: 5px;
}

.logo a,
.main-nav li {
    padding: 4px 10px;
    height: 100%;
    text-align: center;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.main-nav li {
    color: rgba(255, 255, 255, 0.9);
    font-size: .99em;
    text-transform: uppercase;
    transition: .2s all;
    color: #fff;

}

.main-nav li:hover {
    color: #000;
}

.menuBtn {
    position: absolute;
    top: 18px;
    cursor: pointer;
    right: 20px;
    color: #000;
    z-index: 10;
    display: none;
}

.header {
    background-color: #99bd99;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    padding: 0 5vw;
    transition: all .25s ease-out;
}

.navHeight {
    height: auto;
}


/* =============================
  style the sections
================================*/

section {
    height: 100vh;
}

.home {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

}

.home img {
    width: 50vw;
    max-width: 700px;
    margin-top: 5vh;
	animation: slide-left 0.6s .6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}


@keyframes slide-left {
    0% {
      transform: translateX(-800px);
    }
    100% {
      transform: translateY(0);
    }
  }



.home .text1 {
    width: 40vw;
          margin-top:5vh;
    transform: translateY(-150px);
    border: 6.5px solid #99bd99;
    color: #fba700;
    border-radius: 18px;
    padding: 15px;
    box-sizing: border-box;
    opacity: 0;
    text-align: center;
    animation: fadeIn 0.4s .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}
.merendinhacirlclelogo {
  max-width:20vh !important;
}

@keyframes fadeIn {
    100% {
        opacity: 1;

    }
}




.home h1 {
    font-size: 4em;
    margin:0 10px;
    padding-top:10px;
    font-family: 'Kodchasan', cursive;
    font-weight: normal;
    text-decoration:underline;
    font-stretch: condensed;
    transform: scaleY(1.8);
}

.home h2 {
    font-weight: normal;
}

.products {
    position: relative;
    /* background: #ffa502; */
    /* background: radial-gradient(#fdc25442, var(--light-orange)); */

}

.products .title {
    text-align: center;
    text-transform: capitalize;
    padding: 15px;
    font-size: 2.5em;
    color: #fff;
    background: linear-gradient(to right, #99bd99, #4cb671);
}

/* juice slider */
.juice-slider {
    /* background: linear-gradient(to right, #fba700 10% , #fff 50% 60%, #fba700 90% 100%); */
    margin-top: 7%;
    height: 60vh;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0 5%;
    /* position: relative; */

}

.sliderLeftBtn,
.sliderRightBtn {
    color: #000;
    position: absolute;
    font-size: 50px;
    top: calc(50% - 30px);
    background: var(--light-orange);
    opacity: .5;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    z-index: 10;
    transition: ease-out all .25s;
}

.sliderLeftBtn:hover,
.sliderRightBtn:hover {
    opacity: 1;
    transform: scale(1.05);
}

.sliderLeftBtn i,
.sliderRightBtn i {
    display: inline-block;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
}

.sliderRightBtn {
    right: 2px;
}

.sliderLeftBtn {

    left: 2px;
}

.juice-slider::-webkit-scrollbar {
    display: none;
}

.juice-slider img {
    height: 100%;
}


.about {
    /* background: linear-gradient(to right, #f7b733, #fc4a1a); */
    position: relative;
}

.about .title {
    text-align: center;
    font-size: 2.5em;
    color: #fff;
    padding: 15px;
    font-size: 2.5em;
    color: #fff;
    background: linear-gradient(to left, #99bd99, #4cb671);
}

.about .container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.about img[alt='splash'] {
    width: 30vw;
}

.about img[alt='juice-splash'] {
    width: 100%;

}

.juicyBG {
    display: inline-block;
    max-width: 600px;
    height: 60vh;
    margin: 20px;
    flex-grow: 1;
    background: url('../images/merendinha-exterior-view.jpg') no-repeat center center;
    background-size: contain;

}

.about .aboutTxt {
    margin: 20px;
    max-width: 400px;
    color: #f3aa1d;
    font-size: 1.2em;
    text-align: center;
    font-size: 1.8em;
    color: var(--wet-asphalt);
    background: rgba(255, 255, 255, 0.444);
}

.juicyBGold{
    background: url('../images/merendinha-exterior-view.jpg') no-repeat;
    background-size: contain;
    background-position: bottom;
    position: absolute;
    z-index: -10;
    bottom: 0;
    width: 100%;
    height: 90%;
}

.about .aboutTxtold {
    text-align: center;
    font-size: 1.8em;
    max-width: 700px;
    margin: 2% auto;
    color: var(--wet-asphalt);
    background: rgba(255, 255, 255, 0.444);
    padding: 5px 20px;
    position:absolute;
      bottom: 0;
}
.menu {
    height: 170vh;
}


.menu .title {
    border-top: 2px solid #fff;
    text-align: center;
    font-size: 2.5em;
    color: #fff;
    padding: 15px;
    font-size: 2.5em;
    color: #fff;
    background: linear-gradient(to right, #99bd99, #4cb671);
}


.caixa {
  border: 4px black solid;
  background: rgb(255,241,0);
  background: linear-gradient(130deg, #99bd99 0%, #4cb671 100%);
  padding:2%;
  margin:3%;
  margin-left: 17%;
  margin-right: 17%;
}

.div_subclasses {
    padding: 1%;
}

.ingrediente_descricao {
    padding-left: 23%;
    padding-bottom: 0.9%;
}

.subtitulos {
    padding-bottom: 0.3%;
    text-align:center;
}

.item {
    padding-left: 23%;
}

.ingredientes {
    font-size: 0.72em;
}

@media only screen and (max-device-width: 1300px) {
    .caixa {
        margin-left: 12%;
        margin-right: 12%;
    }

    .ingrediente_descricao {
        padding-left: 15%;
        padding-bottom: 0.9%;
    }

    .div_subclasses {
        padding: 2%;
    }

    .item {
        padding-left: 15%;
    }
}

@media only screen and (max-device-width: 800px) {
    .caixa {
        margin-left: 7%;
        margin-right: 7%;
    }

    .ingrediente_descricao {
        padding-left: 10%;
        padding-bottom: 0.9%;
    }

    .div_subclasses {
        padding: 2%;
    }

    .item {
        padding-left: 10%;
    }
}


.contact {
    height: 85vh;
}


.contact .title {
    border-top: 2px solid #fff;
    text-align: center;
    font-size: 2.5em;
    color: #fff;
    padding: 15px;
    font-size: 2.5em;
    color: #fff;
    background: linear-gradient(to left, #99bd99, #4cb671);
}

.contact .container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.map {
    max-width: 600px;
    height: 60vh;
    margin: 20px;
    flex-grow: 1;

}

.addressBox {
    display: inline-block;
    margin: 20px;
    max-width: 400px;
    color: #f3aa1d;
    font-size: 1.2em;
}

.addressBox a {
    color: #f3aa1d;
}

.addressBox div {
    display: flex;
    align-items: center;
}

.addressBox i {
    margin-right: 10px;
    font-size: 1.8em;
}

.addressBox p {
    display: inline-block;
    margin: 14px 0;
}

/* footer style */

footer {
    background: #99bd99;
    position: relative;
    /* height: 15vh; */
    text-align: center;
    color: rgba(255, 255, 255, .815);
}

footer a {
    color: rgba(255, 255, 255, .815);
}

.designedBy {
    font-size: 1.2em;
    padding: 10px;
    /* line-height: 8vh; */
}

.copyright {
    background: rgba(51, 51, 51, .08);
    font-size: 1.1em;
    padding: 10px;
    bottom: 0;
}

/* =================================
  Media Queries
==================================== */




@media (min-width: 769px) {

    .header,
    .main-nav {
        display: flex;
    }

    .header {
        flex-direction: column;
        align-items: center;

    }

}

@media (min-width: 1025px) {
    .header {
        flex-direction: row;
        justify-content: space-between;
    }

}



@media (max-width: 769px) {
    .home .text1 {
        order: -1;
        transform: none;
        width: 90vw;
    }

    .home h1 {
        font-size: 3em;
    }

    .home img {
        width: 70vw;
    }

    .home {
        flex-direction: column;
    }

    header {
        height: 60px;

    }

    .menuBtn {
        display: block;
    }

    .menu .container {
        flex-direction: column;
        font-size: .8em;
    }

    .aboutTxt {
        order: -1;
    }

    .juicyBG {
        flex-grow: 1;
        height: auto;
    }
    .contact .container {
        flex-direction: column;
        font-size: .8em;
    }

    .addressBox {
        order: -1;
    }

    .map {
        flex-grow: 1;
        height: auto;
    }

    .juice-slider img {
        height: 85%;
        margin-top: 20%;
    }
}