@charset "UTF-8";

/*
Theme Name: Rhythmz Theme
Theme URI: https://rhythmzlounge.com/rhythmz-theme
Author: Exenreco Bell
Author URI: https://exenreco.com
Description: Tailored for rhythmzlounge.com
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 5.6
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rhythmz-theme
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Rhythmz Theme WordPress Theme, (C) 2020 WordPress.org
Rhythmz Theme is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearnings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Collumns.............Specific styles for the collumns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Meda text............Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Spacer...............Specific styles for the spacer block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/*
** Theme variables
**=====================================================================================*/
:root {
	--desktop-content-margin-bottom: 50vh;
}

/*patern background animation*/
@keyframes BackgroundPatternDance {
	from { background-size: 1%; }
  to { background-size: 20%; }
}
@keyframes kenburns {
  /* Start slightly zoomed in and centered */
  0% {
    background-size: 5%;
    background-position: 50% 50%;
  }

  /* Pan to top-left while zooming in */
  50% {
    background-size: 10%;
    background-position: 40% 35%;
  }

  /* Pan to bottom-right with a bit more zoom */
  100% {
    background-size: 5%;
    background-position: 60% 65%;
  }
}

/* GLOBALs
** Style rules governing fluid template
**=====================================================================================*/
form {
  gap: 5px;
  width: 90%;
  margin: auto;
  padding: 0px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  max-width: calc(90% - 24px);
  min-width: calc(90% - 24px);
}
form input:not([type='submit']),
form input:not(input[type='submit']),
form input:not(input[type='file']) {
  width: 90%;
  padding: 12px;
  display: block;
  text-indent: 5px;
  max-width: calc(90% - 24px);
  min-width: calc(90% - 24px);
}
form input[type="submit"],
form button[type="submit"] {
  width: 90%;
  padding: 12px;
  display: block;
  cursor: pointer;
  max-width: calc(90% - 24px);
  min-width: calc(90% - 24px);
}


/* FLUID TEMPLATE
** Style rules governing fluid template
**=====================================================================================*/
#theme-template.fluid #theme-header.fluid,
.theme-template.fluid .theme-header.fluid {
  z-index: 60;
}
#theme-template.fluid #theme-content.fluid,
.theme-template.fluid .theme-content.fluid {
  z-index: 55;
  margin-bottom: var(--desktop-content-margin-bottom, 50vh) !important;
}
#theme-template.fluid #theme-footer.fluid,
.theme-template.fluid .theme-footer.fluid {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  position: fixed;
}

/* FULL-WIDTH TEMPLATE
** Style rules governing full-width template
**=====================================================================================*/
#theme-template.full-width #theme-header.full-width,
.theme-template.full-width .theme-header.full-width {
  z-index: 60;
}
#theme-template.full-width #theme-content.full-width,
.theme-template.full-width .theme-content.full-width {
  z-index: 55;
  margin-bottom: var(--desktop-content-margin-bottom, 50vh) !important;
}
#theme-template.full-width #theme-footer.full-width,
.theme-template.full-width .theme-footer.full-width {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  position: fixed;
}


/* SITE SEARCH TEMPLATE
** Style rules governing site search template
** NB: Uses the fluid template header and footer, therefore no additional code needed.
**=====================================================================================*/
#theme-template.search #theme-content,
.theme-template.search .theme-content {
  z-index: 55;
  margin-bottom: var(--desktop-content-margin-bottom, 50vh) !important;
}

/* PRODUCT CATALOG / ARCHIVE PRODUCT TEMPLATE
** Style rules governing product catalog template
** NB: Uses the fluid template header and footer, therefore no additional code needed.
**=====================================================================================*/
#theme-template.product-catalog #theme-content,
.theme-template.product-catalog .theme-content {
  z-index: 55;
  margin-bottom: var(--desktop-content-margin-bottom, 50vh) !important;
}

/* CART TEMPLATE
** Style rules governing cart template
** NB: Uses the fluid template header and footer, therefore no additional code needed.
**=====================================================================================*/
#theme-template.cart #theme-content,
.theme-template.cart .theme-content {
  z-index: 55;
  margin-bottom: var(--desktop-content-margin-bottom, 50vh) !important;
}

/* CHECKOUT TEMPLATE
** Style rules governing checkout template
** NB: Uses the fluid template header and footer, therefore no additional code needed.
**=====================================================================================*/
#theme-template.checkout #theme-content,
.theme-template.checkout .theme-content {
  z-index: 55;
  margin-bottom: var(--desktop-content-margin-bottom, 50vh) !important;
}

@media screen and (max-width: 780px) {
  /* FLUID TEMPLATE
   ** Style rules governing fluid template
   **=====================================================================================*/
  #theme-template.fluid #theme-content.fluid,
  .theme-template.fluid .theme-content.fluid {
    z-index: initial;
    position: relative;
    margin-bottom: 0 !important;
  }
  #theme-template.fluid #theme-footer.fluid,
  .theme-template.fluid .theme-footer.fluid {
    left: initial;
    right: initial;
    bottom: initial;
    z-index: initial;
    position: relative;
  }
  #theme-template.fluid #theme-footer.fluid .wp-block-column,
  .theme-template.fluid .theme-footer.fluid .wp-block-column {
    border: none !important;
  }
}













/* THEME HEADER
** Style rules governing theme header
** Hiding header title and text for SEO support
**---------------------------------------------------------------------------------*/
#theme-header #header-container #header-left #header-stack .header-title,
.theme-header .header-container .header-left .header-stack .header-title,
#theme-header #header-container #header-left #header-stack .header-tagline,
.theme-header .header-container .header-left .header-stack .header-tagline {
  display: none !important;
  visibility: hidden !important;
}

/* THEME TITLE
** Style rules governing theme title -> animations
**---------------------------------------------------------------------------------*/
.theme-title.pattern .wp-block-cover__image-background,
#theme-title.pattern .wp-block-cover__image-background {
  background-position: 65% 65%;
  animation: kenburns 1.5s;
  -webkit-animation: kenburns 1.5s;
  -moz-animation: kenburns 1.5s;
  -o-animation: kenburns 1.5s;
  -moz-animation: kenburns 1.5s;
  transition: all 800ms cubic-bezier(0.075, 0.82, 0.165, 1);
}


  

/* Global Video Player
** Style rules governing the sites video player
**---------------------------------------------------------------------------------*/



/* START: Global style rules
** @since: since version 1.0.0
**=====================================================================================*/



@keyframes slideInFromTop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutToBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}



.slide-in-top {
  animation: slideInFromTop 500ms ease-in-out forwards;
}
/* 2. Attach animation to a class */
.slide-in-left {
  animation: slideInFromLeft 500ms ease-out forwards;
}

.slide-in-bottom {
  animation: slideInFromBottom 500ms ease-out forwards;
}
.slide-out-bottom {
  animation: slideOutToBottom 500ms ease-in forwards;
}