.ova-audio-list-2 {
	.item-audio-2 {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
    	padding: 30px 40px;
    	background-color: #FFFFFF;
		box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);

		&:not(:last-child) {
			margin-bottom: 10px;
		}

		@media (max-width: 1024px) {
			flex-direction: column;
		}

    	.ova-controls {
    		flex: 0 0 60%;
    		display: flex;
    		align-items: center;
    		justify-content: flex-start;
    		@media (max-width: 1024px) {
    			margin-bottom: 20px;
    		}

    		.ovau-btn-play {
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			width: 60px;
    			min-width: 60px;
    			height: 60px;
    			background-color: #000000;
    			border-radius: 50%;
    			box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
    			margin-right: 20px;
    			cursor: pointer;
    			-webkit-tap-highlight-color: transparent;
    			@include transaction( all, 0.3s, ease );

    			i {
    				font-size: 14px;
    				color: #FFFFFF;
    				@include transaction( all, 0.3s, ease );
    			}

    			&:hover {
    				background-color: var(--primary);
    			}

    			.loader {
					display: none;
				}

				&.ovau-playing {
					background-color: var(--primary);
					overflow: hidden;

					.loader {
						display: flex;
						width: 100%;
						height: 100%;
						align-items: center;
	    				justify-content: center;

						.stroke {
							position: relative;
							background-color: #FFFFFF;
							height: 20px;
							width: 5px;
							border-radius: 50px;
							margin: 0 2px;
							animation: playing 1s linear infinite;

							&:nth-child(1) {
								animation-delay: 0s;
							}

							&:nth-child(2) {
								animation-delay: 0.3s;
							}

							&:nth-child(3) {
								animation-delay: 0.6s;
							}

							&:nth-child(4) {
								animation-delay: 0.3s;
							}

							&:nth-child(5) {
								animation-delay: 0s;
							}

						}

						@keyframes playing {
							50% {
		    					height: 5px;
							}
							100% {
							    height: 20px;
							}
						}
					}

					i {
						display: none;
					}

					&:hover {
						.loader {
							display: none;
						}

						i {
							display: block;
						}
					}
				}
    		}

    		.title {
    			margin: 0;
    			font-size: 20px;
    			color: var(--heading);
    			font-weight: bold;
				line-height: 1.5;

				a {
					font-size: 20px;
	    			color: var(--heading);
	    			font-weight: bold;
					line-height: 1.5;

					&:hover {
						color: var(--primary);
					}
				}
    		}
    	}

    	.ovau-info {
    		display: flex;
    		flex: 0 0 40%;
            justify-content: space-between;
            align-items: center;
            @media (max-width: 500px) {
                display: block;
                padding-left: 82px;
            }
    	}

    	.host {
    		line-height: 1.2;
			&:hover {
				color: var(--heading);
			}
    	}

    	.episode {
    		@media (max-width: 500px) {
                padding-bottom: 5px;
            }
    		.label {
    			font-size: 16px;
    			color: var(--text);
    		}
    	}

    	.ovau-category {
            @media (max-width: 500px) {
                padding-bottom: 6px;
            }
    		a {
    			font-size: 16px;
    			color: var(--primary);
    			@include transaction( all, 0.3s, ease );

    			&:hover {
    				color: var(--heading);
    			}
    		}
    	}

    	.detail-link {
    		a {
    			display: flex;
			    font-size: 12px;
			    font-weight: bold;
			    text-transform: uppercase;
			    line-height: 1.2;
			    color: var(--text);
			    @include transaction( all, 0.3s, ease );

			    i {
			    	line-height: 1;
				    vertical-align: middle;
				    margin-left: 10px;
			    }

			    &:hover {
			    	color: var(--primary);
			    }
    		}
    	}
	}
}