* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-color: #000;
}

@font-face {
    font-family: gorillazfont;
    src: url(Gorillazfont/gorillaz_1.ttf);
}

#headercor {
    background-color: #f00;
    width: 100%;
    height: 111px;
}

.piso {

    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    background-color: #f00;
    height: 111px;
    padding-left: 24px;
    padding-right: 24px;
}

nav {
    width: 663px;
    height: 31px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;

}

#gheader {
    color: #fff;
    background-color: #f00;
    font-size: 60px;
    margin-bottom: 0px;

}

.bheader {
    background-color: #f00;
    font-size: 26px;
}

#olhos {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 26px;
    background: none;

}

h1 {
    font-family: gorillazfont;
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: 74px;
    color: #f00;
    background: none;
    margin-bottom: 60px;
}

#dicasemana {
    height: 712px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(imgs_gorillaz/Padrão.png);
    padding-left: 24px;
}

#dicatext {
    width: 575px;
    display: flex;
    flex-direction: column;
    background: none;
}

#bigg {
    font-size: 140px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;

}

h5 {
    font-family: "Inria Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    line-height: 36px;
    color: #3C3C3C;
    background: none;
}


#quotemurdoc {
    display: flex;
    justify-content: center;
    background-image: url(imgs_gorillaz/Group\ 4.svg);
    height: 251px;
}

#quoterussel {
    display: flex;
    justify-content: center;
    background-image: url(imgs_gorillaz/Group\ 5.svg);
    height: 264px;
}

#quotenoodle {
    display: flex;
    justify-content: center;
    background-image: url(imgs_gorillaz/Group\ 7\ \(1\).svg);
    height: 264px;
    background-color: #D80000;

}

#qmtxt {
    margin-top: 33px;
}

#qmtxtrussel {
    color: #EDEDED;
    margin-top: 33px;
}

#qmtxtnoodle {
    margin-top: 33px;
}

#micon {
    display: flex;
    justify-content: flex-end;
}


p {
    margin-bottom: 30px;

    font-family: "Inria Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: #EDEDED;
}

#cta {
    width: 130px;
    height: 40px;

    border-color: #E3686b;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;


    font-family: "Inria Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    color: #E3686b;
}

#cta:hover {
    background-color: #E3686b;
    color: #fff;
    transition-duration: s;

}

.cardlink:hover {
    color: #87C766;
    font-size: 26px;

}

#receitas {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 100px;
    padding-left: 24px;
}

.receitascard {
    width: 270px;
    height: 335px;
    margin-right: 24px;
    display: flex;
    flex-flow: column;
    align-items: end;
    align-content: space-between;

}

.cardtxt {
    margin-top: 16px;
    display: flex;
    flex-flow: column;
    align-items: end;
}

a {
    text-decoration: none;
    font-family: "Inria Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 22px;
    color: #fff;
}

#separador {
    width: 1000px;
    height: 300px;

    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(imgs/separador.jpg);
    margin-bottom: 100px;
}

#branco {
    width: 660px;
    color: #fff;
    text-align: center;
}

#saudavel {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 100px;
}

.saudaveltxt {
    width: 490px;
}

.destaque {
    font-weight: 900;
}

#galeria {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 100px;
}

#ingredientes {
    font-family: "Inria Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    color: #E3686b;
    margin-bottom: 10px;
}

#ingredientes li {
    margin-bottom: 10px;
}

footer {
    background-image: url(imgs_gorillaz/phase-1-art\ 1.png);
    display: flex;
    flex-direction: column;
    justify-content: center;


    padding: 23px;
    border-top: solid 5px #f4ede5;
    height: 227px;
}

#socials {
    width: 191px;
    height: 38px;
    display: flex;
    justify-content: space-between;
    align-self: center;
}

#copy {
    display: flex;
    justify-content: space-between;
    align-self: flex-end;


    width: 1154px;
    height: 25px;

}

.copytxt {
    color: #fff;
    font-size: 16px;
}

h6 {

    font-family: "Inria Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    line-height: 24px;
    color: #BCC99B;
}

.nobckg {
    background: none;
}

.phase1 {
    background-image: url(imgs_gorillaz/Group\ 6.svg);
}

.albums {
    height: 678px;
    width: 1152px;
    margin-bottom: 136px;
    display: flex;
    justify-content: space-between;
    flex-flow: column wrap;
    padding-left: 6px;
    padding-bottom: 6px;
}

h2 {
    height: 53px;
    margin-top: 26px;
    margin-left: 30px;

    background-color: none;
    font-family: "Inria Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 33px;
    color: #fff;
}

.p1ti {
    width: 534px;
    display: block;
}

.p1txt {
    width: 340px;
    height: 453px;
    margin-top: 173px;
    display: flex;
    flex-direction: column;
}

.gcapa {
    width: 576px;
    height: 576px;
    justify-content: flex-start;

}

h3 {
    margin-bottom: 12px;

    font-family: "Inria Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    line-height: auto;
    color: #87C766;
    background: none;
}

.p1songs {
    font-family: "Inria Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: #EDEDED;
}

li {
    list-style-type: '>';
}

.los {
    align-self: flex-end;
    margin-top: 100px;
    background-color: #375B2A;
    height: 55px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.los:hover {
    background-color: #EDEDED;
    color: #375B2A;
    outline: #375B2A 5px solid;
}

#ddcapa {
    width: 571px;
    height: 571px;
}

#los2 {
    margin-top: 10px;
}

#los3 {
    margin-top: 80px;
}

#merch {
    height: 678px;
    background-color: #D80000;
}

#merchti {
    color: #fff;
    margin-left: 24px;

}

.glp {
    background-color: #D80000;
    width: 227px;
    height: 175px;
}

#malbuns {
    background-color: #D80000;
    height: 261px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 85px;
}

.lp {
    background-color: #D80000;
}

#mtxt {
    color: #fff;
}

#mpreco {
    color: #fff;
}

#mtxts {
    background-color: #D80000;
    margin-top: 12px;
    margin-left: 345px;
    height: 40px;
    width: 548px;
    display: flex;
    justify-content: space-between;
}

#buynow {
    width: 1152px;
    height: 40px;
    background-color: #D80000;
    display: flex;
    justify-content: space-between;
    margin: 80px 24px;
    align-items: center;
}

.seta {
    background-color: #D80000;
}

#bntxt {
    background-color: #D80000;
    font-size: 26px;
}

#bntxt:hover {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
    font-size: 30px;
}

#linksp:hover {
    height: 58px;
    width: 58px;
}

#linkyt:hover {
    height: 58px;
    width: 88px;
}

#linkx:hover {
    height: 58px;
    width: 71px;
}

#logotipocaveira {
    display: none;
}

#setasmobile {
    display: none;
}

#phase1mobile {
    display: none;
}

#qmtxtmobile {
    display: none;
}

.cardmobile {
    display: none;
}

#qmtxtrusselmobile {
    display: none;
}

#mtbtitle {
    margin-left: 24px;
}

.gcapamobile {
    display: none;
}

.p1timobile {
    display: none;
}

#ddlpmobile {
    display: none;
}



/* --------responsive-------- */

@media only screen and (max-width: 360px) {

    .piso {
        max-width: 360px;
        padding-right: 22px;
        padding-left: 22px;
    }

    #gheader {
        display: none;
    }

    nav {
        display: none;
    }

    #logotipocaveira {
        display: inline;
        background-color: #f00;
    }

    #setasmobile {
        display: inline;
        background-color: #f00;
        padding-left: 22px;
    }

    #dicatext {
        display: none;
    }

    #olhos {
        display: none;
    }

    #headercor {
        margin-bottom: 0px;
    }

    #phase1mobile {
        display: block;
        margin-left: 0px;
        margin-top: 0px;
    }

    #dicasemana {
        padding-left: 0px;
        padding-top: 0px;
        height: 698px;
    }

    #quotemurdoc {
        background-image: url(mobile_imgs/Group\ 12.svg);
        height: 163px;
    }

    #qmtxt {
        display: none;
    }

    #qmtxtmobile {
        display: block;
        margin-top: 20px;

    }

    .title {
        font-size: 50px;
        margin-top: 20px;
        margin-bottom: 29px;
        margin-left: 22px;

    }

    #receitas {
        display: block;
    }

    .receitascard {
        display: none;
    }

    .cardtxtm {
        margin-top: 14px;
        display: flex;
        justify-content: space-between;
    }

    .cardmobile {
        display: block;
        margin-top: 29px;
    }

    #quoterussel {
        background-image: url(mobile_imgs/Group\ 8.svg);
        height: 176px;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        margin-right: 0px;
        width: 360px;
    }

    #qmtxtrussel {
        display: none;
    }

    #qmtxtrusselmobile {
        color: #EDEDED;
        display: block;
        margin-top: 24px;
        margin-left: 0px;

    }

    h2 {
        font-size: 22px;
    }

    .p1ti {
        display: none;
    }

    .phase1 {
        background-image: none;
    }

    .gcapa {
        display: none;
    }

    .gcapamobile {
        display: block;
        margin-top: 0px;

    }

    .p1timobile {
        display: block;
        margin-left: 0px;
    }

    .albums {
        height: 870px;
        margin-bottom: 250px;
    }

    .p1txt {
        width: 316px;
        height: 365px;
        margin-top: 10px;
        font-size: 20px;
        line-height: 34px;
    }

    .p1songs {
        margin-left: 22px;
        margin-bottom: 0px;
    }

    .los {
        margin-top: 30px;
        width: 315px;
        padding: 27px 0px;
    }

    .p1tmobile {
        font-size: 20px;
        line-height: 34px;
    }

    #quotenoodle {
        height: 173px;
        background-image: url(mobile_imgs/noodlesvg.svg);
    }

    #qmtxtnoodle {
        margin-top: 20px;
    }

    #malbuns {
        display: none;
    }

    #ddlpmobile {
        display: block;
        background-color: #D80000;
        margin-top: 46px;
    }

    #mtxts {
        width: 316px;
        height: 147px;
        margin-left: 0px;
        display: block;
        margin-top: 35px;
    }

    #merchti {
        font-size: 60px;
        margin-left: 0px;
    }

    #bntxt {
        margin-top: 19px;
        margin-left: 44px;
        margin-right: 44px;
        margin-bottom: 20px;
    }

    #buynow {
        padding: 0px;
        margin: 0px;
        width: 310px;
        margin-bottom: 82px;
    }

    #merch {
        height: 630px;
    }

    footer {
        background-image: url(mobile_imgs/gorillaz-500x319\ 1.png);
        height: 234px;
    }

    #copy {
        display: flex;
        flex-direction: column;
        align-items: center;


        margin-top: 32px;
  
        width: 309px;
        height: 48px;

    }

    #mtb {
        margin-left: 0px;
    }

    #paatitle {
        margin-left: 0px;
    }

}