*{
    margin:0px;
    padding:0px;
}
html {
	height: 100%;
  }
body {
	min-height: 100%;
  }
#left{
    width:50%;
    height:100vh;
    float:left;
    background-color:white;
	position:relative;
}
#right{
    width:50%;
    height:100vh;
    float:left;
    background:url(./patron.jpg);
	position:relative;
}

#left img{
	position:absolute;
	top:50%;
	margin-top:-95px;
	left:50%;
	margin-left:-208px;
}

#right img{
	position:absolute;
	top:50%;
	margin-top:-95px;
	left:50%;
	margin-left:-300px;
}

@media (max-width: 767px) and (orientation : portrait) {
	#left{
		width:100%;
		height:50vh;
		float:left;
		background-color:white;
		position:relative;
	}
	#right{
		width:100%;
		height:50vh;
		float:left;
		background:url(./patron.jpg);
		position:relative;
	}
	#left img{
		position:absolute;
		top:40%;
		margin-top:0px !important;
		left:25%;
		width:50%;
		margin-left:0 !important;
	}
	
	#right img{
		position:absolute;
		top:40%;
		margin-top:0px !important;
		left:15%;
		width:70%;
		margin-left:0 !important;
	}
}
@media (max-width: 767px) and (orientation : landscape) {
	#left{
		width:50%;
		height:100vh;
		float:left;
		background-color:white;
		position:relative;
	}
	#right{
		width:50%;
		height:100vh;
		float:left;
		background:url(./patron.jpg);
		position:relative;
	}
	
	#left img{
		position:absolute;
		top:65%;
		left:25%;
		width:50%;
		margin-left:0 !important;
	}
	
	#right img{
		position:absolute;
		top:65%;
		margin-top:-95px;
		width:70%;
		left:15%;
		margin-left:0px !important;
	}
}