/*  
Theme Name: Drum Notes Archive
Theme URI: http://drumnotesarchive.com
Description: Template Theme for the Drum Notes Archive
Version: 0.2
Author: Drum Notes Archive
Author URI: http://drumnotesarchive.com
Tags: portfolio, archive, responsive, clean, groovy, translation-ready, custom-menus, 
Plugins: advanced custom fields, search and filter, relevanssi, woocommerce, 
*/


/* See CSS in assets/css/ for styles and layout structure! */


/*
  TABLE OF CONTENTS
  -----------------
  00 - RESET
  01 - BASE
  02 - LAYOUT
  03 - MODULES
  04 - COMPONENTS
  05 - THEME
*/


/* 
 *  00 - RESET
 *
 */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
  margin-bottom: 1em;
  border: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	border: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  cursor: pointer;
}

img,
video {
	max-width: 100%;
	height: auto;
}

.video-container {
	max-width: 800px;
    margin-left: auto;
    margin-right: auto;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0px 0px 1em 0px rgba(45,51,65,0.25);
	-moz-box-shadow: 0px 0px 1em 0px rgba(45,51,65,0.25);
	box-shadow: 
		0px 0px 1em 0px rgba(45,51,65,0.15),
		0px 0px 1px 0px rgba(45,51,65,0.25)
		;
	overflow: hidden;
}

.video-container img {
	display: block;
}

/*	Wordpress Core */

.aligncenter,
div.aligncenter {
    display: block !important;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.text-center {
	text-align: center;
}

/*	TABLE OF CONTENTS 
	
	COLORS
	
	TYPOGRAPHY
	
	BASE STYLES
	
	LAYOUTS
	
	MODULES
	
	COMPONENTS
	
*/
/* ///////////////////////////////////////////////////////////////////// 
//  COLORS
/////////////////////////////////////////////////////////////////////*/
/*	red */
/*	yellow */
/*	green */
/*	turquoise */
/*	light blue */
/*	blue */
/*	violett */
/*	dark blue */
/*	grey green */
.color-01 {
  color: #FF5C5C; }

.color-02 {
  color: #FFCC57; }

.color-03 {
  color: #B3F86B; }

.color-04 {
  color: #51D6AA; }

.color-05 {
  color: #77DCEB; }

.color-06 {
  color: #007498; }

.color-07 {
  color: #D378A7; }

.color-08 {
  color: #004458; }

.color-09 {
  color: #5C8381; }

.shade-01 {
  color: #262B36; }

.shade-02 {
  color: #2D3341; }

.shade-03 {
  color: #343C4D; }

.shade-04 {
  color: #959596; }

.shade-05 {
  color: #EAE9EB; }

.shade-06 {
  color: #F3F2F6; }

.dark {
  color: #333333; }

.light {
  color: #ffffff; }

.background-color-01 {
  background-color: #FF5C5C; }

.background-color-02 {
  background-color: #FFCC57; }

.background-color-03 {
  background-color: #B3F86B; }

.background-color-04 {
  background-color: #51D6AA; }

.background-color-05 {
  background-color: #77DCEB; }

.background-color-06 {
  background-color: #007498; }

.background-color-07 {
  background-color: #D378A7; }

.background-color-08 {
  background-color: #004458; }

.background-color-09 {
  background-color: #5C8381; }

.background-shade-01 {
  background-color: #262B36; }

.background-shade-02 {
  background-color: #2D3341; }

.background-shade-03 {
  background-color: #343C4D; }

.background-shade-04 {
  background-color: #959596; }

.background-shade-05 {
  background-color: #EAE9EB; }

.background-shade-06 {
  background-color: #F3F2F6; }

/* ///////////////////////////////////////////////////////////////////// 
//  TYPOGRAPHY
/////////////////////////////////////////////////////////////////////*/
/*	FONTS */
@font-face {
  font-family: 'Roboto Condensed';
  src: url("assets/fonts/robotocondensed.woff2") format("woff2"), url("assets/fonts/robotocondensed.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline; }

@font-face {
  font-family: 'Roboto Condensed';
  src: url("assets/fonts/robotocondensed-bold.woff2") format("woff2"), url("assets/fonts/robotocondensed-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  vertical-align: baseline; }

@font-face {
  font-family: 'Roboto Condensed';
  src: url("assets/fonts/robotocondensed-italic.woff2") format("woff2"), url("assets/fonts/robotocondensed-italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  vertical-align: baseline; }

@font-face {
  font-family: 'Roboto Condensed';
  src: url("assets/fonts/robotocondensed-bolditalic.woff2") format("woff2"), url("assets/fonts/robotocondensed-bolditalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  vertical-align: baseline; }

.sans, .roboto {
  font-family: "Roboto Condensed", sans-serif; }

@font-face {
  font-family: 'Argent';
  src: url("assets/fonts/argent.woff2") format("woff2"), url("assets/fonts/argent.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Argent';
  src: url("assets/fonts/argent-demibold.woff2") format("woff2"), url("assets/fonts/argent-demibold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Argent';
  src: url("assets/fonts/argent-italic.woff2") format("woff2"), url("assets/fonts/argent-italic.woff") format("woff");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'Argent';
  src: url("assets/fonts/argent-demibolditalic.woff2") format("woff2"), url("assets/fonts/argent-demibolditalic.woff") format("woff");
  font-weight: bold;
  font-style: italic; }

.serif, .argent {
  font-family: "Argent", serif; }

.text-large-xx {
  font-size: 3.5em;
  line-height: 1.25em; }

.text-large-x {
  font-size: 1.5em;
  line-height: 1em; }

.text-large {
  font-size: 1.25em;
  line-height: 1.25em; }

body, input, .text-base {
  font-size: 1em;
  line-height: 1.5em; }

.text-small {
  font-size: 0.875em;
  line-height: 1.5em; }

.text-small-x {
  font-size: 0.75em;
  line-height: 1.5em; }

.text-small-xx {
  font-size: 0.625em;
  line-height: 1.5em; }

/*	Style second language */
.lang-02,
.lang-02 p {
  font-style: italic;
  color: #959596 !important; }

.lang-02 em {
  font-style: normal; }

@media print {
  .lang-02 a {
    color: #959596; } }

/*	icon font styles */
.dna-icon-lg {
  font-size: 1.33333333em;
  vertical-align: -15%; }

.dna-icon-2x {
  font-size: 2em; }

.dna-icon-3x {
  font-size: 3em; }

.dna-icon-4x {
  font-size: 4em; }

.dna-icon-5x {
  font-size: 5em; }

.dna-icon-fw {
  width: 1.28571429em;
  text-align: center; }

.dna-icon-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none; }

.dna-icon-ul > li {
  position: relative; }

.dna-icon-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center; }

.dna-icon-li.dna-icon-lg {
  left: -1.85714286em; }

.dna-icon-border {
  padding: .1em 0.2915em;
  border-style: solid;
  border-width: 0.1em;
  border-color: inherit;
  border-radius: .1em;
  background-color: green; }

.dna-icon-border-round {
  display: inline-block;
  /* padding: 0 0.1915em; */
  padding: 0.18em 0.21em 0.22em 0.19em;
  line-height: 1em;
  height: 1.5em;
  width: 1.5em;
  border-style: solid;
  border-width: 0.09em;
  border-color: inherit;
  border-radius: 50%;
  margin-bottom: 0.25em;
  text-align: center;
  font-weight: bold; }
  
 /* ///////////////////////////////////////////////////////////////////// 
//  BASE STYLES
/////////////////////////////////////////////////////////////////////*/
html {
  scroll-behavior: smooth; }

body {
  display: block;
  position: relative;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 100%;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ffffff;
  background-color: #000;
  background-image: url(assets/images/site-background-01.jpg);
  background-repeat: no-repeat;
  background-size: contain; }

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: none; } }

body * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
a {
  color: #FF5C5C; }

.entry-content ol,
.lessons-builder .text ol,
.term-description ol {
  margin: 0 1em 1em 1.5em;
  list-style-type: decimal;
  list-style-position: outside;
  font-family: "Argent", serif; }

.entry-content ul,
.lessons-builder .text ul,
.term-description ul {
  margin: 0 1em 1em 1em; }

.entry-content li,
.lessons-builder .text li,
.term-description li {
  position: relative; }

.entry-content ul li::before,
.lessons-builder .text ul li::before,
.term-description ul li::before {
  content: '•';
  position: absolute;
  left: -0.75em; }

tr {
  border-bottom: solid 1px #EAE9EB; }

@media print {
  tr {
    border-bottom: solid 0.25pt #EAE9EB; } }

/* ///////////////////////////////////////////////////////////////////// 
//  LAYOUT
/////////////////////////////////////////////////////////////////////*/
/*
    GLOBAL BREAKPOINTS  
    
    In pixels because viewport size don't change when font-size changes.
    
    Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }
    
    Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
*/
/*
    Z-INDEX LEVELS

    Level    -1:

    Level     0:  background

    Level    10:  .branding
                  .nav-primary (mobile), 

    Level   100:  .nav-quickmenu, 
                  .nav-language (mobile),
                  .slider .handle

    Level  1000:

    Level 10000:  .nav-primary.toogle-nav (mobile)
                  .btn-expressform

*/
/* clear fix */
.clear {
  display: table;
  clear: both;
  height: 0; }

.clear-fix::after,
.container::after,
.row::after {
  content: "";
  display: block;
  clear: both; }

.container {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0 0.5em;
  max-width: 64em; }

.row {
  display: block;
  position: relative; }

.row .row {
  min-height: 100%; }

/* columns */
[class*="col-"] {
  display: block;
  position: relative;
  width: 100%; }

@media screen and (min-width: 768px) {
  .col-01, .col-02, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11, .col-12,
  [class*="col-"] [class*="col-"] {
    float: left; }
  .col-01, .col-02, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11 {
    margin-right: 4%; }
  .col-01 {
    width: 4.3333333%; }
  .col-02 {
    width: 13.3333333%; }
  .col-03 {
    width: 22%; }
  .col-04 {
    width: 30.3%; }
  .col-05 {
    width: 39%; }
  .col-06 {
    width: 48%; }
  .col-07 {
    width: 56.5%; }
  .col-08 {
    width: 65.3333334%; }
  .col-09 {
    width: 74%; }
  .col-10 {
    width: 82.6666667%; }
  .col-11 {
    width: 91.3333334%; }
  .col-12 {
    width: 100%; }
  [class*="col-"]:last-child {
    margin-right: 0%; }
  .offset-01 {
    margin-left: 8.3333333%; }
  .offset-02 {
    margin-left: 16.6666666%; }
  .offset-03 {
    margin-left: 25%; }
  .offset-04 {
    margin-left: 30.3%; }
  .offset-05 {
    margin-left: 39%; }
  .offset-06 {
    margin-left: 48%; }
  .offset-07 {
    margin-left: 56.5%; }
  .offset-08 {
    margin-left: 65.3333334%; }
  .offset-09 {
    margin-left: 74%; }
  .offset-10 {
    margin-left: 82.6666667%; }
  .offset-11 {
    margin-left: 91.3333334%; }
  .offset-12 {
    margin-left: 100%; } }

@media print {
  /*	DKPDF STYLES */
  .row {
    margin-left: -2%;
    margin-right: -2%; }
  .song-builder .row {
    margin-left: 0;
    margin-right: 0; }
  .col-01, .col-02, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11 {
    float: left;
    margin-left: 0;
    margin-right: 0;
    padding-left: 2%;
    padding-right: 2%; }
  .col-01 {
    width: 4.3333333%; }
  .col-02 {
    width: 12.6666667%; }
  .col-03 {
    width: 20.9%; }
  .col-04 {
    width: 29.3%; }
  .col-05 {
    width: 37.6%; }
  .col-06 {
    width: 45.9%; }
  .col-07 {
    width: 54.3333333%; }
  .col-08 {
    width: 62.3333333%; }
  .col-09 {
    width: 71%; }
  .col-10 {
    width: 79.3333333%; }
  .col-11 {
    width: 87.6666666%; }
  .col-12 {
    width: 100%; }
  .offset-01 {
    margin-left: 8.3333333%; }
  .offset-02 {
    margin-left: 16.6666666%; }
  .offset-03 {
    margin-left: 24.9%; }
  .offset-04 {
    margin-left: 30.3%; }
  .offset-05 {
    margin-left: 39%; }
  .offset-06 {
    margin-left: 48%; }
  .offset-07 {
    margin-left: 56.5%; }
  .offset-08 {
    margin-left: 65.3333334%; }
  .offset-09 {
    margin-left: 74%; }
  .offset-10 {
    margin-left: 82.6666667%; }
  .offset-11 {
    margin-left: 91.3333334%; }
  .offset-12 {
    margin-left: 100%; } }

.margin-00 {
  margin: 0 !important; }

.margin-top-00 {
  margin-top: 0 !important; }

.margin-top-01 {
  margin-top: 1em; }

.margin-top-02 {
  margin-top: 2em !important; }

.margin-top-03 {
  margin-top: 3em !important; }

.margin-top-04 {
  margin-top: 4em !important; }


.margin-left-01 {
  margin-right: 1em; }

.margin-left-02 {
  margin-right: 2em; }

.margin-right-01 {
  margin-right: 1em; }

.margin-right-02 {
  margin-right: 2em; }

.margin-bottom-00 {
  margin-bottom: 0 !important; }

.margin-bottom-01 {
  margin-bottom: 1em; }

.margin-bottom-02 {
  margin-bottom: 2em; }

.margin-bottom-03 {
  margin-bottom: 3em; }

.margin-bottom-04 {
  margin-bottom: 4em; }

.padding-00 {
  padding: 0 !important; }

.padding-01 {
  padding: 1em; }

.padding-02 {
  padding: 2em; }

.padding-top-00 {
  padding-top: 0; }

.padding-top-01 {
  padding-top: 1em; }

.padding-top-02 {
  padding-top: 2em; }

.padding-top-03 {
  padding-top: 3em; }

.padding-top-04 {
  padding-top: 4em; }

.padding-right-01 {
  padding-right: 1em; }

.padding-right-02 {
  padding-right: 2em; }

.padding-bottom-00 {
  padding-bottom: 0; }

.padding-bottom-01 {
  padding-bottom: 1em; }

.padding-bottom-02 {
  padding-bottom: 2em; }

.padding-bottom-03 {
  padding-bottom: 3em; }

.padding-bottom-04 {
  padding-bottom: 4em; }

.site-header {
  display: block;
  position: relative;
  margin: 0 auto;
  padding-top: 1em;
  padding-bottom: 2em;
  background: rgba(38, 43, 54, 0.98); }

.top-content {
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  color: #ffffff;
  background: rgba(45, 51, 65, 0.98); }

section.video {
	padding: 6em 0;
	min-height: 100vh;
	text-align: center;
}

.main-content {
  padding-top: 3em;
  padding-bottom: 3em;
  padding-left: 1em;
  padding-right: 1em;
  color: #333333;
  background: #ffffff; }

.site-footer {
  display: block;
  position: relative;
  margin: 0;
  padding-top: 2em;
  padding-bottom: 2em;
  color: #959596;
  background-color: #262B36; }

@media screen {
  .screen {
    display: block; }
  .print {
    display: none !important; } }

@media print {
  .screen {
    display: none !important; }
  .print {
    display: block; } }

@media (min-width: 768px) {
  .mobile {
    display: none !important; } }

@media (max-width: 767px) {
  .tablet {
    display: none !important; } }




/* ///////////////////////////////////////////////////////////////////// 
//  MODULES
/////////////////////////////////////////////////////////////////////*/

/*	Nav Primary */

.nav-primary {
	max-width: 832px;
	margin: 0 auto;
	padding: 2em 1em 0 1em;
	text-align: center;
	background: #fff;
}

.nav-primary li {
	display: inline-block;
}

.nav-primary a {
	display: block;
	padding: 0.25em 1em;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.875em;
	text-transform: uppercase;
}

.nav-primary a:hover {
	text-decoration: underline;
}





/* ///////////////////////////////////////////////////////////////////// 
//  COMPONENTS
/////////////////////////////////////////////////////////////////////*/

hr {
  display: block;
  position: relative;
  padding: 0;
  margin: 1em 0;
  height: 1px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: #eee;  }
  

/*  Branding */
.branding {
  position: relative;
  margin-left: auto;
  margin-right: auto;
    width: 5em;
    height: 5em;
    overflow: hidden;
    text-indent: -999em;
    background: url(assets/images/drumnotesarchive-logoinvert@2x.png) center no-repeat;
    background-size: contain; } 

.branding a {
  display: block;
  height: 100%;
  width: 100%; }

.branding .beta {
  display: none; }

@media only screen and (min-width: 576px) {
  .branding .beta {
    display: block;
    position: absolute;
    top: 0.125em;
    right: 0;
    padding: 0.25em;
    border-radius: 0.25em;
    font-size: 0.6em;
    font-weight: bold;
    line-height: 0.6em;
    height: 1.5em;
    text-indent: 0;
    text-transform: uppercase;
    color: #959596;
    background: #262B36;
    border: 2px solid #959596; } }

/*	Entry Titles */
.title {
  margin-bottom: 1.75em;
  text-align: center; }

@media print {
  .title {
    /*		border-top: 1px solid #000;
		border-bottom: 1px solid #000; */ } }

.title h1,
.title h2 {
  margin-bottom: 0;
  padding-bottom: 0; }


.copyright {
  font-size: 0.75em; }

/*	Buttons, Links */

.button-top {
  display: block;
  position: absolute;
  left: 50%;
  top: -1em;
  height: 3em;
  width: 3em;
  padding-top: 0.375em;
  border-radius: 50%;
  text-align: center;
  transform: translateX(-1.5em);
  background: #343C4D;
  border: 4px solid #262B36; }

.button-top:hover {
  text-decoration: none; }