html {scroll-behavior: smooth;}

@media screen and (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}
}

body {margin:0; background-color: #f2efef; color: #e8eaed; letter-spacing: 1px;     font-family: "Poppins", sans-serif}
header {width: 100%;text-align: center; z-index: 1000; position: relative;}
header a {padding: 20px;}
h1 {text-align: center; font-weight: 600;  margin: 40px 0px; color: #fff;font-family: "Saira", sans-serif;    letter-spacing: 3px;}
h2 {
    font-size: 36px;
    color: #12162b;
    font-weight: 800;
    line-height: 1.2;
    text-align: center; margin: 40px 0px;}
h3 {text-align: left; font-weight: 400;  font-size: 28px; margin: 40px 0px 0px 0px; color: #243171;}
a {color: #e8eaed; text-decoration: none}
img {border-radius: 5px;}
.redletters {color:#f31314; font-size: 420px; text-align: center; font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;margin-top:-70px; z-index: 1000; position: absolute; z-index: 400;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)}
.textlink {color: #333; text-decoration: underline; font-weight: 600}
p {font-size: 18px; font-family: Arial; line-height: 24px; word-break: break-word;margin-bottom: 15px}
#top-padding {padding-top: 70px;}
.intro {background-image: url(../img/povrat-pdv-naslovna.webp); background-color: #162D73; height: 1000px; background-position: top center; background-repeat: no-repeat; background-size: cover;}
.child p {color: #fff; font-size: 1.5rem; padding: 10px;     line-height: 30px;}
.child h2 {color: #fff;}
.cvbutton {padding:10px 20px; border-radius: 10px; background-color: #2d41a2; font-size: 1.3rem; font-weight: 100; font-family: Roboto, sans-serif;min-height: 10px;display:inline-block;}
.cvbutton span  {vertical-align: super; margin-right: 5px;}
.buttons {background-color: #162D73;}
.polje-naslov {font-weight: 600;text-align: center;}
#u-medijima {background-color: #202020;}
#u-medijima h2 {color: #a4a4a4;}
#u-medijima .polje {border: 1px solid #3e3e3e;background: #282828; border-radius: 5px}
.polje-naslov-mediji {font-weight: 400;text-align: left; padding: 20px 20px 40px 20px}
.mediji-slike {width: 100%}
.polje-naslov:hover {background-color: #1171cb;}
.polje-naslov img {float:right; margin-top: -8px}
.container {padding: 10px; display: block; margin-left: auto; margin-right: auto; }
.grid, .grid1, .grid2, .grid3, .grid4 {display: grid; grid-gap: 20px;}
.grid  {grid-template-columns: 25% 24% 23% 23%;}
.grid1 {grid-template-columns: 50% 50%;}
.grid2 {grid-template-columns: 33% 33% 33%;}
.grid3 {grid-template-columns: 33% 66%;}
.grid4 {grid-template-columns: 80% 20%;overflow: hidden}
.grid > div, .grid > a > div,   .grid3 > div, .grid3 > a > div {padding:20px; border-radius: 10px; border: 1px solid #e8eaed; background-color: #0d3d7496; font-size: 1.3rem; font-weight: 100; font-family: Roboto, sans-serif;min-height: 100px;line-height: 1.8rem}
.grid2 > .polje-naslov > a {padding:10px; border-radius: 10px; border: 1px solid #e8eaed; background-color: #0d3d74; font-size: 18px; font-weight: 100; font-family: Roboto, sans-serif;}
.grid > div:hover, .grid > a > div:hover,  .grid3 > div:hover, .grid3 > a > div:hover {border: 1px solid #0e1a21; background-color: #094f92}
.pitanje {border-top: 1px solid #474747; padding-top:20px; font-weight: 600;}
.borderbottom {margin: 50px 0;}
.section2 {background-color: #f2f0ef; color: #333}
.section3 {background-color: #cecece; color: #333}
.section4 {background-color: #2f2f2f; color: #fff}
.section5 h2 {color: #fff; font-weight: 100;letter-spacing: 0px; text-align: center; padding-bottom: 40px}
.parent {height: 50px;display: flex;}
.child {height: 40px;width: 100%;align-self: flex-end;z-index: 500}
.cetirigumba {margin-top: -160px}
ol {list-style-type: lower-alpha;font-size: 18px; font-family: Arial; line-height: 24px;}
.w50, .w20 {padding:20px; border-radius: 10px;  background-color: #0d3d74; font-size: 1rem; font-weight: 100; font-family: Roboto, sans-serif; line-height: 1.8rem; display: block;}
.w50 {margin:30px 0;}
.w20 {margin:10px 0;}
.w50:hover, .w20:hover {  background-color: #1171cb;}
.hz-img {display: grid}
.hz-text {float: left;width: calc(100% - 240px);margin-right: 20px}
footer { background-color: #000000;
background-image: linear-gradient(315deg, #1e1e1e 0%, #424242 74%) }
footer .naslov {     font-size: 1.25rem;
    line-height: 1.75rem;font-weight: 600;color:#fff; }
footer .polje-naslov {margin-top: 20px; padding:10px; border-radius: 5px; border: 1px solid #e8eaed; background-color: #252525; font-size: 18px; font-weight: 100; font-family: Roboto, sans-serif;width: fit-content;}
footer .polje-naslov:hover {border: 1px solid #304251; background-color: #fff; font-weight: 600; font-family: Roboto, sans-serif;width: fit-content;}
footer .polje-naslov a:hover {color: #304251;}
.date {border-top: 1px solid #e5e7eb; padding: 20px 0px;text-align: center; margin-top: 40px}
.kontakti a {padding:10px; border-radius: 10px; border: 1px solid #e8eaed; background-color: #0d3d74; font-size: 18px; font-weight: 100; font-family: Roboto, sans-serif;min-height: 100px;line-height: 1.8rem; display: table}
.clearfix {clear: both;}
 .ifr {height: 400px; width:100%}
.flg {width:50px}

/* Extra Large Devices, Wide Screens */
@media only screen and (min-width: 1501px){
    .container {width: 1400px;}
    .intro {height: 750px;}
    h1 {font-size: 36px;margin: 40px 0px;}
    .w80 {width:74%; float: left; margin-right: 20px;}
    .w20 {width: 220px; float: none; display: grid;}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1500px) and (min-width: 991px){
    .container {width: 960px;}
    .intro {height: 750px;}
     .ifr {height: 300px; width:100%}
    h1 {font-size: 36px;margin: 40px 0px;}
    .grid4 {grid-template-columns: 70% 30%;overflow: hidden}
    .w80 {width:74%; float: left; margin-right: 20px;}
    .w20 {width: 220px; float: none; display: grid;}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 990px) and (min-width: 769px){
    .container {width: 740px;margin: 10px;}
     .intro {height: 820px;}
    .grid1 {grid-template-columns: 100%;}
    .ifr {height: 300px; width:100%}
    .grid, .grid1, .grid2, .grid3, .grid4 {display: grid;grid-template-columns: 100%;grid-gap: 30px;}
    h1 {font-size: 36px;margin: 40px 0px;}
    .grid > div, .grid1 > div, .grid3 > div, .grid4 > div {min-height: 90px;}
    .parent {height: 350px;display: flex;}
    .child {height: 40px;width: 100%;align-self: flex-end;}
    .cetirigumba {margin-top: 0px; background-color: #f2efef}
    .w20 {width: 220px; float: none; display: grid;}
    .hz-img {display: grid; margin-top: 90px}
    .hz-text {float: left;width: calc(100% - 240px);margin-right: 20px}
    .hz {display: inline-block}
    .redletters {font-size: 170px; margin-top: -70px; font-weight: 900}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) and (min-width: 481px){
    .container {width: 90%;}
    h1 {font-size: 28px;margin: 30px 0px;}
    .intro {height: 760px;}
    .grid1 {grid-template-columns: 100%;}
    .ifr {height: 300px; width:100%}
    .w80,  .w50 {width:100%;} 
    .w20 {width: 220px; float: none; display: grid;}
    .grid {display: none}
    .grid2, .grid3, .grid4 {display: grid;grid-template-columns: 100%;grid-gap: 30px;}
    .parent {height: 20px;display: flex;}
    .child p {
    font-size: 18px;
    padding: 10px;
    line-height: 20px;}
        .hz-img {display: grid}
    .hz-text {float: none;width: 100%} 
    .redletters {font-size: 170px; margin-top: -70px; font-weight: 900}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) and (min-width: 321px){
    .container {width: 90%;}
  h1  {font-size: 34px; font-weight: 600}
    h2  {font-size: 24px}
       .grid {display: none}
    .grid1 {grid-template-columns: 100%;}
    .ifr {height: 200px; width:100%}
    .parent {height: 30px}
    .grid2, .grid3, grid4 {display: grid;grid-template-columns: 100%;}
    .w80, .w50 {width:100%;} 
    .w20, .whz img {width: 100%; float: none; display: grid;border-radius: 10px;}
    .child p { font-size: 20px;padding: 0px}
    .hz-text {float: none; width: 100%;}
    .intro {height: 760px}
    .redletters {font-size: 170px; margin-top: -30px; font-weight: 900}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    .container {width: 90%;} 
    .w50 {width: 100%;}
    .w20, .whz img {width: 100%; float: none; display: grid;}
   .grid {display: none}
    .grid1 {grid-template-columns: 100%;}
    .ifr {height: 200px; width:100%}
    .parent {height: 0px}
    .hz-text {float: none; width: 100%;}
    .intro {height: 760px}
    .redletters {font-size: 170px; margin-top: -30px; font-weight: 900}
}



@media print {
body {margin: 0;padding:0; background-color: #fff;font-family: roboto, sans-serif;}
h1 {font-size: 20pt;color: #000;}
h2 {font-size: 16pt;color: #000;}
p {font-size: 12pt; line-height: 14pt; color: #000;}
a, .textlink {color: #000; text-decoration: underline}
.container {width: 90%;}
.grid, grid1, .grid2, .grid3, grid4 {display: grid;grid-template-columns: 100%;}
.grid > div, .grid2 > div, .grid3 > div {border:none; min-height: 10px}
.redletters {font-size: 20pt;color: #000;}
}