/*** Nicasio Edits - Related to Language Toggler ***/

/*
	Set up the editable "Header" area to allow positioning of the Language Toggler
*/

#idHeaderContent {
	position: relative;
}


/* 
	Position the Language Toggler within the Header
*/

#languageToggleContainer {	 
	position: absolute;

	/* Change these values to reposition the toggler */
		
	top: 20px; /* from the top of the Header area */
	left: 900px; /* from the left of the Header area */

}


/* 
	Style the Language Toggler buttons
*/

#languageToggleContainer a {

	/* Default Styling */
	/* You can customize these rules or remove them and add your own */
	
	color: #000000; /* text color */
	font-size: 12px;
	font-weight: bold; /* change to 'normal' if 'bold' is not wanted */
	background-color: #eeeeee; 
	padding: 2px 6px 3px 6px; /* top right bottom left */
	border: 1px solid #999999;
	text-decoration: none; /* no underline for text */

}

/* 
	Style the Language Toggler buttons' "hover" state
*/

#languageToggleContainer a:hover {

	/* Default Styling */
	/* You can customize these rules or remove them and add your own */
	
	background-color: #c4c4c4;

}

.eventRegistrationInfoSpacesLeft,
.eventInfoSpacesLeft {display: none;}
#idSectionEventRegistrationTypeSelectorContainer div[id*="spaceLimitContainer"] { 
    display: none; 
} 
#idSectionEventRegistrationTypeSelectorContainer .availableRegistrationCount { 
  display: none; 
} 


/*** Card Features - Membership Levels Page ***/
.flip-card {
  background-color: transparent;
  width: 312px;
  height: 435px;
  border: 0px solid #f4fafa;
  border-radius: 8px;
  perspective: 1000px; 
}


.container {
  padding: 12px 16px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 435px;
  text-align: left;
  transition: all 1s ease-in-out;
  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: 435px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style the front side */
.flip-card-front {
  background-color: #F5F5F5;
  color: black;
  border-radius: 8px;
}

/* Style the back side */
.flip-card-back {
  background-color: #006C71;
  color: white;
  border-radius: 8px;
  transform: rotateY(180deg);
}

/* Style the header */
.flip-card .flip-card-front header {
    background-color: #f5f5f5;
    width:100%;
    height: 37%;
    margin-bottom: -1px;
    border-radius: 8px 8px 0 0; 
}

/* Style the card header icon */
.card-img {
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:50%;
  height:50%;
}


/*** Card Features - Contact Us Page ***/
* {
  box-sizing: border-box;
}

/* Float three columns side by side */
.column {
  float: left;
  width: 33.3%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.contact-card {
  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
  border-top: 0.5rem solid #006C71;
  transition: 0.3s;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  background-color: #ffffff;
}

/* Join Us Card */

.join-us-card {
	background-color: #fff;
	border-radius: 8px;
  border-top: 0.5rem solid #006C71;
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
	display: flex;
	max-width: 100%;
	overflow: hidden;
  width:955px
}

.join-us-preview {
	color: #fff;
  padding: 20px;
	max-width: 310px;
}

.join-us-info {
	padding: 20px;
	position: relative;
	width: 100%;
}

/*** Card Features - Member Resources Page ***/

/* Container holding the image and the text */
.image-container{
  position: relative;
  text-align: center;
}

.banner-container{
  position: relative;
}

.gradient-overlay {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 202px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: rgba(0, 0, 0, 0.4);
  
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.left-align-text {
  position: absolute;
  top: 40px;
  left: 20px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}