/*Saját css*/
body {
    margin: 0 auto;
    padding: 0;
}

h2 {
    font-family: "Lemonada";
    font-weight: bold;
    font-size: 32px;
    color: rgb(236, 71, 124);
    text-align: center;
    /*  padding-top: 3%;*/
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    text-align: center;
    color: darkred;
}

.header {
    background-image: url(img/BGR.jpg);
    width: 100%;
    background-size: cover;
   /* height: 70vh;*/

}

.header nav {
    display: flex;
    flex-direction: row;
    float: right;
}

.header nav a:hover {
    background: black;
}

.header nav a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    color: white;
    float: right;
    text-decoration: none;
    list-style-type: none;
    padding: 10px;
}

.header h1 {
    font-family: 'Lobster';
    font-size: 80px;
    color: white;
    text-align: center;
    padding-top: 180px;
    text-shadow: 2px 2px 1px #7f7f7f;
}

.header h2 {
    text-align: center;
    font-family: 'Lobster';
    /*
    padding-top: 20px;*/
    color: white;
}

#fejlec {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    height: 70vh;
    width: 100%;
    background-color: #662210;
    color: white;
    /*
    box-shadow: 0px 2px 5px 0px #441108, 0px 12px 15px 0px #441108 inset;*/
    font: 18px 'Finger Paint', cursive;
}

#logo {
    float: left;
    margin: 5px 15px 5px 5px;
    font: 18px 'Finger Paint', cursive;
    color: white;
}

.rolunk {
    width: 90%;
    margin: 0 auto;
    min-height: fit-content;
}

.rolunk h2 {
    padding-top: 3%;
}

.responsive {
    width: 60%;
    height: auto;
    float: left;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 5%;
}

.galeria img {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px;
    width: 130px;
}

.galeria img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.rolunk p {
    padding: 40px 10px 30px 10px;
    width: 100%;
    text-align: justify;
}

.rolunk2 {
    display: block;
    margin: 0 auto;
}

.galeria {
    margin: 20px auto;
}

.galeria h2,
.galeria p {
    width: 100%;
    text-align: center;

}

.mi {
    width: 100%;
    margin: 0 auto;
    background: rgb(168, 175, 182);
    min-height: fit-content;

}

.mi h2 {
    padding-top: 3%;
    text-align: center;
}

.nevek {
    padding-top: 10px;
    width: 95%;
    display: flex;
    justify-content: space-between;
    padding-left: 2%;

}

.nevek p {
    font-size: 16px;
    text-align: left;
}

.one {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    text-align: center;
}

.kep img {
    width: 110px;
    height: auto;

}

footer {
    background: rgb(68, 68, 68);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 18px;
}


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

    /* For tablets: */
    body {
        width: 100%;
    }

    .header {
        background-image: url(img/BGR.jpg);
    }

    .header h1 {
        font-size: 40px;
        padding-top: 80px;
    }

    #logo {
        float: left;
    }

    #logo img {
        height: 50px;
    }

    .header h2 {
        font-size: 14px;
        font-weight: lighter;
    }

    .header nav {
        display: flex;
        flex-direction: column;
        float: right;
    }

    .header nav a {
        font-size: 12px;
        text-align: left;
        padding: 5px;
    }

    #fejlec {
        position: relative;
    }

    .rolunk {
        min-width: auto;
    }

    .rolunk p {
        display: block;
    }

    .mi {
        height: fit-content;
        padding-top: 5%;
    }

    .mi h2,
    p {
        text-align: center;
    }

    .nevek {
        padding-top: 10px;
        width: 95%;
        display: flex;
        flex-direction: column;
        padding-left: 2%;
    }

    #csapat {
        display: block;
        position: relative;
        padding-right: 15px;
        padding-left: 15px;
    }

    .kep {
        margin: 5px auto;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        display: flex;
        flex-direction: column;
    }

    .two {
        min-width: 300px;
        font-size: 16px;
        text-align: left;
        margin: 0 auto;
    }

    footer {
        font-size: 13px;
        padding: 10px;
    }
}



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

    /* For mobile phones: */
    body {
        width: 100%;
        padding: 0;
    }

}

/*Saját css*/
        body {
            margin: 0 auto;
            padding: 0;
        }

        h2 {
            font-family: "Lemonada";
            font-weight: bold;
            font-size: 32px;
            color: rgb(236, 71, 124);
            text-align: center;
            /*  padding-top: 3%;*/
        }

        p {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 24px;
            text-align: center;
            color: black;
        }

        .header {
            background-image: url(img/BG2.jpg);
            width: 100%;
            background-size: cover;
            height: 70vh;

        }

        .header nav {
            display: flex;
            flex-direction: row;
            float: right;
        }

        .header nav a:hover {
            background: black;
        }

        .header nav a {
            font-family: Arial, Helvetica, sans-serif;
            font-size: large;
            color: white;
            float: right;
            text-decoration: none;
            list-style-type: none;
            padding: 10px;
        }

        .header h1 {
            font-family: 'Lobster';
            font-size: 80px;
            color: white;
            text-align: center;
            padding-top: 180px;
            text-shadow: 2px 2px 1px #7f7f7f;
        }

        .header h2 {
            text-align: center;
            font-family: 'Lobster';
            /*
            padding-top: 20px;*/
            color: white;
        }

        #fejlec {
            position: relative;
            display: block;
            top: 0;
            left: 0;
            height: 70vh;
            width: 100%;
            background-color: #662210;
            color: white;
            /*
            box-shadow: 0px 2px 5px 0px #441108, 0px 12px 15px 0px #441108 inset;*/
            font: 18px 'Finger Paint', cursive;
        }

        #logo {
            float: left;
            margin: 5px 15px 5px 5px;
            font: 18px 'Finger Paint', cursive;
            color: white;
        }

        .rolunk {
            width: 90%;
            margin: 0 auto;
            min-height: fit-content;
        }

        .rolunk h2 {
            padding-top: 3%;
        }

        .responsive {
            width: 60%;
            height: auto;
            float: left;
            padding: 10px;
            border: 1px solid gray;
            border-radius: 5px;
            margin-right: 10px;
            margin-bottom: 5%;
        }

        .galeria img {
            border: 1px solid gray;
            border-radius: 5px;
            padding: 5px;
            width: 130px;
        }

        .galeria img:hover {
            box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        }

        .rolunk p {
            padding: 40px 10px 30px 10px;
            width: 100%;
            text-align: justify;
        }

        .rolunk2 {
            display: block;
            margin: 0 auto;
        }

        .galeria {
            margin: 20px auto;
        }

        .galeria h2,
        .galeria p {
            width: 100%;
            text-align: center;

        }

        .mi {
            width: 100%;
            margin: 0 auto;
            background: rgb(168, 175, 182);
            min-height: fit-content;

        }

        .mi h2 {
            padding-top: 3%;
            text-align: center;
        }

        .nevek {
            padding-top: 10px;
            width: 95%;
            display: flex;
            justify-content: space-between;
            padding-left: 2%;

        }

        .nevek p {
            font-size: 16px;
            text-align: left;
        }

        .one {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            text-align: center;
        }

        .kep img {
            width: 110px;
            height: auto;

        }

        footer {
            background: rgb(68, 68, 68);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            color: white;
            text-align: center;
            padding: 18px;
        }


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

            /* For tablets: */
            body {
                width: 100%;
            }

            .header {
                max-height: fit-content;
            }

            .header h1 {
                font-size: 40px;
                padding-top: 80px;
            }

            #logo {
                float: left;
            }

            #logo img {
                height: 50px;
            }

            .header h2 {
                font-size: 14px;
                font-weight: lighter;
            }

            .header nav {
                display: flex;
                flex-direction: column;
                float: right;
            }

            .header nav a {
                font-size: 12px;
                text-align: left;
                padding: 5px;
            }

            #fejlec {
                position: relative;
            }

            .rolunk {
                min-width: auto;
            }

            .rolunk p {
                display: block;
            }

            .mi {
                height: fit-content;
                padding-top: 5%;
            }

            .mi h2,
            p {
                text-align: center;
            }

            .nevek {
                padding-top: 10px;
                width: 95%;
                display: flex;
                flex-direction: column;
                padding-left: 2%;
            }

            #csapat {
                display: block;
                position: relative;
                padding-right: 15px;
                padding-left: 15px;
            }

            .kep {
                margin: 5px auto;
                position: relative;
                width: 100%;
                padding-right: 15px;
                padding-left: 15px;
                display: flex;
                flex-direction: column;
            }

            .two {
                min-width: 300px;
                font-size: 16px;
                text-align: left;
                margin: 0 auto;
            }

            footer {
                font-size: 13px;
                padding: 10px;
            }
        }



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

            /* For mobile phones: */
            body {
                width: 100%;
                padding: 0;
            }

        }