/* Style the navigation menu */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
  padding: 0px;
}

/* Navigation links */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 20% !important; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

/* Add a background color on mouse-over */
.navbar a:hover {
  background-color: #000;
}

/* Style the current/active link */
.navbar a.active {
  background-color: #4CAF50;
}

/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* If you want the text to be left-aligned on small screens */
  }
}




/*-===== dev ===== */
.debug {
  border: 2px solid red;
}
/*============ Utility classes.
 Use swush for faster ease of development ============*/

.fill-viewport {
  min-height: 100vh
}
.fill-40-viewport {
  min-height: 40vh
}
.fill-80-viewport {
  min-height: 80vh
}
.fill-90-viewport {
  min-height: 90vh
}
.jumbotron-transparent {
  background-color: transparent
}
.text-white-70 {
  color: rgba(255,255,255,0.7);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.text-black-70 {
  color: rgba(0,0,0,0.7)
}
.text-black-40 {
  color: rgba(0,0,0,0.4)
}
.text-white-40 {
  color: rgba(255,255,255,0.4)
}

/*== 1.
  1. Borders along x an y
  2. Borders with colors i.e the shades of white and gray above
  3. Unordered list with borders all round
  4. Unordered list with borders along y, as in pricing table here
  5. Border size class*/

.list-border-y li {
  border-top: 1px solid
}
.list-border-y li:last-child {
  border-bottom: 1px solid
}
.list-border-black-20 li,
.list-border-black-20 li:last-child{
  border-color: rgba(0,0,0,0.2)
}




@media screen and (min-width: 768px ){
  /*need to set flex-basis and have it dependent on size too
  usage tip: if you want the element to NOT be positioned in the
  center, add this class to a non `.container` div. Container divs in
  bootstrap are styled to seat in the center of the page.
  */
  .basis-md-50 {
    flex-basis: 50%
  }
}



#form_container
{
	padding:15px 15px;
	margin-top:15px;
	background: rgba(0,0,0,0.5);
	color:#fff;
}
body
{
	background-color: #000;
	background-image: url("images/stduio-2035349_1280.jpg");
	background-size: cover;
	background-repeat:no-repeat;

}
.upload-btn-wrapper
{
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.upload-btn-wrapper input[type=file]
{
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}