.frontProducts{
    background-color: #222;
    margin:auto;
    display: block;
    width: 130%;
    left:-20%;
    position: relative;
    padding-left: 5%;
    padding-right: 3%;
    padding-top: 40px;
    padding-bottom: 80px;
}
.whatSearch{
    position: relative;
    top:-120px;
}
.whatSearch h1{
    padding:5px;
    margin:5px;
    line-height:16px;
}
.offerTypesBox{
    width: 80%;
    max-width:600px;
    margin:5px auto;
    text-align: center;

}
.offerTypesBox .offerBox{
    width: 22%;
    max-width:160px;
    height: 240px;
    overflow: hidden;
    background: rgb(32,32,32);
    background: -moz-radial-gradient(circle, rgba(32,32,32,1) 0%, rgba(47,47,47,1) 69%, rgba(10,7,5,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(32,32,32,1) 0%, rgba(47,47,47,1) 69%, rgba(10,7,5,1) 100%);
    background: radial-gradient(circle, rgba(32,32,32,1) 0%, rgba(47,47,47,1) 69%, rgba(10,7,5,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#202020",endColorstr="#0a0705",GradientType=1);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    margin:5px;

}
.offerTypesBox .offerBox:hover{
    background: rgb(209,139,6);
    background: -moz-radial-gradient(circle, rgba(209,139,6,1) 0%, rgba(41,29,17,1) 69%, rgba(10,7,5,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(209,139,6,1) 0%, rgba(41,29,17,1) 69%, rgba(10,7,5,1) 100%);
    background: radial-gradient(circle, rgba(209,139,6,1) 0%, rgba(41,29,17,1) 69%, rgba(10,7,5,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d18b06",endColorstr="#0a0705",GradientType=1);
}
.offerTypesBox .offerBox img{
    max-width: 90%;
}
.offerTypesBox .offerBox h3{
    font-size: 1.2em;
}
.offerTypesBox .offerBox:hover h3{
    background-color: #F09819;
    color:#111;
}
.offerTypesBox .offerBox:hover img{
    transform: scale(1.05);
}
.partnerContrib a{
    text-decoration: none;
}
.partnerContrib h2{
    margin:5px auto;
    display: block;
    position: relative;
    top:20px;
    padding:10px;
    color:mediumslateblue;
    border:1px solid mediumslateblue;
    font-weight: normal;
    font-size: 1.3em;
    background-color: #333;
    border-radius: 5px;
    max-width: 400px;
    cursor: pointer;

}
.partnerContrib h2:hover{
    background-color: mediumspringgreen;
    background-color: #9586f1;
    ;
    color:#222;
    transform: scale(1.05);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
/* wall dispaly section */
.wall{
    margin:10px auto;
    padding-top: 30px;
    border-radius: 3px;
    max-width: 980px;
    padding:5px;
    background-color: #222;
    background-color: #7f5200;
    background-color: #444;
}

.wall .postHolder{
    position: relative;
    width: 90%;
    max-width: 900px;
    margin: 10px auto;
    display: block;

    min-height: 230px;
    max-height: 230px;

    overflow: hidden;
    margin-bottom: 30px;

    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    -ms-transition: all .4s ease-in;
    -o-transition: all .4s ease-in;
    transition: all .4s ease-in;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0;top:-10px;}
    to   { opacity: 1; top:0px;}
}
.wall .post{
    height: 180px;
    background-color: #333;
    border-radius: 3px;
    border:1px solid #444;
    box-shadow: 0px 0px 3px 5px rgba(0,0,0,.3);
    overflow: hidden;
    z-index: 60;
    display: block;
    text-decoration: none;
    color:#AAA;

}
.wall .post:hover{
    background-color: #555;
    color:#FFF;
    transform: scale(1.05);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.wall .post:hover .coverHolder img{
    transform: scale(1.05);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.wall .coverHolder{
    float:left;
    max-width: 25%;
    position: relative;
    display: inline-block;
    height: 190px;
    background-color: #222;
    overflow: hidden;
    padding:3px;
    border-radius: 3px;

}
.wall .coverHolder img{
    max-width: 220px;
    width: 98%;
    height: 20vh;
    border-radius: 3px;

}
.wall .description{
    max-width: 95%;
    display: block;
    height: initial;
    overflow: hidden;
}
.wall .actions{
    max-width: 100%;
    height: 45px;
    background-color: #222;
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0px;
    border-radius: 3px;
    text-align: right;
    z-index: 26;
}
.wall .details{
    width: 67%;
    text-align: justify;
    float: left;
    margin-left: 10px;
    position: absolute;
    display: inline-block;
    left: 223px;
}
.wall .postTitle{
    text-align: left;
    margin: 5px;
    padding: 5px;
    padding-left: 15px;
    left:-15px;
    position: relative;

}
.wall .postTitle a{
    text-decoration: none;
    color:#BBB;
}
.wall .actions span{
    font-size: 1.3em;
    display: inline-table;
    margin:5px auto;
    padding:2px;
    margin-right: 15px;

}
.wall .actions span:hover{
    color:mediumspringgreen;
    cursor: pointer;
    transform: scale(1.05);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.wall .extend{
    max-height: 800px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.prStar{
    width: 50px;
    height:50px;
    background-color: mediumspringgreen;
    border-radius: 50%;
    position: absolute;
    float:left;
    top:0px;
    left:0px;

}

.functionSelect_left{
    float:left;
    position: absolute;
    top:5%;
    left:1%;

}
.functionSelect_right{
    float:right;
    position: absolute;
    top:5%;
    right:1%;

}
.functionSelect_right a,.functionSelect_left a{
    display:inline-block;
    float:left;
    position: relative;
    margin:10px;
    top:50px;
    text-decoration: none;
    color:#BBB;
}

.fss img{
    height:220px;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    filter:grayscale(1);
}
.functionSelect_right a:hover img,.functionSelect_left a:hover img{
    -webkit-filter: drop-shadow(5px 5px 5px #CCC) grayscale(0);
    filter: drop-shadow(5px 5px 5px #CCC) grayscale(0);
    transform: scale(1.05);

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;

}
.fss span{
    display:block;
    position: relative;
    top: -110px;
    padding:5px;
    border-radius: 3px;
    background-color: #111;

}
.newOffers{
    top:-160px;
    position: relative;

}
.fssAct img{
    -webkit-filter:  grayscale(0);
    filter: grayscale(0);
}
@media screen and (max-width:1660px){
    .newOffers{
        top:-200px;
    }
    .whatSearch{
    position: relative;
    top:-20px;
}
}

@media screen and (max-width:1660px){
    .frontProducts{
        max-width: 100%;
        margin: 0px auto;
        left: -5%;
    }
    .frontSlider{
        max-width: 118.3%;
        margin: 0px auto;
        left: -9.5%;
    }
    .offerTypesBox .offerBox{
        margin:5px;
        width: 21%;
    }
    .newOffers{
        top:10px;
        position: relative;
    }

}

@media screen and (max-width:1440px){
    .frontSlider{
        top:-110px;
        height:200px;
    }
}
@media screen and (max-width: 1024px){
    .wall .details{
        width: 50%;
    }
}
@media screen and (max-width:980px){
    .offerTypesBox .offerBox{
        width: 98%;
        height: 50px;
        margin-top:10px;
        max-width: 100%;
    }
    .offerTypesBox .offerBox h3{
        font-size:1.1em;
        paddign:5px;
        background-color: mediumseagreen;
        color:#111;
    }
    .offerTypesBox .offerBox img{
        display: none;
    }

    .wall .postTitle{
        position: absolute;
        z-index: 25;
        width: 118%;
        left:-10px;
        background-color: #222;
        padding:5px;
        font-size: 1em;

    }
    .wall .coverHolder{
        width: 40%;
        max-width: 40%;
    }
    .wall .coverHolder img{
        width: 100%;
        height: 20vh;
    }
    .wall .description{
        position: relative;
        top:70px;
        left:8px;
    }
    .wall .details{
        left: 270px;
    }
    .wall .actions span{
        font-size: 1.3em;
    }

    .prStar{
        top:40%;
    }
    .partnerContrib h2{
        top:-20px;
    }
    .fss img{
        max-height:170px;
    }
    .fss span{
        top:-80px;
    }
    .functionSelect_left{
        top:12%;
    }

}

@media screen and (max-width:540px){
    .wall .details{
        width: 45%;
        left: 125px;
    }
      .fss img{
        max-height:140px;
    }
    .fss span{
        top:-60px;
    }
    .functionSelect_left{
        top:16%;
    }
}
@media screen and (max-width:440px){
    .jumpToShopBtn{
        width: 50px;

    }
}
@media only screen and (orientation: landscape) and (max-width:980px) {
    .wall .coverHolder img{
        height: 45vh;
    }
}