body, input, textarea, select {
    	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, 	Arial, sans-serif;
	}
	
	body {
		background: linear-gradient(135deg,#727cf5 0,#8F75DA 160%);;
		text-align: center;
		color: #555;
		padding-bottom: 2em;
	}
	
	h1 {
    	margin-top: 5%;
    	color: #fff;
    	text-shadow: 0px 1px 6px #333333;
	}

	.examples {
		list-style-type: none;
		max-width: 900px;
		margin: 0 auto;
		text-align: left;
		padding-left: 0;
	}
	
	examples li {
   	 padding-left: 0;
	}
	
	.examples .ui {
    	width: 18.75rem;
   	 	text-align: center;
	}
	
	.examples .ui, .examples pre {
    	display: inline-block;
    	vertical-align: top;
		float: left;
	}
	
	.examples .ui p {
    	text-align: center;
    	margin-bottom: 0;
    	padding: 0 2em;
	}
	
	p {
		max-width: 51.625rem;
		margin: 1.875em auto;
		font-size: 1.0625em;
		font-weight: 300;
		line-height: 1.5625em;
		text-align: left;
	}
	
	.examples .ui button {
    	margin-top: .75em;
	}
	
	
	.btnmsg {
		background: #fff;
		color: #727cf5;
		border: 0;
		padding: .8em 1.5em;
		-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
    	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
		font-size: 1.125em;
		font-weight: 500;
		border-radius: .25em;
		cursor: pointer;
		white-space: nowrap;
		width: 216px;
	}
	.examples .ui p {
		display: none;
	}
	.examples .ui {
		width: auto;
	}
	
	.btnmsg:hover {
		background: #e3eaef;
	}
	
	.btnmsg:active {
		background: #cbd8e1
	}
	
	.btnmsg:focus{
		-webkit-box-shadow: 0 0 0 0.2rem rgba(200,208,214,.5);
    	box-shadow: 0 0 0 0.2rem rgba(200,208,214,.5);
	}

	@media (min-width: 769px){

	ul li {
		position: absolute;
	}
	ul li:first-child {
		left: 10%;
		top: 28%;
	}
	ul li:nth-child(2) {
		left: 50%;
		margin-left: -108px;
		top: 28%;
	}
	ul li:nth-child(3) {
		right: 10%;
		top: 28%;
	}
	ul li:nth-child(4) {
		bottom: 30%;
		margin-top: -26px;
		left: 10%;
	}
	ul li:nth-child(5) {
		bottom: 30%;
		margin-top: -26px;
		left: 50%;
		margin-left: -108px;
	}
	ul li:last-child {
		right: 10%;
		bottom: 30%;
	}

	}

	@media (max-width: 768px) {

	.examples{
	margin-top: 28px
	}
	ul li {
		position: relative;
		float: left;
		margin-bottom: 1em;
	}
	.examples .ui p {    
		display: none;
	}

	}