/**all white text**/

.whiteText,
.whiteText p,
.whiteText ul,
.whiteText ul li,
.whiteText ol,
.whiteTextol li,
.whiteText a,
.whiteText a:focus,
.whiteText a:hover,
.whiteText a:visited,
.whiteText h1,
.whiteText h2,
.whiteText h3,
.whiteText h4,
.whiteText h5,
.whiteText h6{
	color:#fff;
}

/**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;
  }
 
}

/*clear query text*/

.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;
}

.hideIQAHeader thead{
	display:none;
}

/*events searches*/

.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;
	}
}


/**Member directory**/

.memDir .RadGrid_MetroTouch{
    border:0;
}

.memDir .rgHeader{
    display:none;
}

.memDir.cards tbody{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content: space-between;
}
	
.memDir.cards tr td{
    display:block;
}

.memDir.cards tr {
    display:block;
    flex-basis: 31%;
    color:#000;
}

.memDir.cards .image{
    margin:0px auto 20px auto;
}
	
.memDir tr td{
    display:flex;
    gap: 20px 20px;
    align-items: center;
    border: 1px solid #000!important;
    margin: 20px 0px;
    padding: 20px!important;
}

.memDir .image{
    display: block;
    width: 100%;
    max-width: 200px;height:200px;
    background-size: cover;
    background-position: center;
}

.memDir .phone{
    display:block;
}

.memDir .email{
    display: block;
    line-break: anywhere;
}

.memDir .location{
    display:block;
}

.memDir a{
    color:#000!important;
}

.memDir .RadGrid.RadGrid_MetroTouch .rgSelectedRow,
.memDir .RadGrid.RadGrid_MetroTouch .rgSelectedRow a {
    background-color:transparent;
    color:#000000!important;
}

.memDir tr{
    display:block;
    width:100%;
}

.memDir .content{
    display:block;
    width:100%;
}
	
.memDet .logos .image{
    display:block;
    width:100%;
    max-width:200px;
    height:200px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    margin:0px auto 20px auto;
}

.memDet .titles h4 {
    margin: 15px 0px;
    display: block;
}

.memDet .titles .phone,
.memDet .titles .email{
    display:block;
}

.memDet .bio h5{
    margin-top:30px;
}

.memDet .socials tr,
.memDet .socials tbody{
	display:block;
	margin:0px auto;
	overflow: visible;
	height: 100%;
	width: 100%;
}

.memDet .socials td{
	text-align:
	center;
	padding:10px!important;
	width: 100%!important;
	display: block!important;
	max-width:200px;
	margin: 0px auto;
}

.memDet .socials a,
.memDet .socials a:visited{
	display:inline-block;
	margin:0px 5px;
	width:35px;
	height:35px;
	background-size:34px;
	background-position:center;
	background-repeat:no-repeat;
}

.memDet .RadGrid.RadGrid_MetroTouch .rgSelectedRow a,
.memDet .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:visited,
.memDet .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:hover,
.memDet .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:focus,
.memDet .RadGrid.RadGrid_MetroTouch .rgRow a,
.memDet .RadGrid.RadGrid_MetroTouch .rgRow a:hover,
.memDet .RadGrid.RadGrid_MetroTouch .rgRow a:visited,
.memDet .RadGrid.RadGrid_MetroTouch .rgRow a:focus{
	color:#000!important;
}

.clearQ .socials .RadGrid_MetroTouch{
	display:block!important;
}

.memDet .socials a.fb{
	background-image:url(../../images/MyWebsite/directory-socials/fb-colour-circle-white.svg);
}

.memDet .socials a.tw{
	background-image:url(../../images/MyWebsite/directory-socials/tw-colour-circle-white.svg);
}

.memDet .socials a.in{
	background-image:url(../../images/MyWebsite/directory-socials/insta-colour-circle-white.svg);
}

.memDet .socials a.li{
	background-image:url(../../images/MyWebsite/directory-socials/linkedin-colour-circle-white.svg);
}

.memDet .socials a.pin{
	background-image:url(../../images/MyWebsite/directory-socials/pinterest-colour-circle-white.svg);
}

.memDet .socials a.vim{
	background-image:url(../../images/MyWebsite/directory-socials/vimeo-color-circle-white.svg);
}

.memDet .socials a.yt{
	background-image:url(../../images/MyWebsite/directory-socials/yt-colour-circle-white.svg);
}

.memDet .socials a.tt{
	background-image:url(../../images/MyWebsite/directory-socials/tiktok-color-circle-white.svg);
}

.memDet .socials a:hover,
.memDet .socials a:focus{
	transform:scale(1.1);
}

@media(min-width:768px) and (max-width:1200px){
    .memDir.cards tr {
		display:block;
		flex-basis:48%;
    }
}
	
@media(max-width:767px){
    .memDir tr td{
		display: block;
		width:100%;
		max-width:350px;
		margin:20px auto;
    }
    .memDir .image{
		width:100%;
		max-width:200px;
		margin:0px auto 20px auto;
    }
    .memDir.cards tbody{
		display:block;
    }
 }

/**Event speakers**/

.speakers .image{
	display:block;
	width:200px;
	height:200px;
	background-size:cover;
	background-position:center;
}

.speakers .QueryTemplateItem{
	display:flex;
	gap:0px 20px;
}

.speakers .details{
	flex-basis:75%;
}

@media(max-width:900px){
	.speakers .QueryTemplateItem{
		display:block;
		gap:0px 20px;
	}
}

@media(max-width:767px){
	.speakers .image{
		margin:0px auto;
	}
}



/*Job board*/
.clearQ.jobDetail a,
.clearQ.jobDetail a:visited,
.clearQ.jobDetail a:hover,
.clearQ.jobDetail a:focus,
.clearQ.jobDetail .RadGrid.RadGrid_MetroTouch .rgSelectedRow a,
.clearQ.jobDetail .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:visited,
.clearQ.jobDetail .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:hover,
.clearQ.jobDetail .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:focus,
.clearQ.jobBoard a,
.clearQ.jobBoard a:visited,
.clearQ.jobBoard a:hover,
.clearQ.jobBoard a:focus,
.clearQ.jobBoard .RadGrid.RadGrid_MetroTouch .rgSelectedRow a,
.clearQ.jobBoard .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:visited,
.clearQ.jobBoard .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:hover,
.clearQ.jobBoard .RadGrid.RadGrid_MetroTouch .rgSelectedRow a:focus{
	color:#000!important;
}

.jobBoard tbody tr {
	padding:20px 0px;
	display:block;
	border-bottom:1px solid #ccc;
}

 .clearQ.jobBoard .RadGrid.RadGrid_MetroTouch .rgSelectedRow{
	 border-bottom:1px solid #ccc;
 }
 
 
/*ticker*/
/*marquee*/

.marqueeWrapper {
    display: block;
    width: 100%;
    margin:50px 0px;
    height:100px;
    position:
    relative;
    overflow: hidden;
}

.marquee {
    width: 100%;
    overflow: hidden;
    position:absolute;
}

.marquee a img,
.marquee a:focus img {
    opacity: 0.7;
    height:100px!important;
    display:inline-block;
    vertical-align:middle;
    margin: 0px 20px;
}


.marquee a:hover img,
.marquee a:focus img {
    filter: none;
    opacity: 1;
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

