:root {
    --greenbase: #57d98b;
    --hue: 0deg;
    --hueneg: 0deg;
    --shadowOver: rgba(248, 79, 37);
    --purp: #59547d;
    --placehold: grey;
    --textPlacehold: grey;
    --frame: 620px;
    --mobile: 960px;
    --display: 'initial';
    --redcolor: rgba(248, 79, 37);
    --high: #f84f25;
    --smallArrow: ;
    --minutetime: ;
    --milsecs: ;
    --seconds: 0deg;
    --minutes: ;
    --sizer: 1;
    --step: 0;
    --parent-width: 0;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}


input[type="checkbox"] {
    accent-color: #f84f25;
    /* ide jön az új szín */
}


@font-face {
    font-family: "Univia";
    src: url("./fonts/UniviaPro-Bold.otf");
    font-weight: 500;
}

@font-face {
    font-family: "UniviaRegular";
    src: url("./fonts/CodecPro-Regular.ttf");
    font-weight: 500;
}


body {
    font-family: "UniviaRegular";
}


#intro {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 80000;
    background-color: black;
    align-content: center;
    filter: opacity(100);
    transition: filter 0.5s ease;
}

#intro img {
    width: 100%;
    filter: grayscale(100%);
    transition: filter 0.6s ease-out;
    opacity: 25%;
}

#introWrapper {
    width: 25vw;
}




#colorWrapper {
    display: flex;
    justify-content: right;
    width: 100%;
    height: 40px;
    position: absolute;
    margin-top: 20px;
    padding-right: 8vw;
}


#mobileColorWrapper {
    display: flex;
    justify-content: left;
    width: 100%;
}

#desktopColorWrapper {
    display: flex;
    justify-content: left;
    width: 100%;
}

#colorPick {
    margin-top: 48px;
}


.hue-picker {
    z-index: 2000;
    filter: hue-rotate(var(--hueneg));
    position: relative;
    width: 360px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    background: linear-gradient(to right,
            hsl(0, 100%, 50%) 0%,
            hsl(60, 100%, 50%) 16.6%,
            hsl(120, 100%, 50%) 33.3%,
            hsl(180, 100%, 50%) 50%,
            hsl(240, 100%, 50%) 66.6%,
            hsl(300, 100%, 50%) 83.3%,
            hsl(360, 100%, 50%) 100%);
}


.thumb {
    z-index: 2000;
    position: absolute;
    top: 0;
    width: 16px;
    height: 20px;
    background: white;
    border-left: 1px solid black;
    border-right: 1px solid black;
    /* transform: translateX(-50%); */
    pointer-events: none;
    /* ne akadályozza a kattintást */
}


video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none;
}

video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}



#landingMain {
    /* background-image: url("./assets/t66.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; */
}


* {
    box-sizing: border-box;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;

}

html {
    scroll-behavior: smooth;
    filter: hue-rotate(var(--hue))
}



body {
    min-height: 200vh;
    background-color: rgb(0, 0, 0) !important;
    filter: hue-rotate(--var(--hue));
    font-family: 'Univia';
    /* filter:hue-rotate(266deg) */

}



/* video {
    will-change: transform, opacity;
    transform: translateZ(0);
} */


main {}



.hideItem {
    opacity: 0;
    transform: translateY(0px);
}





#videoFrame {
    width: 100%;
    height: 100vh;
    /* pl. teljes képernyő */
    overflow: hidden;
    position: fixed;
    opacity: 100%;
    filter: brightness(85%)grayscale(0%);
    /* animation-name: opa;
    animation-duration: 30.15s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    opacity: 0; */
}

#videoFader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, rgba(17, 216, 133, 0) 66%, rgb(0, 0, 0) 95%);
    transition: ease;
    transform: rotateX(180deg);
    display: none;
}

#videoFrame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}


#hero {
    overflow: hidden;
    transition: ease;
    -webkit-transition: ease;
}


.heroContainer {
    position: relative;
    z-index: 200;
    min-height: 100vh;
    align-content: center;
    font-family: 'Univia';
    transform: translateX(4rem);
}


.heroContainer h1 {
    color: var(--redcolor);
    position: relative;
    z-index: 200;
}

.heroContainer h2 {
    color: white;
    position: relative;
    z-index: 200;
    transition: ease;
    -webkit-transition: ease;
}

.heroContainer h3 {
    color: white;
    position: relative;
    z-index: 200;
}

.heroContainer h3 span {
    color: var(--redcolor);
}

#heroTexts {
    position: relative;
    padding-left: 192px;
    transform: scale(1);
    transition: ease;
    -webkit-transition: ease;
    /* kezdő méret */
}

#heroLogo {
    position: absolute;
    width: 40%;
    filter: brightness(33%);
    transform: translate(-64px, -56px);
    z-index: 20;
}


#ctaButton {
    margin-top: 1rem;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--redcolor);
    color: white;
    font-size: 20px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 4px;
    font-family: "Univia";
    position: relative;
    z-index: 50;
}

#blogButton {
    margin-top: 1rem;
    border: none !important;
    box-shadow: none !important;
    background-color: rgba(248, 79, 37, 0);
    border: solid 2px var(--redcolor) !important;
    color: white;
    font-size: 20px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 4px;
    font-family: "Univia";
    position: relative;
    z-index: 50;
    transform: translateX(0%);
    margin-left: 0px;
    box-shadow: 2px 2px 32px 2px var(--redcolor) !important;

}





.servicesContainer {
    transform: scale(1.05)translateY(150px)
}

.serviceRow {
    margin-bottom: 32vh;
    transform: scale(0.9);
}

#webdesignMap {
    transform: scale(0.9)
}

#basemap {
    position: absolute;
    width: 100%;
}

#baserotate {
    width: 100%;
    transition: ease;
    opacity: 66%;
}


#webdesign {
    padding-top: 5vh;
    padding-bottom: 20vh;
    min-height: 100vh;
    overflow: hidden;
    scroll-margin-top: 10vh;
    transition: ease;
}

.webdesignDescription {
    margin-bottom: 1rem;
}

#webdesign h2 {
    color: var(--redcolor);
    font-family: 'Univia';
    font-weight: 600;
    padding-top: 0.5rem;
    padding-right: 1rem;
    font-size: 2.5rem;
}


.webdesignText {
    font-family: 'UniviaRegular';
    color: white;
    font-size: 20px;
    font-weight: 700;
    align-content: center;
    position: relative;
}

.webdesignText img {
    width: 100%;

}

#webshopRow {
    transform: translateX(6rem)scale(0.9);
}

.webRoww {
    transform: scale(0.8);
    margin-bottom: 200px;
}

.webRow {
    margin-bottom: 200px;
    transition: ease;
    -webkit-transition: ease;
    /* will-change: transform, opacity; */
    transform-origin: center;
    transform: scale(0.8)translateZ(0);
    /* backdrop-filter: blur(3px); */
}

#propeller,
#devImage,
#cartEffect {
    transition: ease;
}


#dsgOne,
#dsgTwo {
    position: absolute;
    transition: ease;
}

#dsgThree {
    position: relative;
    transition: ease;
}



#cartEffect {
    position: absolute;
    width: 100%;
}

#cart {
    position: relative;
    width: 100%;
    transform: translateX(8px);
}










#about {
    overflow: hidden;
    padding-top: 8vh;
    padding-bottom: 5vh;
    min-height: 108vh;
    /* background-image: url('./assets/framed6.png');
    background-size: 100%;
    background-repeat: no-repeat; */
    position: relative;
    z-index: 500;
    transition: ease;
    scroll-margin-top: 0vh;
    /* filter: drop-shadow(0px -1px 264px rgba(248, 79, 37, 0.25)); */
    align-content: center;
    opacity: 100%;
}


#about h2 {
    color: white;
    font-size: 44px;
    font-weight: 700;
    line-height: 22px;
}

.aboutRow {
    transform: translateX(160px);
}


#aboutImages {}

#aboutImage {
    width: 450%;
    transform: translateX(-25vw);
    transition: opacity 0.8s ease;
    opacity: 1;
}





.myName {
    color: var(--redcolor);
    font-size: 24px;
    font-weight: 800;
}

#myselfVideo {
    opacity: 90%;
    position: relative;
    z-index: 200;
}

.aboutVideo {
    border-radius: 12px;
    padding-top: 8px;
    margin-left: 8px;
    overflow: hidden;
    filter: brightness(100%);
    animation-name: opatwo;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    box-shadow: 2px 2px 128px 4px var(--redcolor);
    background-color: black;
    position: relative;
    z-index: 120;
}

.aboutVideo:hover {}

#myVideo {
    transform: translateX(12px);
}

.descriptionBorder {
    border-left: solid 12px var(--redcolor);
    padding-left: 1rem;
}

.portrait img {
    width: 100%;
    opacity: 96%;
    transform: translate(-5.5rem, -18rem);
    /* filter: drop-shadow(4px 4px 400px var(--redcolor)); */
}

.portrait {
    min-height: 33vh;
}

#portraitDefault {
    position: absolute;
}

#portraitFader {
    position: absolute;
    display: none;
    filter: hue-rotate(var(--hueneg));
}







#portfolio {
    padding-top: 20vh;
    overflow: hidden;
    transition: ease;
    /* background-image: url('./assets/webdebg.jpg');
    background-repeat: repeat; */
    background-size: 100%;
    position: relative;
    background-attachment: fixed;
    z-index: 500;
    scroll-margin-top: -64px;
}


.blogNumbers {
    font-size: 320px;
    font-family: "UniviaRegular";
    color: var(--redcolor);
    font-weight: 800;
    position: absolute;
    opacity: 33.33%;
    transform: translate(32px, -152px);
    filter: drop-shadow(4px 4px 400px var(--redcolor));
}

.portfolioImage {
    box-shadow: 1px 1px 64px 1px var(--shadowOver);
    border-radius: 8px;
    filter: grayscale(25%)brightness(90%)hue-rotate(var(--hueneg));
    width: 100%;
}

.backImage {
    position: absolute;
    display: flex;
    border-radius: 8px;
    /* filter: grayscale(25%) brightness(90%) hue-rotate(var(--hueneg)) drop-shadow(1px 1px 48px var(--shadowOver)); */
    transform: rotateY(180deg);
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    height: 100%;
    gap: 0.5rem;
}

.backImage img {
    width: unset;
    filter: grayscale(25%) brightness(90%) hue-rotate(var(--hueneg));
    box-shadow: 1px 1px 64px 1px var(--shadowOver);
    border-radius: 16px;
}

.reducedImages {
    margin-left: -3.5rem;
}

.blogCoverImage {
    position: relative;
}


.portfolioImage,
.backImage {
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.portfolioRow {
    margin-bottom: 256px !important;
    /* transform: scale(0.8)!important; */
}

#portfolio h2 {
    font-size: 56px;
    text-align: center;
    color: var(--redcolor);
    font-weight: 600;
    font-family: 'Univia';
}





#blog {
    min-height: 100vh;
    padding-top: 30vh;
    overflow: hidden;
    transition: ease;
    scroll-margin-top: 0px;
}


.blogImage {
    width: 100%;
    /* filter:drop-shadow(1px 4px 16px rgb(236, 88, 88)) */
}

.blogRow {
    margin-bottom: 256px;
    cursor: pointer;
}

.blogRow span {
    color: var(--redcolor);
    font-size: 1.5rem;
}



#faq {
    padding-top: 20vh;
    padding-bottom: 20vh;
}

#faq h2 {
    color: var(--redcolor);
    font-family: 'Univia';
    font-weight: 600;
}

#faq img {
    margin-top: -3rem;
    width: 100%;
}

.faqRow {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 200;
    font-family: 'UniviaRegular';
    color: white;
    font-size: 20px;
    font-weight: 700;
}

#questionImage {
    transition: ease;
}




#contact {
    padding-top: 15vh;
    padding-bottom: 10vh;
    overflow: hidden;
    transition: ease;
    scroll-margin-top: 0px;

}

#contact h2 {
    color: var(--redcolor);
    font-size: 48px;
    font-family: 'Univia';
    text-align: center;
    margin-bottom: 96px;
}


.inputWrapper {
    display: flex;
    justify-content: left;
    margin-bottom: 16px;
    gap: 1rem;

}

.formInputs {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
    width: 100%;

}

#message {
    height: 170px;
    resize: none;
    border: none !important;
    border-radius: 4px;
    padding: 0.25rem;
    padding-left: 0.5rem !important;
    background-color: rgba(138, 212, 166, 0);
    border: solid 1px black !important;
    color: white !important;
    box-shadow: 1px 1px 320px 2px var(--redcolor);
}


.rowInputs {
    display: flex;
    flex-direction: row;
}

#gdpr {
    margin-right: 12px;
    margin-top: -2px;
}

#gdprLabel {
    font-size: 19.5px;
}

#salary {
    cursor: pointer;
}

#formChecker {
    padding-top: 20px;
}


#formButton {
    margin-top: 32px;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--redcolor);
    color: white;
    font-size: 20px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 4px;
    font-family: "Univia";
    position: relative;
    z-index: 50;
}



input,
select {
    border-radius: 4px !important;
    border: none !important;
    padding: 0.25rem !important;
    padding-left: 0.5rem !important;
    color: white !important;
    background-color: rgba(138, 212, 166, 0);
    border: solid 1px black !important;
    box-shadow: 1px 1px 96px 2px var(--redcolor);
}

label {
    color: rgb(255, 255, 255);
    font-weight: 700;
}

input::placeholder {
    color: var(--placehold);
}

input:focus,
textarea:focus {
    outline: none;
    box-shadow: 1px 1px 32px 2px var(--redcolor);
}


textarea::placeholder {
    color: var(--textPlacehold);
}


select:invalid {
    color: red;
    /* Vagy piros, ha azt szeretnéd jelezni, hogy hibás */
}


#gdprLabel a {
    color: unset;
    text-decoration: none !important;
}

#lastName {
    width: 98%;
}





/*-------------media------------------------*/


@media screen and (max-width: 1280px) {
    #seventhSection {
        min-height: 70vh;
        padding-top: 20vh;
        padding-bottom: 20vh;
        min-height: 100vh;
        background-repeat: no-repeat;
        /* background: #148551;
    background: radial-gradient(circle, #116651 0%, var(--greenbase) 100%); */
        background-color: black;
        background-image: url("./assets/contactx.jpg");
        background-size: 100%;
        background-position-y: 80px;
    }

    .webRow,
    .webRoww {
        transform: scale(1);
    }

    .servicesContainer {
        transform: scale(0.8)
    }

    .aboutRow {
        transform: translateX(160px);
    }

    #about h2 {
        font-size: 40px;
    }
}

@media screen and (max-width: 991px) {
    #heroTexts {
        padding-left: 0px !important;
    }

    .heroContainer {
        transform: translateX(0px);
    }


    #colorWrapper {
        display: none;
    }

    .aboutVideo {
        padding-left: 0px;
        transform: translateX(-1rem);
    }

    #aboutImage {
        width: 110%;
        transform: translate(-10vw, 4vh);
        transition: opacity 0.8s ease;
        opacity: 1;
    }

    #heroLogo {
        position: absolute;
        width: 66%;
        opacity: 20%;
        transform: translate(0px, -56px);
        z-index: 20;
    }

    #about {
        box-shadow: none;

    }

    .aboutRow {
        transform: translateX(0px);
    }

    #about h2 {
        font-size: 44px;
    }

    .servicesContainer {
        transform: scale(1)
    }

    #webshopRow {
        transform: translateX(0rem)scale(1);
    }

    .serviceRow {
        transform: scale(1);
    }

    #portfolio {
        background-image: none;
        background-repeat: no-repeat;
        background-color: rgba(138, 212, 166, 0);
    }

    .blogNumbers {
        transform: translate(0px, -320px);
    }

    .mobileReverse {
        flex-direction: column-reverse;
    }

    .portfolioImage {
        margin-bottom: 0.5rem;

    }

    .portfolioRow {
        margin-bottom: 320px !important;
    }

    #portfolio h2 {
        margin-bottom: 16rem;
    }

    .portrait img {
        width: 100%;
        opacity: 96%;
        transform: translate(0rem, -32rem)rotateY(180deg)scale(0.6);
    }

    #blogImage {
        transform: translateX(-32px) !important;
    }

    #blog {
        scroll-margin-top: -160px;
    }

    #portfolio {
        min-height: 1000vh;
    }

    .reducedImages {
        margin-left: 0rem;
    }

    .backImage {
        margin-left: .5rem;
    }

}


@media screen and (max-width: 576px) {
    .inputWrapper {
        display: initial;
    }

    .webRow {
        margin-top: 100px;
    }

    #colorWrapper {
        display: none
    }

    #gdprLabel {
        font-size: 16px;
    }

    #about {}

    #formButton {
        margin-top: 24px;
    }

    .serviceRow {
        transform: scale(1.0);
    }

    #lastName {
        width: 100%;
    }

    #contact {
        scroll-margin-top: -32px;
    }

    #myVideo {
        width: 100%
    }

    .aboutText {
        padding-top: 0px;
    }

    #portfolio {
        padding-top: 0;
    }

    .portrait img {
        width: 100%;
        opacity: 100%;
        transform: translate(0rem, -24rem)rotateY(180deg);
    }

    .portrait {
        display: none;
    }


    .lastParam {
        width: 80%;
    }

    .myName {
        font-size: 7vw;
    }

    #about h2 {
        font-size: 12vw;
        line-height: 12vw;
    }

    #about {
        padding-top: 64px;
        padding-bottom: 0;
    }

    .blogNumbers {
        font-size: 320px;
        color: var(--redcolor);
        position: absolute;
        opacity: 12.5%;
        transform: translate(0px, -320px);
        /* filter:drop-shadow(4px 4px 400px var(--redcolor)); */
        filter: none;
    }

    #portfolio h2,
    #contact h2 {
        text-align: left;
    }

    .webdesignDescription {}

    #heroLogo {
        width: 100%;
        transform: translate(0, -24px);
        opacity: 10%;
    }
}



@keyframes opa {
    0% {
        opacity: 0%;
    }

    3% {
        opacity: 100%;
    }

    90% {
        opacity: 100%;
    }

    99% {
        opacity: 0%;
    }

    100% {
        opacity: 0%;
    }
}

@keyframes opatwo {
    0% {
        opacity: 100%;
    }

    50% {
        opacity: 95%;
    }

    100% {
        opacity: 100%;
    }
}