body
{
        font-size: 16px;
        font-family: Arial;
}

.container
{
	border-left:none;
	border-right:none;
	text-align:center;
}


@media screen and (min-width: 200px) and (max-width: 659px)
{
	.desktop
	{
		display:none;
	}
   
  	.container div
   	{
		width:300px;
		padding: 5px;
		 /*   border-left: 1px dotted #ccc; */
		display: inline-block;
		vertical-align: top;
	} 

	.center 
	{
		max-width:649px; 
		display:block;
		margin: auto; 
   
		position: relative;
		top: 1%;
		left: 50%; 
		transform: translate(-50%, -0%);
    }
}

@media screen and (min-width: 660px) and (max-width: 999px)
{
   .desktop{display:none;}
   
  	.container div
   	{
		width:300px;
		padding: 10px;
		 /*   border-left: 1px dotted #ccc; */
		display: inline-block;
		vertical-align: middle;
	} 

	.center 
	{
      	max-width:999px; 
      	display:block;
      	margin: auto; 
   
      	position: relative;
    	top: 1%;
    	left: 50%; 
    	transform: translate(-50%, -0%);
    }
}


@media screen and (min-width: 1000px) and (max-width: 4000px)
{
	.mobile
	{
		display:none;
	}
	
	.container div
	{
		width:450px;
		padding: 10px;

		/*   border-left: 1px dotted #ccc; */
		display: inline-block;
		vertical-align: top;
	} 

	.center
	{
		border-style: outset;
		width:999px; 
	   	height:700px;
		display:inline-block;
		margin: auto;
		position: absolute; 
		top: 30%;
		left: 50%;  
		transform: translate(-50%, -30%);   
	}
}