@media screen and (min-width: 1610px) { #kol{ width : 1610px; }
    .ra{ top: -30px; font-size: 32px; }
    .diff, .steel, .charm { background-color:#444; margin :29.1px; width:337.4px; height: 482.7px; display:inline-block; }
    .parent { width: 322px; margin: 7.5px; max-height: 354.2px; }}

@media screen and (max-width: 1609px) and (min-width: 1400px) { #kol{ width : 1400px; }
    .ra{ top: -30px; font-size: 32px; }
    .diff, .steel, .charm { background-color:#444; margin :26px; width:293.4px; height: 426.3px; display:inline-block;}
    .parent { width: 280px; margin: 6.5px; max-height: 308px; }}




@media screen and (max-width: 1399px) and (min-width: 1250px) { #kol{ width : 1250px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:20px;}
    .ra{ top: -18px; font-size: 24px; }
    .diff, .steel, .charm { background-color:#444; margin :23.5px; width:262px; height: 350px;  }
    .parent { width: 250px; margin: 5.8px; max-height: 275px; }}

@media screen and (max-width: 1249px) and (min-width: 1200px) { #kol{ width : 1200px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:20px;}
    .ra{ top: -12px; font-size: 24px; }
    .diff, .steel, .charm {  margin :21px; width:255px; height: 342px; }
    .parent { width: 244px; margin: 5.8px; max-height: 269px; }}

@media screen and (max-width: 1199px) and (min-width: 1150px) { #kol{ width : 1150px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:20px;}
    .ra{ top: -12px; font-size: 23px; }
    .diff, .steel, .charm {  margin :17.4px; width:248.5px; height: 332px; }
    .parent { width: 239px; margin: 3.87px; max-height: 263.5px; }}

@media screen and (max-width: 1149px) and (min-width: 1100px) { #kol{ width : 1100px; }
    .fi{position:relative; top:-9px; margin:auto; color:white; text-align:center; font-size:20px;}
    .ra{ top: -13px; font-size: 23px; }
    .diff, .steel, .charm {  margin :16px; width:238.5px; height: 320px; }
    .parent { width: 229px; margin: 3.72px; max-height: 253px; }}

@media screen and (max-width: 1099px) and (min-width: 1050px) { #kol{ width : 1050px; }
        .fi{position:relative; top:-10px; margin:auto; color:white; text-align:center; font-size:20px;}
    .ra{ top: -15px; font-size: 23px; }
    .diff, .steel, .charm {  margin :16.0px; width:227px; height: 309px; }
    .parent { width: 219px; margin: 3.55px; max-height: 241.6px; }}

@media screen and (max-width: 1049px) and (min-width: 1000px) { #kol{ width : 1000px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:19px;}
    .ra{ top: -13px; font-size: 22px; }
    .diff, .steel, .charm {  margin :15px; width:216.3px; height: 296px; }
    .parent { width: 208.7px; margin: 3.48px; max-height: 230.2px; }}

@media screen and (max-width: 999px) and (min-width: 950px) { #kol{ width : 950px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:18px;}
    .ra{ top: -12px; font-size: 21px; }
    .diff, .steel, .charm {  margin :14.5px; width:205px; height: 285px; }
    .parent { width: 198.7px; margin: 3.34px; max-height: 219.1px; }}

@media screen and (max-width: 949px) and (min-width: 900px) { #kol{ width : 900px ; }
    .fi{position:relative; top:-7px; margin:auto; color:white; text-align:center; font-size:17px;}
    .ra{ top: -11px; font-size: 20px; }
    .diff, .steel, .charm {  margin :13.2px; width:195px; height: 270px; }
    .parent { width: 189px; margin: 3.18px; max-height: 208.3px; }}






@media screen and (max-width: 899px) and (min-width: 850px) { #kol{ width : 850px; }
    .fi{position:relative; top:-6px; margin:auto; color:white; text-align:center; font-size:19px;}
    .ra{ top: -12px; font-size: 23px; }
    .diff, .steel, .charm { background-color:#444; margin :19px; width:241.7px; height: 329px; display:inline-block;}
    .parent { width: 232.8px; margin: 4.2px; max-height: 256.2px; }}

@media screen and (max-width: 849px) and (min-width: 800px) { #kol{ width : 800px; }
    .fi{position:relative; top:-9px; margin:auto; color:white; text-align:center; font-size:18px;}
    .ra{ top: -12px; font-size: 21px; }
    .diff, .steel, .charm { background-color:#444; margin :17.8px; width:227px; height: 306px; display:inline-block;}
    .parent { width: 218.8px; margin: 3.95px; max-height: 240.8px; }}

@media screen and (max-width: 799px) and (min-width: 750px) { #kol{ width : 750px; }
    .fi{position:relative; top:-9px; margin:auto; color:white; text-align:center; font-size:17px;}
    .ra{ top: -11px; font-size: 20px; }
    .diff, .steel, .charm { background-color:#444; margin :16.6px; width:212.2px; height: 285px; display:inline-block;}
    .parent { width: 204.6px; margin: 3.7px; max-height: 225px; }}

@media screen and (max-width: 749px) and (min-width: 700px) { #kol{ width : 700px; }
    .fi{position:relative; top:-9px; margin:auto; color:white; text-align:center; font-size:16px;}
    .ra{ top: -12px; font-size: 19px; }
    .diff, .steel, .charm { background-color:#444; margin :15.5px; width:198px; height: 267px; display:inline-block;}
    .parent { width: 191.1px; margin: 3.5px; max-height: 210px; }}

@media screen and (max-width: 699px) and (min-width: 650px) { #kol{ width : 650px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:15px;}
    .ra{ top: -11px; font-size: 18px; }
    .diff, .steel, .charm { background-color:#444; margin :14.4px; width:184px; height: 250px; display:inline-block;}
    .parent { width: 177.5px; margin: 3.25px; max-height: 195px; }}

@media screen and (max-width: 649px) and (min-width: 600px) { #kol{ width : 600px; }
    .fi{position:relative; top:-9px; margin:auto; color:white; text-align:center; font-size:15px;}
    .ra{ top: -12px; font-size: 17px; }
    .diff, .steel, .charm { background-color:#444; margin :13.3px; width:170px; height: 230px; display:inline-block;}
    .parent { width: 163.8px; margin: 3px; max-height: 180px; }}






@media screen and (max-width: 599px) and (min-width: 550px) { #kol{ width : 550px; }
    .fi{position:relative; top:-10px; margin:auto; color:white; text-align:center; font-size:19px;}
    .ra{ top: -13px; font-size: 22px; }
    .diff, .steel, .charm { background-color:#444; margin :16.4px; width:230px; height: 320px; display:inline-block;}
    .parent { width: 226.5px; margin: 3.67px; max-height: 249px; }}

@media screen and (max-width: 549px) and (min-width: 500px) { #kol{ width : 500px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:19px;}
    .ra{ top: -13px; font-size: 22px; }
    .diff, .steel, .charm { background-color:#444; margin :15.1px; width:213.8px; height: 294px; display:inline-block;}
    .parent { width: 206.1px; margin: 3.34px; max-height: 226.6px; }}

@media screen and (max-width: 499px) and (min-width: 450px) { #kol{ width : 450px; }
    .fi{position:relative; top:-10px; margin:auto; color:white; text-align:center; font-size:16px;}
    .ra{ top: -12px; font-size: 18px; }
    .diff, .steel, .charm { background-color:#444; margin :13.6px; width:192.4px; height: 255px; display:inline-block;}
    .parent { width: 185.5px; margin: 3px; max-height: 204px; }}

@media screen and (max-width: 449px) and (min-width: 400px) { #kol{ width : 400px; }
    .fi{position:relative; top:-10px; margin:auto; color:white; text-align:center; font-size:16px;}
    .ra{ top: -13px; font-size: 17px; }
    .diff, .steel, .charm { background-color:#444; margin :12.4px; width:171px; height: 230px; display:inline-block;}
    .parent { width: 165px; margin: 2.6px; max-height: 181.3px; }}

@media screen and (max-width: 399px) and (min-width: 350px) { #kol{ width : 350px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:15px;}
    .ra{ top: -11px; font-size: 16px; }
    .diff, .steel, .charm { background-color:#444; margin :8.4px; width:156px; height: 217px; display:inline-block;}
    .parent { width: 149.7px; margin: 2.4px; max-height: 165.3px; }}

@media screen and (max-width: 350px) { #kol{ width : 300px; }
    .fi{position:relative; top:-8px; margin:auto; color:white; text-align:center; font-size:15px;}
    .ra{ top: -13px; font-size: 15px; }
    .diff, .steel, .charm { background-color:#444; margin :4.9px; width:136.8px; height: 196px; display:inline-block;}
    .parent { width: 132.1px; margin: 2px; max-height: 145.1px; }}





.fi ,.ra{ line-height:0em }
.child {border-radius:5px;}
.ra { text-align: center; color:#4caf50;  position:relative; }
#kol{ margin:auto; }
.parent { overflow: hidden; position: relative; display: inline-block; cursor: pointer; border-radius:5px; }
.diff, .steel, .charm { background-color:#444; display:inline-block; border-radius:5px; box-shadow:2px 3px 4px 4px #111;}






.child {  height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat;
    -webkit-transition: all .2s; -moz-transition: all .2s;  -o-transition: all .2s; transition: all .3s; }


.parent:hover .child, .parent:focus .child {  -ms-transform: scale(1.1); -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);  -o-transform: scale(1.1); transform: scale(1.1); filter: brightness(94%); }

.parent:hover .child:before, .parent:focus .child:before { display: block; }


.child:before { content: ""; display: none; height: 100%; width: 100%; position: absolute;
    top: 0; left: 0; background-color: rgba(224,224,224,0.95); }

}