/**
 * Content
 */

/* Normal weight; Normal style */
@font-face {
  font-family: 'GT Sectra';
  font-weight: normal;
  font-style: normal;
  src: url('https://files.cargocollective.com/c62318/GT-Sectra-Medium.woff') format('woff');
}

/* Bold weight; Light style */
@font-face {
  font-family: 'GT Sectra';
  font-weight: 100;
  font-style: normal;
  src: url('https://files.cargocollective.com/c62318/GT-Sectra-Display-Light.woff') format('woff');
}

/* Normal weight; Super style */
@font-face {
  font-family: 'GT Sectra';
  font-weight: bold;
  font-style: normal;
  src: url('https://files.cargocollective.com/c62318/GT-Sectra-Display-Super.woff') format('woff');
}

body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.5;
}

.page a.active {
	opacity: 0.4;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
    z-index: 9
    
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	line-height: 1.3;
	font-family: 'GT Sectra', Icons;
	font-style: normal;
	font-weight: normal;
	color: rgba(41, 41, 41, 0.3);
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.9rem;
	font-weight: 400;
	color: rgba(23, 23, 23, 0.9);
	font-family: 'GT Sectra', Icons;
	font-style: normal;
	line-height: 1.3;
    letter-spacing: 0.01em;
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 0.9);
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.9);
	text-decoration: none;
    transition: color 0.2s linear;
}

[data-predefined-style="true"] bodycopy a:hover {
	color: #fff;
}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: 'GT Sectra', Icons;
	font-style: normal;
	font-weight: normal;
	padding: 00;
    position: relative;
    z-index: 9999;
	margin: 0;
	font-size: 1.4rem;
	line-height: 0.9em;
	color: rgba(0, 0, 0, 0.9);
    -webkit-text-fill-color: rgba(149, 255, 73, 0.56);
    -webkit-text-stroke: 1.0px rgba(0, 230, 67, 1);
	}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgb(41, 41, 41);
}

[data-predefined-style="true"] h2 {
	font-family: "Times New Roman", "Times New Roman", Times, serif, "Times New Roman Bold", Icons;
	font-style: normal;
	font-weight: 700;
	padding: 15px 0 0 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.9);
	font-size: 1rem;
	line-height: 0.8;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgb(41, 41, 41);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.3;
	font-family: 'GT Sectra', Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.9);
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.9);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: center /*!text_center*/;
}

[data-css-preset] body {
	background-color: transparent /*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_center*/;
}

[data-css-preset] .content_padding {
	/*padding-top: 0rem /*!main_margin*/;
	/*padding-bottom: 0rem /*!main_margin*/;
	/*padding-left: 0rem /*!main_margin*/;
	/*padding-right: 0rem /*!main_margin*/;
	padding-top: 0rem /*!main_margin*/;
	padding-bottom: 0rem /*!main_margin*/;
	padding-left: 0rem /*!main_margin*/;
	padding-right: 0rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgb(0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: 0rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: 0rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
    position: relative;
    opacity: 0.8;
    max-height: 100vh;
}

.thumbnails .thumb_image img {
	object-fit: cover;
    height: 100vh !important;
    margin: 0 !important;
}

.thumbnails .title {
    font-size: 8.7rem;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.9);
	font-family: 'GT Sectra', Icons;
	font-style: normal;
	line-height: 1.3;
}


.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	line-height: 1.3;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: 'GT Sectra', Icons;
	font-style: normal;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 1.2rem;
}

/**
 * Thumbnail Hover
 */

.thumbnails .thumbnail > a {
	position: relative;
}

.thumbnails .thumbnail .title {
    color: #fff;
    -webkit-text-fill-color: rgba(250, 68, 68, 0.53);
    -webkit-text-stroke: 1.5px #f00;
    align-content: center;
    line-height: 0.9em;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    opacity: 1;    
    width: 100%;
    padding: 1.5rem;}



.thumbnails .title span {
	margin: auto;
	display: inline-block;
}

.thumbnails .thumbnail:hover .title {
    opacity: 1;
}

body.mobile .thumbnails .thumbnail:hover .title {
	opacity: 0;
}

body.mobile .thumbnails .title {
	font-size: 5rem;
}

body.mobile [local-style="1017612"] h1{
	font-size: 5rem;
}
/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: .60rem /*!site_menu_button*/;
	right: .60rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: "GT Sectra", Icons;
	background: rgba(20, 20, 20, 0);
	font-size: 17px;
	font-style: normal;
	font-weight: bold;
	padding: 20px 30px 20px 20px;
	max-width: 600px;
	min-width: 200px;
	text-align: right;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(0, 0, 0, 1);
}

#site_menu .set-link > a {
	color: rgba(74, 0, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
    color: rgba(0, 128, 255, 1);
	opacity: .9;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 40px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	bottom: 3rem /*!shop_button*/;
	right: 3rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 2.2rem;
    padding: 0;
    line-height: 1.2;
	font-style: normal;
	font-weight: 400;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 46px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: "GT Sectra", Icons;
	font-style: normal;
	font-weight: 400;
	font-size: 2.2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.9);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: "GT Sectra", Icons;
    color: rgba(0, 0, 0, .9);
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 1rem;
}

.shop_product .button {
    font-family: "GT Sectra", Icons;
	font-size: 1.4rem;
    background: rgba(244, 244, 244, 0.8);
    color: rgba(255, 255, 255, 1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.9) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem 0;
    text-align: center;
    font-size: 1.8rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.4);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}
/**
 *Custom Styles
 */

[local-style="1017612"] h1 {
	-webkit-text-stroke: 1.5px black;
    -webkit-text-fill-color: transparent;
    line-height: em;
}
[local-style="1017612"] sup {
	font-weight: 100;
    font-size: 1.5rem;
}
[data-id="1017612"] {
	padding: 0;
    height: 40vh;
}
.studiodaze {
    width: 100%;
    padding: 0 1.5rem ;
}
.gallery_card {
	margin: -2.5rem auto 2rem auto;
    z-index: 9;
    max-width: 40vw;
}
.image-gallery .gallery_card_image {
	height:100%;
}

.page_content {
    margin:0 auto;
}
.thumbnail[data-id="1044300"] .title span {
	-webkit-text-fill-color: rgba(106, 255, 0, 0.44);
    -webkit-text-stroke-color: rgba(0, 230, 67, 1);
}

.thumbnail[data-id="1044300"] .title span:hover {
	opacity: 100;
}

.thumbnail[data-id="1044300"] .title span:hover:after {
	content: 'What matters and who cares? Does this go like that or does that go like this? What is right and what is wrong (in visual compositions)? An investigation of symbolism and still life as rebellion. ';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -10px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}


.thumbnail[data-id="1017606"] .title span {
	-webkit-text-fill-color: rgba(255, 96, 0, 0.75)   
;
}

.thumbnail[data-id="1017606"] .title span:hover:after {
	content: 'What matters and who cares? Does this go like that or does that go like this? What is right and what is wrong? An investigation of image and ideas.';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -0px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}
.thumbnail[data-id="1044413"] .title span {
	-webkit-text-fill-color: rgba(253, 155, 188, 0.57);
    -webkit-text-stroke-color: rgba(251, 78, 78, 0.96);
}

.thumbnail[data-id="1044413"] .title span:hover:after {
	content: 'It might get weird and it might get scary at times but its all part of the experience, man, and in the end we’ll come out of this with something good, possibly something meaningful, and hopefully no worse for the wear. - Jay Carroll';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -0px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}

.thumbnail[data-id="1877378"] .title span {
    -webkit-text-fill-color: rgba(0, 159, 255, 0.65);
     -webkit-text-stroke-color: rgba(0, 53, 255, 1);

}

.thumbnail[data-id="1877378"] .title span:hover:after {
	content: ' Do you like it more like this? ';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -0px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}

.thumbnail[data-id="1944314"] .title span {
	-webkit-text-fill-color: rgba(244, 255, 0, 0.5);
    -webkit-text-stroke-color: rgba(255, 138, 0, 0.94);
}

.thumbnail[data-id="1944314"] .title span:hover:after {
	content: ' Do you like it more like this? OR Remix.';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -0px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}
[aspect-ratio="4x3"].thumb_image {
    height: inherit !important;
    padding: 0 !important;
}

body.homepage a[href="Homepage"] {
    display: none;
}

.thumbnail[data-id="2967232"] .title span {
	-webkit-text-fill-color: rgba(214, 8, 255, 0.44);
    -webkit-text-stroke-color: rgba(230, 0, 144, 1);
}

.thumbnail[data-id="3188859"] .title span {
	-webkit-text-fill-color: rgba(255, 255, 8, 0.62);
    -webkit-text-stroke-color: rgba(230, 172, 0, 0.63);
}

.thumbnail[data-id="3188751"] .title span {
	-webkit-text-fill-color: rgba(255, 8, 8, 0.5);
    -webkit-text-stroke-color: rgba(230, 0, 0, 0.8);
}

.thumbnail[data-id="3188905"] .title span {
	-webkit-text-fill-color: rgba(8, 8, 255, 0.5);
    -webkit-text-stroke-color: rgba(0, 182, 230, 0.8);
}

.thumbnail[data-id="2967232"] .title span:hover {
	opacity: 100;
}

.thumbnail[data-id="1044300"] .title span:hover:after {
	content: 'What matters and who cares? Does this go like that or does that go like this? What is right and what is wrong (in visual compositions)? An investigation of symbolism and still life as rebellion. ';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -10px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}

.thumbnail[data-id="2967232"] .title span:hover:after {
	content: 'What matters and who cares? Does this go like that or does that go like this? What is right and what is wrong (in visual compositions)? An investigation of symbolism and still life as rebellion. ';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -10px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}

.thumbnail[data-id="3188859"] .title span:hover:after {
	content: 'Guffaw photo-humor and assorted zanyism for the aspiring teenage photographer. It’s not just the image or idea that’s of importance but more so the effort it takes to produce it.';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -10px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}

.thumbnail[data-id="3188751"] .title span:hover:after {
	content: 'An investigatory analysis of light in collaboration with friends.';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -10px);
    font-size: 26px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}

.thumbnail[data-id="3188905"] .title span:hover:after {
	content: '“Through the process of photographing these moments, even before considering the specific meaning of certain objects, each final image takes on its own meaning and interpretation,” Greco says. “It’s funny how you can take random objects and compose them into formal relationships to evoke visceral feelings and ideas.”';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -10px);
    font-size: 20px;
    font-weight: bold;
    line-height: 1.7;
    -webkit-text-fill-color: rgba(255, 255, 255, 1);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0);
}
/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}