/* POSITIONING */

.container {
  width: 100%;
  max-width: 380px;
  height: 380px;
}

.bg {
    left: 30%;
    transform: translate(-30%, 0)
}

.head { 
    width: 90%;
    max-width: 233px;
    left: 4.2%; 
    top: 5%; 
}

.text { 
    left: 50%;
    top: 50%; 
    transform: translate(-50%, 30%);
    width: 90%;
    max-width: 261px;
}

.products { 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -100%);
    width: 95%;
    max-width: 274px;
}

.logo  {
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 30px; 
}



/* STATIC */


body {
  padding: 0;
  margin: 0;
}

.banner {
    display: block;
    position: relative;
    box-sizing: border-box;
    line-height: 0;
}

.container {
    position: absolute;
    line-height: 0;
    overflow: hidden;
    z-index: 9999;
    box-sizing: border-box;
    display: block;
    background: #ffffff;
}

.bg {
    z-index: 0;
    visibility: visible;
}

.content {
    z-index: 600;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: visible;
}

#bannerclick {
    position: absolute;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
    background: transparent url(images/px.gif) repeat 0 0;
    border: 1px solid #ccc;
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    visibility: hidden;
    z-index: 700;
    position: absolute;
    cursor: pointer;
}

img {
    position: absolute;
    visibility: hidden;
}

.logo {
    visibility: visible;  
}

div {
    display: block;
    box-sizing: border-box;
    position: absolute;
}