/*custom font*/
/*@import url(http://fonts.googleapis.com/css?family=Montserrat); */
/* 2018-01-09 - standardizing with variables */
/* 2020-02-13 - IE browser not supporting variables */

:root {
    --inputs-font:verdana;
    --inputs-font-size:17px;
    --inputs-font-color: #4F4F4F;  
    --inputs-bg-color: #E2E2E2;          /*default for all inputs including text fields, select dropdowns AND RADIO LABELS ... not usually compatible */
    --field-title-font-size:19px;
    --field-title-color:whitesmoke;
    --field-smaller-font-size:17px;
    --radio-font-size:16px;
    --radio-font-color:#AAAAAA;
    --checkbox-font-size:20px;
    --checkbox-font-color: #AAAAAA;
    --fs-title-font-size:20px;
    --fs-title-color: whitesmoke;
    --fs-subtitle-font-size:14px;
    --fs-subtitle-color:#AAAAAA;
    --error-font-size: 20px;
    --error-font-color: #CDB33E;
    --progressbarcompleted: #CDB33E;  /*gold */
}
/* IE doesn't support CSS vars! :( */
<!--[if IE]>
    /************ css for all IE browsers ****************/
body {
	font-family: verdana;
	color: whitesmoke;
 	font-size:19px;
}

<![endif]-->

/* example of defining a custom font */
@font-face {
    font-family: tradegothic;
    src: url(tradegothic.otf);
}

sup {font-size:12px; vertical-align:super;}   /* superscript for TM etc) */

a {
    color: #1FBCFF;
}

/*basic reset*/
* {margin: 0; padding: 0;}


html {
  height: 100%;
  background: none;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
	font-family: verdana;
 
}

/* Background Div*/
.background {

  position: relative;
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  /* Safari 6.1+ */
}

.background:after {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left:0;
  right:0;
  content: '';
  background: transparent; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: transparent;
  -webkit-animation: fadein 4s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 4s;
  /* Firefox < 16 */
  -ms-animation: fadein 4s;
  /* Internet Explorer */
  -o-animation: fadein 4s;
  /* Opera < 12.1 */
  animation: fadein 4s;
  /*Fade In Animation*/
}



/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  opacity: 0.2;
}

to {
  opacity: 1;
}

/* Foreground div */

.foreground {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: transparent;
	overflow-y: auto; /* has to be scroll, not auto */
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;

  /*Fade In Animation*/
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
  z-index: 1;
}

table{
    border-collapse:collapse;
    width: 100%;
}

table, td{
    border: 0px solid #DDDDDD;
}
    
.formheader {
	position:relative;
	height: 25px;
	padding-left: 10px;
	margin-left: 15px;
	background-color:#333333;
	text-align: left;
	color:white;
}	

/* Label that spans both columns  */
td.formlabelheader {
    height: 15px;
    padding-left: 10px;
    color: #333333;
}

.formlabel {
	position:relative;
	height: auto;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
    margin-bottom:5px;
    background-position: center;
   	text-align: right;
}
	
.formdata {
	position:relative;
	height: auto;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5px;
	background-position: center;
}


.smallerlabel {
	font-size:16px;
	letter-spacing:1px;
	text-align: right;
}

.privacy {
	margin-right: auto;
	margin-left: 25px;
	margin-top: 0;
	background-position: center;
    font-family: verdana;
	font-size:13px;
    font-weight: normal;
	letter-spacing:1px;
	text-align: left;
    color: #AAAAAA;
}
.legal {
	margin-right: auto;
	margin-left: 25px;
	margin-top: 0;
	background-position: center;
	font-size:12px;
    font-weight: normal;
	letter-spacing:1px;
	text-align: left;
    color: white;
}

.legal p {
    padding: 2px;
    margin-left: 2em; 
    text-indent: -2em 
   
}

.referral {
	font-size:18px;
	letter-spacing:2px;
	text-align: right;
}
.referral_name {
	font-size:24px;
	letter-spacing:2px;
	text-align: right;
	background-color: yellow;
}
.welcome_logo {
    padding: 10px;
	text-align: center;
}
.welcome {
    padding: 10px;
	font-size:24px;
	letter-spacing:2px;
	text-align: left;
}

.subtext {
	font-size:14px;
	letter-spacing:1px;
	text-align: left;
}


/*****************************************************************************************/
/*ms_form is the multi-page form */
#msform {
	margin: 10px auto;
	text-align: center;
	position: relative;
}

#msform fieldset {
	background: rgba(3,3,3,0.9);
	/*border: 0 none; */
	border-radius: 10px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
	padding: 20px 30px;
	overflow-y: auto; /* has to be scroll, not auto */
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	
	box-sizing: border-box;
	width: 95%;
	margin: 0 auto 0 20px;
	
	/*stacking fieldsets above each other*/
	position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}

#msform .datapanel{
    text-align: left;
	<!--[if IE]>
    /************ css for all IE browsers ****************/
	font-family: verdana;
	color: whitesmoke;
 	font-size:19px;
<![endif]-->


}

/*inputs*/
#msform input, #msform textarea{
	padding: 5px;
	border: 2px solid #ccc;
	border-radius: 3px;
	margin-bottom: 7px;
	width: 100%;
	box-sizing: border-box;
	color: var(--inputs-font-color);
    background-color: var(--inputs-bg-color);
	font-size: var(--inputs-font-size);
    font-family: var(--inputs-font);
}

#msform select {
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 7px;
	width: 100%;
    min-width: 250px;
	box-sizing: border-box;
    color: var(--inputs-font-color);
    background-color: var(--inputs-bg-color);
	font-size: var(--inputs-font-size);
    font-family: var(--inputs-font);
}

/*buttons*/
.action-button {
	width: 160px;
    height: 50px;
    background:url(btn_generic_HD_taller.png);
    background-repeat: no-repeat;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
.action-button:hover, .action-button:focus {
	box-shadow: 0 0 0 2px whitesmoke, 0 0 0 3px #dc4500;
}

#msform .action-button {
	width: 160px;
    height: 50px;
    background:url(btn_generic_HD_taller.png);
    background-repeat: no-repeat;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

#msform .next.action-button {
	width: 160px;
    height: 50px;
    background:url(btn_generic_HD_taller_next.png);
    background-repeat: no-repeat;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

#msform .previous.action-button {
	width: 160px;
    height: 50px;
    background:url(btn_generic_HD_taller_previous.png);
    background-repeat: no-repeat;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

#msform .homepage-button {
	width: 200px;
	background: #818283;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px whitesmoke, 0 0 0 3px #dc4500;
}
/*headings - fs- = frameset*/
.left{
	float:left;
	text-align:left;
}
.fs-title {
	font-size: var(--fs-title-font-size);
	color: var(--fs-title-color);
/*	text-transform: uppercase;  */
	margin-bottom: 10px;
<!--[if IE]>
    /************ css for all IE browsers ****************/
	font-family: verdana;
	color: whitesmoke;
 	font-size:19px;
<![endif]-->

}

.fs-subtitle {
    text-align: center;
	font-weight: normal;
	font-size: var(--fs-subtitle-font-size);
	color: var(--fs-subtitle-color);
	margin-bottom: 20px;
<!--[if IE]>
    /************ css for all IE browsers ****************/
	font-family: verdana;
	color: whitesmoke;
 	font-size:19px;
<![endif]-->


}

.fs-subtitle-left {
    text-align: left;
	font-weight: normal;
	font-size: var(--fs-subtitle-font-size);
	color: var(--fs-subtitle-color);
	margin-bottom: 20px;
}
.fs-intro {
	font-weight: bold;
	font-size: 20px;
	color: white;
	margin-bottom: 20px;
	text-align: left;
}
.fs-fieldtitle{
    font-weight: normal;
	font-size: var(--field-title-font-size);
	color: var(--field-title-color);
	margin-top: 10px;
    margin-bottom: 5px;
    text-align: left;
}
.fs-inlinefieldtitle{
    float: left;
    font-weight: normal;
	font-size: var(--field-title-font-size);
	color: var(--field-title-color);
	margin-top: 3px;
    margin-bottom: 3px;
    text-align: left;
    padding-right: 20px;
}
.fs-inlinetext{
    float: left;
    font-weight: normal;
	font-size: var(--field-smaller-font-size);
	color: var(--field-title-color);
	margin-top: 3px;
    margin-bottom: 3px;
    text-align: left;
    padding-right: 20px;
}
.fs-right{
    float: right;
    min-width: 250px;
    padding-right: 30px;
    font-weight: normal;
	font-size: var(--field-title-font-size);
	color: var(--field-title-color);
	margin-top: 10px;
    margin-bottom: 3px;
    text-align: left;
}
.fs-note{
    font-weight: normal;
	font-size: 15px;
	color: white;
	margin-top: 10px;
    margin-bottom: 3px;
    text-align: left;
}
.fs-subtext{
    font-weight: normal;
	font-size: smaller;
	color: var(--field-title-color);
	margin-top: 10px;
    margin-bottom: 3px;
    text-align: left;
}

.fs-error{
    font-weight: normal;
	font-size: var(--error-font-size);
	color: var(--error-font-color);
	margin-top: 10px;
    margin-bottom: 7px;
    text-align: center;
}

/* vertical spacer - just having extra div may be space enough but increase margin if not */
.fs-verticalspacer{
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	font-size: 0px;
}

/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}


#progressbar li {
	list-style-type: none;
	/*progressbar lables*/
	color: var(--field-title-color);
	text-transform: uppercase;
	font-size: 16px;
    /*set this according to number of steps - i.e. 33% = 3 steps */
	width: 33%;
	float: left;
	position: relative;
}

/*additional defn for a progressbar with alternate number of steps (i.e. RFP simplified vs detailed) */
#progressbar.fourstep li{
	list-style-type: none;
	/*progressbar lables*/
	color: var(--field-title-color);
	text-transform: uppercase;
	font-size: 16px;
    /*set this according to number of steps - i.e. 33% = 3 steps */
	width: 25%;
	float: left;
	position: relative;
}

#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 25px;
	line-height: 25px;
	display: block;
	font-size: 16px;
	color: white;
	background: #5C5D5D;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 4px;
	background: #5C5D5D;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps orange*/
/*The number of the step and the connector before it = orange*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: var(--progressbarcompleted);
	color: white;
}

.red{
    color: red;
}

.success{
    color:green;
}
/* from http://www.csscheckbox.com   */
/* from http://www.csscheckbox.com   */
        
        
 /* ********************* CHECKBOX  *************************** */
        input[type=checkbox].css-checkbox {
					position:absolute; 
                    z-index:-1000; 
                    left:-1000px; 
                    overflow: hidden; 
                    clip: rect(0 0 0 0); 
                    height:1px; 
                    width:1px; 
                    margin:-1px; 
                    padding:0; 
                    border:0;
				}

		input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
			padding-left:30px;
			height:30px; 
			display:inline-block;
			line-height:30px;
			background-repeat:no-repeat;
			background-position: 0 0;
			font-size: var(--checkbox-font-size);
            color: var(--checkbox-font-color);
			vertical-align:middle;
			cursor:pointer;
		}

		input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
			background-position: 0 -30px;
		}
        
		label.css-label {
    		background-image:url('./csscheckbox_checkbox_orange_med.png');
    		-webkit-touch-callout: none;
    		-webkit-user-select: none;
    		-khtml-user-select: none;
    		-moz-user-select: none;
    		-ms-user-select: none;
    		user-select: none;
        }
 /* ********************* CHECKBOX  *************************** */
        
        
        
  /* ********************* RADIO / STACKED  *************************** */
       
       input[type=radio].css-checkbox {
			position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
		}

        input[type=radio].css-checkbox + label.css-label {
        	padding-left:35px;
        	height:30px; 
        	display:inline-block;
        	line-height:30px;
        	background-repeat:no-repeat;
        	background-position: 0 0;
        	font-size:var(--radio-font-size);
            color: var(--radio-font-color);
           	vertical-align:middle;
        	cursor:pointer;
         }
        
        input[type=radio].css-checkbox:checked + label.css-label {
        	background-position: 0 -30px;
        }
        
        label.css-label.radio {
        		background-image:url('./csscheckbox_radio_orange_med.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }
  /* ********************* ^^^ RADIO / STACKED ^^^ *************************** */
 
  /* ********************* ^^^ RADIO GRAPHICAL ^^^ *************************** */
       input[type=radio].css-graphical {
			position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
		}

        input[type=radio].css-graphical + label.css-graphical-label {
            width: 100px;
        	height:100px; 
        	display:inline-block;
        	line-height:100px;
        	background-repeat:no-repeat;
        	background-position: 0 0;
        	font-size:var(--radio-font-size);
            color: var(--radio-font-color);
           	vertical-align:middle;
        	cursor:pointer;
         }
        
        input[type=radio].css-graphical:checked + label.css-graphical-label {
        	background-position: 0 -100px;
            width: 100px;
        }
        
        label.css-graphical-label.radio_banquet {
        		background-image:url('../img/seating_banquet.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }
        label.css-graphical-label.radio_classroom {
        		background-image:url('../img/seating_class.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }
       
          label.css-graphical-label.radio_theater {
        		background-image:url('../img/seating_theater.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }

       label.css-graphical-label.radio_conference {
        		background-image:url('../img/seating_board.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }
       label.css-graphical-label.radio_hollowsquare {
        		background-image:url('../img/seating_hsquare.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }
       label.css-graphical-label.radio_ushape {
        		background-image:url('../img/seating_ushape.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }     
       label.css-graphical-label.radio_crescentrounds {
        		background-image:url('../img/seating_hrounds.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }             
        
       label.css-graphical-label.radio_other {
        		background-image:url('../img/seating_other.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }   
        
       label.css-graphical-label.radio_reception {
        		background-image:url('../img/seating_reception.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }
        
    /* ********************* ^^^ RADIO GRAPHICAL ^^^ *************************** */
  
    /* ************    NEW FOR CHOICE OF BUSINESS PERSONAL OR START ********** */    
      input[type=radio].css-choice {
			position:absolute; 
            z-index:-1000; 
            left:-1000px; 
            overflow: hidden; 
            clip: rect(0 0 0 0); 
            height:1px; 
            width:1px; 
            margin:-1px; 
            padding:0; 
            border:0;
		}

        input[type=radio].css-choice + label.css-choice-label {
            width: 100px;
        	height:100px; 
        	display:block;
        	line-height:100px;
        	background-repeat:no-repeat;
        	background-position: 0 0;
        	font-size:var(--radio-font-size);
            color: var(--radio-font-color);
           	vertical-align:middle;
        	cursor:pointer;
            margin: 0 auto;
         }
        
        input[type=radio].css-choice:hover + label.css-choice-label {
        	background-position: 0 -100px;
            width: 100px;
        }

        label.css-choice-label.radio_business {
        		background-image:url('./group_icon.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }

       label.css-choice-label.radio_personal {
        		background-image:url('./family_icon.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }
 
        label.css-choice-label.radio_start {
        		background-image:url('./start_icon.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }       
        
        label.css-choice-label.radio_search {
        		background-image:url('./perform-search.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		 user-select: none;
 
        }    
		/* adjustments for the search and start icons on secondary pages */
.shiftup{
	margin-top: -30px;
}
		   
.graphical-bg{
    background-color: white;
    padding: 10px;
    border-radius: 3px;
    
}          
  /* ********************* ^^^ BUSINESS / PERSONAL / SEARCH CHOICE ^^^ *************************** */

   /* ************    NEW FOR CHOICE OF SCENE COLLECTOR MODE ********** */    
      input[type=radio].css-scmode {
			position:absolute; 
            z-index:-1000; 
            left:-1000px; 
            overflow: hidden; 
            clip: rect(0 0 0 0); 
            height:1px; 
            width:1px; 
            margin:-1px; 
            padding:0; 
            border:0;
		}

        input[type=radio].css-scmode + label.css-scmode-label {
            width: 200px;
        	height:200px; 
        	display:block;
        	line-height:200px;
        	background-repeat:no-repeat;
        	background-position: 0 0;
        	font-size:var(--radio-font-size);
            color: var(--radio-font-color);
           	vertical-align:middle;
        	cursor:pointer;
            margin: 0 auto;
         }
        
        input[type=radio].css-scmode:hover + label.css-scmode-label {
        	background-position: 0 -200px;
            width: 200px;
        }

        label.css-scmode-label.radio_sc_images {
        		background-image:url('./scene_collector_image_only.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }

       label.css-scmode-label.radio_sc_details {
        		background-image:url('./scene_collector_details.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }
 
        label.css-scmode-label.radio_sc_video {
        		background-image:url('./scene_collector_clapboard.png');
        		-webkit-touch-callout: none;
        		-webkit-user-select: none;
        		-khtml-user-select: none;
        		-moz-user-select: none;
        		-ms-user-select: none;
        		user-select: none;
        }       
        
.onehalf{
    float:left;
    width: 49%;
    padding-right: 1%;
}  
        
.onethird{
    float:left;
    width: 32%;
    padding-right: 1%;
} 

.onequarter{
    float:left;
    width: 24%;
    padding-right: 1%;
}
.fivepercent{
    float:left;
    width: 5%;
    padding-right: 1%;
}    
.tenpercent{
    float:left;
    width: 9%;
    padding-right: 1%;
} 
.fifteenpercent{
    float:left;
    width: 14%;
    padding-right: 1%;
}     
.twentypercent{
    float:left;
    width: 19%;
    padding-right: 1%;
}    
.thirtypercent{
    float:left;
    width: 32%;
    padding-right: 1%;
}    
.fortypercent{
    float:left;
    width: 39%;
    padding-right: 1%;
}            

.fiftypercent{
    float:left;
    width: 49%;
    padding-right: 1%;
}            
.sixtypercent{
    float:left;
    width: 59%;
    padding-right: 1%;
}   
.seventypercent{
    float:left;
    width: 69%;
    padding-right: 1%;
}   
.eightypercent{
    float:left;
    width: 79%;
    padding-right: 1%;
}   
.ninetypercent{
    float:left;
    width: 89%;
    padding-right: 1%;
}                
.fullwidth{
    float:left;
    width: 99%;
    padding-right: 1%;
}                
 
#thankyou {
    position: fixed;
    top: 40%;
    left: 50%;
	height: 300px;
	width: 800px;
    margin-top: -150px;
    margin-left: -400px;
    Padding-top: 40px; 
	overflow: visible;
    text-align: center;
    vertical-align: middle;
    font-family: tradegothic; 
    font-size: 30px;
    font-weight: bold;
    color: #5D5D5D;
    border: 3px;
    border-style: groove ;
    border-color: black;
    background-color: rgba(255, 255, 255, 0.9); 
 }  
 #printblock {
    position: fixed;
    top: 80%;
    left: 50%;
	height: 100px;
	width: 600px;
    margin-top: -50px;
    margin-left: -300px;
    Padding-top: 20px; 
	overflow: hidden;
    text-align: center;
    vertical-align: middle;
    font-family: tradegothic;   
    font-size: 14px;
    color: #5D5D5D;
    border: 3px;
    border-style: groove ;
    border-color: black;
    background-color: rgba(255, 255, 255, 0.9); 
 }  
#event_deets{
    font-family: tradegothic;
    font-size: 20px;
    margin: 5px;
    padding: 5px;
}
.inline_checkbox{
    float:left;
}
 
.clearfloat{
    clear:both;
}

#version_btn_block{
    position:absolute;
    float:left;
    top: 20%;
    right: 20px;
    width: 150px;

}
#versions .version_button{
    float:left;
	width: 100px;
 	background: black;
	font-weight: bold;
    text-align: center;
	color: white;
	border: 0 none;
	border-radius: 1px;
   	box-sizing: border-box;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#versions .version_button:hover,#versions .version_button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px white;
}
/* link to rules only */
#rules_regs{
    color: green;    
} 

#printform .action-button {
	width: 160px;
    height: 35px;
    background:url(btn_generic_HD.png);
    background-repeat: no-repeat;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}     
#printform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px whitesmoke, 0 0 0 3px #dc4500;
}
 .moreInfo{
    display:none;
 }
 .optintext{
    float:left;
    width: 79%;
    padding-right: 1%;
    color: #AAAAAA;
 }
 .checkboxtext{
    float:left;
    width: 79%;
    padding-right: 1%;
    color: #AAAAAA;
 }
 
.delete_ts{
    background-image:url(./remove.png);
    height:25px;
    width:25px;
    background-position:  0px 0px;
    background-repeat: no-repeat;
    border: 0px;
}
.rfp-notes input{
    height: 100px;
    
}
#msform input.btn-business{
    display:inline-block;
	background-repeat:no-repeat;
	background-position: 0 0;
	background-image:url('./group_icon.png');
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    width:100px;
    height:100px;
}
.choicea:hover ~ input[type=radio].css-choice{
    background-color: red;
}

.choice{
    text-align: left;
    font-size: var(--fs-title-font-size);
	color: var(--fs-title-color);
	text-transform: uppercase;
	margin-top: 20px;
    margin-bottom: 10px;
    cursor: pointer;
}

.choice-subtext{
    text-align: left;
	font-size: var(--fs-subtitle-font-size);
	font-weight: normal;
	color: var(--fs-subtitle-color);
	margin-bottom: 20px;
}

/* --------- Tooltip Styles ---------- */

.tooltip {
    position: relative;
    padding: 5px 12px;
    cursor: pointer;
}

.tooltip::before, .tooltip::after{
    position: absolute;
    left: 95%;
    opacity: 0;
    transition: all ease 0.3s;
}

.tooltip::before{
    content: "";
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: rgba(255,255,255,0.3) transparent transparent transparent;
    top: -5px;
    margin-left: -8px;
}

.tooltip::after{
    content: attr(data-tooltip);
    background: rgba(0,0,0,0.8);
    top: -5px;
    transform: translateY(-100%);
    font-size: 14px;
    margin-left: -150px;
    width: 300px;
    border-radius: 10px;
    color: #eee;
    padding: 14px;
    border-color: rgba(255,255,255,0.3);
    border-style: solid;

}

/* Hover states */

.tooltip:hover::before, .tooltip:hover::after{
    opacity: 1;
}

.business_icon{
    float: right;
    padding-right: 20px;
    vertical-align: text-top;
}

.feature{
    text-align: left;
    vertical-align: top;
    font-size: var(--fs-title-font-size);
	color: var(--fs-title-color);
	text-transform: uppercase;
	margin-top: 0px;
}

.feature_desc{
    text-align: left;
	font-size: var(--fs-subtitle-font-size);
	font-weight: normal;
	color: var(--fs-subtitle-color);
	margin-bottom: 20px;
}

.btn_exit{
    float: right;
  	width: 30px;
    height: 30px;
    background:url(./btn_exit.png);
    background-repeat: no-repeat;
	border-radius: 2px;
	cursor: pointer;  
}
.biz_arrow{
    float: left;
  	width: 50px;
    height: 50px;
    background:url(./biz_arrow.png);
    background-repeat: no-repeat;
    
}
#description_block{
    min-height:100px;
    height: 100px;
    overflow:hidden;   
}

#sc-options-description{
    display: none;
    margin-top: 15px;
    text-align: center;
    font-size: var(--fs-title-font-size);
    color: var(--fs-title-color);
}   
.caption{
    text-align: center;
    font-size: var(--fs-title-font-size);
    color: var(--fs-title-color);
    margin: 0 auto;
}
.navbtnright{
   display: block;
   background-image:url(../img/right_nested.png); 
   cursor: pointer;  
   border: none;
   margin: 0 auto;
   width: 70px;
   height: 75px;
   background-color: transparent;
} 
.navbtnright:hover{
   background-image:url(../img/right_nested_hover.png); 
}
.navbtnleft{
   display: block;
   background-image:url(../img/left_nested.png); 
   cursor: pointer;  
   border: none;
   margin: 0 auto;
   width: 70px;
   height: 75px;
   background-color: transparent;
} 
.navbtnleft:hover{
   background-image:url(../img/left_nested_hover.png); 
}