.block-flippable-cards {
	padding: 50px 0 30px;

	.row {
		display: flex;
		justify-content: space-between;
		margin-left: -20px;
		margin-right: -20px;
		

		.card.flippable {
			max-width: 300px;
			height: 400px;
			border: none;
			perspective: 1000px;
   			background-color: transparent;
   			margin: 0 26px 0 16px;

			&:last-of-type {

			}

			.flippable-inner {
				position: relative;
                width: 100%;
                height: 100%;
                text-align: center;
                transition: transform 0.8s;
                transform-style: preserve-3d;
                display: block;
			}
			&:hover .flippable-inner {
				transform: rotateY(180deg);
			}
			.card-front, .card-back {
				position: absolute;
			    width: 100%;
			    height: 100%;
			    backface-visibility: hidden;
			}
			.card-front {
				min-height: 100%;
				min-width: 100%;

				img {
					object-fit: cover;
					height: 100%;
					width: 100%;
				}
			}
			.card-back {
				padding: 30px 25px;
				text-align: left;
				background: #fff;
				position: relative;
				transform: rotateY(180deg);
				transition: transform .08s;
				transform-style: preserve-3d;

				a:not(.cta-link) {
					text-decoration: none !important;
				}

				.detail {
					margin: 10px 0;
    				line-height: 1.2;
    				color: #000;

    				strong {
    					font-weight: 500;
    				}
				}

				.quote {
					display: flex;
    				align-items: flex-start;
    				margin-top: 20px;

					p {
						margin: 0 0 0 10px;
					}
					&:before {
						font-size: 60px;
	    				margin: 20px 0 0 0;
	    			}
				}
				.excerpt {
					margin-top: 20px;

					p {
						font-size: 17px;
						margin: 0;
					}
				}
				a.cta-link {
					position: absolute;
					bottom: 30px;
				}
				&.image-shadow-blue {
					border: 2px solid #002b49;

					h3 {
						color: #002b49;
					}
				}
				&.image-shadow-red {
					border: 2px solid #651D32;

					h3 {
						color: #651D32;
					}
				}
			}

		}
		&.staggered {
			& > .col:nth-of-type(2n) {

				@media (min-width: 1200px) {
					margin-top: 80px;
				}
			}	
		}
		&.timeline {
			.card.flippable {
				margin-bottom: 40px;

				.card-front h2 {
			   	 	position: absolute;
				    text-align: center;
				    width: 100%;
				    color: #fff;
				    background: #002b49;
				    padding: 10px 0;
				    bottom: -5px;
				}
				.card-back {
					padding: 20px;

					h2 {
						font-size: 50px;
						line-height: 1;
    					padding: 0 0 5px;	
					}
					h3 {
						font-size: 18px;
/*						margin-bottom: 5px;*/
					}
					p {
						font-size: 14px;
						margin-top: 10px;
					}
				}
			}
		}
		&.alumni .card.flippable .card-back {	
			p {
				font-size: 15px;
			}
			.quote {
				p {
					font-size: 17px;
				}
				&:before {
					font-size: 55px;
					color: #651d32;
				}
			}
		}
	}
	@media (max-width: 1199px) {
		.row {
	        max-width: 700px;
	        margin: 0 auto;

	        .card.flippable {
	        	margin-bottom: 40px;
	        	max-width: 350px;
	        }
		}
	}
	@media (max-width: 767px) {
		.row {
			.col {
				margin: 0;
			    display: flex;
			    justify-content: center;

			    .card {
			    	padding-right: 12px;
			    	width: 350px;
			    	max-width: 100%;
			    }
			}
		}
	}
}