@font-face {
  font-family: "Gabriola";
  font-style: normal;
  font-weight: normal;
  src: local("Gabriola"), url("gabriola Font Download.woff") format("woff");
}

body {
  background-color: black;
}

p {
  color: white;
  text-align: left;
}

section h1 {
  text-align: left;
  color: #666666;
}

/*FORM */
.open-button {
  background-color: #78be20;
  font-size: 20px;
  color: white;
  padding: 0px 0px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 190px;
  height: 50px;
  justify-content: center;
  padding-bottom: 25px;
  padding-top: 9px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  max-height: 685px;
  position: fixed;
  height:660px;
  bottom: 0;
  right: 15px;
  z-index: 9;
  /*Dodan border-radius 8.12 + opacity stavljen */
  border-radius: 35px;
  opacity: 245%;
  overflow:hidden !important;
}


/* Add styles to the form container */
.form-container {
  max-width: 300px;
  max-height: 685px;
  padding: 10px;
  height: 660px;
  /*Dodan border-radius 8.12 */
  border-radius: 35px;
  background-color: white;
  opacity: 95%;
  overflow: scroll;
}

/* Full-width input fields */
.form-container input[type="text"],
.form-container input[type="number"],
.form-container select,
.form-container input[type="email"] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 10px 0;
  border: none;
  background: #f1f1f1;
  display: block;
}

/* When the inputs get focus, do something */
.form-container input[type="text"]:focus,
.form-container input[type="email"]:focus,
.form-container select:focus,
.form-container input[type="number"]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04aa6d;
  color: white;
  padding: 2px;
  border: none;
  cursor: pointer;
  width: 45%;
  margin: 0px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
  /*Dodani svi ovi dole elementi properties ispod: 08.12. */
  color: white;
  padding: 2px;
  border: none;
  cursor: pointer;
  width: 45%;
  margin:0px;
  opacity: 0.8;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
  opacity: 1;
}
/*KRAJ POPOUT FORME*/

@media only screen and (max-width: 991px) {
  /*Raspored */
  .navbar-collapse ul {
    float: right;
    direction: rtl;
    padding-right: 0px;
  }

/* FORM STYLE */
.open-button {
  font-size: 21px;
  color: white;
  padding: 0px;
  width: 100px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 15px;
  right: 19px;
  width: 180px;
}

 /* Heading */
 #formssave h1{
  font-size:27px;
  text-align:center;
  letter-spacing:-1.8px;
  margin-bottom:2px;
 }

 /* Bold Tag */
 #formssave label b{
  font-size:12px;
  line-height:1.5em;
 }
 
 /* Input */
 #formssave input[type=text]{
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:0px;
  margin-bottom:1px;
 }
 
 /* Input */
 #formssave input[type=number]{
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:0px;
  margin-bottom:1px;
 }
 
 /* Input */
 #formssave input[type=email]{
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:0px;
  margin-bottom:1px;
 }
 
 /* Zelim */
 #zelim{
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:0px;
  margin-bottom:1px;
 }
 
 /* Country */
 #country{
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:0px;
  margin-bottom:-10px;
 }

#myForm{
  height:450px !important;
  max-height:470px !important;
  min-height:0px;
  transform:translatex(0px) translatey(0px) !important;
 }
 
 /* Formssave */
 #formssave{
  max-height:470px !important;
  height:450px !important;
  max-width:274px !important;
  transform:translatex(0px) translatey(0px);
 }



}