﻿.flexPanels{
	display:flex;
	flex-wrap:wrap;
	width:calc(100% + 60px);
	margin-left:-30px;
}

.flexPanel{
	width:450px;
	margin:20px;
	display:flex;
	flex-direction:column;
	flex-grow: 1;
}

.flexPanelTitle{
	margin:10px;
}

.flexBlock{
	display:flex;	
	flex-wrap:wrap;
	flex-grow: 1;
	position:relative;
	perspective:1000;
}

.flexCardGroup{
	display:flex;	
	flex-wrap:wrap;
	flex-grow: 1;	
}

.flexCard{
	width:200px;
	background-color:#1B536D;
	border: 1px solid #1B536D;
	margin:10px;
	flex-grow: 1;
	display:block;
	min-height:120px;
}

.flexCard:nth-child(6n-4), .flipCardWrap:nth-child(6n-4) .flipCard{
	background-color:#800000;	
	border: 1px solid #800000;
}


.flipCardWrap:nth-child(6n-4) .flipCardMarqueeEdges{
	box-shadow:40px -20px 10px -30px #800000 inset, -40px -20px 10px -30px #800000 inset;		
}

.flexCard:nth-child(6n-3), .flipCardWrap:nth-child(6n-3) .flipCard{
	background-color:#325300;	
	border: 1px solid #325300;
}

.flipCardWrap:nth-child(6n-3) .flipCardMarqueeEdges{
	box-shadow:40px -20px 10px -30px #325300 inset, -40px -20px 10px -30px #325300 inset;		
}

.flexCard:nth-child(6n-2), .flipCardWrap:nth-child(6n-2) .flipCard{
	background-color:#319ACE;	
	border: 1px solid #319ACE;
}

.flipCardWrap:nth-child(6n-2) .flipCardMarqueeEdges{
	box-shadow:40px -20px 10px -30px #319ACE inset, -40px -20px 10px -30px #319ACE inset;		
}

.flexCard:nth-child(6n-1), .flipCardWrap:nth-child(6n-1) .flipCard{
	background-color:#CA5100;	
	border: 1px solid #CA5100;
}

.flipCardWrap:nth-child(6n-1) .flipCardMarqueeEdges{
	box-shadow:40px -20px 10px -30px #CA5100 inset, -40px -20px 10px -30px #CA5100 inset;		
}

.flexCard:nth-child(6n), .flipCardWrap:nth-child(6n) .flipCard{
	background-color:#3A0075;	
	border: 1px solid #3A0075;
}

.flipCardWrap:nth-child(6n) .flipCardMarqueeEdges{
	box-shadow:40px -20px 10px -30px #3A0075 inset, -40px -20px 10px -30px #3A0075 inset;		
}

a.flexCard,a .flipCard{
	text-decoration:none;
	transition:0.5s ease;
	box-shadow:2px 2px 4px rgba(0,0,0,0.4);
}

a.flexCard:hover{
	transform:scale(1.05);
	cursor:pointer;
}

a.flipCardWrap{
	text-decoration:none;
}

.flexCard.icon{
	background-position:20px;
	background-size:80px;
	background-repeat:no-repeat;
	padding:15px 30px 30px 120px;
	box-sizing:border-box;
	color:white;
	min-width:300px;
	border:none;
}

.flexCard h3, .flipCard h3{
    font-size:20px;
    margin-top:0;	
}

.flexCard.icon h3{
	color:white;
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flexCard.icon.square{
	width:120px;
	min-width:120px;
	padding:15px;
	flex-shrink:0;
	display:flex;
	align-items:flex-end;
	background-position: center calc(50% - 10px);
    background-size: 60px;
}

.flexCard p:last-child{
	margin-bottom:0 !IMPORTANT;
}

.flexCard .hoverMarqueeContainer{
	overflow:hidden;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

.flexCard .hoverMarquee {
    position:relative;
    width:100%;
}

.flexCard .hoverMarqueeContent{
    white-space: nowrap;
    display:inline-block;
    text-overflow: ellipsis;
    overflow:hidden;
    width:100%;
}

@keyframes outer {
	0% {transform: translateX(100%);}
	100% {transform: translateX(0%);}
}

@keyframes inner {
	0% {transform: translateX(0%);}
	100% {transform: translateX(-100%);}
}

.flexCard:hover .hoverMarqueeContent{
	width:auto;
}

.flipCardWrap{
	width:200px;
	margin:10px;
	flex-grow: 1;
	display:block;
	min-height:120px;
}

.flipCardWrap:hover .flipCard{
	transform:scale(1.05);	
}

a.flipCardWrap:hover .flipCard{
	box-shadow:2px 2px 4px rgba(0,0,0,0.4);
}

.flipCardWrap .flipCard.static{
	transform:rotateY(0deg);	
	transform:rotateX(0deg);	
}

a.flipCardWrap .flipCard.static{
	box-shadow:2px 2px 4px rgba(0,0,0,0.4);
}

.flipCardWrap:hover .flipCard.static{
	transform:scale(1.05);
}

.flipCard{
	transform-style: preserve-3d;
	background-color:#1B536D;
	border: 1px solid #1B536D;
	height:100%;
}

.flipCard.flipY{
	transform:rotateY(180deg);
}

.flipCard.flipX{
	transform:rotateX(180deg);
}

a .flipCard.flipY{
	box-shadow:-2px 2px 4px rgba(0,0,0,0.4);	
}

a .flipCard.flipX{
	box-shadow:2px -2px 4px rgba(0,0,0,0.4);	
}

.flipCard .flipCardFace{
	width:100%;
	height:100%;
	backface-visibility:hidden;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

.flipCardFront{
	z-index:2;
	padding:10px 10px 12px 10px;
	color:white;
	box-sizing:border-box;
}

.flipCardFront h3{
	color:white;
	margin-right:10px;
}

.flipCardReverse{
	position:absolute;
	top:0;
	left:0;
	background-position:center 30%;
	background-repeat:no-repeat;
	background-size:cover;
	box-sizing:border-box;
	background-color:inherit;
}

.flipY .flipCardReverse{
	transform:rotateY(180deg);	
}

.flipX .flipCardReverse{
	transform:rotateX(180deg);	
}

.flipCardMarqueeBG{
	background-color:inherit;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:40px;
	opacity:0.85;
}

.flipCardMarqueeEdges{
	width:100%;
	height:40px;
	position:absolute;
	bottom:0;
	left:0;
	box-shadow:40px -20px 10px -30px #1B536D inset, -40px -20px 10px -30px #1B536D inset;	
	opacity:0.85;
}

.flipCardShortTitle{
	width:100%;
	color:white;
	overflow:hidden;
	padding:10px 0;
	box-sizing:border-box;
	position:absolute;
	bottom:0;
	left:0;
}

.marqueeOuter{
    position:relative;
    width:100%;
    background:inherit;
}

.marqueeInner{
    white-space: nowrap;
    display:inline-block;
    overflow:hidden;
    width:auto;
    text-shadow:1px 1px 2px rgba(0,0,0,0.8);
    padding:0 10px;
}

.adCard{
	background:white;
	flex-grow:0;
	box-sizing:border-box;
	margin:10px;
	border:#b4b4b4 solid 1px;
}

@media screen and (min-width:800px) and (max-width: 950px){

	.flexPanelAdSense{
		display:none;
	}

}

@media screen and (min-width:400px) and (max-width: 525px){

	.flexPanelAdSense{
		display:none;
	}

}

.googleAdCard{
	text-align:center;
}

.customAd{
	padding:10px 10px 40px 10px;
	position:relative;
	background-image:url('images/adTag.png');
	background-repeat:no-repeat;
	background-position:left 12px bottom 12px;
	font-family:Verdana,arial,sans-serif;
}

a.customAd{
	text-decoration:none;
	color:black;
}

a.customAd:hover{
	text-decoration:underline;
}

.customAd:after{
	content:"Visit Site";
	display:block;
	border:1px #999999 solid;
	border-radius:2px;
	color:#757575;
	font-size:12px;
	line-height:28px;
	font-weight:400;
	text-align:center;
	min-width:78px;
	box-sizing:border-box;
	position:absolute;
	bottom:12px;
	right:12px;
}


.linksCard{
	padding:10px 10px 40px 10px;
	position:relative;
	background-image:url('images/adTag.png');
	background-repeat:no-repeat;
	background-position:left 12px bottom 12px;	
	font-family:Verdana,arial,sans-serif;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

.linksCard a{
	display:block;
	background-color:gainsboro;
	padding:0 10px;
	border-left:15px #319ACE solid;
	flex-grow:1;
	margin:5px;
	text-decoration:none;
	color:black;
	font-size:14px;
	line-height:28px;
}

.linksCard a:hover{
	text-decoration:underline;
}