.info { position:absolute; left:0; top:0; color:#000000; font-weight:bold;  font-size:24px;  }

/*********************************************

	This is for the Form

*********************************************/
.custom_sales_presentation_form input[type="checkbox"] { margin:0; }
.custom_sales_presentation_form .summary { position:absolute; left:10px; bottom:10px; z-index:12; font-size:11px; color:#B70000; }

/******************************************************************
	Worksheet
******************************************************************/
.custom_sales_presentation_form .worksheet .labelcontainer span { display:inline-block; padding:0 0 5px 0; width:150px; margin-top:10px; }
.custom_sales_presentation_form .worksheet .labelcontainer .checkboxlabel { width:auto; }
.custom_sales_presentation_form .worksheet .labelcontainer .disable { color:#999999; }

/* Hide these */
.custom_sales_presentation_form .paragon_gap_container .worksheet:first-child { visibility:hidden; height:0px; }
.custom_sales_presentation_form .paragon_gap_container .worksheet:nth-child(3) .labelcontainer:nth-child(1) { visibility:hidden; }
.custom_sales_presentation_form .paragon_gap_container .worksheet:nth-child(3) .labelcontainer:nth-child(2) { visibility:hidden; }


.custom_sales_presentation_form .worksheet input[type=number],
.custom_sales_presentation_form .worksheet select,
.custom_sales_presentation_form .worksheet input[type=text],
.custom_sales_presentation_form .worksheet input[type=text]:not(:read-only) {
	border: 1px solid #296BE7;
	font-weight:bold;
    padding: 5px;
    width: 150px;
}

/******************************************************************
	Buttons
******************************************************************/
.custom_sales_presentation_form .topbar { float:right; }

.custom_sales_presentation_form .visionbutton, .custom_sales_presentation .visionbutton { height:30px; }
.custom_sales_presentation_form .visionbutton:before, .custom_sales_presentation .visionbutton:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.custom_sales_presentation_form .visionbutton:nth-child(n+1), .custom_sales_presentation .visionbutton:nth-child(n+1) { background-color:#879ADE; margin:0 20px 10px 20px; }
.custom_sales_presentation_form .visionbutton:nth-child(n+1):hover, .custom_sales_presentation .visionbutton:nth-child(n+1):hover { background-color:#6780D6; }

.custom_sales_presentation_form .visionbutton img, .custom_sales_presentation .visionbutton img { display:inline-block; vertical-align:middle; margin-left:5px; }
.custom_sales_presentation_form .visionbutton span, .custom_sales_presentation .visionbutton span { display:inline-block; vertical-align:middle; margin:0 12px 0 6px; }

.custom_sales_presentation_form .visionbutton,
.custom_sales_presentation .visionbutton {
	position:relative;
	display: inline-block;
	cursor:pointer;
	width:auto;
	text-align:left;
	font-size:14px;
	color:#FFFFFF;
	background-repeat: no-repeat;
	background-position: center center;
	font-family:Arial, Helvetica, sans-serif;

	background-color:#4B4B4B;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;

	/* Prevent from selecting text in the button */
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
}
.custom_sales_presentation_form .next, .custom_sales_presentation .next { text-align:center; }
.custom_sales_presentation_form .next span, .custom_sales_presentation .next span { text-align:center; }
.custom_sales_presentation_form .visionbutton span.disabled, .custom_sales_presentation .visionbutton.disable span { color: #BCBCBC; }

/******************************************************************
	Inservice Date Test Data
*****************************************************************/
.custom_sales_presentation_form .labelcontainer { display:inline-block; vertical-align:top; }
.custom_sales_presentation_form .labelcontainer:last-child { margin-left:0;  }
.custom_sales_presentation_form .labelcontainer > div { font-size:11px; }


/******************************************************************
	GAP
*****************************************************************/
.custom_sales_presentation_form .gap_form {
	padding: 10px 0 10px 10px;
	background-color: #FFFFFF;
	width: 800px;
	height:500px;
	margin: 50px auto 0 auto;

	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

}

.custom_sales_presentation_form .gap_form .header { height:40px; border-style:solid; border-color:#CCCCCC; border-width:0 0 1px 0; }

.custom_sales_presentation_form .gap_form .title { font-size:20px; font-weight:bold; margin:10px 0 10px 0; }
.custom_sales_presentation_form .gap_form .worksheet { clear:none; padding:10px 0 0 0; height:70px;  border-style:solid; border-color:#CCCCCC; border-width:0 0 1px 0;  }
.custom_sales_presentation_form .gap_form .worksheet .title { font-size:14px; }
.custom_sales_presentation_form .gap_form .group:nth-child(n+2) { margin-top:10px; border-style:solid; border-color:#CCCCCC; border-width:1px 0 0 0; }
.custom_sales_presentation_form .gap_form .worksheet span, .gap_form .worksheet input { display:inline-block; vertical-align:top; }
.custom_sales_presentation_form .gap_form span.checkboxlabel { margin:0 5px 0 0; font-size:13px; }

.custom_sales_presentation_form .clear { clear:both; }

/******************   Pages  ******************/
.custom_sales_presentation_form .content { position:relative; height:calc(100% - 40px); }
.custom_sales_presentation_form .value1, .custom_sales_presentation_form .value2 {
	opacity: 0;
	/* transition: opacity 0.5s, transform 1s; */
	transition: opacity 3.0s;
	transform: translate3d(0, 0, 0);
	position:absolute;
	bottom:0;
	left:0;
}

/*********************************************

	This is for the Presentation

*********************************************/
.custom_sales_presentation { background-color:#FFFFFF; height:100%; }

.custom_sales_presentation .header { height:40px; width:100%; }
.custom_sales_presentation .header .topbar { float:right; margin-top:0px; }
.custom_sales_presentation .header img { position:absolute; bottom:-7px; left:0; width:120px; transition: opacity 1.0s; animation-timing-function: ease-out; opacity:0; }

.custom_sales_presentation .container_body { position:relative; white-space:nowrap; height:calc(100% - 40px); }
.custom_sales_presentation .container_body .top { position:relative; width:100%; height:85%; }
.custom_sales_presentation .container_body .car { position:absolute; width:100%; height:90%; top:0; right:0; transition: opacity 0.5s;   z-index:9050; }
.custom_sales_presentation .container_body .car img { position:absolute; bottom:0; right:0; width:70%; }
.custom_sales_presentation .container_body .bottom { position:absolute; bottom:0; left:0; height:30%; width:100%; background-color: #92ADDC; z-index:5003; }

.custom_sales_presentation .col1 { position:relative; float:left; height:100%; width:80%; white-space: normal; overflow:hidden; transition: width 1.0s; z-index:5005; }
.custom_sales_presentation .col2 { position:relative; float:left; height:100%; width:20%; background-color:#DBDBDB; white-space: normal; overflow:hidden; transition: width 1.0s; z-index:9000; }

.custom_sales_presentation .col1 .blue { position:relative; position:relative; background-color: #4471C4; width:100%; height:100%; opacity:0.8; z-index:5002; }

.custom_sales_presentation .container_body .blue .left_images { text-align:center; transition: opacity 0.5s; transition-delay: 0s; opacity:0; color:#FFFFFF; width:100%; height:100%; white-space: normal; overflow:hidden; }
.custom_sales_presentation .container_body .blue .left_images .images { position:absolute; top:70px; left:0; width:100%; height:100%; transition: opacity 0.5s; opacity:0; }
.custom_sales_presentation .container_body .blue .left_images .images img { width:80%; height:80%; }
.custom_sales_presentation .container_body .blue .titlearea { position:absolute; top:10%; left:10%; transition: opacity 0.5s; vertical-align: middle; white-space:nowrap; z-index:5004; }

.custom_sales_presentation .container_body .blue .title { display:inline-block; vertical-align: middle;  box-sizing: border-box; font-size:4.5em; margin:0 40px 0 20px; font-weight:normal; color:#FFFFFF; }
.custom_sales_presentation .container_body .blue .description { display:inline-block; box-sizing: border-box; vertical-align: middle; opacity:0.6; font-size:1.5em;  font-style:italic; color:#FFFFFF; }

.custom_sales_presentation .col2 > div {
	display:block;
	/* transform-origin: 0 0; */
	transition:  margin, opacity 1.0s 0s, font-size 2.0s, transform 1s;
	/* transform: translate3d(0, 0, 0); */
	animation-timing-function: ease-out;
	/* text-align:center; */
	z-index:5006;
}

/*
	transform: scale(10) translate3d(calc(200px/10), calc(-300px/10), 0);
*/


/*********************************
	Defaults
********************************	*/
.custom_sales_presentation .label, .custom_sales_presentation .value { font-size: 3.5em; display:inline-block; }
.custom_sales_presentation .label { width:45vw; }
.custom_sales_presentation .value { margin:0 0 0 0; }

.custom_sales_presentation .msg1 { color: #006FC0; margin:10px 0 40px 2vw; opacity: 0; }

.custom_sales_presentation .msg2 { color: #098E48; margin:0 0 40px 2vw; opacity: 0; }
.custom_sales_presentation .msg3 { color: #FB0201; margin:0 0 0 2vw; opacity: 0; }

.custom_sales_presentation .msg4 { margin:10px 0 0 2vw;  white-space: normal; opacity: 0; }
.custom_sales_presentation .msg4 .label { width:auto; display:inline; }
.custom_sales_presentation .msg4 .value { color: #FFFFFF; margin:0; display:inline; }

.custom_sales_presentation .container_body .blue .left_images .images { opacity: 0; }
.custom_sales_presentation .container_body .blue .left_images .images img:last-child { margin-top:50px; }


.custom_sales_presentation .container_body .blue .left_images .images[show="1"] { opacity: 1; }

	/*********************************
		Page 1
	********************************	*/


	/* .custom_sales_presentation .container_body .blue .left_images .images { transition: opacity 0s; } */


	/*********************************
		Page 2
	********************************	*/


	/*********************************
		Page 3 - Page 6
	********************************	*/
	.custom_sales_presentation .container_body .col1[pagenum="3"],
	.custom_sales_presentation .container_body .col1[pagenum="4"],
	.custom_sales_presentation .container_body .col1[pagenum="5"],
	.custom_sales_presentation .container_body .col1[pagenum="6"] { width: 25%; }

	.custom_sales_presentation .container_body .col2[pagenum="3"],
	.custom_sales_presentation .container_body .col2[pagenum="4"],
	.custom_sales_presentation .container_body .col2[pagenum="5"],
	.custom_sales_presentation .container_body .col2[pagenum="6"] { width: 75%; }

	.custom_sales_presentation .container_body .blue .titlearea[pagenum="3"],
	.custom_sales_presentation .container_body .blue .titlearea[pagenum="4"],
	.custom_sales_presentation .container_body .blue .titlearea[pagenum="5"],
	.custom_sales_presentation .container_body .blue .titlearea[pagenum="6"] { opacity: 0; }

	.custom_sales_presentation .container_body .gray[pagenum="3"],
	.custom_sales_presentation .container_body .gray[pagenum="4"],
	.custom_sales_presentation .container_body .gray[pagenum="5"],
	.custom_sales_presentation .container_body .gray[pagenum="6"] { background-color: #EDEDED; }

	.custom_sales_presentation .container_body .car[pagenum="3"],
	.custom_sales_presentation .container_body .car[pagenum="4"],
	.custom_sales_presentation .container_body .car[pagenum="5"],
	.custom_sales_presentation .container_body .car[pagenum="6"] { opacity: 0; }

	.custom_sales_presentation .header img[pagenum="3"],
	.custom_sales_presentation .header img[pagenum="4"],
	.custom_sales_presentation .header img[pagenum="5"],
	.custom_sales_presentation .header img[pagenum="6"] { opacity: 1; }

	.custom_sales_presentation .container_body .blue .left_images[pagenum="3"],
	.custom_sales_presentation .container_body .blue .left_images[pagenum="4"],
	.custom_sales_presentation .container_body .blue .left_images[pagenum="5"],
	.custom_sales_presentation .container_body .blue .left_images[pagenum="6"] { opacity: 1; }

	.custom_sales_presentation .msg1[pagenum="3"],
	.custom_sales_presentation .msg1[pagenum="4"],
	.custom_sales_presentation .msg1[pagenum="5"],
	.custom_sales_presentation .msg1[pagenum="6"] { opacity: 1; }

	.custom_sales_presentation .msg2[pagenum="4"],
	.custom_sales_presentation .msg2[pagenum="5"],
	.custom_sales_presentation .msg2[pagenum="6"] { opacity: 1; }

	.custom_sales_presentation .msg3[pagenum="5"],
	.custom_sales_presentation .msg3[pagenum="6"] { opacity: 1; }

	.custom_sales_presentation .msg4[pagenum="6"] { opacity: 1; }


@media (min-width: 1281px) {
	.custom_sales_presentation .label { width:30vw; }

}

/* iPad Landscape */
@media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
  	.custom_sales_presentation .info { color:red; }

	.custom_sales_presentation .label { width:45vw; }
	.custom_sales_presentation .container_body { height:100%; }

	.custom_sales_presentation .label { font-size: 3.0em; }
	.custom_sales_presentation .value { font-size: 3.5em; }
	.custom_sales_presentation .msg4 { font-size: 0.8em; }

	/* Enlarge the gap between the messages */
	.custom_sales_presentation .msg1 { margin-bottom:80px; }
	.custom_sales_presentation .msg2 { margin-bottom:80px; }

}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1280px) and (orientation: portrait) {
  	.custom_sales_presentation .info { color:purple; }

	.custom_sales_presentation .container_body { height:100%; }

	.custom_sales_presentation .label { width:auto; }
	.custom_sales_presentation .label, .custom_sales_presentation .value { display:block; }
	.custom_sales_presentation .msg4 .label, .custom_sales_presentation .msg4 .value { display:inline; }

	.custom_sales_presentation .label { font-size: 3.0em; }
	.custom_sales_presentation .value { font-size: 3.5em; }
	.custom_sales_presentation .msg4 { font-size: 0.8em; }


	/* Enlarge the gap between the messages */
	.custom_sales_presentation .msg1 { margin-bottom:80px; }
	.custom_sales_presentation .msg2 { margin-bottom:80px; }


}


/* iPhone landscape */
@media (min-width: 481px) and (max-width: 767px) {
	.custom_sales_presentation .info { color:red; }

	.custom_sales_presentation .container_body { height:100%; }

	.custom_sales_presentation .container_body .blue .title { display:block; font-size:4.0em; }
	.custom_sales_presentation .container_body .blue .description { display:block; }

	.custom_sales_presentation .container_body .blue .left_images .images img:last-child { margin-top:10px; }

	.custom_sales_presentation .msg1,
	.custom_sales_presentation .msg2,
	.custom_sales_presentation .msg3 { margin-bottom:10px; }

	.custom_sales_presentation .label { font-size: 1.5em; }
	.custom_sales_presentation .value { font-size: 2.5em; }
	.custom_sales_presentation .msg4 { font-size: 0.8em; }
}


/* iPhone portrait */
@media (min-width: 320px) and (max-width: 480px) {
	.custom_sales_presentation .info { color:red; }
	.custom_sales_presentation .container_body { height:100%; }

	.custom_sales_presentation .container_body .blue .title { display:block; font-size:4.0em; }
	.custom_sales_presentation .container_body .blue .description { display:block; font-size:1.2em; }

	.custom_sales_presentation .label { width:auto; }
	.custom_sales_presentation .label, .custom_sales_presentation .value { display:block; }
	.custom_sales_presentation .msg4 .label, .custom_sales_presentation .msg4 .value { display:inline; }

	.custom_sales_presentation .label { font-size: 1.5em; }
	.custom_sales_presentation .value { font-size: 2.0em; }
	.custom_sales_presentation .msg4 { font-size: 0.8em; }
}


