/*
 Theme Name:   The Fragrance Djin
 Theme URI:    http://www.djin.at
 Description:  Theme of the Fragrance Djin web site.
 Author:       Sascha Seidel
 Author URI:   http://www.nptech.de
 Template:     oceanwp
 Version:      2.0
 Tags:         dark, complex, responsive, multi-column, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, favicons, featured-images, image-slider, fancybox, full-width-template, theme-options
 Text Domain:  djin
*/

/* Parent stylesheet should be loaded from functions.php not using @import */


/* =Theme customization starts here
-------------------------------------------------------------- */


/**
 * Move custom page logo.
 */
#site-header #site-logo #site-logo-inner a img.custom-logo {
  position: absolute;
  top: 15px;
  left: 5px;
}

/**
 * TODO SEIDEL: Added custom styling for oceanwp-sticky-header plug-in.
 * 
 * Used higher specificity of CSS selectors, to override style of plug-in.
 * 
 * Maybe we also need to add last CSS @media block from original code:
 *   https://github.com/scriptcoil/oceanwp-sticky-header/blob/master/style.css
 * 
 * TODO: Move this style to its own CSS file and import here or via functions.php?
 */
.page-header {
  padding: 68px 0;
}

#site-logo-inner, #site-header-inner {
  transition: all 0.6s ease-in-out !important;
}

#site-header #site-logo #site-logo-inner a img {
  transition: all 0.6s ease-in-out !important;
}

.fixed_sticky_active #site-header #site-logo #site-logo-inner a img.custom-logo {
  position: absolute;
  top: 15px;
  left: 5px;
  max-height: 80px !important;
}

@media(min-width: 960px) {
  .fixed_sticky_active #site-header #site-logo #site-logo-inner {
    height: 54px !important;
  }

  .fixed_sticky_active #site-header #site-navigation-wrap .dropdown-menu > li > a {
    line-height: 54px !important;
    display: inline-block !important;
  }

  .fixed_sticky_active #site-header {
    opacity: 1;
  }
}
/**
 * TODO SEIDEL: End of block.
 */

/**
 * Color of placeholder in search field of header navigation.
 */
#searchform-header-replace input::placeholder {
  color: white;
}

/**
 * Text color in search field of header navigation.
 */
#searchform-header-replace input {
  color: white;
}

/**
 * Separate search results.
 */
body.search-results .blog-entry.grid-entry {
  margin-bottom: 20px;
}

/**
 * Center image captions.
 */
figcaption.wp-caption-text {
  text-align: center;
  clear: both;
}

/**
 * Tags for blog posts in normal case.
 */
.single .post-tags a {
  text-transform: none;
}

/**
 * Djin link in page footer.
 */
.footer-link:hover {
  color: #FFD700 !important;
}

/**
 * Fit all header images to header size.
 */
.background-image-page-header {
  height: 450px;
  background-size: cover;
  background-attachment: fixed;
}

/**
 * Header image on Home page.
 */
.page-id-171 .background-image-page-header {
  background-image: url('http://www.saschaseidel.de/testdir/djin/cms/wp-content/uploads/2017/08/Model-with-fragrance.jpg');
}

/**
 * Header image on Men page.
 */
.page-id-18 .background-image-page-header {
  background-image: url('http://www.saschaseidel.de/testdir/djin/cms/wp-content/uploads/2017/08/Scent-of-a-man.jpg');
}

/**
 * Header image on Women page.
 */
.page-id-19 .background-image-page-header {
  background-image: url('http://www.saschaseidel.de/testdir/djin/cms/wp-content/uploads/2017/08/Scent-of-a-woman.jpg');
}

/**
 * Header image on Unisex page.
 */
.page-id-268 .background-image-page-header {
  background-image: url('http://www.saschaseidel.de/testdir/djin/cms/wp-content/uploads/2017/08/Unisex-scent.jpg');
}

/**
 * Info box on Contact page.
 */
.transparent-box {
  opacity: 0.4;
}

/**
 * Full width button on home page.
 */
.full-btn.elementor-widget-button .elementor-button {
  width: 100%;
}

/**
 * Layout of page footer.
 */
body #footer-widgets .ocean-newsletter-form {
  margin: 0 0 26px;
}

body #footer-widgets .ocean-newsletter-form-wrap input[type="email"] {
  color: #7c7c7c;
  border-width: 2px;
  border-color: rgba(255,255,255,0.2);
  font-size: 15px;
  letter-spacing: 0.8px;
}

body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:hover {
  border-color: rgba(255,255,255,0.5);
}

body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:focus {
  border-color: rgba(255,255,255,0.6);
}

body #footer-widgets .ocean-newsletter-form-wrap button:hover {
  background-color: #5c7c19;
}

body #footer-widgets .social-widget li a {
  color: #4a4a4a;
  font-size: 20px;
  line-height: 1;
  padding: 0.5em;
}

body #footer-widgets .social-widget li a:hover {
  color: #8cba29;
}

/**
 * Button to scroll to top of page.
 */
#scroll-top {
  right: 30px;
  bottom: 0;
  width: 48px;
  height: 35px;
  line-height: 35px;
  font-size: 22px;
  border-radius: 4px 4px 0 0;
}

/**
 * Hide button on small displays.
 */
@media only screen and (max-width: 320px) {
  #scroll-top {
    display: none !important;
  }
}

/**
 * Increase size of input fields for
 * author name and email address.
 */
#respond .comment-form-author,
#respond .comment-form-email {
  float: left;
  width: 50%;
}

/**
 * Input field for web site address is
 * no longer shown in comments form.
 */
#respond .comment-form-url {
  width: 0;
  display: none;
}

/**
 * Adjust padding, since we only have
 * two of three fields left.
 */
#respond .comment-form-author {
  padding-right: 10px;
}

#respond .comment-form-email {
  padding-left: 10px;
  padding-right: 0;
}

#respond .comment-form-url {
  padding: 0;
}

/**
 * Add space between submit button of comments
 * form and box with 'Code of conduct'.
 */
#respond #comment-submit {
  margin-bottom: 20px;
}

/**
 * Insert box with 'Code of conduct' after form
 * to enter new comment or reply to existing one.
 */
.comment-reminder {
  clear: both;
  background: rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin: 2.5rem 0;
}

.comment-reminder h4 {
  text-transform: uppercase;
}

.comment-reminder p {
  font-weight: normal;
}

/**
 * TODO SEIDEL: Added the code below.
 */

/** Welcome box on the homepage */
.welcome-box a {
  color: #ffffff;
  font-weight: bold;
}

.welcome-box a:hover {
  color: #ffffff;
  border-bottom: 1px dashed #ffd700;
}

/** Cookie notice in page footer */
#cookie-notice {
  font-size: 16px;
  background-color: rgba(54, 61, 77, 0.8) !important;
}

#cookie-notice #cn-notice-text a {
  color: #ffffff;
  font-weight: bold;
}

#cookie-notice #cn-notice-text a:hover {
  color: #ffffff;
  border-bottom: 1px dashed #ffd700;
}

#cookie-notice #cn-notice-buttons a.cn-button {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  background-color: #8e006f;
  padding: 7px 9px 7px 9px;
  border-radius: 3px;
}

#cookie-notice #cn-notice-buttons a.cn-button:hover {
  background-color: #72005f;
  border: none;
}