/* icons.css (works in Chrome/Safari/Firefox) 11 */
.ico{
  display:inline-block;
  width:20px;height:20px;
  vertical-align:-4px;
  background-color:currentColor;          /* color of the icon */
  -webkit-mask-size:contain;              mask-size:contain;
  -webkit-mask-repeat:no-repeat;          mask-repeat:no-repeat;
  -webkit-mask-position:center;           mask-position:center;
}
.ico-16{width:16px;height:16px}
.ico-20{width:20px;height:20px}
.ico-24{width:24px;height:24px}

/* small spacing before text inside buttons */
.btn .ico{ margin-right:.4rem }

/* PLAY */
.ico-play{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 5v14l11-7z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 5v14l11-7z'/%3E%3C/svg%3E");
}

/* STOP */
.ico-stop{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23000' x='6' y='6' width='12' height='12' rx='2' ry='2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23000' x='6' y='6' width='12' height='12' rx='2' ry='2'/%3E%3C/svg%3E");
}

/* NEXT (»|) */
.ico-next{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 6v12l8-6-8-6zM15 6h2v12h-2z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 6v12l8-6-8-6zM15 6h2v12h-2z'/%3E%3C/svg%3E");
}

/* PREV (|«) */
.ico-prev{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6v12l-8-6 8-6zM7 6h2v12H7z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6v12l-8-6 8-6zM7 6h2v12H7z'/%3E%3C/svg%3E");
}

/* DOWNLOAD (arrow + bar) */
.ico-download{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 3h2v10h-2z'/%3E%3Cpath fill='%23000' d='M8.2 11.6 12 15.4l3.8-3.8 1.4 1.4L12 18.2 6.8 13l1.4-1.4z'/%3E%3Crect fill='%23000' x='4' y='19' width='16' height='2' rx='1'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 3h2v10h-2z'/%3E%3Cpath fill='%23000' d='M8.2 11.6 12 15.4l3.8-3.8 1.4 1.4L12 18.2 6.8 13l1.4-1.4z'/%3E%3Crect fill='%23000' x='4' y='19' width='16' height='2' rx='1'/%3E%3C/svg%3E");
}

/* MP3 file */
.ico-mp3{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM14 4.4V9h4.6L14 4.4z'/%3E%3Cpath fill='%23000' d='M8.5 16.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5S10.8 18 10 18s-1.5-.7-1.5-1.5zM13 12h2c1.1 0 2 .9 2 2s-.9 2-2 2h-1v2h-1v-6zm1 1v2h1c.6 0 1-.4 1-1s-.4-1-1-1h-1zM8 12h2v3c0 .6-.4 1-1 1s-1-.4-1-1v-3z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM14 4.4V9h4.6L14 4.4z'/%3E%3Cpath fill='%23000' d='M8.5 16.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5S10.8 18 10 18s-1.5-.7-1.5-1.5zM13 12h2c1.1 0 2 .9 2 2s-.9 2-2 2h-1v2h-1v-6zm1 1v2h1c.6 0 1-.4 1-1s-.4-1-1-1h-1zM8 12h2v3c0 .6-.4 1-1 1s-1-.4-1-1v-3z'/%3E%3C/svg%3E");
}

/* Video / play-square */
.ico-video{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm9.8 7.6-4.6-2.6A1 1 0 0 0 9 9.9v4.2a1 1 0 0 0 1.5.9l4.6-2.6a1 1 0 0 0 0-1.8z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm9.8 7.6-4.6-2.6A1 1 0 0 0 9 9.9v4.2a1 1 0 0 0 1.5.9l4.6-2.6a1 1 0 0 0 0-1.8z'/%3E%3C/svg%3E");
}

/* Guitar */
.ico-guitar{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%27%23000000%27%20width%3D%27800px%27%20height%3D%27800px%27%20viewBox%3D%270%200%2032%2032%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M%2026.59375%203.0625%20C%2026.488281%203.0625%2026.386719%203.113281%2026.28125%203.21875%20L%2025.53125%203.96875%20L%2025.21875%203.65625%20L%2024.78125%204.0625%20L%2025.125%204.40625%20L%2024.6875%204.8125%20L%2024.375%204.5%20L%2023.9375%204.9375%20L%2024.25%205.25%20L%2023.53125%206%20C%2023.316406%206.214844%2023.316406%206.410156%2023.53125%206.625%20L%2019.34375%2010.8125%20C%2018.410156%2010.066406%2017.414063%209.5%2016.46875%209.21875%20C%2014.710938%208.699219%2013.148438%209.074219%2011.9375%2010.28125%20C%2011.402344%2010.816406%2011.074219%2011.46875%2010.9375%2012.25%20C%2010.71875%2013.515625%209.601563%2014.503906%208.28125%2014.59375%20C%206.839844%2014.691406%205.574219%2015.269531%204.625%2016.21875%20C%202.121094%2018.722656%202.574219%2023.265625%205.65625%2026.34375%20C%207.40625%2028.09375%209.636719%2029%2011.6875%2029%20C%2013.25%2029%2014.699219%2028.457031%2015.78125%2027.375%20C%2016.730469%2026.425781%2017.308594%2025.160156%2017.40625%2023.71875%20C%2017.496094%2022.398438%2018.453125%2021.28125%2019.71875%2021.0625%20C%2020.5%2020.925781%2021.183594%2020.597656%2021.71875%2020.0625%20C%2022.925781%2018.855469%2023.300781%2017.289063%2022.78125%2015.53125%20C%2022.609375%2014.945313%2022.300781%2014.347656%2021.9375%2013.75%20L%2020.46875%2015.21875%20C%2020.625%2015.519531%2020.757813%2015.808594%2020.84375%2016.09375%20C%2021.152344%2017.132813%2020.988281%2017.980469%2020.3125%2018.65625%20C%2020.070313%2018.894531%2019.78125%2019.027344%2019.40625%2019.09375%20C%2017.242188%2019.46875%2015.554688%2021.367188%2015.40625%2023.59375%20C%2015.34375%2024.542969%2014.976563%2025.363281%2014.375%2025.96875%20C%2012.648438%2027.691406%209.394531%2027.238281%207.09375%2024.9375%20C%204.792969%2022.636719%204.308594%2019.347656%206.03125%2017.625%20C%206.636719%2017.023438%207.457031%2016.65625%208.40625%2016.59375%20C%2010.632813%2016.445313%2012.527344%2014.757813%2012.90625%2012.59375%20C%2012.972656%2012.21875%2013.101563%2011.929688%2013.34375%2011.6875%20C%2013.808594%2011.222656%2014.339844%2011%2014.96875%2011%20C%2015.253906%2011%2015.582031%2011.058594%2015.90625%2011.15625%20C%2016.535156%2011.34375%2017.238281%2011.714844%2017.90625%2012.21875%20L%2014.5625%2015.5625%20C%2014.382813%2015.519531%2014.195313%2015.5%2014%2015.5%20C%2012.621094%2015.5%2011.5%2016.621094%2011.5%2018%20C%2011.5%2019.378906%2012.621094%2020.5%2014%2020.5%20C%2015.378906%2020.5%2016.5%2019.378906%2016.5%2018%20C%2016.5%2017.847656%2016.464844%2017.707031%2016.4375%2017.5625%20L%2025.53125%208.4375%20C%2025.746094%208.652344%2025.972656%208.652344%2026.1875%208.4375%20L%2026.9375%207.6875%20L%2027.25%208%20L%2027.65625%207.59375%20L%2027.34375%207.28125%20L%2027.78125%206.84375%20L%2028%207.28125%20L%2028.40625%206.84375%20L%2028.09375%206.53125%20L%2028.84375%205.78125%20C%2029.058594%205.566406%2029.058594%205.339844%2028.84375%205.125%20L%2026.9375%203.21875%20C%2026.832031%203.113281%2026.699219%203.0625%2026.59375%203.0625%20Z%20M%2026.5%204.28125%20L%2026.9375%204.71875%20L%2025%206.625%20L%2024.59375%206.21875%20Z%20M%2027.34375%205.03125%20L%2027.78125%205.46875%20L%2025.84375%207.375%20L%2025.4375%206.9375%20Z%20M%209.09375%2019.6875%20L%207.6875%2021.09375%20L%2010.90625%2024.3125%20L%2012.3125%2022.90625%20Z%27%2F%3E%3C%2Fsvg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%27%23000000%27%20width%3D%27800px%27%20height%3D%27800px%27%20viewBox%3D%270%200%2032%2032%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M%2026.59375%203.0625%20C%2026.488281%203.0625%2026.386719%203.113281%2026.28125%203.21875%20L%2025.53125%203.96875%20L%2025.21875%203.65625%20L%2024.78125%204.0625%20L%2025.125%204.40625%20L%2024.6875%204.8125%20L%2024.375%204.5%20L%2023.9375%204.9375%20L%2024.25%205.25%20L%2023.53125%206%20C%2023.316406%206.214844%2023.316406%206.410156%2023.53125%206.625%20L%2019.34375%2010.8125%20C%2018.410156%2010.066406%2017.414063%209.5%2016.46875%209.21875%20C%2014.710938%208.699219%2013.148438%209.074219%2011.9375%2010.28125%20C%2011.402344%2010.816406%2011.074219%2011.46875%2010.9375%2012.25%20C%2010.71875%2013.515625%209.601563%2014.503906%208.28125%2014.59375%20C%206.839844%2014.691406%205.574219%2015.269531%204.625%2016.21875%20C%202.121094%2018.722656%202.574219%2023.265625%205.65625%2026.34375%20C%207.40625%2028.09375%209.636719%2029%2011.6875%2029%20C%2013.25%2029%2014.699219%2028.457031%2015.78125%2027.375%20C%2016.730469%2026.425781%2017.308594%2025.160156%2017.40625%2023.71875%20C%2017.496094%2022.398438%2018.453125%2021.28125%2019.71875%2021.0625%20C%2020.5%2020.925781%2021.183594%2020.597656%2021.71875%2020.0625%20C%2022.925781%2018.855469%2023.300781%2017.289063%2022.78125%2015.53125%20C%2022.609375%2014.945313%2022.300781%2014.347656%2021.9375%2013.75%20L%2020.46875%2015.21875%20C%2020.625%2015.519531%2020.757813%2015.808594%2020.84375%2016.09375%20C%2021.152344%2017.132813%2020.988281%2017.980469%2020.3125%2018.65625%20C%2020.070313%2018.894531%2019.78125%2019.027344%2019.40625%2019.09375%20C%2017.242188%2019.46875%2015.554688%2021.367188%2015.40625%2023.59375%20C%2015.34375%2024.542969%2014.976563%2025.363281%2014.375%2025.96875%20C%2012.648438%2027.691406%209.394531%2027.238281%207.09375%2024.9375%20C%204.792969%2022.636719%204.308594%2019.347656%206.03125%2017.625%20C%206.636719%2017.023438%207.457031%2016.65625%208.40625%2016.59375%20C%2010.632813%2016.445313%2012.527344%2014.757813%2012.90625%2012.59375%20C%2012.972656%2012.21875%2013.101563%2011.929688%2013.34375%2011.6875%20C%2013.808594%2011.222656%2014.339844%2011%2014.96875%2011%20C%2015.253906%2011%2015.582031%2011.058594%2015.90625%2011.15625%20C%2016.535156%2011.34375%2017.238281%2011.714844%2017.90625%2012.21875%20L%2014.5625%2015.5625%20C%2014.382813%2015.519531%2014.195313%2015.5%2014%2015.5%20C%2012.621094%2015.5%2011.5%2016.621094%2011.5%2018%20C%2011.5%2019.378906%2012.621094%2020.5%2014%2020.5%20C%2015.378906%2020.5%2016.5%2019.378906%2016.5%2018%20C%2016.5%2017.847656%2016.464844%2017.707031%2016.4375%2017.5625%20L%2025.53125%208.4375%20C%2025.746094%208.652344%2025.972656%208.652344%2026.1875%208.4375%20L%2026.9375%207.6875%20L%2027.25%208%20L%2027.65625%207.59375%20L%2027.34375%207.28125%20L%2027.78125%206.84375%20L%2028%207.28125%20L%2028.40625%206.84375%20L%2028.09375%206.53125%20L%2028.84375%205.78125%20C%2029.058594%205.566406%2029.058594%205.339844%2028.84375%205.125%20L%2026.9375%203.21875%20C%2026.832031%203.113281%2026.699219%203.0625%2026.59375%203.0625%20Z%20M%2026.5%204.28125%20L%2026.9375%204.71875%20L%2025%206.625%20L%2024.59375%206.21875%20Z%20M%2027.34375%205.03125%20L%2027.78125%205.46875%20L%2025.84375%207.375%20L%2025.4375%206.9375%20Z%20M%209.09375%2019.6875%20L%207.6875%2021.09375%20L%2010.90625%2024.3125%20L%2012.3125%2022.90625%20Z%27%2F%3E%3C%2Fsvg%3E");
  transform: rotate(-18deg);
}