* { font-family: 'Open Sans', sans-serif; }
h1,h2,h3,h4,h5,h6 { margin:0; }
a { color: black; }
a.link { color: #337ab7; }
#overlay { display:none;justify-content: center; position:fixed; top:0; left:0; height:100vh; width:100vw; background-color:rgba(255,255,255,0.5); z-index:100; }
#loader { margin-top:40vh; text-align:center; color:#666; z-index:101; }
.topnav {
  position:fixed;
  top:0;
  width:100vw;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  z-index: 999999;
}
.bottomnav {
  position:fixed;
  bottom:0;
  width:100vw;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  z-index: 999999;
}
.sidemenu {
  border-top:2px solid #f0f0f0;
  background-color:#e9004c;
  color:white;
  position:fixed;
  top:50px;
  width:100vw;
  margin-left:110vw;
  transition:.3s;
  z-index:999999;
}
.sidemenu .navbar-default {
  background-color:#e9004c;
  border:0;
}
.sidemenu .navbar-default li {
  border-bottom:1px solid #f0f0f0;
}
.sidemenu .navbar-default li a {
  font-weight:bold;
  font-size:16px;
  padding:20px;
  color:white;
}
.sidemenu .navbar-default li a:hover, .sidemenu .navbar-default li a:active, .sidemenu .navbar-default li a:focus,.sidemenu .navbar-default li a:active:focus {
  background-color:rgba(0,0,0,0.15);
}
.topnav a, .bottomnav a {
  color:white;
}
.topnav a:hover, .bottomnav a:hover,.topnav a:focus, .bottomnav a:focus,.topnav a:active, .bottomnav a:active {
  background-color:rgba(0,0,0,0.15);
}
.btn-primary, .btn-primary:hover, .btn-primary:active,.btn-primary:focus,.btn-primary:focus:active, .btn-primary:active:hover {
  background-color:#e9004c !important;
  border-color:#e9004c !important;
}
.card {
  border-radius:4px;
  border:1px solid #ddd;
  margin-top:20px;
}  
.card:hover, .card:active, .card:focus, .card:active:focus {
  box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.5);
}
#sidemenubtn {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear
}
.rotate{
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.col-md-3, .col-sm-6 {
  margin: 15px 0; 
}
.col-md-3 {
  height: 275px;
}
.col-sm-6 {
  height: 300px;
}
.panel {
  height: 100%;
  margin-bottom: 0;
  -webkit-box-shadow: 0px 6px 30px rgba(125,127,137,0.15);
  -moz-box-shadow: 0px 6px 30px rgba(125,127,137,0.15);
  box-shadow: 0px 6px 30px rgba(125,127,137,0.15);
}
.panel-body {
  height: 100%;
  padding: 0;
}
.panel-body img {
  width: 100%;
  height: 50%;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #ddd;
  object-fit: cover;
}
.panel-cnt {
  height: 50%;
  padding: 10px 15px;
}
.panel-cnt a {
  position: absolute;
  bottom: 20px;
  width: 50%;
  transition: transform 0.3s ease;
}
.panel-cnt a:hover {
  transform: scale(1.1); 
}
.target {
  min-height: 200px;
  border-style: dashed;
  border-color: #616778;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s ease;
  opacity: 1;
}
.target:hover, .target:active, .target:focus {
  opacity: 0.7;
}

.target * {
  cursor: pointer;
}
#upload-img-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
#uploaded-img-container {
  height: 200px; 
}
#img-input {
  position: absolute;
  top: -23rem;
  opacity: 0;
}
#uploaded-img {
  max-height: calc(100% - 70px);
}
#upload-img-label {
  cursor: pointer; 
}
#label-img-name {
  margin-top: 20px;
  text-align: center;
}
span.max-file-size {
  color: red;
}
.upload-icon {
  font-size: 50px;
  margin: 20px;
}
.img-wrapper {
  min-height:200px;
  position:relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}
.img-wrapper img {
  max-width: 100%;
  height: auto;
}
.form-group-checkbox {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.form-group-checkbox label {
  margin-left: 10px;
}
/* Rectangles */
.object-wrapper, .face-wrapper, .celebrity-wrapper {
  position: absolute; 
}
.object-rectangle, .face-rectangle, .celebrity-rectangle {
  width: 100%;
  height: 100%;
  border-width: 3px;
  border-style: solid;
}
.object-wrapper .object-info, .face-wrapper .face-info, .celebrity-wrapper .celebrity-info {
  visibility: hidden;
  width: auto;
  background-color: grey;
  color: rgb(255, 255, 255);
  text-align: center;
  position: absolute;
  top: -5px;
  right: 110%;
  font-size: 12px;
  padding: 5px;
}
.object-wrapper:hover .object-info, .face-wrapper:hover .face-info, .celebrity-wrapper:hover .celebrity-info {
  visibility: visible;
  z-index: 100;
}
.object-wrapper .object-info caption, .face-wrapper .face-info caption, .celebrity-wrapper .celebrity-info caption {
  text-align: center;
  font-weight: 600;
  display: table-caption;
  color: #fff;
  padding: 5px;
  background: grey;
  border-bottom: 1px solid white;
}
.object-wrapper .object-info::after, .face-wrapper .face-info::after, .celebrity-wrapper .celebrity-info::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent grey;
}
.object-wrapper .object-info th, .face-wrapper .face-info th, .celebrity-wrapper .celebrity-info th {
  text-align: left;
  font-weight: 600;
  padding-right: 5px;
}
.object-wrapper .object-info td, .face-wrapper .face-info td, .celebrity-wrapper .celebrity-info td {
  text-align: right;
  white-space: nowrap;
}
.object-rectangle {
  border-color: rgb(186, 11, 147);  
}
.celebrity-rectangle {
  border-color: rgb(218, 165, 32);
}
.face-rectangle-m {
  border-color: rgb(0, 120, 212);
}
.face-rectangle-f {
  border-color: rgb(186, 11, 147);
}
.table-naked {
  border-collapse: separate;
  background-color: transparent;
  border-width: 0px;
}
.table-naked td, .table-naked tfoot, .table-naked th, .table-naked thead, .table-naked tr {
  border-width: 0px;
  padding: 0px;
}
/* Microsoft loader */
.wa-loading-progress-container {
  width: 100%;
  position: relative;
  top: -20px;
  left: 0;
  right: 0;
  height: 5px;
  overflow: hidden;
  z-index: 100000;
}
.wa-loading-progress div {
  width: 5px;
  height: 5px;
  position: absolute;
  left: -20px;
  top: 0;
  z-index: 100000;
  background-color: #e9004c;
  animation: move 4s infinite cubic-bezier(.2,.64,.81,.23);
}
.wa-loading-progress div:nth-child(2) { animation-delay:150ms }
.wa-loading-progress div:nth-child(3) { animation-delay:300ms }
.wa-loading-progress div:nth-child(4) { animation-delay:450ms }
@keyframes move {
  0% {left:0}
  75%{left:100%}
  to{left:100%}
}
.progress {
  margin: 20px 0; 
}
@media (max-width: 600px) {
  .col-sm-6 {
    margin: 20px 32px;
  }
  .object-wrapper .object-info, .face-wrapper .face-info, .celebrity-wrapper .celebrity-info {
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
  }
  .object-wrapper .object-info::after, .face-wrapper .face-info::after, .celebrity-wrapper .celebrity-info::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    margin-top: -5px;
    margin-left: -2px;
    border-color: transparent transparent grey transparent;
  }
}