h1 {
    text-align: center;
    color: #333333
}

.cardcontainer {
    width: 280px;
    height: 270px;
	border: 1px solid #767676;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    transition: 0.3s
}

.cardcontainer:hover {
    box-shadow: 0 0 45px gray
}

.photo {
    height: 250px;
    width: 100%
}

.photo img {
    height: 100%;
    width: 100%
}

.txt1 {
    margin: auto;
    text-align: center;
    font-size: 17px
}


/*
.content {
    width: 80%;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    top: -33px
}
*/

.photos {
    width: auto;
    height:auto;
    background-color: #001e36;
    color: white;
    position: relative;
    
    font-size: 15px;
	text-align:center;
}



.cardcontainer:hover>.photo {
    height: 240px;
    animation: move1 0.5s ease both
}

@keyframes move1 {
    0% {
        height: 250px
    }

    100% {
        height: 240px
    }
}

.cardcontainer:hover>.content {
    height: 200px
}


.btn {
    position: relative;
    top: 20px
}

.txt3 {
    color: gray;
    position: relative;
    top: 18px;
    font-size: 14px
}

.comments {
    float: right;
    cursor: pointer
}