/**large numbers/text**/

.big-num{font-size:250%;font-weight:600;line-height: 1;}

.big-num h1,
.big-num h2,
.big-num h3,
.big-num h4,
.big-num h5,
.big-num h6,
.big-num .counter-value{
	font-size: 200%;
	line-height: 1.3;
	font-weight:bold;
	display: inline-block;
	position: inherit;
background: rgb(0,61,79);
background: -moz-linear-gradient(90deg, rgba(0,61,79,1) 16%, rgba(149,74,135,1) 80%);
background: -webkit-linear-gradient(90deg, rgba(0,61,79,1) 16%, rgba(149,74,135,1) 80%);
background: linear-gradient(90deg, rgba(0,61,79,1) 16%, rgba(149,74,135,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#003d4f",endColorstr="#954a87",GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dc4f00",endColorstr="#a33b00",GradientType=1);
	background-size: 100%;
	background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
	display:inline-block;
	font-family: Raleway, Verdana, sans-serif;
}

.big-num.center{
	text-align:center;
}

.big-num.center h1,
.big-num.center h2,
.big-num.center h3,
.big-num.center h4,
.big-num.center h5,
.big-num.center h6{
	display: table;
	text-align: center;
	margin: 0px auto;
}

.big-num.white{
	color:#fff;
}

.big-num.white h1,
.big-num.white h2,
.big-num.white h3,
.big-num.white h4,
.big-num.white h5,
.big-num.white h6,
.big-num.white .counter-value{

background: rgb(26,169,212);
background: -moz-linear-gradient(90deg, rgba(26,169,212,1) 16%, rgba(207,78,182,1) 80%);
background: -webkit-linear-gradient(90deg, rgba(26,169,212,1) 16%, rgba(207,78,182,1) 80%);
background: linear-gradient(90deg, rgba(26,169,212,1) 16%, rgba(207,78,182,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1aa9d4",endColorstr="#cf4eb6",GradientType=1);

  background-size: 100%;
  background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  display:inline-block;
}



/**zoom images**/


.zoom-hover a:first-child,
.zoom-hover a:first-child:visited{
  display:block;
  overflow:hidden;
  position:relative;
  max-width:100%;
  height:200px;
  margin-bottom:10px;
}

.zoom-hover img{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  display:block;
  width:100%;
  text-align: center;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.zoom-hover a:first-child:hover img,
.zoom-hover a:first-child:visited img{
  max-width:115%;
  width:110%;
  left:-5%;
}

.zoom-hover.h-200 a:first-child,
.zoom-hover.h-200 a:first-child:visited{
  height:200px;
}

.zoom-hover.h-300 a:first-child,
.zoom-hover.h-300 a:first-child:visited{
  height: 300px;
}

.zoom-hover.h-400 a:first-child,
.zoom-hover.h-400 a:first-child:visited{
  height:400px;
}

.zoom-hover.h-500 a:first-child,
.zoom-hover.h-500 a:first-child:visited{
  height:500px;
}

.zoom-hover.h-600 a:first-child,
.zoom-hover.h-600 a:first-child:visited{
  height:600px;
}

.zoom-hover.b-round a:first-child,
.zoom-hover.b-round a:first-child:visited{
  border-radius:5px;
}

.zoom-hover.overlay{
  position:relative;
}

.zoom-hover.overlay a:after{
  display:block;
  content:'';
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background-color:rgba(0,0,0,0.4);
}

.zoom-hover.overlay .text{
  position:absolute;
  z-index:100;
  text-align:center;
  display:block;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  font-size:1.6em;
}



/**Tagged list formats**/

.BlockTLItem.fourAcross{
  display:inline-block;
  width:22%;
  margin:0px 1%;
  vertical-align:top;
  border:0;
}

.BlockTLItem.threeAcross{
  display:inline-block;
  width:31%;
  margin:0px 1%;
  vertical-align:top;
  border:0;
}

.contentTaggedListImageThumbnailR{
  display:none;
}

.BlockTLItem .newsImage{
  display:block;
  height:200px;
  width:100%;
  background-size:cover;
  background-position:center;
  color:transparent;
  margin-bottom:20px;
}


@media(min-width:768px) and (max-width:1170px){
   .BlockTLItem.fourAcross,
   .BlockTLItem.threeAcross{
    display:inline-block;
    width:47%;
    margin:0px 1%;
    vertical-align:top;
    border:0;
  }

}

@media(max-width:767px){
  .BlockTLItem.fourAcross,
  .BlockTLItem.threeAcross{
    display:block;
    width:100%;
    max-width:350px;
    margin:0px auto;
    vertical-align:top;
    border:0;
  }
}


/**Flip card CTAs**/


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  max-width:300px;
  height: 300px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin:0px auto;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #000000;
  color: white;
  transform: rotateY(180deg);
}

a.flip-card-back{
  transform:translateX(-50%) rotateY(180deg);
  color:#ffffff;
}

a.flip-card-front{
  transform:translateX(-50%);
}

.round .flip-card-front,
.round .flip-card-back{
  border-radius:10px;
  overflow:hidden;
}

.circle .flip-card-front,
.circle .flip-card-back{
  border-radius:300px;
  overflow:hidden;
}

.flip-card-back .content{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:20px;
  right:20px;
}

.circle .flip-card-back .content{
  margin-top:20px;
}

.flip-card h1,
.flip-card h2,
.flip-card h3,
.flip-card h4,
.flip-card h5,
.flip-card h6{
  line-height:1.2;
  color:#fff;
}

.flip-card h1{
	font-size:200%;
}

.flip-card-front img{
  width:100%;
  max-width:300px;
  height:300px!important;
}

.col-sm-3 .flip-card,
.col-sm-3 .flip-card-front img{
  width:100%;
  max-width:250px;
  height:250px!important;
}

.col-sm-3 .flip-card-back h1{
  font-size: 200%;
}

.red .flip-card-back {
  background-color: #DF210C;
}

.pink .flip-card-back,
.pink h1, .pink h2, .pink h3,
.pink h4, .pink h5, .pink h6,
.pink a, .pink a:visited{
  background-color: #ee96ad;
  color:#1c0209;
}

.orange .flip-card-back,
.orange h1, .orange h2, .orange h3,
.orange h4, .orange h5, .orange h6,
.orange a, .orange a:visited{
  background-color: #e4a92b;
  color:#271303;
}

.brown .flip-card-back {
  background-color: #6d461c;
  color:#ffffff;
}


.yellow .flip-card-back,
.yellow h1, .yellow h2, .yellow h3,
.yellow h4, .yellow h5, .yellow h6,
.yellow a, .yellow a:visited{
  background-color: #f4eaa6;
  color:#1a1301;
}

.green .flip-card-back {
  background-color: #28744a;
  color:#fff;
}

.lime .flip-card-back,
.lime h1, .lime h2, .lime h3, 
.lime h4, .lime h5, .lime h6,
.lime a, .lime a:visited{ 
  background-color: #c1e4ac;
  color:#102503;
}

.blue .flip-card-back {
  background-color: #1F63A3;
  color:#fff;
}

.sky .flip-card-back,
.sky h1, .sky h2, .sky h3,
.sky h4, .sky h5, .sky h6,
.sky a, .sky a:visited{
  background-color: #9cd8df;
  color:#020937;
}

.navy .flip-card-back {
  background-color: #020937;
  color:#fff;
}

.purple .flip-card-back {
  background-color: #600e8b;
  color:#fff;
}

.violet .flip-card-back,
.violet h1, .violet h2, .violet h3,
.violet h4, .violet h5, .violet h6,
.violet a, .violet a:visited{
  background-color: #b888d0;
  color:#160220;
}

.grey .flip-card-back,
.grey h1, .grey h2, .grey h3,
.grey h4, .grey h5, .grey h6,
.grey a, .grey a:visited{
  background-color: #d6d6d6;
  color:#000000;
}


.charcoal .flip-card-back {
  background-color: #333333;
  color:#ffffff;
}


@media(min-width:768px) and (max-width:900px){
  .flip-card,
  .flip-card-front img{
    max-width:200px;
    height:200px!important;
  }
  
  .col-sm-3 .flip-card,
  .col-sm-3 .flip-card-front img{
    max-width:150px;
    height: 150px!important;
  }
 
}

@media(min-width:901px) and (max-width:1170px){
  .flip-card,
  .flip-card-front img{
    max-width:250px;
    height:250px!important;
  }
  
  .col-sm-3 .flip-card,
  .col-sm-3 .flip-card-front img{
    max-width:200px;
    height: 200px!important;
  }
 
}


.clearQ .rgHeader{
	display:none!important;
}

.clearQ .RadGrid_MetroTouch{
	border:none;
}

.clearQ .RadGrid_MetroTouch .rgAltRow {
    background: #fff;
}

.clearQ .RadGrid_MetroTouch .rgAltRow td,
.clearQ .RadGrid_MetroTouch .rgRow td {
    border:none;
}


.clearQ .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgSelectedRow, 
.clearQ .RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted, 
.clearQ .RadGrid.RadGrid_MetroTouch th.rgSorted, 
.clearQ .RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell, 
.clearQ .RadGrid.RadGrid_Metro .rgSelectedRow, 
.clearQ .RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow, 
.clearQ .RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted, 
.clearQ .RadGrid.RadGrid_Metro th.rgSorted {
    background-color: transparent;
    border-color:transparent;
}

.clearQ .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell a, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgSelectedRow a, 
.clearQ .RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow a, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted a, 
.clearQ .RadGrid.RadGrid_MetroTouch th.rgSorted a, 
.clearQ .RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell a, 
.clearQ .RadGrid.RadGrid_Metro .rgSelectedRow a, 
.clearQ .RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow a, 
.clearQ .RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted a, 
.clearQ .RadGrid.RadGrid_Metro th.rgSorted a {
    color: transparent!important;
}

.clearQ .RadGrid.RadGrid_MetroTouch .rgMasterTable, 
.clearQ .RadGrid.RadGrid_Metro .rgMasterTable {
    background-color: transparent!important;
}

.clearQ .RadGrid_MetroTouch {
    background-color: transparent!important;
}

.clearQ .RadGrid.RadGrid_MetroTouch .rgRow td, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgRow td:first-child,
.clearQ .RadGrid.RadGrid_MetroTouch .rgAltRow td, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgAltRow td:first-child{
   padding:0px;
}

.clearQ .panel-body, 
.clearQ .PanelBody {
    padding: 0px;
}

.clearQ .GridTitlePanel, .clearQ .GridFooterPanel {
    margin-top: 0px;
    margin-bottom: 0px;
}



.eventList .date{
	display:block;
}

.eventSearch .date{
	display:none;
}

.eventSearch .FilterPanel{
	margin-bottom:40px;
}

.eventSearch.MDY .date.showMDY{
	display:block;
}

.eventSearch.DMY .date.showDMY{
	display:block;
}

.eventList .image{
  width:150px;
  height:150px;
  display:inline-block;
  background-size:cover;
  background-position:center;
  vertical-align:top;
}

.eventList .content{
  display:inline-block;
  max-width:70%;
  width:100%;
  margin-left:20px;
}

.eventList .title{
  display:block;
  text-decoration:none!important;
  font-size:130%;
  font-weight:bold;
}

.eventList .desc{
  display:block;
}

.eventList .city{
  display:block;
}

.eventSearch .eventList{
	    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 1rem 1rem;
    background-color: #f2f6fb;
    margin-bottom: 1rem;
}

.eventList .PrimaryButton{
   text-decoration:none!important;
  color:#fff!important;
  margin-top:20px;
  display:block;
  max-width:150px;
}

.clearQ .RadGrid_MetroTouch .rgSelectedRow{
  color:#333!important;
}

.clearQ .RadGrid_MetroTouch .rgSelectedRow a.title{
  color: #009eaa!important;
}

.clearQ .RadGrid_MetroTouch .rgSelectedRow .eventList .PrimaryButton{
  color:#fff!important;
}

.hideDesc .desc,
.hideCity .city,
.hideButton .PrimaryButton{
  display:none;
}

.eventTemplate .QueryTemplateItem{
	border: 2px solid #ddd;
}
	

@media(max-width:767px){

.eventTemplate .QueryTemplateItem{
	max-width:350px;
	margin:20px auto;
}
	
	.eventList .image{
    max-width:350px;
		width:100%;
    height:200px;
    display:block;
    margin:0px auto 10px auto;
  }

  .eventList .content{
    display:block;
    width:100%;
    max-width: 100%;
    margin: 0;
    padding: 0px 15px;
  }

  .eventList{
    max-width:350px;
    width:100%;
    display:block;
    margin:0px auto;
  }

	.eventSearch .eventList{
		margin:20px auto;
	}
}