.device-background {
	background-image: url('../img/responsive/device-background.png');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 600px auto;
	min-height: 600px;
	position: relative;
}  

.device-background::after {
    content: "";      /* Required for the pseudo-element to exist */
    display: table;   /* Creates a block-level element for clearing */
    clear: both;      /* Clears both left and right floats */
}

.device-background iframe { 
	position: absolute;
	z-index: 0;
	top: 54px;
	left: 19px;
	width: 512px;
	height: 904px;
	border: 0;
	
  transform: scale(1.0); /* 710px / 1000px = 0.71 scale factor */
  transform-origin: top left; /* Ensures scaling starts from the top-left corner */
  
  /* Add vendor prefixes for maximum browser compatibility */
  -webkit-transform: scale(0.5);
  -webkit-transform-origin: top left;
  -moz-transform: scale(0.5);
  -moz-transform-origin: top left;
  -o-transform: scale(0.5);
  -o-transform-origin: top left;	
}

.device-background span:nth-of-type(1) { 
	position: absolute;
	z-index: 100;
	top: 518px;
	left: 60px;
	display: block;
	width: 180px;
	height: 12px;
	border: 0;
	font-size: 10px;
	color: #f9f9f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-background span:nth-of-type(2) { 
	position: absolute;
	z-index: 100;
	top: 33px;
	left: 40px;
	display: block;
	width: 30px;
	height: 12px;
	border: 0;
	font-size: 10px;
	font-weight: bold;
	color: #f9f9f9;
	text-align: left;
}

.device-background div { 
	position: absolute;
	z-index: 0;
	top: 0px;
	right: 0px;
	border: 0;
	font-size: 10px;
	font-weight: bold;
	color: #f9f9f9;
	text-align: left;
	width: 800px;	
    background-color: rgba(18, 18, 19, 0.4);
    padding: 10px;	
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
}

.device-background div input { 
	margin-bottom: 0px;	
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

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

.device-background div { 
	width: 600px;	
}

}

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

.device-background div { 
	width: 400px;	
}

}

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

.device-background {
	height: 700px;
}

.device-background div { 
	bottom: 0px;
	left: 0px;
	top: unset;
	right: unset;
	width: 100%;
	height: unset;
}

}

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

#title .row .span12 h1 {
	font-size: 48px;
}

#title .row .span12 h5 {
	font-size: 18px;
}

.device-background {
	background-image: url('../img/responsive/device-background-478.png');
}

.device-background div {
	width: 285px;
}

.device-background div input { 
	width: 265px;
	margin-left: 10px;
}

}