/*html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}*/

body { margin: 0 auto; background-color: #000000; }

header {
	background-color: #FF0000;
	text-align: center;

	background-image: linear-gradient(right , #FFFFFF 1%, #000000 80%);
	background-image: -o-linear-gradient(right , #FFFFFF 1%, #000000 80%);
	background-image: -moz-linear-gradient(right , #FFFFFF 1%, #000000 80%);
	background-image: -webkit-linear-gradient(right , #FFFFFF 1%, #000000 80%);
	background-image: -ms-linear-gradient(right , #FFFFFF 1%, #000000 80%);

	background-image: -webkit-gradient(
		linear,
		right top,
		left top,
		color-stop(0.01, #FFFFFF),
		color-stop(0.8, #000000)
	);
	position: relative; 
	clear: both;
	margin-left: 5em;
	margin-right: 5em;
}

header {  
	border: 1px solid  #ccc; 
	padding: 1.25em; 
	margin: .5em; 
	margin-left: 5em;
	margin-right: 5em;
	margin-top: 3ex;
	border-radius: 30px;
}

.left-column, .right-column {
	border: 1px solid  #ccc; 
	padding: 0; 
	padding-top: 3ex;
	margin: 0; 
	margin-left: 0;
	margin-right: 0;
	border-radius: 30px;
}

.inline-items {
  margin-top: 0;
}

.columns-container { 
		float: left;
		width: 100%;
		margin: 0;
		margin-top: 5ex;
		/*background-color: #FFFF00;*/
	}

.left-column { 
	background-color: #00FF00;
	float:left;
	text-align: center;
	color: #000000;
	width: 20.0em;
	margin-left: 5em;
 }

.right-column { 
	background-color: #0000FF;
	float: right;
	text-align: center;
	color: #FFFFFF;
	width: 20.0em;
	margin-right: 5em;
 }   


/* MEDIA QUERIES  small*/
@media screen and (max-width: 51.0em ) {

	.columns-container, header { 
		float: left;
		width: 100%;
		/*background-color: #FF0000;*/
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0px;
		margin-top: 1ex;
	}

  .left-column, .right-column { 
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;	
		border-radius: 0px;	
		margin-top: 1ex;
		padding-top: 2ex;
  }
  
}