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

  .conainer{
    width: 300px;
  }

  .info {
     width: 300px;
     margin-bottom: 250px;
  }

  .marketplaces {
    display: none;

  }



  .heroContent {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    left: 0px;
    right: 0px;
    top: 200px;
  }

  .logo {
    background-image: url("images/logo.svg");
    width: 195px;
    height: 95px;
    bottom: 300px;
    margin: 0 auto;
    background-size: 195px 95px;
  }


  .phones {
    background-image: url("images/phones.png");
    background-size: cover;
    width: 309px;
    height: 290px;
    margin: -140px auto 0px;
  }


  .hero {
		background-image: url("images/hero.jpg");
		height: 600px;
	}

  h2 {
    width: 300px;
    margin-top: 35px;
    text-align: center;
    margin-bottom: 80px;
  }


}






























@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .phones {
    background-image: url("images/phones@2x.png");
    background-size: cover;
  }


  .image1{
    background-image: url("images/image1@2x.jpg");
    float: left;
  }

  .image2{
    background-image: url("images/image2@2x.jpg");
    float: right;
  }

  .image3{
   background-image: url("images/image3@2x.jpg");
    float: left;
  }

  .image4{
    background-image: url("images/image4@2x.jpg");
    float: right;
  }


}















@media (max-height: 650px) {
  .hero {
    height: 600px;
  }

  .heroContent{
    top: 150px;
  }

  .phones {
    margin-top: -150px;
  }

}



 @media only screen and (max-width: 1160px) {
  .marketplaces {
    top: 30px;
    left: 30px;

  }

}