/* Some general stuff */ 
* {
    margin: 0;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-family: 'Roboto', sans-serif;
}

body {
    overflow-x: hidden;
}

/* The main page content */ 
#page_content {
    position: relative;
    transition: .3s ease-in-out;
}


/* SECTION3 - Gallery */
#gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding: 100px 0;
}

#gallery .image_box {
    position: relative;
    box-sizing: border-box;
    width: calc(25% - 30px);
    max-width: 550px;
    margin: 30px 15px;
    border: 10px solid #d9f7fa;

    transition: .3s all;
}

#gallery .image_box h1 {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    transform: translateY(-80%);

    font-family: 'Raleway', sans-serif;
    font-size: 80px;
    font-weight: 900;
    color: #007fff;
    opacity: .5;
}

#gallery .image_box:hover {
    cursor: pointer;
    border-color: #007fff;
}

@media (max-width: 1200px) {
    #gallery .image_box {
        width: calc(33% - 30px);
    }
}

@media (max-width: 900px) {
    #gallery .image_box {
        width: calc(50% - 30px);
    }
}

@media (max-width: 600px) {
    #gallery .image_box {
        width: calc(100% - 30px);
    }
}


/* SECTION3 - Expanded Image */
#expanded_image {
    display: none;
    position: fixed;
    z-index: 6;
    top: 0;
    left: 0;

    content: '';
    width: 100%;
    height: 100%;
}

#expanded_image #expanded_image_background {
    position: absolute;
    top: 0;
    left: 0;

    content: '';
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: .8;
}

#expanded_image #expanded_image_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    max-height: calc(100% - 50px);
    padding: 20px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#expanded_image #expanded_image_container #photo_expanded_image_container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: auto;
    transition: .25s all;

    background: url('../images/gallery1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: photo_expanded_image_container .7s ease-in-out; 
}
@keyframes photo_expanded_image_container {
    from {max-height: 0;}
    to {max-height: 1000px;}
}

#expanded_image .expanded_image_button {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    
    width: 40px;
    height: 40px;
    text-align: center;

    border-radius: 50%;
    border: 2px solid #d9f7fa;
    background-color: #000000;
    opacity: .5;
    transition: .3s all;
}

#expanded_image .expanded_image_button img {
    height: 20px;
    width: auto;
    margin: 10px 0;
}

#expanded_image .expanded_image_button:hover {
    cursor: pointer;
    opacity: 1;
}

#expanded_image #expanded_image_next_button {right: 10px;}
#expanded_image #expanded_image_next_button img {transform: rotate(180deg);}
#expanded_image #expanded_image_prev_button {left: 10px;}

#expanded_image #close_button {
    position: fixed;
    top: 15px;
    right: 15px;
    display: flex;
    justify-content: center;
    
    width: 40px;
    height: 40px;

    background-color: #000000;
    opacity: .5;
    transition: .3s all;
    border-radius: 50%;
}
#expanded_image #close_button:hover {
    cursor: pointer;
    opacity: 1;
}

#expanded_image #close_button img {
    width: 40px;
    height: 40px;
}