* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

/* NABAR ÉS HERO */

.hero {
    background: url(./img/hero_hd.jpg);
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.logo {
    width: 80px;
}

.navbar {
    background: rgba(0, 0, 0, 0.4);
    height: 90px;
    
}

.navbar ul li {
    padding-left: 10px;
}

.navbar ul li a {
    color: white;
    text-transform: uppercase;
    display: block;
    font-size: 18px;
    font-weight: 600;
    transition: 0.4s;
}

.navbar ul li a:hover {
    color: #d31113;
}

.icons a {
    text-decoration: none;
}

ion-icon {
    color: white;
    font-size: 36px;
    padding-right: 20px;
    padding-top: 2px;
    transition: 0.4s;
}

.youtube:hover {
    color: #FF0000;
}

.facebook:hover {
    color: #4267B2;
}

.tiktok:hover {
    color: rgb(31, 31, 31);
}

.instagram:hover {
    color: #8a3ab9 
}

/* TAGOK */

.tagok {
    padding-bottom: 30px;
}

.tagok-holder {
    background: url(./img/background.jpg);
}

.tagok-header {
    /* background: rgba(56, 56, 56, 0.4); */
    height: 120px;
    text-align: center;
    
}

.tagok-header h1 {
    font-size: 60px;
    padding-top: 30px;
    font-weight: 700;
    color: #ded9d9;
}

.tagok h2 {
    color: #e0272a;
    font-weight: 600;
}
.tagok p{
    text-align: justify;
    color: whitesmoke;
    font-size: 16px;
}

.tagok .row, .kapcsolat .row {
    background: rgba(81, 78, 78);
    padding: 0px 10px;
    padding-top: 20px;
    border-radius: 10px;
}

.tagok img {
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.65);
    transition: 0.2s;
    cursor: pointer;
    margin-bottom: 15px;
}

.tagok img:hover {
    transform: scale(1.02);
    filter: grayscale(100%);
}

/* GALÉRIA */
/* Wrapper */
.wrapper {
    max-width: 1320px;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
}

.gallery {
    background: url(./img/background_fenykep.jpg);
}


/* Gallery */
.image-gallery {
    max-width: 100%;
    margin: auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1.5rem;
    grid-template-areas: 
    'img_1 img_1 img_2 img_2'
    'img_1 img_1 img_4 img_3'
    'img_7 img_6 img_6 img_3'
    'img_7 img_6 img_6 img_5'
    'img_8 img_8 img_8 img_8';
}

.image-gallery a {
    width: 100%;
    height: 12.5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: grid;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.image-gallery a ion-icon {
    color: rgba(255, 255, 255, .6);
    font-size: 1.5rem;
    position: relative;
    padding: 1rem 2rem;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: .4rem;
    opacity: 0;
    transition: opacity .5s;
}

.image-gallery a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .8);
    opacity: 0;
    transition: opacity .5s;
}

.image-gallery a:hover ion-icon,
.image-gallery a:hover::before {
    opacity: 1;
}

.fenykepek-header {
    /* background: rgba(56, 56, 56, 0.4); */
    height: 120px;
    text-align: center;
    
}

.fenykepek-header h1 {
    padding-top: 18px;
    font-size: 60px;
    font-weight: 700;
    color: #ded9d9;
}

/* KLIPPEK */
.klippek {
    background: url(./img/background.jpg);
}

.klippek .container .row .card iframe {
    width: 100%;
    
}

.klippek .container .row .card .card-body {
    background: url(./img/background_fenykep.jpg);
    
}

.klippek .container .row .card .card-body h4 {
    color: whitesmoke;
    font-weight: 600;
}
.klippek .container .row .card {
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);  
  cursor: pointer;
  transition: 0.4s;
}

.klippek .container .row .card:hover {
    transform: scale(1.05);
    box-shadow: none;
}

/* SPOTIFY */

.spotify {
    background: url(./img/background_fenykep.jpg);
}

/* KAPCSOLAT */

.kapcsolat {
    background: url(./img/background.jpg);
    padding-bottom: 100px;
}
.kapcsolat .row{
    padding-top: 30px;
    padding-bottom: 30px;
}
.contact-column {
    margin-top: 35px;
}

.contact {
    display: flex;
    margin-bottom: 30px;
    margin-left: 80px;
}

.contact ion-icon {
    font-size: 50px;
    color: whitesmoke;
}

.contact h3 {
    color: whitesmoke;
    padding-top: 10px;
    padding-left: 30px;
}





/* Large size */
.img_1 {
    grid-area: img_1;
    min-height: 26.5rem;
    background-image: url("./img/gallery/img_1.jpg");
}

.img_2 {
    grid-area: img_2;
    background-image: url("./img/gallery/img_2.jpg");
}

.img_3 {
    grid-area: img_3;
    min-height: 26.5rem;
    background-image: url("./img/gallery/img_3.jpg");
}

.img_4 {
    grid-area: img_4;
    background-image: url("./img/gallery/img_4.jpg");
}

.img_5 {
    grid-area: img_5;
    background-image: url("./img/gallery/img_5.jpg");
}

.img_6 {
    grid-area: img_6;
    min-height: 26.5rem;
    background-image: url("./img/gallery/img_6.jpg");
}

.img_7 {
    grid-area: img_7;
    min-height: 26.5rem;
    background-image: url("./img/gallery/img_7.jpg");
}

.img_8 {
    grid-area: img_8;
    min-height: 26.5rem;
    background-image: url("./img/gallery/img_8.jpg");
}


/* Medium size */
@media screen and (max-width: 768px) {
    .hero {
    background: url(./img/hero_hd.jpg);
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    }


    .image-gallery {
        grid-template-areas: 
        'img_1 img_1 img_2 img_2'
        'img_1 img_1 img_2 img_2'
        'img_4 img_4 img_3 img_3'
        'img_6 img_6 img_3 img_3'
        'img_7 img_7 img_5 img_5'
        'img_7 img_7 img_8 img_8';
    }

    .img_1, .img_2, .img_4, .img_5, .img_6, .img_8 {
        min-height: 15rem;
    }

    .img_3, .img_7 {
        min-height: 31.5rem;
    }

    .contact {
        display: flex;
        margin-bottom: 20px;
        margin-left: 5px;
    }
    
    .contact ion-icon {
        font-size: 40px;
        color: whitesmoke;
    }
    
    .contact h3 {
        color: whitesmoke;
        padding-top: 10px;
        padding-left: 5px;
    }
}


/* Small size */
@media screen and (max-width: 576px) {

    .hero {
        background: url(./img/main_photo_mobil_cut.jpg);
        width: 100%;
        height: 100vh;
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
    }

    .image-gallery {
        grid-template-areas: 
        'img_1 img_1 img_1 img_1'
        'img_2 img_2 img_2 img_2'
        'img_3 img_3 img_3 img_3'
        'img_4 img_4 img_4 img_4'
        'img_5 img_5 img_5 img_5'
        'img_6 img_6 img_6 img_6'
        'img_7 img_7 img_7 img_7'
        'img_8 img_8 img_8 img_8';
    }

    .img_1, .img_2, .img_3, .img_4, .img_5, .img_6, .img_7, .img_8 {
        min-height: 12rem;
    }


    .navbar-collapse {
        background: rgba(0, 0, 0, 0.4);
        
    }

    .icons {
        margin-left: 10px;
        margin-top: 10px;
        padding-bottom: 10px;
    }

    .contact {
        display: flex;
        margin-bottom: 30px;
        
    }
    
    .contact ion-icon {
        font-size: 30px;
        color: whitesmoke;
    }
    
    .contact h3 {
        color: whitesmoke;
        padding-top: 10px;
        font-size: 14px;
        
    }
    .fenykepek-header, .tagok-header{
        height: auto;
        padding-top: 10px;
    }
    .fenykepek-header h1, .tagok-headerh1{
        font-size: 42px;
        padding-bottom: 15px;
        
    }
}