/*
  Theme Name: 		Live Music Now Rhein Ruhr 2026
  Theme URI:
  Description: 		Custom Wordpress Theme
  Version: 				2.0
  Author: 				72dpi
  Author URI:  		http://www.72dpi.de/
*/


/* MARK: Fonts
-------------------------------------------------------------------------------------------------------------- */

/* merriweather-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/merriweather-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/merriweather-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/merriweather-v33-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/merriweather-v33-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* nunito-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/nunito-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/nunito-sans-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/nunito-sans-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/nunito-sans-v19-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* MARK: Reset
-------------------------------------------------------------------------------------------------- */
*, 
*::before, 
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
	height: auto;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
	margin: 0;
  padding: 0;
	list-style: none;
}


/* MARK: Custom Properties
-------------------------------------------------------------------------------------------------------------- */


:root {

  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.9438rem, 1.7707rem + 0.8652vw, 2.4413rem);
  --step-4: clamp(2.3325rem, 2.0823rem + 1.2511vw, 3.0519rem);
  --step-5: clamp(2.7994rem, 2.4461rem + 1.7663vw, 3.815rem);

  --font-serif: "Merriweather", Times, "Times New Roman", serif;
  --font-plain: "Nunito Sans", Calibri, Verdana, Arial, sans-serif;

  --clr-black: 0,0,0; /* */
  --clr-text: 68,68,68; /* #444444 */
  --clr-red: 211,68,64; /* #d34440 */
  --clr-beige: 233,232,223; /* #e9e8df */
  --clr-green: 53,131,87; 
}



/* MARK: Base
-------------------------------------------------------------------------------------------------------------- */
body {
	background: #fff;
	font-family: var(--font-plain);
	font-size: var(--step-0);
  line-height: 1.5;
	color: rgba(var(--clr-text),1);
}

.wrap {
  --wrap-max-width: 1280px;
  --page-gap: 4vw;
  max-width: min(var(--wrap-max-width), 100% - var(--page-gap));
  margin-inline: auto;
}

a:link,
a:visited,
a:active {
	outline: 0;
  color: rgba(var(--clr-red),1);
	text-decoration: none;
}
	a:hover {
		text-decoration: underline;
	}




/* Header & Navigation
------------------------------------------------------------------------------------------- */
.site-header {
  padding: 1rem 0;
}
  .site-header div {
    align-items: center;
  }
  .site-header .wrap div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

a.logo {
  display: inline-block;
  width: 6rem;
}




/* Navigation Mobile and General Styles
----------------------------------------------------------------------------------- */
nav.global {
	display: flex;
	overflow: hidden;
  height: 0;

  &.active {
		height: auto;
	}
}  

  nav.global ul {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
    nav.global ul ul {
      display: none;
    }
  nav.global ul li.current-menu-ancestor > a,
  nav.global ul li.current-menu-item > a {
    color: rgba(var(--clr-red),1);
  }
    nav.global ul a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .5rem 0;
      border-bottom: 1px solid rgba(var(--clr-black),.3);
      color: rgba(var(--clr-black),1);
      text-decoration: none;
    }
  

/* Mobile, but only applied below Desktop
----------------------------------------------------------------------------------------------- */
@media (width <= 720px) {
  nav.global > ul {
    margin-top: 2rem;
   }
  /* Arrows Mobile */
  nav.global .sub-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline-end: .5rem;
  }
    nav.global .highlighted .sub-arrow {
      rotate: 90deg;
    }

  nav.global ul ul a { padding-left: 1rem; } /* Sub Page */
  nav.global ul ul ul a {	padding-left: 2rem; } /* Sub Sub Page */
}


/* Navigation Desktop
----------------------------------------------------------------------------------------------- */
@media (width >= 720px) {

  a.burger-menu {
    display: none;
  }

	nav.global,
	nav.global.active {
		height: auto;
		overflow: visible;
		display: flex;
		justify-content: flex-end;
	}
    nav.global ul {
      flex-direction: row;
      gap: 1rem;
      width: auto;
      font-family: var(--font-serif);
    }
      nav.global ul a {
        border-bottom: none;
        white-space: nowrap;
      }
        nav.global li {
          position: relative;
        }

  /* Desktop Top Menu Arrows */
  nav.global .sub-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    transform: rotate(90deg);
  }
    nav.global .highlighted .sub-arrow {
      transform: rotate(270deg);
      color: rgba(var(--clr-red),1);
    }

  
  /* Desktop Dropdowns Menues and Sub-Arrows */
  nav.global ul ul {
    position: absolute;
    background-color: rgba(var(--clr-red),1);
    box-shadow: .2rem .2rem .5rem rgba(44,52,61,.5);
    z-index: 100;
  }
    nav.global ul ul a {
      padding: .5rem;
      color: #fff;
      font-size: var(--step--1);
    }
      nav.global ul ul li.current-menu-item > a {
        color: #fff;
      }
      nav.global ul ul a svg {
        color: rgba(255,255,255,1);
        transform: rotate(-90deg);
      }

    /* Dropdowns Submenu Hover */
    nav.global ul ul li:hover{
      background: rgba(255,255,255,.15);
    }

}




/* MARK: Typo
-------------------------------------------------------------------------------------------------------------- */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  font-size: var(--step-4);
}

h2, .as-h2 {
  font-size: var(--step-2);
  color: rgba(var(--clr-red),1);
}

h3, .as-h3 {
  font-size: var(--step-1);
  color: rgba(var(--clr-red),1);
}


article.type-post h4 {
  color: rgba(var(--clr-red),1);
}

p.info {
  border: 1px solid #ddd;
  padding: .5rem 1rem;
  background: #f5f5f5;
}

p.smallcaps {
  font-family: var(--font-plain);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: var(--step--2);
}

hr {
  margin: 1.5rem 0;
  height: 1px;
  border: none;
  color: #ddd;
  background-color: #ddd;
}

blockquote {
  margin: 1rem 0;
  padding: .5rem 2rem;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 175%;
  border-left: .5rem solid rgba(var(--clr-red),1);
  background-color: rgba(var(--clr-beige),.5);
}


article ul:not([class]) {
  list-style: disc;
}
  article ul:not([class]) li {
    margin-inline-start: 1.25rem;
  }
  article ul:not([class]) li::marker {
    color: rgba(var(--clr-red),1);
  }

  
ul.list-note {
  list-style: none;
}
  ul.list-note li {
    margin: 0;
    padding: .3rem 0; 
    border-top: 1px solid rgba(var(--clr-beige),1);
  }
    ul.list-note li:before {
      content: "♫";
      margin: 0 .5rem;
      color: rgba(var(--clr-beige),1);
    }
      ul.list-note li:hover:before {
        color: rgba(var(--clr-red),1);
      }
    ul.list-note li:hover {
      background-color: rgba(var(--clr-beige),.5);
    }



.list-posts {
  font-size: var(--step--1);
}
  .list-posts li {
    border-top: 1px solid rgba(var(--clr-black),.5);
  }
    .list-posts li a {
      display: inline-block;
      padding: .3rem 0;
      color: rgba(var(--clr-black),.5);
    }
      .list-posts li a:hover {
        color: rgba(var(--clr-red),1);
      }


.row-red {
  background-color: rgba(var(--clr-red),1);
}
.row-beige {
  background-color: rgba(var(--clr-beige),.5);
}

.row-red :is(h1,h2,h3,p, ul) {
  color: #fff;
}

/* MARK: Layout
-------------------------------------------------------------------------------------------------------------- */
main section {
  margin-block-end: 3rem;
}

article {
  max-width: 65ch;
}

.row-visual {
  margin-block-end: 3rem;
}
.row-visual .wrap div:first-child {
  background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
  background-color: rgba(var(--clr-beige),1);
  min-height: 20rem;
  position: relative;
  /*filter: grayscale(1)  blur(5px) ;*/
}
  .row-visual .wrap div:first-child span {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .1rem .5rem;
    font-size: .9rem;
    background-color: rgba(var(--clr-text),.5);
    color: rgba(255,255,255,.75);
  }

  @media screen and (width >= 720px) {
    .row-visual .wrap div:first-child {
      min-height: 25rem;
    }
  }
    @media screen and (width >= 1024px) {
      .row-visual .wrap {
        min-height: 32rem;
      }
    }

.row-visual .wrap div:last-child {
  background: url(svg/instrumente.svg);
  background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
    .row-visual .wrap div:last-child img {
      display: none;
    }

@media screen and (min-width: 720px) {
  .row-visual .wrap div:last-child {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .row-visual .wrap div:last-child img {
    margin: 1rem 0 0 1rem;
    display: block;
    width: 20rem;
    opacity: .4;
  }
}


.auto-grid {
  --p-block: 2rem;
  --min-size: 15rem;
  --gap: 1rem;
  padding-block: var(--p-block);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-size), 1fr));
  gap: var(--gap);
}




/* MARK: Events
-------------------------------------------------------------------------------------------------------------- */
.event-item {
  margin-block-end: .25rem; 
  padding-block: .5rem;
  font-family: var(--font-plain);
  font-size: var(--step-0);
  background-color: aliceblue;
  color: rgba(var(--clr-text),.8);
  display: flex;
  align-items: center;
}
	.event-item:hover {
		background-color: rgba(var(--clr-beige),.5);
	}
     
    .event-nicedate {
      font-family: var(--font-serif);
      font-size: var(--step-2);
    }
      .event-nicedate span:first-child {
        color: rgba(var(--clr-red),1);
      }
      .event-nicedate span:last-child {
        color: rgba(var(--clr-black),.2);
      }

    .event-day,
    .event-time {
      font-size: var(--step-0);
      font-family: var(--font-serif);
    }
  
    .event-city,
    .event-location,
    .event-artists {
      display: block;
    }

    .event-item hr {
      height: 1px;
      border: none;
      background-color: rgba(var(--clr-black),.1);
      margin-block: .5rem;

      @media (width >= 720px) {
          display: none;
      }
    }


/* MARK: Musiker
-------------------------------------------------------------------------------------------------------------- */
ul.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: var(--step--1);
}
  ul.tags li a {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 1rem;
    background-color: rgba(var(--clr-beige),.5);
    color: rgba(var(--clr-black),.8);
    text-decoration: none;
  }
    ul.tags li a:hover {
      background-color: rgba(var(--clr-beige),1);
    }
    ul.tags li.current-cat a {
      color: #fff;
      background-color: rgba(var(--clr-red),1);
    }
    
    
 .artist {
  position: relative;
  padding: .75rem;
  /*border: 1px solid rgba(var(--clr-black),.1);*/
  border-radius: .5rem;
  height: 100%;
  background-color: aliceblue;
}
  .artist h4 {
    color: rgba(var(--clr-red),1);
  }
  .artist p {
    margin: 0;
  }
  .artist .post-edit-link {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
  }





/* MARK: Utilities
-------------------------------------------------------------------------------------------------------------- */

.browse-posts {
	margin-block: 2rem;
  display: flex;
  gap: 1rem;
}
  .browse-posts div:empty {
    display: none;
  }

a.btn, input[type=submit], .browse-posts a {
	display: inline-flex;
  align-items: center;
  padding: .4rem .8rem;
  font-family: var(--font-plain);
  color: rgba(var(--clr-text),.8);
  background-color: rgba(var(--clr-beige),1);
  border-radius: .2rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
  a.btn:hover, input[type=submit]:hover, .browse-posts a:hover {
    background: rgba(var(--clr-red),1);
		color: #fff;
	}
	
  a.btn svg {
		margin: 0 0 0 .5rem;
	}
  
  a.btn-red {
    color: #fff;
    background-color: rgba(var(--clr-red),1);
  }


  a.btn-download:before {
    content: '↓';
    font-weight: bold;
    margin-right: .5rem;
  }



.row-red a.btn {
  border: 1px solid #fff;
  color: #fff;
}


a.post-edit-link {
	color: #999;
}



.row-spenden {
	text-align: center;
  color: #fff;
}
  .row-sponsoren ul li:before {
    content: " ➽ ";
    color: rgba(var(--clr-red),.5);
  }

  
.row-sponsoren {
	text-align: center;
}
	.row-sponsoren ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
		font-family: var(--font-serif);
	}





/* Footer
-------------------------------------------------------------------------------------------------- */
.row-footer {
	background-color: rgba(var(--clr-beige),.5);
  font-size: 1.1rem;
}

    .row-footer ul ul {
      margin: 0 0 .5rem 1rem;
      font-size: var(--step--1);
    }

.row-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 2rem;
  font-size: var(--step--1);
  width: fit-content;
}






/* MARK: Wordpress Classes
-------------------------------------------------------------------------------------------------------------- */

/* Gallery Shortcode
------------------------------------------------------------------------------ */
.wp-gallery {
	margin: 1rem 0;
	display: flex;
	flex-wrap: wrap;
}
	.wp-gallery img {
		display: block;
		width: 100%;
    border-radius: .35rem;
    box-shadow:
      0 .5rem .5rem -.5rem rgba(0,0,0,.3),
      0 -.5rem .5rem -.5rem rgba(0,0,0,.3);
	}
	.wp-gallery figure {
		flex: 0 1 50%;
    margin: 0;
    padding-right: .75rem;
    padding-bottom: .75rem;
	}
		.wp-gallery figcaption {
      padding: .5rem 0 1rem 0;
      font-size: .9rem;
      line-height: 1.2;
		}
    .wp-gallery figcaption:empty {
      display: none;
		}
	
	@media(min-width: 480px) {
		.wp-gallery figure {
			flex: 0 1 33.33333%;
		}
	}

  @media(min-width: 720px) {
		.wp-gallery figure {
			flex: 0 1 25%;
		}
	}


/* Captions
------------------------------------------------------------------------------ */

img.alignleft {
	float: left;
	margin: 0 1rem 1rem 0;
}
img.alignright {
	float: right;
	margin: 0 0 1rem 1rem;
}
img.aligncenter {
	display: block;
	margin: 1rem auto;
}
img.alignnone {
	display: block;
	margin: 1rem 0;
}



	figure.wp-caption img {
		display: block;
    /*border-bottom: .2rem solid rgba(var(--clr-red),1);*/
	}
	figure.wp-caption figcaption {
		padding: .5rem 0;
	}
  figure.wp-caption figcaption:empty {
		display: none;
	}
	
	figure.wp-caption.alignleft {
		float: left;
		margin: 0 1rem .5rem 0;
	}
	figure.wp-caption.alignright {
		float: right;
		margin: 0 0 .5rem 1rem;
	}
	figure.wp-caption.aligncenter {
		display: block;
		margin: 1rem auto;
	}
	figure.wp-caption.alignnone {
		display: block;
		margin: 1rem 0;
	}




/* MARK: Forms
-------------------------------------------------------------------------------------------------------------- */
.wpcf7-form > * {
  margin-block-end: 1rem;
}

.hidden-fields-container {
  display: none;
}

.wpcf7 fieldset {
  margin: 0 0 1.5rem 0;
  border: 1px solid #ddd;
  border-radius: .5rem;
}
.wpcf7 small,
.wpcf7 label em {
  color: rgba(var(--clr-red),1);
}

@media (min-width: 720px) {
  .wpcf7 div:not([class]) {
    display: flex;
  }
    .wpcf7 div:not([class]) div:first-child {
      margin-right: .5rem;
    }
    .wpcf7 div:not([class]) div:last-child {
      margin-left: .5rem;
    }
}

.wpcf7 label {display: block; }
.wpcf7 *:focus {outline: none; }

.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea,
.wpcf7-select {
	margin: .3rem 0;
  width: 100%;
  background: rgba(var(--clr-beige),.2);
	padding: .5rem;
	border: 2px solid rgba(var(--clr-beige),1);
	border-radius: .25rem;
}

.wpcf7-textarea {
	height: 10rem;
  resize: vertical;
}

/* not valid */
.wpcf7-text.wpcf7-not-valid,
.wpcf7-email.wpcf7-not-valid,
.wpcf7-textarea.wpcf7-not-valid {
  border: 2px solid rgba(var(--clr-red),1);
}
.wpcf7-not-valid-tip {
  display: inline-block;
}

/* 
Checkbox and Radio Toggle Buttons
add class:togglebutton for elements, see https://bdwm.be/contact-form-7-toggle-buttons/
------------------------------------------------------ */
.togglebuttons .wpcf7-list-item {
  margin: .3rem .3rem .3rem 0;
  display: inline-block;
}
.togglebuttons > span input {
  opacity: 0;
  position: absolute;
}

.togglebuttons > span .wpcf7-list-item-label {
  display: block;
  padding: .3rem .5rem;
  border-radius: .2rem;
  background: rgba(var(--clr-beige),.5);
  /*box-shadow: 0 1px 1px rgba(0,0,0,.2);*/
  cursor: pointer;
}
  .togglebuttons > span input:checked + .wpcf7-list-item-label {
    background: rgba(var(--clr-beige),1);
    font-weight: bold;
  }
    .togglebuttons > span input:checked + .wpcf7-list-item-label:after {
      content:" ✔";
      color: rgba(var(--clr-green),1);
    }

    
/* See form */
@media (width >= 720px) {
  .wpcf7 div:not([class]) {
    display: flex;
    gap: 1rem;
  }
  .wpcf7 div:not([class]) > * {
    flex: 1;
  }

}  



/* Shortcode im Formular [response] */
.wpcf7-response-output:empty {
  display: none;
}
  .wpcf7-response-output {
    margin: 0 0 2rem 0;
    padding: 1rem;
    color: #fff;
    /* background-color: rgba(var(--clr-red),1); */
    border-radius: .25rem;
  }
    .wpcf7-response-output.alert-success {
      background-color: hsl(79, 93%, 38%);
    }
    .wpcf7-response-output:is(.alert-danger, .alert-warning) {
      background-color: rgba(var(--clr-red),1);
    }

/* Messages */
.screen-reader-response {
	display: none;
}


/* Spinner */
.wpcf7 .wpcf7-spinner {
	display: none;
}
  .wpcf7 .submitting .wpcf7-spinner {
    display: block;
    margin-block: 2rem;
    width: 100%;
    height: 1rem;
    background-image: url(svg/loading-dots.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }

/* Plugin Overrides
-------------------------------------------------------------------------------------------------- */

/* MFP Background */
.mfp-bg {
	background: #D34440;
	opacity: 1;
}




/* Cookiebar
------------------------------------------------------------------------------ */
.cookiebar {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: rgba(var(--clr-beige),1);
	padding: 1rem;
	box-shadow: 0 0 .5rem rgba(0,0,0,.4);
	z-index: 1001;
  font-size: var(--step--1);
}
	.cookiebar-close-icon {
		position: absolute;
		top: .5rem;
		right: .5rem;
		font-size: var(--step-1);
	}
	@media (min-width: 720px) {
		.cookiebar {
			padding-block-start: 2rem;
      bottom: 2rem;
			right: 2rem;
			left: auto;
			max-width: 30rem;
		}
	}



/* MARK: Grid
/* Flexbox Grid, inspired here: https://codepen.io/adamtowle/pen/pbBPQa
-------------------------------------------------------------------------------------------------------------- */
.flex {
  display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
  flex-wrap: wrap;
}

[class*="col-"] {
  flex: 1;
  padding-left: 1rem;
  padding-right: 1rem;
}
	.no-gutter{
		padding-left: 0;
  	padding-right: 0;
	}
  .add-gutter{
		padding-left: 0;
  	padding-right: 0;
	}

.flex-start 					{ justify-content: flex-start; }
.flex-center 					{ justify-content: center; }
.flex-end							{ justify-content: flex-end; }
.flex-spacebetween 		{ justify-content: space-between; }
.flex-spacearound 		{ justify-content: space-around; }

.flex-nowrap					{ flex-wrap: nowrap; }

.align-items-center 	{ align-items: center; }
.align-items-stretch 	{ align-items: stretch; }
.align-items-start 		{ align-items: flex-start; }
.align-items-end 			{ align-items: flex-end; }

.align-self-center		{ align-self: center; }
.align-self-start			{ align-self: flex-start; }
.align-self-end				{ align-self: flex-end; }

.push-right, .ml-auto	{	margin-left: auto; }
.push-left, .mr-auto	{	margin-right: auto; }


/*
12er Flex Grid based on https://codepen.io/adamtowle/pen/pbBPQa
*/

/* Mobile (sm)
----------------------------------------------------------------------------------- */
@media (min-width: 0) {
  .col-xs-0 { display: none; }
	.col-xs-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; }
  .col-xs-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; }
  .col-xs-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xs-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
  .col-xs-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; }
  .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xs-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; }
  .col-xs-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%;  }
  .col-xs-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xs-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; }
  .col-xs-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; }
  .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Small (sm)
----------------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .col-sm-0 { display: none; }
	.col-sm-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; }
  .col-sm-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
  .col-sm-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; }
  .col-sm-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; }
  .col-sm-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium (md)
----------------------------------------------------------------------------------- */
@media (min-width: 720px) {
  .col-md-0 { display: none; }
	.col-md-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; }
  .col-md-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
  .col-md-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; }
  .col-md-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; }
  .col-md-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large (lg)
----------------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .col-lg-0 { display: none; }
	.col-lg-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; }
  .col-lg-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
  .col-lg-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; }
  .col-lg-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; }
  .col-lg-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}



/* Dirty Little Helpers
------------------------------------------------------------------------------------ */
.group:after {
  content: "";
  display: table;
  clear: both;
}

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

figure { margin: 0; padding: 0; }

.hyphenate {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.nowrap { white-space: nowrap; }
.block { display: block; }
.caps {text-transform: uppercase;}

.ta-left { text-align: left; }
.ta-right { text-align: right; }
.ta-center { text-align: center; }

.f-right {float: right;}
.f-left {float: left;}

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


/* Margin - Top and Bottom  */
.mt-none { margin-top: 0}
.mt-s { margin-top: 1rem}
.mt-m { margin-top: 2rem}
.mt-l { margin-top: 3rem}

.mb-none { margin-bottom: 0}
.mb-s { margin-bottom: 1rem}
.mb-m { margin-bottom: 2rem}
.mb-l { margin-bottom: 3rem}

.ml-auto {margin-left: auto;}
.mr-auto {margin-right: auto;}


/* Padding - Top and Bottom */
.pt-none { padding-top: 0}
.pt-s { padding-top: 1rem}
.pt-m { padding-top: 2rem}
.pt-l { padding-top: 3rem}

.pb-none { padding-bottom: 0}
.pb-s { padding-bottom: 1rem}
.pb-m { padding-bottom: 2rem}
.pb-l { padding-bottom: 3rem}