body , html {
  font-family: 'Roboto', sans-serif;
  overflow-x:hidden;
  letter-spacing: 0.5px;
}

body.overflow , html.overflow {
    overflow-y:hidden;
}

* {
    outline:none;
}

/* .header .menu-wrapper */
.menu-wrapper {
  height:60px;
  /*
  background-color:#E90006;
  */
  background-color: rgb(233, 0, 6);
  width:100%;
  color:white;
  font-weight:bold;
  font-size:34px;
  padding-left:15px;
  padding-right:15px;
  padding-top:8px;
  -webkit-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
  -moz-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
  -o-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
  -ms-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
  box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
  position:relative;
  z-index:10;
}

.logo {
    float:left;
    display:inline-block;
}

.button {
    position:relative;
    width: 60px;
    height: 50px;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    float:right;
    margin-top:-10px;
    margin-right:-30px;
    cursor:pointer;
}

.button .icon-left {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: absolute;
    height: 4px;
    width: 15px;
    top: 30px;
    background-color: white;
}

.button .icon-right {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: absolute;
    height: 4px;
    width: 15px;
    top: 30px;
    background-color: white;
    left: 15px;
}

.button .icon-left:before {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: absolute;
    width: 15px;
    height: 4px;
    background-color: white;
    content: "";
    top: -10px;
}

.button .icon-left:after {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: absolute;
    width: 15px;
    height: 4px;
    background-color: white;
    content: "";
    top: 10px;
}

.button .icon-right:before {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: absolute;
    width: 15px;
    height: 4px;
    background-color: white;
    content: "";
    top: -10px;
}

.button .icon-right:after {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: absolute;
    width: 15px;
    height: 4px;
    background-color: white;
    content: "";
    top: 10px;
}

.button.open .icon-right {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    background: transparent;
}

.button.open .icon-right:before {
    -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
    transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
}

.button.open .icon-right:after {
    -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
    transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
}

.button.open .icon-left {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    background: transparent;
}

.button.open .icon-left:before {
    -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
    transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
}

.button.open .icon-left:after {
    -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
    transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
}

/* .search-wrapper */
.search-wrapper {
    height:50px;
    width:100%;
    position:relative;
}

.search-wrapper input {
    height:50px;
    width:100%;
    border:0px;
    border-bottom:1px solid #d3dde5;
    padding:15px;
    padding-top:20px;
    font-size:11px;
    font-family: 'Roboto', sans-serif;
    text-transform:uppercase;
    letter-spacing: 0.5px;
}

.search {
    position:absolute;
    right:15px;
    top:50%;
    z-index:5;
    transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
    cursor:pointer;
}

.content-wrapper {
    width:100%;
}

.title-wrapper {
    padding-left:15px;
    padding-right:15px;
    width:100%;
    letter-spacing: 1px;
    font-weight:300;
}

.first-level .title-wrapper {
    margin-bottom:-30px;
}

/* .images-wrapper */
.images-wrapper , .videos-wrapper , .games-wrapper , .ringtones-wrapper {
    padding-bottom:30px;
}

.videos-wrapper , .ringtones-wrapper {
    background-color:#eaf2f7;
}

.videos-wrapper.white , .ringtones-wrapper.white {
    background-color:white;
}

.title {
    font-size:24px;
    font-weight:300;
    margin-top:25px;
    position:relative;
    z-index:10;
    background-color:white;
    display:inline-block;
    padding-right:50px;
    min-width:220px;
}

.images-wrapper hr , .videos-wrapper hr , .games-wrapper hr , .ringtones-wrapper hr {
    border:0px;
    border-bottom:1px solid #d3dde5;
    position:absolute;
    top:18px;
    left:0px;
    z-index:5;
    width:100%;
}

.videos-wrapper .title , .ringtones-wrapper .title {
    background-color:#eaf2f7;
}

.videos-wrapper .title.white , .ringtones-wrapper .title.white {
    background-color:white;
}

.wrapper-content {
    padding-top:10px;
}

.ringtones-wrapper .wrapper-content {
    margin-top:-30px;
}

.wrapper-content .col-padding {
    padding-left:0px;
    padding-right:0px;
}

.relative {
    position:relative;
    width:100%;
    height:100%;
}

.images {
    width:100%;
    border-radius:7px;
    overflow: hidden;
    position:relative;
    border:1px solid #eaf2f7;
}

.images a {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:10;
}

.col a {
    color:#95a1ac;
}

.images-icon , .videos-icon , .games-icon , .ringtones-icon {
    position:absolute;
    bottom:10px;
    right:10px;
    height:20px;
    cursor:pointer;
}

.ringtones-icon-big {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    width: 100%;
    height: 100%;
}

.images img {
    width:100%;
    height:auto;
    background-color:white;  
    position:absolute; 
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}


.images img.height {
    height:100%;
    width:auto;
}

.wrapper-content .col-margin {
    margin-top:30px;
}

.wrapper-content .col-padding-2 {
    padding-left:0px;
}

.wrapper-content .col-padding-3 {
    padding-right:0px;
}

.btn-section , .btn-show , .btn-load {
    width:100%;
    height:50px;
    border-radius:7px;
    /*background-color:#009cff;*/
    background-color:rgb(233, 0, 6);
    color:white;
    border:none;
    text-transform:uppercase;
    font-size:11px;
    -webkit-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    -moz-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    -o-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    -ms-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    letter-spacing: 1px;
    transition: all 0.2s ease-in-out;
}

.btn-load-bold {
    width:100%;
    height:50px;
    border-radius:7px;
    /*background-color:#009cff;*/
    background-color:rgb(233, 0, 6);
    color:white;
    font-weight: bold;
    border:none;
    text-transform:uppercase;
    font-size:11px;
    -webkit-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    -moz-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    -o-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    -ms-box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    box-shadow: 0px 3px 11px 3px rgba(0, 156, 255, 0.5);
    letter-spacing: 1px;
    transition: all 0.2s ease-in-out;
}

.description {
    font-size:11px;
    color:#95a1ac;
    text-transform:uppercase;
    padding-top:10px;
}

/* .footer */ 
.footer {
    height:50px;
    background-color:#313436;
    font-size:11px;
    color:#95a1ac;
    text-align:center;
    text-transform:uppercase;
    padding-top:20px;
}

.btn-section:hover , .btn-show:hover , .btn-load:hover {
    transition: all 0.2s ease-in-out;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

.menu-content {
    width:100%;
    height:100%;
    /* background-color:#009cff; */
    background-color:rgb(233, 0, 6);
    position:fixed;
    top:60px;
    left:0px;
    display:none;
    z-index:20;
}

.menu-wrapper.fixed {
    position:fixed;
}

.menu-content ul {
    padding:0px;
    color:white;
    font-size:25px;
    text-transform:uppercase;
    letter-spacing: 1px;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    margin-top:-60px;
    font-weight:bold;
}

.menu-content ul li {
    list-style: none;
    padding:20px;
    cursor:pointer;
}

.menu-content ul li a {
    color:white;
}

.menu-content ul.center {
    padding:0px;
    color:white;
    font-size:25px;
    text-transform:uppercase;
    letter-spacing: 1px;
    text-align:center;
    position:absolute;
    top:0%;
    left:50%;
    transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -o-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    margin-top:0px;
    font-weight:bold;
}

.first-level .wrapper-content div.col {
    display:none;
}

.first-level .wrapper-content div.col:nth-child(-n+8) {
    display:block;
}

.wrapper-content p {
    font-size:13px;
    color:#7e8891;
    padding-top:10px;
    margin-bottom:-5px;
}

.btn-load {
    margin-top:30px;
}

.title-wrapper.bottom {
    margin-bottom:-15px;
}

.second-level .ringtones-wrapper .wrapper-content {
    margin-top: 0px;
}