@media only screen and (max-width: 480px) {

	.container {
	    display: block;
	    width: 100%;
	    overflow: hidden;
	}
	#customersinfo {
		display: -webkit-flex;
		display: flex;
	}

	#main-left {
		display:none;
	}

	#main-right {
		background: #D9E5FF;
		width: 100%;
	    background-size:cover;
		height: 500px;
		overflow: auto;
	}

	.left-menu h1 {
		position: relative;
		padding: 0.3em 0.5em;
		background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
		background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
		color: #495193;
	}

	ol.sample1{
		counter-reset:list;
		list-style-type:none;
		font: 14px/1.6 'arial narrow', sans-serif;
		padding:0;
	}
	ol.sample1 li{
		position:relative;
		color: #fff;
		padding: 0 0 0 30px;
		margin: 7px 0 7px 0px;
		font-weight: bold;
		font-size: 14px;
		line-height: 30px;
		background: #77b4fd;
		border-radius: 20px;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		-ms-transition: 0.3s;
		transition: 0.3s;
	}
	ol.sample1 li:before{
		counter-increment: list;
		content: "";
		display: block;
		position: absolute;
		left: 10px;
		height: 10px;
		width: 10px;
		border-radius: 50%;
		background: #fff;
		top: 50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	ol.sample1 li:hover{
		background: #8393ca;
	}

	#main-right h1 {
		color: #2d8fdd;
		border-left: solid 6px #2d8fdd;
		background: #f1f8ff;
		margin-bottom: 3px;
		line-height: 1.5;
		padding: 5px;
		list-style-type: none!important;
		margin-top: 5px;
		font-size: 18px;
	}

	#main-right h2 {
		color: #6594e0;
		border-bottom: dashed 2px #6594e0;
		font-size: 16px;
	}

	#main-right dt {
		margin-top: 1em;
		padding: 0 1em;
		color: #FFF;
		text-shadow: 1px 1px rgba(0,0,0,.4);
		background-color: #de8a9d;
	}

	#main-right dd {
		padding: 0 1em;
		margin-left: 0;
		font-size: 15px;
		border-width: 0 1px 1px;
		border-style: none solid solid;
		border-color: #de8a9d;
	}

	article {
	    display: flex;
		flex-wrap : wrap;
	    align-items:stretch;
	}

	article h1 {
	    width: calc(100%);
	}

	article h2 {
	    width: calc(100%);
	}

	section.right{
	    width: 44%;
	    padding: 1%;
	    overflow: hidden;
	}

	section.center{
		width: 4%;
	    padding: 1%;
		margin-top: 20px;
	    overflow: hidden;
	}

	section.left{
	    width: 44%;
	    padding: 1%;
	    overflow: hidden;
	}

	.before{
		color: #000000;
		font-size: 16px;
		font-weight: bold;
		text-Align:center;
	}

	.after{
		color: #ff6347;
		font-size: 16px;
		font-weight: bold;
		text-Align:center;
	}

	.boxbefore {
	    padding: 0.5em 1em;
	    margin: 0.5em 0;
	    color: #000000;
		font-size: 13px;
	    background: #d3d3d3;
	    border-bottom: solid 3px #c0c0c0;
	    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	    border-radius: 9px;
	}
	.boxbefore p {
	    margin: 0; 
	    padding: 0;
	}

	.boxafter {
	    padding: 0.5em 1em;
	    margin: 0.5em 0;
	    color: #ff6347;
		font-size: 13px;
	    background: #d3d3d3;
	    border-bottom: solid 3px #c0c0c0;
	    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	    border-radius: 9px;
	}
	.boxafter p {
	    margin: 0; 
	    padding: 0;
	}


	.btn-circle-fishy {
	  display: inline-block;
	  text-decoration: none;
	  color: #FFF;
	  width: 30px;
	  height: 30px;
	  line-height: 30px;
	  border-radius: 50%;
	  text-align: center;
	  overflow: hidden;
	  background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
	  transition: .4s;
	}

	.btn-circle-fishy:hover {
	  -webkit-transform: rotate(10deg);
	  transform: rotate(10deg);
	}
}

@media screen and (min-width:768px) {

	.container {
	    display: block;
	    width: 930px;
	    overflow: hidden;
	}
	#customersinfo {
		display: -webkit-flex;
		display: flex;
	}

	#main-left {
		background: #E6FFE9;
		margin-bottom: 10px;
	    font-size: 18px;
	    font-weight: 600;
		width: 250px;
	}
	#main-right {
		background: #D9E5FF;
		width: 680px;
	    background-size:cover;
		height: 500px;
		overflow: auto;
	}

	#main-left ,
	#main-right {
		padding: 2%;
		border-radius: 10px;
	}

	.left-menu h1 {
		position: relative;
		padding: 0.3em 0.5em;
		background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
		background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
		color: #495193;
	}

	ol.sample1{
		counter-reset:list;
		list-style-type:none;
		font: 14px/1.6 'arial narrow', sans-serif;
		padding:0;
	}
	ol.sample1 li{
		position:relative;
		color: #fff;
		padding: 0 0 0 30px;
		margin: 7px 0 7px 0px;
		font-weight: bold;
		font-size: 14px;
		line-height: 30px;
		background: #77b4fd;
		border-radius: 20px;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		-ms-transition: 0.3s;
		transition: 0.3s;
	}
	ol.sample1 li:before{
		counter-increment: list;
		content: "";
		display: block;
		position: absolute;
		left: 10px;
		height: 10px;
		width: 10px;
		border-radius: 50%;
		background: #fff;
		top: 50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	ol.sample1 li:hover{
		background: #8393ca;
	}

	#main-left a {
	  position: relative;
	  display: inline-block;
	  text-decoration: none;
	  color: #5507FF;
	}

	#main-right h1 {
		color: #2d8fdd;
		border-left: solid 6px #2d8fdd;
		background: #f1f8ff;
		margin-bottom: 3px;
		line-height: 1.5;
		padding: 5px;
		list-style-type: none!important;
		margin-top: 5px;
		font-size: 18px;
	}

	#main-right h2 {
		color: #6594e0;
		border-bottom: dashed 2px #6594e0;
		font-size: 16px;
	}

	#main-right dt {
		margin-top: 1em;
		padding: 0 1em;
		color: #FFF;
		text-shadow: 1px 1px rgba(0,0,0,.4);
		background-color: #de8a9d;
	}

	#main-right dd {
		padding: 0 1em;
		margin-left: 0;
		font-size: 15px;
		border-width: 0 1px 1px;
		border-style: none solid solid;
		border-color: #de8a9d;
	}

	article {
	    display: flex;
		flex-wrap : wrap;
	    align-items:stretch;
	}

	article h1 {
	    width: calc(100%);
	}

	article h2 {
	    width: calc(100%);
	}

	section.right{
	    width: 44%;
	    padding: 1%;
	    overflow: hidden;
	}

	section.center{
		width: 4%;
	    padding: 1%;
		margin-top: 20px;
	    overflow: hidden;
	}

	section.left{
	    width: 44%;
	    padding: 1%;
	    overflow: hidden;
	}

	.before{
		color: #000000;
		font-size: 16px;
		font-weight: bold;
		text-Align:center;
	}

	.after{
		color: #ff6347;
		font-size: 16px;
		font-weight: bold;
		text-Align:center;
	}

	.boxbefore {
	    padding: 0.5em 1em;
	    margin: 0.5em 0;
	    color: #000000;
		font-size: 13px;
	    background: #d3d3d3;
	    border-bottom: solid 3px #c0c0c0;
	    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	    border-radius: 9px;
	}
	.boxbefore p {
	    margin: 0; 
	    padding: 0;
	}

	.boxafter {
	    padding: 0.5em 1em;
	    margin: 0.5em 0;
	    color: #ff6347;
		font-size: 13px;
	    background: #d3d3d3;
	    border-bottom: solid 3px #c0c0c0;
	    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	    border-radius: 9px;
	}
	.boxafter p {
	    margin: 0; 
	    padding: 0;
	}


	.btn-circle-fishy {
	  display: inline-block;
	  text-decoration: none;
	  color: #FFF;
	  width: 30px;
	  height: 30px;
	  line-height: 30px;
	  border-radius: 50%;
	  text-align: center;
	  overflow: hidden;
	  background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
	  transition: .4s;
	}

	.btn-circle-fishy:hover {
	  -webkit-transform: rotate(10deg);
	  transform: rotate(10deg);
	}
}