
		
	/* GLOBAL */
	
		html { height: 100%; }
		body { position: relative; height: 100%; margin: 0; padding: 0; font-family: 'Trebuchet MS'; }
		img { max-width: 100%; }
						
		.center { text-align: center; }	
											
		a, button { transition: all 0.4s; text-decoration: none; }
		a:focus, a:hover { color: #000; text-decoration: none; }
				
		.custom-table { display: table; width: 100%; height: 100%; }
		.custom-table-cell { display: table-cell; float: none; width: 100%; height: 100%; vertical-align: top; }
		.v-mid { vertical-align: middle; }
		
		.text { position: absolute; top: 100px; left: 50px; }
		.icon { position: absolute; right: 50px; bottom: 120px; width: 300px; height: 264px; background-color: #ea8a00; }				
		.color-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background-color: #ea8a00; z-index: 1; }
		
		h3 { color: #888; }
		h4 { margin-bottom: 0; }
		h5 font { color: #777; }
				
		.back { position: absolute; bottom: 20px; left: 50%; transform:translateX(-50%); text-align: center; z-index: 3; }
		.back h6 { margin-bottom: 5px; color: #333; }
		
		
		/* SWITCH STYLES */
		
			a { color: #ea7900; }	
			.text h1 { color: #ea8a00; }		
			.icon { background-color: #ea8a00; }		
			.color-bar { background-color: #ea8a00; }		
			
			.colors { position: absolute; top: 20px; left: 50%; transform:translateX(-50%); padding-left: 0; margin: 0; }
			.colors span { vertical-align: top; line-height: 42px; margin-right: 10px; }
			.colors li { position: relative; display: inline-block; }
			
			.colors input[type=radio] { position: absolute; visibility: hidden; }
			.colors input[type="radio"] + label { position: relative; padding: 0 0 0 45px; margin: 0; }
			.colors input[type="radio"] + label:hover { cursor: pointer; }
			.colors input[type="radio"] + label:before { content: ""; display: block; position: absolute; top: 0; left: 0; 
				width: 26px; height: 26px; border-radius: 50%; border-width: 8px; border-style: solid; border-color: #fff; 
				transition: all 0.4s; box-shadow: 0px 0px 4px #aaa; }			
			
			.colors input[type="radio"]#color-orange + label:before { background-color: #ea8a00; }
			.colors input[type="radio"]#color-orange:checked + label:before { border-color: #ea8a00; }
			
			.colors input[type="radio"]#color-red + label:before { background-color: #f12823; }
			.colors input[type="radio"]#color-red:checked + label:before { border-color: #f12823; }
			
			.colors input[type="radio"]#color-green + label:before { background-color: #16e896; }
			.colors input[type="radio"]#color-green:checked + label:before { border-color: #16e896; }
			
			.colors input[type="radio"]#color-blue + label:before { background-color: #16a5e8; }
			.colors input[type="radio"]#color-blue:checked + label:before { border-color: #16a5e8; }
			
			.colors input[type="radio"]#color-grey + label:before { background-color: #999; }
			.colors input[type="radio"]#color-grey:checked + label:before { border-color: #999; }
			
			.colors button { background: #fff; padding: 3px 10px; border: 1px solid #aaa; position: relative; top: 10px; left: 10px; }
			.colors button:hover { background: #fff; border: 1px solid #000; cursor: pointer; }
		
			.body-orange a, .body-orange .text h1 { color: #ea8a00; }
			.body-orange .icon, .body-orange .color-bar { background-color: #ea8a00; }

			.body-red a, .body-red .text h1 { color: #f12823; }
			.body-red .icon, .body-red .color-bar { background-color: #f12823; }
			
			.body-green a, .body-green .text h1 { color: #16e896; }
			.body-green .icon, .body-green .color-bar { background-color: #16e896; }
			
			.body-blue a, .body-blue .text h1 { color: #16a5e8; }
			.body-blue .icon, .body-blue .color-bar { background-color: #16a5e8; }
			
			.body-grey a, .body-grey .text h1 { color: #999; }
			.body-blue .grey, .body-grey .color-bar { background-color: #999; }
	
	
	/* RESPONSIVE */
						
		@media (max-width: 768px) {
			.custom-table { display: block; width: 100%; height: auto; }
			.icon { width: 150px; height: 132px; right: 20px; }
			.icon img { width: 150px; }
			.colors { position: relative; display: block; text-align: center; }
			.colors span { display: none; }
			.colors input[type="radio"] + label { padding: 0 0 0 33px; }
			.colors input[type="radio"] + label:before { width: 22px; height: 22px; border-width: 5px; }
			.colors button { top: 6px; }
			.text { position: relative; top: 50px; left: 0; padding-left: 20px; }
			h1 { font-size: 22px; }
			h3 { font-size: 15px; font-weight: normal; }
		}
		