.elementor-174 .elementor-element.elementor-element-f2e29e5 a{color:var( --e-global-color-primary );}.elementor-174 .elementor-element.elementor-element-f2e29e5 a:hover{color:var( --e-global-color-secondary );}.elementor-174 .elementor-element.elementor-element-f2e29e5{margin-top:40px;margin-bottom:0px;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-174 .elementor-element.elementor-element-a0bc51e .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-174 .elementor-element.elementor-element-3d6e54e a{color:var( --e-global-color-primary );}.elementor-174 .elementor-element.elementor-element-3d6e54e a:hover{color:var( --e-global-color-secondary );}.elementor-174 .elementor-element.elementor-element-3d6e54e{margin-top:0px;margin-bottom:0px;}.elementor-174 .elementor-element.elementor-element-c1c7bbe > .elementor-widget-container{margin:-90px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for section, class: .elementor-element-3d6e54e */@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

body {
	font-family: 'Roboto';
	font-weight: 600;
	width: 100vw;
	height: 100vh;
	margin: 0;
	@include flex-center;
}

.container {
	width: 40%;
}

@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

@mixin overflow($type) {
	overflow: hidden;
	text-align: left;
	text-overflow: #{$type};
	white-space: nowrap;
}

.playr {
	width: 100%;
	background-color: #38354a;
	padding: 10px;
	color: #d2d9e5;
	border-radius: 4px;
}

.playr-ui {
	display: flex;
	align-items: stretch;
}

.playr-controls {
	width: 10%;
	padding: 0 15px;
	@include flex-center;
}

.playr-panel {
	@include flex-center;
	width: 90%;
	padding: 0 15px;
	position: relative;
}

.playr-ui.volume-controls .playr-panel {
	width: 70%;
}

.playr-controls button {
	color: #d2d9e5;
	background-color: transparent;
	border: medium none;
	padding: 0;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
}

.playr-controls button:hover {
	color: #fff;
}

.playr-controls button::after {
	font-family: "Material Design Icons";
	@include flex-center;
}

.playr-play::after {
	content: "\f40a";
}

.playr.playing .playr-play::after {
	content: "\f3e4";
}

.playr-fastforward::after {
	content: "\f211";
}

.playr-rewind::after {
	content: "\f45f";
}

.playr-rewind::after,
.playr-fastforward::after {
	font-size: 21px;
}

.playr-progress {
	background-color: #5f6672;
	height: 4px;
	bottom: 2px;
	left: 15px;
	position: absolute;
	width: calc(100% - 30px);
	cursor: pointer;
}

.playr-progress-bar {
	background-color: #d2d9e5;
	height: 100%;
	transform: scale3d(0, 1, 1);
	transform-origin: 0 0 0;
	width: 100%;
}

.playr-duration,
.playr-filename {
	font-size: 12px;
	position: absolute;
	top: 0;
	width: 50%;
	font-weight: 600;
}

.playr-filename {
	left: 15px;
	text-align: left;
	left: 15px;
	@include overflow('ellipsis');
}

.playr-duration {
	right: 15px;
	text-align: right;
}

.playr-volume {
	position: relative;
	width: 100%;
	@include flex-center;
}

.playr-volume-box.hidden {
	background-color: #38354a;
	bottom: 0;
	height: 100px;
	position: absolute;
	width: 35px;
	display: none;
}

.playr-volume-box {
	background-color: #5f6672;
	height: 4px;
	width: 100%;
	cursor: pointer;
}

.playr-volume-box span {
	display: block;
	background-color: #d2d9e5;
	height: 100%;
	width: 100%;
	transform: scale3d(1, 1, 1);
	transform-origin: 0 0 0;
}


/* compact */

.playr.compact .playr-rewind,
.playr.compact .playr-fastforward {
	display: none;
}

.playr-filename.overflow span {
	animation: 5000ms linear 0ms normal forwards infinite running scroll;
	display: inline-block;
	margin-right: 0;
	padding-right: 100%;
	transform: translate3d(0px, 0px, 0px);
}

@keyframes scroll {
	0% {
		transform: translate3d(0px,0px,0px);
	}
	100% {
		transform: translate3d(-100%,0px,0px);
	}
}/* End custom CSS */