/*************************************************/
/* Paradise ~ centerkey.com/paradise             */
/* GPLv3 ~ Copyright (c) individual contributors */
/*************************************************/

/* Gallery */
/* Do not add customizations to this file -- edit the CSS in: gallery/~data~/custom-style.css */

/* Foundation */
body {
   color: whitesmoke;
   background-color: dimgray;
   padding: 35px 50px;
   }

/* Document */
h1 {
   margin-bottom: 5px;
   text-shadow: silver 2px 1px 0.1em;
   }
h2 {
   font-size: 1.2rem;
   }
h3 {
   font-size: 1.2rem;
   margin-bottom: 15px;
   }

/* Page layout */
body >header {
   margin-bottom: 10px;
   }
body >main >nav {
   background-color: darkgray; /* IE8,IE9 */
   background: linear-gradient(to bottom, silver, gray);
   padding: 0px;
   margin: 0px 0px 10px 0px;
   }
body >main >nav >span {
   display: table-cell;
   font-size: 0.9rem;
   background-color: rgba(150, 200, 255, 0.0);
   transition: background-color 0.4s;
   border-right: 1px solid dimgray;
   padding: 4px 20px;
   }
body >main >nav >span.selected,
body >main >nav >span:hover {
   background-color: rgba(150, 200, 255, 0.3);
   }
body >main #gallery-panels >section {
   position: relative;
   min-height: 400px;
   border: 1px solid whitesmoke;
   padding: 20px 25px;
   }
body >footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: gray;
   font-size: 0.8rem;
   border: 1px dotted black;
   padding: 10px 10px;
   margin-top: 15px;
   }
body >footer >div:first-child {
   padding-right: 50px;  /* helps center middle item */
   }

/* Image gallery */
.gallery-images {
   text-align: center;
   }
.gallery-images .image {
   position: relative;
   display: inline-block;
   vertical-align: top;
   margin: 0px 10px 20px 10px;
   }
.gallery-images .image img {
   max-width: 100%;
   border: 5px solid black;
   transition: 1s;
   }
.gallery-images .image img:hover {
   border-color: white;
   box-shadow: silver 0px 0px 1.5em;
   }
.gallery-images .image p {
   text-align: center;
   font-size: 0.8rem;
   margin: 0px;
   }
.gallery-images .image .badge {
   position: absolute;
   top: 120px;
   right: 10px;
   font-size: 0.9rem;
   font-weight: bold;
   color: white;
   background-color: red;
   border: 3px solid gray;
   border-radius: 10px;
   padding: 3px 5px;
   opacity: 0.6;
   }
.gallery-images .image .image-caption a i.fa {
   position: absolute;
   bottom: 0px;
   right: 0px;
   font-size: 1.0rem;
   color: white;
   opacity: 0;
   transition: all 0.5;
   }
.gallery-images .image .image-caption:hover a i.fa {
   text-shadow: 0px 0px 0.3em black;
   opacity: 1;
   }
body.caption-italic .image-caption {
   font-style: italic;
   }
body.caption-caps .image-caption {
   text-transform: uppercase;
   }

/* Contact form */
form.feedback label textarea,
form.feedback label input {
   max-width: 60%;
   }
form.feedback button {
   margin: 15px 0px 0px 105px;
   }
form.feedback aside {
   position: absolute;
   right: 15px;
   bottom: 10px;
   font-size: 0.7rem;
   margin: 0px;
   }

/* One image */
.one-image {
   text-align: center;
   border: 1px solid white;
   padding: 30px 0px;
   }
.one-image figure figcaption {
   font-size: 1.8rem;
   font-weight: bold;
   margin-bottom: 10px;
   }
.one-image figure img {
   max-width: 100%;
   border: 8px solid black;
   }
.one-image p {
   font-size: 1.0rem;
   padding: 0px 20%;
   }

/* Magnific Popup */
.mfp-gallery .mfp-content img {
   transition: all 0.5s;
   }
.mfp-gallery .mfp-content {
   background-color: white;
   border: 10px solid white;
   border-top: none;
   box-shadow: 0px 0px 1.0em silver;
   }
.mfp-gallery .mfp-content .mfp-figure:after {
   box-shadow: none;
   }
.mfp-gallery .mfp-content .mfp-close,
.mfp-gallery .mfp-content .mfp-title,
.mfp-gallery .mfp-content .mfp-counter {
   color: dimgray;
   font-weight: bold;
   }

/* Mobile */
@media only screen and (max-device-width: 480px) {
   body {
      padding: 0px;
      }
   body >header {
      font-size: 70%;
      }
   body >footer {
      flex-direction: column;
      }
   body >footer >* {
      margin: 3px 0px;
      }
   body >footer >div:first-child {
      padding-right: 0px;
      }
   form.feedback label >span:first-child {
      display: block;
      text-align: left;
      }
   form.feedback label textarea,
   form.feedback label input {
      max-width: 100%;
      }
   form.feedback button {
      margin: 10px 0px 15px 0px;
      }
   }