* {
    padding: 0;
    margin: 0;
    text-align: center;
    box-sizing: border-box
}

@font-face {
    font-family: font1;
    src: url(fonts/font1.ttf);
}

@font-face {
    font-family: font2;
    src: url(fonts/font2.ttf);
}

@font-face {
    font-family: font3;
    src: url(fonts/font3.ttf);
}

@font-face {
    font-family: font4;
    src: url(fonts/font4.ttf);
}

@font-face {
    font-family: font5;
    src: url(fonts/font5.ttf);
}

.item18 p {
    font-size: 3vh;
}

.icon2 {
    width: 10%;
    padding: 5%;
    display: block;
    color: white;
}

.mySlides {
    display: none;
}

img {
    vertical-align: middle;
}

.jog1 {
    color: white;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1vh;
    margin-top: 0;
}

.jog2 {
    color: white;
    font-size: 1.5vh;
}

.item2 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
}

.item2 li {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}

.item2 li a {
    color: black;
    font-family: font1;
    text-align: center;
    padding-top: 10%;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 2vh;
}

.slideshow-container {
    max-width: 80%;
    margin: auto;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

.prev,
.next {
    cursor: pointer;
    width: auto;
    color: black;
    font-weight: bold;
    padding: 10%;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.tittle {
    float: left;
    font-family: font1;
    font-size: 4vh;
    margin-top: 2%;
    margin-left: 5%;
    margin-bottom: 1vh;
    color: black;
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

form {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

form h2 {
    padding-bottom: 2%;
    color: white;
    font-size: font5;
    font-size: 3vh;
}

form input,
form textarea {
    border: white solid 2px;
    margin: 1% 0;
    padding: 1%;
    background: #f5f5f5;
    font-size: 1.5vh;
    text-align: left;
}

form button {
    background-color: red;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: none;
    width: 40%;
    padding: 1%;
    font-size: 2vh;
    font-weight: bold;
    font-variant: small-caps;
    margin-top: 1%;
}

.part {
    width: 50%;
    margin-bottom: 5vh;
}

.item25 img {
    margin-top: 3vh;
    margin-bottom: 2vh;
}

.item5 p {
    text-align: justify;
}

.item6 p {
    text-align: justify;
}

.item7 p {
    text-align: justify;
}

.item8 p {
    text-align: justify;
}

.item8 p {
    text-align: justify;
}

.item10 p {
    text-align: justify;
}

.item11 p {
    text-align: justify;
}

.item12 p {
    text-align: justify;
}

.item13 p {
    text-align: justify;
}

.item14 p {
    text-align: justify;
}

iframe {
    width: 90%;
    height: 300px;
}

.item0 {
    grid-area: header;
    position: fixed;
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-bottom: solid 3px black;
}

.item1 {
    grid-area: header2;
    display: none;
    position: fixed;
    background-color: rgb(255, 255, 255);
}

.item2 {
    grid-area: menu;
    width: 100%;
    display: none;
    margin-top: 8vh;
    position: fixed;
    border-top: black solid 3px;
    border-bottom: black solid 3px;
}

.item3 {
    margin-top: 7vh;
    grid-area: kép;
    width: 100%;
}

.item4 {
    grid-area: szolgáltatások;
    width: 100%;
    margin-top: 0;
    padding-top: 20%;
    margin-bottom: 5%;
}

.item5 {
    grid-area: hajókozmetika;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: white;
    color: black;
    padding: 5%;
    border-radius: 15px;
    border: solid black 3px;
    background-image: url(img/h.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
}

.item6 {
    grid-area: fóliázás;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: white;
    color: black;
    padding: 5%;
    border-radius: 15px;
    border: solid black 3px;
    background-image: url(img/m.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
}

.item7 {
    grid-area: karbantartás;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: white;
    color: black;
    padding: 5%;
    border-radius: 15px;
    border: solid black 3px;
    background-image: url(img/k.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
}

.item8 {
    grid-area: kárpitozás;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: white;
    color: black;
    padding: 5%;
    border-radius: 15px;
    border: solid black 3px;
    background-image: url(img/ká.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
}

.item10 {
    grid-area: vitorlavárrás;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: white;
    color: black;
    padding: 5%;
    border-radius: 15px;
    border: solid black 3px;
    background-image: url(img/v.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
}

.item11 {
    grid-area: fényezés;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: white;
    color: black;
    padding: 5%;
    border-radius: 15px;
    border: solid black 3px;
    background-image: url(img/f.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
}

.item12 {
    grid-area: felujítás;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: white;
    color: black;
    padding: 5%;
    border-radius: 15px;
    border: solid black 3px;
    background-image: url(img/á.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
}

.item13 {
    grid-area: ügyintézés;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: white;
    color: black;
    padding: 5%;
    border-radius: 15px;
    border: solid black 3px;
    background-image: url(img/ü.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
}

.item14 {
    grid-area: rólunk;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-top: 20%;
}

.item14 h1 {
    margin-bottom: 10%;
}

.item15 {
    grid-area: emő;
    width: 100%;
    margin-bottom: 3%;
}

.item16 {
    grid-area: bence;
    width: 100%;
    margin-bottom: 3%;
}

.item17 {
    grid-area: referenciák;
    width: 100%;
    margin-top: 0;
    padding-top: 20%;
    margin-bottom: 3%;
}

.item17 h1 {
    margin-bottom: 10%;
}

.item18 {
    grid-area: kapcsolat;
    width: 100%;
    margin-top: 0;
    padding-top: 20%;
    margin-bottom: 3%;
}

.item18 h1 {
    margin-bottom: 10%;
}

.item19 {
    grid-area: lépj;
    width: 100%;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: black;
    padding-top: 5%;
    padding-bottom: 2%;
}

.item20 {
    grid-area: partnereink;
    width: 100%;
    margin-top: 0;
    padding-top: 20%;
    margin-bottom: 3%;
}

.item20 h1 {
    margin-bottom: 10%;
}

.item21 {
    grid-area: ricky;
    width: 100%;
}

.item22 {
    grid-area: ivanics;
    width: 100%;
}

.item23 {
    grid-area: intercars;
    width: 100%;
}

.item24 {
    grid-area: lakkpiac;
    width: 100%;
}

.item25 {
    grid-area: jetpilot;
    width: 100%;
}

.item26 {
    grid-area: footer1;
    width: 100%;
    background-color: black;
}

.item27 {
    grid-area: footer2;
    width: 100%;
    background-color: black;
    margin-bottom: 0;
}

.item28 {
    grid-area: jog;
    width: 100%;
    background-color: black;
}

.item29 {
    grid-area: tisza;
    width: 100%;
}

.grid-container {
    display: grid;
    grid-template-areas: 'header header' 'menu menu' 'kép kép' 'szolgáltatások szolgáltatások' 'hajókozmetika hajókozmetika' 'karbantartás karbantartás' 'fóliázás fóliázás' 'kárpitozás kárpitozás' 'fényezés fényezés' 'felujítás felujítás' 'vitorlavárrás vitorlavárrás' 'ügyintézés ügyintézés' 'rólunk rólunk' 'emő emő' 'referenciák referenciák' 'kapcsolat kapcsolat' 'lépj lépj' 'partnereink partnereink' 'ricky ricky' 'ivanics ivanics' 'intercars intercars' 'lakkpiac lakkpiac' 'jetpilot jetpilot' 'tisza tisza' 'footer1 footer1' 'footer2 footer2' 'jog jog';
}

.cim {
    margin-top: 15%;
}

.item26 p {
    color: white;
    font-size: 2vh;
}

.borító {
    width: 100%;
}

h1 {
    font-family: font2;
    font-size: 4vh;
}

h2 {
    font-family: font5;
    font-size: 3vh;
}

h3 {
    font-family: font5;
    font-size: 2vh;
}

p {
    font-family: font5;
    font-size: 2vh;
    margin-top: 3%;
    margin-bottom: 3%;
}

.item14 p {
    padding-left: 5%;
    padding-right: 5%;
}

.item15 h2 {
    padding-top: 5%;
}

.item16 h2 {
    padding-top: 5%;
}

.item15 p {
    font-size: 2.5vh;
    margin-top: 0;
}

.item16 p {
    font-size: 2.5vh;
    margin-top: 0;
}

.pic {
    width: 80%;
}

.smallogo {
    width: 20%;
    float: left;
    margin-left: 15%;
}

.icon {
    width: 6vh;
    float: right;
    margin-top: 1.5vh;
    margin-right: 5%;
}

.fpic {
    margin-left: 10%;
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.icon3 {
    width: 13%;
    margin-top: 3%;
    margin-left: 5%;
    margin-right: 6%;
    background-color: white;
}

.icon4 {
    width: 13%;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 6%;
    background-color: white;
}

.icon5 {
    width: 10%;
    margin-top: 3%;
    margin-left: 4%;
    margin-right: 4%;
}

.item27 p {
    font-size: 3vh;
    margin-top: 10%;
}

#menu2 {
    display: none;
}

.bg {
    background-color: rgb(255, 255, 255, 0.8);
    border-radius: 15px;
    padding: 3%;
}

@media only screen and (min-width: 768px) {
    iframe {
        width: 70%;
        height: 300px;
    }
    .item0 {
        width: 100%;
    }
    .item1 {
        display: none;
    }
    .item2 {
        width: 100%;
    }
    .item3 {
        width: 100%;
    }
    .item4 {
        width: 100%;
        margin-top: 8%;
        margin-bottom: 2%;
    }
    .item5 {
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item6 {
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item7 {
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item8 {
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item10 {
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item11 {
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item12 {
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item13 {
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item14 {
        width: 100%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item15 {
        width: 100%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .item16 {
        width: 100%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .item17 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item18 {
        width: 100%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item19 {
        width: 100%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item20 {
        width: 100%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .item21 {
        width: 100%;
    }
    .item22 {
        width: 100%;
    }
    .item23 {
        width: 100%;
    }
    .item24 {
        width: 100%;
    }
    .item25 {
        width: 100%;
    }
    .item26 {
        width: 100%;
    }
    .item29 {
        width: 100%;
    }
    h1 {
        font-size: 5vh;
    }
    h2 {
        font-size: 3.5vh;
    }
    h3 {
        font-size: 2.5vh;
    }
    p {
        font-size: 3vh;
    }
    .item5 p {
        text-align: justify;
    }
    .item6 p {
        text-align: justify;
    }
    .item7 p {
        text-align: justify;
    }
    .item8 p {
        text-align: justify;
    }
    .item8 p {
        text-align: justify;
    }
    .item10 p {
        text-align: justify;
    }
    .item11 p {
        text-align: justify;
    }
    .item12 p {
        text-align: justify;
    }
    .item13 p {
        text-align: justify;
    }
    form h2 {
        font-size: 5vh;
    }
    form input,
    form textarea {
        font-size: 2vh;
    }
}

@media only screen and (min-width: 1073px) {
    .slideshow-container {
        width: 50%;
        margin: auto;
    }
    .pic {
        width: 500px;
        height: 500px;
    }
    .tittle {
        float: left;
        font-family: font1;
        font-size: 3.5vh;
        margin-left: 5%;
        margin-top: 1vh;
        margin-bottom: 1vh;
        color: #1b1b1e;
    }
    iframe {
        width: 50%;
        height: 370px;
        float: left;
    }
    .jog1 {
        margin-top: 0;
        font-size: 2vh;
    }
    .jog2 {
        font-size: 2.5vh;
    }
    .item0 {
        display: none;
    }
    .item1 {
        display: grid;
        width: 100%;
        font-family: font1;
        font-size: 1.9vh;
        border-bottom: solid 3px black;
    }
    .item2 {
        display: none;
    }
    .item3 {
        margin-top: 7.5vh;
        width: 100%;
        margin-bottom: 0;
    }
    .item4 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding-top: 6%;
        margin-bottom: 3%;
    }
    .item5 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item6 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item7 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item8 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item9 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item10 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item11 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item12 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item13 {
        width: 70%;
        margin-top: 5%;
        margin-bottom: 5%;
        transition: 2s;
    }
    .item14 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding-top: 6%;
        margin-bottom: 5%;
    }
    .item14 h1 {
        margin-bottom: 5%;
    }
    .item15 {
        width: 100%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .item16 {
        width: 100%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .item17 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding-top: 6%;
        margin-bottom: 2%;
    }
    .item17 h1 {
        margin-bottom: 5%;
    }
    .item18 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding-top: 6%;
        margin-bottom: 2%;
    }
    .item18 h1 {
        margin-bottom: 5%;
    }
    .item19 {
        width: 100%;
        margin-top: 2%;
        margin-bottom: 5%;
    }
    .item20 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding-top: 6%;
        margin-bottom: 5%;
    }
    .item20 h1 {
        margin-bottom: 5%;
    }
    .item21 {
        width: 100%;
    }
    .item22 {
        width: 100%;
    }
    .item23 {
        width: 100%;
    }
    .item24 {
        width: 100%;
    }
    .item25 {
        width: 100%;
    }
    .item26 {
        width: 100%;
    }
    .item29 {
        width: 100%;
    }
    .grid-container {
        grid-template-areas: 'header2 header2 header2 header2 header2 header2' 'kép kép kép kép kép kép' 'szolgáltatások szolgáltatások szolgáltatások szolgáltatások szolgáltatások szolgáltatások' 'hajókozmetika hajókozmetika hajókozmetika karbantartás karbantartás karbantartás ' 'fóliázás fóliázás fóliázás kárpitozás kárpitozás kárpitozás' 'fényezés fényezés fényezés felujítás felujítás felujítás' 'vitorlavárrás vitorlavárrás vitorlavárrás ügyintézés ügyintézés ügyintézés' 'rólunk rólunk rólunk rólunk rólunk rólunk' 'emő emő emő emő emő emő' 'referenciák referenciák referenciák referenciák referenciák referenciák' 'kapcsolat kapcsolat kapcsolat kapcsolat kapcsolat kapcsolat' 'lépj lépj lépj lépj lépj lépj' 'partnereink partnereink partnereink partnereink partnereink partnereink' 'ricky ricky ivanics ivanics intercars intercars' 'lakkpiac lakkpiac tisza tisza jetpilot jetpilot ' 'footer1 footer1 footer1 footer2 footer2 footer2' 'jog jog jog jog jog jog';
    }
    .logo {
        width: 10%;
    }
    .item1 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: white;
    }
    .item1 li {
        float: right;
        margin-top: 2.8vh;
    }
    .item1 li a {
        color: black;
        text-align: center;
        padding-top: 10%;
        padding: 14px 16px;
        text-decoration: none;
    }
    .item1 li a:hover {
        background-color: black;
        color: white;
    }
    h1 {
        font-size: 6vh;
    }
    h2 {
        font-size: 3.75vh;
    }
    h3 {
        font-size: 2.75vh;
    }
    p {
        font-size: 2vh;
    }
    .fpic {
        width: 60%;
        margin: auto;
    }
    .icon3 {
        width: 15%;
        margin-top: 3%;
        margin-left: 2%;
        margin-right: 3%;
    }
    .icon4 {
        width: 15%;
        margin-top: 5%;
        margin-right: 2%;
        margin-left: 3%;
    }
    .icon5 {
        width: 10%;
        margin-top: 3%;
        margin-left: 4%;
        margin-right: 4%;
    }
    .item26 p {
        font-size: 3vh;
    }
    .cim {
        margin-top: 25%;
    }
    .kap {
        margin-top: 100px;
    }
}

@media only screen and (min-width: 1400px) {
    .item1 li {
        margin-top: 3.5vh;
        margin-right: 2%;
    }
    .item1 {
        font-size: 2vh;
    }
    h1 {
        font-size: 7vh;
    }
    h2 {
        font-size: 4vh;
    }
    h3 {
        font-size: 3vh;
    }
    p {
        font-size: 2vh;
    }
    .tittle {
        font-size: 5vh;
        margin-left: 5%;
        margin-top: 1vh;
        margin-bottom: 1vh;
    }
    .item3 {
        margin-top: 10vh;
    }
}