@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:600&display=swap');
@font-face {
    font-family: vcr;
	src: url("font/vcr.ttf");}
@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@-webkit-keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
html{padding:0; margin:0; }
body{padding:0; margin:0; background-color:#626262; color:#fff; font-family:vcr;  overflow: hidden;}
a{color:inherit; text-decoration:none;}
::selection{color:#000;}
.w{color:#c5c5c5;}
.b::selection, .b2::selection{color:#fff;}
.b{color:inherit; font-size:72px;}
.b2{color:#000; font-size:40px;}
.black-coffee-wrap{height:100vh; width:100%; background-image:url("images/Nkosinathi-Innocent-Maphumulo-3840.png"); background-repeat:no-repeat; background-position:right bottom;  position:absolute; top:0; z-index:1;}
.black-coffee{font-size:240px; display:inline-block; margin-top:19vh; margin-left:10vw; float:left; clear:left; -webkit-animation: bounce-in-top 1.1s 1s both; animation: bounce-in-top 1.1s 1s both; color:#c5c5c5;}
.black-coffee .link{transition:0.9s;}
.black-coffee .link:hover{color:rgba(255,191,1,0.5); transition:0.5s;}
.black-coffee-about{display:inline-block; font-family: 'Titillium Web', sans-serif; position:relative; margin-top:8vh; width:1680px; font-size:40px; font-weight:600; float:left; clear:left; margin-left:10vw; color:#c5c5c5; -webkit-animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 3.5s both; animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 3.5s both;}
.location::selection{color:#fff;}
.location{font-size: 120px; color:#000; text-align: right; clear: none; -webkit-animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 2.0s both; animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 2.0s both;}
.other-artists{font-size:80px; text-align:right; clear:none; color:#c5c5c5;	-webkit-animation: slide-in-blurred-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 2.5s both; animation: slide-in-blurred-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 2.5s both;}
.music-element-logo{display:inline-block; float:left; margin-left:50px; margin-top:50px; transition: all .3s; -webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.music-element-logo:hover{filter: invert(90%)}
.music-element-logo img{width:150px; height:auto;}
.info, .hour{font-size:40px; text-align:right; clear:none; color:#000!important; -webkit-animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 3s both; animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 3s both;}
.info::selection, .hour::selection {color:#fff;}
.info{margin-top:20px;}
.black-coffee-info_wrap{display:inline-block;}
.ced::selection, .ced a::selection{color:#FF3535;}
.ced{position:absolute; bottom:20px; right:50px; font-size:24px; transition: all 0.3s; transition-timing-function: ease-in;}
.ced a{color:inherit; text-decoration:none;}
.ced:hover {transform: scale(1.3)}
.book_ticket::selection{color:#FF3535;}
.book_ticket{display:none; padding:20px 30px; background:#000; font-size:56px; margin-top:85vh; margin-left:calc(10vw - 190px);	-webkit-animation: vibrate-1 0.3s linear infinite both; animation: vibrate-1 0.3s linear infinite both;}
.book_ticket:hover{animation-play-state: paused!important;} 
.music-element{display:inline-block; font-family: 'Titillium Web', sans-serif; text-transform:uppercase; font-weight:600; margin-left:60px; font-size:36px;  color:#c5c5c5; -webkit-animation: slide-in-blurred-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 4s both; animation: slide-in-blurred-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 4s both;}
.music-element a{transition:0.3s;}
.music-element a:hover{color:rgba(255,191,1,0.5);; transition: 0.5s;}
.flaticon-logo{color:inherit; transition: 0.3s}
.flaticon-logo:hover{color:rgba(255,191,1,0.5); transition: 0.5s;}
.flaticon-logo:before{font-size:inherit!important;} 
#particles{height:0;}
#black-coffee-wrap{}
@media all and (max-width : 2560px) { 
.b{font-size:48px;}
.b2{font-size:26.66px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-2560.png");}
.black-coffee{font-size:160px; margin-top:20vh; margin-left:13.33vw;}
.black-coffee-about{margin-top:8vh; width:1120px; font-size:26.66px; margin-left:13.33vw;}
.location{font-size: 80px;}
.other-artists{font-size:53.32px;}    
.music-element-logo{margin-left:33.33px; margin-top:33.33px;}
.music-element-logo img{width:100px;}
.info, .hour{font-size:26.66px;}
.info{margin-top:13.33px;}
.ced{bottom:13.33px; right:33.32px; font-size:16px;}    
.book_ticket{padding:13.33px 20px; font-size:37.32px; margin-top:85vh; margin-left:calc(13.33vw - 126.63px);} 
.music-element{margin-left:40px; font-size:24px;} 
#particles{height:100vh;}
}@media all and (max-width : 1920px) {
.b{font-size:36px;}
.b2{font-size:20px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo.png");}
.black-coffee{font-size:120px; margin-top:19vh; margin-left:10vw;}
.black-coffee-about{margin-top:8vh; width:840px; font-size:20px; margin-left:10vw;}
.location{font-size: 60px;}
.other-artists{font-size:40px;}
.music-element-logo{margin-left:25px; margin-top:25px;}
.music-element-logo img{width:75px;}
.info, .hour{font-size:20px;}
.info{margin-top:10px;}
.ced{bottom:10px; right:25px; font-size:12px;}
.book_ticket{padding:10px 15px; font-size:28px; margin-top:85vh; margin-left:calc(10vw - 95px);}
.music-element{margin-left:30px; font-size:18px;}
#particles{height:100vh;}
}@media all and (max-width : 1680px) {
.b{font-size:31.5px;}
.b2{font-size:17.5px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-1680.png");}
.black-coffee{font-size:105px; margin-top:26vh; margin-left:10vw;}
.black-coffee-about{margin-top:8vh; width:735px; font-size:17.5px; margin-left:10vw;}
.location{font-size:52.5px;}
.other-artists{font-size:35px;}
.music-element-logo{margin-left:21.875px; margin-top:21.875px;}
.music-element-logo img{width:66px;}
.info, .hour{font-size:17.5px;}
.info{margin-top:8.75px;}
.ced{bottom:8.75px; right:21.875px; font-size:10.5px;}
.book_ticket{padding:8.75px 13.125px; font-size:24.5px; margin-top:85vh; margin-left:calc(10vw - 83.125px);}
.music-element{margin-left:26.25px; font-size:15.75px;}
.flaticon-logo:before{margin-left:17.5px!important;} 
#particles{height:100vh;}    
}@media all and (max-width : 1440px) {
.b{font-size:26px;}
.b2{font-size:14px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-1440.png");}
.black-coffee{font-size:85px; margin-top:30vh; margin-left:10vw;}
.black-coffee-about{margin-top:8vh; width:595px; font-size:16px; margin-left:10vw;}
.location{font-size:46px;}
.other-artists{font-size:28px;}
.music-element-logo{margin-left:17.7px; margin-top:17.7px;}
.music-element-logo img{width:53px;}
.info, .hour{font-size:16px;}
.info{margin-top:7px;}
.ced{bottom:7px; right:17.5px; font-size:8.5px;}
.book_ticket{padding:7px 10.6px; font-size:19.8px; margin-top:90vh; margin-left:calc(10vw - 67.33px);}
.music-element{margin-left:21px; font-size:12.75px;}
.flaticon-logo:before{margin-left:14px!important;} 
#particles{height:100vh;}    
}    
@media all and (max-width : 1366px) {
.b{font-size:25.61px;}
.b2{font-size:14.22px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-1366.png");}
.black-coffee{font-size:85.36px; margin-top:16vh; margin-left:10vw;}    
.black-coffee-about{margin-top:8vh; width:598px; font-size:14.23px; margin-left:10vw;}
.location{font-size:42.68px;}   
.other-artists{font-size:28.45px;}  
.music-element-logo{margin-left:17.78px; margin-top:17.78px;}
.music-element-logo img{width:54px;}
.info, .hour{font-size:14.5px;}
.info{margin-top:7.11px;}
.ced{bottom:7.11px; right:17.784px; font-size:8.5px;}
.book_ticket{padding:7.11px 10.67px; font-size:20px; margin-top:85vh; margin-left:calc(10vw - 67.58px);}
.music-element{margin-left:21.34px; font-size:12.8px;}
.flaticon-logo:before{margin-left:14.22px!important;} 
#particles{height:100vh;}  
}@media all and (max-width : 1366px) and (min-resolution: 192dpi) {
.b{font-size:25.61px;}
.b2{font-size:14.22px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-bt.png"); }
.black-coffee{font-size:85.36px; margin-top:28vh; margin-left:75.34px;}    
.black-coffee-about{margin-top:8vh; width:598px; font-size:14.23px; margin-left:75.34px;}
.location{font-size:42.68px;}   
.other-artists{font-size:28.45px;}  
.music-element-logo{margin-left:17.78px; margin-top:17.78px;}
.music-element-logo img{width:54px;}
.info, .hour{font-size:14.5px;}
.info{margin-top:7.11px;}
.ced{bottom:7.11px; right:17.784px; font-size:8.5px;}
.book_ticket{padding:7.11px 10.67px; font-size:20px; margin-top:75vh; margin-left:calc(5vw - 67.58px);}
.music-element{margin-left:21.34px; font-size:12.8px;}
.flaticon-logo:before{margin-left:14.22px!important;} 
#particles{height:100vh;}      
}@media all and (max-width : 1024px) {
.b{font-size:19.2px;}
.b2{font-size:10.66px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-1024.png");}   
.black-coffee{font-size:64px; margin-top:37vh; margin-left:10vw;}   
.black-coffee-about{margin-top:6.5vh; width:449px; font-size:12px; margin-left:10vw;}
.location{font-size:32px;}   
.other-artists{font-size:21.33px;}  
.music-element-logo{margin-left:13.33px; margin-top:13.33px;}
.music-element-logo img{width:41px;}
.info, .hour{font-size:16px;}
.info{margin-top:5.33px;}
.ced{bottom:5.33px; right:13.33px; font-size:8.5px;}
.ced:hover {transform: scale(1.2)}
.book_ticket{padding:5.33px 8px; font-size:15px; margin-top:88vh; margin-left:calc(10vw - 50.68px);}
.music-element{margin-left:16px; font-size:9.6px;}
.flaticon-logo:before{margin-left:10.66px!important;} 
#particles{height:100vh;}     
}@media all and (max-width : 1024px) and (min-resolution: 192dpi) {
.b{font-size:19.2px;}
.b2{font-size:10.66px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-st.png");}    
.black-coffee{font-size:64px; margin-top:25vh; margin-left:54.33px;} 
.black-coffee-about{margin-top:6.5vh; width:449px; font-size:12px; margin-left:54.33px;}
.location{font-size:32px;}   
.other-artists{font-size:21.33px;}  
.music-element-logo{margin-left:13.33px; margin-top:13.33px;}
.music-element-logo img{width:41px;}
.info, .hour{font-size:16px;}
.info{margin-top:5.33px;}
.ced{bottom:5.33px; right:13.33px; font-size:8.5px;}
.ced:hover {transform: scale(1.2)}
.book_ticket{padding:5.33px 8px; font-size:15px; margin-top:78vh; margin-left:calc(54.33px - 50.68px);}
.music-element{margin-left:16px; font-size:9.6px;}
.flaticon-logo:before{margin-left:10.66px!important;} 
#particles{height:100vh;}     
}
@media all and (max-width : 1024px) and (min-resolution: 192dpi) and (orientation:portrait) {   
.b{font-size:25.61px;}
.b2{font-size:18px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-bt-po.png");}   
.black-coffee{font-size:85.36px; margin-top:24.5vh; margin-left:15px;}   
.black-coffee-about{margin-top:5vh; width:600px; font-size:18px; margin-left:15px;}
.location{font-size:42.68px;}   
.other-artists{font-size:28.45px;}  
.music-element-logo{margin-left:15px; margin-top:15px;}
.music-element-logo img{width:66px;}
.info, .hour{font-size:18px;}
.info{margin-top:7.11px;}
.ced{bottom:10px; right:25px; font-size:12px;}
.ced:hover {transform: scale(1.3)}
.book_ticket{padding:8.75px 13.125px; font-size:24.5px; margin-top:5vh; margin-left:calc(15px + 128px); float:left; clear:left;}
.music-element{margin-left:15px; font-size:18px; float:left; clear:left; margin-top:2vh;}
.flaticon-logo:before{margin-left:10.66px!important;} 
#particles{height:100vh;}            
}@media all and (max-width : 768px) and (min-resolution: 192dpi) and (orientation: portrait) {
.b{font-size:19.2px;}
.b2{font-size:14.22px;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-st-po.png");}   
.black-coffee{font-size:64px; margin-top:23.5vh; margin-left:15px;}   
.black-coffee-about{margin-top:5vh; width:450px; font-size:16px; margin-left:15px;}
.location{font-size:32px;}   
.other-artists{font-size:21.33px;}  
.music-element-logo{margin-left:15px; margin-top:15px;}
.music-element-logo img{width:50px;}
.info, .hour{font-size:18px;}
.info{margin-top:7.11px;}
.ced{bottom:10px; right:25px; font-size:12px;}
.ced:hover {transform: scale(1.3)}
.book_ticket{padding:8.75px 13.125px; font-size:24.5px; margin-top:5vh; margin-left:calc(15px + 112.5px); float:left; clear:left;}
.music-element{margin-left:15px; font-size:16px; float:left; clear:left; margin-top:2vh;}
.flaticon-logo:before{margin-left:10.66px!important;} 
#particles{height:100vh;}                
}@media all and (max-width : 414px) {
.b{font-size:19.2px;}
.b2{font-size:20px; color:#c5c5c5;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-bm.png");}
.black-coffee{font-size:40px; margin-top:4vh; margin-left:15px; width:200px;}   
.black-coffee-about{margin-top:5vh; width:450px; font-size:16px; margin-left:15px; display:none;}
.location{font-size:30px; text-align:left;}   
.other-artists{font-size:20px; text-align:left;}  
.music-element-logo{margin-left:15px; margin-top:15px;}
.music-element-logo img{width:50px;}
.info, .hour{font-size:16px; text-align:left;}
.info{margin-top:7.11px;}
.ced{bottom:10px; right:25px; font-size:12px;}
.ced:hover {transform: scale(1.3)}
.book_ticket{padding:8.75px 13.125px; font-size:24.5px; margin-top:30vh; margin-left:calc(50% - 127.97px); float:left; clear:left;}
.music-element{margin-left:0; margin-right:0; font-size:22px; box-sizing:border-box;    padding-left: 15px; padding-right: 15px;  margin-top:3vh; width:100%; text-align:center;}
.flaticon-logo:before{margin-left:10.66px!important;} 
#particles{height:100vh;}   
.w{display: none;}
}@media all and (max-width : 375px) {
 .b{font-size:19.2px;}
.b2{font-size:14.22px; color:#c5c5c5;}
.black-coffee-wrap{background-image:url("images/Nkosinathi-Innocent-Maphumulo-sm.png");} 
.black-coffee{font-size:36px; margin-top:4vh; margin-left:10px; width:200px;}   
.black-coffee-about{margin-top:5vh; width:450px; font-size:16px; margin-left:15px; display:none;}
.location{font-size:27px; text-align:left;}   
.other-artists{font-size:18px; text-align:left;}  
.music-element-logo{margin-left:10px; margin-top:15px;}
.music-element-logo img{width:45px;}
.info, .hour{font-size:15px; text-align:left;}
.info{margin-top:7.11px;}
.ced{bottom:10px; right:25px; font-size:12px;}
.ced:hover {transform: scale(1.3)}
.book_ticket{padding:8.75px 13.125px; font-size:24.5px; margin-top:30vh; margin-left:calc(50% - 127.97px); float:left; clear:left;}
.music-element{margin-left:0; margin-right:0; font-size:20px; box-sizing:border-box; padding-left: 10px; padding-right:10px; margin-top:3vh; width:100%; text-align:center;}
.flaticon-logo:before{margin-left:10.66px!important;} 
#particles{height:100vh;}   
.w{display:none;} 
}