#map-wrap { /*background-image: url("mapka.png");*/ /*background-repeat: no-repeat;*/ /*background-size: contain;*/ /*background-position: bottom right;*/ width: 850px; height: 477px; max-width: 100%; margin: 0 auto; padding-top: 50px; margin-bottom: 50px; position: relative; } @media (max-width: 575px) { #map-wrap { background-color: #fff; } } #map-cloud { background-image: url("../images/mapka_dymek_cien.png"); max-width: 100%; width: 416px; height: 209px; background-repeat: no-repeat; background-size: contain; padding-top: 30px; padding-right: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { #map-cloud { position: absolute; top: 20%; } } #map-cloud-text, #map-cloud-text-2 { font-size: 1.5rem; color: #0053a0; } #map-cloud-button { min-width: 140px; } .btn-psb, a.btn-psb, button.btn-psb, input.btn-psb, a.btn-psb:hover { color: #fff; background: #0053a0; vertical-align: middle; } .btn-psb > .material-icons { color: #fff; vertical-align: middle; margin-bottom: 3px; } @media (max-width: 575px) { #map-cloud { padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; max-width: 100%; height: auto; width: 100%; background: #fff; margin-top: 0; z-index: 1; } } @media (max-width: 575px) { #map-wrap { margin-bottom: 30px; padding-top: 30px; height: 420px; margin-top: 15px; } } @media (max-width: 575px) { #map-cloud-text, #map-cloud-text-2 { font-size: 20px; } } #map-wrap { width: 850px; height: 477px; max-width: 100%; padding-top: 0px; margin-top: 30px; padding-bottom: 50px; margin-right: auto; margin-left: auto; } #map-cloud { background-image: url("../images/mapka_dymek_cien.png"); width: 416px; height: 209px; max-width: 100%; background-repeat: no-repeat; background-size: contain; padding-top: 60px; padding-right: 30px; } #map-cloud-text, #map-cloud-text-2 { font-size: 1.5rem; color: #0053a0; } #map-cloud-button { min-width: 140px; } .btn-psb, a.btn-psb, button.btn-psb, input.btn-psb, a.btn-psb:hover { color: #fff; background: #0053a0; vertical-align: middle; } .btn-psb > .material-icons { color: #fff; vertical-align: middle; margin-bottom: 3px; } @media (max-width: 575px) { #map-cloud { padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; max-width: 100%; height: auto; width: 100%; background: #fff; margin-top: 0; } } @media (max-width: 575px) { #map-wrap { margin-bottom: 0px; margin-top: 0px; padding-top: 30px; height: 420px; } } @media (max-width: 575px) { #map-cloud-text, #map-cloud-text-2 { font-size: 20px; } } .icon-arrow { content: ''; min-width: 28px; width: 28px; height: 28px; vertical-align: middle; margin-left: 10px; background-image: url(../images/right-arrow.png); display: inline-block; background-size: auto; } .btn { display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .btn-psb { border-color: #007bff; border-width: 1px; } #map-cloud-text. #map-cloud-text-2 { margin-bottom: 30px; } #map-img { max-width: 100%; }