.activitypart {
    padding-top: 1%;
}

.photo img {
    width: 90%;
    transition: all 600ms ease;
    background-color: #ddd;
    /* padding: 5%; */
}

.photo.border img {
     padding: 5%; 
}

.photo {
    height: 360px;
    text-align: center;
    transition: all 600ms ease;
    overflow-y: hidden;
}

.photo img:hover {
    cursor: pointer;
    box-shadow: 0 0 0 4px #CB4938;
    filter: blur(20px);
}

#no-blur img:hover {
    filter: blur(0px);
    box-shadow: none;
}

#image-container {
    top: 50%;
    margin-top: 150px;
    transition: all 600ms ease;
    height: 200px;
}

#image-container.active {
    top: 0;
    margin-top: 0px;
    /* height: 120px */
}

#image-container.active .photo {
    height: 150px;
    
}

#image-container.active .photo img {
    /*height: 100%;*/
    width: 100px;
    border-radius: 100%;
}

.photo h2 {
    margin-top: 0;
}

#text-container {
    display: none
}

#text-container {
    position: relative;
    padding: 20px;
    background-color: #ddd
}

.text-content h2 {
    margin-top: 0;
}

#close {
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 2px
}


.summary-comment{
	display:none;
	margin:10px auto;
	}
.summary-comment.open{ display:block;}

/* ----------- Large Display ----------- */

@media screen and (min-width: 1920px) and (min-height: 1080px) {
    /* Styles */
}


/* ----------- Laptop HiDPI screen ----------- */

@media screen and (min-width: 1440px) and (min-height: 900px) {
    /* Styles */
}


/* ----------- Laptop ----------- */

@media screen and (max-width: 1366px) and (max-height: 768px) {
    /* Styles */
    #image-container {
        margin-top: 30px;
        height: 150px;

    }
}


/* ----------- Laptop MDPI screen ----------- */

@media screen and (min-width: 1280px) and (min-height: 800px) {
    /* Styles */
    #image-container {
        height: 150px;
    }
}


/* ----------- iPad ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
}


/* ----------- iPhone 5 ----------- */

@media only screen and (min-device-width: 568px) and (min-device-height: 320px) {
    /* Styles */
}