/*  ==================================================================================================== */
/*  START LARGE DEVICES, WIDE SCREENS (MIN-WIDTH:993PX)  =============================================== */
/*  ==================================================================================================== */


		/*  ============================================================================================ */
		/*  GENERIC STYLES  ============================================================================ */
		/*  ============================================================================================ */
		
		html		{ font-size:62.5% } /* Sets the base font size of the page to 10px */
		body		{ position:fixed; top:0; right:0; bottom:0; left:0; font-family:'Open Sans', 'Helvetica Neue', helvetica, helve, sans-serif; color:rgba(0,0,0,.87); line-height:1.4; background:#fcfcfc; height:100vh; }
		a 			{ color: rgba(74,144,226,1); text-decoration:none; }
		
		.pageWrapper { 
			position:relative;
			background-color: rgba(59,56,63,1);
			margin-left: 45em;
			width: calc(100% - 45rem);			
			height:100vh;
		}
		
		input[type="text"],
		input[type="number"] {
			display: block;
			font-size: 4.8rem;
			font-weight:300;
			background-color:transparent;
			padding:0;
			border:none;
			border-radius: 0;
			margin: 0;
			width: 100%;
			box-shadow: none;
			appearance: none;
		}

		input[type="text"]:focus,
		input[type="number"]:focus {
			outline: none;
		}
		
		input[type=number]::-webkit-inner-spin-button, 
		input[type=number]::-webkit-outer-spin-button { 
			margin: 0; 
			-webkit-appearance: none;
			   -moz-appearance: none;
					appearance: none;
		}
		
		input[type=number] { -moz-appearance:textfield; }

		button.resetButton,
		button.submitButton {
			display:inline-block;
			font-size:1.5rem;
			font-weight:300;
			color:rgba(0,122,255,0.87);
			text-transform:uppercase;
			background-color:transparent;
			border:1px solid rgba(0,122,255,0.54);
			border-radius:0.4rem;
			width: calc(100% - 3.65rem);
			height:3.6rem;
			appearance: none;
			box-sizing:border-box;
		}

		button.submitButton {
			color:#fff;
			background-color:rgba(74,144,226,1);
			border:none;
		}
		
		button[disabled],
		a[disabled] {
			color:rgba(0,0,0,0.34) !important;
   			background:rgba(255,255,255,0.34) !important;
   			pointer-events: none;
		}
		
		button:hover { background-color:rgba(74,144,226,0.9); }

		

		/*  ============================================================================================ */
		/*  BASE STYLES  =============================================================================== */
		/*  ============================================================================================ */

		.righty	{ float:right; }
		.lefty	{ float:left; }
		
		button.icons8-ask-question,
		button.icons8-settings,
		button.icons8-delete { 
			position: fixed;
			top: 1.3rem;
			right: 5.2rem;
			font-size: 2.6rem;
			color: rgba(255,255,255,1);
			line-height: 1.25;
			text-align: center;
			background-color: initial;
    		border: initial;
			width: 4.4rem;
			height: 4.4rem;
			padding:0;
		}
		
		button.icons8-ask-question,
		button.icons8-delete {
			top: 1.4rem;
			right: 0.8rem;
		}

		
		
		/*  ============================================================================================ */
		/*  BOX-CONTENT : BORDER-BOX ELEMENTS  ========================================================= */
		/*  ============================================================================================ */
		
		
		
		
		
		/*  ============================================================================================ */
		/*  SPLASH WRAPPER AND SIDE BAR  =============================================================== */
		/*  ============================================================================================ */		
		
		.sideBar {
			display:table;
			background-image:url(../images/ramHero-mobile-new.jpg); 
			background-repeat:no-repeat;
			background-position:35% 0;
			background-size: cover;
			width:45rem;
			height:100vh;
			float:left;
		}
		
		.titleWrapper {
			display: table-cell;
			position:relative;
			text-align:center;
			vertical-align:middle;
			background-color: rgba(76,67,65,0.35);
    	}
    	
    	.titleCenter { height:54.1rem; }
    	
    	.titleCenter h1 {
    		display:inline-block;
    		font-size: 7rem;
			font-weight: 700;
			font-style: italic;
			color: rgba(255,255,255,0.95);
			letter-spacing: -0.5rem;
			text-transform: uppercase;
			line-height: 0.7;
			text-align: center;
			padding-top: 7rem;
			border:1px solid rgba(255,255,255,0.3);
			border-radius: 50%;
			width: 25rem;
			height: 25rem;
			box-sizing: border-box;
    	}
		
		.rmppLogo {
			position:absolute;
			bottom:6rem;
    		left: calc(100% - 32.5rem);
			display: block;
			background-image: url('../images/logos-2.png');
			background-repeat: no-repeat;
			background-size: 100%;
			width: 20rem;
    		height: 6.5rem;
    	}
    	
		
		/*  ============================================================================================ */
		/*  SETUP STEPS  =============================================================================== */
		/*  ============================================================================================ */

		.stepsContainer { 
			position:relative;
			display:table;
			background-color: rgba(25,70,94,1); 
			transition: background-color 1.0s ease;
			width:100%;
			height:100vh;
		}
		
		.stepsContainer.noTransition { transition: none; }
		
		form[name="setupForm"] {
			display: table-cell;
    		vertical-align: middle;
		}
		
		.setupWrapper {
			color:rgba(255,255,255,0.87);
			text-align:center;
		}
		
		.colorOne 	{ background-color:rgba(25,70,94,1);  }
		.colorTwo 	{ background-color:rgba(14,89,137,1); }
		.colorThree { background-color:rgba(6,104,103,1); }
		.colorFour 	{ background-color:rgba(56,113,56,1); }
		.colorFive 	{ background-color:rgba(166,83,22,1); }
		.colorSix 	{ background-color:rgba(156,47,21,1); }
		.colorSeven { background-color:rgba(25,70,94,1);  }
		
		.clipCircle { 
			display:inline-block;
			background-size:contain;
			border-radius:50%; 
			width:25rem;
			height:25rem;
		}
		
		.stepOne   .clipCircle 	{ background-image:url(../images/stepOne.jpg);	 }
		.stepTwo   .clipCircle 	{ background-image:url(../images/stepTwo.jpg);	 }
		.stepThree .clipCircle 	{ background-image:url(../images/stepThree.jpg); }
		.stepFour  .clipCircle 	{ background-image:url(../images/stepFour.jpg);	 }
		.stepFive  .clipCircle 	{ background-image:url(../images/stepFive.jpg);	 }
		.stepSix   .clipCircle 	{ background-image:url(../images/stepSix.jpg);	 }
		.stepSeven .clipCircle 	{ background-image:url(../images/stepSeven.jpg); }
		
		.setupCenter h3 { 
			font-size: 2.2rem;
			font-weight:400;
			padding:0;
			margin:2rem 15% 0.3rem;
		}
		
		.setupCenter p { 
			font-size: 1.4rem; 
			font-weight:300;
			padding:0;
			margin-bottom:5rem;
		}
		
		.setupCenter p span {
			display: block;
			font-size: 1.2rem;
			margin: 1rem auto -2rem;
    		width: 65%;
		}
		
		.setupCenter input[type="number"] {
			color:rgba(255,255,255,1);
			text-align:center;
			border-bottom:1px solid rgba(255,255,255,0.4);
			margin: 0 auto;
			width:40rem;
		}
		
		.setupCenter input[type="number"].ng-pristine { color:rgba(255,255,255,0.4); }
		
		.setupCenter input[type="number"].ng-pristine + label::after,
		.setupCenter input[type="number"].ng-dirty + label::after,
		.setupCenter input[type="number"].ng-invalid + label::after {
			display:inline-block;
			content:"Use This Default Value";
			font-size:1rem;
			font-weight:300;
			letter-spacing:0.1rem;
			text-transform:uppercase;
			color:rgba(255,255,255,0.4);
			margin-top:0.75rem;
		}

		.setupCenter input[type="number"].ng-dirty + label::after {
			content:"Your Response";
			color:rgba(255,255,255,1);
		}
		
		.setupCenter input[type="number"].ng-invalid + label::after {
			content:"Enter a Valid Number";
			color:rgba(255,61,0,1);
		}
		
		.prevNext-btns {
			margin:2.5rem auto 0;
			min-width:4.4rem;
		}
		
		.prevNext-btns li { display:inline-block; }
		
		.prevNext-btns li + li { margin-left:2.2rem; }
				
		.prevNext-btns a { 
			display: inline-block;
			font-size: 2.6rem;
			color: rgba(41,121,255,0.87);
			line-height: 1.65;
			text-decoration: none;
			background-color: rgba(255,255,255,0.87);
			border-radius: 50%;
			width: 4.4rem;
			height: 4.4rem;
		}
		
		.pagination {
			position:fixed;
			bottom:3rem;
			left:calc(50%  + 16.5rem);
    		width: 12rem;
			z-index:1;
		}
		
		.pagination li {
			display:inline-block;
			background-color:rgba(0,0,0,0.25);
			border-radius:50%;
			margin:0 0.2rem;
			width:1rem;
			height:1rem;
		}
		
		.pagination li.active {	background-color:rgba(255,255,255,0.75); }
				
		
		
		/*  ============================================================================================ */
		/*  MARGINAL VALUE CALCULATOR  ================================================================= */
		/*  ============================================================================================ */
		
		.marginalValue-wrapper {
			display: table;
			background-color: rgba(48,46,50,1);
			width:100%;
			height:100%;
		}
		
		.centreWrapper {
			display: table-cell;
    		vertical-align: middle;
   		 	padding: 0 15%;
   		 	width: 100%;
    	}
    	
    	
    	/*  DPO / TSO SELECTOR ==================== */
    	
		.calculatorType { 
			margin: 1rem auto 0;
			width: 90%;
			max-width:60rem;
    	}
		
		.calculatorType li {
			display: inline-block;
			margin: 0 -0.2rem 0 0;
			width: 50%;
		}
				
		.segmentedBtn label {
			display: inline-block;
			font-size: 1.4rem;
			color: rgba(255,255,255,0.87);
			line-height: 2.3;
			text-align: center;
			padding: 0;
			border: 1px solid rgba(255,255,255,0.54);
			border-radius:1.5rem;
			border-top-right-radius:initial;
			border-bottom-right-radius:initial;
			margin: 0;
			width: 100%;
			box-sizing: border-box;
			cursor: pointer;
			transition: background-color 0.2s ease;
		}
		
		.segmentedBtn:first-child label { border-right:none; }
		
		li + li.segmentedBtn label { 
			border-left:initial;
			border-radius:1.5rem;
			border-top-left-radius:initial;
			border-bottom-left-radius:initial; 
			margin-left: 0rem;
		}
		
		.segmentedBtn label:hover { 
			background: rgba(74,144,226,0.4);
			border-color: rgba(74,144,226,0.4);
		}
		
		.segmentedBtn input[type=radio] { display: none; }
		
		.segmentedBtn input[type=radio]:checked + label {
			color: #fff;
			background:rgba(74,144,226,1);
			border-color:rgba(74,144,226,1);
		}
		

		/*  DPO / TSO RESULT ====================== */
		
		.marginalValue-result {
			background-color: rgba(59,56,63,1);
    		padding: 1.8rem 0 4rem;
    		margin: 0 auto;
    		max-width: 60rem;
		}
		
		.calculatedValue {
			text-align: center;
    		padding: 1rem 0 0 ;
    		border-top: 1px solid rgba(255,255,255,0.25);
    	}
    	
    	.resultCenter h2 {
			display: block;
			font-size: 2.2rem;
    		font-weight: 800;
    		text-align: center;
    		line-height: 1.25;
    		color: rgba(255,255,255,1);
    		padding: 3rem 0 2.5rem 0;
		}
		
		.calculatedValue .ng-hide ~ h3 {
			color: rgba(145,197,53,1); 
			margin-left:1rem;
		}
		
		.calculatedValue h3 {
			display: inline-block;
			position: relative;
			font-size: 8rem;
			font-weight: 300;
			color: rgba(64,164,118,1);
			color:rgba(255,87,34,1);
			line-height: 1;
			margin:0;    
		}
		
		.calculatedValue h3::before {
			position: absolute;
			top: 0;
			left: -2.2rem;
			content: "$";
			font-size: 4rem;
			font-style: italic;
			font-weight: 400;
		}
		
		.minusSign::before {
			display: inline-block;
			position: relative;
			top: 0.25rem;
    		right: 0.25rem;
			content:"–";
			font-size: 8rem;
			font-weight: 300;
			color:rgba(255,87,34,1);
			line-height: 0;
		}
		
		.minusSign + h3 { color:rgba(255,87,34,1); }
		
		
		/*  DPO / TSO FORM ==================== */
						
		.dpoValues-wrapper {
			background-color:rgba(249,249,249,1);
			padding-top:1rem;
			border-top-right-radius: 2rem;
			border-top-left-radius: 2rem;
		    margin: -2rem auto 0;
    		max-width: 60rem;
		}
		
		.ramA, .ramB { 
			padding:2.5rem 1.5rem 2.5rem 2rem;
			border-bottom:1px solid rgba(0,0,0,0.1);
		}
		
		.ramA a, .ramB a { 
			position:relative;
			color: rgba(74,144,226,1); 
		}
		
		.ramA a::after, .ramB a::after { 
			display:inline-block;
			position:absolute;
			right:-1.8rem;
			content:"?";
			font-size:0.9rem;
			font-weight:600;
    		color: rgba(255,255,255,0.9);
    		line-height: 1.5;
    		text-align: center;
    		background-color: rgba(74,144,226,1);
			border-radius:50%;
			width:1.4rem;
			height:1.4rem;
			box-sizing:border-box;
		}
		
		.dpoValues-wrapper label {
			display:inline-block;
			font-size:1.8rem;
			font-weight:300;
			color:rgba(0,0,0,0.54);
			width:11rem;
			vertical-align:middle;
			cursor:pointer;
		}
		
		.dpoValues-wrapper label strong {
			display:block;
			font-weight:600;
			color:rgba(0,0,0,1);
		}
		
		.dpoValues-wrapper input[type="number"] {
			display:inline-block;
			color:rgba(0,0,0,0.87);
			text-align:right;
			width:calc(100% - 12rem);
		}
		
		.dpoValues-wrapper input[type="number"].ng-pristine { color:rgba(0,0,0,0.54); }
		
		
		
		/*  ============================================================================================ */
		/*  SETUP SCREEN  ============================================================================== */
		/*  ============================================================================================ */	
		
		.settingsWrapper {
			position:relative;
			color:rgba(255,255,255,0.87);
			background-color: rgba(59,56,63,1);
			padding:6.4rem 0 0;
			height:100%;
			overflow-y: auto;
  			-webkit-overflow-scrolling: touch;		
  		}
		
		.settingsHeader {
		    position: fixed;
			top: 0;
			left: 45rem;
			background-color: rgba(48,46,50,1);
			border-bottom: 1px solid rgba(255,255,255,0.2);
			width: calc(100% - 45rem);
			height: 7.4rem;
			box-sizing: border-box;
			z-index:1;
		}
		
		.settingsHeader h2 {
    		font-size: 2.4rem;
    		font-weight: 800;
   		    line-height:3;
    		text-align: center;
    	}
		
		.settingsRow { 
			padding:2.4rem 3.6rem;
			border-bottom:0.1rem solid rgba(255,255,255,0.1);
			overflow:auto;
			clear:both; 
		}
		
		.settingsRow label { 
			display:inline-block;
			font-size:1.8rem;
			width:calc(100% - 17.4rem); 
			vertical-align:middle;
		}
		
		.settingsRow input { 
			display:inline-block;
			vertical-align:middle;
			text-align: right;
			color:rgba(255,255,255,1);
		    padding-right: 1rem;
		    margin-left:1rem;
			width:16rem; 
		    box-shadow: 0 0 1px rgba(255,255,255,0.34);
		    box-sizing: border-box;
		}
		
		.settingsButtons {
			text-align:center;
			padding: 2.5rem 0;
		}
		
		.settingsWrapper button.resetButton,
		.settingsWrapper button.submitButton {
			max-width:24rem;
    	}
		
		.settingsWrapper button.resetButton {
			color: rgba(255,255,255,0.87);
    		border-color: rgba(255,255,255,0.87);
    	}
		
		
		/*  ============================================================================================ */
		/*  HELP SCREEN  =============================================================================== */
		/*  ============================================================================================ */	

		.helpScreen {
			padding: 3.6rem 7.2rem;
			margin:0 auto;
			box-sizing: border-box;
			max-width:80rem;
			overflow-y: auto; /* has to be scroll, not auto */
  			-webkit-overflow-scrolling: touch;
		}
		
		.helpScreen p {
			font-size: 1.6rem;
			font-weight:300;
			line-height: 1.5;
			margin-bottom: 2rem;
		}
		
		.helpScreen ul li {
			font-size: 1.6rem;
			font-weight:300;
			line-height: 1.5;
			margin-bottom: 2rem;
			list-style-type: initial;
			margin-left: 5rem;
			margin-right: 3rem;
		}
				
				
		
		/*  ============================================================================================ */
		/*  ALERT MESSAGE  ============================================================================= */
		/*  ============================================================================================ */
		
		.alertBox {
			position:absolute;
			top:calc(50% - 10rem);
			left:calc(50% - 18rem);
			text-align:center;
			color:rgba(0,0,0,0.8);
			background:rgba(255,255,255,1);
			padding:1.8rem 1rem 0;
			border-radius:0.5rem;
			width:36rem;
			min-height:12rem;
			box-sizing:border-box;
		}
		
		.alertBox h3 {
			font-size:1.7rem;
			font-weight:600;
			margin-bottom:0.5rem;
		}
		
		.alertBox p {
			font-size:1.3rem;
			font-weight:400;
			margin-bottom:1.8rem;
		}
		
		.alertBox ul {
			border-top:1px solid rgba(77,77,77,0.2);
			margin:0 -1.6rem;
		}
		
		.alertBox li {
			display:inline-block;
			width:50%;
		}
		
		.alertBox li:first-child {
			font-weight:300;
			border-right:1px solid rgba(77,77,77,0.2);
			margin-right:-0.3rem;
		}
		
		.alertBox li:last-child {
			font-weight:600;
			text-transform:uppercase;
		}
		
		.alertBox a {
			display: inline-block;
			font-size: 1.6rem;
			line-height: 3.25;
			width: 100%;
		}
		
		



/*  ==================================================================================================== */
/*  END LARGE DEVICES, WIDE SCREENS (MIN-WIDTH:993PX)  ================================================= */
/*  ==================================================================================================== */