.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 75%;
    margin-right:auto;
	margin-left:auto;
	justify-content: center;
}

.flex-item {
    width:33%;
}

.responsive {
    width: 90%;
    box-shadow: 0 0.5vw 1vw -0.2vw gray; 
}

.responsive:hover {
    transform: scale(1.1);
}

/* Small devices (portrait tablets and large phones, 414px and up) */
@media only screen and (max-width: 640px) { 
	
.flex-container {
    flex-direction: column;
	justify-content: center;
    margin-bottom: 40px;
}

.flex-item {
 	width:100%;
    margin-bottom: 40px; 
}
	
.responsive {
    width: 100%;
    box-shadow: 0 0.5vw 1vw -0.2vw gray; 
}

.responsive:hover {
    transform: scale(0.95);
}
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 641px) {
.flex-container {
   	flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
	margin-right:10%;
	margin-left:10%;
    margin-bottom: 180px;
}
    
.flex-item {
    width:33.3%; 
    margin-bottom: 15px;  
	align-items: center;
}
	
.responsive {
    width: 45%;
    box-shadow: 0 0.5vw 1vw -0.2vw gray; 
}
    
.responsive:hover {
    transform: scale(0.95);
}
}

@media only screen and (max-width: 640px) { 
	
.flex-container {
    flex-direction: column;
	justify-content: center;
    margin-bottom: 40px;
}

.flex-item {
	width:100%;
	margin-bottom: 40px; 
}
	
.responsive {
    width: 100%;
    box-shadow: 0 0.5vw 1vw -0.2vw gray; 
}

.responsive:hover {
    transform: scale(0.95);
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 641px) {
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin-right:10%;
	margin-left:10%;
	margin-bottom: 180px;
}
    
.flex-item {
    width:33.3%; 
	margin-bottom: 15px;  
}

.responsive {
    width:40%;
    box-shadow: 0 0.5vw 1vw -0.2vw gray; 
}
    
.responsive:hover {
   transform: scale(0.95);
}
}