/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300italic');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes');
body{ background:url(../img/main/bg1.jpg) center top no-repeat #1b1b1b fixed; border:0; font: 14px Arial, Helvetica, sans-serif; color:#b4b4b4 ; line-height:20px; min-width:320px;}
h1{ font-family:'Open Sans Condensed'; font-weight:400; font-size:35px; color:#4b3e33; line-height:35px; padding:25px 0 20px 0; margin: 0; text-transform: uppercase;}
h2{ font-family:'Open Sans Condensed'; font-weight:300; font-size:35px; color:#fff; line-height:35px; padding:25px 0 20px 0; margin: 0; text-transform: uppercase;}
h3{ font-family:'Open Sans Condensed'; font-weight:700; font-size:22px; color:#b4b4b4; line-height:22px; padding:20px 0 20px 0; margin: 0; position: relative;}
h3 a{position: absolute; right: 0; top: 50%; margin-top: -10px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: #b4b4b4; line-height: 20px; text-decoration: underline;}
h4{font-weight: 400; color:#E5902E; padding:0px 0 5px 0; margin: 0px 0px 0px 0px;font-size: 17px; line-height: 20px;}
h4 a{color: #E5902E; text-decoration: none;}
h6{ font-family:'Open Sans Condensed'; font-weight:700; font-size:20px; line-height: 25px; color:#fff; padding:0px 0 10px 0; margin: 0px 0px 0px 0px; text-transform: uppercase;}
.nodisplay { display:none; }
.mainnavbreadcrumb { font-size:15px;background:#1C1C1C !important;margin-bottom:-20px !important; }
.mainnavbreadcrumb a { color: #E5902E;text-decoration:none; }
.mainnavbreadcrumb a:hover { color: #fff; }
.pcolor { color:#E5902E; }
.acolor { color:#2196F3; }
.red { color:#CA0E11; }
.green { color:#40AF1B; }
/* CLEARFIX */
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table;line-height: 0;content: ""; }
.clearfix:after { clear: both; }

#dim { display:none;position:absolute; top:0; left:0; z-index:9999; overflow:hidden;position:fixed; width:100%; height:100%;background:#333;opacity:0.9;filter: alpha(opacity = 90); }
#ajax_loading { display:none;background:#95C715;background:-moz-linear-gradient(top, #95C715 0%, #7BA60D 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#95C715), color-stop(100%,#7BA60D));background:linear-gradient(top, #95C715 0%,#7BA60D 100%);border-top:0;border-left:1px solid #666;border-right:1px solid #666;border-bottom:1px solid #666;color:#fff;text-align:center;padding:5px 0 8px;width:8%;top:0px;left:46%;-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;border-radius:0 0 5px 5px;z-index:10000;position:fixed;-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.2);-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.2);box-shadow:0px 3px 5px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.2);}


/* HEADER & LOGO */
.logoholder { margin-left:10px;  }
.top-header { background:rgb(40, 40, 40,.8) }
.top-header .block2 {  }
.block-holder { text-align:right; }
.alert-main { margin-bottom:0px;text-align:center; }

.listen1_wrapper{ margin:50px 5px 10px 5px;display: inline-block;}

a.listen1{ background: url(../img/main/listen1.png) right center no-repeat #393939; line-height: 20px; padding: 7px 35px 7px 10px; font-family: 'Open Sans Condensed'; font-size: 15px; color: #fff; font-weight: 700; text-decoration: none;}
a.listen1:hover{background-color: #fff; color: #000;}

.air1_wrapper{ margin:50px 5px 10px 5px;display: inline-block;}

a.air1{ background: url(../img/main/air1.png) right center no-repeat #393939; line-height: 20px; padding: 7px 45px 7px 10px; font-family: 'Open Sans Condensed'; font-size: 15px; color: #fff; font-weight: 700; text-decoration: none;}
a.air1:hover{background-color: #fff; color: #000;}

/* NAVBAR MAIN */
.navbar-topbar {z-index:30;margin-top:20px; background-image: linear-gradient(#F8AC28, #B03F3F);border-bottom:0px solid #3E3E3E;padding:0px !important;}
.navbar-topbar .navbar-text {color: #fff;padding:0px 0px;font-size:18px;height:60px;line-height:42px;border-right:1px solid #CE7651;border-left:1px solid #282828;}
.navbar-topbar .navbar-text:first-child { margin-left:-12px;border-left:0px !important; }
.navbar-topbar .navbar-text a { color:#FFF;display:inline-block;height:100%;padding-left:20px !important;padding-right:20px !important; }
.navbar-topbar .navbar-text a:hover,
.navbar-topbar .navbar-text a:focus {color: #fff;background-image: linear-gradient(#282828, #282828);}
.navbar-topbar .dropdown-menu { color: #fff;background-image: linear-gradient(#282828, #282828); }
.navbar-topbar .dropdown-menu a { padding:0px; }
.navbar-topbar .dropdown-menu a:hover { background:#C76237; }
/* LISTEN COUNT */
.listencountholder { color:#E7BEBE;font-size:15px; }
.listencount { font-weight:bold; }
/* WELCOME */
.welcomemessage { font-size:16px; }

/* SIDEBAR */
.sidebar { background:#1C1C1C;padding:10px 20px; }

/* POLLs */
.polltabs .nav-tabs { border-bottom:1px solid #1C1C1C!important; }
.polltabs .nav-item a { color:#ccc; }
.polltabs .nav-item a.active { color:#E5902E;background:#1C1C1C;border:1px solid #1C1C1C; }
.polltabs .nav-item a:hover { color:#E5902E;background:#1C1C1C;border:1px solid #1C1C1C; }
.pollquestions a { color:#E5902E;font-size:16px;font-weight:bold; }
.pollquestions a:hover { text-decoration:none;color:#CCC; }
.pollquestionholder { background:#1C1C1C;height:100%;padding:25px;margin:5px;border-radius: 15px; }

/* DONATE BOX */
#donate-button-container { opacity:0.5;text-shadow: 2px 2px 1px rgba(0,0,0,0.6);background:#3A3A3A;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;font-size:16px;border:1px solid #E5902E;padding:10px 20px; }
#donate-button-container:hover { opacity:1; }
/* DONATE TICKER */
.donateholder { background:#1C1C1C;padding:10px 20px;margin-bottom:10px; }
.donateholder h1 { color: #E5902E;font-weight:bold;font-size:16px;padding:0px; }
#donateticker ul { margin:0;padding:0;width:100%; }
#donateticker ul li { list-style: none;text-align:left;color:#ccc;font-size:15px;padding: 0 0; }
/* EVENTS */
.event_card { padding:10px 20px;margin-bottom:10px; }
.event_card:nth-child(odd) {  }
.event_card:nth-child(even) { background:#2F2F2F; }
.event_title { margin-bottom:10px; }
.event_title a { font-weight:bold;font-size:22px !important;color:#E5902E; }
.event_date { font-size:18px;margin-bottom:5px;color:#888888; }
.event_entry { font-size:17px; }
.eventlist { list-style-type: none;margin: 0;padding: 0;  }
.eventlist li { margin-bottom: 5px; background: url(../img/main/thumb2.jpg) left bottom repeat-x; padding-bottom: 20px !important; }
.eventlist li span { padding-right:10px; }
.eventlist li a { padding:0 !important;margin:0 !important;font-size:16px; }

/* CONTESTS */
.conteststitle a { color:#E5902E;font-size:16px;font-weight:bold; }
.conteststitle a:hover { text-decoration:none;color:#CCC; }
.contestsholder { background:#1C1C1C;height:100%;padding:25px;margin:5px;border-radius: 15px; }
.contestswinner { font-weight:bold;color:#2177BA; }

/* SCHEDULE */
.schedule ul { list-style-type: none;margin: 0;padding: 0; }
.schedule ul li { margin-bottom: 20px; background: url(../img/main/thumb2.jpg) left bottom repeat-x; padding-bottom: 20px; }
.schedule .day { color: #E5902E;font-size:16px;font-weight:bold;text-align:left; }
.schedule .dayinfo { color: #ccc;margin-top:4px;font-size:15px; }
.schedule a { color:#E5902E;text-decoration:none; }
.schedule a:hover { color:#fff; }

/* FAB 5 */
.fab5 { }
#fabloadingholder { font-size:25px;text-align:center;display:none; }
#fabform input { background:#1C1C1C !important;color:#CCC;border:1px solid #4B4B4B; } 
#fabform textarea { background:#1C1C1C !important;color:#CCC;border:1px solid #4B4B4B; }
a#c_refresh { color:#CCC;font-weight:bold;margin-left:10px;text-decoration:none; }

/* APPLICATION */
#apploadingholder { font-size:25px;text-align:center;display:none; }
#appform input { background:#1C1C1C !important;color:#CCC;border:1px solid #4B4B4B; } 
#appform select { background-color:#1C1C1C;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='grey' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");color:#CCC;border:1px solid #4B4B4B; }
#appform label { color:#CCC;font-weight:bold;margin-left:3px;margin-bottom:8px; } 
#appform textarea { background:#1C1C1C !important;color:#CCC;border:1px solid #4B4B4B; }

/* SLIDER */
#page_wrapper{position: relative; padding-top: 30px; padding-bottom: 0px;background:#282828;}
#page_inner{position: relative; padding-bottom: 80px;}
.shadow2{position: absolute; width: 100%; left: 0; bottom: 0;}
.shadow2 img{width: 100%;}
#slider{position: relative;}
.headphones1{position: absolute; left: -93px; top: -67px;z-index:20;}
.headphones1 img{}
.whatsnextholder { 
	display:none;
	position: absolute; top:0px;right:0px;background:rgb(0, 0, 0,.7);height:30px;
	color:#ccc;padding:5px 10px;
	z-index:99;
}

/* BUZZIES */
#buzzies_catnames h3 { font-size:18px; }
.buzzies_catnames_col {  }
/* DEDICATIONS */
#showdedications { margin-left:15px;font-size:15px; }
#showdedications ul { list-style:none; }
/* MAIN CARDS */
.main-cards .card { background:#1C1C1C;color:#CCC; }
.main-cards .title { color: #E5902E;font-size:16px;font-weight:bold;margin-bottom: 10px; background: url(../img/main/thumb2.jpg) left bottom repeat-x; padding-bottom: 10px; }
.main-cards ul { List-style-type:none;margin:0px;padding:0px; }
.main-cards li { padding:10px 0 0 0; }	
.main-cards li:first-child { }
.main-cards li a { text-decoration:none;color:#CCC;display:block;padding-left:25px; }
.main-cards li a:hover { color:#fff; }
.main-cards span { }
.main-cards .morelist a { color: #E5902E;float:right; }
.main-cards .morelist a:hover { color: #fff; }

/* SUPPORT ROOM SCROLLER */
.main-cards .easyscroller_rooms { overflow:hidden;height:360px !important; }
.main-cards .supporter_rooms li { padding:10px 0 0 0;margin-bottom: 0px; background: url(../img/main/thumb2.jpg) left bottom repeat-x; padding-bottom: 5px; }
.main-cards .supporter_rooms li a {	text-decoration:none;color: #E5902E;padding-left:5px;font-weight:bold; }
.main-cards .supporter_rooms li a:hover { color:#fff; }
.main-cards .supporter_rooms div {	padding:3px 5px 3px 5px; }

/* SONG HISTORY */
#playhistory li { padding:10px 0 0 0;margin-bottom: 0px; background: url(../img/main/thumb2.jpg) left bottom repeat-x; padding-bottom: 5px; }
#playhistory .songtitle { color: #E5902E;font-weight:bold;margin-left:10px; }
#playhistory .songartist { margin-left:10px; }
#playhistory .songart {	float:left; }
#playhistory .songart img {	height:35px;width:35px; }
#playhistory .songtime { float:right;font-size:13px;color:grey; }

/* MUSIC PLAYER */
.playerbg {	background-color:black;height:500px;width:100%;z-index: 0;background-image: url(../img/main/slide02.jpg);background-position: center center;background-size: 100% 100%;overflow: hidden;position:relative; }
.playerholder {	
	position:absolute;bottom:5px;right:5px;left:5px;background:rgb(28, 27, 34,.8);padding:5px;width: 99%;border: 0;height:160px; 
}

/* SHADOWBORDER */
.shadowfooter img { width:100%; }

/* FOOTER */
footer { padding:10px 10px 20px 10px; }
footer a { color:#CCC;text-decoration:none; }
footer a:hover { color:#FFF;; }

/* POPUP MODAL */
#popupModal .modal-content { background:#282828; }
#popupModal .modal-header { border-bottom: 0 none;padding:5px 5px 0 0;margin:0px; }
#popupModal .modal-header a { color:red; }	
#popupModal .modal-footer { border-top: 0 none; }
#popupModal .close-red {
	color: #E5902E !important;
    text-shadow: none !important;	
    opacity: 1 !important;
}

/* SOCIAL BUTTONS */
.social_wrapper{ text-align:right;}
.social{ display: inline-block; margin: 0 0px; padding-top: 0px; list-style: none; white-space: nowrap; padding-bottom: 10px;}
.social li{display: inline-block; margin: 0 4px; float: left;}
.social li a{display: block; opacity: 1; filter: alpha(opacity=100);transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; }
.social li a:hover{opacity: 0.7; filter: alpha(opacity=70);}

/* Requests */
#requestspageholder { z-index:999999;position:fixed;left:0;bottom:0;top:0;right:0;overflow:auto;overflow-x:hidden;max-height:100%;z-index:20;background-color:rgba(5,5,5,.9);color:white;margin: 0px;padding:20px 20px 40px 20px;border:1px solid #CCC;}
#requestspage { }
a.requestsclose { text-shadow: 3px 5px 4px rgba(0,0,0,0.4);position:fixed;right:30px;display:none;font-weight:bold;font-size:30px;color:red;z-index:999999; }
.requestsdj { font-size:25px;font-weight:bold;font-family: Oswald;color:white; }
.requestsdj .fa { font-size:30px;color:#DE5062 !important; }
.searchbyletter { }
.searchbyletter h1 { font-size:19px;font-weight:bold;color:white;margin-bottom:0px; }
.searchbyletter a { color:#DE5062;padding:0 2px;text-decoration:none; }
.searchbyletter a:hover { color:white; }
.requestsplaylist { font-size:14px; }
.requestsplaylist .btn { font-weight:bold;margin:0;padding:0 5px; }
.requestsplaylist h1 { font-size:19px;font-weight:bold;color:white;margin-bottom:0px; }
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {border: none;}
.requeststablebtnwidth { width:80px; }
.songblock { color:#CCC; }
.songblock:hover { background-color:#D57633;color:white; }
.djname { font-size:20px; }

/* Meet Djs */
.djholder { margin:0 10px;padding:10px;  }
.djholder .card { background:transparent;margin-right:10px;border:2px solid #1C1C1C; }
.djholder .card .card-name { position:absolute;bottom:0px;width:100%;background:rgb(0,0,0,.8);text-align:center;padding:3px 0px;  }
.djholder .card .card-img { height:150px;width:150px; }
.djholder a { color:#CCC;opacity:0.7;  }
.djholder a:hover {opacity:1; }

/* SHOUTBOX */
.shout_entry { padding:5px;border-bottom:1px solid #292929; }
.shout_user { font-weight:bold;color:#E5902E; }
.shout_guest { font-weight:bold;color:#289744; }
.shout_time { font-size:12px;color:#4D4D4D; }
.shout_deleteit { float:right;margin-right:10px;font-size:11px; }
.shout_deleteit a { color:red; opacity:0.5; }
.shout_deleteit a:hover { opacity:1; }
.shout_banip { float:right;margin-right:10px;font-size:11px; }
.shout_banip a { color:orange; }
.shout_banip a:hover { color:white; text-decoration:none;}
.shouts_viewall { float:right;font-size:12px; }
.shouts_viewall a { color:#E59027; }
.shouts_viewall a:hover { color:white;text-decoration:none; }
.shout_clearall { float:right;margin-left:10px; }
.shout_clearall a { color:#B70000; }
.shout_clearall a:hover { color:white;text-decoration:none; }
#message_box {
		height: 200px;
		overflow:auto;
}	

/* === Dark Orange Theme === */
:root {
  --accent: #ff8c00;  /* orange accent */
}

/* Card + text */
.rr-player {
  background:#14161a;
  color:#e9ecef;
  border-radius:.5rem;
}
.rr-player .rr-time { color:#cfd4da; }

/* Buttons */
.rr-player .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.rr-player .btn-primary:hover,
.rr-player .btn-primary:focus {
  background: #ffa733;
  border-color: #ffa733;
}

.rr-player .btn-outline-light {
  border-color: rgba(255,255,255,.25);
  color: #f8f9fa;
}
.rr-player .btn-outline-light:hover,
.rr-player .btn-outline-light:focus {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* Focus rings */
.rr-player .btn:focus,
.rr-player input:focus {
  box-shadow: 0 0 0 .2rem rgba(255,140,0,.35);
}

/* Dropdown (dark) */
.rr-player .dropdown-menu { background:#1b1e24; }
.rr-player .dropdown-item { color:#e9ecef; }
.rr-player .dropdown-item:hover {
  background:#232831;
  color: var(--accent);
}

/* Sliders */
.rr-player .custom-range { cursor:pointer; }
.rr-player .custom-range::-webkit-slider-runnable-track {
  height:6px;
  background:#2a2f38;
  border-radius:3px;
}
.rr-player .custom-range.rr-seek::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--rr-seek,0%),
    #2a2f38 var(--rr-seek,0%) 100%
  );
}
.rr-player .custom-range::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:14px; height:14px; margin-top:-4px;
  background:#fff;
  border:2px solid var(--accent);
  border-radius:50%;
}
.rr-player .custom-range:active::-webkit-slider-thumb { transform:scale(1.05); }

/* Firefox */
.rr-player .custom-range::-moz-range-track {
  height:6px; background:#2a2f38; border-radius:3px;
}
.rr-player .custom-range.rr-seek::-moz-range-progress {
  height:6px; background:var(--accent); border-radius:3px;
}
.rr-player .custom-range::-moz-range-thumb {
  width:14px; height:14px;
  background:#fff; border:2px solid var(--accent); border-radius:50%;
}

/* === Dark Theme for My Voice Clips === */
.rr-dark-list {
  background:#14161a;
  border-radius:.5rem;
  box-shadow:0 0 10px rgba(0,0,0,0.6);
}
.rr-dark-ul { background:transparent; }
.rr-dark-item {
  background:#1b1e24;
  border:1px solid #2a2f38;
  transition:background .2s, border .2s;
}
.rr-dark-item:hover {
  background:#232831;
  border-color:#ff8c00;
}
.rr-dark-item .btn-warning {
  background:#ff8c00;
  border-color:#ff8c00;
}
.rr-dark-item .btn-warning:hover {
  background:#ffa733;
  border-color:#ffa733;
}
.rr-dark-item .btn-outline-light:hover {
  background:rgba(255,255,255,0.1);
}

/* Edge */
.rr-player .custom-range::-ms-fill-lower { background:var(--accent); }
.rr-player .custom-range::-ms-fill-upper { background:#2a2f38; }
.rr-player .custom-range::-ms-thumb {
  width:14px; height:14px;
  background:#fff; border:2px solid var(--accent); border-radius:50%;
}

/* Buffer bar */
.rr-player .rr-buffer .progress-bar { background:var(--accent); opacity:.4; }

/* Misc */
.rr-player .rr-btn-play i.fa-pause { margin-left:1px; }



 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.logoholder {  text-align:center; }
	.block-holder { text-align:center; }
	.listen1_wrapper, .air1_wrapper { margin:10px 5px 10px 5px; }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

} 

/* Josh */
.josh-header { font-family: 'Great Vibes' important;margin-bottom:30px;text-align:center;color:#AF3D3D;font-weight:bold;font-size:35px; }
.initial-avatar {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Colors */
    background-color: #555555;
    color: #fff;
	text-transform: capitalize;
	font-weight:bold;

    /* Rounded border */
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
}

.hidden {
    display: none;
}

.inactive {
    background-color: #000000 !important;
    color: #FABB05 !important;
    cursor: default !important;
}


.recorder-instructions {
    margin: 30px auto;
    width: 80%;
    padding: 5px 5px 20px 5px;
    background-color: #000000;
}

.step-1A,
.step-2A,
.step-3A,
.step-4A,
.step-5A {
    width: 90%;
    margin: auto;
}

.recorder-instructions>*>h2 {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 3px;
}

.recorder-instructions>*>p {
    margin: 0;
    font-size: 14px;
}
.audio-record {
    padding: 10px 10px 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#recordButton {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: bold;
    font-size: 18px;
    color: #E94235;
    background: #000000;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    padding: 30px;
}

.button-animate {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0px 0px 3px 1px #7eda88;
    }

    100% {
        box-shadow: 0px 0px 3px 10px #7eda88;

    }
}

#stopButton {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 18px;
    font-weight: bold;
    color: #1E1014;
    background-color: #E94235;
    border: none;
    border-radius: 5px;
    padding: 30px;
    margin: 0 40px;
    cursor: pointer;
}

.playback {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#audio-playback {
    width: 600px;
    height: 50px;
}

audio::-webkit-media-controls-panel,
video::-webkit-media-controls-panel {
    background-color: #fff;
}

.download {
    display: flex;
    justify-content: center;
}

#downloadButton {
    text-decoration: none;
    color: #1E1014;
}

#downloadContainer {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 18px;
    font-weight: bold;
    color: #1E1014;
    background-color: #FBBA72;
    border: none;
    border-radius: 5px;
    padding: 20px;
    cursor: pointer;
}
@media all and (max-width: 643px) {
    .audio-record {
        flex-direction: column;
        align-items: center;
    }

    #stopButton {
        margin: 20px 0;
    }
}