*{
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
}

.img-banner {
 width: 100%;
}

.img-banner {
  display: none;
  width: 600px;
  height: 500px;
}

.img-info {
  width: 100%:
}

.img-info h2 {
  padding:30px 30px 20px;
  font-family: arial;
  font-size: 50px;
  color: #000000;
  line-height: 44px;
}

.img-info p {
  padding:0px 30px 20px;
  font-family: arial;
  font-size: 16px;
  color: #000000;
  line-height: 24px;
}

.img-info h1 {
  padding:0px 30px 20px;
  font-family: oblique;
  font-size: 16px;
  color: #FF0000;
  line-height: 24px;
}

.button{
  padding:0px 30px 20px;
}

.img-me {
  width: 100%;
}
@media only screen and (min-width: 768px) {
 .img-banner{
   display: block;
   width: 100%;
   padding-bottom: 30px;
 }

 .wrapper {
   width: 600px;
   margin: 0 auto;
 }

 .img-info h2 {
   padding:20px 0px 0px;
 }

 .img-info p {
   padding:20px 0px 0px;
 }

 .img-me{
   padding-top: 30px;
 }

 @media only screen and (min-width: 1000px) {
   .wrapper {
     width: 1000px;
 }

 .img-info{
   width: 50%;
   float: right;
 }

 .img-me {
   padding-top: 0px;
   width: 50%;
   float: left;
  }

  .img-info h2 {
    padding:20px 0px 0px 30px;
  }

  .img-info p {
    padding:20px 0px 0px 30px;
  }
}