@font-face{font-family: impact;src:url(../fonts/impact.ttf);}
@font-face{font-family: gothic-bold; src:url(../fonts/Gothic-B.ttf);}
@font-face{font-family: gothic; src:url(../fonts/Gothic.ttf);}
@font-face{font-family: montserrat; src:url(../fonts/Montserrat.ttf);}
@font-face{font-family: montserrat-black; src:url(../fonts/Montserrat-Black.ttf);}

*{box-sizing:border-box;font-family:gothic, Arial;}
input{outline:none;}
/* body{background-image: url("Icons/bgImage.jpg");background-repeat:no-repeat;background-size:cover;width:100%;} */
header{background-color:#b4c7d1;padding:25px 0px 10px 10px;}
header.dashboard{background-color:#b4c7d1;padding:25px 0px 10px 10px;position:fixed;z-index:999;width:80%;}
header.dashboard img{float:right;margin-right:10px;}
table tr td img{width:200px;height:200px;object-fit:cover;object-position:center;}

.w3-bar a:hover{text-decoration:none;}

/*Iframes*/
iframe.home-php{width:60%;height:135em;;overflow:auto;float:left;border:none;}
.videos{background-color:#dfe7ec;width:99%;margin:5px 0.5%;overflow:auto;}
.videos .iframe-container{padding-top:56.25%;overflow:hidden;position:relative;}
.videos iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none;}
.videos h5{text-align:center;margin:3px auto;font-weight:bold;}
.youtube{background-color:#dfe7ec;border-radius:10px;margin-bottom:1.5em;box-shadow: 0 0 4px 3px rgba(158, 154, 154, 0.4);}
.youtube .iframe-container{padding-top:56.25%;overflow:hidden;position:relative;}
.youtube iframe{width:100%;height:100%;border:none;position:absolute;top:0;left:0;bottom:0;right:0;border-radius:10px 10px 0 0;}
.youtube h5{text-align:center;margin:3px auto;font-weight:bold;padding:5px;}
.youtube h5 a{text-decoration:none;color:#333333;}
.youtube h5 a:hover{color:#8c8c8c;}
.you_download{position:relative;width:60%;border:2px solid #b4c7d1;margin-left:20%;border-radius:10px;}
.you_download .iframe-container{padding-top:56.25%;overflow:hidden;position:relative;}
.you_download iframe{border:none;width:100%;height:100%;position:absolute;top:0;left:0;bottom:0;right:0;}
/*end*/

/* Ajax Inputs */
.ajax-search{width:100%;outline:none;border-radius:8px;border:1px solid rgb(160, 158, 158);padding:8px;margin:0.3rem 0;}
.ajax-results{background-color:#afb1b4;}
/* End */

#expand_link{display:none;z-index:3;background-color:red;color:white;position:absolute;left:45%;top:30%;padding:20px;width:200px;}
#expand_link a{text-decoration:none;font-size:20px;display:block;color:white;padding:5px;text-align:center;}
#expand_link a:hover{background-color:white;color:red;}

.margin{background-color:#f3f6f8;min-height:100vh;}
.hide{display:none;}

/* Artist Section */
.artist_table table td img {border-radius:15px;padding:3%;}
.artist_table table, tr , td {border:none!important;}
.artist_table {overflow-x: hidden;background-color: #b7b7b7;padding: 2px;margin: 5px 0;white-space: nowrap;}
.artist_table table {display: inline-block;animation: scroll 60s linear 0s infinite alternate;}
.artist_table table tr {border: 0px solid transparent!important;}
.artist_table table tr td {border: 1px solid #fff;}

.artist-cover img{width:30vw;border-radius:15px;box-shadow:0 0 6px 2px rgba(71, 69, 69, 0.3);}
.artist-cover h4{font-size:5vw;font-family:gothic-bold;}
.artist-cover h5{font-size:3vw;font-family:gothic-bold;}
.artist-details p{text-align:left;margin-top:5px;font-family:gothic;}

@keyframes scroll {
    0% {transform: translateX(20%);}
    10% {transform: translateX(0%);}
    90% {transform: translateX(-50%);}
    100% {transform: translateX(-100%);}
}


.timer-container {display: flex;justify-content: center;align-items: center;margin-bottom: 10px;}
.timer-item {text-align: center;margin: 0 10px;}
.timer-label {font-size: 13px;color: #555;}
.timer-value {font-size: 20px;font-weight: bold;color: #333;}
.expires {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);padding: 7px;text-align: center;background-color: #f1f1f1;margin-bottom: 15px;}
/* .expires table tr td,th{padding:5px;border:2px solid #333!important;background-color:#f3f6f8;color:#333} */
/* .modal{width:40%;height:50%;margin:auto;overflow:auto;display:none;background-color:rgb(255,255,255);object-fit:cover;object-position:center;} */
#splash_news{position:absolute;width:50%;height:50%;margin:auto;overflow:auto;display:none;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);}
.alert_d{background-color:red;border-radius:10px;color:white;font-weight:none;padding:5px;font-size:17px;}
.alert_s{background-color:green;border-radius:10px;color:white;font-weight:none;padding:5px;font-size:17px;}
.response{margin:3px auto;width:50%;text-align:center;color:white;border-radius:5px;padding:5px;}
.totals{font-style:italic;color:white;background-color:#2891a6;padding:3px;width:80px;margin:0% auto;border-radius:10px;text-align:center;}
.glyph{padding:8px;border-radius:5px;background-color:red;color:white;}
.glyph:hover{background-color:white;color:red;}
.login{width:450px;padding:5px;}
.login h3{font-family:gothic-bold;text-align:center;font-weight:bold;margin:10px;}
.login img{display:block;margin-left:auto;margin-right:auto;width:120px;}
.login .input_wrapper{position:relative;}
.login i{position:absolute;left:15px;top:13px;font-size:17px;}
.login .input{width:99%;padding:11px;padding-left:40px;border:none;border-bottom:2px solid black;margin-bottom:20px;background-color: transparent;outline:none;font-family:gothic;}
.login button{display:block;margin-left:auto;margin-right:auto;border:none;padding:7px 20px;border-radius:20px;font-weight:bold;background-color:#000;color:white;width:50%;transition:all 0.5s ease-out;}
.login button:hover{background-color:#333;}
.register{width:500px;margin:15px auto;}
.soundslogo{max-width:65%;max-height:55%;margin:auto;position:relative;left:15%;top:-10%;}
.bioview-float{width:31%;margin-right:1.7%;border:2px solid red;}
.success-container{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40rem;border-radius:20px;box-shadow:0 0 8px 2px rgba(109, 107, 107, 0.3);}
.success-container a{border-radius:20px;}
.success-container audio{width:100%;}
.success-container img{width:100%;margin-bottom:1rem;margin-top:0.5rem;height:320px;object-fit:cover;object-position:center center;border-radius:15px;}
.success-container h4{text-align:center;background:#333;color:#fff;margin-top:0.7rem;padding-bottom:4px;border-radius:5px;}
.success-container h5{font-weight:bold;}
.success-container input{margin:0.7rem auto;width:50%;border-radius:5px;}
.success-container button{outline:none;border:none;box-shadow:0 0 4px 1px rgba(153, 149, 149, 0.3);padding:3px 8px;background-color:rgb(33, 102, 167);color:#fff;border-radius:4px;}
img.icons {width:40px;object-fit:contain;height:auto;margin-right:1rem;margin-left:10px;}

/*Songs styles*/
.song{margin-bottom:12px;}
.song .container-fluid{margin-bottom:1.5rem;}
.song .col-sm-4{background-color:#e3e9ef;padding:8px;}
.song img{object-position:center;object-fit:cover;width:500px;border-radius:15px;box-shadow:0 0 12px 1px rgba(0,0,0,0.2);cursor:zoom-in;}
.song .modal{display:none;position:fixed;z-index:1;padding-top:20vh;left: 0;top: 0;width:100%;height:100%;overflow:auto;background-color: rgb(0,0,0);background-color:rgba(0,0,0,0.9);}
.song .modal-content{margin:auto;display:block;width:80%;max-width:500px;box-shadow:none;}
.song .caption {margin:auto;display:block;text-align: center;color:#ccc;font-size:20px;font-family:gothic-bold;margin-top:2rem;}
.song .modal-content, .caption {-webkit-animation-name: zoom;-webkit-animation-duration: 0.6s;animation-name: zoom;animation-duration: 0.6s;}
.song .close {position:absolute;bottom:3%;left: 50%;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;}
.song .close:hover,.close:focus {color: #dd1c1c;text-decoration: none;cursor: pointer;}
.song .col-xs-6{text-align:center;}
@-webkit-keyframes zoom {from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)}}
@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)}}
.song h3{font-family:gothic-bold;text-align:center;color:#333;margin:15px auto;}
.download{text-decoration:none;background-color:#333333;color:white;border:none;padding:10px 15px;border-radius:25px;transition:all 0.4s ease-out;box-shadow:0 0 8px 3px rgba(102, 98, 98, 0.1);margin-left:5px;}
.download:hover{text-decoration:none;background-color:rgb(95, 87, 87);color:white;}
.tbl_img tr td img{width:70px;height:70px;object-position:center;object-fit:center;}
.tbl_img tr td:hover{background-color:#8c8c8c;}
.tbl_img tr td{width:10%;border-width:0.001rem;}
.tbl_img tr th{text-align:center;border-width:0.001rem;}
.tbl_img tr{border-width:0.001rem;}
.merchandise {margin-top:5px;}
.merchandise table tr td img{width:100%;height:auto;}
.merchandise table tr,td{border:none;}

/* Styles for discography.php*/
.search-artist{margin-bottom:5px;background-color:#dfe7ec;padding:5px;}
.search-artist select{width:98%;margin:10px 1%;padding:6px;}
.search-artist select:focus{border:2px solid #2891a6;}
.search-artist input[type="submit"]{padding:5px 12px;background-color:#333333;margin-left:1%;border:none;color:white;border-radius:15px;}
.recent{font-size:18px;color:#8c8c8c;text-align:center;margin-bottom:5px;}
.biography{border-radius:10px;margin:0px 0px 5px 5px}
.biography a:hover{text-decoration:none;}
.biography img{object-position:center;object-fit:cover;width:100%;height:360px;border-radius:15px;box-shadow:0 0 8px 2px rgba(83, 81, 81, 0.3);}
.biography h4{color:rgb(31, 29, 29);font-family:gothic-bold;text-align:center;}

/*Styles for upload-music*/
input{outline:none;}
.upload button{margin-top:20px;display:block;margin-left:auto;margin-right:auto;}
.upload input:focus{border:2px solid #2891a6;}
.upload h3{text-align:center;font-family:gothic-bold;}
.upload ul{list-style-type:none;}
.upload ul li{display:inline;}
.upload ul li a{text-align:center;text-decoration:none;background-color:#333333;padding:9px 13px;border-radius:20px;color:white;transition:all 0.4s ease-out;box-shadow:0 0 4px 1px rgba(0,0,0,0.1);font-size:13px;}
.upload ul li a:hover{text-decoration:none;background-color:green;}
.upload button{background-color:#2891a6;border:none;color:#fff;margin-bottom:0.5rem;border-radius:20px;padding:8px 15px;box-shadow:0 0 4px 1px rgba(0,0,0,0.2);outline:none;transition:all 0.4s ease-out;}
.upload button:hover{color:#fff;background-color:#3ebbd4;box-shadow:0 0 5px 0.1px #343434;}
.upload button:focus{outline:none;}
.upload .f-control{padding:10px 10px;}

.payment {margin-top: 20px;}
.payment .panel {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 15px;}
.payment .panel-body h2 {margin: -2px auto 10px auto;}
.payment .panel-heading {background-color: #2891a6 !important;color: white !important;text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;}
.payment .mno-option {display: flex;align-items: center;justify-content: center;padding: 10px;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;transition: all 0.3s ease;border-radius: 15px;}
.payment .mno-option img {width: 50px;margin-right: 10px;}
.payment #mpambaOption img {width: 70px;}
.payment .mno-option:hover {background-color: #f5f5f5;}
.payment .selected {border-color: #67d3e9;background-color: #afdae2;}
.payment .form-group {margin-bottom: 25px;}
.payment .btn-primary {background-color: #2891a6;border-color: #2891a6;transition: all 0.3s ease;outline: none;}
.payment .btn-primary:hover {background-color: #207788;border-color: #207788;}
.payment .panel-body button {padding: 10px 5px;width: 150px;border-radius: 25px;margin: auto;}
.payment .form-control {height: 40px;font-size: 18px;border-radius: 25px;padding-left: 20px;border: 2px solid #ddd;transition: border-color 0.3s;}
.payment .form-control:focus {border-color: #2891a6;box-shadow: none;}
.payment p{text-align:center;font-size:14px;width:95%;margin:10px auto;color:grey;font-family:gothic;}
#loadingMessage{width:300px;margin-left:auto;margin-right:auto;display:none;}
#progress{position:relative;width:98%;height:25px;border-radius:10px;border:1px solid #eee;box-shadow:0 0 4px 0 rgba(119, 112, 112, 0.4);margin:10px auto;text-align:center;display:none;}
#progress .progress{
	width:0;
	border-radius:10px;
    height:25px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
#progress span{position:absolute;color:#333;top:4%;left:50%;font-family:gothic-bold;font-size:15px;}
#position{margin-left:1%;}
/*End*/

/*Styles for album_songs.php*/
.contain1{float:left;width:40%;}
.contain1 img{width:100%;height:400px;object-position:center;object-fit:cover;border-radius:10px;}
.contain2{float:left;width:58%;margin-left:2%;color:#8c8c8c;font-family:gothic;}
.contain{color:#8c8c8c;margin-left:5%;width:95%;overflow:auto;padding:13px 0px 8px 0px;cursor:pointer;margin-bottom:7px;}
.contain h5{margin-top:-7px;margin-bottom:6px;font-family:gothic,arial;}
.contain h4{font-weight:bold;}
.contain a{text-decoration:none;color:#fff;}
.contain .w3-display-container{display:none;z-index:4;position:fixed;background-color:rgba(0,0,0,0.6);width:100%;height:100%;top:0;left:0;padding-top:150px;font-family:gothic;}
.contain .w3-display-container h4{color:#fff;}
.contain .w3-display-container a{background-color:#fff;border-radius:15px;color:#333;padding:7px;margin-right:5px;transition:all 0.4s ease-out;font-family:gothic;}
.contain .w3-display-container a:hover{background:green;color:#fff;}
.contain .w3-display-container table{margin-bottom:20px;}
.contain .w3-display-container table td,tr{background-color:transparent;border:2px solid #fff;padding:5px;color:#fff;font-family:gothic;}
.contain a:hover{background-color:white;text-decoration:none;padding:5px;border-radius:10px;color:#8c8c8c;}
.contain hr{margin:0px;border:0.1px solid #d9d9d9;}
.album-cover{background-color:#d4dce0;}
.album-cover img{width:60%; border-radius:5px;margin:10px auto;box-shadow:0 0 7px 2px rgba(73, 71, 71, 0.4);}
.album-cover h2{font-family:montserrat-black;font-size:4vw;}
.album-cover h4{font-family:montserrat;font-size:3vw;font-weight:bold;}
.album-cover h5{font-family:montserrat;font-size:2vw;}
.album-content{margin-top:10px;margin-bottom:10px;}
.album-content .song{background-color:#ffff;padding:3px 4px 3px 15px;border-radius:8px;position:relative;box-shadow:0 0 4px 2px rgba(107, 105, 105, 0.2);z-index:2;}
.album-content .song:hover{background-color:#ebeff3;box-shadow:0 0 6px 1px rgba(97, 94, 94, 0.5);}
.album-content .song:hover .options{display:block;}
.album-content .song .options{position:absolute;top:50%;transform:translate(0,-50%);right:3%;display:none;z-index:5;}
.album-content .song .options a{text-decoration:none;border-radius:50%;font-size:13px;box-shadow:0 0 7px 1px rgba(204, 202, 202, 0.3);transform: translateY(10px);transition: opacity 0.5s ease, transform 0.5s ease;}
.album-content .song .options a i{font-size:10px;}
.album-content .song:hover .options a {opacity: 1;transform: translateY(0);margin-left:4px;}
.album-content .song .options a.album-play{background-color:royalblue;color:#fff;padding:6px 5px 6px 8px;transition:all 0.2s ease-in;}
.album-content .song .options a.album-play:hover{background-color:#333;}
.album-content .song .options a.album-download{background-color:darkolivegreen;color:#fff;padding:6px 5px 6px 7px;transition:all 0.2s ease-in;}
.album-content .song .options a.album-download:hover{background-color:#333;}
.album-content .song .options a.album-more{margin-left:20px;}
a.download-zip{text-decoration:none;background-color:#333;color:#fff;font-family:gothic;padding:10px 15px;border-radius:25px;transition:all 0.4s ease-out;box-shadow:0 0 8px 0px rgba(0,0,0,0.2);margin-top:15px;}
a.download-zip:hover{background-color:rgb(95, 87, 87);color:#fff;text-decoration:none;}
.no-gutter{margin-left:0;margin-right:0;}

/* Styles for stream.php*/
#player{color:#333;width:80%;margin:25px auto;}
#buttons{height:50px;width:100%;float:none;}
.play{width: 65px;height: 65px;	border:3px solid #d2d2e0;border-radius:50%;outline:none;cursor:pointer;position:relative;font-size:35px;color:white;margin:auto 5px;}
.previous,.next{width: 50px;height: 50px;border:2px solid #d2d2e0;border-radius:50%;outline:none;cursor:pointer;position:relative;top:-5px;font-size:23px;color:white;}
#seek-bar{background-color:#8c8c8c;width:100%;height:6px;border-radius:5px;cursor:pointer;transition:height 0.2s ease-in-out;}
#seek-bar:hover{height:9px;}
#fill{height:100%;background-color:#2891a6;border-radius:5px;width:0%;transition:all 0.5s ease;}
.vol{float:right;position:relative;top:-30px;display:flex;}
.vol .glyphicon{font-size:20px;position:relative;top:-7px;color:#fff;}
.vol #volume{height:6px;background: rgba(70, 70, 70, 0.5);border-radius:5px;width:80px;margin-left:5px;cursor:pointer;}
.vol #volume #volume-line{width:100%;border-radius:5px;height:100%;background-color:#fff;transition:all 0.3s ease;}
.vol #volume #volume-line:hover{background-color:#2891a6;}

.vol-album{float:right;position:relative;top:-30px;display:flex;}
.vol-album .glyphicon{font-size:20px;position:relative;top:-7px;color:#fff;}
.vol-album #volume{height:6px;background: rgba(70, 70, 70, 0.5);border-radius:5px;width:80px;margin-left:5px;cursor:pointer;}
.vol-album #volume #volume-line{width:100%;border-radius:5px;height:100%;background-color:#fff;transition:all 0.3s ease;}
.vol-album #volume #volume-line:hover{background-color:#2891a6;}
#volume-icon{cursor:pointer;}
.bg_content{background-color:rgba(0,0,0,0.7);z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;overflow:hidden;}
.canvas-cover{position:relative;}
.visualiser{width:480px;overflow:auto;position:absolute;top:20px;left:50%;transform:translate(-50%,0);}
.canvas-cover img{width:230px;margin-top:146px;margin-bottom:10vh;border-radius:50%;box-shadow:0 0 7px 3px rgba(0,0,0,0.3);}
.canvas-cover .a-canvas{width: 500px;position: absolute;top:0;left:50%;}
.bg_content .title{font-family:gothic-bold;font-size:22px;text-align:center;color:#fff;}
.bg_content .artist{font-family:gothic;font-size:19px;text-align:center;color:#fff;}
#cTime{float:left;color:white;margin-top:4px;}
#tTime{float:right;color:white;margin-top:4px;}
/*End of Styles for listen.php*/

/* Styles for global player */
.global-player{display:none;position:fixed;width:100%;bottom:0;padding:3px 2px 6px 2px;background-color:#fff;box-shadow:0 3px 8px 1px rgba(73, 71, 71, 0.3);z-index:100;}
.global-player img{width:50px;border-radius:10px;margin-top:5px;box-shadow:0 0 8px 2px rgba(139, 136, 136, 0.2);}
.global-player .title{margin-top:5px;font-weight:bold;font-size:17px;}
.global-player #seek-bar{background-color:#8c8c8c;width:100%;height:6px;border-radius:5px;cursor:pointer;transition:height 0.2s ease-in-out;}
.global-player #seek-bar:hover{height:9px;}
.global-player #fill{height:100%;background-color:#2891a6;border-radius:5px;width:0%;transition:all 0.5s ease;}
.global-player .play{position:relative;font-size:20px;color:white;}
.global-player button {margin-top:5px;border-radius: 50%;background-color: #2891a6;background-image: linear-gradient(40deg, #84d2e1, #2891a6);overflow: hidden;border:2px solid #dddddd;height:50px;width:50px;}

.vol{float:right;position:relative;top:-30px;display:flex;}
main table tr{color:#333;}
.link{float:right;margin-right:50px;}
.link img{width:35px;}
a:hover .music{background-color:orange;}
p{font-family:arial;font-size:16px;}
.greetings{color:#ff9933;}
.welcome{text-align:center;color:#ff9933;font-weight:bold;}
.start{width:70px;margin:auto;padding:5px;}
.start a{color:#ff9933;}

/*Box 1 css styles*/
.division{margin:25px 0px 2px 0px;overflow:auto;}
.box1{width:100%;background-color:#f3f6f7;float:left;color:#777878;}
.box1 .w3-center img{width:100%;}
.box1 a{text-decoration:none;color:#777878;border-radius:10px;}
.box1 a:hover{text-decoration:none;color:white;background-color:#3f4243;padding:5px;}
.box1 hr{border:none;height:1px;background-color:#777878;margin:5px 0px;}
.box1 td a:hover{padding:0px;}
.box1 .top-feature{width:55%;height:55%;}
.box1 .trending{overflow:auto;width:100%;margin-bottom:5px;height:45px;}
.box1 .trapezoid{border-bottom:60px solid #b4c7d1;color:white;font-family:arial;font-weight:bold;padding:5px 0px 3px 10px;border-right:60px solid transparent;height:0;width:60%;font-size:25px;}
.box1 .move_trapezoid_content{position:relative;top:15px;font-family:gothic-bold;}
.box1 .rectangoid{background-color:#b4c7d1;width:100%;margin:auto;color:white;padding:5px;font-weight:bold;font-size:25px;}
.box1 .move_rectangoid_content{font-family:gothic-bold;}
.new{max-width:50px;margin:2%;}

/*Box 2 css styles*/
.box2{background-image:url("Icons/nyc.jpg");background-repeat:no-repeat;background-size:cover;background-position:center;width:39%;float:left;margin-left:1%;background-color:#3f4243;color:white;}
.box2 img{width:95%;margin-bottom:10px;border-radius:7px;}
.box2 a{text-decoration:none;color:white;border-radius:5px;}
.box2 a:hover{text-decoration:none;color:#333333;background-color:white;padding:5px;}
.box2-title{font-size:22px;font-weight:700;color:#128dc6;margin-left:2.5%;font-family:gothic-bold;}
.box2-news-title{margin-left:2.5%;font-size:15px;}
.box2 hr{margin:5px 2.5%;border:none;background-color:#fff;height:0.2px;}
.box2 .latest-news:hover{color:white;background-color:transparent;border-radius:0px;padding:0px;}

/*box for singles.php*/
.singles{background-color:#dfe7ec;}
.respond{margin:7px auto; background-color:#fff; border-radius:10px;}
.model1{width:30%;float:left;}
.model1 img{object-position:center;object-fit:cover;width:100%;height:120px;padding:5%;border-radius:20px;}
.model2{width:70%;float:left;}
.model2 a{text-decoration:none;color:#3f4243;font-size:16px;position:relative;top:45px;overflow:auto;left:5px;font-family:gothic;}
.model2 a:hover{text-decoration:none;}

/*styles for buy.php*/
.buy{font-family:gothic;}
.buy span{font-family:gothic;}
.buy h3{color:grey;margin:5px 0px;text-align:center;font-family:gothic-bold;}
.buy h5{color:grey;margin:10px 0px;text-align:center;}
.buy p{text-align:justify;font-size:14px;width:70%;margin:10px auto;color:grey;font-family:gothic;}
.buy img{width:100px;margin:5px auto;}
.buy input[type="text"]{border:1px solid #b4c7d1;margin-bottom:5px;border-radius:5px;font-size:11px;padding:5px 3px;}
.buy button{background-color:#333333;color:white;border-radius:15px;border:none;padding:3px 10px;margin-bottom:5px;transition:all 0.4s ease-out;}
.buy button:hover{background-color:rgb(92, 92, 92);}
/*End*/

/*adverts styles*/
.ads{background-color:#333333;border-radius:10px;padding:5px;text-align:center;color:white;font-family:georgia;width:70%;margin:5px auto;}
img.down{max-width:150px;max-height:150px;}
img.avatar{max-width:230px;max-height:230px;border-radius:50%;}
img.social{max-width:40px;max-height:40px;}
img.book{max-width:250px;max-height:250px;}

.delete{background-color:red;padding:10px;border-radius:5px;color:white;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
.clear{clear:both;}
.bold{font-weight:500px;}
article{padding:10px;border-radius:10px;font-weight:bold;margin:10px 2px 20px 2px;font-family:georgia;font-size:18px;}


/*Nav ul*/
nav{clear:both;width:100%;}
nav ul{list-style-type:none;margin:0px auto;padding:0px;overflow:hidden;font-size:20px;float:left;}
nav ul li{display:inline-block;}
nav ul li a{background-color:#2891a6;padding:5px;text-align:center;color:white;text-decoration:none;display:block;border-radius:2px;font-family:gothic-bold;}
nav ul li a:hover{background-color:#666666;text-decoration:none;color:white;transition:all 0.4s ease-out;}
nav .search{background-color:#2891a6;font-size:25px;color:white;padding:7.5px;position:relative;top:6px;transition:all 0.4s ease-out;}
nav .search:hover{background-color:#666666;text-decoration:none;color:white;cursor:pointer;}
#search{display:none;width:100%;margin:auto;padding:10px;clear:both;border:3px solid #b4c7d1;}

.add{border:2px solid indigo;width:250px;padding:4px;}
.response{margin:auto;width:50%;text-align:center;color:white;}
.album_container{background-color:white;margin:10px auto;border-radius:15px;padding:10px 15px;}
.album_container img{width:100%;object-fit:cover;object-position:center;height:350px;border-radius:15px 15px 0 0;border-radius:15px;margin-bottom:3px;}
.album_container a img:hover{-moz-box-shadow: 1px 10px 15px rgba(0, 0, 0,0.3);-webkit-box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.3);}
.album_container a{text-decoration:none;color:#413e3e;}
.album_container a:hover{text-decoration:none;color:#333333;}
.album_container h4{margin:1px 0px;padding-left:5px;font-weight:bold;}
.album_container h5{margin:2px 0px;padding-left:5px;}
.album_container .w3-display-middle{background-color:#333333;color:white;padding:5px;opacity:0.9;font-size:17px;}
.social a:hover{background-color:white;border-radius:10px;padding:17px 0px 19px 0px;}

/*styles for news*/
.news_title{font-size:25px;width:95%;color:#4d4d4d;font-weight:bold;margin-bottom:10px;}
.news_details{color:grey;font-size:20px;margin-bottom:10px;}
.news a:hover{text-decoration:none;}
.semi-width{padding:10px;}
.semi-width a{color:#333333;}
.semi-width a:hover{text-decoration:none;color:#333333;}
.semi-width img{width:100%;height:300px;object-position:center;object-fit:cover;border-radius:10px;}
.semi-width .writer{float:left;color:#333333;}
.semi-width .date{float:right;color:#333333;}
.semi-width hr{border:0.5px solid #8c8c8c;margin-top:4px;margin-bottom:10px;clear:both;}
.read_box{background-color:white;color:#4d4d4d;overflow:auto;}
.read_box img{width:500px;height:300px;object-position:center;object-fit:cover;}
.read_box h3{text-align: center;font-size:25px;margin:4px 0px 7px 0px;}
.read_box .writer{float:left;color:#333333;margin-left:15%}
.read_box .date{float:right;color:#333333;margin-right:15%;}
.read_box hr{border:0.5px solid #8c8c8c;margin:5px auto 10px auto;width:70%;clear:both;}
.read_box p{width:70%;margin:auto;text-align:justify;font-size:18px;}
.news_views{color:white;float:right;font-family:courier;background-color:#333333;border-radius:4px;}

a.home{text-align:center;text-decoration:none;background-color:#ff9900;color:white;padding:5px;border-radius:5px;}
a.home:hover{text-decoration:none;background-color:#efa352;color:white;}
.resize{height:300px;object-fit:cover;object-position:center center;}
.cancel{color:black;background-color:white;font-size:20px;font-weight:bold;}
.batani{background-color:#2891a6;border-radius:15px;margin:5px 0px;padding:8px;display:inline-block;border:none;width:110px;}
.batani a{color:white;text-decoration:none;}
.batani a:hover{text-decoration:none;color:white;}
.encloser{margin-left:20px;margin-right:20px;}
.footer {background-color: #b4c7d1;color: #333;padding: 30px 0;}
.footer a {color: #333;}
.footer a:hover {color: royalblue;font-weight:bold;text-decoration:none;}
.footer .social-icons a {font-size: 18px;margin: 0 10px;}
.footer p{font-family:gothic;}
.footer h4{font-family:gothic-bold;}
.footer p i{margin-bottom:10px;}
.footer ul li a {font-size:15px;}

/*styles for upload.php*/
.admin ul{list-style-type:none;padding:0px;background-color:#2891a6;margin-top:-5px;}
.admin ul li{display:inline;}
.admin ul li a{text-decoration:none;display:inline-block;padding:3px;width:15.5%;color:white;font-size:21px;text-align:center;}
.admin ul li a:hover{text-decoration:none;background-color:#666666;}

.sub-nav ul{list-style-type:none;padding:0px;background-color:#2891a6;width:500px;margin:auto;margin-bottom:10px;}
.sub-nav ul li{display:inline;}
.sub-nav ul li a{text-decoration:none;display:inline-block;padding:3px;width:32.5%;color:white;text-align:center;}
.sub-nav ul li a:hover{text-decoration:none;background-color:#666666;}

.f-control{width:98%;margin:20px 1%;font-family:gothic;padding:8px 10px;border:1px solid #8c8c8c;outline:none;border-radius:18px;box-shadow:0 0 2px 0.3px #cbcbcb;transition:all 0.4s ease-out;}
.f-control:focus{box-shadow:0 0 6px 0.3px #9b9b9b;}
@media screen and (max-width:1300px)
{
	.box2-title{font-size:18px;}
	.box2-news-title{font-size:14px;}
	.biography img{height:300px;}
	.album_container img{height:250px;}
	.semi-width img{height:270px;}
	.contain1 img{width:100%;height:300px;}
	iframe.home-php{height:114em;}
}

@media screen and (max-width:1000px)
{
	table tr td img{height:150px;width:150px;}
	#expand_link{left:40%;top:29%;}
	.margin{margin:0px 0%;}
	body{background-image: none;}
	.box2{width:39%;margin:0px 0px 0px 1%;}
	.box2 h5{margin-top:-5px;}
	.album_container h4{font-size:15px;}
	.album_container h5{font-size:12px;}
	.modal{width:70%;height:65%;}
	.biography h4{font-size:15px;}
	.respond img{height:100px;}
	.model2 a{top:30px;}
	.contain{width:100%;margin-left:0%;}
	.contain h5{padding-left:5%;}
	.contain1{width:40%;}
	.contain1 img{height:270px;}
	.contain2{width:58%;}
	.contain_all{width:95%;margin-left:5%;}
	.semi-width img{height:250px;}
	.news_title{font-size:20px;}
	.news_details{font-size:17px;}
	iframe.home-php{height:96em;}
	header.dashboard{width:100%;}
}

@media screen and (max-width:780px)
{
	.song .col-xs-6{text-align:justify;padding-left:9%;}
	#expand_link{left:38%;top:34%;}
	iframe.home-php{height:78.5em;}
	.link{position:relative;top:15px;}
	.link a img{width:30px;}
	.album_container img{height:250px;}
	.resize{height:170px;object-fit:cover;object-position:center center;}	
	.biography img{height:300px;}
	.biography h4{font-size:14px;}	
	.respond img{height:90px;}
	.model2 a{font-size:14px;top:25px;}
	.semi-width{width:48%;}
	.news_title{font-size:17px;}
	.news_details{font-size:14px;}
	.song img{width:70%;}
	.read_box img{width:80%;}
	.read_box p{width:80%;font-size:14px;}
	.read_box hr{width:80%;}
	.read_box .writer{float:left;color:#333333;margin-left:10%}
	.read_box .date{float:right;color:#333333;margin-right:10%;}
	.buy p{width:90%;}
	.buy h3{font-size:19px;}
	.contain1 img{height:240px;}
}
@media screen and (max-width:700px)
{
	nav ul{font-size:19px;}
	nav .search{font-size:24px;}
	iframe.home-php{height:72em;}
	.album_container img{height:220px;}
	.respond img{height:120px;}	
	.model2 a{top:38px;}
	.contain1 img{height:150px;}
	.you_download{width:70%;margin-left:15%;}
}
@media screen and (max-width:640px)
{
	header{margin-bottom:3px;}
	nav ul{font-size:15px;}
	nav .search{font-size:17px;top:3px;}
	article{font-size:16px;}
	table tr td img{height:130px;width:130px;}
	p{font-family:sans-serif;font-size:14px;}
	#expand_link{left:34%;top:34%;}
	iframe.home-php{height:66.5em;}
	.advert img{width:48%;margin:2px 0px 0px 1.2%;float:left;}
	.resize{height:280px;object-fit:cover;object-position:center center;}
	.msounds{width:200px;}
	.link{top:5px;}
	.link a img{width:25px;}
	.box2-title{font-size:16px;}
	.box2-news-title{font-size:12px;}
	.encloser{margin-right:0px;margin-left:0px;}
	#search{padding:5px;border:2px solid #b4c7d1;}
	.respond img{height:110px;}
	.box2 hr{margin:5px 0%;}
	.success-container{width:100%;margin-left:-1px!important;margin-top:0;}	
	.success-container input{width:75%;}
}

@media screen and (max-width:600px)
{
	.album_container img{height:200px;}
	.modal{width:100%;height:80%;}
	.read_box h3{font-size:21px;}
	.read_box img{width:80%;height:290px;}
	.read_box hr{width:80%;}
	.read_box p{font-size:17px;}
	.biography img{height:270px;}
	.contain2 h2{font-size:20px;}
	.contain2 h4{font-size:15px;}
	#player{width:90%;margin:25px auto;}
	.payment p{text-align:left;}

}

@media screen and (max-width:550px)
{
	p{font-size:16px;}
	img.mulibwanji{width:300px;margin-left:auto;margin-right:auto;display:block;}
	#expand_link{left:30%;}
	iframe.home-php{height:57.5em;}
	.you_download{width:80%;margin-left:10%;}
	.you_download p{font-size:13px;}
	.register{width:95%;}
	.resize{height:240px;object-fit:cover;object-position:center center;}
	.login{width:80%;}
	.box2 h5{font-size:12px;}
	.box1 .top-feature{width:60%;height:60%;}
	.box1 .trending{overflow:auto;width:100%;margin-bottom:5px;height:35px;}
	.box2-title{font-size:13px;}
	.box2-news-title{font-size:9px;}
	.box2t h5{font-size:10px;}
	.batani{width:85px;font-size:12px;}
	.respond img{height:100px;}
	.model2 a{top:35px;}
	.album_container img{height:240px;}
	.contain{width:100%;}
	.semi-width img{height:220px;}
	.news_title{font-size:16px;}
	.news_details{font-size:13px;}
	.read_box p{font-size:15px;}
	.read_box h3{font-size:18px;}
	.read_box img{width:80%;height:250px;}
	.sub-nav ul{width:90%;}
	.song h3{font-size:18px;margin:10px 0px;}
	.buy h5{font-size:14px;}
	.upload h3{font-size:18px;}
	nav ul{font-size:12px;}
	nav .search{font-size:12.5px;top:3px;}
	.f-control{padding:8px 10px;}
	.vol-album{float:right;position:relative;top:30px;left:20;}
	.vol-album .glyphicon{font-size:20px;position:relative;top:-6px;color:#fff;}
	.global-player #seek-bar{width:100%;height:4px;border-radius:3px;}
	.global-player #seek-bar:hover{height:7px;}
	.global-player img{margin-left:10px;width:47px;border-radius:6px;}
}

@media(max-width:499px){
	.visualiser{width:400px;top:38px;}
	.canvas-cover img{width:206px;margin-top:146px;margin-bottom:10vh;}
}

@media screen and (max-width:450px)
{
	.artist_table table td img {border-radius:8px;padding:3%;}
	.artist-cover img{width:35vw;border-radius:10px;}
	.artist-cover h4{font-size:6vw;}
	.artist-cover h5{font-size:4vw;}
	.artist-details p{font-size:14px;}
	.model1 img{padding:5%;border-radius:15px;}
	.song h3{font-size:15px;}
	#expand_link{left:26%;top:40%;}
	iframe.home-php{height:47.8em;}
	.you_download{width:98%;margin-left:1%;}
	.read_box p{width:90%;font-size:15px;}
	.read_box h3{font-size:20px;}
	.read_box img{height:220px;}
	.semi-width{width:98%;margin:0px 1%;}
	.semi-width img{height:220px;}
	.news_title{font-size:20px;}
	.news_details{font-size:15px;}
	.contain1{width:40%;}
	.contain2{width:58%;}
	.youtube h5{font-size:13px;}
	.new{max-width:38px;padding-right:3px;}
	.album_container{border-radius:15px;padding:0;}
	.album_container h4{margin-left:5px;font-size:13px;}
	.album_container h5{margin-left:5px;font-size:9px;padding-bottom:5px;}
	.album_container img{height:220px; border-radius:15px 15px 0 0;}	
	.resize{height:200px;object-fit:cover;object-position:center center;}
	.box2-title{font-size:11px;}
	.box2 h5{font-size:10px;}
	.box2-news-title{font-size:8px;}
	.respond img{height:85px;}
	.model2 a{top:20px;}
	.biography img{height:200px;}
	.bioview-float{font-size:12px;}
	.success-container li{margin-left:-17px;}
	.success-container input{width:80%;}
	.success-container img{height:250px;}
	.success-container .alert{font-size:13px;}
	.success-container li{font-size:13px;}
	.success-container h4{font-size:19px;padding:3px;}
	.success-container h5{font-size:16px;}
	.success-container img.icons{height:auto;}
	.album-cover img{width:100%;}
	.album-cover h4{font-size:4vw;}
	.album-cover h5{font-size:3vw;}
	.visualiser{width:360px;top:60px;}
	.canvas-cover img{width:206px;margin-top:146px;margin-bottom:10vh;}
}
@media screen and (max-width:426px)
{
	nav ul{font-size:11px;}
	nav .search{font-size:10.5px;top:2px;}
	.visualiser{width: 360px!important;top:60px;}
}
@media screen and (max-width:420px)
{
	table tr td img{height:115px;width:115px;}
	.tbl_img tr td img{width:50px;height:50px;object-position:center;object-fit:center;}
	.tbl_img tr td{font-size:11px;}
	.tbl_img tr th{font-size:10px;}
	.tbl_img tr input[type="submit"]{font-size:10px;}
	.link a img{width:20px;}
	.artist_table tr,td{border:1px solid #fff;}
	.new{max-width:35px;}
	.admin ul li a{font-size:17px;}
	.box1 .w3-center img{width:98%;}
	.buy input[type="text"]{width:130px;}
	.buy p{width:99%;}
	.upload h3{font-size:16px;}
	iframe.home-php{height:46em;}
	.youtube h5{font-size:10px;}
	.album_container img{height:190px;}	
	.song img{width:80%;margin:0px 10%;}
	.link{margin-righvt:10px;top:12px;}
	.link a img{margin-right:2px;}
	.glyph{padding:5px;border-radius:5px;}
	.login{width:85%;}
	.bg_content .title{font-size:19px;}
	.bg_content .artist{font-size:15px;}
	.input{margin-bottom:40px;}
	.soundslogo{max-width:70%;max-height:40%;}
	.semi_width{width:100%;}
	#stop{left:-52px;}
	.biography img{height:160px;}
	.biography h4{font-size:13px;}
	.biography{margin-left:1px;margin-right:1px;}
	.recent{padding:2px;font-size:16px;}
	.box1 h4{font-size:14px;margin-top:1px;}
	.box1 h4.w3-text-blue{margin-top:6px;}
	.division{margin:15px 0px 2px 0px;}
	.batani{width:80px;font-size:10px;}
	.respond img{height:120px;}
	.model2 a{top:30px;}
	.bioview-float{font-size:10px};
	.visualiser{width:350px;top:60px;}
}
@media screen and (max-width:380px)
{
	nav ul{font-size:9px;}
	nav .search{font-size:9.5px;padding:7px;}
	.upload h3{font-size:14px;}
	.upload li{font-size:12px;}
	.upload ol{margin-left:-15px;}
	.canvas-cover img{width:206px;margin-top:146px;}
	.visualiser{width:350px;top:60px;}
}
@media screen and (max-width:370px)
{	
	table tr td img{height:100px;width:100px;}
	.upload button{width:auto;}
	#expand_link{left:20%;}
	iframe.home-php{height:41em;}
	.buy h3{font-size:15px;}
	.buy button{width:58px;}
	.buy p{font-size:13px;}
	.login button{width:100px;}
	.contain1 img{height:110px;}
	.album_container h4{font-size:11.5px;}
	.album_container img{height:185px;}
	.advert img{width:95%;margin:5px 2.5% 0px 2.5%;float:left;}
	.resize{height:auto;object-fit:cover;object-position:center center;}
	.read_box hr{width:90%;}
	.read_box h3{font-size:19px;}
	.read_box .writer{float:left;color:#333333;margin-left:5%}
	.read_box .date{float:right;color:#333333;margin-right:5%;}
	.read_box p{font-size:14px;}
	.read_box img{height:200px;width:90%;}
	.msounds{width:170px;}
	.box1 .top-feature{width:80%;height:80%;}
	.box1 .trending{height:23px;}
	.box2-news-title{font-size:7px;}
	.box2 h5{font-size:8px;}
	.box1 h4{font-size:12px;margin-top:1px;}
	.batani{width:80px;font-size:10px;}
	.respond img{height:100px;}
	.semi-width{width:96%;margin:0px 2%;}
	.semi-width img{height:200px;}
	.news_title{font-size:19px;}
	.news_details{font-size:14px;}
	.sub-nav ul li a{width:32%;}
	.link{top:8px;}
	.contain .w3-display-container h4{font-size:15px;}
	.visualiser{width:280px!important;top:100px;}
}
@media screen and (max-width:352px)
{
	nav ul{font-size:8px;}
	nav .search{padding:6.5px;}
	.contain2 h2{font-size:17px;}
	.contain2 h4{font-size:12px;}
	.visualiser{width:280px!important;top:100px;}
}
@media screen and (max-width:340px)
{	
	#expand_link{left:17%;}
	.login{width:85%;}
	.soundslogo{max-width:80%;max-height:50%;left:9%;}
}