@import url(https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap);:root{--d:700ms;--e:cubic-bezier(.19,1,.22,1);--font-sans:'Rubik' , sans-serif;--font-serif:'Cardo' , serif}.page-content{display:grid;grid-gap:1rem;padding:1rem;max-width:1024px;margin:0 auto;font-family: var(--font-sans)}@media (min-width:600px){.page-content{grid-template-columns:repeat(2,1fr)}}@media (min-width:800px){.page-content{grid-template-columns:repeat(4,1fr)}}.card{position:relative;display:-webkit-box;display:flex;-webkit-box-align:end;align-items:flex-end;overflow:hidden;width:100%;text-align:center;color:#f5f5f5;background-color:#f5f5f5;box-shadow:0 1px 1px rgba(0,0,0,.1) , 0 2px 2px rgba(0,0,0,.1) , 0 4px 4px rgba(0,0,0,.1) , 0 8px 8px rgba(0,0,0,.1) , 0 16px 16px rgba(0,0,0,.1)}@media (min-width:600px){.card{height:250px;border-radius:8px}}.card:before{content:'';position:absolute;top:0;left:0;width:100%;height:110%;background-size:cover;background-position:0 0;-webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e);transition: -webkit-transform calc(var(--d) * 1.5) var(--e);transition: transform calc(var(--d) * 1.5) var(--e);transition: transform calc(var(--d) * 1.5) var(--e), -webkit-transform calc(var(--d) * 1.5) var(--e);pointer-events:none}.card:after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:200%;pointer-events:none;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),color-stop(11.7%,rgba(0,0,0,.009)),color-stop(22.1%,rgba(0,0,0,.034)),color-stop(31.2%,rgba(0,0,0,.072)),color-stop(39.4%,rgba(0,0,0,.123)),color-stop(46.6%,rgba(0,0,0,.182)),color-stop(53.1%,rgba(0,0,0,.249)),color-stop(58.9%,rgba(0,0,0,.32)),color-stop(64.3%,rgba(0,0,0,.394)),color-stop(69.3%,rgba(0,0,0,.468)),color-stop(74.1%,rgba(0,0,0,.54)),color-stop(78.8%,rgba(0,0,0,.607)),color-stop(83.6%,rgba(0,0,0,.668)),color-stop(88.7%,rgba(0,0,0,.721)),color-stop(94.1%,rgba(0,0,0,.762)),to(rgba(0,0,0,.79)));background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.009) 11.7%,rgba(0,0,0,.034) 22.1%,rgba(0,0,0,.072) 31.2%,rgba(0,0,0,.123) 39.4%,rgba(0,0,0,.182) 46.6%,rgba(0,0,0,.249) 53.1%,rgba(0,0,0,.32) 58.9%,rgba(0,0,0,.394) 64.3%,rgba(0,0,0,.468) 69.3%,rgba(0,0,0,.54) 74.1%,rgba(0,0,0,.607) 78.8%,rgba(0,0,0,.668) 83.6%,rgba(0,0,0,.721) 88.7%,rgba(0,0,0,.762) 94.1%,rgba(0,0,0,.79) 100%);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e);transition: -webkit-transform calc(var(--d) * 2) var(--e);transition: transform calc(var(--d) * 2) var(--e);transition: transform calc(var(--d) * 2) var(--e), -webkit-transform calc(var(--d) * 2) var(--e)}.card:nth-child(1):before {background-image:url(/images/top/seo-optimizacija-web-optimizacija.jpg)}.card:nth-child(2):before {background-image:url(https://web-optimizacija.rs/images/web-razvoj.jpg)}.card:nth-child(3):before {background-image:url(/images/blog/xadwords-reklame.jpg.pagespeed.ic.nub6sEZblX.jpg)}.card:nth-child(4):before {background-image:url(/images/blog/xweb-sajt-materijal.jpg.pagespeed.ic.0_TMDF6yOB.jpg)}.card:nth-child(5):before {background-image:url(/images/izrada-landing-stranice.jpg)}.card:nth-child(6):before {background-image:url(/images/izrada-web-prodavnice.jpg)}.card:nth-child(7):before {background-image:url(/images/dustvene-mreze.jpg)}.card:nth-child(8):before {background-image:url(/images/wordpress.jpg)}.content{position:relative;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center;width:100%;padding:2rem;-webkit-transition:-webkit-transform var(--d) var(--e);transition:-webkit-transform var(--d) var(--e);transition:transform var(--d) var(--e);transition:transform var(--d) var(--e) , -webkit-transform var(--d) var(--e);z-index:1}.content>*+*{margin-top:1rem}.title{font-weight:bold;text-shadow:2px 3px 9px black}.copy{font-size:16px;line-height:1.35;color:#fff}@media (hover:hover) and (min-width:600px){.card:after{-webkit-transform:translateY(0);transform:translateY(0)}.content{-webkit-transform:translateY(calc(100% - 4.5rem));transform:translateY(calc(100% - 10rem))}.content > *:not(.title) {opacity:0;-webkit-transform:translateY(1rem);transform:translateY(1rem);-webkit-transition:opacity var(--d) var(--e) , -webkit-transform var(--d) var(--e);transition:opacity var(--d) var(--e) , -webkit-transform var(--d) var(--e);transition:transform var(--d) var(--e) , opacity var(--d) var(--e);transition:transform var(--d) var(--e) , opacity var(--d) var(--e) , -webkit-transform var(--d) var(--e)}.card:hover,.card:focus-within{-webkit-box-align:center;align-items:center}.card:hover:before,.card:focus-within:before{-webkit-transform:translateY(-4%);transform:translateY(-4%)}.card:hover:after,.card:focus-within:after{-webkit-transform:translateY(-50%);transform:translateY(-50%)}.card:hover .content,.card:focus-within .content{-webkit-transform:translateY(0);transform:translateY(0)}.card:hover .content > *:not(.title),
  .card:focus-within .content > *:not(.title) {opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-delay: calc(var(--d) / 8);transition-delay: calc(var(--d) / 8)}.card:focus-within:before, .card:focus-within:after,
  .card:focus-within .content,
  .card:focus-within .content > *:not(.title) {-webkit-transition-duration:0s;transition-duration:0s}}