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

	background: url('imgnew/bgn1.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.lostmodal{
    margin-top:-50px;
}
.journeymodal{
    margin-top:-40px;
}
.xraymodal{
    margin-top:-40px;
}
.avgmodal{
    margin-top:-40px;
}

.reweigingmodal{
    margin-top:-50px;
}
.psw{

    margin-left:30px

}
.overimg{
    margin-left:20px
}
.customimg{
    margin-left:20px;
    margin-top:-20px;
    max-width:500px;
}
.lostimg{
    margin-left:30px
}
.xrayimg{
    margin-left:30px
}
.medicalimg{
    margin-left:20px;
    margin-top:-40px;
}
.losttext{

    margin-left:50px;

}

.overtext{

    margin-left:40px

}

.journeytext{

    margin-left:40px;

}

.imgpsw{

    width:100%;margin-left:30px;
    margin-top:-40px;

}
.overviewmodal{
    margin-top:-40px;
}



.zoom:hover{

	-webkit-transform: scale(1.08);

	transform: scale(1.08);

}

.pesawat{

	position: absolute;

	left: 6%;

	top : 30%;

	max-width: 300px

}

.man{

	position: absolute;

	left: 38%;

	top: 28%;

	max-width: 120px

}

.lost{

	position: absolute;

	left:49%;

	top: 3%;

	max-width:220px 

}

.kios{

	position: absolute;

	top: 67%;

	left:5%;

	max-width: 230px

}

.bus{

	position: absolute;

	top:45%;

	left: 23%;

	max-width: 250px

}

.reweging{

	position: absolute;

	top:18%;

	left:65%;

	max-width: 220px

}

.avg{

	position: absolute;

	left: 53%;

	top:38%;

	max-width: 220px;

}

.xray{

	position: absolute;

	left:35%;

	top:58%;

	width: 300px

}

.handling {

	position: absolute;

	left:57%;

	top:70%;

	width: 250px



}



.clearence{

	position: absolute;

	left:73%;

	top:63%;

	width: 180px

}



.human {

	position: absolute;

	left:90%;

	top:57%;

	width: 60px

}



.medical{

	position: absolute;

	left:76%;

	top:7%;

	width: 250px

}

.logo {

	max-width: 200px;

	margin-left: 50px;

	margin-top: 20px;

}

h2 {

	color: #d51f36;

	margin-left: 50px;

	margin-top: 100px

}



.mc{

	position: absolute;

}



.truk{

	position: absolute;

}

.reweigingtext{

    margin-left:20px

}

.xraytext{

    margin-left:40px

}

.damagetext{

    margin-left:90px

}

.damageimage{

    width:100%;margin-left:40px;
    margin-top:-40px;

}

.custometext{

    margin-left:40px

}

.medicaltext{

    margin-left:20px

}    
}

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

    body{

  	background: url('img/bgmobile.png');

	background-repeat: no-repeat;

	background-size: cover;

    }
.damageimage{
    margin-left:20px;
}
    .pesawat{

	position: absolute;

	left: 6%;

	top : 20%;

	max-width: 150px

}

.losttext{

    left:50%;

    text-align:center;

}

.medicaltext{

    text-align:center;

}

.custometext{

    text-align:center;

}

.damagetext{

    text-align:center;

}

.overtext{

    text-align:center;

}

.journeytext{

   text-align:center;

}

.avgtext{

    text-align:center;

}

.xraytext{

    text-align:center;

}

.reweigingtext{

    text-align:center;

}

.imgpsw{

    width:100%;

}

.man{

	position: absolute;

	left: 85%;

	top: 38%;

	max-width: 50px

}

.lost{

	position: absolute;

	left:76%;

	top: 18%;

	max-width:90px 

}

.kios{

	position: absolute;

	top: 36%;

	

	max-width: 100px

}

.bus{

	position: absolute;

	top:25%;

	left: 42%;

	max-width: 130px

}

.reweging{

	position: absolute;

	top:33%;

	left:66%;

	max-width: 120px;

	z-index:0;

}

.avg{

	position: absolute;

	left: 57%;

	top:48%;

	max-width: 110px;

}

.xray{

	position: absolute;

	left:5%;

	top:41%;

	width: 150px

}

.handling {

	position: absolute;

	left:25%;

	top:52%;

	width: 140px



}



.clearence{

	position: absolute;

	left:68%;

	top:65%;

	width: 100px

}



.human {

	position: absolute;
	left:65%;
	top:80%;
	width: 45px

}



.medical{

	position: absolute;

	left:5%;

	top:68%;

	width: 140px

}

.logo {

	max-width: 90px;

	margin-left: 50px;

	margin-top: 20px;

}

.title{

    font-size:20px;

	color: #d51f36;

	margin-left: 50px;

	margin-top: -10px;

	font-weight:bold;

}



.mc{

	position: absolute;

}



.truk{

	position: absolute;
	max-width: 100px;

}

}

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

 .medical{

	position: absolute;

	left:18%;

	top:92%;

	width: 150px

}

.human {

	position: absolute;
	left:65%;
	top:10%;
	width: 60px
}

    

}



/*@media (min-width:480px)  { */

  

/*    body{*/

/*        	background: url('img/bgmobile.png');*/

/*	background-repeat: no-repeat;*/

/*	background-size: cover;*/

/*    }*/

/*    .medical{*/

/*	position: absolute;*/

/*	left:28%;*/

/*	top:7%;*/

/*	width: 280px*/

/*}*/

/*}*/

[style*="--aspect-ratio"] > :first-child {

  width: 100%;

}

[style*="--aspect-ratio"] > img {  

  height: auto;

}

@supports (--custom:property) {

  [style*="--aspect-ratio"] {

    position: relative;

  }

  [style*="--aspect-ratio"]::before {

    content: "";

    display: block;

    padding-bottom: calc(100% / (var(--aspect-ratio)));

  }  

  [style*="--aspect-ratio"] > :first-child {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

  }  

}