/* 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; }
		
		.icon { position: relative; width: 200px; height: 200px; display: inline-block; }
		.icon h1 { position: absolute; z-index: 2; top: 29%; left: 50%; transform: translate(-50%, -50%); line-height: 38px; }
		.icon h1 font { font-size: 44px; }
		.icon img { width: 200px; }
		.ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; z-index: -1;
			-webkit-border-radius: 100%; border-radius: 100%; border-style: solid; border-width: 20px; background: transparent; }
		
		.grey { display: block; width: 100%; background: #111; color: #fff; margin: 0 0 30px 0; padding: 30px 0; }
		.grey h3 { color: #aaa; }
		
		h4 { margin-bottom: 0; }
		h5 font { color: #777; }
		
		.pattern-1 { background: url('images/black-twill.png'); }
		
		.back { position: absolute; bottom: 20px; left: 50%; transform:translateX(-50%); text-align: center; }
		.back h6 { margin-bottom: 5px; color: #333; }
		
		
		/* SWITCH STYLES */
		
			a { color: #ea7900; }	
			.grey h1 { color: #ea8a00; }		
			.icon h1 { color: #ea8a00; }		
			.ring { border-color: #fda400; }
			
			.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 .grey h1 { color: #ea8a00; }
			.body-orange .ring { border-color: #ea8a00; }
			
			.body-red a, .body-red .grey h1 { color: #f12823; }
			.body-red .ring { border-color: #f12823; }
			
			.body-green a, .body-green .grey h1 { color: #16e896; }
			.body-green .ring { border-color: #16e896; }
			
			.body-blue a, .body-blue .grey h1 { color: #16a5e8; }
			.body-blue .ring { border-color: #16a5e8; }
			
			.body-grey a, .body-grey .grey h1 { color: #999; }
			.body-grey .ring { border-color: #999; }
		
				
	/* ANIMATIONS */
	
		@-webkit-keyframes Rotate {
			0% {-webkit-transform: rotateZ(0deg);}
			20% {-webkit-transform: rotateZ(360deg);}
			100% {-webkit-transform: rotateZ(360deg);}
		}
		@keyframes Rotate {
			0% {transform: rotateZ(0deg);}
			20% {transform: rotateZ(360deg);}
			100% {transform: rotateZ(360deg);}
		}
		.rotate {
			-webkit-animation: Rotate 6s linear infinite;
			animation: Rotate 6s linear infinite;
			margin-bottom: 30px;
		}
		
	
	/* RESPONSIVE */
						
		@media (max-width: 768px) {
			.colors { position: relative; display: block; text-align: center; }
			.custom-table { display: block; width: 100%; height: auto; text-align: center; }
			.custom-table-cell { display: block; width: 100%; height: auto; text-align: center; }
			.v-mid { position: relative; top: 50px; }
			
			.icon { width: 100px; height: 100px; }
			.icon img { width: 100px; }
			.ring  { width: 26px; height: 26px; border-width: 10px; }
			.rotate { margin-bottom: 10px; }
			
			.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; }
			h1 { font-size: 22px; }
			h3 { font-size: 15px; font-weight: normal; }
			.back { position: relative; display: block; left: auto; transform: none; top: 30px; }
		}