body::-webkit-scrollbar-track {width: 35px; } body::-webkit-scrollbar {width: 12px; background-color: #0d0d0d; box-shadow: inset 3px 3px 3px black; } body::-webkit-scrollbar-thumb {background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); } * {margin: 0; padding: 0; box-sizing: border-box;} h1, nav, h2, h3{text-align: center; text-align: -webkit-center; font-family: 'Montserrat', sans-serif;} body {background-color: #0d0d0d} p {font-family: 'Roboto', sans-serif; font-size: 16pt; padding-bottom: 25px; color: white;} header {text-align:center; } form, input, textarea, #posalji {font-family: 'Roboto', sans-serif;} main, #wrapper {width: 70%; max-width: 1500px; margin: 0 auto; text-align: center; text-align: -webkit-center; text-align-last: center; -moz-text-align-last: center;} h1 {font-size: 50pt; padding: 50px 0 15px 0; color: white; display: block; clear: both; } h3 {font-size: 19pt; color: white; padding-bottom: 25px;} h2 {font-size: 25pt; color: #c3a65d; padding-bottom: 10px} #slika {width: 342px; margin: 0 auto; margin-bottom: 25px;} .aktivna {color: #c3a65d;} p a {text-decoration: none; color: #c3a65d;} nav {text-align: center; position: relative;} nav ul {display: inline-block; list-style-type: none; margin: 0; padding: 0; overflow: hidden;} nav ul li {float: left; } nav ul li a {display: block; padding: 45px 15px 25px 15px; text-decoration: none; color: white; transition: color 0.6s; font-size: 1.5em;} nav ul li a:hover {color: #c3a65d;} footer {text-align: center; padding: 10px 0 0 0;} #social {position: fixed; width: 75px; font-size: 34pt; text-align: center; top: 0px; right: 0px; background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ padding: 10px 0 20px 0; color: #0d0d0d; margin-right: 4.5%; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; line-height: 1.2;} #social a {color: #0d0d0d;} form {color: white; text-align: center;} #ime, #email, #poruka {background-color: #0d0d0d; padding: 5px; border: 2px solid #c3a65d; color: white; width: 50%; border-radius: 5px;} footer p {font-size: 0.9em; margin-top: 15px;} #pleter {background-image: url(slike/pleter.svg); background-repeat: repeat-x; height: 32px; width:100%; margin: 45px 0;} #posalji {background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: black; border: none; text-align: left; padding: 10px 10px 10px 10px; border-radius: 5px; cursor: pointer; font-weight: bold;} #wrapper {width: 40%; max-width: 900px; margin: 0 auto;} .clear {clear: both;} figure {position: relative; width: 45%; margin-left: 3%; float: left; margin-bottom: 3%; } figure img {display: block; width: 100%; height: auto; border-radius: 15px; } figure p {text-align: center;} .preko {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; padding: 20% 10%; opacity: 0; transition: .5s ease; border-radius: 15px; } figure:hover .preko {opacity: 1; background-color: rgba(0,0,0,0.7);} #album {width: 48%; float: right;} #album img {display: block; width: 100%; height: auto; border-radius: 15px;} #diskografija p {font-size: 1.4vw;} #album p {margin-top: 10px;} button {background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border: 0; padding: 10px 15px; font-size: 15pt; font-family: "Roboto", sans-serif;} #lijevo {width: 48%; float: left; text-align: left; padding-bottom: 25px; text-align-last: left;} #album a {color: #c3a65d; text-decoration: none; padding: 6px 12px; font-family: "Montserrat", sans-serif; font-size: 20pt; border: 3px solid #c3a65d; transition: background-color 0.6s, color 0.6s;} #album a:hover {background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: #0d0d0d;} #deezer {margin-right: 12px;} .drop {font-size: 10pt; text-align: left; padding-left: 15px; margin-top: -20px; opacity: 0; transition: opacity 0.6s;} .drop a {padding: 0; line-height: 1.5;} .stupac {float: left; margin-top: 25px; padding-bottom: 25px; font-family: "Roboto", sans-serif; width: 33%;} .pjesma h3 {color: #c3a65d; cursor: pointer;} #desni {float: right;} .tekst p {font-size: 14pt; margin-bottom: 35px; text-align: center; text-align-last: center;} #diskografija:hover .drop{opacity: 1;} #gore {position: fixed; width: 75px; font-size: 42pt; text-align: center; bottom: 0px; right: 0px; padding: 5px 20px; color: #c3a65d; margin-right: 4.5%; cursor: pointer; visibility: hidden;} #bend a {color: white; transition: color 0.6s;} #bend a:hover {color: #c3a65d;} #spotovi {width: 100%; max-width: 1120px; text-align: left; text-align-last: left; position: relative;} #spotovi ul {width: 30%; float: left; height: 100%;} #spotovi ul li {width: 100%; font-family: "Roboto", sans-serif; color: #0d0d0d; font-size: 20px; font-weight: bold; width: 100%; background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ padding: 36px 15px; line-height: 2.5; height: 25%; list-style-type: none; border-bottom: 4px solid #0d0d0d; cursor: pointer; transition: color 0.6s, background-color 0.6s;} #spotovi ul li:hover {background-color: #0b0b0b; color: #c3a65d;} #videospotovi {width: 70%; height: 500px; float: left; border-right: 6px solid #0d0d0d; margin: 0 auto;} #videospotovi img {width: auto; height: 100%;} .prev, .next {cursor: pointer; position: absolute; top: 250px; width: auto; padding: 16px; margin-top: -22px; color: #c3a65d; font-weight: bold; font-size: 28px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } #videospotovi iframe {float: left;} .next {right: 335px; border-radius: 3px 0 0 3px;} .prev:hover, .next:hover {background-color: rgba(0,0,0,0.8); } #spot1, #spot2, #spot3, #spot4 {display: none;} #responzivna {text-align: left; position: fixed; width: 100%; float: left; display: none;} #responzivna ul {list-style-type: none; display: block; width: 100%;} #responzivna ul li a {display: block; width: 100%; float: left; clear: both; background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: #0d0d0d; padding: 12px; } .dropmenu {border-bottom: #0d0d0d;} #responzivna ul li a:hover {color: #c3a65d; background-color: #0d0d0d;} #menu_top {display: block; width: 100; padding: 12px; background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ box-shadow: 2px 2px 2px black;} #menu_top i.fa {font-size: 30pt; float: right; margin:12px 15px 0 0; color: #0d0d0d;} .slika_naslov {display: none;} .spot {width: 100%; float: left; margin-top: 25px; z-index: 1;} .spot h2 {padding-bottom: 0; font-size: 2.3vw;} video {width: 100%; object-fit: contain; z-index: 1;} #index_head {margin: 0 auto;} #kontejner {width: 100%;} #kontejner img {height: 95vh; max-width: 100%;} #nav_index {font-size: 16pt; margin-top: -65px;} #artikl {width: 75%; margin: 0 auto;} aside {float: left;} #gore {display: none;} .index_section2 {text-align: center; width: 48%; float: left; border-top, border-bottom: 3px solid #c3a65d;} #prvi, #drugi {border-right: 6px solid #9b7e45; border-left: 6px solid #9b7e45;} #drugi {float: right;} #prvi a {border-right: 3px solid #c3a65d;} .index_section2 {margin:25px 0 0 2%;} .index_section2 p {padding: 10px;} .index_section2 a {text-decoration: none; font-size: 16pt; color: #0d0d0d; font-family: "Montserrat",sans-serif; background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ display: block; width: 100%; padding: 5px 0; margin: 0 auto; } #shop.index_section2 {width: 100%; overflow: hidden;} #shop img {width: 100%; border: 3px solid #c3a65d;} #shop a, #shop h2 {color: #c3a65d; background: transparent;} .index_section2 h2, #artikl h2 {color: #0d0d0d; background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #c3a65d 0%, #efd52b 37%, #efd52b 60%, #bf8b0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ display: block; width: 100%; padding: 4px 0;} #index_section, .spot {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;} #index_section iframe, .spot iframe {position:absolute; top:0; left:0; width:100%; height:100%;} span {font-style: italic;} #kontejner h1 {color: #0d0d0d; position: absolute; bottom: 0; left: 0; font-size: 3vw;} #dobrodosli {display: none;} @media screen and (max-width: 992px) {header {display: none;} nav {display: none;} #responzivna {display: block; z-index: 1;} #dobrodosli {display: block; font-size: 6vw; text-align: center;} #artikl {width: 100%;} main {text-align: center;} .tekst {text-align: center;} #artikl h2 {text-align: center; font-size: 6vw;} #artikl a {font-size: 3.5vw;} #shop {width: 100%;} #index_section {width: 100%;} .index_section2 {width: 100%; margin: 10px 0;} #nav_index {display: none;} #social {display: none;} #responzivna ul li {width: 100%; border-bottom: 2px solid #0d0d0d;} #responzivna ul li a {background: transparent;} #responzivna ul {background: #c3a65d; /* Old browsers */ background: -moz-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9b7e45 0%,#c3a65d 40%,#c3a65d 60%,#9b7e45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */} .dropmenu {text-align: center; font-size: 16pt;} #responzivna {max-height: 100%; overflow: auto;} main {width: 80%;} p {font-size: 13pt;} h1 {padding: 115px 0 15px 0; font-size: 10vw;} #diskografija p {font-size: 13pt;} #wrapper {width: 80%;} #gore {width: 45px; font-size: 22pt; text-align: center; bottom: 0px; right: 0px; padding: 5px 10px; color: #c3a65d; margin-right: 2.5%; visibility: hidden; cursor: pointer;} i.fa-angle {color: #c3a65d; cursor: pointer;} #pleter {width: 100%} #slika {width: 70%;} #ime, #email, #poruka {width: 85%;} footer p {font-size: 3vw;} #album {width: 80%; text-align: center; float: none;} figure {width: 100%; margin: 0 auto 25px auto; pointer-events: none;} #lijevo {width: 100%; text-align: center; text-align-last: center; padding-top: 20px;} figure h2 {display: none;} .preko {opacity: 1; position: relative; padding: 10px 0 25px 0;} .preko p {padding: 0; margin: 0; font-size: 15pt;} .slika_naslov {display: block; font-size: 8vw;} #tekstovi_naslov {font-size: 7vw;} .stupac {width: 100%; padding-bottom: 0; margin-top: 0; padding-bottom: 0;} .stupac h3 {font-size: 20pt;} #gore {display: none;} #vise {display: none;} #album a {padding: 4px 8px; font-size: 14pt;} .spot {width: 100%; margin: 25px auto 0 auto; z-index: 1;} .spot h2 {font-size: 5vw;} #bend p {font-size: 15pt;} } @media (max-width: 992px) and (orientation: landscape) {#responzivna ul li {width: 50%;} #responzivna li:nth-child(even){border-left: 2px solid #0d0d0d;} video {height: 20%;} } @media (max-width: 768px) {.stupac h3 {font-size: 14pt;} }