@import url(https://fonts.googleapis.com/css?family=Andika);

*
{
margin:0px;
padding:0px;
outline:none;
}

html{height:100%}
 
body{
background: #f2f2f2;
padding:10px;
font-family:'Andika', sans-serif;
color:#000;
}

#mobilescreen
{
width:340px;
height:480px;
background:#fff;
margin:0 auto;
position:relative;
overflow:hidden;
border:2px solid #ccc;
padding:20px 5px 100px 5px;
border-radius:20px;
box-shadow:0px 5px 5px 0px #ccc;
}

#maincontainer
{
width:320px;
margin:0 auto;
background:#282a36;
position:relative;
overflow: hidden;
height:100%;
}

#mainscreen
{
position:absolute;
height:100%;
left:0px;
top:0px;
width:100%; 
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;     
}

section
{
padding:0px;
margin:0px;
}

header
{
width:100%;
height:50px;
background:#1b2125;
position:relative;
}

.fa-align-justify
{
color:#f36175;
position:absolute;
left:0px;
top:0px;
height:50px;
width:50px;
display:table-cell;
line-height:55px;
text-align:center;
cursor:pointer;
}

.fa-shopping-cart
{
color:#f36175;
position:absolute;
right:0px;
top:0px;
height:50px;
width:50px;
display:table-cell;
line-height:50px;
text-align:center;
cursor:pointer;
}

h1
{
width:100%;
text-align:center;
color:#fff;
font-size:1em;
height:50px;
line-height:50px;
}

button
{
width:50%;
border:none;
height:50px;
font-size:0.8em;
font-weight:bold;
cursor:pointer;
}

footer
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:50px;
}

#showcode
{
background:#f36175;
}
#buyproduct
{
background:#ffd371;
}

.intro
{
text-align:center;
font-size:0.9em;
color:#58626b;
}

#container
{
padding:10px 30px;
}

#listlink{margin:0px; padding:0px 0px 0px 0px;}
li{
list-style-type:none;
padding:20px 10px;
position:relative;
background:#1b2125;
border-radius:5px;
margin-top:15px;
color:#58626b;
cursor:pointer;
}
#listlink li i
{
margin-right:20px;
z-index:99;
}
#listlink li .titles
{
z-index:5;
position:absolute;
left:1em;
top:0.4em;
}

.offdata
{
position:absolute;
right:1em;
top:0.3em;
color:#fff;
font-size:1.1em;
}
#listlink li div
{
position:absolute;
left:0px;
top:0px;
height:100%;
width:3px;
border-radius:5px 0px 0px 5px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

#listlink li:nth-child(1) div{background:#fe7559;}
#listlink li:nth-child(2) div{background:#1280e3;}
#listlink li:nth-child(3) div{background:#19b9c3;}
#listlink li:nth-child(4) div{background:#76f361;}
#listlink li:nth-child(5) div{background:#e3aa12;}
#listlink li:nth-child(6) div{background:#12e392;}

#listlink li span
{
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

#listlink li:hover div
{
width:100%;
border-radius:5px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#listlink li:hover span
{
color:#fff;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

#controlder
{
width:50px;
height:50px;
border-radius:50%;
background:#f2f2f2;
margin:15px auto;
box-shadow:inset 0px 0px 10px 0px #bdbdbd;
border:1px solid #c6c6c6;
}

#speaker
{
width:50px;
height:5px;
border-radius:15px;
background:#f2f2f2;
margin:0px auto 15px;
box-shadow:inset 0px 0px 10px 0px #bdbdbd, inset 0px 5px 0px 0px #bdbdbd;
border:1px solid #c6c6c6;
}

#mainmenu
{
width:125px;
height:100%;
background:#1b2125;
position:absolute;
top:0px;
left:-125px;
z-index:99;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}

.showmenu
{
left:0px!important;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}

.movemaincontainer
{
margin-left:125px!important;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}

h2
{
text-align:center;
color:#58626b;
font-size:1.1em;
padding:10px 0px;
}

#mainmenu ul li
{
padding:5px 10px;
}

#mainmenu ul li:hover
{
color:#f36175;
}