.cardWrapper .cardContainer {
    /*perspective: 600px;*/
}

.cardWrapper .flippingCard {
    float: left;
    width: 50%;
    height: 335px;
    padding: 0 10px;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
}

.cardContainer:nth-of-type(3) .flippingCard,
.cardContainer:nth-of-type(4) .flippingCard {
	margin-top: 20px;
}

.cardWrapper {
	margin: 10px -10px;
	overflow: hidden;
}

.cardWrapper .card {
	position: relative;
	height: 100%;
	padding: 16px;
	text-align: center;
	background-color: #efefef;	
    border: 1px solid #ebebeb;
	background-size: 100px;
    background-position: center 40%;
    background-repeat: no-repeat;
}

.cardWrapper .card:hover,
.cardWrapper .card:active,
.cardWrapper .card:focus {background-color: #e0e0e0;}

/*.cardWrapper .card:after {
    content: "";
    height: 100%;
    width: 100%;
    display: block;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.005) 100%);
    position: absolute;
    top: 0;
    left: 0;
	opacity: 1;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.cardWrapper .card:hover:after {
    content: "";
    background: unset;
	opacity: 0;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}*/

/*.cardWrapper .card:hover:after {
    content: "";
    height: 100%;
    width: 100%;
    display: block;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.005) 100%);
    position: absolute;
    top: 0;
    left: 0;
}*/

.cardContainer:nth-of-type(1) .card {
    background-image: url(/content/dam/content-fragments/html-custom-code/wealth-management/cio-year-ahead-2021/img/the-recovery.svg);
}

.cardContainer:nth-of-type(2) .card {
    background-image: url(/content/dam/content-fragments/html-custom-code/wealth-management/cio-year-ahead-2021/img/interest-rates.svg);
}

.cardContainer:nth-of-type(3) .card {
    background-image: url(/content/dam/content-fragments/html-custom-code/wealth-management/cio-year-ahead-2021/img/the-US.svg);
}

.cardContainer:nth-of-type(4) .card {
    background-image: url(/content/dam/content-fragments/html-custom-code/wealth-management/cio-year-ahead-2021/img/long-term-investing.svg);
}

.flippingCard.is-flipped {
    transform: rotateY(180deg);
}

.flippingCard.is-flipped .cardFace {
    backface-visibility: visible;                        
}

.cardFace {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    line-height: 234px;
    backface-visibility: hidden;
}

.cardFaceFront {
	transform: rotateY(0deg);
}

.cardFaceFront h3 {
	font: 300 1.25em/1.25 Frutiger,Arial,Helvetica,sans-serif;
	color: #1c1c1c;
	margin: 0;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.cardFaceBack {
    background: white;
    transform: rotateY(-180deg);
    /* border: 1px solid #CCC; */
    width: calc(100% - 4px);
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    right: 9px;
}

.cardText {
    padding: 20px;
	font: 300 .875em/1.42857 Frutiger,Arial,Helvetica,sans-serif;
    line-height: 1.2em;
    display: block;
    height: 100%;
    width: 94%;
    border: 1px solid #ebebeb;
    /*background: red;*/
}

.cardText h4:first-of-type {
    margin-top: 0
}

.cardText h4 {
    font-weight: bold;
    margin: 10px 0;
}

.cardText ul {
    list-style-type: disc;
    margin-left: 20px;
}

.cardText ul li {
    margin-bottom: 10px;
}

.flippingCardsWrapper:after {
  content: "";
  display: table;
  clear: both;
}

.cardFaceFront::before,
.cardFaceBack::before {
    content: "";
    position: absolute;
    display: block;
    bottom: 20px;
    right: 20px;
    width: 30px;
    height: 22px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.cardFaceFront::before {
	background-image: url(/content/dam/content-fragments/html-custom-code/wealth-management/cio-year-ahead-2021/img/flip.svg);
}

.cardFaceBack::before {
	right: 40px;
	background-image: url(/content/dam/content-fragments/html-custom-code/wealth-management/cio-year-ahead-2021/img/flip-back.svg);
}

@media screen and (max-width: 600px) {
	.cardWrapper .flippingCard {
		width: 100%;
		display: block;
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 767px) {		
	.cardWrapper {display: none;}
}

/* S-Viewport */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	/*.cardContainer:nth-of-type(1) .card {background-position: -9vw -7vh;}
	.cardContainer:nth-of-type(2) .card {background-position: -19vw -11vh;}
	.cardContainer:nth-of-type(3) .card {background-position: -13vw -19vh;}
	.cardContainer:nth-of-type(4) .card {background-position: -6vw -10vh;}*/
}

/* M-Viewport */

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	.cardWrapper .flippingCard {height: 375px;}	
	/*.cardContainer:nth-of-type(1) .card {background-position: -5vw 0; background-size: cover;}
	.cardContainer:nth-of-type(2) .card {background-position: -22vw 0; background-size: cover;}
	.cardContainer:nth-of-type(3) .card {background-position: -7vw -15vh; background-size: 140%;}
	.cardContainer:nth-of-type(4) .card {background-position: -3vw -3vh; background-size: 250%;}*/
}