*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --gold: #e9e62c;
    --dark-gold: #ffba00;
    --dark-brown: #271508;
    --chocolate-brown: #251604;
    --white: #fff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Quicksand", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fluid {
    overflow: visible !important;
}

.center {
    text-align: center;
}

strong {
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #fff;
}

.alignleft {
    padding-bottom: 20px;
    padding-right: 4vw;
    width: 50%;
    float: left;
}

a:hover,
.top-contact a:hover,
footer a:hover {
    text-decoration: none;
    color: var(--gold);
}

img {
    display: block;
    width: 100%;
    height: auto;
}

.center-box {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    clear: both;
    width: 1180px;
}

section {
    clear: both;
    overflow: hidden;
}

@media only screen and (max-width: 1180px) {
    .center-box {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.row {
    margin: 0 -10px;
    clear: both;
    position: relative;
}

.one-half,
.one-third,
.two-third {
    float: left;
    min-height: 1px;
    padding: 0 10px;
    position: relative;
}

.one-third {
    width: 33.33%;
}

.one-half {
    width: 50%;
}

.two-third {
    width: 66.66%;
}

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

    .one-third,
    .two-third {
        float: none;
        padding: 0 10px;
        width: 100%;
        display: block;
    }

    .flex {
        display: block;
    }
}

#slider h2,
h3,
.footer-nav a {
    font-family: "Raleway", cursive;
}

h1,
h2,
#slider a {
    font-family: "Mrs Saint Delafield", cursive;
    font-weight: 400;
    font-size: 48px;
}

h1 {
    color: var(--dark-gold);
    padding-top: 50px;
}

h2,
h3 {
    color: var(--dark-gold);
}

#slider h2,
h3 {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

#slider h2 {
    color: #fff;
}

@media only screen and (max-width: 768px) {
    body {
        font-size: 18px;
    }

    h2 {
        font-size: 36px;
        line-height: 1;
    }

    h3 {
        font-size: 20px;
    }
}

/*-----------------------
         top
------------------------*/

#top {
    position: relative;
    color: #fff;
    padding-bottom: 50px;
    background-color: var(--chocolate-brown);
}

#top:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(255, 255, 255, 0.23);
    background: -moz-linear-gradient(top,
        rgba(255, 255, 255, 0.23) 0%,
        rgba(83, 24, 95, 0) 100%);
    background: -webkit-gradient(left top,
        left bottom,
        color-stop(0%, rgba(255, 255, 255, 0.23)),
        color-stop(100%, rgba(83, 24, 95, 0)));
    background: -webkit-linear-gradient(top,
        rgba(255, 255, 255, 0.23) 0%,
        rgba(83, 24, 95, 0) 100%);
    background: -o-linear-gradient(top,
        rgba(255, 255, 255, 0.23) 0%,
        rgba(83, 24, 95, 0) 100%);
    background: -ms-linear-gradient(top,
        rgba(255, 255, 255, 0.23) 0%,
        rgba(83, 24, 95, 0) 100%);
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.23) 0%,
        rgba(83, 24, 95, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#53185f', GradientType=0);
}

#top:after {
    position: absolute;
    content: "";
    background: url(../img/top-divider-.png) top center no-repeat;
    width: 100%;
    height: 220px;
    bottom: 0px;
    left: 0;
    z-index: 0;
}

.top-contact a {
    color: #fff;
    font-family: "Oxygen", sans-serif;
    font-size: 16px;
}

#top-contact {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-family: "Oxygen", sans-serif;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

#top-contact p {
    padding-left: 20px;
}

#top-contact ul {
    float: right;
}

#top-contact ul li {
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (max-width: 920px) {
    #top-contact p {
        text-align: center;
        font-size: 15px;
    }

    #top-contact ul {
        float: none;
        text-align: center;
        padding-bottom: 38px;
    }

    #top-contact ul li {
        padding-left: 9px;
        padding-right: 9px;
    }

    #top-contact a {
        font-size: 14px;
    }

    #top-contact .one-half {
        float: none;
        display: block;
        width: 100%;
    }
}

@media only screen and (max-width: 520px) and (max-width: 768px) {
    padding-bootom: 0px;
}

/*-----------------------
         slider
------------------------*/

#slider {
    padding-top: 80px;
    height: 100%;
    /* Ezzel egy magas lesz minden oszlop*/
    margin-bottom: 50px;
}

#slider-wrap {
    width: 100%;
    position: relative;
    height: 500px;
    z-index: 1;
}

#slider ul.slides {
    /*  display: block;*/
    position: relative;
    width: 100%;
    height: 500px;
}

#slider li.slide {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    float: left;

    opacity: 0;
    transition: opacity 3s linear;
}

#slider-wrap .slides>li.slide:first-child {
    opacity: 1;
}

#slider h2 {
    padding-top: 25px;
    padding-bottom: 15px;
}

#slider .one-half:last-of-type {
    padding-left: 50px;
}

#slider img {
    max-width: 540px;
    float: right;
}

#slider a {
    display: inline-block;
    color: #ffba00;
    font-size: 30px;
}

#slider a:hover {
    color: #fff;
}

#slider p {
    color: #fff;
    line-height: 24px;
    padding-bottom: 22px;
}

@media only screen and (min-width: 520px) and (max-width: 768px) {
    h1 {
        padding-top: 0px;
        font-size: 38px;
    }

    #slider h2 {
        padding-top: 15px;
        font-size: 22px;
    }

    #slider .one-half:last-of-type {
        padding-left: 0px;
        padding-top: 30px;
    }

    #slider p {
        font-size: 16px;
    }

    #slider a {
        font-size: 25px;
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 519px) {
    #slider .one-half {
        display: block;
        width: 100%;
        float: none;
    }

    #slider .one-half:last-of-type {
        padding-left: 20px;
    }

    #slider img {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

    #slider {
        padding-bottom: 120px;
    }

    h1 {
        padding-top: 20px;
    }
}

/*-----------------------
         why
------------------------*/

#why {
    background: #fff url(../img/miert_choc-bg.png) center left 1% no-repeat;
    color: var(--dark-brown);
}

#why h2 {
    color: var(--dark-brown);
}

#why p {
    padding-top: 35px;
    padding-bottom: 35px;
}

#why li {
    position: relative;
    padding-left: 60px;
    padding-bottom: 35px;
}

#why li:before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    background: var(--dark-gold);
    top: 8px;
    left: 0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

#why li:after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 8px;
    background: url(../img/pipa.png) center center no-repeat;
    background-size: contain;
    width: 20px;
    height: 24px;
}

#why figure {
    background: url(../img/choc_why.jpg) center center no-repeat;
    min-height: 430px;
    background-size: 133%;
}

@media only screen and (max-width: 920px) {
    #why figure {
        display: none;
    }

    #why {
        background-size: 650px;
        background-position: bottom 10% right -250px;
    }
}

/*-----------------------
         product
------------------------*/

#product h2 {
    padding-top: 80px;
}

#product p {
    color: var(--white);
}

.product-list li {
    width: 33.33%;
    float: left;
    padding: 20px;
    text-align: center;
}

@media only screen and (max-width: 786px) {
    .product-list li {
        width: 50%;
    }
}

@media only screen and (max-width: 478px) {
    .product-list li {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.product-list figure {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 85%;
}

/*-----------------------
         about
------------------------*/

#about {
    background: #fff url(../img/about-bg.png) top 50% right 5% no-repeat;
    background-size: 750px;
    padding: 75px 0;
    font-family: "Oxygen", sans-serif;
    font-size: 18px;
    color: var(--dark-brown);
    font-weight: 400;
}

#about figure {
    background: #f2f2f2 url(../img/pastry.jpg) top 12% center;
    background-size: cover;
    height: 380px;
    width: 380px;
    border-radius: 50%;
    overflow: hidden;
}

#about .two-third {
    padding: 3px 60px 3px 10px;
}

#about h2 {
    color: var(--dark-brown);
}

#about p {
    padding-top: 40px;
}

#about p:first-of-type {
    padding-top: 28px;
}

@media only screen and (min-width: 921px) and (max-width: 1215px) {
    #about figure {
        height: 320px;
        width: 320px;
        background-size: 140%;
        margin-left: 10px;
    }

    #about .two-third {
        padding: 3px 20px 3px 20px;
        margin-left: 20px;
    }

    #about {
        background-position: bottom -20% right 1%;
        background-size: 550px;
    }
}

@media only screen and (max-width: 920px) {
    #about figure {
        background-position: top 10% center;
        height: 280px;
        width: 280px;
        background-size: 140%;
        margin-left: auto;
        margin-right: auto;
    }

    #about .two-third {
        padding-top: 20px;
        padding-right: 10px;
    }

    #about p,
    #about p:first-of-type {
        padding-top: 20px;
    }

    #about {
        background-position: bottom -50px right -50px;
        background-size: 550px;
    }
}

/*-----------------------
         recept
------------------------*/

#recept,
#product {
    background: url(../img/rec-bg_black.jpg) top left repeat;
    padding-bottom: 75px;
    position: relative;
}

#recept:after,
#product:after {
    position: absolute;
    content: "";
    background: url(../img/divider_small.png) top center repeat-x;
    width: 100%;
    height: 25px;
    bottom: 0;
    left: 0;
}

#recept:before,
#product:before {
    position: absolute;
    content: "";
    background: url(../img/divider_small.png) bottom center repeat-x;
    width: 100%;
    height: 25px;
    top: 0;
    left: 0;
}

#recept img {
    border: 10px solid #fff;
}

#recept h2 {
    padding-bottom: 35px;
    padding-top: 90px;
    font-size: 50px;
}

#recept h3 {
    padding-top: 26px;
}

#recept p {
    padding-top: 15px;
    color: var(--white);
}

@media only screen and (max-width: 768px) {
    #recept h2 {
        font-size: 40px;
    }

    #recept p {
        padding-top: 10px;
        padding-bottom: 25px;
    }

    #recept h3 {
        padding-top: 15px;
    }
}

/*-----------------------
      testimonials
------------------------*/

#testimonials {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 40px;
    background: #fff;
}

#testimonials p {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    color: var(--dark-brown);
}

#testimonials img {
    width: 60px;
    height: 50px;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 10px;
}

#testimonials h2 {
    font-size: 50px;
    color: var(--dark-brown);
}

@media only screen and (max-width: 768px) {
    #testimonials h2 {
        font-size: 40px;
    }

    #testimonials img {
        width: 50px;
        height: 40px;
    }
}

/*-----------------------
          footer
------------------------*/

footer {
    background: #070707;
    min-height: 80px;
}

footer a {
    color: #fff;
    font-size: 18px;
}

.footer-nav {
    text-align: center;
    font-size: 0;
}

.footer-nav li {
    padding: 25px 20px;
    display: inline-block;
}

@media only screen and (min-width: 830px) and (max-width: 1100px) {
    .footer-nav li {
        padding: 25px 8px;
    }

    footer a {
        font-size: 15px;
    }
}

@media only screen and (max-width: 829px) {
    .footer-nav li {
        display: block;
        width: 100%;
        padding: 0;
        text-align: left;
    }

    .footer-nav {
        padding-left: 10px;
        padding-top: 10px;
    }

    footer a {
        font-size: 16px;
    }
}

/*-----------------------
         page
------------------------*/

#top-page {
    padding: 35px 0 55px 0;
}

#top-page h2 {
    border-bottom: 1px solid rgba(83, 24, 95, 0.5);
    padding-bottom: 20px;
}

.inner-page {
    padding-bottom: 75px;
}

.archive,
.single {
    background: url(img/recept-bg.jpg) top left repeat;
    position: relative;
}

.archive img,
.single img {
    border: 10px solid #fff;
}

.archive h3 {
    padding-top: 20px;
}

.single h3 {
    font-size: 30px;
}

time {
    font-size: 14px;
    color: #666;
}

.archive .one-third {
    margin-bottom: 50px;
}

.single article {
    padding: 70px 10px;
}

@media only screen and (min-width: 560px) and (max-width: 920px) {
    .archive .one-third {
        width: 50%;
        float: left;
    }
}

@media only screen and (max-width: 560px) {
    .alignleft {
        padding-bottom: 20px;
        padding-right: 0;
        width: 100%;
        float: none;
    }
}