html { width: 100%; overflow-x: hidden } body { max-width: 100% } footer { max-width: 1198px; margin: auto; } .bg-gradient { width: 100%; background: transparent url("../images/bg-gradient.png") repeat-x 0 0; min-height: 250px; } h1 { font-family: "Roboto", sans-serif; font-weight: 700; font-size: 48px; text-align: center; padding: 60px 0; margin: 0; color: #797979 } .spec { margin: 10px 51% 40px 1%; padding: 10px; background-color: #11A0D7; line-height: 140%; font-family: Arial; font-size: 0.765vw; } .spec a { color: white; } .przetargi-items { display: flex; flex-wrap: wrap; } .przetargi-items:before, .przetargi-items:after { content: " "; display: table } .przetargi-items:after { clear: both } .przetargi-items .item { width: 22.97%; border: 1px solid gainsboro; margin: 0 1% 1% 1%; padding: 1.8%; line-height: 0; } .przetargi-items .item .description:before { visibility: hidden; width: 100%; text-align: center; display: block; } .przetargi-items .item .description { color: white; background-color: #11A0D7; padding: 5.5% calc(8.5% + 1.5em) 5.5% 6.5%; font-size: 0.73vw; border-radius: 2%; text-align: center; line-height: normal; font-family: Arial; position: relative; display: flex; justify-content: center; white-space: normal; flex-direction: column; } .przetargi-items .item a:hover, .przetargi-items .item a:visited { color: initial; text-decoration: none; } .przetargi-items .item img { display: block; width: 46%; margin: 10% auto 20% auto; } .arrow { border-radius: 2%; transform: translateX(0%) translateY(40%); transition: transform .1s; width: 1.4999em; display: table; right: 1.1em; position: absolute; top: 45%; } .arrow-top, .arrow-bottom { background-color: #fff; height: 2px; } .arrow-top:after, .arrow-bottom:after { background-color: lightgray; content: ''; height: 100%; position: absolute; top: 0; transition: all 0.15s; border-radius: 30% 0% 0% 30%; } .arrow-top { transform: rotate(45deg); transform-origin: 80% 0%; border-radius: 30% 0% 0% 30%; } .arrow-top:after { left: 100%; right: 0; transition-delay: 0s; } .arrow-bottom { transform: rotate(-45deg); transform-origin: 80% 100%; border-radius: 30% 0% 0% 30%; } .arrow-bottom:after { left: 0; right: 100%; transition-delay: 0.15s; } .description:hover span { color: lightgray; } .description:hover .arrow-top:after { left: 0; transition-delay: 0.15s; } .description:hover .arrow-bottom:after { right: 0; transition-delay: 0s; } .arrow:active { width: 25px; } .przetargi-items .item>div>span { position: absolute; width: calc(91% - 5.87% - 1.5em); top: 30%; } .site-wrapper { max-width: 1198px; margin: auto; } @media screen and (min-width: 1198px) { .przetargi-items .item .description { font-size: 9px; } .spec { font-size: 9.2px; } } @media screen and (min-width: 768px) and (max-width: 959px) { h1 { font-size: 44px; padding: 50px 0 } .przetargi-items .item+.item { float: right } .arrow-top, .arrow-bottom { height: 2px; } .arrow-top { transform-origin: 72% 0%; } .arrow-bottom { transform-origin: 72% 100%; } .arrow { top: 40%; } } @media screen and (min-width: 600px) and (max-width: 767px) { h1 { font-size: 38px; padding: 40px 0 } .spec { max-width: 100%; margin: 0 1% 40px; font-size: 1.48vw; } .przetargi-items .item { width: 47.9%; margin: 0 1% 2% 1%; padding: 4.5%; } .przetargi-items .item .description { font-size: 1.48vw; } .arrow-top { transform-origin: 83% 0%; } .arrow-bottom { transform-origin: 83% 100%; } .arrow { top: 45%; } } @media screen and (min-width: 480px) and (max-width: 599px) { h1 { font-size: 32px; padding: 35px 0 } .spec { max-width: 100%; margin: 0 5% 40px; font-size: 2.97vw; } .przetargi-items .item .description { font-size: 2.97vw; } .arrow { top: 45%; } } @media screen and (max-width: 599px) { .przetargi-items .item { width: 90%; margin: 0 auto 30px; padding: 5.845%; } .arrow { width: 1.5em; top: 45%; } .arrow-top { transform-origin: 84% 0; height: 3px; } .arrow-bottom { transform-origin: 84% 100%; height: 3px; } } @-moz-document url-prefix() { .arrow { top: 45%; } .arrow-top { transform-origin: 80% 0; } .arrow-bottom { transform-origin: 80% 100%; } @media screen and (min-width: 768px) and (max-width: 959px) { .arrow { top: 40%; } } @media screen and (min-width: 600px) and (max-width: 767px) { .arrow { top: 45%; } .arrow-top { transform-origin: 85% 0; } .arrow-bottom { transform-origin: 85% 100%; } } @media screen and (max-width: 599px) { .arrow { top: 45%; } .arrow-top { transform-origin: 85% 0; } .arrow-bottom { transform-origin: 85% 100%; } } @media screen and (max-width: 479px) { .arrow-top { transform-origin: 85% 0; } .arrow-bottom { transform-origin: 85% 100%; } } @media screen and (max-width: 400px) { .arrow-top { transform-origin: 85% 0; } .arrow-bottom { transform-origin: 85% 100%; } } } @media screen and (max-width: 479px) { h1 { font-size: 26px; padding: 30px 0 } .spec { margin: 0 5% 40px; font-size: 2.9vw; } .przetargi-items .item .description { font-size: 2.9vw; } .arrow-top { transform-origin: 80% 0; } .arrow-bottom { transform-origin: 80% 100%; } } @media screen and (max-width: 400px) { .arrow { top: 40%; } .arrow-top { transform-origin: 78% 0; } .arrow-bottom { transform-origin: 78% 100%; } }