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

/*  ==================================================================================================== */
/*  START EXTRA SMALL DEVICES, PHONES (MAX-WIDTH: 374PX)  ============================================== */
/*  ==================================================================================================== */


		/*  ============================================================================================ */
		/*  GENERIC STYLES  ============================================================================ */
		/*  ============================================================================================ */
		
		button.resetButton,
		button.submitButton {
			font-size:1.6rem;
		}
		
		
		
		/*  ============================================================================================ */
		/*  BASE STYLES  =============================================================================== */
		/*  ============================================================================================ */	
		

		
		
	
		/*  ============================================================================================ */
		/*  BOX-CONTENT : BORDER-BOX ELEMENTS  ========================================================= */
		/*  ============================================================================================ */
		
		
		
		
		
		/*  ============================================================================================ */
		/*  SPLASH WRAPPER AND SIDE BAR  =============================================================== */
		/*  ============================================================================================ */	
		
		
		
		
		
		/*  ============================================================================================ */
		/*  SETUP STEPS  =============================================================================== */
		/*  ============================================================================================ */
		
		.clipCircle {
			width: 13rem;
			height: 13rem;
		}
		
		.setupCenter p { margin-bottom: 0.5rem; }
		
		.pagination { bottom:1.75rem; }
		

		
		/*  ============================================================================================ */
		/*  MARGINAL VALUE CALCULATOR  ================================================================= */
		/*  ============================================================================================ */
		
		/*  DPO / TSO SELECTOR ==================== */
		
		.calculatorType { margin-bottom: 2rem; }
		
		.segmentedBtn label { font-size: 1rem; }
		
		/*  DPO / TSO RESULT ====================== */
		
		.marginalValue-result {	height:12.5rem; }
		
		.resultCenter h2 { font-size: 1.7rem; }
		
		.resultCenter h2.result-present { 
			font-size: 1.3rem; 
			padding: 0.25rem 1rem 0 0;
    		margin: 0 0.5rem 0 0;
		}
		
		.calculatedValue h3 { font-size: 3.8rem; }
		
		.calculatedValue h3::before {
			left: -1.2rem;
			font-size: 2.3rem;
		}
		
		.minusSign::before { 
			top: initial; 
			font-size:3.2rem;
		}
		
		/*  DPO / TSO FORM ======================== */
		
		.dpoValues-wrapper { padding-top: 0.5rem; }
				
		.dpoValues-wrapper label { font-size: 1.7rem; }
		
		.settingsButtons { padding: 1.5rem 0; }
		
		
		/*  ============================================================================================ */
		/*  SETUP SCREEN  ============================================================================== */
		/*  ============================================================================================ */	
		
		.settingsRow { padding:1.1rem 1.2rem; }
		
		.settingsRow label { 
			font-size:1.2rem; 
			width:calc(100% - 12.4rem);
		}
		
		.settingsRow input { 
			font-size:3.6rem; 
			width:11rem;
		}
		
		
		
		/*  ============================================================================================ */
		/*  HELP SCREEN  =============================================================================== */
		/*  ============================================================================================ */	
		
		
		
		/*  ============================================================================================ */
		/*  ALERT MESSAGE  ============================================================================= */
		/*  ============================================================================================ */
		
		.alertBox {
			left:calc(50% - 13rem);
			width:26rem;
		}
		
		
/*  ==================================================================================================== */
/*  END EXTRA SMALL DEVICES, PHONES (MAX-WIDTH: 320PX)  ================================================ */
/*  ==================================================================================================== */	
}



/*  ============================================================================================ */
/*  CUSTOM MOBILE SNAP POINTS - PORTRAIT ======================================================= */
/*  ============================================================================================ */	
	
	@media only screen 
	and (min-device-width: 414px)
	and (max-height: 736px)
	and (orientation : portrait) {
		.titleWrapper			 		{ vertical-align:top; }
		.titleCenter 			 		{ height:initial; }
		.titleCenter h1 		 		{ font-size: 8rem; padding-top: 8rem; margin-top:12rem; width: 28rem; height: 28rem; }
    	.rmppLogo 				 		{ bottom:1rem; left: calc(50% - 9rem); width: 18rem; height:6rem; }
		.splashNav 				 		{ bottom:14rem; }
		.splashNav a			 		{ font-size:1.5rem; line-height:2.75;}
		.marginalValue-result 	 		{ padding: 2.8rem 1.5rem 0; height: 13.5rem; }
		.calculatorType 		 		{ margin:0 auto 2rem; }
		button.icons8-settings,
		button.icons8-ask-question		{ top:2.1rem; }	
		.setupCenter 					{ margin-top: 0; } 
		.settingsWrapper				{ padding: 7.4rem 0 2.4rem; }
		.settingsHeader					{ height:7.4rem; }
		.settingsHeader h2 				{ line-height: 4.2; }
		button.icons8-delete 			{ top: 2.1rem; }
	}

	@media only screen 
	and (min-device-width: 375px)
	and (max-height: 667px)
	and (orientation : portrait) {	
		.titleWrapper			 		{ vertical-align:top; }
		.titleCenter 			 		{ height:initial; }
		.titleCenter h1 		 		{ font-size: 7rem; padding-top: 7rem; margin-top:12rem; width: 25rem; height: 25rem; }
    	.rmppLogo 				 		{ bottom:0.5rem; left: calc(50% - 8rem); width: 16rem; height:6rem; }
		.splashNav 				 		{ bottom:12rem; }
		.splashNav a			 		{ font-size:1.5rem; }		
		.setupCenter 			 		{ margin-top: 0; } 
		.marginalValue-result 	 		{ padding: 2.8rem 1.5rem 0; height: 13.5rem; }
		.calculatorType 		 		{ margin:0 auto 2rem; }
		button.icons8-settings,
		button.icons8-ask-question		{ top:2rem; }
		.settingsWrapper				{ padding: 7.4rem 0 2.4rem; }
		.settingsHeader					{ height:7.4rem; }
		.settingsHeader h2 				{ line-height: 4.2; }
		button.icons8-delete 			{ top: 2.1rem; }		
	} 

	@media only screen 
	and (min-device-width: 414px)
	and (max-height: 628px)
	and (orientation : portrait) { 
		.titleWrapper			 		{ vertical-align:top; }
		.titleCenter 			 		{ height:initial; }
		.titleCenter h1 		 		{ font-size: 7.5rem; padding-top: 7.75rem; margin-top:6.5rem; width: 28rem; height: 28rem; }
    	.rmppLogo 				 		{ bottom:8rem; left: calc(50% - 9rem); width: 18rem; height:6rem; }
		.splashNav 				 		{ bottom:12rem; }
		.splashNav a			 		{ font-size:1.5rem; }
		.setupCenter 			 		{ margin-top: -10rem; }
		.marginalValue-result 	 		{ padding: 1.8rem 1.5rem 0; height: 12.5rem; }
		.calculatorType 		 		{ margin:0 auto 2rem; }
		button.icons8-settings,
		button.icons8-ask-question		{ top:1rem; }
		.settingsWrapper 		 		{ padding: 6.4rem 0 2.4rem; height: calc(100% - 6.4rem); }
		.settingsHeader					{ height:6.4rem; }
		.settingsHeader h2 				{ line-height: 3.2; }
		button.icons8-delete 			{ top: 1.1rem; }
	}

	@media only screen 
	and (min-device-width: 320px) 
	and (max-height: 568px)
	and (orientation : portrait) { 
		.splashNav 				 		{ bottom:0; }
		.titleWrapper			 		{ vertical-align:top; }
		.titleCenter 			 		{ height:initial; }
		.titleCenter h1 		 		{ font-size: 6rem; padding-top: 6rem; margin-top:10rem; width: 22rem; height: 22rem; }
    	.rmppLogo 				 		{ bottom:0.5rem; left: calc(50% - 8rem); width: 16rem; height:6rem; }
		.splashNav 				 		{ bottom:10rem; }
		.splashNav a			 		{ font-size:1.4rem; }		
		.marginalValue-result 	 		{ padding: 2.8rem 1.5rem 0; height: 13.5rem; }
		.calculatorType 		 		{ margin:0 auto 2rem; }
		button.icons8-settings,
		button.icons8-ask-question		{ top:2rem; }
		.settingsWrapper				{ padding: 7.4rem 0 2.4rem; }
		.settingsHeader					{ height:7.4rem; }
		.settingsHeader h2 				{ line-height: 4.2; }
		button.icons8-delete 			{ top: 2.1rem; }	
	}

	@media only screen 
	and (min-device-width: 375px) 
	and (max-height: 559px)
	and (orientation : portrait) {
		.splashWrapper			 		{ background-position: 0 -8rem; }
		.titleWrapper			 		{ vertical-align:top; }
		.titleCenter 			 		{ height:initial; }
		.titleCenter h1 		 		{ font-size: 7rem; padding-top: 7rem; margin-top:7rem; width: 25rem; height: 25rem; }
    	.rmppLogo 				 		{ bottom:7rem; left: calc(50% - 8rem); width: 16rem; height:6rem; }
		.splashNav 				 		{ bottom:10rem; }
		.splashNav a			 		{ font-size:1.4rem; }
		.setupCenter 					{ margin-top: -7rem; }
		.clipCircle						{ display:inline-block; }
		.marginalValue-result 	 		{ padding: 1.8rem 1.5rem 0; height: 12.5rem; }
		.calculatorType 		 		{ margin:0 auto 2rem; }
		button.icons8-settings,
		button.icons8-ask-question		{ top:1rem; }
		.dpoValues-wrapper		 		{ bottom:0; }
		.settingsWrapper 		 		{ padding: 6.4rem 0 2.4rem; height: calc(100% - 6.4rem); }
		.settingsHeader					{ height:6.4rem; }
		.settingsHeader h2 				{ line-height: 3.2; }
		button.icons8-delete 			{ top: 1.1rem; }		
	}
	
	@media only screen 
	and (min-device-width: 360px) 
	and (max-height: 640px)
	and (orientation : portrait) {
		.settingsButtons { padding: 1.5rem 0; }
	}

	@media only screen 
	and (min-device-width: 320px) 
	and (max-height: 480px)
	and (orientation : portrait) { 
		.titleWrapper			 		{ vertical-align:top; }
		.titleCenter 			 		{ height:initial; }
		.titleCenter h1 		 		{ font-size: 6rem; padding-top: 6rem; margin-top:5rem; width: 22rem; height: 22rem; }	
    	.rmppLogo 				 		{ bottom:-0.5rem; left: calc(50% - 7rem); width: 14rem; height:6rem; }
		.splashNav 				 		{ bottom:7.5rem; }
		.splashNav a			 		{ font-size:1.3rem; }		
		.setupCenter 			 		{ margin-top: 0; } 
		.clipCircle				 		{ display:inline-block; }
		.marginalValue-wrapper   		{ background-color: rgba(48,46,50,1); background-image:initial; }
		.marginalValue-wrapper::before 	{ background-color:initial; }
		.marginalValue-result 	 		{ padding: 2.8rem 1.5rem 0; height: 13.5rem; }
		.calculatorType 		 		{ margin:0 auto 2rem; }
		button.icons8-settings,
		button.icons8-ask-question		{ top:2rem; }
		.ramA, .ramB 					{ padding: 2.25rem 1.5rem 2.25rem 2rem; }
		.settingsWrapper				{ padding: 7.4rem 0 2.4rem; }
		.settingsHeader					{ height:7.4rem; }
		.settingsHeader h2 				{ line-height: 4.2; }
		button.icons8-delete 			{ top: 2.1rem; }			
	}
	

	@media only screen 
	and (min-device-width: 320px) 
	and (max-height: 460px)
	and (orientation : portrait) { 
		.splashWrapper			 		{ background-position: 0 -8rem; }
		.titleWrapper			 		{ vertical-align:top; }
		.titleCenter 			 		{ height:initial; }	    
		.titleCenter h1 		 		{ font-size: 6rem; padding-top: 6rem; margin-top:4.5rem; width: 22rem; height: 22rem; }	
    	.rmppLogo 				 		{ bottom:6rem; left: calc(50% - 7rem); width: 14rem; height:6rem; }
		.splashNav 				 		{ bottom:7rem; }
		.splashNav a			 		{ font-size:1.3rem; }
		.setupCenter	 		 		{ margin-top: -8rem; } 
		.clipCircle				 		{ display:inline-block; }
		.marginalValue-result 	 		{ padding: 1.8rem 1.5rem 0; height: 12.5rem; }
		.calculatorType 		 		{ margin:0 auto 2rem; }
		button.icons8-settings,
		button.icons8-ask-question		{ top:1rem; }
		.dpoValues-wrapper		 		{ bottom:0; }
		.ramA, .ramB 			 		{ padding: 2.25rem 1.5rem 2.25rem 2rem; }
		.settingsWrapper 		 		{ padding: 6.4rem 0 2.4rem; height: calc(100% - 6.4rem); }
		.settingsHeader					{ height:6.4rem; }
		.settingsHeader h2 				{ line-height: 3.2; }
		button.icons8-delete 			{ top: 1.1rem; }			
	}


	@media only screen
	and (min-device-width: 320px) 
	and (max-height: 372px)
	and (orientation : portrait) { 
		.splashWrapper			 		{ background-position: 0 -10em; }
		.titleWrapper			 		{ vertical-align:top; }
		.titleCenter 			 		{ height:initial; }
    	.titleCenter h1 		 		{ font-size: 4.75rem; padding-top: 4.75rem; margin-top:2.5rem; width: 17rem; height: 17rem; }
    	.rmppLogo 				 		{ bottom:6rem; left: calc(50% - 7rem); width: 14rem; height:6rem; }
		.splashNav 				 		{ bottom:6rem; }
		.splashNav a			 		{ font-size:1.3rem; }
		.setupCenter 			 		{ margin-top: -9rem; }
		.clipCircle				 		{ display:none; }
		.marginalValue-wrapper 	 		{ background-image:initial; }
		.marginalValue-result 	 		{ padding: 1.8rem 1.5rem 0; height: 12.5rem; }
		.calculatorType 		 		{ margin:0 auto 2rem; }
		button.icons8-settings,
		button.icons8-ask-question		{ top:1rem; }
		.dpoValues-wrapper		 		{ border-radius:initial; }
		.ramA, .ramB 			 		{ padding: 1.45rem 1.5rem 1.45rem 2rem; }
		.settingsWrapper 		 		{ padding: 6.4rem 0 2.4rem; height: calc(100% - 6.4rem); }
		.settingsHeader					{ height:6.4rem; }
		.settingsHeader h2 				{ line-height: 3.2; }
		button.icons8-delete 			{ top: 1.1rem; }			
	}