@font-face {
    font-family: 'manufakbk';
    src: url('manufaktur/Manufaktur-Black.ttf') format('truetype'),
		 url('manufaktur/Manufaktur-Black.woff') format('woff'),
		 url('manufaktur/Manufaktur-Black.woff2') format('woff2');
        ;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sofiabk';
    src: url('sofia-pro/SofiaProBlack.ttf') format('truetype'),
		 url('sofia-pro/SofiaProBlack.woff') format('woff'),
		 url('sofia-pro/SofiaProBlack.woff2') format('woff2');
        ;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sofiabd';
    src: url('sofia-pro/SofiaProBold.ttf') format('truetype'),
		 url('sofia-pro/SofiaProBold.woff') format('woff'),
		 url('sofia-pro/SofiaProBold.woff2') format('woff2');
        ;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sofiaregi';
    src: url('sofia-pro/SofiaProRegular-Italic.ttf') format('truetype'),
		 url('sofia-pro/SofiaProRegular-Italic.woff') format('woff'),
		 url('sofia-pro/SofiaProRegular-Italic.woff2') format('woff2');
        ;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sofiareg';
    src: url('sofia-pro/SofiaProRegular.ttf') format('truetype'),
		 url('sofia-pro/SofiaProRegular.woff') format('woff'),
		 url('sofia-pro/SofiaProRegular.woff2') format('woff2');
        ;
    font-weight: normal;
    font-style: normal;
}

html { min-height: 100% }

body { padding: 0px; margin: 0px;
color: #ffffff;
font-family: 'sofiareg', sans-serif;
font-size: 14pt;
line-height: 19pt;
background-color: #47f735; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, #210255, #232222);	
}

#menuArea { display: none; }

h1 { padding: 0px; margin: 0px; font-size: 10vw; line-height: 1em; font-family: 'manufakbk', sans-serif; text-align: left; }
h2 { padding: 0px; margin: 0px; font-size: 9vw; line-height: 1em; color: #47f735; font-family: 'manufakbk', sans-serif; text-align: left; }
h3 { padding: 0px; margin: 0px; font-size: 5vw; line-height: 1em; font-family: 'manufakbk', sans-serif; text-align: left; }
h4 { padding: 0px; margin: 0px; font-size: 3vw; line-height: 1em; color: #c824e0; font-family: 'manufakbk', sans-serif; text-align: left; }

.h1grad { background: #c824e0;
background: linear-gradient(to bottom, #c824e0 0%, #e0dcdc 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }

.h3grad { background: #4271b0;
background: linear-gradient(to bottom, #4271b0 0%, #e0dcdc 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }

img { display: block; border: 0; font-family: 'sofiaregi', sans-serif; color: #666666; font-size: 8pt; }

/* DESKNAV STARTS HERE */
.mast { width: 90%; margin: 0 auto; padding: 50px 5%; overflow: hidden; position: fixed; top: 0; z-index: 10;
background-image: linear-gradient(to right, #210255, #232222);
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.logobox { float: left; max-width: 150px; margin: 0px; padding: 0; }
.logo { width: 100%; }
.topnav { float: right; margin-top: 10px; padding: 0; }

#navigation { margin: 0px; overflow: hidden; }
#navigation ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
#navigation li { float: left; }
div#navigation ul li { font-size: 11pt; line-height: 11pt; font-family: 'sofiabd', sans-serif; color: #fff; text-transform: uppercase; letter-spacing: 2px; }

div#navigation ul li a { text-decoration: none; color: #fff;
background: linear-gradient(0deg, #47f735, #47f735) no-repeat right bottom / 0 var(--bg-h);
transition: background-size 350ms;
--bg-h: 100%;
}
div#navigation ul li a:where(:hover, :focus-visible) {
background-size: 100% var(--bg-h);
background-position-x: left;
color: #000;
}
/* DESKNAV ENDS HERE */

/* -------------------------------- */
/* BELOW CODE IS FOR NAV DROP MENUS */
/* -------------------------------- */

.dropbtn {
display: inline-block;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}

.dropdown:hover .dropbtn {
color: #ffffff;
}

.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
}

.dropdown-content a {
color: #000;
padding: 12px 12px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover { color: #fff }

.dropdown:hover .dropdown-content {
display: block;
}

/* -------------------------------- */
/* ABOVE CODE IS FOR NAV DROP MENUS */
/* -------------------------------- */

#paused { visibility: hidden; }

.homemain { width: 90%; margin: 160px auto 0px auto; padding: 0px; }
.homemain img { width: 100%; height: auto; }

.homemain-mobile { display: none; }
.homemain-mobile img { width: 100%; height: auto; }

.gpl { opacity: 0; transform: translate(0px, 70px); will-change: transform, opacity; background-image: url("https://voiceofg.com/images/voiceover-playlist.jpg"); width: 90%; margin: 70px auto 0px auto; padding: 0; text-align: center; }

.gpl.is-visible {
opacity: 1;
transform: none;
}

@media (prefers-reduced-motion: no-preference) {
.gpl {
transition: opacity 2s ease, transform 2s ease;
}
}

.gpl-transition {
opacity: 1;
transform: none;
}

.gpltext { width: 90%; margin: 0 auto; padding: 50px 0 60px 0; color: #ffffff; font-size: 30pt; line-height: 38pt; }

.gplbutton {
  background-color: #47f735; /* green */
    border: none;
    display: inline-block;
    color: #000000;
    padding: 22px 0 15px 0;
    margin: 0px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
	letter-spacing: 1px;
    font-size: 20pt;
	line-height: 20pt;
    width: 225px;
font-family: 'sofiabk', sans-serif;
    cursor: pointer; 
  transition: 0.4s;
-webkit-appearance: none;
border-radius: 0;
clip-path: polygon(8% 0, 100% 0, 100% 75%, 92% 100%, 0 100%, 0 25%);
}

.gplbutton:hover {
background-color: #c824e0;
cursor: pointer;
-webkit-appearance: none;
border-radius: 0;
}

.featpic img { width: 100%; clip-path: polygon(0 80.00px,80.00px 0,100% 0,100% calc(100% - 80.00px),calc(100% - 80.00px) 100%,0 100%); }

.homehead { width: 90%; margin: 0 auto; padding: 50px 0px; overflow: hidden;
opacity: 0;
transform: translate(0px, 75px);
will-change: transform, opacity;
}

.homehead.is-visible {
opacity: 1;
transform: none;
}

@media (prefers-reduced-motion: no-preference) {
.homehead {
transition: opacity 1s ease, transform 1s ease;
}
}

.homehead-transition {
opacity: 1;
transform: none;
}

.columns { width: 90%; margin: 0px auto; padding: 0px; overflow: hidden; }
.columns:after { content: ""; display: table; clear: both; }

/* LEFT AND RIGHT SLIDE ANIMATION STARTS HERE */

.homethree { width: 90%; margin: 0 auto; padding: 0px 0px 20px 0px; overflow: hidden; }

.homethree h3 {
opacity: 0;
transform: translate(-600px, 0px);
will-change: transform, opacity;
}

.homethree.is-visible h3 {
opacity: 1;
transform: none;
}

@media (prefers-reduced-motion: no-preference) {
.homethree h3 {
transition: opacity 3s ease, transform 3s ease;
}
}

.homethree-transition h3 {
opacity: 1;
transform: none;
}

.plthree { width: 90%; font-size: 18pt; line-height: 26pt; margin: 160px auto 0px auto; padding: 0px 0px 20px 0px; overflow: hidden; }
.plthree a:link { color: #47f735; text-decoration: none; }
.plthree a:visited { color: #47f735; text-decoration: none; }
.plthree a:hover { color: #c824e0; text-decoration: underline; }
.plthree a:active { color: #47f735; text-decoration: none; }
.plthree h1 { padding: 0px; margin: 0px; font-size: 10vw; line-height: 1em; color:#47f735; font-family: 'manufakbk', sans-serif; text-align: left; }
.plthree h2 { padding: 0px; margin: 0px; font-size: 9vw; line-height: 1em; color:#c824e0; font-family: 'manufakbk', sans-serif; text-align: left; }

.slidert {
width: 49%;
height: auto;
margin-right: 1%;
padding: 0px;
display: inline-block;
vertical-align: top;
opacity: 0;
transform: translate(-600px, 0px);
will-change: transform, opacity;
}

.slidert.is-visible {
opacity: 1;
transform: none;
}

@media (prefers-reduced-motion: no-preference) {
.slidert {
transition: opacity 3s ease, transform 3s ease;
}
}

.slidert-transition {
opacity: 1;
transform: none;
}

.slidert img { width: 100%; }

.slidelft {
width: 49%;
height: auto;
margin-left: 1%;
padding: 0px;
display: inline-block;
vertical-align: top;
opacity: 0;
transform: translate(600px, 0px);
will-change: transform, opacity;
}
	
.slidelft.is-visible {
  opacity: 1;
  transform: none;
}
	
@media (prefers-reduced-motion: no-preference) {
.slidelft {
    transition: opacity 3s ease, transform 3s ease;
  }
}

.slidelft-transition {
    opacity: 1;
    transform: none;
}

.slidelft img { width: 100%; clip-path: polygon(0 0,100% 0,100% calc(100% - 80.00px),calc(100% - 80.00px) 100%,0 100%); }

.slidelftpl {
width: 49%;
height: auto;
margin-left: 1%;
padding: 0px;
display: inline-block;
vertical-align: top;
opacity: 0;
transform: translate(600px, 0px);
will-change: transform, opacity;
}
	
.slidelftpl.is-visible {
  opacity: 1;
  transform: none;
}
	
@media (prefers-reduced-motion: no-preference) {
.slidelftpl {
    transition: opacity 3s ease, transform 3s ease;
  }
}

.slidelftpl-transition {
    opacity: 1;
    transform: none;
}

.slidelftpltop { width: 100%; margin: 0; padding: 0; }
.slidelftpltop img { width: 100%; }
.slidelftplbot { width: 100%; margin: 30px 0 0 0; padding: 0; }
.slidelftplbot img { width: 100%; clip-path: polygon(0 0,100% 0,100% calc(100% - 80.00px),calc(100% - 80.00px) 100%,0 100%); }

/* LEFT AND RIGHT SLIDE ANIMATION ENDS HERE */

/* ANIMATIONS START HERE */
@-webkit-keyframes fadeInDown {
0% { opacity: 0;
-webkit-transform: translateY(-100px); }
100% { opacity: 1;
-webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0;
transform: translateY(-100px); }
100% { opacity: 1;
transform: translateY(0); }
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown; }

.fade-in-div {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ANIMATIONS END HERE */

/* -------------------------- */
/* BELOW CODE IS FOR PLAYLIST */
/* -------------------------- */

#myProgress {
width: 100%;
background-color: #d9d9f2; 
cursor: pointer;
border-radius: 0px;
}

#myBar {
width: 0%;
height: 5px;
background-color: #ffc266;
border-radius: 0px;
}

.btn-action{
cursor: pointer;
padding-top: 10px;
width: 30px;
}

.btn-ctn, .infos-ctn{
display: flex;
align-items: center;
justify-content: center;
}
.infos-ctn{ padding-top: 20px; }

.btn-ctn > div {
padding: 5px;
margin-top: 18px;
margin-bottom: 18px;
}

.infos-ctn > div {
margin-bottom: 8px;
color: #ffc266;
}

.first-btn{ margin-left: 3px; }

.duration{ margin-left: 10px; }

.title{
margin-left: 10px;
width: 210px;
text-align: center;
}

.player-ctn{
border-radius: 0px;
width: 96%;
padding: 10px 2%;
background-color: #373737;
margin: 0px;
}

.playlist-track-ctn{
display: flex;
background-color: #464646;
margin-top: 3px;
border-radius: 0px;
cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266; */
}

.playlist-track-ctn > div{ margin:10px; }
.playlist-info-track{ width: 80%; }
.playlist-info-track,.playlist-duration{
padding-top: 7px;
padding-bottom: 7px;
color: #e9cc95;
font-size: 15pt;
pointer-events: none;
}
.playlist-ctn{ padding-bottom: 20px; }
.active-track{
background: #4d4d4d;
color: #ffc266 !important;
font-weight: bold; 
}

.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{ color: #ffc266 !important; }

.playlist-btn-play{
pointer-events: none;
padding-top: 5px;
padding-bottom: 5px;
}
.fas{
color: #ffc266;
font-size: 15pt;
line-height: 20pt;
}

/* -------------------------- */
/* ABOVE CODE IS FOR PLAYLIST */
/* -------------------------- */

/* ------------------------ */
/* BELOW CODE IS FOR FOOTER */
/* ------------------------ */

.fineprint { width: 90%; margin: 100px auto 0px auto; font-size: 10pt; line-height: 15pt; text-align: center; padding: 0px; color: #666666; }
.fineprint a:link { color: #666666; text-decoration: none; }
.fineprint a:visited { color: #666666; text-decoration: none; }
.fineprint a:hover { color: #47f735; text-decoration: underline; }
.fineprint a:active { color: #47f735; text-decoration: none; }

.footcorner { margin: 0px 0px 0px 0px; padding: 0px; height: 100px; width: 100%;
background-image: linear-gradient(to right, #210255, #232222);
clip-path: polygon(0 0,100% 0,100% calc(100% - 80.00px),calc(100% - 80.00px) 100%,0 100%); }

.footfill { margin: 0; width: 100%; height: 100px; padding: 0px; background: #47f735; }

.sitefoot { margin: 0; padding: 0px 0px 20px 0px; width: 100%; background: #47f735; }

.stickybot { position: fixed; left: 0; bottom: 0; width: 100%; }

/* ------------------------ */
/* ABOVE CODE IS FOR FOOTER */
/* ------------------------ */

/* -------------------------- */
/* BELOW CODE IS CONTACT PAGE */
/* -------------------------- */

.grecaptcha-badge { visibility: hidden; }

.error { color: #ff7e33; padding-bottom: 30px; margin: 0px; }
.error h3 { color: #ff7e33; }

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  box-sizing: border-box;
font-family: 'sofiareg', sans-serif;
  font-size: 14pt;
-webkit-appearance: none;
border: 0px;
border-radius: 0;
background: #e0dcdc;
}

input:focus, textarea:focus {
outline: none !important;
border: 0;
-webkit-appearance: none;
border-radius: 0;
background: #47f735;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
font-family: 'sofiareg', sans-serif;
  font-size: 14pt;
  resize: none;
-webkit-appearance: none;
border: 0px;
border-radius: 0;
background: #e0dcdc;
}

.cpic { opacity: 0; transform: translate(0px, 70px); will-change: transform, opacity; width: 90%; margin: 70px auto 0px auto; padding: 0; }
.cpic img { width: 100%; }

.cpic.is-visible {
opacity: 1;
transform: none;
}

@media (prefers-reduced-motion: no-preference) {
.cpic {
transition: opacity 2s ease, transform 2s ease;
}
}

.cpic-transition {
opacity: 1;
transform: none;
}

/* -------------------------- */
/* ABOVE CODE IS CONTACT PAGE */
/* -------------------------- */