/* SITE COLORS
dark-grey: #272827
grey: #3a3a3a
red: #e41c3d
white: #ffffff
*/

body, html {
    color: #3a3a3a;
    overflow-x: hidden;
}

.mainContainer, .mobileNavs {
    background-color: #272827;
}

header {
    margin: 0;
    margin-top: 5rem;
    color: #fff;
    position: relative;
}

.hider {
    height: 100vh;
    width:100%;
    background-color: #fff;
    position:absolute;
    top: 0;
    left: 0;
}

@keyframes navReveal {
    from {opacity:1}
    to {opacity: 0}
}

.navReveal {
    height: 100%;
    width:100%;
    background-color: #fff;
    position:absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

@keyframes reveal {
    from {left:0}
    to {left: 100%}
}

header ul li {
    list-style: none;
}

header ul li a {
    text-decoration: none;
    color: #fff;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transition: all .3s;
    padding: .4rem 0;
}

header ul li a:hover {
    color: #fff;
    border-top: 2px solid #e41c3d;
    border-bottom: 2px solid #e41c3d;
}

.active {
    color: #fff;
    border-top: 2px solid #e41c3d;
    border-bottom: 2px solid #e41c3d;
}

header .secondaryText {
    color: #e41c3d
}

.contactSection {
    margin-top: 1rem;
    color: #000;
    font-size: 1.4rem;
    min-height: 80vh;
}

.contactSection p {
    margin: 1rem 0
}

.heroImg {
    margin: 0
}

.heroImg img {
    border-radius: 50px;
    box-shadow: 1rem 1rem 0rem rgba(228, 28, 61,1);
}

.navContainer {
    padding: .4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.inquire {
    border: none;
    background-color: #e41c3d;
    color: #fff;
    position: absolute;
    padding: .5rem;
    bottom: 0;
    right: 0;
    font-size: 1.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s
}

.inquire:hover {
    color: #fff
}

.contactPhone, .contactMail {
    background: rgba(255,255,255,.7);
    padding: 1rem;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
    border-radius: 2rem;
}

.contactPhone p, .contactMail p {
    margin-bottom: 0
}

.contactSection a, .submitContact {
    border: none;
    background: #e41c3d;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    padding: .5rem 3rem;
    cursor: pointer;
    transition: all .3s;
}

.contactSection a:hover, .submitContact:hover, .inquire:hover {
    background: #b61933;
    box-shadow: 0rem .3rem 2rem rgba(182, 25, 51, 0.2);
}

.introTextContainer span {
    font-size: 2.8rem;
    margin: 0;
    background-color: #e41c3d;
    padding: 0 1rem;
    color: #fff
}

.rolunk, .tevekenyseg, .terulet, .kapcsolat {
    min-height: 80vh;
}

.terulet {
    min-height: 100vh;
}

.rolunk .row {
    position: relative;
}

.rolunk h2, .tevekenyseg h2, .kapcsolat h2, .terulet h2 {
    position: relative;
    font-size: 4rem;
    color: #e41c3d
}

.tevekenyseg .row {
    min-height: 80vh;
}

.terulet h2 {
    color: #fff
}

.rolunk h2::before {
    content: "Rólunk";
    position: absolute;
    top: -2rem;
    left: .7rem;
    font-size: 6rem;
    z-index: -1;
    opacity: .1;
    color: black
}

.tevekenyseg h2::before {
    content: "Tevékenységeink";
    position: absolute;
    top: -2rem;
    left: .7rem;
    font-size: 6rem;
    z-index: -1;
    opacity: .1;
    color: black
}

.kapcsolat h2::before {
    content: "Kapcsolat";
    position: absolute;
    top: -2rem;
    left: .7rem;
    font-size: 6rem;
    z-index: -1;
    opacity: .1;
    color: black
}

.terulet h2::before {
    content: "Területeink";
    position: absolute;
    top: -2rem;
    left: .7rem;
    font-size: 6rem;
    opacity: .1;
    color: black
}

.rolunk p, .tevekenyseg p, .kapcsolat p, .terulet p {
    font-size: 1.8rem
}

.terulet p {
    color: #fff
}

.rolunk .figure {
    position: absolute;
    width: auto;
    right: -2rem
}

.tevekenyseg span {
    font-size: 1.2rem;
}

.cardContainer div {
    border-bottom: 4px solid #e41c3d
}

.terulet {
    background-color: #e41c3d;
}

.terulet ul li {
    font-size: 1.6rem;
    color: #fff;
    list-style: square;
    cursor: pointer;
}

.teruletMap {
    position: relative;
}

.teruletMap img {
    position: absolute;
    left: -5vh;
    transition: all .4s;
}

footer {
    min-height: 50vh;
    background-color: #272827;
}

footer ul {
    list-style: none;
}

footer ul li a {
    text-decoration: none;
    color: #ffffff;
    border-bottom: transparent
}

footer ul li a:hover {
    border-bottom: 2px solid #e41c3d;
    color: #ffffff
}

footer .row {
    min-height: 50vh;
}

.fbContact {
    text-decoration: none;
    align-self: start;
}

.fbContact:last-child {
    border-bottom: 2px solid #e41c3d;
    width: 100%;
    padding-bottom: 1rem
}

.fbContact:first-child {
    border-top: 2px solid #e41c3d;
}

#contact p {
    align-self: start;
    width: 100%;
    border-bottom: 2px solid #e41c3d;
}

.success {
    background: red;
    height: 100%;
    width: 100%
}

.contactForm {
    position: relative;
}

#mailSend {
    margin-bottom: 1rem
}

.success {
    text-align: center;
    pointer-events: none;
    opacity: 0;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.2);;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 30px;
    transition: opacity 1s;
}

.disabledBtn {
    background-color: #272827;
    pointer-events: none;
    color: #727272
}


@media (max-width: 1600px) {
    .introTextContainer span {
        font-size: 2.5rem
    }
    
    header {
        margin-top: 10rem
    }
}

@media (max-width: 1200px) {
    .mobNav {
        width: 100%
    }
    
    .line1, .line2, .line3 {
        width: 30px;
        height: 5px;
        background-color: #fff;
        margin-bottom: .2rem
    }

    .line2 {
        background-color: #e41c3d;
    }

    .closer {
        top: 5%;
        right: 10%
    }

    .closer .line1 {
        transform: rotate(-45deg) translate(-.3rem,.3rem);
    }

    .closer .line2 {
        transform: rotate(45deg) translate(-.1rem,-.1rem) ;
        background-color: #ffffff
    }

    .overflow-disable {
        overflow: hidden !important;
    }

    .mobileNavs ul {
        height: 100vh;
        width: 100%;
        top: 0;
        right: -100%;
        background-color: #272827;
        font-size: 1.4rem;
        transition: right 1s;
    }

    .heroImg img {
        border-radius: 50px;
        box-shadow: .5rem .5rem 0rem rgba(228, 28, 61,1);
    }

    .rolunk p, .tevekenyseg p, .kapcsolat p, .terulet p {
        font-size: 1.2rem
    }

    .rolunk h2, .tevekenyseg h2, .kapcsolat h2, .terulet h2 {
        font-size: 2.5rem;
    }
    
    .rolunk h2::before {
        font-size: 3rem;
        top: -1rem;
    }
    
    .tevekenyseg h2::before {
        font-size: 2.8rem;
        top: -1rem;
        left: .7rem;
    }
    
    .kapcsolat h2::before {
        font-size: 3rem;
        top: -1rem;
    }
    
    .terulet h2::before {
        font-size: 3rem;
        top: -1rem;
    }

    header {
        margin-top: 0
    }
}

@media (max-width: 991px) { 
    

    .cardContainer {
        flex-direction: column;
    }

    .cardContainer div {
        margin-bottom: 1rem
    }
 }

 @media (max-width: 457px) {
    .introTextContainer span {
        font-size: 1.8rem
    }
  }

  @media (max-width: 350px) {
    .mobNav a, .mobNav a img {
        max-width: 80%
    }

    .introTextContainer span {
        font-size: 1.5rem
    }
  }