* { box-sizing: border-box; }
html {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
}
body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  font-family: Helvetica, sans-serif;
}
body, .modal, #footer {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a5ce3e+0,ffffff+50,a5ce3e+100 */
  background: #7B7568; /* Old browsers */
  background: -moz-linear-gradient(left, #7B7568 0%, #ffffff 50%, #7B7568 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #7B7568 0%,#ffffff 50%,#7B7568 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #7B7568 0%,#ffffff 50%,#7B7568 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7B7568', endColorstr='#a5ce3e',GradientType=1 ); /* IE6-9 */
}

/* ------------------------------------------------ */
/* navbar */
.navbar-default  a.navbar-brand{
}
.navbar-default{
  background: transparent;
}
.navbar{
  margin-bottom: 0;
  border:0;
}

.navbar-default .navbar-brand a{
  color:#ccc;
}
.navbar-default  a.navbar-brand{
 color:#ccc; 
}
.navbar-default  a.navbar-brand:hover{
 color:#fff; 
}

/* Hamburger */
.navbar-default .navbar-toggle{
  color:#ccc;
}
.navbar-default .navbar-toggle .icon-bar{
  color:#ccc;
}
.navbar-default .navbar-toggle .icon-bar:hover{
  color:#fff;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
 color:#fff;
 background: transparent; 
}
.navbar{
  border-radius: 0px;
  min-height:30px;
}
.navbar-default .navbar-text{
  color:#ccc;
}
.navbar-default .navbar-nav>li>a{
  color:#ccc;
}
.navbar-default .navbar-nav>li>a:hover{
  color:#fff;
}
.navbar-default .navbar-toggle .icon-bar{
  background-color:#ccc;
}
.navbar-default .navbar-toggle:hover .icon-bar{
  background-color: #eee;
}
.navbar-default .navbar-toggle:hover {
  border-color: #fff;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
  border:0;
}

/* ------------------------------------------------ */
/* Jumbotron */
.jumbotron {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    color: inherit;
}
.jumbotron{
  background: transparent;
  color:black;
}
.jumbotron h1{
  color:#ddd;
  margin-bottom:0px;
}
.jumbotron a.btn-primary{
  background:#ddd;
  color:#333;
}
.jumbotron a.btn-primary:hover{
  background:#eee;
  color:#222;
}
.jumbotron p > a.jcallout{
  color:#eee;
  padding-bottom: 3px;
  border-bottom:1px dotted;
  text-decoration: none;
}
.jumbotron p > a.jcallout:hover{
  color:#fff;
  border-bottom:1px solid #ccc;
  text-decoration: none;
}
.jumbotron a.btn-default{
  color:#eee;
  border:1px solid #eee;
  background: transparent;
}
.jumbotron a.btn-default:hover{
  background: #22f;
  border:1px solid #ccc;
}
.jumbotron a.btn-default:active{
  color:#eee;
  border:1px solid #ccc;
}

/* Input button override
-------------------------------------------------- */
/*input[type="file"] {
  display: none;
}
input[type="button"] {
  display: none;
}*/
input.hidden_input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Global styles
-------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
  font-weight: bold;
  font-style: italic;
  text-align: center;
}
h1 {
  font-size:56px;
  margin-top: 20px;
  margin-bottom: 0;
}
h2 {
  font-size:20px;
  margin-top: 0;
  margin-bottom: 24px;
}
ul {
  list-style: none;
  margin:0;
  padding:0;
}
li {
  display: inline-block;
}
img.img_responsive_dull {
  max-width: 100%;
  height: auto;
}
#photo_area{
  width: 512px;
  height: 512px;
  max-width: 97vw;
  max-height: 97vw;
  min-width: 240px;
  min-height: 240px;
  margin:0 auto;
  text-align: center;
}
.dash_border{
  background-color: rgba(255,255,255,.2);
  border:1px dashed #000;
}

label {
  display: block;
}

div.center_inner {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#upload_controls{
  margin-top:25px;
  display: none;
}
#restart_btn, #rotate_btn, #upload_btn, #dropdown_btn {
  display: inline-block;
  margin-left:5px;
  margin-right:5px;
}
.custom-file-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

.align_center{
  text-align: center;
}

ul.action-buttons{
  margin-top: 40px;
  list-style: none;
  margin-left: 0;
  padding-left:0;
}
li {
  list-style: none;
  margin-left: 0;
  padding-left:0;
  /*margin-bottom:20px;*/
}

.btn {
  display: inline-block;
  color: #333;
  background-color: #fff;
  border: 1px solid #adadad;
  font-family: Helvetica, sans-serif;
  padding: 6px 12px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s;
}
.desktop .btn:hover {
  background-color: #fff;
}
.btn.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.btn.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn.btn-important {
  border-width: 2px;
  border-color: #444;
}
#photo_area {
  position: relative;
  cursor: pointer;
}
#restart_btn {
  position: relative;
  cursor: pointer;
}
input[type=file] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.desktop #photo_area .btn {
  background: #fff;
}
.desktop #photo_area .btn:hover {
  background: #eee;
}
.consent_box {
  margin-top: 10px;
  font-size: smaller;
  color: #444;
}

/* Intro page
-------------------------------------------------- */
canvas {
  display: block;
}
.photo {
  display: none;
  width:100%;
  height:100%;
}

/* form visibility */

#preloader_anim {
  display: none;
}
#about_btn {
  margin: 20px 0px 80px 0;
}
#share_btns {
  display: none;
  margin:20px; 
}
.notice {
  color: #444;
  font-size: small;
}
a.btn-default {
  background-color: transparent;
}
a.btn-default:hover {
    color: #333;
    background-color: #fff;
    border-color: #adadad;
}
.debug-view {
  margin-bottom: 20px;
  font-size:14px;
  color:#333;
}
.debug-view img {
  margin-bottom:4px;
}
#full_results, #hide_more {
  display: none;
}

select {
  display: inline-block;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  vertical-align: middle;
  background-color: #eee;
  background-image: none;
  border: 1px solid #bbb;
  border-radius: 4px;
  transition: all .15s;
  cursor: pointer;
}
.desktop select:hover {
  background-color: #fff;
  cursor: pointer;
}

/* About
--------------------------------------------------- */
.modal {
  pointer-events: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; left: 0;
  transition: all 0.2s;
}
.modal.visible {
  pointer-events: auto;
  opacity: 1;
}
.modal p {
  font-size: 16px;
  line-height: 24px;
}
.modal .inner {
  margin: 10vh auto;
  background: rgba(255,255,255,0.5);
  padding: 20px 20px 40px 20px;
  width: 600px;
  max-width: 90vw;
}
.modal .content {
  margin-bottom: 20px;
}

/* Result
--------------------------------------------------- */
.result_view {
  display: none;
  text-align: center;
}
.final_result img {
  width: 512px;
  height: 512px;
  border: 1px dashed #000;
  margin: 10px;
}
.all_results {
  display: none;
}
.all_results div {
  margin-bottom: 20px;
}
.all_results img {
  width: 384px;
  height: 384px;
  margin: 10px;
}

.made_with {
  margin-bottom: 10px;
}
#delete_btns {
  margin-top: 10px;
  font-size: 10px;
}
a#destroy_data {
  color: #888;
}
.desktop a#destroy_data:hover {
  color: #f00;
}

/* Footer
--------------------------------------------------- */
#footer{
  /*background: #ddd;*/
  /*padding: 20px 0;*/
  /*position: fixed;*/
  bottom: 0;
  width: 100%;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 20px;
}
#footer ul li a {
  font-weight: bold;
  text-decoration: none;
}
#footer a {
  color:#333;
  text-decoration: underline;
}
#footer a:hover {
  color:#111;
}

@media screen and (max-width: 500px) {
  .modal {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal .inner {
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
  }
}


/* Gallery */

.gallery-preview-row{
  margin-bottom: 40px
}
.gallery-preview-row img{
  width:100%;
  padding:2px;
}

@media (max-width: 600px) {
  #preloader_anim {
    position: relative;
    top: -50px;
  }
}

/*hide dropdown*/
#dropdown_btn{
  display: none;
}