/*
 Theme Name:   Storefront Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     storefront
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  storefrontchild
*/

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

body {
    margin: 0;
    padding: 0;
    background-color: #FCFDFF;
    color: #313030;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 15px;
    clear: both;
}


.center-box {
    text-align: center;
    width: auto !important;
}

a {
    text-decoration: none;
    color: inherit;
}


/*Navigáció sáv*/

#logo {
    width: 25vw;
    float: left;
    margin-left: 2vw;
}

#logo a {
    display: inline-block;
}

#logo a img {
    width: 20vw;
    height: auto;
    border-radius: 0px !important;
}

.btn-first {
    background: #418D3F;
    color: #fff;
}

.btn-first:hover,
.btn-sc:hover {
    transform: translateY(-5px);
    transition: .35s ease-in-out;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 6px 8px -5px rgba(153, 9, 54, 0.05);
    box-shadow: 0px 10px 13px -7px #000000, 0px 6px 8px -5px rgba(153, 9, 54, 0.05);
}

/*Hero rész*/

#hero {
    background-image: url(img/hero-bg.png);
    background-size: cover;
    margin-top: 2vw;
    height: auto;
    padding: 8vw;
    overflow: hidden;
    clear: both;
}


/*About rész*/

.text-box {
    padding: 8vw;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.pic-left {
    grid-area: 1 / 1 / 2 / 2;
    background-image: url(img/left.png);
    background-size: cover;
    height: 35vw;
}

.text-right {
    grid-area: 1 / 2 / 2 / 3;
    height: 35vw;
}

.text-left {
    grid-area: 2 / 1 / 3 / 2;
    height: 35vw;
}

.pic-right {
    grid-area: 2 / 2 / 3 / 3;
    background-image: url(img/right.png);
    background-size: cover;
    height: 35vw;
}

/*Termékeink fp*/

#fp-product {
    text-align: center;
    height: auto;
    padding: 1vw;
    margin-top: 2vw;
}

pre {
    background: inherit!important;
    font-family: inherit!important;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
    max-width: 100%;
}

ul.products li.product, ul.products .wc-block-grid__product, .wc-block-grid__products li.product, .wc-block-grid__products .wc-block-grid__product {
    margin-bottom: 0!important;

}

/*Kontakt fp*/

.contact-box {
    background-image: url(img/contact.png);
    background-size: cover;
    height: auto;
    padding: 3vw;
    text-align: center;
    margin: 2vw 0 2vw 0;
}

/*Footer*/

footer {
    background-image: url(img/footer.png);
    background-size: cover;
    height: auto;
    overflow: hidden;
    clear: both;
}

.one-half {
    padding: 3vw!important;
    background: inherit;
}

/*Belső oldalak*/

.inner-page {
    padding: 3vw;
}

/*Töréspontok*/

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


    #logo {
        margin-top: 0.7vw;
    }

    .text-box {
        padding: 7vw;
    }

    .pic-left,
    .text-left,
    .text-right,
    .pic-right {
        height: 41vw;
    }
}

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

    .text-box {
        padding: 5vw;
    }

}

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

    .pic-left,
    .text-left,
    .text-right,
    .pic-right {
        height: 43vw;
    }

}

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

    .pic-left,
    .text-left,
    .text-right,
    .pic-right {
        height: 55vw;
    }

}

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


    #logo a img {
        width: 24vw;
    }

    .about-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .pic-left {
        grid-area: 2 / 1 / 2 / 2;
    }

    .text-right {
        grid-area: 1 / 1 / 3 / 2;
    }

    .text-left {
        grid-area: 3 / 1 / 4 / 2;
    }

    .pic-right {
        grid-area: 4 / 1 / 5 / 2;
    }

    .text-box {
        padding: 11vw;
    }

}

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

    .pic-left,
    .text-left,
    .text-right,
    .pic-right {
        height: 65vw;
    }

}

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

    #logo {
        width: 30vw;
    }

    #logo a img {
        width: 30vw;
    }

    .pic-left,
    .text-left,
    .text-right,
    .pic-right {
        height: 80vw;
    }

}

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

    .pic-left,
    .text-left,
    .text-right,
    .pic-right {
        height: 92vw;
    }

}