/* RESET */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


/* * * BÁSICO * * */

#container{
    width:660px; height:700px; box-sizing: border-box; font-family:arial, sans-serif !important; margin:auto; overflow:hidden; position:relative;
}

.bloque{
    width:330px; position:absolute;top:0; height: 700px; 
}

.bloque-a{
    left:0; z-index:10;
}

.bloque-b{
    left:330px; z-index:20;
}

.imgs{
    position:absolute;
    background-repeat: no-repeat;
    background-size: contain;
}

.blur{
    -webkit-filter: sepia(25%) blur(1px);
    filter: sepia(25%) blur(1px);
}

.no-blur{
    -webkit-filter: inherit;
    filter: inherit;
}

#img-ronaldo{
    width:252px;
    height:500px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/ronaldo.png);
    top:0;
    left:-10;
    z-index:10;
}

#img-messi{
    width:313px;
    height:485px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/messi.png);
    top:0;
    left:80px;
    z-index:20;
}

#img-griezmann{
    width:283px;
    height:450px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/griezmann.png);
    top:260px;
    left:-30px;
    z-index:30;
}

#img-neymar{
    width:355px;
    height:433px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/neymar.png);
    top:275px;
    left:54px;
    z-index:40;
}

#img-suarez{
    width:205px;
    height:430px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/suarez.png);
    top:0px;
    left:145px;
    z-index:10;
}

#img-debruyne{
    width:307px;
    height:462px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/debruyne.png);
    top:0px;
    left:-23px;
    z-index:20;
}

#img-modric{
    width:300px;
    height:417px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/modric.png);
    top:207px;
    left:-26px;
    z-index:30;
}

#img-lewandowski{
    width:262px;
    height:466px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/lewandowski.png);
    top:215px;
    left:91px;
    z-index:40;
}

#img-kroos{
    width:293px;
    height:266px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/kroos.png);
    top:445px;
    left:-61px;
    z-index:50;
}

#img-salah{
    width:207px;
    height:300px;
    background-image:url(https://e00-elmundo.uecdn.es/elmundo/2018/graficos/may/s5/estrellasmundial/img/salah.png);
    top:407px;
    left:137px;
    z-index:50;
}

.boton{
    position:absolute; z-index:100;
    font-size:15px; font-family:arial; color:#fff; font-weight: bold;
}

.boton a{
    display:block;
    background-color:#26C0F5; color:#fff; text-decoration: none; padding:10px 5px;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

.boton a:hover{
    background-color:#1F77B5;
}

.boton span{
    margin-right:5px;
    margin-top:-2px;
}

.boton img{
    height:14px;
}

#bt-ronaldo{
    top:186px;
    left:5px;
}

#bt-messi{
    top:168px;
    left:193px;
}

#bt-griezmann{
    top:440px;
    left:5px;
}

#bt-neymar{
    top:415px;
    left:180px;
}

#bt-suarez{
    top:155px;
    left:195px;
}

#bt-debruyne{
    top:180px;
    left:10px;
}

#bt-modric{
    top:360px;
    left:35px;
}

#bt-lewandowski{
    top:380px;
    left:160px;
}

#bt-kroos{
    top:600px;
    left:5px;
}

#bt-salah{
    top:570px;
    left:220px;
}




@media (max-width:659px){
    #container{
        width:330px;
        height:1250px;
    }
    
    .bloque{
        overflow:hidden;
    }
    
    .bloque-b{
        top:550px;
        left:0;
    }
    
    .blur{
    -webkit-filter: inherit;
    filter: inherit;
    }

}