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

a {
    text-decoration: none;
    color: #2A351C;
}

a:hover {
    color: #B7C788;
}

p {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-text-size-adjust: none !important;
    font-family: 'Yantramanav';
}

ol,
ul {
    padding: 0 1rem;
}

ul li::marker {
    color: #2A351C;
}

.arrow {
    color: #2A351C;
}


html {
    overflow-x: hidden;
    font-size: 18px;
    line-height: 1.5;
}

body {
    font-family: 'Nunito Sans';
    margin: 0;
    padding: 0;
    color: #4d4036;
}

@media screen and (max-width: 1150px) {
    h1 {
        font-size: 2rem !important;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 16px;
    }

    #hero {
        padding: 3rem 0 !important;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.8rem !important;
    }
}

@media screen and (max-width: 440px) {
    h1 {
        font-size: 1.4rem !important;
    }
}

.content-box {
    max-width: 1600px;
    margin: 0 auto;
    width: 85%;
}


/* Image */


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



/* Button */

.button {
    margin-top: 1rem;
}

.button a {
    letter-spacing: 3px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}


.first-button {
    display: inline-block;
    background-color: #2A351C;
    background-image: url(img/border-horizontal.png), url(img/border-horizontal.png), url(img/border-vertical.png), url(img/border-vertical.png);
    background-position: top center, bottom center, top left, top right;
    background-size: auto 3px, auto 3px, 3px auto, 3px auto;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    padding: 15px;
    margin: 20px 0 20px 0;
}

.first-button:hover {
    background: #B7C788;
}

.first-button a {
    color: #fff;
}

@media screen and (max-width: 560px) {
    .second-button {
        margin-top: 15px;
        margin-left: 0;
    }
}

@media screen and (max-width: 580px) {
    .button {
        flex-direction: column;
        text-align: center;
    }

    .second-button,
    .first-button {
        margin-bottom: 1.5rem;
    }
}

#services,
#offer {
    padding: 5.5rem 0;
}

.align-center {
    text-align: center;
    margin: 0 auto;
}

.align-center p {
    padding-top: 2.5rem;
}

.border-box {
    background-color: #fff;
    background-image: url(img/border-horizontal.png), url(img/border-horizontal.png), url(img/border-vertical.png), url(img/border-vertical.png);
    background-position: top center, bottom center, top left, top right;
    background-size: auto 3px, auto 3px, 3px auto, 3px auto;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    padding: 20px;
}

/* Header */

header {
    background-color: #fff;
    background-image: url(img/border-horizontal.png);
    background-size: auto 3px;
    background-position: bottom center;
    background-repeat: repeat-x;
}

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

#logo a {
    display: inline-block;
}

#logo a img {
    width: 120px;
    height: auto;
}


/* Inner-page */

.inner-page {
    background: #fbfbfb;
}


/* Inner-hero */

.inner-hero {
    background: url(img/inner-hero.jpg) center top no-repeat;
    background-size: cover !important;
    padding-top: 5.5rem;
    background-size: auto 250px;
    text-align: center;
}


#inner-hero:before {
    position: absolute;
    display: inline-block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(155, 150, 99, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: -webkit-linear-gradient(top, rgba(155, 150, 99, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(to bottom, rgba(155, 150, 99, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4dc3b6a6', endColorstr='#4dffffff', GradientType=0);
}


/* Website, kozossegi, marketing */

#website {
    padding: 2.5rem 0;
}

#website h3 {
    text-align: center;
    padding-bottom: 1rem;
}

#workflow ul {
    list-style: none;
}

#website ul {
    list-style: none;
}

#website li
    {
    padding: 0.3rem 0;

}

#website-item-1,
#website-item-2 {
    padding: 1rem;
    height: auto;
    font-family: 'Yantramanav';
}

#website-item-2 {
    background: url(img/box-bg.jpg) center top repeat;
    height: 100%;
}

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

    #website .service-box,
    #support .service-box {
        margin-bottom: 2rem;
    }
}

/* Hero */

#hero {
    background: url(img/hero4.jpg) center no-repeat;
    position: relative;
}

#hero .row {
    align-items: center;
}

#hero:before {
    position: absolute;
    display: inline-block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*z-index: 1;*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c3b6a6+0,ffffff+100&0.3+0,0.3+100 */
    background: -moz-linear-gradient(top, rgba(155, 150, 99, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(155, 150, 99, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(155, 150, 99, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4dc3b6a6', endColorstr='#4dffffff', GradientType=0);
    /* IE6-9 */
}

#hero .col-2-3,
#hero .col-1-3 {
    z-index: 10;
}

#hero {
    padding: 5rem 0;
}

.hero-img img {
    background-color: #fff;
    background-image: url(img/border-horizontal.png), url(img/border-horizontal.png), url(img/border-vertical.png), url(img/border-vertical.png);
    background-position: top center, bottom center, top left, top right;
    background-size: auto 3px, auto 3px, 3px auto, 3px auto;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    margin-bottom: 20px;
    padding: 15px;
    height: 100%;
}

#hero p {
    letter-spacing: 1.3px;
}

#hero-text {
    background: url(img/offer.png);
    opacity: 0.9;
    padding: 40px;
    max-width: 50%;
}

.intro-text-box {
    position: relative;
    top: 120px;
    left: 300px;
    width: 50%;
    height: auto;
}

.intro-text {
    padding: 20px;
    background: #fff;
    text-align: left;
    box-shadow: 3px 3px 10px rgb(0 0 0 / 31%);
    color: #2A351C;
}

.intro-text h3 {
    text-transform: uppercase;
    color: #2A351C;
}


@media screen and (max-width: 768px) {
    #hero-text .button {
        padding-bottom: 0;
    }
}

/* Services */

#services {
    background: url(img/leaf2.png);
    background-color: #fbfbfb;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.service-box {
    background-color: #fff;
    background-image: url(img/border-horizontal.png), url(img/border-horizontal.png), url(img/border-vertical.png), url(img/border-vertical.png);
    background-position: top center, bottom center, top left, top right;
    background-size: auto 3px, auto 3px, 3px auto, 3px auto;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    padding: 15px;
}

.service-text-box {
    position: relative;
}

.service-text {
    padding: 30px;
    background: #fff;
    margin: -15px 20px 0 20px;
    text-align: center;
    box-shadow: 3px 3px 10px rgb(0 0 0 / 31%);
}


@media screen and (max-width: 580px) {
    #services {
        background: url(img/leaf.png) center center no-repeat;
    }
}

@media screen and (max-width: 768px) {
    .service {
        padding: 1rem 0;
    }
}

/* Service page */

.service-page {
    padding-top: 2.5rem;
}

.service-item {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}

#work {
    background: url(img/leaf2.png);
    background-color: #fbfbfb;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0 40px 0;
    margin: 30px 0 30px 0;
}

#work .row {
    align-items: center;
    padding: 2rem 0;
}

@media screen and (max-width: 768px) {
    #work .service-box {
        margin-bottom: 2rem;
    }
}

/* Offer */

#offer {
    background: url(img/offer.png) right center repeat;
    position: relative;
    margin-top: -100px
}

.offer-form {
    align-items: center;
    margin: 0 auto;
}

.offer-form {
    padding: 2rem 0;
    margin: 0 auto;
}

#offer input[type="text"],
#offer input[type="email"],
textarea {
    border: solid 2px #ccc;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
    margin-bottom: 15px;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
}

#offer select,
#offer select[option="value"] {
    border: solid 2px #ccc;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
    margin-bottom: 15px;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
}


.offer-img img {
    display: inline-block;
    background-color: #fff;
    background-image: url(img/border-horizontal.png), url(img/border-horizontal.png), url(img/border-vertical.png), url(img/border-vertical.png);
    background-position: top center, bottom center, top left, top right;
    background-size: auto 3px, auto 3px, 3px auto, 3px auto;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    padding: 15px;
}

@media screen and (max-width: 1200px) {
    .offer-form {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .offer-form .col-1-3 {
        padding: 3.5rem 0;
    }
}

/* Kapcsolat */

#kapcsolat {
    position: relative;
    padding-bottom: 20px;
}


.offer-form {
    align-items: center;
}

.offer-form {
    padding: 2rem 0;
}

#kapcsolat input[type="text"],
#kapcsolat input[type="email"],
textarea {
    border: solid 2px #ccc;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
    margin-bottom: 15px;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
}

#kapcsolat select,
#kapcsolat select[option="value"] {
    border: solid 2px #ccc;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
    margin-bottom: 15px;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
}


.offer-img img {
    display: inline-block;
    background-color: #fff;
    background-image: url(img/border-horizontal.png), url(img/border-horizontal.png), url(img/border-vertical.png), url(img/border-vertical.png);
    background-position: top center, bottom center, top left, top right;
    background-size: auto 3px, auto 3px, 3px auto, 3px auto;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    padding: 15px;
}

@media screen and (max-width: 1200px) {
    .offer-form {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .offer-form .col-1-3 {
        padding: 3.5rem 0;
    }
}

/*Rolam*/


.me {
    background-color: #fbfbfb;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.border-box img {
	filter: grayscale(1);
	width: 70%;
	margin: 0 auto;
}

.border-box img:hover {
	filter: none;
}

/* Ugrás az oldal tetejére */

#go-to-top {
    position: fixed;
    padding: 5px;
    margin: 30px auto;
    background: #b7c788;
    bottom: 0px;
    right: 20px;
    height: 50px;
    width: 50px;
    border-radius: 10%;
    transition: all 0.2s linear;
    cursor: pointer;
    z-index: 10;
}


#go-to-top:hover {
    transform: translate3d(0, -10px, 0);
}

#go-to-top:after {
    content: "";
    position: absolute;
    left: 18px;
    display: block;
    width: 15px;
    height: 15px;
    border-top: 2px solid #2a351c;
    border-left: 2px solid #2a351c;
    top: 20px;
    transform: rotate(45deg);
}



/* Footer */

footer {
    padding: 2.5rem 0;
    background: #2A351C;
    color: #fff;
    font-size: 0.9rem;
}

footer a {
    color: #fff;
}


footer ul {
    padding: 0;
}

footer ul li {
    list-style-type: none;
}

footer a:hover {
    color: #B7C788;
}

.social ul {
    margin: 30px 0 0 0;
    overflow: hidden;
}

.social li {
    float: left;
    margin-right: 20px;
}

.social li a {
    width: 50px;
    height: 50px;
    border: solid 2px #fff;
    border-radius: 10%;
    display: inline-block;
    background-size: auto 16px;
}

.social li a:hover {
    border-color: #B7C788;
}


.facebook a {
    background: url(img/facebook.svg) center center no-repeat;
}

.linkedin a {
    background: url(img/linkedin.svg) center center no-repeat;
}

.youtube a {
    background: url(img/youtube.svg) center center no-repeat;
}


#copyright {
    padding: 10px;
    background: #E9E5E1;
    font-size: 14px;
}

#copyright-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


@media screen and (max-width: 768px) {
    #copyright-box {
        flex-direction: column;
    }

    #copyright-box p {
        text-align: center;
    }
}