.image-popup {
  display: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99999;
}

.image-popup .con {
  display: flex;
  flex-flow: column;
  background-color: #ffffff;
  padding: 25px;
  border-radius: 5px;
}

.image-popup .con h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.image-popup .con .edit, .image-popup .con .trash {
  display: inline-flex;
  justify-content: center;
  align-self: flex-end;
  width: 40px;
  text-decoration: none;
  color: #FFFFFF;
  padding: 10px 12px;
  border-radius: 5px;
  margin-top: 10px;
}

.image-popup .con .trash {
  background-color: #b73737;
}

.image-popup .con .trash:hover {
  background-color: #a33131;
}

.image-popup .con .edit {
  background-color: #37afb7;
}

.image-popup .con .edit:hover {
  background-color: #319ca3;
}

.home .con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0 30px;
}

.home .con .upload-image {
  display: inline-block;
  text-decoration: none;
  background-color: #38b673;
  font-weight: bold;
  font-size: 14px;
  border-radius: 5px;
  color: #FFFFFF;
  padding: 10px 15px;
}

.home .con .upload-image:hover {
  background-color: #32a367;
}

.home .con form label {
  padding-right: 5px;
}

.home .con form select {
  border-radius: 5px;
  border: 1px solid #cccccc;
  padding: 5px 10px;
}

.home .images {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

.home .images a {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}

.home .images a:hover span {
  opacity: 1;
  transition: opacity 1s;
}

.home .images span {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 15px;
  transition: opacity 1s;
}

.upload form {
  padding: 15px 0;
  display: flex;
  flex-flow: column;
  width: 400px;
}

.upload form label {
  display: inline-flex;
  width: 100%;
  padding: 10px 0;
  margin-right: 25px;
}

.upload form input, .upload form textarea {
  padding: 10px;
  width: 100%;
  margin-right: 25px;
  margin-bottom: 15px;
  border: 1px solid #cccccc;
}

.upload form textarea {
  height: 200px;
}

.upload form input[type="submit"] {
  display: block;
  background-color: #38b673;
  border: 0;
  font-weight: bold;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  width: 200px;
  margin-top: 15px;
  border-radius: 5px;
}

.upload form input[type="submit"]:hover {
  background-color: #32a367;
}

.delete .yesno {
  display: flex;
}

.delete .yesno a {
  display: inline-block;
  text-decoration: none;
  background-color: #38b673;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px 15px;
  margin: 15px 10px 15px 0;
  border-radius: 5px;
}

.delete .yesno a:hover {
  background-color: #32a367;
}


.image-popup .con .edit, .image-popup .con .star {
  display: inline-flex;
  justify-content: center;
  align-self: flex-start;
  width: 40px;
  text-decoration: none;
  color: #FFFFFF;
  padding: 10px 12px;
  border-radius: 5px;
  margin-top: 10px;
}

.image-popup .con .star {
  background-color: #b73737;
}

.image-popup .con .star:hover {
  background-color: #a33131;
}






.rating { font-size:3em; line-height:1.5; text-align:center; overflow:hidden }
.rating a { position:relative; float:right; color:#bbb; text-decoration:none; letter-spacing:0.125em }
.rating a:first-child { margin-right:0.05em }
.rating a, .rating a:after { transition:color .4s }
.rating a:hover, .rating a:hover:after { -webkit-animation:pop 0.2s; animation:pop 0.2s }
.rating a:active, .rating a:active:after { -webkit-animation:push 0.2s; animation:push 0.2s }
.rating[data-rating] a:hover, .rating[data-rating] a:hover:after, .rating[data-rating] a:hover ~ a, .rating[data-rating] a:hover ~ a:after,
.rating[data-rating] a:focus, .rating[data-rating] a:focus:after, .rating[data-rating] a:focus ~ a, .rating[data-rating] a:focus ~ a:after { color:tomato; outline:none }
.rating-stars { display:inline-block }
.rating-votes { clear:both; font-size:0.275em; line-height:1; color:#999 }
.rating a:before { content:'\2605'; position:absolute; z-index:-1; color:#e5e5e5; transform:scale(1.5); transform-origin:44% 54% }
[data-rating^="1.5"] .star-2:after, [data-rating^="2.5"] .star-3:after, [data-rating^="3.5"] .star-4:after, [data-rating^="4.5"] .star-5:after { content:'\2605'; position:absolute; left:0; right:56%; overflow:hidden }
[data-rating^="1"] .star-1, [data-rating^="1.5"] .star-2:after, 
[data-rating^="2"] .star-2, [data-rating^="2"] .star-2 ~ a, [data-rating^="2.5"] .star-3:after, 
[data-rating^="3"] .star-3, [data-rating^="3"] .star-3 ~ a, [data-rating^="3.5"] .star-4:after, 
[data-rating^="4"] .star-4, [data-rating^="4"] .star-4 ~ a, [data-rating^="4.5"] .star-5:after, 
[data-rating^="5"] .star-5, [data-rating^="5"] .star-5 ~ a { color:orange }
@-webkit-keyframes pop { 50% { -webkit-transform:scale(1.2) } }
@keyframes pop { 50% { transform:scale(1.2) } }
@-webkit-keyframes push { 50% { -webkit-transform:scale(0.8) } }
@keyframes push { 50% { transform:scale(0.8) } }
#rating-message { font-size:0.275em; font-weight:bold; color:transparent }
#rating-message.voted { -webkit-animation:pop 0.2s ease 0.2s; animation:pop 0.2s ease 0.2s; color:#999; transition:color .4s }
/* U+FE0E VARIATION SELECTOR-15 needed for Safari - https://stackoverflow.com/a/38362138 / http://unicode.org/emoji/charts/emoji-variants.html#2b1c */
#rating-message.voted:before { content:'\2714\fe0e'; display:inline; vertical-align:middle; font-size:3.5em; line-height:1.5; margin:0 0.125em 0 -0.5em; color:yellowgreen }


.twitter-share-button {
    padding-top: 50em;
}