#berza {
    position: relative;
    background-color: #222;
    min-height: 100vh;
    padding: 60px;
}

#berza h2 {

	font-size: 38px;

	color: #fff;

}



.oglas {

	display: inline-block;

	background-color: #f3f3f3;

	margin: 20px;

	padding: 20px;

	width: 500px;

	border-radius: 4px;

}



.oglas h4{

	margin: 0;

	padding: 7px 0 4px 0;

	font-size: 20px;

	letter-spacing: 1px;

}



.category {

	display: inline;
}



.brzKont {

	padding: 10px;

	display: flex;

	flex-wrap: wrap;

  justify-content: space-around;

}



.pratioci {

	padding-left: 8px;

	border-left: 5px solid #444;

}



.oglas div h5 {



	font-size: 17px;



	letter-spacing: 0.5px;



}



.btnHolder {



	padding-top: 15px;



	text-align: center;



}



.btn {



	text-decoration: none;



	padding: 7px 12px;



	background-color: #FBA92E;



	color: #000;



}



.seeMore {



	text-align: center;



	font-size: 18px;



	color: #fff;



}



.seeMore a {



	color: #fff;



	font-size: 22px;



}



.pagination {



    display: -ms-flexbox;



    display: flex;



    justify-content: center;



    padding-left: 0;



    list-style: none;



    border-radius: 0.25rem;



}



.pagination-lg .page-link {



    padding: 0.75rem 1.5rem;



    font-size: 1.25rem;



    line-height: 1.5;



}



.page-link {



    position: relative;



    display: block;



    padding: 0.5rem 0.75rem;



    margin-left: -1px;



    line-height: 1.25;



    color: #555;



    background-color: #fff;



    border: 2px solid #777;



    border-radius: 3px;



}



.table-responsive {



    display: block;



    width: 100%;



    overflow-x: auto;



    -webkit-overflow-scrolling: touch;



}



a {



    text-decoration: none;



}



.form-control {



    display: inline-block;



    margin-bottom: 1px;



    width: 250px;



    height: calc(1.5em + 0.75rem + 2px);



    padding: 0.375rem 0.75rem;



    font-size: 1rem;



    font-weight: 400;



    line-height: 1.5;



    color: #495057;



    background-color: #fff;



    background-clip: padding-box;



    border: 1px solid #ced4da;



    border-radius: 0.25rem;



    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;



}



button, input {



    overflow: visible;



}



.catLogo, .catRelative { display: none; }



.cat { font-size: 24px; }



/*the container must be positioned relative:*/



.custom-select {



  text-align: center;



  position: relative;



  margin: 0 10px;



  font-size: 24px;



  vertical-align: bottom;



  width: 250px;



  display: inline-block;



}



.searchBTN {



  color: #ffffff;



  padding: 8px 16px;



  border: 1px solid transparent;



  border-radius: 3px;



  cursor: pointer;



  text-align: center;



  position: relative;



  margin: 0 10px 2px 10px;



  font-size: 24px;



  width: 200px;



  height: calc(1.5em + 0.75rem + 2px);



  vertical-align: middle;



  display: inline-block;



}



.custom-select select {



  display: none; /*hide original SELECT element:*/



}







.select-selected {



  background-color: #FBA92E;



  border-radius: 3px;



}







/*style the arrow inside the select element:*/



.select-selected:after {



  position: absolute;



  content: "";



  top: 25px;



  right: 10px;



  width: 0;



  height: 0;



  border: 6px solid transparent;



  border-color: #fff transparent transparent transparent;



}







/*point the arrow upwards when the select box is open (active):*/



.select-selected.select-arrow-active:after {



  border-color: transparent transparent #fff transparent;



  top: 7px;



}







/*style the items (options), including the selected item:*/



.select-items div,.select-selected {



  color: #ffffff;



  padding: 8px 16px;



  border: 1px solid transparent;



  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;



  cursor: pointer;



  user-select: none;



}







/*style items (options):*/



.select-items {



  position: absolute;



  background-color: #FBA92E;



  top: 100%;



  left: 0;



  right: 0;



  z-index: 99;



}







/*hide the items when the select box is closed:*/



.select-hide {



  display: none;



}







.select-items div:hover, .same-as-selected {



  background-color: rgba(0, 0, 0, 0.1);



}



.nmbInp {



    display: inline-block;



    margin-bottom: 1px;



    width: 80px;



    height: calc(1.5em + 0.75rem + 2px);



    padding: 0.375rem 0.75rem;



    font-size: 1rem;



    font-weight: 400;



    line-height: 1.5;



    color: #495057;



    background-color: #fff;



    background-clip: padding-box;



    border: 1px solid #ced4da;



    border-radius: 0.25rem;



    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;



}



form {



  text-align: right;



}



@media(max-width: 500px) {



  #berza {



    padding: 60px 7px;



  }



  #berza h2 {



    padding-left: 15px;



  }



  form {



    text-align: center;



  }



  .searchBTN {



    margin-top: 15px;



  }



}
.infoBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #FBA92E;
  border: 2px solid #000;
  padding: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 700ms ease-in-out;
  z-index: 10;
}
.infoBtn i {
  font-size: 50px;
  color: #000;
}

/* CSS talk bubble */
.talk-bubble {
  opacity: 0;
  margin: 40px;
  display: inline-block;
  position: fixed;
  bottom: 120px;
  right: 10px;
  width: 200px;
  height: auto;
  background-color: #f2f2f2;
  transition: opacity 1s;
  transition: all 700ms ease-in-out;
  z-index: 10;
}
.border{
  border: 8px solid #666;
}
.round{
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -40px;
  right: auto;
  top: -8px;
  bottom: auto;
  border: 32px solid;
  border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -20px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 22px solid;
  border-color: lightyellow transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -40px;
  right: auto;
  top: 30px;
  bottom: auto;
  border: 20px solid;
  border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -20px;
  right: auto;
  top: 38px;
  bottom: auto;
  border: 12px solid;
  border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -8px;
  right: auto;
  top: auto;
  bottom: -40px;
  border: 32px solid;
  border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 0px;
  right: auto;
  top: auto;
  bottom: -20px;
  border: 22px solid;
  border-color: transparent transparent transparent lightyellow;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  right: auto;
  top: auto;
  bottom: -40px;
  border: 20px solid;
  border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  right: auto;
  top: auto;
  bottom: -20px;
  border: 12px solid;
  border-color: lightyellow transparent transparent lightyellow;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: 30px;
  bottom: -40px;
  border: 20px solid;
  border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: 38px;
  bottom: -20px;
  border: 12px solid;
  border-color: lightyellow lightyellow transparent transparent;
}
/*
  left: -8px;
  right: auto;
  top: auto;
  bottom: -40px;
  border: 32px solid;
  border-color: transparent transparent transparent #666;
  left: 0px;
  right: auto;
  top: auto;
  bottom: -20px;
  border: 22px solid;
  border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -8px;
  bottom: -40px;
  border: 20px solid;
  border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: 0px;
  bottom: -20px;
  border: 12px solid;
  border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -40px;
  top: 30px;
  bottom: auto;
  border: 20px solid;
  border-color: #666 transparent transparent #666;
}
.tri-right.right-in:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -20px;
  top: 38px;
  bottom: auto;
  border: 12px solid;
  border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -40px;
  top: -8px;
  bottom: auto;
  border: 32px solid;
  border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -20px;
  top: 0px;
  bottom: auto;
  border: 20px solid;
  border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
  padding: 1em;
  text-align: left;
  line-height: 1.5em;
  z-index: 10;
}
.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}
.overlaid2 {

  position: fixed; /* Sit on top of the page content */

  display: none; /* Hidden by default */

  width: 100%; /* Full width (cover the whole page) */

  height: 100%; /* Full height (cover the whole page) */

  top: 0; 

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0,0,0,0.85); /* Black background with opacity */

  z-index: 40; /* Specify a stack order in case you're using a different order for other elements */

  cursor: pointer; /* Add a pointer on hover */
}
.overlayAppear {
  display: block;
  animation: fade 1s;
}