.itemOverlay { display:block; float:left; width:333px; height:186px; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } @media screen and (min-width: 500px){ .itemOverlay { -webkit-transform: scale(0.92); -moz-transform: scale(0.92); -ms-transform: scale(0.92); transform: scale(0.92); } } .itemOverlay .isFavorite { display:none; position:absolute; right:2px; top:2px; } .itemOverlay.favorites .isFavorite { display:block; } #page .itemOverlay a.unfavorites { display:none; } #page .itemOverlay a.favorites { display:block; } #page .itemOverlay.favorites a.unfavorites { display:block; } #page .itemOverlay.favorites a.favorites { display:none; } .itemOverlay:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -moz-transition: all ease-in; -webkit-transition: all ease-in; -ms-transition: all ease-in; transition: all ease-in; } .item { /* Ratio : 196/264 : 1.346 */ width:321px; height:174px; border:1px solid #aaa; margin:5px; } .item { background:white; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .item:hover { background:rgba(255,235,52,0.2); -moz-transition: all ease-in; -webkit-transition: all ease-in; -ms-transition: all ease-in; transition: all ease-in; } .item .image { display:block; width:125px; height:168px; padding:3px; background:white; background:white none center center no-repeat; background-size:100% 100%; border-right:1px solid #aaa; } .item { -webkit-transform:rotateY(360deg); opacity:0; position:relative; } .item.show { -webkit-transform:rotateY(0deg); opacity:1; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .item.show.greyOverlay { -webkit-transform:rotateY(0deg); opacity:0.5; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .item .constructor,.item .name { font-family:'AvenirHeavy',sans-serif; font-size:13px; } .item .constructor .ref { font-family:sans-serif; font-size:13px; } .item .constructor { width : 189px; left: 132px; text-align:center; position : absolute ; top : 12px; } .item .name { width : 189px; left: 132px; text-align:center; position : absolute ; bottom : 26px; } .item .actions{ text-align:right; padding-right:6px; padding-left:6px; width : 177px; height:24px; left:132px; background: rgba(255,255,0,0.2); position:absolute; bottom:0; } .item .actions a{ padding-top:3px; display:inline-block; padding-right:6px; padding-left:2px; text-decoration:none;color:#555;font-family:'AvenirHeavy',sans-serif;font-size:12px; } .item .actions a.favorites{ opacity : 0.33; -moz-transition: all ease-in; -webkit-transition: all ease-in; -ms-transition: all ease-in; transition: all ease-in; } .item .actions a.favorites:hover{ opacity : 1; -moz-transition: all ease-in; -webkit-transition: all ease-in; -ms-transition: all ease-in; transition: all ease-in; } .item .actions .price { position:absolute; left:6px; bottom:3px; color:#555; font-family:'AvenirHeavy',sans-serif; font-size:14px; width:70px; text-align:right; } .item .image { position:relative; } .item .image a.zoom { position:absolute; left:0; bottom:0; background:rgba(0,0,0,0.8) url(https://cdn3.iconfinder.com/data/icons/discovery/16x16/actions/window_fullscreen.png) center center no-repeat; -webkit-border-radius:0px 12px 0px 0px; -moz-border-radius:0px 12px 0px 0px; -ms-border-radius:0px 12px 0px 0px; border-radius:0px 12px 0px 0px; width :16px; height:16px; padding:4px; } .item .image a.zoom { background-size:70% 70%; -moz-transition: all ease-in; -webkit-transition: all ease-in; -ms-transition: all ease-in; transition: all ease-in; } .item .image a.zoom:hover { background-size:80% 80%; -moz-transition: all ease-in; -webkit-transition: all ease-in; -ms-transition: all ease-in; transition: all ease-in; } .item .request { font-size:11px; } @media screen and (max-width: 1000px){ .item { width:285px; margin:8px 3px; height:152px; } .item .image { width:109px; height:146px; } .item .constructor { width : 153px; } .item .name { width : 153px; } .item .actions{ width : 142px; } } @media screen and (max-width: 500px){ .item { width:301px; } .item .constructor { width : 169px; } .item .name { width : 169px; } .item .actions{ width : 158px; } } .search { padding-right:20px; background:rgba(255,255,255,0.5) url(https://cdn1.iconfinder.com/data/icons/google_jfk_icons_by_carlosjj/16/search_pointer.png) center right no-repeat; border:2px solid #ddd; -webkit-border-radius:8px; -moz-border-radius:8px; -ms-border-radius:8px; border-radius:8px; padding:3px 8px; color:#555; font-family:'AvenirHeavy',sans-serif; font-size:13px; height:24px; margin:5px; width:220px; margin-top:10px } .item { -webkit-box-shadow: 0 8px 6px -6px #aaa; -moz-box-shadow: 0 8px 6px -6px #aaa; box-shadow: 0 8px 6px -6px #aaa; } #watch_options { display:none; } @media screen and (max-width: 585px){ .stock .itemOverlay { width:288px; margin-left:-16px; } .item { /* Ratio : 196/264 : 1.346 */ width:276px; } .item .constructor { width : 145px; } .item .name { width : 145px; } .item .image { display:block; width:100px; height:146px; } .item .actions{ width : 157px; left:107px; } #watch_options { display:block; position:absolute; top:-44px; left:0; width:100%; font-family:'AvenirBook',ArialBlack; } #watch_options a { background:#777; color:white; font-size:15px; text-align:center; height:30px; line-height:30px; width:100%; display:block; margin:0 auto; border:1px solid white; } #page #content { position:relative; margin-top:48px; } }