:root {
  --global-font:16px;
}

html {
font-size: var(--global-font);
}

body {
/* font-family: "Oswald", sans-serif; */
font-family: 'Roboto', sans-serif;
font-weight: 300;
}

a {
color: #161540;
}

a:hover {
color: #00badb;
}

p {
font-size: 1.2rem;
text-align: left;
}

ul,
ol {
font-size: 1.1rem;
}

h1,
h2,
h3 {
color: #00badb;
}

strong {
text-decoration: underline;
}

#logo {
font-size: 4rem;
text-transform: uppercase;
background: url(/img/logo.svg) center center no-repeat;
background-size: 100% auto;
text-indent: -9999px;
grid-area: logo;
display: grid;
align-items: center;
justify-content: center;
margin:auto;
width: 100%;
}

.navbar-toggler {
margin: 0 auto;
}

.navbar-toggler-name {
font-size: 1.2rem;
padding: 10px 20px;
text-transform: uppercase;
display: block;
}

.section-header {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.hero {
height: 250px;
display: flex;
align-items: left;
text-align: left;
justify-content: center;
flex-direction: column;
background: url(/img/header.jpg) top right no-repeat #b2cdd4;
background-size: cover;
padding: 15px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
color: #161540;
text-shadow: 0 0 5px #fff;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

.hero h1 {
color: #161540;
}

.bezp {
background: #161540;
padding: 40px 20px;
color: #fff;
text-align: center;
text-transform: uppercase;
font-size: 1.5rem;
}

.bezp span {
color: #00badb;
}

.hero-title {
margin-bottom: 20px;
max-width: 100%;
/* background: rgba(0,0,0,.6); */
font-size: 1.5rem;
}

.hero-big-text {
font-size: 3rem;
display: block;
}

@media (min-width: 768px) {
p {
  text-align: justify;
}

.hero {
  height: 450px;
}

.hero-title {
  max-width: 50%;
  /* color:#fff; */
  background: transparent;
  font-size: 2.5rem;
}

.hero-big-text {
  font-size: 4rem;
  display: block;
}

.bezp {
  font-size: 2.5rem;
}

#logo {
  background: url(/img/logo.svg)
    center center no-repeat;
  background-size: 100% auto;
  text-indent: -9999px;
  width:400px;
}
}

.hero-small-text {
font-size: 1.5rem;
display: block;
}

.btn-kol {
text-transform: uppercase;
}

.kinfo {
background: #00badb;
padding: 40px;
color: #fff;
font-size: 1.2rem;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}

.btn-info-kolonovita {
padding: 15px;
padding-top: 200px;
text-align: center;
line-height: 2rem;
background: url(/img/dla-pacjentow.jpg) top center no-repeat #fff;
border-radius: 6px;
height: 300px;
font-weight: 400;
color: #161540;
text-shadow: 0 0 5px #fff;
background-size: cover;
font-family: "Oswald", sans-serif;
border: 2px solid #00badb;
margin-top: 20px;
}

.btn-info-kolonovita span {
display: block;
font-size: 2rem;
}

#lekarze {
background: url(/img/dla-lekarzy.jpg) top center no-repeat #fff;
background-size: cover;
}

#kolonoskopia {
background: url(/img/kolonoskopia.jpg) top center no-repeat #fff;
background-size: cover;
}

.section-footer {
padding-bottom: 40px;
}

.section-info-2 {
padding-top: 40px;
padding-bottom: 40px;
}

#sonomed-logo {
display: block;
margin: 10px auto;
}

#sonomed-logo img {
max-width: 250px;
}

/* header */

#kol-header {
display: grid;
grid-gap: 0;
grid-template-columns: 1fr;
grid-template-areas:
  "logo"
  "infophone"
  "sizebtns";
}

@media (min-width: 768px) {
#kol-header {
  grid-template-columns: 1fr;
  grid-template-areas:
    "logo"
    "infophone"
    "sizebtns";
}
}

@media (min-width: 992px) {
#kol-header {
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "logo logo infophone sizebtns";
}

.btn-info-kolonovita span {
  display: block;
  font-size: 3rem;
}
}

#slogo {
grid-area: sonomed-logo;
display: grid;
align-items: center;
}

#slogo a img {
width: 180px;
}

#phone {
grid-area: infophone;
display: inline-grid;
align-content: center;
text-transform: uppercase;
color: #00badb;
}

#phone span {
font-size: 2rem;
font-weight: 700;
}

.callinfo {
margin-left: 20px;
margin-right: 20px;
font-size:2rem;
text-align: center;
}

@media(min-width:992px) {

  .callinfo {
      font-size:1.5rem;
    }

    .callinfo span {
      font-size:1.5rem;
    }
}

@media(min-width:1170px) {

  .callinfo {
      font-size:2rem;
    }
    .callinfo span {
      font-size:2rem;
    }
}


.call {
width: 100%;
padding: 20px 10px;
background: #f8f9fa;
}

#size {
grid-area: sizebtns;
display: inline-grid;
align-items: center;
grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 992px) {
#size {
  /* width: 200px; */
  margin: 20px auto;
}
}

#size .ksize {
background: #f8f9fa;
padding: 5px;
border-radius: 50%;
width: 40px;
height: 40px;
margin-left: 10px;
text-align: center;
border-color:#f8f9fa;
border:1px solid;
}

#size .ksize#size-kontrast {
  background: url(/img/eye.svg) center center no-repeat;
}

.btn-primary {
  background-color:#161540;
  border-color:#161540;
}

/* end header */

.powiaty-svg {
max-width: 800px;
display: block;
margin: 0 auto;
}

.section-content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}


/* kontrast */

body.kontrast, body.kontrast p, body.kontrast h1, body.kontrast h2, body.kontrast h3 {
  background: #000;
  color:gold !important;
  border-color:gold !important;
}

body.kontrast .bg-light {
  background-color: transparent!important;
}

body.kontrast .bg-light a {
  background-color: transparent!important;
  color:gold!important;
}

body.kontrast .navbar-light .navbar-toggler {
  color:gold;
  border-color:gold;
}

body.kontrast #size .ksize {
  background: #000;
  border-color:gold;
  }

  body.kontrast #size .ksize#size-kontrast {
    background: url(/img/eye.svg) center center no-repeat gold;
  }

  body.kontrast #phone {
    color: gold;
  }

  body.kontrast .call {
    background-color:#000;
  }

  body.kontrast .btn-primary {
    background-color:gold;
    border-color:gold;
    color:#000;
  }

body.kontrast a {
    color: gold;
}


body.kontrast #pacjenci, body.kontrast #lekarze, body.kontrast #kolonoskopia {
    background: #000;
}

/* end kontrast */


/* nowe style */

@media (min-width: 768px) {
#logo {
    background: url(/img/logo.png) center center no-repeat;
    background-size: 100% auto;
    text-indent: -9999px;
    width: 262px;
    float: left;
}
}

@media (max-width: 992px) {
#size {
    margin: 5px auto;
}
}

.header-hours, .header-contact, .header-address {
    display: block;
    position: relative;
    padding-left: 40px;
    float: left;
    font-size: 1rem;
    line-height: 18px;
    padding: 35px 0 35px 50px;
    font-family: 'Lato', sans-serif;
}

.header-hours-icon, .header-contact-icon, .header-address-icon {
    position: absolute;
    left: 0;
    top: 25px;
    color: #00a7a5;
    font-size: 54px;
}

.header-hours-txt strong, .header-contact-txt strong, .header-address-txt strong {
    text-decoration: none;
}

.cookies {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

body.kontrast span {
  color: gold;
 }
 
body.kontrast #alert-cookies {
    background-color: #000;
    border-color: #000;
}
 
 #size .ksize {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin-top: 12px;
   cursor: pointer;
   font-family: "Oswald", sans-serif;
}

#size {
    grid-template-columns: repeat(4, 1fr);
}


.size-block {
    display: block;
    float: right;
    padding: 1.2rem;
}

@media (max-width: 767px) {
#logo {
    background: url(/img/logo.png) center center no-repeat;
    background-size: 100% auto;
    text-indent: -9999px;
    max-width: 400px;
    margin: 12px auto;
}
.size-block {
    display: block;
    width: 230px;
    float: none;
    margin: 5px auto;
}
}

.header-hours, .header-contact, .header-address {
    font-family: 'Lato', sans-serif;
}
.cookies {
    border-radius: 0px;
}
.cookies span {
    cursor: pointer;
}

.cookies p {
    font-size: 1rem;
    margin-bottom: 0px;
}

@media(min-width: 992px) and (max-width: 1199px) {
.header-contact {
    float: right;
}
}

.halert {
    display:none;
}

.hero-title {
font-family: "Oswald", sans-serif;
font-weight: 300;
}

@media(max-width: 767px) {
#size .ksize {
    margin-top: 0;
}
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
    font-size: 1rem;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .4rem;
    padding-left: .4rem;
}
}