

@media screen and (max-width: 399px) {
 .tabs-menu .content, body{width:350px;}
 .tabs-menu .wrapper div img{height:200px;}
 .tabs-menu .wrapper {}
 .tabs-menu nav li h2 {
    display: block;
  }
  .tabs-menu nav li span{
    margin:20px auto;
  }
}
@media screen and (min-width: 400px) and (max-width: 699px) {

  .tabs-menu nav li h2 {
    display:none;
  }
  .tabs-menu nav li span{
    margin:20px auto;
  }
}
@media screen and (min-width: 700px) and (max-width: 899px) {
  .tabs-menu .content, body{}
  
}
@media screen and(min-width: 900px) {
  .tabs-menu .content, body{width:100%;}
}
.tabs-menu h2{
  margin:0;
  padding:0;
}




.tabs-menu nav ul{
  width:100%;
  height: auto;
}

.tabs-menu nav{
  width:100%;
  height:auto;
  margin: 0 auto;
  overflow:hidden;
}

.tabs-menu ul {
  list-style: none;
  padding: 0;
}
.tabs-menu nav li {
  float: left;
  height: auto;
  width:100%;
  display:block;
  margin:0;
  padding:10px 0;
  position: relative;
  background: white;
  border-radius: 30px;
}
.tabs-menu nav li:first-child{margin-left:0;}

.tabs-menu nav li span{
  margin: 0 auto;
}

.tabs-menu .active a{ color: #e74c3c;}
.tabs-menu .active span.logo{ background-color: #e74c3c; border-radius:99px;}
.tabs-menu span.logo{
  width:40px;
  height:40px;
  display:block;
}
.tabs-menu .img1 .logo{
  background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -54px -48px;
  width:30px;
  height:30px;
}

.tabs-menu .img2 .logo{
  background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -283px -48px;
  width:30px;
  height:30px;
}

.img3 .logo{
  background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -146px -48px;
  width:30px;
  height:30px;
}

.img4 .logo{
  background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -8px -140px;
  width:30px;
  height:30px;
}

.tabs-menu .content{
  overflow: hidden;
  border:5px solid white;
  z-index:-0;
  height:500px;
  background:white;
}
.tabs-menu .wrapper{
  z-index:5;
  position: relative;
  left:0;
}
.tabs-menu .wrapper div{
  position:relative;
  float:left;
  z-index:1;
  
}
.tabs-menu .wrapper div img{
  width:100%;
  height:auto;

}
