@font-face {
font-family: 'Laca Regular';
font-style: normal;
font-weight: normal;
src: local('Laca Regular'), url('fonts/Laca Regular.woff') format('woff');
}

@font-face {
font-family: 'Laca Regular Italic';
font-style: normal;
font-weight: normal;
src: local('Laca Regular Italic'), url('fonts/Laca Regular Italic.woff') format('woff');
}

@font-face {
font-family: 'Laca ExtraLight';
font-style: normal;
font-weight: normal;
src: local('Laca ExtraLight'), url('fonts/Laca ExtraLight.woff') format('woff');
}

@font-face {
font-family: 'Laca ExtraLight Italic';
font-style: normal;
font-weight: normal;
src: local('Laca ExtraLight Italic'), url('fonts/Laca ExtraLight Italic.woff') format('woff');
}

@font-face {
font-family: 'Laca Light';
font-style: normal;
font-weight: normal;
src: local('Laca Light'), url('fonts/Laca Light.woff') format('woff');
}

@font-face {
font-family: 'Laca Light Italic';
font-style: normal;
font-weight: normal;
src: local('Laca Light Italic'), url('fonts/Laca Light Italic.woff') format('woff');
}

@font-face {
font-family: 'Laca Book';
font-style: normal;
font-weight: normal;
src: local('Laca Book'), url('fonts/Laca Book.woff') format('woff');
}

@font-face {
font-family: 'Laca Book Italic';
font-style: normal;
font-weight: normal;
src: local('Laca Book Italic'), url('fonts/Laca Book Italic.woff') format('woff');
}

@font-face {
font-family: 'Laca Medium';
font-style: normal;
font-weight: normal;
src: local('Laca Medium'), url('fonts/Laca Medium.woff') format('woff');
}

@font-face {
font-family: 'Laca Medium Italic';
font-style: normal;
font-weight: normal;
src: local('Laca Medium Italic'), url('fonts/Laca Medium Italic.woff') format('woff');
}

@font-face {
font-family: 'Laca SemiBold';
font-style: normal;
font-weight: normal;
src: local('Laca SemiBold'), url('fonts/Laca Semibold.woff') format('woff');
}

@font-face {
font-family: 'Laca SemiBold Italic';
font-style: normal;
font-weight: normal;
src: local('Laca SemiBold Italic'), url('fonts/Laca Semibold Italic.woff') format('woff');
}

@font-face {
font-family: 'Laca Bold';
font-style: normal;
font-weight: normal;
src: local('Laca Bold'), url('fonts/Laca Bold.woff') format('woff');
}

@font-face {
font-family: 'Laca Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Laca Bold Italic'), url('fonts/Laca Bold Italic.woff') format('woff');
}

@font-face {
font-family: 'Laca Black';
font-style: normal;
font-weight: normal;
src: local('Laca Black'), url('fonts/Laca Black.woff') format('woff');
}

@font-face {
font-family: 'Laca Black Italic';
font-style: normal;
font-weight: normal;
src: local('Laca Black Italic'), url('fonts/Laca Black Italic.woff') format('woff');
}

body, html {
  height: 100%;
}

body {
  font-family: 'Laca Regular', sans-serif;
  font-size: 1.2rem;
  color: #0089d0;
  background: #fdb813;
  overflow-x: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1, h2 {
    font-family: 'Laca Bold';
}

footer {
  background-color: #fdb813;
  text-transform: uppercase;
  color: #FFFFFF;
}

footer a {
  color: #FFFFFF !important;
}

footer a:hover {
  color: #fd4c3e !important;
  text-decoration: none;
}

a, a:hover {
	color: #0089d0;
}

label {
    color: #009f3c;
    font-family: 'Laca Book'
}

.form-control {
	    border: none;
	    font-family: 'Laca Book';
        border-radius: 50px;
}

.form-control:focus { 
	box-shadow: none;
}

.btn-send {
    font-family: 'Laca SemiBold', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
    font-size: 20px;
    height: 60px;
    border: none;
    padding: 0 47px;
    color: #ffffff;
    background-color: #fd4c3e;
	  box-shadow: none;
}

.btn-send:active {
    background-color: #fd4c3e;
	box-shadow: none;
}

.btn-send:active, .btn-success.disabled {
    background-color: #fd4c3e;
	box-shadow: none;
}

.btn-send:focus {
  outline: 0 !important;
  outline-offset: 0  !important;
  -webkit-box-shadow: none !important;
  box-shadow: none  !important;
}

.btn-success {
    background-color: #FFFFFF;
    color: #fd4c3e;
   border-radius: 50px; /* Rounded edges to make it pill-shaped */
  padding: 10px 20px; /* Padding to give the button some size */   
}

.btn-success:hover {
    background-color: #fd4c3e;
    color: #FFFFFF;
}

.help-block.with-errors {
    color: #232323;
    margin-top: 5px;
}

.alert {
    color: #fd4c3e !important;
}

.custom-control-label::before {
    background: #FFFFFF;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #fd4c3e;
}

.nagradna, .dobitnici, .pravila {
    text-align: center;
}

.pravila h3 {
    color: #f6d200;
}

.btn {
  text-transform: uppercase;

}

.btn a {
  color: #FFFFFF;
}

.navbar {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
}

.navbar-custom {
  background: rgb(29,68,1);
  background: #fdb813;
  z-index: 1;
}

.navbar-custom a {
    color: #0089d0 !important;

}

.navbar-custom a:active, .navbar-custom a:hover {
    opacity: 0.6 !important;
}

.navbar-custom .active a {
    opacity: 0.6 !important;
}

.navbar-nav, .controls, .cc-window {
    text-shadow: none;
}

.icon-bar {
	width: 22px; 
	height: 2px;
	background-color: #0089d0;
	display: block;
	transition: all 0.2s;
	margin-top: 4px
}

button.navbar-toggler:focus { outline: 1px none; }

.navbar-toggler {
  border: none;
  background: transparent !important;
}

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
}

.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

.jumbotron {

  /* The image used */
/*  background-image: url("../img/pozadina_jumbotron.jpg"); */

  /* Half height */
  /*  max-height: 800px; */
  
  /* Center and scale the image nicely */
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;

  margin: 0;
  padding-bottom: 0;
  border-radius: 0;

    background: #0089d0;

}

.btn-jumbotron {
  text-transform: none;
  border: none;
  color: #0089d0;
  background-color: #fdb813; /* Green color */
  border-radius: 50px; /* Rounded edges to make it pill-shaped */
  padding: 10px 20px; /* Padding to give the button some size */
  transition: all .2s ease-in-out;
}

.btn-jumbotron:hover {
  transform: scale(1.1);
  background-color: #99b904; /* Slightly darker green for hover */
}

.btn-jumbotron:focus, .btn-jumbotron:active {
  box-shadow: none;
  border: none;
  outline: none;
}

.fullwidth {
    overflow-x: hidden;
    position: relative;

}

.no-border {
  border: none;
  box-shadow: none;
  position: relative;
}

.hero {
  background-image: url("../img/pozadina_jumbotron.jpg");

  /* Half height */
  /*  max-height: 800px; */
  
  /* Center and scale the image nicely */
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.content h2:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 1rem;
    left: -2rem;
    width: 10rem;
    height: 1.5rem;
    background: #d95a12;
}

.content h2 span {
    position: relative;
    z-index: 2;
}

.fullwidth-prijava {


  background-color: #0089d0;

  /* Half height */
  /*  max-height: 800px; */
  
  /* Center and scale the image nicely */
  background-position: center top;
  background-size: cover;

}

.fullwidth-prijava h2, .fullwidth-prijava h4, .fullwidth-prijava a {
    color: #FFF;
}

.fullwidth-prijava a {
    text-decoration: underline;
}

.fullwidth-dobitnici, .fullwidth-legal {
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #0089d0;
}
.separator::before {
    margin-right: 2rem;
    margin-left: 1rem;
}
.separator::after {
    margin-right: 1rem;
    margin-left: 2rem;
}

.controls, .messages {
    font-family: 'Laca Regular';
    text-transform: none;
    text-shadow: none;
}

.controls {
    text-transform: uppercase;
}

label, .text-muted {
    color: #FFF !important;
}

.jumbotron h1, .jumbotron p {
        color: #fdb813 !important;

}

.plava {
    color: #fdb813 !important;
}

.zuta {
    color: #0089d0 !important;
}

.naslov-nagrada2 {
    display: block;
    color: #ed1c24;
    text-align: center;
    padding: 10px 5px 10px 25px;
    border-radius: 100px;
    border: 2px solid #ed1c24;
    background-color: #FFFFFF;
    margin: auto;
}

.naslov-istaknuto2 {
    display: inline-block;
    margin-bottom: 20px;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px #333; 
    font-family: 'Laca Bold', sans-serif;
    font-weight: 400;
    font-size: 2em;
    padding: 5px 5px 5px 5px;
    border-radius: 100% 50%;
    background-color: #ed1c24;
    -webkit-box-shadow: 0px 2px 0px #666, inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    -moz-box-shadow: 0px 2px 0px #666, inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    box-shadow: 0px 2px 0px #666, inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3;
}

.upute ul li {
  /* set color of list item text */
  display: inline-block;
  list-style: none; 
  margin: 0 0 16px 1.1225em;
  /* Give the bullet room on the left hand side */
  padding: 0;
  position: relative;
}

.upute ul li::before {
  color: #00a2e5;  
  /* color of bullet or square */
  content: "\002B24"; 
  font-weight: bold;
  /* Unicode of character to precede the list item */
  display: inline-block;
  font-size: 1em; 
  /* use em or % */ 
  left: -1.5em; 
  /* use em, line up bullet flush with left hand side */
  position: absolute;
  /* Set the bullet positioned absolutely top left */
  top: 0em; 
  /* use em or % */
}

.tilted-text {
    margin-top: 10px;
    font-family: 'Laca Bold', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align to the start of the container */
    text-align: left;
}

.tilted-text span:nth-child(1) {
    transform: rotate(-6deg);
    line-height: 1.2rem; /* Adjust the spacing between lines if needed */
}

.tilted-text span:nth-child(2) {
    transform: rotate(-3deg);
    font-size: 2.0rem;
    line-height: 2.0rem; /* Adjust the spacing between lines if needed */
    margin-left: -0.4rem;
}

.tilted-text span:nth-child(3) {
    line-height: 1.3rem; /* Adjust the spacing between lines if needed */
    margin-top: 0.4rem;
}

.bag-image {
    width: 24%;
    height: auto;
    max-width: 220px;
}

.arrow-image {
    width: 25%;
    height: auto;
    max-width: 180px;
}

@media (max-width: 991.98px) { /* Bootstrap's 'lg' breakpoint minus 1 pixel */
    .arrow-image {
        transform: rotate(120deg);
    }
}

.nagrade {
    margin-top: -20%;
    overflow: hidden;
}

.img-fluid.kartica {
    transform: scale(1.3);
    transform-origin: center center;
    margin-bottom: 90px;
}

@media (max-width: 768px) {
    .img-fluid.kartica {
        transform: scale(1.0);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) { /* Bootstrap 4's md breakpoint */
    .img-fluid.kartica {
        margin-bottom: 120px;
    }
}