html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif !important
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Chivo', sans-serif !important;
    font-weight: 900
}

.mtb-50 {
    margin-top: 50px !important;
    margin-bottom: 50px !important
}

.grecaptcha-badge {
    z-index: 999 !important
}

#jsd-widget {
    bottom: 0 !important;
    right: 80px !important
}

.mobile_clearfix {
    display: none
}

.nomargin {
    margin: 0 !important
}

.nopadding {
    padding: 0 !important
}

.wrapper {
    height: 100%
}

.wrapper section {
    width: 100%
}

.wrapper .contentcontainer {
    max-width: 1080px;
    margin: auto;
    height: 100%;
    overflow-y: visible
}

.btn_outer {
    width: 200px;
    margin: 4px;
    padding: 4px;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    border-radius: 90px
}

.btn_outer a span, .btn_outer a i {
    display: inline-block;
    vertical-align: middle;
    height: 24px
}

.btn_outer button span, .btn_outer button i {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    line-height: 24px
}

.btn_outer button:active {
    background: none !important
}

.btn_fluid {
    width: auto
}

.nz_btn {
    display: block;
    width: 100%;
    border-radius: 90px;
    border: 2px solid #acacac;
    text-align: center;
    color: white !important;
    font-weight: 700;
    text-decoration: none !important;
    padding: 7px;
    background: none
}

.nz_btn:hover, .nz_btn:active {
    border-color: #fff;
    transition: 200ms;
    cursor: pointer
}

.btn_small {
    font-size: .6em
}

header nav .brand-logo img {
    margin-top: 7px;
    height: 50px
}

.row {
    margin-bottom: 0 !important
}

header nav {
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: none;
    color: #000;
    z-index: 99
}

header nav .brand-logo {
    padding-left: 25px
}

nav ul li {
    max-height: 64px
}

nav ul a {
    color: #000;
    max-height: 64px;
    font-size: 1.2rem !important;
    text-decoration: none;
    font-family: Chivo;
    font-weight: 300
}

#nav-resp ul li a, nav div a {
    text-decoration: none !important
}

nav ul a img, #nav-resp div a img {
    height: 15px;
    margin: 24px 0
}

.dropdown-content li > a, .dropdown-content li > span {
    font-size: 1.1rem !important
}

#error_dark_bg {
    background-image: url(../images/404_dark_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 1.5em;
    overflow-x: visible;
    overflow-y: visible
}

.dark_bg {
    background-color: #20252d
}

.textcontainer, .paraimgcontainer {
    height: 100%;
    text-align: center;
    position: relative
}

.noborder {
    border: none !important
}

.h-100 {
    height: 100%
}

.h-n-100 {
    height: auto !important
}

.h-50 {
    height: 50%
}

.h-75 {
    height: 75%
}

.w-100 {
    width: 100%
}

.w-50 {
    width: 50%
}

.w-75 {
    width: 75%
}

.w-65 {
    width: 65%
}

.text-align-center {
    text-align: center
}

.text-align-just {
    text-align: justify
}

.text-align-right {
    text-align: right
}

.text-align-left {
    text-align: left
}

.text {
    border-left: 4px solid #000
}

.coloredhr {
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    -webkit-animation: filter-animation-reverse 3s linear infinite;
    animation: filter-animation-reverse 3s linear infinite;
    border: none;
    height: 5px;
    margin: 0
}

.error_elements {
    position: relative
}

.error_elements img {
    position: relative;
    margin: auto;
    display: block
}

.error_elements img:first-child {
    top: 50px
}

.error_elements img:nth-child(2) {
    bottom: 125px
}

.error_elements img:nth-child(3) {
    bottom: 300px
}

.error_face {
    width: 200px;
    height: 200px;
    background-image: url(../images/face_static.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
    position: relative;
    bottom: 350px
}

.error_face #movinface {
    position: relative;
    transition: 200ms
}

@-webkit-keyframes filter-animation-reverse {
    0% {
        filter: hue-rotate(360deg)
    }
    100% {
        filter: hue-rotate(0deg)
    }
}

@keyframes filter-animation-reverse {
    0% {
        filter: hue-rotate(360deg)
    }
    100% {
        filter: hue-rotate(0deg)
    }
}

.card .card-image img {
    border-radius: 0 !important
}

.card {
    box-shadow: none !important
}

.card h1 {
    margin-top: 0;
    padding-top: 0
}

.card.small {
    height: 400px !important
}

.card.small .card-image + .card-content {
    max-height: 50% !important
}

.page-footer {
    background-color: #20252d
}

.page-footer a {
    color: white !important;
    text-decoration: none !important
}

footer .contactdata div {
    display: block;
    line-height: 32px
}

footer .contactdata div i, footer .contactdata div span {
    display: inline-block;
    vertical-align: middle
}

.fader {
    top: 0;
    left: 0;
    position: absolute;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    display: none
}

.popup_fader {
    top: 0;
    left: 0;
    position: fixed;
    z-index: 999998;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    display: none
}

.popup_container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 85%;
    max-width: 600px;
    z-index: 999998;
    display: none
}

.popup_close {
    position: relative;
    background: #fff;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    margin-right: -1rem;
    line-height: 2rem;
    border-radius: 90px;
    margin-bottom: -1rem;
    z-index: 999999
}

.popup_close {
    cursor: pointer
}

#blogmodul {
    padding-top: 100px;
    padding-bottom: 50px
}

#blogmodul .container:nth-child(2) {
    margin-top: 50px
}

#pinned_blog #pinned_post_title {
    border-bottom: 3px solid #000
}

#pinned_blog #pinned_post_title h1 {
    margin-bottom: 0;
    padding-bottom: 0
}

#pinned_blog #pinned_post_content {
    text-align: justify
}

#blogpost_container .card .card-content {
    text-align: left
}

#blogpost_container .card .card-content {
    font-size: 14px;
    color: #5d5d5d
}

#blogpost_container .blogpost {
    margin-bottom: 50px
}

#stacks {
    padding-top: 50px
}

#stacks div {
    width: 100%;
    text-align: center
}

#stacks div img {
    width: 100%;
    max-width: 1920px
}

#blogpost, #referencies, #reference {
    padding-top: 65px
}

#blogpost_header, #referencies_header, #reference_header {
    position: relative
}

#blogpost_header .row, #referencies_header .row, #reference_header .row {
    display: flex
}

#blog_head_left, #referencies_head_left, #reference_head_left {
    flex: 1;
    background: #fff;
    padding-top: 50px !important;
    padding-bottom: 50px !important
}

#blog_head_right, #referencies_head_right, #reference_head_right {
    flex: 1;
    background-image: url(../images/reference.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

#blogpost #blogpost_postlist {
    border-left-width: 5px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-style: solid;
    border-image: linear-gradient(#f89921, #ec395f, #ba2467, #462c74, #9864FF) 1 round
}

#blogpost #blogpost_data #blogpost_postedby {
    font-style: italic;
    font-size: .8em
}


.mobile_lang_changer{
    display: none;
}

@media screen and (max-width: 992px) {
    #blogpost_container .card.small .card-content {
        padding: 0 !important
    }

    #blogpost, #referencies, #reference {
        padding-top: 0 !important
    }

    .page-footer .container .row .col{
        text-align: center;
    }
    .mobile_lang_changer{
        display: block;
    }
}

@media screen and (max-width: 576px) {
    #reference_header .row {
        display: block
    }

    #reference_head_left {
        width: 100%;
        text-align: center;
        background: #fff;
        padding: 0 !important
    }

    #reference_head_right {
        display: none
    }
}

#referencies .container .card {
    margin-bottom: 100px
}

#referencies #referencies_header {
    margin-bottom: 50px
}

#referencies #referencies_header #referencies_head_left h1 {
    text-align: right
}

#referencies .container .card span {
    background-color: rgba(60, 60, 60, .5);
    width: 100%;
    height: 0;
    transition: 200ms;
    padding: 0;
    overflow: hidden
}

#referencies .container .card:hover span {
    height: auto;
    padding: 24px;
    transition: 200ms
}

#reference .container {
    background: #ececec;
    margin-top: 50px;
    padding: 20px
}

#reference .refimg {
    margin-bottom: 20px
}

section#gallery {
    margin-top: 50px;
    padding-top: 50px
}

#competence_header {
    position: relative;
    padding-top: 65px
}

#competence_header .row {
    display: flex
}

.competence_head_left {
    flex: 2;
    background: #fff;
    width: 60%;
    padding-top: 50px !important;
    padding-bottom: 50px !important
}

.competence_head_left h1 {
    margin-bottom: 0 !important;
    text-align: right
}

.competence_head_left div div {
    text-align: right;
    font-style: italic;
    font-weight: 700
}

.competence_head_left h6 {
    font-style: italic !important;
    text-align: right !important
}

.competence_head_right {
    flex: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

.color_orange {
    color: #ed5d28
}

#grafikacompimg {
    background-image: url(../images/szakterulet_grafika.jpg)
}

#marketingcompimg {
    background-image: url(../images/szakterulet_marketing.jpg)
}

#webshopcompimg {
    background-image: url(../images/szakterulet_webshop.jpg)
}

#websitecompimg {
    background-image: url(../images/szakterulet_webfejlesztes.jpg)
}

#contact {
    padding-top: 64px
}

#contact #contactformcontainer {
    background: #e7e8ea;
    padding-bottom: 50px
}

#contact .contacts h1 {
    font-style: italic;
    background: red;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700
}

#contact .contacts span, #contact .contacts h4 {
    margin-left: 50px
}

#contact .contacts h4 a {
    color: #000;
    text-decoration: underline
}

#contactmap div {
    position: relative
}

#contactmap div img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-height: 50px
}

#aboutus h1 {
    font-weight: 700;
    font-style: italic;
    background: red;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#aboutus h2, #aboutus p {
    padding: 1rem
}

#aboutus p {
    text-align: justify
}

#aboutus ul {
    padding-left: 50px
}

#aboutus ul > li {
    list-style-type: "\27A4" !important;
    padding-left: 15px
}

#comp_content_graph .greyline {
    background-color: #cecece;
    padding: 20px 0
}

#comp_content_graph .greyline .container .row div:not(:last-child) {
    border-right: 1px solid #000
}

#comp_content_graph .greyline .container .row div {
    text-align: center;
    font-weight: 700
}

#comp_content_marketing .greyline {
    background-color: #cecece;
    padding: 20px 0
}

#comp_content_marketing .greyline .container .row div:nth-child(2) {
    border-right: 1px solid #000;
    border-left: 1px solid #000
}

#comp_content_marketing .greyline .container .row div {
    text-align: center;
    font-weight: 700
}

.compsection .text_grey {
    color: #fff
}

.compsection .text_blue {
    color: #21759b
}

.compsection .text_orange {
    color: #d45221
}

.compsection .box_blue {
    background-color: #21759b
}

.compsection .box_orange {
    background-color: #d45221
}

.compsection .box_grey {
    background-color: #cecece
}

#comp_content_website {
    margin-bottom: 50px
}

#comp_content_website .text_grey h3 {
    color: #fff
}

#comp_content_website .text_orange h3 {
    color: #d45221
}

#comp_content_website .text_blue h3 {
    color: #21759b
}

#comp_content_website #custom_column .col_title span {
    background: red;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#comp_content_website #wp_column .col_title span {
    background: rgb(0, 215, 207);
    background: linear-gradient(90deg, rgba(0, 215, 207, 1) 0%, rgba(39, 135, 177, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#comp_content_website #wp_column .col_title, #comp_content_website #custom_column .col_title {
    text-align: center
}

#comp_content_website #wp_column .col_maintext, #comp_content_website #custom_column .col_maintext {
    text-align: center
}

#comp_content_website #wp_column .col_subtitle h6 {
    border: 1px solid transparent;
    background: rgb(0, 215, 207);
    background: linear-gradient(90deg, rgba(0, 215, 207, 1) 0%, rgba(39, 135, 177, 1) 100%);
    border-radius: 90px;
    color: #fff;
    padding: 15px
}

#comp_content_website #custom_column .col_subtitle h6 {
    border: 1px solid transparent;
    background: red;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    border-radius: 90px;
    color: #fff;
    padding: 15px
}

#comp_content_webshop #webshop_bg_container {
    background-image: url(../images/3.png);
    background-size: 40%;
    background-position: center right;
    background-repeat: no-repeat
}

#comp_content_webshop #magento_column .col_subtitle h6 {
    border: 1px solid transparent;
    background: #f57c21;
    background: linear-gradient(to right, #fbb47c, #f57c21);
    border-radius: 90px;
    color: #fff;
    padding: 15px
}

#comp_content_webshop #magento_column h3 span {
    color: #f57c21
}

#comp_content_webshop #woo_column .col_subtitle h6 {
    border: 1px solid transparent;
    background: #2d1a51;
    background: linear-gradient(to right, #9b5d90, #2d1a51);
    border-radius: 90px;
    color: #fff;
    padding: 15px
}

#comp_content_webshop #woo_column h3 span {
    color: #9b5d90
}

#comp_content_webshop #custom_column .col_subtitle h6 {
    border: 1px solid transparent;
    background: red;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    border-radius: 90px;
    color: #fff;
    padding: 15px
}

#comp_content_webshop #custom_column h3 span {
    background: red;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#comp_content_webshop .container ul {
    padding-left: 25px
}

#comp_content_webshop .container ul li {
    list-style-type: initial
}

#comp_content_marketing #googlebg {
    background-image: url(../images/competences/google_logo.png);
    background-size: contain;
    background-position: center left;
    background-repeat: no-repeat
}

#comp_content_marketing #facebookbg {
    background-image: url(../images/competences/facebook_logo.png);
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat
}

#comp_content_marketing .transwhitebg {
    background-color: rgba(255, 255, 255, .8)
}

#comp_content_marketing .col_subtitle h6 {
    border: 1px solid transparent;
    background: red;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    border-radius: 90px;
    color: #fff;
    padding: 15px
}

#comp_content_graph .col_subtitle h6 {
    border: 1px solid transparent;
    background: red;
    background: linear-gradient(to right, #f89921, #ec395f, #ba2467, #462c74, #2c194f);
    border-radius: 90px;
    color: #fff;
    padding: 15px
}

#pricing .card {
    margin-top: -15px;
    -webkit-box-shadow: 0 0 15px 0 rgba(50, 50, 50, .3) !important;
    -moz-box-shadow: 0 0 15px 0 rgba(50, 50, 50, .3) !important;
    box-shadow: 0 0 15px 0 rgba(50, 50, 50, .3) !important;
    border-radius: 15px
}

#pricing .flex {
    display: flex;
    flex-wrap: wrap
}

@media screen and (max-width: 992px) {
    #pricing .flex {
        display: block !important
    }

    #pricing .price_column {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto
    }
}

#pricing .price_column {
    padding: 50px;
    position: relative;
    flex-direction: column
}

#pricing .price_column .price_header_top, #pricing .price_column .price_header_bottom {
    position: absolute;
    transform: translateY(50%);
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    font-size: 1.5em
}

#pricing .price_column .card {
    padding-left: 10%;
    padding-right: 10%;
    height: 100%;
    padding-bottom: 50px
}

#pricing .price_column .card .pricing_item {
    margin-bottom: 10px
}

#pricing .price_column .price_column_button {
    position: absolute;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 992px) {
    nav {
        position: fixed;
        bottom: 0;
        border-top: 1px solid black !important;
        background-color: white !important
    }

    nav .brand-logo {
        left: 0
    }

    nav .sidenav-trigger {
        margin-left: 50%;
        color: #000
    }

    #nav-resp .dropdown-content {
        position: unset;
        margin-top: 0 !important;
        padding-left: 50px
    }
    #nav-resp .dropdown-content.dropdown-resp-nav {
        position: unset;
        margin-top: 0 !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
        text-align: center;
    }

    #nav-resp .dropdown-content.dropdown-resp-nav li a{
        text-align: center;
    }

    #nav-resp .dropdown-content a {
        padding: 0 !important;
        width: 100%
    }

    #competence_header {
        padding-top: 0 !important
    }
}