/* Last updated June 20, 2024 ZA */
html {
  scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin-bottom: .625rem;
  display: block;
  width: 100%; 
  line-height:1.5;
}

h1 {
	color: #00467F;
  font-size: clamp(18pt, 2vw, 28pt)!important;
}

h2 {
	color: #00467F;
  font-size: clamp(18pt, 1.5vw, 26pt)!important;
}
h3 {
	color: #00467F;
  font-size: clamp(16pt, 1.2vw, 23pt)!important;
}
h4 {
	color: #45749C;
  font-size: clamp(14pt, 1vw, 19pt)!important;
}
h5 {
	color: #232323;
  font-size: clamp(13pt, .9vw, 15pt)!important;
}
h6 {
	color: #232323;
  font-size: clamp(12pt, .8vw, 13pt)!important;
}



.small, small {
  font-size: 10pt;
}

summary {
  color:#45749C;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:18px;
}

summary:hover {
opacity:0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}




/*CSS Buttons*/
.button {
  appearance: none;
  background-color: #D31245;
  border-radius: 15px;
  box-sizing: border-box;
  color: #FFFFFF!important;
  cursor: pointer;
  display: inline-block;
  font-family: 'Nunito Sans', sans-serif;  
  font-size: 16px;
  font-weight: 600;
  line-height: 14pt;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
}

.button:disabled {
  pointer-events: none;
}

.button:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
  background-color:#ab0e38;
}

.button:active {
  box-shadow: none;
  transform: translateY(0);
}


.subbutton {
  appearance: none;
  background-color: transparent;
  border: 2px solid #00467F!important;
  border-radius: 15px;
  box-sizing: border-box;
  color: #00467F!important;
  cursor: pointer;
  display: inline-block;
	font-family: 'Open Sans', sans-serif;
  font-size: 13pt;
  font-weight: 600;
  line-height: 14pt;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 6px 24px;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
}

.subbutton:disabled {
  pointer-events: none;
}

.subbutton:hover { 
  background-color: #e1f0f9;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.subbutton:active {
  box-shadow: none;
  transform: translateY(0);
}


.red {
  color: #A52A2A;
}
hr {display:block; clear:both; border:none; height:1px; background:#CFC6AD; margin:5px; padding:0;}

.clr {clear: both;}



/*  ZACH'S COLUMN SETUP  */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
	float:left;
  margin: 0.5rem 2%;
}
	

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }
}

/* Image Wrap Styles */
img.img_left {
  float: left;
  margin-right: 10px;
}
img.img_right {
  float: right;
  margin-left: 10px;
}
img.img_center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media only screen and (max-width: 400px) {
	img.img_left {
  float: none;
  display: block;
}
img.img_right {
 float: none;
  display: block;
}
	
}

/** SORTABLE EXHIBITOR TABLE **/
#exhibitorTable {
  margin: 0 auto;
  font-size: 1em;
  margin-bottom: 15px;
  -webkit-column-break-inside: always;
  -moz-column-break-inside: always;
  column-break-inside: always;
}
#exhibitorTable thead {
  cursor: pointer;
  background: #e2e7e5;
}

#exhibitorTable thead img {
  vertical-align: bottom;
}

#exhibitorTable small {
  color:#545454;
}

#exhibitorTable thead tr th {
  font-weight: bold;
  padding: 5px 10px;
}
#exhibitorTable thead tr th span {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
}
#exhibitorTable thead tr th.headerSortUp, #exhibitorTable thead tr th.headerSortDown {
  background: #b5b5b5;
}
#exhibitorTable thead tr th.headerSortUp span {
  background-image: url('https://www.qualitymag.com/ext/resources/Events/TQS/Floor-plan/arrow-up.png');
}
#exhibitorTable thead tr th.headerSortDown span {
  background-image: url('https://www.qualitymag.com/ext/resources/Events/TQS/Floor-plan/arrow-down.png');
}

#exhibitorTable tbody td:first-child {
  width:25%;
	text-align:center;
}

#exhibitorTable table.exhibitor2 tr > td:first-child {min-width:150px; text-align:left} /* first column */
#exhibitorTable tr > td:first-child + td {min-width:200px; text-align:left} /* second column */

#exhibitorTable img {max-height:60px!important; max-width:120px!important}




/* BOXES FOR SPEAKER PAGE */
 .speaker-container {
      display: flex;
      flex-wrap: wrap;}

 .speaker-container h3 {
  margin: 15px 5px 10px 5px;
  font-size: 14pt;
width:100%;
}

div.speakers,
div.speakersnobio {
  flex: 0 0 190px; 
  display: flex;
  align-items: stretch;
  display:inline-block;
  border: 1px #e1e1e1 solid;
  margin: 0px;
  vertical-align: top;
  position: relative;
  padding-bottom:40px;
}


@media only screen and (max-width: 400px) {
	div.speakers,
div.speakersnobio {
  flex: 0 0 165px; 
	}
}

div.speakers h4,
div.speakersnobio h4 {
  margin: 15px 5px 10px 5px!important;
  font-size: 12pt!important;
}
div.speakers p,
div.speakersnobio p {
  margin: 2px 5px!important;
  font-size: 11pt!important;
}

div.speakers,
div.speakersnobio img {
    max-width: 100%;
    height: auto;
}

.speakers:hover {background:#E3E8E8;cursor: pointer;}

.speakers:hover img {opacity: 0.8;}


  .speakers::after {
    content: "READ BIO";
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color:#231F20;
    background-color: #e1e1e1;
    padding: 3px 0px;
  }


img.logo {max-width:100px; max-height:auto;margin:10px} /*shrink logo for subpages */

.speakerbio {clear:both;margin-bottom:10px;}

  #speakerhead {display:none;}


#cols3 {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
}
@media only screen and (max-width: 767px) {
  #cols3 {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
  }
}

@media only screen and (max-width: 479px) {
  #cols3 {
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
  }
}
button.register{
    width:230px;
    height:70px;
    background: linear-gradient(to left top, #00345b 50%, #00467F 50%);
    border-style: none;
    color:#fff;
    font-size: 30px;
    letter-spacing: 3px;
    font-family: 'Open Sans Condensed';
    font-weight: 600;
    outline: none;
    cursor: pointer;
    position: relative;
    padding: 0px;
    overflow: hidden;
    transition: all .5s;
    box-shadow: 0px 2px 2px rgba(0,0,0,.2);
}
button.register span{
    position: absolute;
    display: block;
}
button.register span:nth-child(1){
    height: 3px;
    width:200px;
    top:0px;
    left:-200px;
    background: linear-gradient(to right, rgba(0,0,0,0), #D31245);
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span1 2s linear infinite;
    animation-delay: 1s;
}

@keyframes span1{
    0%{
        left:-200px
    }
    100%{
        left:200px;
    }
}
button.register span:nth-child(2){
    height: 70px;
    width: 3px;
    top:-70px;
    right:0px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), #D31245);
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span2 2s linear infinite;
    animation-delay: 2s;
}
@keyframes span2{
    0%{
        top:-70px;
    }
    100%{
        top:70px;
    }
}
button.register span:nth-child(3){
    height:3px;
    width:200px;
    right:-200px;
    bottom: 0px;
    background: linear-gradient(to left, rgba(0,0,0,0), #D31245);
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    animation: span3 2s linear infinite;
    animation-delay: 3s;
}
@keyframes span3{
    0%{
        right:-200px;
    }
    100%{
        right: 200px;
    }
}

button.register span:nth-child(4){
    height:70px;
    width:3px;
    bottom:-70px;
    left:0px;
    background: linear-gradient(to top, rgba(0,0,0,0), #D31245);
    border-top-right-radius: 1px;
    border-top-left-radius: 1px;
    animation: span4 2s linear infinite;
    animation-delay: 4s;
}
@keyframes span4{
    0%{
        bottom: -70px;
    }
    100%{
        bottom:70px;
    }
}

button.register:hover{
    transition: all .5s;
    transform: rotate(-1deg) scale(1.1);
    box-shadow: 0px 3px 5px rgba(0,0,0,.4);
}
button.register:hover span{
    animation-play-state: paused;
}	


.quote {background:url("https://www.food-safety.com/ext/resources/FSS_Event/testimonial/quote-left.png") no-repeat left top; }
.testimonials > .col-12 p {font-family: 'PT Serif', serif; font-size:24px; color:#344556}
.testimonials > .col-6 p {font-size:18px;}	


/* Tips and Tricks Page */
#list {max-width:850px; background-color: #fff;margin:auto;box-shadow: 2px 2px 4px #555;}
#list hr {
    margin: 5px!important;
    height: 1px;
   background:none!important;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0))!important;
}
#list img {max-width:80px; float:right; margin:1.5%;}
num {font-size:130pt; color:#DED3D9; position: relative;
    left: 80%;
    top: 0px;
    z-index: 1;
text-shadow: 2px 2px 4px #e1e1e1;
line-height:100pt;
font-family: 'Open Sans Condensed', sans-serif;
}

#list .col-10 {z-index:5; position: relative;}
#list .col-10 p {margin-right:11%;}
#list .col-10 ul {margin-right:11%;}
#list h6 {font-size:12pt; font-weight:bold}

/* current sponsors page  */
#sponsors  {text-align: center;}	
		
#sponsors > a {text-align: center; display: inline-block; height:110px; width:150px;padding:10px; line-height: 90px;vertical-align: middle;margin:5px}
		
#sponsors a > img { margin:10px;}


/* Sponsor Opps page */

/* This contains all page elements. */

.pageContainer{
	margin: 0px auto;
	max-width: 90%;
	font-family: 'Open-Sans', sans-serif;
	font-size: 18px;
	line-height: 1.4;
}

@media screen and (max-width: 700px){

	.pageContainer{

		width: 100%;		

	}

}



/* This restricts content to half the page width, and becomes full page width on narrow screens. */

.halfWidthDiv{
	width: 48%;
	display: inline-block;
	margin-right: 15px;
	vertical-align: top;
	overflow: hidden;

}

@media screen and (max-width: 1000px){

	.halfWidthDiv{
		width: 95%;
		display: block;
		margin: 15px auto 40px auto;
	}

}



.halfWidthDiv img{

	max-width: 99%;

}




/* Below are various section headers. */



.sectionHeader{

	font-family: 'Oswald';
	margin: 0px auto 20px auto;
	font-size: 32px;
	text-transform: uppercase;
	color: #03271B; /* This header color will be unique for each brand. */

}




/* This header is above all the Marketing Solutions options. */

#marketingSolutionsHeader{

	margin: 20px auto 0px auto;

	text-align: center;

}




/* This contains all the Marketing Solutions. */

#allSolutionsContainer{

	margin-top: 20px;

}





/* This contains the Marketing Solutions menu. */

#menuContainer{

	text-align: center;

	animation: revealMenu 0.4s;

}

@keyframes revealMenu{

	from{

		opacity: 0;

	}

	to{

		opacity: 1;

	}

}





/* These contain the individual Marketing Solutions. */

.marketingSolutionContainer{

	display: none;
	margin: 0px auto 50px auto;
	padding: 10px;
	width: 98%;
	overflow: hidden;
	border: 1px solid #696969;
	box-shadow: 2px 2px 4px #696969;
	border-radius: 5px;
	animation: revealSolution 0.4s;

}

@keyframes revealSolution{

	from{

		opacity: 0;

	}

	to{

		opacity: 1;

	}

}











/* These are the various Marketing menu buttons. */

.solutionButton, .downloadButton, .categoryButton, #restoreMenuButton, .viewAllButton, #viewAllWithinCategoryButton, #resetButton{

	display: inline-block;
	margin: 8px;
	padding: 6px 12px;
	position: relative;
	background-color: #00467F;
	color: #ffffff;
	font-size: 16pt;	
	cursor: pointer;
	line-height: 1.2;
	width: 230px;
	border: 1px solid #696969;
	font-family:"Nunito Sans","Open Sans Condensed",sans-serif;

}



.solutionButton:hover, .downloadButton:hover, #restoreMenuButton:hover, .viewAllButton:hover, #viewAllWithinCategoryButton:hover, #resetButton:hover{

	background-color: #00355e;



}



.categoryButton:hover{
	opacity: 0.7;

}



.solutionButton a{
	text-decoration: none;
	color: #ffffff;

}





/* This makes certain buttons wider and responsive. */

#restoreMenuButton, .viewAllButton, #viewAllWithinCategoryButton, #resetButton{

	width: 400px;

}

@media screen and (max-width: 700px){

	#restoreMenuButton, .viewAllButton, #viewAllWithinCategoryButton, #resetButton{

		width: 95%;

	}

}



/* This is the information icon within the Marketing Solution buttons. */

.infoIcon{

	position: absolute;

	top: 2px;

	right: 4px;

}



.infoIcon:hover{

	background-color: #696969;

}





/* These contain the information that becomes visible when you hover over the info icon on the Marketing Solution buttons. */

.infoBox{

	display: none;
	padding: 5px;
	width: 175px;
	background-color: #ffffff;
	color: #000000;
	text-align: left;
	font-size: 16px;
	font-weight: normal;
	top: 2px;
	right: 2px;
	z-index: 10;
	box-shadow: 4px 4px 8px #000000;
	border: 1px solid #696969;
	position: absolute;

}



.infoIcon:hover .infoBox{

	display: block;

}


/* This has an icon on the left, and a paragraph next to it. */

.imageBesideTextContainer{
	padding: 20px 0px;
	overflow: hidden;

}






/* This floats content to the right, and goes pagewide on narrow screens. */

.floatRight{
	width: 50%;
	margin: 8px 0px 8px 8px;
	float: right;
	text-align: center;
	overflow: hidden;

}

@media screen and (max-width: 700px){

    .floatRight{
		float: none;
		width: 80%;
		margin: 8px auto;

	}

}



.floatRight img{
	max-width: 100%;
	max-height: 250px;

}



.prospectusContainer {
	float:right;
	width:25%;
	min-width:240px;
	background:#fffdf7;
	border:1px solid #F9B336;
	margin:0 5px 5px 5px;
	padding:5px;
	text-align:center;

	}

	

.prospectusContainer h4 {

  text-align:center;
font-family:"Nunito Sans","Open Sans Condensed",sans-serif;
color:#231F20!important;
	margin:0 0 5px 0!important;

}

	

.prospectusContainer div {
  text-align:center;
margin:0px!important;

}

	

.prospectusContainer img {
  max-height:200px;
  border:1px solid #096044;

}



	.prospectusContainer .solutionButton {

	width:180px!important;

	}	

	

	.solutionButton > a {

	  color:#fff!important;

	}



	@media screen and (max-width: 700px){

	.prospectusContainer {
	float:none;
	width:100%;

		}

	}

	

.contactContainer {

	max-width:85%;
	margin:10px auto;
	background:#E1EAF1;
	border:1px solid #d6d6d6;
	font-size:12pt;

	}

	

@media screen and (max-width: 768px) {

	  .contactContainer {

	  max-width:100%;  

	  }

	}

	

.contactContainer h4 {

  text-align:center;
  font-size:22pt;
font-family:"Nunito Sans","Open Sans Condensed",sans-serif;
color:#231F20!important;	

}

	

.contactContainer a {
	color:#251105!important;	

}


.contactContainer img {
  max-width:100px!important;
  float:left;
  margin:5px;

}	


/* If your table overflows your page's width, this creates a sideways scroller under your table only, as opposed to your whole page. */ 

.tableContainer{

	margin: 0px auto;

	padding: 0px;

	overflow-x: auto;

}



/* Apply this class to your table's opening tag. No other elements within the table need classes or inline styles. */

.advertiseTable{

	max-width: 100%;

	margin: 15px auto;

	border-collapse: collapse;

	border: 2px solid #696969;	

}



.advertiseTable th{	

	font-family:"Nunito Sans","Open Sans Condensed",sans-serif;

	padding: 6px;



	}

/* This affects all table cells. The media queries below shrink the text and cell padding for narrow screens. */

.advertiseTable td{

	border: 1px solid #696969;

	padding: 6px;

	vertical-align: top;

	font-size: 20px;

	color: #000000;

	line-height: 1.2;

	background-color: #ffffff;

	text-align: center;

}

@media screen and (max-width: 1000px){

	.advertiseTable td{

		font-size: 16px;

		padding: 4px;

    }

}



/* This makes the background color on every other row a different color, to make it easier to read. */

.advertiseTable tr:nth-child(odd) td{

	background-color: #eff3f5;

}



/* This affects only the column number in parentheses. */

.advertiseTable td:nth-child(1){

	text-align: left;

}



/* This affects only the row number in parentheses. In this case it makes the first row a header row. */

.advertiseTable tr:nth-child(1) td{

	font-weight: bold;

	background-color: #696969;

	color: #ffffff;

	vertical-align: middle;

	border: 1px solid #ffffff;

}



.button-container {max-width:1200px;margin:auto;text-align:center}

.button-container button {width:150px; height:75px; border:1px solid #1A488F;font-size:11pt!important; background:#F0F4FB; border-radius: 20px; color:#1A488F;padding:2px!important;margin:3px!important;cursor:pointer;vertical-align: bottom;}
.button-container button:hover {background:#f2f8ff;}

.button-container button.daily {width:150px; height:75px; border:1px solid #027DAC;font-size:12pt!important}

.button-container button.sponsored {width:150px; height:75px; border:1px solid #b6b6b6;font-size:11pt!important}


.button-container button.nofilter {border:1px solid #6a6a6a;background:#f5f5f3;color:#222163;margin-left: 15px !important;}

.button-container button.nofilter:hover {background:#CFC6AD;}

#activity-buttons {display:none}

#toggle-icon {color:#D31145; font-weight:700;}

#toggle-icon img{max-height:35px; margin:0 10px}

/* Agenda contents */


.sessionrow {
    font-family:'Open Sans', sans-serif;
    display: table-row;
    table-layout: fixed;
    width: 99%; 
    margin:25px auto 5px auto;
    font-size:1.1em;
}


.sessionrow h3 {
  color:#003E6B!important;
  font-size: 17pt !important;
}

.clickable:hover {background:#f2fdff!important;
 cursor:pointer;
  }

.sessionrow div {
  display: table-cell;
  text-align:left;
  padding:1%;
  vertical-align: top;
}

@media only screen and (max-width: 599px){

.sessionrow div {
    display: block;
    text-align:center;
    width:100%;
}

#head {display: none;}

}


@media only screen and (min-width: 600px){

.sessionrow div:nth-child(1) {
  width:14%;
padding-right:1%;
font-size:11pt;
}

.sessionrow div:nth-child(2) {
  width:35%;
padding-right:1%;
}

.sessionrow div:nth-child(3) {
  width:20%;
padding-right:1%;
}

.sessionrow div:nth-child(3) br {
  content: "A" ;
  display: block;
  margin-bottom: 1em;
}

.sessionrow div:nth-child(4) {
  width:9%;
padding-right:0;
    text-align:center;
}

}


.sessionrow div:nth-child(1) {
  font-size:12.5pt;
}


.sessionrow div:nth-child(2) {
  font-size:13pt;
}

.sessionrow div:nth-child(3) {
  font-size:11pt;
}

.sessionrow div:nth-child(3) strong {
  font-size:12pt;
}

.sessionrow div:nth-child(4) {
  text-align:center;
}

.sessionrow div:nth-child(1)::first-line {
  font-weight: bold;
}

.sessionrow div:nth-child(2) {
  font-weight: bold;
  font-size:13pt;
  color:#292562;
}

.sessionrow div:nth-child(2) span{
  color:#282828;
  font-weight:normal;
}


.sessionrow div:nth-child(4) img {
height:auto;  
max-width:100px; 
max-height:100px;
}

.cert span {
color: #7d1355 !important;
display: block;
font-weight:300;
}

#head {
  margin-top:5px;
  cursor: arrow !important;
}

#head div {
  font-family:'Roboto', sans-serif;
  background: #231F20;
  font-size:14pt;
  font-weight:bold;
  color: #fff !important;
}



#head small {font-size:9.5pt;
	font-weight:normal;
	line-height:9pt!important;}



	


/* This is the page wide gray background. */
.modalBackground{
	display: none;
	z-index: 99999; 
	width: 100%; 
	height: 100%; 
	position: fixed; 
	top: 0; 
	left: 0;
	background-color: rgba(48,48,48, 0.8);
	overflow: scroll;
	text-align: center;
}



/* This contains all the modal content. */
.modalContent{
  font-family:'Open Sans', sans-serif;
	margin: 0px auto 40px auto;
	padding: 2%;
	max-width: 1170px;
	text-align: left;
	z-index: 9999;
	background-color: #ffffff;
	overflow: hidden;
	animation: modalZoomIn .25s;
}
@media only screen and (max-width: 700px){
    .modalContent{
        max-width: 90%;
    }
}

.modalContent h3 {
font-family:'Roboto', sans-serif;
font-size:20pt;

}
.modalContent h5 {
font-family:'Roboto', sans-serif;
font-weight:normal;
font-size:13pt;
margin-top:20px;
}

.modalContent .img_left {
max-width:150px;
}

/* This is the close icon. */
.modalClose{
  
	margin: 8px auto;
	padding: 5px 2px;
	width: 30px;
	font-size: 20px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.0;
	color: #ffffff;
	background-color: #000000;
	border: 1px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
	z-index:99999;
}

.modalClose:hover{
	background-color: #ffffff;
	color: #000000;
}



/* To open the modal with a zoom-in effect, add "animation: modalZoomIn .25s;" to the "modalContent" class. */
@keyframes modalZoomIn{
	from{
		transform: scale(0.75);
	}
	to{
		transform: scale(1.0);
	}
}



/* To open the modal with a fade-in effect, add "animation: modalFadeIn .25s;" to the "modalContent" class. */
@keyframes modalFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.regbox-popups {
width:200px;
font-family:'Roboto', sans-serif;
color:#1B1E47;
font-size:11pt;
float:right;
margin-left:2%;
padding:.5%;
}

@media screen and (max-width: 400px){
.regbox-popups {width:100%;}
}



@media screen and (max-width: 700px){

	.desktop-only{
     display: none;

    }

}


.mobile-only{

	display: none;

}

@media screen and (max-width: 700px){

	.mobile-only{

		display: block;

    }

}

/* 'What you get' table on rates page */

.comparison-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
    color: #222163;
  font-size: 13pt;
}

.comparison-table .row {
  display: table-row;
  border-bottom:.5px #CEC7AD solid;
} 

.comparison-table .row:nth-child(odd) {
  background-color: #fcf8ec;
}

.comparison-table .cell {
  display: table-cell;
  padding: 1%;
}

.header .cell:first-child {
  width: 60%; 
}

.comparison-table .header {
  font-weight: bold;
  background-color: #ffffff!important;
}

.comparison-table  .cell:first-child + .cell {
  text-align: center;
  color: #6d6e71;
  font-size: 11pt;
  font-weight: 600;
  min-width:25%;
}

.comparison-table .cell:first-child + .cell + .cell {
  text-align: center;
  color: #811B5A;
  font-size: 11pt;
  font-weight: 600;
  min-width:25%;
}

.highlight-box {
  border: 1px solid #222163;
  border-top: none;
  position: relative;
  padding: 50px 10px 10px 10px; 
  min-height:230px;
}

.highlight-box h4 {
  position: absolute;
  top: -1px;
  left: 0px;
  background-color: #222163;
  width:100%;
  color: #fff!important;
  padding: 5px 10px;
  margin: 0;
  text-align:center!important;
}




/* REGISTRATION TABLE */
.regrow {
  display: table;
  table-layout: fixed;
  width: 99%; 
  margin:3% auto 1% auto;
  font-size:11pt;
  font-weight:bold;
}

.regrow div {
  display: table-cell;
  text-align:center;
  padding:.5%;
}

.regrow small {font-size:11pt;
font-weight:normal;
}

#reghead {
margin-top:5px;
}

#reghead div {
background: #222163;
font-size:13pt;
font-weight:bold;
color:#FFF;
}

#reghead div:not(:first-of-type) {
background: #2d2c83;
font-size:11pt;
border-left:#fff 2px solid;
}

.regrow small {
font-size:11pt;
font-weight:normal;
line-height:10pt!important;}

.regrow span {
font-size:13pt;
color:#222163;
}



.regprice {
margin-top:0px;
border-bottom:#e1e1e1 1px solid;
}

.regprice div {
font-size:18pt;
font-weight:normal;
border-left:1px solid #e1e1e1;
}

.regprice div:first-of-type {
font-size:19pt;
font-weight:bold;
color:#FB393A;
border-left:none;
}