html,
body {
width: 100%;
height: 100%
}
html {
overflow-x: hidden;
}
body {
font-family: 'Saira Condensed', sans-serif;
letter-spacing: .07rem;
line-height: 1.65;
font-weight: 300
}
#partneri .glavni-partneri a img[alt="Nektar"] {
width: 58%;
}
.srebrni-partneri a img[alt="Oxl"] {
width: 72%;
}
.font-caveat {
font-family: 'Caveat Brush', cursive !important
}
.m0 {
margin: 0 !important
}
.p0 {
padding: 0 !important
}
.btn-light {
border-radius: 0;
border: 0.125rem solid #1f1f1f;
background-color: transparent;
color: #1f1f1f;
padding: .25rem .75rem;
text-transform: uppercase;
display: table;
margin: 0 auto;
transition: .5s ease all;
cursor: pointer;
font-weight: 500
}
.btn-light:hover {
background-color: #e32324;
color: #ffffff;
border-color: #e32324
}
.btn-light:focus {
outline: none;
box-shadow: none
}
.btn-red {
border-radius: 0;
border: 0.125rem solid #e32324;
background-color: #e32324;
color: #ffffff;
padding: .25rem .75rem;
text-transform: uppercase;
display: table;
margin: 0 auto;
transition: .5s ease all;
cursor: pointer;
font-weight: 500
}
.btn-red:hover {
background-color: #1f1f1f;
color: #ffffff;
border-color: #1f1f1f
}
.btn-red:focus {
outline: none;
box-shadow: none
}
.btn-green {
border-radius: 0;
border: 0.125rem solid #1fb94e;
background-color: #1fb94e;
color: #ffffff;
padding: .25rem .75rem;
text-transform: uppercase;
display: table;
margin: 0 auto;
transition: .5s ease all;
cursor: pointer;
font-weight: 500
}
.btn-green:hover {
background-color: #1f1f1f;
color: #ffffff;
border-color: #1f1f1f
}
.btn-green:focus {
outline: none;
box-shadow: none
}
a {
color: #1f1f1f;
text-decoration: none
}
a:hover {
color: #00448f;
}
.font-bold {
font-weight: 700 !important
}
::-webkit-scrollbar {
width: .75em
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey
}
.min-w-9 {
min-width: 9rem
}
#header {
height: 100%;
position: relative;
overflow: hidden;
transition: .5s ease all;
background-color: #00448f
}
#header video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover
}
#header .container {
position: relative;
text-transform: uppercase;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
z-index: 3;
padding-top: 7.5rem
}
@media only screen and (max-width: 990px) {
#header .container {
padding: 0;
justify-content: center
}
}
#header .container .logo {
align-self: center;
margin-bottom: 3rem
}
@media only screen and (max-height: 649px) {
#header .container .logo {
margin-bottom: 1rem
}
}
#header .container .logo img {
width: 10rem
}
@media only screen and (max-height: 649px) {
#header .container .logo img {
width: 4rem
}
}
@media all and (max-height: 414px) {
#header .container .logo img {
width: 3rem
}
}
#header .container .content {
align-self: center;
color: #ffffff;
text-align: center
}
#header .container .content h1 span {
display: block
}
#header .container .content h1 span:first-child {
font-size: 3.98rem;
font-weight: 600
}
@media only screen and (max-width: 990px) {
#header .container .content h1 span:first-child {
font-size: 2rem
}
}
@media only screen and (max-width: 767px) {
#header .container .content h1 span:first-child {
font-size: 1.25rem7
}
}
@media all and (max-height: 801px) {
#header .container .content h1 span:first-child {
font-size: 1.75rem
}
}
@media only screen and (max-height: 649px) {
#header .container .content h1 span:first-child {
font-size: 1.25rem
}
}
@media all and (max-height: 414px) {
#header .container .content h1 span:first-child {
font-size: 1rem
}
}
#header .container .content h1 span:nth-child(2) {
color: #e32324;
font-size: 7.81rem;
margin: .5rem 0
}
@media only screen and (max-width: 990px) {
#header .container .content h1 span:nth-child(2) {
font-size: 4.4rem
}
}
@media only screen and (max-width: 767px) {
#header .container .content h1 span:nth-child(2) {
font-size: 2.8rem
}
}
@media all and (max-height: 801px) {
#header .container .content h1 span:nth-child(2) {
font-size: 3.5rem
}
}
@media only screen and (max-height: 649px) {
#header .container .content h1 span:nth-child(2) {
font-size: 2.6rem
}
}
@media all and (max-height: 414px) {
#header .container .content h1 span:nth-child(2) {
font-size: 2.1rem
}
}
#header .container .content h1 span:last-child {
font-size: 8.48rem;
font-weight: 600
}
@media only screen and (max-width: 990px) {
#header .container .content h1 span:last-child {
font-size: 4.3rem
}
}
@media only screen and (max-width: 767px) {
#header .container .content h1 span:last-child {
font-size: 2.7rem
}
}
@media all and (max-height: 801px) {
#header .container .content h1 span:last-child {
font-size: 3.75rem
}
}
@media only screen and (max-height: 649px) {
#header .container .content h1 span:last-child {
font-size: 2.7rem
}
}
@media all and (max-height: 414px) {
#header .container .content h1 span:last-child {
font-size: 2.3rem
}
}
#header .bottom-arrow {
background-color: #00448f;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: .5rem;
z-index: 4
}
#header .bottom-arrow .icon-bg {
background-color: #00448f;
width: 35rem;
margin: -2.5rem auto 0 auto;
position: relative
}
#header .bottom-arrow .icon-bg .fa {
display: flex;
justify-content: center;
width: 100%;
background-color: #00448f;
color: #ffffff;
font-size: 3rem;
position: absolute;
top: 0;
left: 0;
cursor: pointer
}
#header .bottom-arrow .icon-bg::before {
content: "";
width: 0;
height: 0;
border-top: 2rem solid transparent;
border-bottom: 1rem solid #00448f;
border-right: 1rem solid #00448f;
position: absolute;
left: -1rem;
top: 0
}
#header .bottom-arrow .icon-bg::after {
content: "";
width: 0;
height: 0;
border-top: 2rem solid transparent;
border-bottom: 1rem solid #00448f;
border-left: 1rem solid #00448f;
position: absolute;
right: -1rem;
top: 0
}
@media only screen and (max-width: 767px) {
#header .bottom-arrow .icon-bg {
width: 90% !important;
left: 50%;
margin-left: -45%
}
}
@media all and (max-height: 414px) {
#header .bottom-arrow .icon-bg {
margin-top: -1.25rem
}
#header .bottom-arrow .icon-bg .fa {
font-size: 1.5rem
}
#header .bottom-arrow .icon-bg::before {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid transparent;
border-bottom: 1rem solid #00448f;
border-right: 1rem solid #00448f;
position: absolute;
left: -1rem;
top: 0
}
#header .bottom-arrow .icon-bg::after {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid transparent;
border-bottom: 1rem solid #00448f;
border-left: 1rem solid #00448f;
position: absolute;
right: -1rem;
top: 0
}
}
#header .covervid-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
#header .video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 68, 143, 0.55)
}
#header-single-page {
background-image: url("../assets/tim-bg2.jpg");
background-size: cover;
background-position: center center;
height: auto;
position: relative
}
#header-single-page:before {
content: "";
width: 100%;
height: 100%;
background-color: rgba(31, 31, 31, 0);
position: absolute;
top: 0;
left: 0
}
#header-single-page .container {
position: relative;
text-transform: uppercase;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center
}
#header-single-page .container .logo {
align-self: center;
margin: 3rem 0
}
#header-single-page .container .logo img {
width: 9rem
}
#raspored .row {
display: flex;
flex-wrap: wrap;
flex: 1;
height: 100%
}
#raspored .row .col-md-9 .item {
height: 100%
}
#raspored .raspored-slider {
height: 100% !important
}
#raspored .raspored-slider .owl-nav {
opacity: 0;
transition: .5s ease all
}
#raspored .raspored-slider .owl-nav .owl-prev {
position: absolute;
top: 50%;
left: .5rem;
margin-top: -1.5rem
}
#raspored .raspored-slider .owl-nav .owl-prev .fa {
color: #e32324;
font-size: 3rem
}
#raspored .raspored-slider .owl-nav .owl-next {
position: absolute;
top: 50%;
right: .5rem;
margin-top: -1.5rem
}
#raspored .raspored-slider .owl-nav .owl-next .fa {
color: #e32324;
font-size: 3rem
}
#raspored .raspored-slider:hover .owl-nav {
opacity: 1
}
#raspored .utakmica-box {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #ffffff;
padding: 4.5rem 1rem;
height: 100%;
max-height: 305px;
transition: .3s ease all
}
#raspored .utakmica-box:hover {
background-color: rgba(31, 31, 31, 0.2) !important
}
#raspored .utakmica-box.gray {
background-color: #e1e1df
}
#raspored .utakmica-box .team-info {
display: flex;
align-self: center
}
#raspored .utakmica-box .team-info .team {
margin: 0 2rem;
flex: 1;
min-width: 8.5rem
}
#raspored .utakmica-box .team-info .team img {
width: 5rem;
display: block;
margin: 0 auto
}
#raspored .utakmica-box .team-info .team h4 {
font-size: 1.25rem;
font-weight: 600;
text-align: center
}
#raspored .utakmica-box .team-info .rezultat {
font-size: 2rem;
font-weight: 600;
align-self: center;
min-width: 4.25rem;
text-align: center
}
#raspored .utakmica-box .datum {
align-self: center;
font-size: 1.125rem;
margin-top: 1rem
}
@media all and (min-width: 787px) and (max-width: 1546px) {
#raspored .utakmica-box {
height: 305px
}
#raspored .utakmica-box .team-info .team {
min-width: 6rem;
margin: 0
}
#raspored .utakmica-box .team-info .team img {
width: 3.5rem
}
#raspored .utakmica-box .team-info .team h4 {
font-size: .875rem
}
#raspored .utakmica-box .team-info .rezultat {
font-size: 1.4rem
}
}
@media all and (min-width: 661px) and (max-width: 787px) {
#raspored .utakmica-box {
height: 305px
}
#raspored .utakmica-box .team-info .team {
min-width: 6.5rem
}
#raspored .utakmica-box .team-info .team img {
width: 3.4rem
}
#raspored .utakmica-box .team-info .team h4 {
font-size: .75rem
}
#raspored .utakmica-box .team-info .rezultat {
font-size: 1.4rem
}
#raspored .utakmica-box .datum {
font-size: .875rem
}
}
@media all and (max-width: 576px) {
#raspored .utakmica-box {
max-height: 270px;
padding: 4rem 1.25rem
}
#raspored .utakmica-box .team-info .team {
min-width: 6.5rem
}
#raspored .utakmica-box .team-info .team img {
width: 4rem
}
#raspored .utakmica-box .team-info .team h4 {
font-size: .875rem
}
#raspored .utakmica-box .team-info .rezultat {
font-size: 1.5rem
}
}
@media screen and (max-width: 346px) {
#raspored .utakmica-box {
max-height: 270px;
padding: 4rem 1.25rem
}
#raspored .utakmica-box .team-info .team {
min-width: 6.25rem
}
#raspored .utakmica-box .team-info .team img {
width: 3.25rem
}
#raspored .utakmica-box .team-info .team h4 {
font-size: .675rem
}
#raspored .utakmica-box .team-info .rezultat {
font-size: 1.25rem
}
#raspored .utakmica-box .datum {
font-size: .875rem
}
}
#raspored .tabela {
width: 100%;
background-color: rgba(31, 31, 31, 0.2);
max-height: 255px;
overflow-y: scroll
}
#raspored .tabela .table {
margin: 0
}
#raspored .tabela .table thead {
position: static;
top: 0;
left: 0;
width: 100%;
background-color: #e1e1df
}
#raspored .tabela .table tbody tr td:first-child {
width: 2rem !important
}
#raspored .tabela .table tbody tr td:last-child {
width: 4rem !important
}
#raspored .tabela .table tbody img {
margin-right: .5rem
}
#raspored .table-fixed-head {
display: flex;
background-color: #c8c8c5;
border-bottom: 0.0125rem solid #b0b0aa
}
#raspored .table-fixed-head span {
flex: 1;
padding: .75rem
}
#raspored .table-fixed-head span:first-child {
max-width: 2.5rem !important;
min-width: 2.5rem !important
}
#raspored .table-fixed-head span:last-child {
max-width: 4rem !important;
margin-right: 1.75rem
}
#vijesti {
overflow: hidden
}
#vijesti .vijest {
background-size: cover;
background-position: center center;
display: flex;
background-size: cover;
align-items: flex-end;
height: 30rem
}
#vijesti .vijest .image {
overflow: hidden;
position: absolute;
max-width: 100%;
width: 100%;
height: 100%
}
#vijesti .vijest .image::before {
content: "";
width: 100%;
height: 100%;
background-color: rgba(31, 31, 31, 0.65);
position: absolute;
top: 0;
left: 0;
transition: .5s ease all;
z-index: 1
}
#vijesti .vijest .image .img {
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
transition: .5s ease all
}
#vijesti .vijest:hover .image::before {
background-color: rgba(31, 31, 31, 0.85)
}
#vijesti .vijest:hover .image .img {
transform: scale(1.4, 1.4)
}
#vijesti .vijest::before {
content: "";
width: 100%;
height: 100%;
background-color: rgba(31, 31, 31, 0.65);
position: absolute;
top: 0;
left: 0;
transition: .5s ease all
}
#vijesti .vijest .content {
background-color: rgba(255, 255, 255, 0.9);
padding: 1rem;
text-align: center;
width: 100%;
border-bottom: 0.5rem solid #e32324;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 1rem;
z-index: 2
}
#vijesti .vijest .content .datum {
font-size: .875rem;
margin: 0;
align-content: flex-start;
align-items: flex-start
}
#vijesti .vijest .content h2 {
font-size: 1.5rem;
padding: 0 2.5rem;
margin: 2rem 0;
line-height: 1.2;
align-self: center;
flex: 1;
font-weight: 700
}
#vijesti .vijest .content .btn-secondary {
border-radius: 0;
border: 0.125rem solid #1f1f1f;
background-color: transparent;
color: #1f1f1f;
padding: .25rem .75rem;
text-transform: uppercase;
display: table;
margin: 0 auto;
transition: .5s ease all;
font-weight: 500
}
#vijesti .vijest .content .btn-secondary:hover {
background-color: #e32324;
color: #ffffff;
border-color: #e32324
}
#arhiva {
background-image: url("../assets/borac-team.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
padding: 6rem 0 0 0;
position: relative;
overflow: hidden
}
#arhiva::before {
content: "";
width: 100%;
height: 100%;
background-color: rgba(0, 25, 82, 0.55);
position: absolute;
top: 0;
left: 0
}
#arhiva .naslov {
background-color: #e32324;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: .5rem 0;
font-weight: 500
}
#arhiva .naslov p {
background-color: #e32324;
width: 35rem;
text-align: center;
position: absolute;
top: 0rem;
left: 50%;
margin-left: -17.5rem;
color: #ffffff;
font-size: 1.25rem;
padding: .5rem 0;
text-transform: uppercase;
margin-bottom: 0
}
#arhiva .naslov p::before {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid #e32324;
border-bottom: 2rem solid transparent;
border-left: 1rem solid #e32324;
position: absolute;
right: -1rem;
bottom: 0
}
#arhiva .naslov p::after {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid #e32324;
border-bottom: 2rem solid transparent;
border-right: 1rem solid #e32324;
position: absolute;
left: -1rem;
bottom: 0
}
.akademija {
position: relative;
}
.akademija .naslov {
background-color: #e32324;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: .5rem 0;
font-weight: 500
}
.akademija .naslov p {
background-color: #e32324;
width: 35rem;
text-align: center;
position: absolute;
top: 0rem;
left: 50%;
margin-left: -17.5rem;
color: #ffffff;
font-size: 1.25rem;
padding: .5rem 0;
text-transform: uppercase;
margin-bottom: 0
}
.akademija .naslov p::before {
content: "";
width: 0;
height: 0;
border-top: 0.5rem solid #e32324;
border-bottom: 2rem solid transparent;
border-left: 1rem solid #e32324;
position: absolute;
right: -1rem;
bottom: 0
}
.akademija .naslov p::after {
content: "";
width: 0;
height: 0;
border-top: 0.5rem solid #e32324;
border-bottom: 2rem solid transparent;
border-right: 1rem solid #e32324;
position: absolute;
left: -1rem;
bottom: 0
}
/* galerija */
.galerija .btn-galerija {
width: 200px;
background-color: transparent;
border: 3px solid #e32324;
height: 50px;
margin-top: 20px;
cursor: pointer;
}
.galerija p {
color: #ffffff;
font-size: 1.25rem;
text-transform: uppercase;
}
.galerija .btn-galerija:hover,
.galerija .btn-galerija:focus {
background-color: #e32324;
}
/* galerija */
@media only screen and (max-width: 767px) {
#arhiva .naslov p {
width: 100% !important;
left: 0;
margin: 0;
height: auto
}
#arhiva .naslov p::before,
#arhiva .naslov p::after {
display: none
}
}
@media only screen and (max-width: 320px) {
#top-nav .bottom .item.transparent h2 {
font-size: 0.9rem;
}
}
#arhiva .container {
position: relative;
color: #ffffff;
font-weight: 300;
margin-bottom: 60px;
}
.img-cover-news img {
position: relative !important;
left: -125px !important;
}
#arhiva .container .content {
border-bottom: 0.5rem solid #e32324;
border-top: 0.5rem solid #e32324;
padding: 2rem 0;
text-align: center
}
#arhiva .container .content p {
width: 60%;
margin: 0 auto
}
@media only screen and (max-width: 990px) {
#arhiva .container .content p {
width: 100%
}
}
#arhiva .container .content .btn-secondary {
border-radius: 0;
border: 0.125rem solid #ffffff;
background-color: transparent;
color: #ffffff;
padding: .25rem .75rem;
text-transform: uppercase;
margin: 2rem 0 4rem 0;
font-weight: 500
}
#arhiva .container .content .btn-secondary:hover {
background-color: #1f1f1f;
color: #ffffff;
border-color: #1f1f1f
}
#arhiva .container .zasluge {
display: flex;
justify-content: center;
width: 60%;
margin: 0 auto;
margin-top: 3rem
}
#arhiva .container .zasluge .item {
flex: 1
}
#arhiva .container .zasluge h5 {
font-size: 1rem
}
#arhiva .container .zasluge p {
font-weight: 600;
margin: .5rem auto;
font-size: 1.5rem
}
@media only screen and (max-width: 767px) {
#arhiva .container .zasluge {
flex-direction: column
}
#arhiva .container .zasluge .item {
margin-bottom: 2rem
}
}
#partneri {
background-color: #e32324;
padding: 4rem 0 3.5rem 0;
position: relative
}
#partneri .naslov {
background-color: #e32324;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: .5rem 0;
font-weight: 500
}
#partneri .naslov p {
background-color: #e32324;
width: 35rem;
text-align: center;
position: absolute;
top: 0rem;
left: 50%;
margin-left: -17.5rem;
color: #ffffff;
font-size: 1.25rem;
padding: .5rem 0;
text-transform: uppercase;
margin-bottom: 0
}
#partneri .naslov p::before {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid #e32324;
border-bottom: 2rem solid transparent;
border-left: 1rem solid #e32324;
position: absolute;
right: -1rem;
bottom: 0
}
#partneri .naslov p::after {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid #e32324;
border-bottom: 2rem solid transparent;
border-right: 1rem solid #e32324;
position: absolute;
left: -1rem;
bottom: 0
}
@media only screen and (max-width: 767px) {
#partneri .naslov p {
width: 100% !important;
left: 0;
margin: 0;
height: auto
}
#partneri .naslov p::before,
#partneri .naslov p::after {
display: none
}
}
#partneri .glavni-partneri {
display: flex;
justify-content: center;
}
#partneri .glavni-partneri a {
display: flex;
justify-content: center;
max-width: 25rem;
align-self: center;
width: 100%;
}
#partneri .glavni-partneri a img {
display: block;
margin: 0 1rem;
width: 156%;
margin-bottom: 1.5rem
}
@media all and (max-width: 576px) {
#partneri .glavni-partneri {
flex-direction: column
}
#partneri .glavni-partneri a {
margin-top: 1.5rem;
max-width: 50%
}
}
#partneri .custom__partneri {
margin-top: 30px;
}
#partneri .srebrni-partneri {
display: flex;
justify-content: center
}
#partneri .srebrni-partneri a {
display: flex;
justify-content: center;
max-width: 13rem;
align-self: center;
margin: 0 1rem
}
#partneri .srebrni-partneri a img {
display: block;
max-width: 100%;
align-self: center
}
@media all and (max-width: 576px) {
#partneri .srebrni-partneri {
flex-direction: column
}
#partneri .srebrni-partneri a {
margin-top: 1.5rem;
max-width: 60%
}
}
#partneri .bronzani-partneri {
display: flex;
justify-content: center;
margin-top: 1.5rem
}
#partneri .bronzani-partneri a {
display: flex;
justify-content: center;
max-width: 8.5rem;
align-self: center;
margin: 0 1rem
}
#partneri .bronzani-partneri a img {
display: block;
max-width: 80%;
align-self: center
}
@media all and (max-width: 576px) {
#partneri .bronzani-partneri {
flex-direction: column
}
#partneri .bronzani-partneri a {
margin-top: 1.5rem;
max-width: 30%
}
}
#partneri .partneri-slider {
padding: 0 1rem
}
#partneri .partneri-slider .item {
padding: 0 1.5rem
}
#partneri .partneri-slider .owl-nav .owl-prev {
position: absolute;
top: 0;
left: 0
}
#partneri .partneri-slider .owl-nav .owl-prev .fa {
color: #ffffff;
font-size: 3rem
}
#partneri .partneri-slider .owl-nav .owl-next {
position: absolute;
top: 0;
right: 0
}
#partneri .partneri-slider .owl-nav .owl-next .fa {
color: #ffffff;
font-size: 3rem
}
#team {
background-image: url("../assets/tim-bg.jpg");
background-position: center center;
background-size: cover;
padding: 5rem 0
}
#team .tim-slider {
padding: 0 2rem;
margin-top: 2rem;
position: relative
}
#team .tim-slider .item {
background-color: #fff;
border-bottom: 0.5rem solid #e32324;
height: 100%;
}
#team .tim-slider .item .info {
text-align: center;
padding: .875rem
}
#team .tim-slider .item .info p {
margin: 0;
font-weight: 700
}
#team .tim-slider .item .info span {
font-size: .875rem
}
#team .tim-slider .owl-nav .owl-prev {
position: absolute;
top: 50%;
left: 0;
margin-top: -1.5rem
}
#team .tim-slider .owl-nav .owl-prev .fa {
color: #ffffff;
font-size: 3rem
}
#team .tim-slider .owl-nav .owl-next {
position: absolute;
top: 50%;
right: 0;
margin-top: -1.5rem
}
#team .tim-slider .owl-nav .owl-next .fa {
color: #ffffff;
font-size: 3rem
}
#team2 {
background-image: url("../assets/tim-bg3.jpg");
background-position: center center;
background-size: cover;
padding: 5rem 0
}
#team2 .tim-slider2 {
padding: 0 2rem;
margin-top: 2rem;
position: relative
}
#team2 .tim-slider2 .item {
background-color: #fff;
border-bottom: 0.5rem solid #e32324
}
#team2 .tim-slider2 .item .info {
text-align: center;
padding: .875rem
}
#team2 .tim-slider2 .item .info p {
margin: 0;
font-weight: 700
}
#team2 .tim-slider2 .item .info span {
font-size: .875rem
}
#team2 .tim-slider2 .owl-nav .owl-prev {
position: absolute;
top: 50%;
left: 0;
margin-top: -1.5rem
}
#team2 .tim-slider2 .owl-nav .owl-prev .fa {
color: #ffffff;
font-size: 3rem
}
#team2 .tim-slider2 .owl-nav .owl-next {
position: absolute;
top: 50%;
right: 0;
margin-top: -1.5rem
}
#team2 .tim-slider2 .owl-nav .owl-next .fa {
color: #ffffff;
font-size: 3rem
}
footer {
background-color: #00448f;
color: #ffffff
}
footer .logo {
padding: 1rem 0 0 0;
width: 100%
}
footer .logo img {
display: block;
margin: 0 auto;
width: 3rem
}
footer .bottom {
display: flex;
position: relative
}
footer .bottom .item {
flex: 1;
background-color: #e32324;
font-weight: 300;
padding: .5rem 3rem;
}
@media only screen and (max-width: 1169px) {
footer .bottom .item {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0
}
}
footer .bottom .item:last-child {
text-align: right
}
footer .bottom .item a {
color: #ffde00;
text-decoration: none
}
footer .bottom .item a:hover,
footer .bottom .item a:focus {
color: #ffffff
}
footer .bottom .item.blue {
background-color: #00448f;
text-align: center;
text-transform: uppercase;
position: relative;
font-weight: 400;
max-width: 35rem;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0
}
footer .bottom .item.blue::before {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid #00448f;
border-bottom: 5rem solid transparent;
border-left: 3rem solid #00448f;
position: absolute;
right: -3rem;
bottom: 0
}
footer .bottom .item.blue::after {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid #00448f;
border-bottom: 5rem solid transparent;
border-right: 3rem solid #00448f;
position: absolute;
left: -3rem;
bottom: 0
}
@media only screen and (max-width: 767px) {
footer .bottom .item.blue {
order: -1
}
footer .bottom .item.blue::before,
footer .bottom .item.blue::after {
display: none
}
}
@media only screen and (max-width: 990px) {
footer .bottom .item.blue {
order: -1;
margin: 0 auto
}
}
@media only screen and (max-width: 1169px) {
footer .bottom .item.blue {
order: -1;
margin: 0 auto
}
}
footer .bottom .item .icons .fa {
color: #ffffff;
font-size: 1.5rem;
margin: 7px 15px;
}
footer .bottom .item .icons .fa:hover {
color: #eeeeee;
}
@media only screen and (max-width: 767px) {
footer .bottom {
flex-direction: column
}
footer .bottom .item {
text-align: center;
padding: .5rem .5rem !important
}
}
@media only screen and (max-width: 990px) {
footer .bottom {
flex-direction: column
}
footer .bottom .item {
text-align: center !important;
padding: .5rem .5rem !important
}
}
@media only screen and (max-width: 1169px) {
footer .bottom {
flex-direction: column
}
footer .bottom .item {
text-align: center !important;
padding: .5rem .5rem !important
}
}
#backToTop {
background-color: #1f1f1f;
width: 2rem;
height: 2rem;
cursor: pointer;
position: fixed;
right: .5rem;
bottom: .5rem;
display: none;
z-index: 5;
transition: .3s ease all
}
#backToTop .fa {
display: flex;
color: #ffffff;
justify-content: center;
vertical-align: middle;
font-size: .875rem;
padding-top: .5rem
}
#backToTop:hover {
background-color: #a51516;
}
#top-nav {
background-color: transparent;
color: #1f1f1f;
position: relative
}
#top-nav .bottom {
display: flex
}
#top-nav .bottom .item {
flex: 1;
background-color: #ffffff;
font-weight: 300;
padding: .5rem 2rem;
text-align: center
}
#top-nav .bottom .item h2 {
font-weight: 600;
font-size: 1.5rem;
text-transform: uppercase;
margin: 1rem 0
}
@media only screen and (max-width: 767px) {
#top-nav .bottom .item h2 {
font-size: 1rem
}
}
@media only screen and (max-width: 1600px) {
#top-nav .bottom .item h2 {
font-size: 1.3rem
}
}
#top-nav .bottom .item.transparent {
background-color: transparent !important;
text-align: center;
text-transform: uppercase;
position: relative;
font-weight: 400;
display: inline-flex !important;
max-width: 40rem;
}
#top-nav .bottom .item.transparent a {
color: #ffffff;
text-decoration: none;
transition: .3s ease all
}
#top-nav .bottom .item.transparent a:hover {
color: #e32324
}
.active-tab {
color: #e32324 !important;
}
#top-nav .bottom .item.transparent h2 {
color: #ffffff
}
#top-nav .bottom .item.transparent::before {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid transparent;
border-bottom: 4.66rem solid #ffffff;
border-left: 3rem solid transparent;
position: absolute;
right: 0rem;
bottom: 0
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
#top-nav .bottom .item.transparent {
flex-direction: column;
}
}
#top-nav .bottom .item.transparent::after {
content: "";
width: 0;
height: 0;
border-top: 1.5rem solid transparent;
border-bottom: 4.66rem solid #ffffff;
border-right: 3rem solid transparent;
position: absolute;
left: 0rem;
bottom: 0
}
@media only screen and (max-width: 767px) {
#top-nav .bottom .item.transparent::before,
#top-nav .bottom .item.transparent::after {
display: none
}
}
@media only screen and (max-width: 990px) {
#top-nav .bottom .item.transparent {
margin: 0 auto
}
}
#top-nav .bottom .item .icons .fa {
color: #ffffff;
font-size: 1.5rem;
margin: 0 .125rem
}
@media only screen and (max-width: 767px) {
#top-nav .bottom .item {
text-align: center;
padding: .5rem .5rem !important
}
#top-nav .bottom .item:first-child {
display: none
}
#top-nav .bottom .item:last-child {
display: none
}
}
@media only screen and (max-width: 990px) {
#top-nav .bottom .item {
text-align: center !important;
padding: .5rem .5rem !important
}
}
#blog-post {
padding-bottom: 2rem
}
#blog-post .blockquote {
border-left: 0.25rem solid #e1e1df;
padding: .5rem 0 .5rem 1.5rem;
font-size: 1.125rem
}
#blog-post a.link {
text-decoration: none;
color: #00448f;
font-weight: 500
}
#blog-post .ribon {
margin-top: 4rem;
background-color: #e32324;
color: #ffffff;
padding: 1rem .5rem;
display: flex;
align-items: center;
position: relative;
margin-right: 2rem;
max-height: 3.4rem
}
@media only screen and (max-width: 990px) {
#blog-post .ribon {
margin-right: 0
}
}
#blog-post .ribon.blue {
background-color: #00448f
}
#blog-post .ribon.blue::after {
border-bottom: 0rem solid #00448f;
border-left: 2rem solid #00448f
}
#blog-post .ribon::after {
content: "";
width: 0;
height: 0;
border-top: 3.40rem solid transparent;
border-bottom: 0rem solid #e32324;
border-left: 2rem solid #e32324;
position: absolute;
right: -2rem;
top: 0
}
@media only screen and (max-width: 990px) {
#blog-post .ribon::after {
display: none
}
}
#blog-post .ribon h2 {
font-size: 1.25rem;
font-weight: 600;
text-transform: uppercase;
flex: 1;
margin: 0
}
#blog-post .ribon p {
margin: 0
}
#blog-post .title h2 {
font-size: 1.5rem;
margin: 0;
margin-top: .75rem;
font-weight: 700
}
#blog-post .title .datum {
margin: 0
}
#blog-post .content {
padding: 1rem 0 0 0
}
#blog-post .content img {
width: 100%;
float: left;
margin-bottom: 1rem
}
#blog-post .content p {
line-height: 1.54;
letter-spacing: .5px;
font-weight: 400
}
#blog-post .content .blog-slider {
position: relative
}
#blog-post .content .blog-slider .owl-nav {
transition: .5s ease all
}
#blog-post .content .blog-slider .owl-nav .owl-prev {
position: absolute;
top: 50%;
left: .5rem;
margin-top: -1.5rem
}
#blog-post .content .blog-slider .owl-nav .owl-prev .fa {
color: #ffffff;
font-size: 3rem
}
#blog-post .content .blog-slider .owl-nav .owl-next {
position: absolute;
top: 50%;
right: .5rem;
margin-top: -1.5rem
}
#blog-post .content .blog-slider .owl-nav .owl-next .fa {
color: #ffffff;
font-size: 3rem
}
#blog-post .arhiva {
margin: 4rem 0;
border-left: 0.5rem solid #00448f;
padding-bottom: .875rem
}
#blog-post .arhiva .item {
padding: 1rem 1.5rem;
transition: .3s ease all
}
#blog-post .arhiva .item a {
color: #1f1f1f;
text-decoration: none
}
#blog-post .arhiva .item h3 {
font-size: 1rem;
font-weight: 700
}
#blog-post .arhiva .item .datum {
font-size: .875rem;
margin-bottom: .4rem
}
#blog-post .arhiva .item:hover {
background-color: #00448f;
color: #ffffff
}
#blog-post .arhiva .item:hover a {
color: #ffffff;
text-decoration: none
}
#blog-post .arhiva .sidebar-slider .owl-dots {
width: 100%;
height: .5rem;
display: flex;
justify-content: center;
margin-top: .5rem
}
#blog-post .arhiva .sidebar-slider .owl-dots .owl-dot {
background-color: #00448f;
width: .875rem;
height: .875rem;
border-radius: 50%;
margin: 0 .25rem
}
#blog-post .arhiva .sidebar-slider .owl-dots .owl-dot.active {
background-color: #1f1f1f
}
#blog-post .navigation {
margin: 2rem 0;
width: 100%;
display: flex;
justify-content: space-between
}
#blog-post .navigation.one-right {
justify-content: flex-end
}
#blog-post .navigation .btn {
margin: 0;
font-weight: 500
}
.login-box {
width: 20rem;
margin: 8rem auto;
text-align: center
}
@media only screen and (max-width: 767px) {
.login-box {
width: 100%
}
}
.login-box h3 {
font-size: 1.25rem;
text-transform: uppercase;
margin-bottom: 1.5rem;
background-color: #e32324;
padding: .5rem 0;
color: #ffffff
}
.login-box .form-control {
margin-bottom: 1rem;
border-radius: 0
}
.administracija {
padding: 2rem 0
}
.administracija h2.hello {
font-size: 1.125rem;
margin-bottom: 1.5rem;
background-color: #e32324;
padding: .75rem;
color: #ffffff
}
.administracija .form-control {
margin-bottom: 1rem;
border-radius: 0;
font-size: .875rem
}
.administracija label {
margin-right: 1rem;
font-weight: 500;
font-size: .875rem
}
.administracija .btn {
margin-bottom: 1rem;
font-weight: 500
}
.administracija .table .btn {
display: inline-flex;
margin: 0 .25rem
}
/* galerija */
#myModal {
z-index: 999999;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@media(max-width:490px) {
.modal-content {
top: 20%;
}
}
@media(max-width:390px) {
.modal-content {
top: 25%;
}
}
.makoprint {
width: 230px !important;
}
@media only screen and (max-width: 767px) {
.glavni-partneri a img {
width: 220px !important;
}
.glavni-partneri a .makoprint {
width: 190px !important;
}
#partneri .srebrni-partneri a img {
max-width: 85%;
}
}
@media (max-width:1224px) {
footer .bottom .item {
font-size: 90%;
}
}
.novosti-tekst {
width: 69%;
}
.novosti-strana {
width: 25%;
margin-left: 30px;
}
@media(max-width:1024px) {
.novosti-tekst {
width: 100%;
padding: 0px 45px;
}
.novosti-strana {
width: 100%;
margin-left: 0px;
}
.novosti-tekst p {
font-size: 18px;
}
#blog-post .arhiva .item a {
font-size: 18px;
}
}
@media(max-width:480px) {
.novosti-tekst {
width: 100%;
}
.novosti-strana {
width: 100%;
margin-left: 0px;
}
.novosti-tekst p {
font-size: 20px;
}
#blog-post .arhiva .item a {
font-size: 20px;
}
.header-single-page {
margin: 0 20px;
}
.novosti-tekst {
padding: 0px 25px;
}
.novosti-strana {}
}