body {
margin: 0;
padding: 0;
/* background:  url("../images/bodybg.jpg"); */
background-color: #262626;
background-repeat: no-repeat;
background-size: cover;
font-size:10px;
font-family: 'Open Sans', sans-serif;
}



.mobile {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 376px;
  height: 780px;
  border-radius: 30px;
  border:2px rgba(0,0,0,.3);
  box-sizing: border-box;
  background: #f4f5ed;
  box-shadow: inset 0 0 8px solid rgba(0,0,0,.3);

}

.screen {
    position: relative;
    background:  #262626;
    color:#262626;
    background-size: cover;
    width: 376px;
    height: 650px;
    margin:58px auto ;
    overflow: hidden;
    transition: 0.5s;
}


.screen.active {
  /* background: url("../images/rappnewmd.jpeg"); */
  
  background-size: 100% 100%;
  color:#fff;
  transition: 3s;
}



.home {
 position: absolute;
 bottom: 15px;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 40px;
 box-shadow: inset 0 0 7px rgba(0,0,0,.1);
 border-radius: 50%;
 background: #fff;
 border:2px solid #cecece;
 box-sizing: border-box;
 cursor: pointer;
}


.inner {
  position: absolute;
  top:32px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: #262626;
  border-radius: 2px;
  box-sizing: border-box;
}

.inner:before {
  content: '';
  position: absolute;
  top:-2px;
  left: -22px;
  background: #262626;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateX(-50%);
}


.volume {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 90px;
  left:-2px;
}

.volume li {
  list-style: none;
  width: 2px;
  height: 30px;
  background: #fff;
  margin: 10px 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.silent {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 90px;
  right:-2px;
}

.silent li {
  list-style: none;
  width: 2px;
  height: 30px;
  background: #fff;
  margin: 10px 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}


#mySidebar {
  position: relative;
  margin: 0;
  padding: 0;
  left:2px;
  width:300px;
  height: 650px;
  background: rgba(0,0,0,.8);
  border:1px solid rgba(0,0,0,.1);
}

#mySidebar a {
    text-decoration:none;
}


.md {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:240px;
    height:200px;
    
    background-size:100% 100%;
}

.login {
    position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  
}

@media only screen and (max-width: 600px) {
body {
margin: 0;
padding: 0;
background: red;
font-family: 'Open Sans', sans-serif;

}

.mobile {
margin:0 auto;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  border:0;
  box-sizing: border-box;
  background: #fff;
  box-shadow: inset 0 0 8px solid rgba(0,0,0,.3);

}

.screen {
    position: relative;
    background:  #262626;
    color:#262626;
    background-size: cover;
    max-width: 100%;
    max-height: 100%;
    margin:0 auto ;
    overflow: hidden;
    background:red;
}

.screen.active {
  /* background: url("../images/rappnewmd.jpeg"); */
  background-size:100% 100%;
  width:100%;
  height:100%;
  color:#fff;
  transition: 3s;
}

.home, .inner , .volume , .silent {
    display:none;
}

#mySidebar {
  position: relative;
  margin: 0;
  padding: 0;
  left:0;
  width:300px;
  height: 100vh;
  background: rgba(0,0,0,.8);
  border:1px solid rgba(0,0,0,.1);



}
}