/*PAGE KMU*/
body.ie .flipper .front, body.ie .flipper .back {backface-visibility: visible !important}

#kmuFlips .flip-container {width: 32.33333%;margin-left: 0;margin-right: 1%;margin-bottom: 1%;}
#kmuFlips .flipper .back {background-color: #f1f1f1}

/*PAGE CORONA*/
#coronaFlip .flip-container {width: 32.33333% !important; margin-right: 1% !important; margin-left: 0 !important; margin-bottom: 1% !important}

#coronaFlip .flip-container, #coronaFlip .front, #coronaFlip .back {height: 350px !important}
#coronaFlip .flip-container .back {overflow-y: scroll;overflow-x: hidden; box-shadow: inset 2px 2px 16px rgba(0,0,0,0.1);border: 1px solid #e4e4e4}
#coronaFlip .flip-container .back::-webkit-scrollbar {width: 0.8em;}
#coronaFlip .flip-container .back::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)}
#coronaFlip .flip-container .back::-webkit-scrollbar-thumb {background-color: #920f30;outline: 1px solid slategrey}

#coronaFlip .flipper .front .titleWrap {position: absolute;bottom: 25px;left: 25px;right: 25px;}
#coronaFlip .flipper .front h2 {color: #fff;font-size: 28px;padding: 0;background-color: rgba(255,255,255,0);position: initial;-webkit-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
#coronaFlip .flipper .front h2 span {display: block;color: #fff;font-size: 16px;margin-bottom: 5px; font-weight: normal}

/*PAGE CORONA FLIP2*/
#coronaFlip2 .flip-container {width: 32.33333% !important; margin-right: 1% !important; margin-left: 0 !important; margin-bottom: 1% !important}

#coronaFlip2 .flip-container, #coronaFlip2 .front, #coronaFlip2 .back {height: 350px !important}
#coronaFlip2 .flip-container .back {overflow-y: scroll;overflow-x: hidden; box-shadow: inset 2px 2px 16px rgba(0,0,0,0.1);border: 1px solid #e4e4e4}
#coronaFlip2 .flip-container .back::-webkit-scrollbar {width: 0.8em;}
#coronaFlip2 .flip-container .back::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)}
#coronaFlip2 .flip-container .back::-webkit-scrollbar-thumb {background-color: #920f30;outline: 1px solid slategrey}

#coronaFlip2 .flipper .front .titleWrap {position: absolute;bottom: 25px;left: 25px;right: 25px;}
#coronaFlip2 .flipper .front h2 {color: #fff;font-size: 28px;padding: 0;background-color: rgba(255,255,255,0);position: initial;-webkit-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
#coronaFlip2 .flipper .front h2 span {display: block;color: #fff;font-size: 16px;margin-bottom: 5px; font-weight: normal}


/*GENERALS*/
.flip-container {perspective: 1000px;width: 49%;float: left;margin-bottom: 2%;}
.flip-container.left {margin-right: 1%}    
.flip-container.right {margin-left: 1%}    

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}
.flip-container, .front, .back {height: 300px}

/* flip speed goes here */
.flipper {transition: 0.6s;transform-style: preserve-3d;position: relative}
.flip-container .flip-trigger {position: absolute;opacity: 0;left: calc(50% - 25%);width: 50%;clip: initial;z-index: 1;background-color: #fff;height: auto; padding: 2px}
.flip-container .flip-trigger:focus-visible {opacity: 1}

/* hide back of pane during swap */
.flipper .front, .flipper .back {backface-visibility: hidden;width: 100%;position: absolute;top: 0;left: 0;padding: 25px}
.flipper .back .button {font-weight: bold;margin-top: 10px;cursor: pointer}
.flipper .front h2 {position: absolute;color: #920e30; font-size: 18px; bottom: 10px;width: 100%;left: 0;padding: 15px;background-color: rgba(255,255,255,0.8);} 

/* front pane, placed above back */
.flipper .front {background-color: #f00; color: #fff;z-index: 2;
/* for firefox 31 */transform: rotateY(0deg)}

/* back, initially hidden pane */
.flipper .back {transform: rotateY(180deg);background-color: #fff}
.flipper .back p {margin: 0; color: #333}
.flipper .back button {font-weight: bold}
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {transform: rotateY(180deg)}
.flip-container:hover .front {opacity: 0}
.flipper.flip {
    transform: rotateY(180deg);
}



#flipLightBoxBack {position: fixed; width: 100%; background-color: rgba(0,0,0,0.85); top: 0; left: 0; height: 100%; z-index: 999}
#flipLightBoxFrame {position: fixed; width: 80%; background-color: #fff; top: 10%; left: 10%; z-index: 999; padding: 25px}
#flipLightBoxFrame iframe {outline:0; border: none}

#flipLightBoxBack.noactive, #flipLightBoxFrame.noactive {display: none}
#flipLightBoxBack.active, #flipLightBoxFrame.active {display: block}

.flipvideoIcon {width: 50px; height: 50px; border-radius: 50%; display: inline-block; background-color: #920f30; color: #fff; padding: 18px 0;font-weight: bold; font-size: 12px;text-align: center; box-shadow: 1px 1px 2px rgba(0,0,0,0.6); position: absolute;top: 10px;left: 10px;}


@media all and (max-width: 768px) 
{
	.flip-container {width: 100% !important; float: none}
	.flip-container, .front, flip-container .back {height: 320px !important}
	.flip-container .back {font-size: 14px;line-height: 20px}
	
	.flip-container .front, .flip-container:hover .back {display: block}
	.flip-container:hover .front, .flip-container .back {display: none}
	
	#flipLightBoxFrame {width: 95%; left: 2.5%}
	#flipLightBoxFrame iframe {height: auto}
}