/*
#searchVideos, #announcement, #terms {
  display: none !important;
}
*/




#jukeHeader {
/*   display: none; */
}

 /* @import url("https://use.typekit.net/cgl5gsl.css"); */ 
 @import url("https://use.typekit.net/aux4rhi.css");
*:not(.fa) {
font-family: proxima-nova, sans-serif !important;
}

html,
body,
div,
h1,
p,
a,
video {
  margin: 0;
  padding: 0;
	letter-spacing: .03em;
	line-height: 1.5;
}


html,
body {
  height: 100%;
}


body {
  font-family: 'Fira Sans', sans-serif;
  color: #313335;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position: center center;
  background: #f0f2f5;
}



.ssp {
    font-family: 'Source Sans Pro', sans-serif;	
    font-weight: 300;
}


#hero {
	text-align: center;
/* 	background: url(../images/_background.jpg); */
}

#homePageTop {
  position: relative;
  z-index: 1;
  margin-top: 0%;
  min-height: 100%;
   display: flex;
  flex-direction: column;
  min-height: 100vh;

}

/*
#jukeLogoHome {
  width: 300px;
  margin-bottom: 20px;
  padding-top: 10%
}
*/

#jukeLogoHome {
  width: 80%;
  max-width: 500px;
  margin-bottom: 20px;
}

h2 {
  font-size: 18pt;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 100;
  letter-spacing: .12em;
}

.inputTextBox, .emailTextBox {
  width: 250px;
  padding: 11pt 11pt 11pt 18pt;
  font-size:12pt;
  background: rgba(256,256,256,.15);
  color: #ffffff;
  border-radius: 3pt 0pt 0pt 3pt;
  border: none;
margin-bottom: 24pt;
  font-style: italic;
}





#generatedHostID {
  padding: 10pt 10pt 10pt 10pt;
  font-size:12pt;
  background: rgba(256,256,256,0);
  color: #ffffff;
  border-radius: 3pt 0pt 0pt 3pt;
  border: 1px solid rgba(256,256,256,.75);
  font-style: normal;
  display: inline-block;
  width: 275px;
}


.hostJukebox {
  margin-bottom: 12pt;
  padding-bottom: 12pt;
}

.joinJukebox {
  margin-top: 36pt;
}

.homeButton, #joinButtonClick {
  background: rgba(256,256,256,1);
  color: #4c078c;
  padding:12pt;
  border: none;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 0pt 3pt 3pt 0pt;
  font-size: 12pt; 
        	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}




.homeButton:hover, #joinButtonClick:hover {
  text-decoration: none;
  color: #4f4d64;
}

input[type=text]:focus, textarea:focus, .homeButton[type=text]:focus, .homeButton:focus, #joinButtonClick[type=text]:focus, #joinButtonClick:focus {
  box-shadow: 0 0 48pt rgba(256, 256, 256, 1);
  border: none;
  outline: none;
  text-decoration: none;
}

.form-control {
  padding: 16pt !important;
}

#q[type=text]:focus {
  border: 2px solid #4c078c;
}

.btn-default {
  width: 50%;
  background: #4c078c;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 0px;
  margin-top: 12pt;
}

/* Host Page */

#hostOptions, #userOptions, #userEmailSection {
  background: rgba(256,256,256,.97);
  width:100%;
  height: 100%;
  position: fixed;
  margin: 0 auto;
  z-index: 25;
  text-align: center;
  top: 0px;
  left:0px;
  padding-top: 2%;
}


#userOptions, #userEmailSection {
	z-index: 100;
	background: #f0f2f5;
	padding-top: 45px;
}

#hostOptions h2, #userOptions h2, #userEmailSection h2 {
  color: #313335;
  text-transform: inherit;
  letter-spacing: .5px;
  font-weight:bold;
  font-size: 24px;

}

#hostOptions p.text {
  color: #hostOptions;
  font-size: 18px;
  font-weight: bold;
  margin-top:12pt;
  letter-spacing: .01em;
}

#optionsButton, #infoButton, #emailButton {
      	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}



#optionsButton {
transition: all .3s ease-in-out;
margin-top: 2pt;
padding: 12px 48px 6px 48px;
border: none;
position: relative;

font-weight: bold;

font-size: 24px;
top: 48px;
width: 40%;
opacity: 1;
background: #f0f2f5;

}

#optionsButton span {
       background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: auto;
    background-clip: border-box;
background-size: 200% 200%;
-webkit-animation: textAnimate 5s ease infinite;
-moz-animation: textAnimate 5s ease infinite;
animation: textAnimate 5s ease infinite;
-webkit-background-clip: text;
    background-clip: text;
-webkit-text-fill-color: transparent;
}
:root {
	--gradient-shadow: linear-gradient(
		45deg,
		#fb0094,
		#0000ff,
		#980bcc,
		#008aff,
		#c038b5,
		#fb0094,
		#3838d4,
		#af51ff,
		#00baff,
		#e71be0
	);
}


#optionsButton:before,
#optionsButton:after {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	background: var(--gradient-shadow);
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: animate 20s linear infinite;
}

#optionsButton:after {
	filter: blur(20px);
  opacity: .4;
}

@keyframes animate {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 300% 0;
	}
	100% {
		background-position: 0 0;
	}
}

#optionsButton:hover {
  text-decoration: none;
  background: rgba(256,256,256,.85);
}

#optionsButton[type=text]:focus, #optionsButton:focus, #infoButton[type=text]:focus, #infoButton:focus, #emailButton[type=text]:focus, #emailButton:focus {
  box-shadow: 0 0 48pt rgba(256, 256, 256, 1);
  border: none;
  outline: none;
  text-decoration: none;
}


/* Drop down styling */

.select-css {
	display: block;
	font-size: 12pt;
	padding: 12pt;
	width: 250px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
  margin-top: 12pt;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: 3pt;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}



/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}

/* Close drop down styling */



/* User Image Upload Section */




#userWrapper {
  width: 30%;
  text-align: center;
  margin: 0 auto;
}

#userImageSection {
  text-align: center;
  margin: 0 auto;
}

#userImageWrap img, #nowPlayingUserPhoto, .upNextPerson img, #announceUserImage {
  -webkit-filter: contrast(109%) brightness(116%) saturate(126%);
  filter: contrast(109%) brightness(116%) saturate(126%);
}


.replaceUserImage {
  position: absolute;
  z-index: 4;
  text-align: center;
  margin: 0 auto;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}


#logoHeaderWrap #jukePageHeader {
  height: 55px;
  width: auto;
  margin-top:5px;
  margin-left: 12px;
  margin-top: -6px;
  position: absolute;
  left: 0px;
}


#userOptionsLogoContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	padding-bottom: 12px;
	margin-bottom: 24px;
	width: 100%;
	padding: 12px;
	text-align: left;
}

#userOptionsLogo {
height: 55px;
  width: auto;
  margin-top:5px;
  margin-left: 6px;
  margin-top: -12px;

}

#userProfileIconWrap { 
  position: absolute;
  right: 12px;
  top: 12px; 
}

#profileImagesInfoContain {
	position: relative;
	margin-top: -24px;
}

#userProfileIcon {
  width: 30px;
  border-radius: 50%;
}

#userProfileIconWrap p {
  position: relative;
  bottom: 6px;
}

#userProfile h2 {
	text-transform: uppercase;
}

#nowPlayingLink, #upNextLink {
  margin-right:12pt;
}



.currentLink {
  border-bottom: 3px solid rgba(256,256,256,.35);
}

#nowPlaying {
  position: relative;
  top: 48px;
}


#nowPlaying h1, #announcement h1 {
  color:#313335;
  position: relative;
  font-size: 24px;
  font-weight: 800;
}


#announcement p {
	display: none;
}

#announceTextField {

}

 
#announcement h1 {
    margin-top: 48px;
}



#nowPlaying p {
  color:#313335;
  position: relative;
  font-size: 15px;
  letter-spacing: .01em;
  font-weight: 300;
 margin-top: -3px;
 padding: 0px 12px;
}

#yttnbg {
  background: url(https://i1.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg) no-repeat center center; 
  background-size: 130% !important;
  left: 0px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 position: relative;
  top: 10px;
  height: 150px;
  border-bottom: 6px solid #fff;
  box-shadow:  10px 10px 20px #ccced0,
             -10px -10px 20px #ffffff;
}


#overlayRecord {
  height: 175px;
  position: absolute;
  left: 50%;
  top: 70px;
  margin-left: -87.5px;
  border-radius: 50%;
  z-index: 5;
}


#armTwo {
  position: relative;
  height: 200px;
  left: 50%;
  margin-top: 95px;
  margin-left: 0px;
  z-index: 4;
  
}

#armContainer {
  overflow: hidden;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  margin-left: 0px;
  z-index: 4;
  text-align: left;
}

#nowPlayingUserPhoto, #profileImgLarge {
  height: 175px;
  position: absolute;
  left: 50%;
  top: 70px;
  margin-left: -87.5px;
  border-radius: 50%;
  z-index: 3;
  border: 1px solid rgba(0,0,0,.05);
}

#userImgGradient, #userImgLargeGradient, #userImgLargeGradientTwo {
 top: 44px;
 height: 225px;
 position: absolute;
 margin-left: -114.5px;
 left: 50%;
 z-index: 2;
 opacity: 75%;
}


	
#userImgGradient {
/*
background: linear-gradient(270deg, #943cb1, #693ba9, #27338c, #7893ce);   
background-size: 600% 600%; 
border-radius: 50%;
    -webkit-animation: AnimationName 7s ease infinite;
    -moz-animation: AnimationName 7s ease infinite;
    animation: AnimationName 7s ease infinite;
  filter: blur(5px);
*/
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}






#userImgCircle, #userImgLargeCircle, #userImgLargeCircleTwo {
  top: 46px;
  height: 223px;
  position: absolute;
  margin-left: -111.5px;
  left: 50%;
   box-shadow:  10px 10px 20px #ccced0;
  border-radius: 50%;
}



.songChooser {
  position: relative;
  top: 125px;
  font-size: 15px;
  font-weight: bold;
  color: #313335;
  text-transform: inherit;
  letter-spacing: .5px;
  
}

.moveUnderImage {
  position: relative;
  top: 120px;
}

#vetoButton, #searchTwoContainer, #playTwoContainer {
      	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; 
  margin-top: 2pt;
  padding:12px 6px 6px 6px;
  border: none;
  position: absolute;
  z-index: 8;
  font-weight: bold;
  border-radius: 6px;
  font-size: 24px; 
  top: 24px;
  width: 40%;
  left: 50%;
  margin-left: -20%;
  opacity: 1;
box-shadow:       9px 9px 18px #d1d3d5,
             -9px -9px 18px #ffffff;
  background: #f0f2f5;
}

#infoButtonContainer, #emailButtonContainer {
	      	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; 
  margin-top: 2pt;
  padding:12px 6px 6px 6px;
  border: none;
  position: relative;;
  z-index: 8;
  font-weight: bold;
  border-radius: 6px;
  font-size: 24px; 
  top: 24px;
  text-transform: uppercase;
  width: 30%;
  left: 50%;
  margin-left: -15%;
  opacity: 1;
box-shadow:       9px 9px 18px #d1d3d5,
             -9px -9px 18px #ffffff;
  background: #f0f2f5;
}

#emailButtonContainer {
  margin-top: -24px;
}




#vetoOrVetoed, #searchTwo, #playTwo, #infoButton, #emailButton {
   /*   background: -webkit-linear-gradient(left, #7f339b , #4175d0);
   background: -o-linear-gradient(right, #7f339b , #4175d0);
   background: -moz-linear-gradient(right, #7f339b , #4175d0);
   background: linear-gradient(to right, #7f339b , #4175d0);  */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
   background-size: 200% 200%;
   -webkit-animation: textAnimate 5s ease infinite;
   -moz-animation: textAnimate 5s ease infinite;
   animation: textAnimate 5s ease infinite;
   -webkit-background-clip: text;
   }


#searchVideosButton {
	display: none;
}

#searchTwoContainer {
	top: 136px;
}

#playTwoContainer {
	top: 186px;
}

#searchTwoContainer, #playTwoContainer {
	padding:12px 6px 12px 6px;
}

@-webkit-keyframes textAnimate {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes textAnimate {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes textAnimate {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}



.vetoed #vetoOrVetoed  {
  color: #313335;
  background: inherit;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

#infoButtonContainer.notReady {
    background: #f0f2f5;
box-shadow: inset 5px 5px 10px #d3d5d8,
            inset -5px -5px 10px #ffffff;
}
#infoButtonContainer.notReady a {
	 color: #313335;
  background: inherit;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}
#infoButtonContainer {
	position: relative; 
	top: 36px;
}

.playing #playTwo; {
	 color: #313335;
  background: inherit;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

#playTwoContainer.playing {
  color: #a3a4a7 !important;
box-shadow: inset 5px 5px 7px #ccced0,
            inset -5px -5px 7px #ffffff;
}




#vetoText {
  color: #313335;
}
#vetoButton:hover #vetoButton a:hover, #vetoText:hover {
  text-decoration: none !important;
/*   background: #4e4c63; */
/*   background: red !important; */
}

/*
#vetoButton:focus,
#vetoButton:active:focus,
#vetoButton.focus {
	background: #4c078c;
}
*/





#containOverflow {
  position: absolute;
  left:0px;
  width: 100%;
  height: 300px;
}

p#vetoTally span {
  font-weight: bold;
}

#vetoTally {
  position: relative;
  top: -6px;
}

#vetoButton[type=text]:focus, #vetoButton:focus, #vetoButton[type=text]:focus, #vetoButton:focus {
  box-shadow: 0 0 48pt rgba(256, 256, 256, 1);
  border: none;
  outline: none;
  text-decoration: none;
}


#jukeBoxPage .container-fluid {
  padding: 0px;
}

#containAgain {
  position: absolute;
  width: 100%;
  overflow: auto;
  top: 393px; 
  left: 0px;


}

#containDOIT {
  position: relative;
  width: 100%;
  left: 0px;
  height: 500px;
  opacity: 0;
  overflow: hidden;
  
  
}

#DOIT {
	      	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

  border-radius: 150px;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 120px;
  animation: slide 20s linear 1s infinite;
/* position: relative;
  top:142px; */
  z-index: 7;
  opacity: 0;
}


@keyframes slide {
  0% { margin-left: -1200px; }
  50% { margin-left: 0px; }
  100% { margin-left: 1200px; }
}





#playlist {
  position: relative;
  top: 240px;
  margin-bottom: 48px;
  padding: 24px;
    padding-bottom: 148px;
}

#playlistContainer {
  border-radius: 12px;
  background: #f0f2f5;
box-shadow:  9px 9px 18px #d1d3d5,
             -9px -9px 18px #ffffff;
}

#playlistTitle {
  padding-top: 18px;
  padding-bottom: 12px
}

#playlistTitle img {
  height: 24px;
  display: inline;
  position: relative;
  bottom: 2px;
}
#playlistTitle h2 {
  text-transform: unset;
  letter-spacing: 1px;
  font-weight: bold;
  display: inline;
  padding-left: 3px;
  color: #313335;
}

.playlistItem {
  text-align: left;
  padding: 12px 24px;
  height: 84px;
}

.playlistItem:first-of-type {
  background: #ececec;
box-shadow: inset 6px 6px 12px #dadcdf,
            inset -6px -6px 12px #ffffff
}

.playlistItem .plUserImg {
  width: 60px;
  border-radius: 50%;
  position: relative;
  left: 0px;
  border: 3px solid rgba(256,256,256,.55);
  float: left;
}

.playlistItem .nameAndPosition {
margin-left: 12px;
  margin-top: -7px;
  float: left;
}

.nameAndPosition h3 {
  font-size: 12px;
  font-weight: bold;
  opacity: .5;
  margin-bottom: -18px;
}

.nameAndPosition h2 {
  font-size: 15px;
  text-transform: unset;
  letter-spacing: .05px;
  color: #313335;
  font-weight: bold;
  margin-top: 28px;
}



.time {
  text-align: right;
  margin-top: -5px;
}

.time h2 {
  font-size: 22px;
  text-transform: unset;
  letter-spacing: .05px;
  color: #313335;
  font-weight: bold;
}

.time h3 {
  font-size: 12px;
  font-weight: bold;
  opacity: .5;
  margin-top: 30px;
}


#jbLogoPageOneWrapper {
  width: 100%;
  text-align: center;
  position: relative;
  top: -20px;
  margin-bottom: -20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(256,256,256,.2);
}
#jbLogoPageOneWrapper #jukeBoxLogoPageOne {
  width: 90%;
}

/* 
#upNext {
  margin-top: 350px;
  position: relative;
  background: url(/images/bg.jpg) no-repeat center center; 
  background-size: 130% !important;
  left: 0px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 position: relative;
  top:15px;
} */
/* 
#UpNextWrapper {
  background: red !important;
  height: 500px;
  position: absolute;
  over
}

#upNextCell {
  width: 140px;
  text-align: center;
  float: left;
}

#upNextCell img {
  width: 100px;
  border-radius: 50%;
}

#upNextCell h4 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12pt;
  text-align: center;
  position: relative;

  color: #47267d;
}

.UpNextTitle {
  color: #4c078c;
position: relative;
font-size: 24pt;
text-transform: uppercase;
font-weight: 800;
  margin-bottom: 24pt;
} */




:root {
  --gutter: 15px;
}

.app {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: repeat(6, calc(40% - var(--gutter) * 2));
  grid-template-rows: minmax(100px, 1fr);
  
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
}

.upNextThumbnail {
  width: 75px;
  border-radius: 50%;
}


ul {
  list-style: none;
  padding: 0;
}



.app {
  width: 100%;


  overflow-y: scroll;
}

.hs > li,
.item {
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(256,256,256,.55);
  border-radius: 8px;
}

.app h1 {
      color: #fff;
    position: relative;
    font-size: 24pt;
    text-transform: uppercase;
    font-weight: 800;
}

.upNextName {
  font-size: 10pt;
}
#searchVideosTitle {
      color: #4c078c;
    position: relative;
    font-size: 24pt;
    font-weight: 800;
  margin-top:24pt;
}







.imgGrid {
	float: left;
}
.imgGrid img {
	margin-right:10px;
	margin-bottom:10px;
	padding:7px;
}
.imgGrid img:hover {
	border: 1px solid #afafaf;
}

.itemBox { padding-top:10px; padding-bottom:10px; padding-right:5px; padding-left:5px; border-bottom:1px solid #dcdcdc; }
.itemBox:hover {background: #f5f5f5; border-bottom: #f5f5f5 1px solid;}

a.videoPlayButton {
  float: left;
  position: relative;
}
a.videoPlayButton span {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("video-play.png") no-repeat;
  background-position: 50% 50%;
  opacity: 0.7;
  background-size: 30%;
}

a.videoStopButton {
  float: left;
  position: relative;
}
a.videoStopButton span {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("video-stop.png") no-repeat;
  background-position: 50% 50%;
  opacity: 0.7;
  background-size: 30%;
}




#vidWrap {
  overflow: hidden;
  overflow-y: hidden;
}

/* #player {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  margin-bottom: -6px;
}

#player iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  #player  iframe {
    height = 100 * (9 / 16) = 56.25;
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  #player  iframe {
    width = 100 / (9 / 16) = 177.777777;
    width: 177.78vh;
  }
} */

#jukeBoxPage .col-md-3 {
  width: 100%;
}


#please h1 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
}

.previewAddWrapper {
  display: block;
  float: left;
  margin-top: 16pt;
}

.previewVideo, .addToJukeBox {
  background: #4c078c;
  color: #ffffff;
  padding: 6pt;
  font-size: 10pt;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  top:12pt;
}

.itemBox p {
  margin-top: 6px !important;;
}
.previewVideo {
  margin-right: 12pt;
}
.itemBox p a {
  float: none; 
  color: #000;
  font-weight: 300;
  letter-spacing: .02em;
}
.itemBox {
  text-align: left;
}


#nowPlayingTab {
  position: absolute;
  bottom: 0px;
  left:0px;
  width:inherit;
  background: red;
  min-height:100px;
   background: none;
  color: #ffffff;
  width: 100%;
  margin-bottom: 0px;
  height: 100px;
}

/*
#nowPlayingTab:before {
   content: "";
      background-image: url('https://scontent-lax3-1.xx.fbcdn.net/v/t1.0-1/104463119_10156922703497434_3803575306110653290_n.jpg?_nc_cat=100&ccb=2&_nc_sid=7206a8&_nc_ohc=RO-iPrI7RtkAX_eocI-&_nc_ht=scontent-lax3-1.xx&oh=65bef79a76f7b3c8eb7a0491eed5a032&oe=5FC28CB1');
      background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center; 
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.30;
     height:100px;
   min-height:100px;
 animation: mymove 45s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes mymove {
  50% {background-position: bottom center;}
}
*/

#nowPlayingTab img {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 24px;
  position: relative;
  z-index: 9;


}

#nowPlayingTab h2 {
  font-size: 12px;
position: relative;
margin-top: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 24px;
  padding-top:7px;
  font-weight: bold;
  opacity: .75;
  border-top: 1px solid rgba(256,256,256,.5);
margin-bottom: -7px;
}

#nowPlayingTab p {
  font-size: 18px;
  font-weight: 100;
  top: 6px;
  left: 00px;
  position: relative;
}

#nowPlayingTab h1 {
  font-size: 24px;
  position: relative;
  top: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .1em;

}

#upNextTab {
  position: absolute;
  top:0px;
  right: 0px;
  background: none;
  width: 175px;
padding-top: 12px;
  height: 100%;
  overflow: hidden;
 -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}
#upNextTab h1 {
  font-size: 24px;
  
}

#upNextTab ul li {
  display: inline-block;
}

#upNextTab .upNextPerson img {
  border-radius: 50%;
  width: 24pt;
  position: relative;
z-index: 9;
}

#upNextTab {
  overflow: visible;
}
.animateSize {
  transform: scale(4);
  z-index: 9;
  position: relative;
}

.upNextPerson {
padding: 12px;
  padding-bottom: 5px;
  background: rgba(256,256,256,.5);
  margin: 6px;
  border-radius: 3px;
}




.upNextPerson p {
  color: #ffffff;
    padding-left: 6pt;
  font-size: 10pt;
  font-weight: bold;
        -moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

/*
.hideIt, .hideItText {
  opacity: 0;
}
*/


#nextTitle {
  color:#fff;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12pt;
  padding: 12px;
  padding-bottom: 0px;
}


li.hiddenTitle, #upNextTab ul li.hiddenTitle {
  display: none !important;
}
ul li.hiddenTitle {
  display: none  !important;
}


.form-inline label {
  display: none;
}



#qrCode {
  display: none;
}

#canvasWrap {
  position: absolute;
  bottom: 12px;
  right: 12px;
    z-index: 4 !important;
    width: 12%;
    object-fit: cover;
  text-align: center;
}


#plIDAdd {
  position: relative;
  z-index: 9;
  bottom: 7px;
  right: 0px;
  color: #fff;;
  font-weight: bold;
  font-size: 16px;
  font-weight: bold;
  background: rgba(256,256,256,.75);
}

@media (max-width:1542px) {
  #plIDAdd {
    font-size: 12px;
  }
}

@media (max-width:1162px) {
  #plIDAdd {
    font-size: 10px;
  }
}


#plIDAdd span {
  text-align: center;
    background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: auto;
    background-clip: border-box;
background-size: 200% 200%;
-webkit-animation: textAnimate 5s ease infinite;
-moz-animation: textAnimate 5s ease infinite;
animation: textAnimate 5s ease infinite;
-webkit-background-clip: text;
    background-clip: text;
-webkit-text-fill-color: transparent;

}


#canvas canvas {
  opacity: 1;
  position: relative;
  width: 100%;
  border: 3px solid #fff;
}

#QRID {
  color: #6c1e75;
  position: relative;
  z-index: 4;
  bottom: 10px;
  font-weight: bold;
  opacity: .7;
}


:root {
	--gradient-shadow: linear-gradient(
		45deg,
		#fb0094,
		#0000ff,
		#980bcc,
		#008aff,
		#c038b5,
		#fb0094,
		#3838d4,
		#af51ff,
		#00baff,
		#e71be0
	);
}


#canvas:before,
#canvas:after {
	content: "";
	position: absolute;
	top: -5px;
	left: -3px;
	background: var(--gradient-shadow);
	background-size: 400%;
	width: calc(100% + 6px);
	height: calc(100% + 2px);
	z-index: -1;
	animation: animate 20s linear infinite;
}

#canvas:after {
	filter: blur(60px);
}








#vetoesCounter {
  position: absolute;
  z-index: 5;
  bottom: 58px;
  right: 185px;
  background:  rgba(256,256,256, .75);
  color: #4c078c;
  border-radius: 3px;
}
#vetoesCounter:hover {
  cursor: pointer;
}

#vetoesCounter h1 {
  font-size: 18px;
  padding: 3px 6px;
}
#vetoesCounter i {
  font-weight: 300;
}

#vetoButton.vetoed {
  color: #a3a4a7 !important;
background: #f0f2f5;
box-shadow: inset 5px 5px 9px #e2e3e6,
            inset -5px -5px 9px #feffff;
}

.pagination li a {
  display: none;
}

#searchVideos {
  padding: 0px 3%;
  position: relative;
  top: 18px;
/* top: 150px; */
    -moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
margin-bottom: 148px;
}

#searchVideos h1 {
  color: #313335;
position: relative;
font-size: 24px;
font-weight: 800;
}

#videoResults {

  text-align: center;
  margin: 0 auto;
  margin-top: 126px;
}


.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.videoResult {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding-bottom: 48px;
}

.resultsTitle {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .5px;
  margin-bottom: 36px;
 padding: 3px 12px;
position: relative; 
top: -48px;
}

#play {
  background: #4c078c;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  padding: 16px;
  border-radius: 3px;
  border: none;
  font-size: 16px;
  display: none;
}




.addVideoButton b {
       background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: auto;
    background-clip: border-box;
background-size: 200% 200%;
-webkit-animation: textAnimate 5s ease infinite;
-moz-animation: textAnimate 5s ease infinite;
animation: textAnimate 5s ease infinite;
-webkit-background-clip: text;
    background-clip: text;
-webkit-text-fill-color: transparent;
}
.addVideoButton svg {
  position: relative;
  top: 2px;
  font-weight: bold;
}

.addVideoButton {
	      	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; 

  padding:18px 24px;
  font-size 15px;
  border: none;
margin-bottom: 36px;
  font-weight: bold;
  border-radius: 6px;
  opacity: 1;
/* box-shadow:       9px 9px 18px #d1d3d5,
             -9px -9px 18px #ffffff; */
  background: #f0f2f5;
  position: relative;
  color: #313335 !important;
  top: -40px;
  border-radius: 0px;

/*     -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
     background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: 200% 200%;
    -webkit-animation: textAnimate 5s ease infinite;
    -moz-animation: textAnimate 5s ease infinite;
    animation: textAnimate 5s ease infinite;
   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}

:root {
	--gradient-shadow: linear-gradient(
		45deg,
		#fb0094,
		#0000ff,
		#00ff00,
		#ffff00,
		#ff0000,
		#fb0094,
		#0000ff,
		#00ff00,
		#ffff00,
		#ff0000
	);
}



.addVideoButton:before,
.addVideoButton:after {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	background: var(--gradient-shadow);
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: animate 20s linear infinite;
 
  opacity: .55;
}

.addVideoButton:after {
	filter: blur(15px);
  opacity: .5;
}

@keyframes animate {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 300% 0;
	}
	100% {
		background-position: 0 0;
	}
}


.searchResult {
  box-shadow:       9px 9px 18px #d1d3d5,
             -9px -9px 18px #ffffff;
  background: transparent;
  margin-bottom: 30px; 
  position: relative;
  padding-bottom: 12px;
  
}


#announcement {
  padding: 0px 18px;
  margin-bottom: 60px;
}






#searchVideosInput, #announceTextField, #displayName, #userEmail {
  width: 100%;
  padding: 18px 24px;
  border: none;
  border-radius: 12px;
  margin-top: 12px;
  font-size: 18px;
  background: #f0f2f5;
  box-shadow: inset -5px 5px 10px #dfe1e4,
            inset 5px -5px 10px #ffffff !important;
            -webkit-appearance: none;
}


#displayName, #userEmail {
	width: 80%;
	color: #313335;
}





#announceTextField {
	border-radius:12px;
}



#userProfile {
	text-align: center;
	position: relative;
	margin: 0 auto;
  top: 48px;
}

#profileName {
	position: absolute;
	color: #313335;
	font-weight: bold;
	letter-spacing: .01px;
	font-size: 18px;
	top: 275px;
	width: 100%;
	text-transform: inherit;


}

#editIconWrapper {
	border-radius: 50%;
background: linear-gradient(145deg, #ffffff, #d8dadd);
box-shadow:  20px 20px 60px #ccced1,
             -20px -20px 60px #ffffff;
             width: 60px;
             height: 60px;
             border: 1px solid #ececec;
             margin: 0 auto;
             position: absolute;
             left: 50%;
             margin-left: -30px;
             top: 336px;
}

#editIconWrapper img {
	width: 48px;
	padding: 16px 12px 0px 12px;
}


#userProfile h1 {
  color:#313335;
  position: relative;
  font-size: 24px;
  font-weight: 800;
}



#addedMessage {
	position: fixed;
	background: rgba(256,256,256,.95);
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align: center;
	padding-top: 12%;
/* 	opacity: 0; */
	-webkit-transition: all 1.3s ease-in-out;
-moz-transition: all 1.3s ease-in-out;
-o-transition: all 1.3s ease-in-out;
transition: all 1.3s ease-in-out;
	
}

#addedMessage h1 {
	font-size: 30px;
	    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
     background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: 200% 200%;
    -webkit-animation: textAnimate 5s ease infinite;
    -moz-animation: textAnimate 5s ease infinite;
    animation: textAnimate 5s ease infinite;
   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  letter-spacing: 0px;
  margin-bottom: -18px;

}

#addedMessage h2 {
	font-size: 15px;
	color: #313335;
	padding-bottom: 12px;
	text-transform: unset;
	letter-spacing: 0px;
}

#addedMessage img {
	width: 100%;
}



*:focus {outline:none !important}





.video-foreground {
   position: relative;
  width: 100%;
/*   padding-bottom: 56.25%; */
}

#player {
  position: absolute;
  top: 0;
  left: 0;
  width: 1072px;
  height: 603px;
  border: 0;
  z-index: 10;
  
}



#homePage footer {
  color: #ffffff;
  z-index: 999;
  bottom: 0px;
  text-align: center;
  margin:  0 auto;
  width: 100%;
  background: #4c078c;
  padding: 12px;
}



#hostPage footer {
  position: relative;
  color: #ffffff;
  z-index: 999;
  bottom: 0px;
  text-align: center;
  margin:  0 auto;
  width: 100%;
  background: #4c078c;
  padding: 6px;
   background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
   background-size: 200% 200%;
   -webkit-animation: textAnimate 5s ease infinite;
   -moz-animation: textAnimate 5s ease infinite;
   animation: textAnimate 5s ease infinite;
}



footer a {
  color: #fff;
  text-align: center;
}

.modal {
  padding: 48px !important;
}

#ex1 h1, #ex1 h2 {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #313335;
  margin-bottom: 0px;
}

#ex1 a {
  color: rgba(0,0,0,.5);
}
#ex1 p {
  font-size: 12px; line-height: 1.2;
}

.modal a.close-modal {
  top: 12.5px !important;
  right: 12.5px !important;
}
.video {
  z-index: 0 !important;
}

.blocker, .modal {
  z-index: 999 !important;
}


#wrapAllButFooter {
	height: 100%;
}	


#spinningRecord, #shadow, #jukeBoxLogo, #arm {
  display: none;
}




.getPlayerControls {
  z-index: 10 !important;
  width: 70% !important;
  height:  80vh !important;
  margin-left: 0px !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -35% !important;
  -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 18px 5px 3px rgba(255,255,255,0); 
      box-shadow: 0 0 48px 16px rgba(256,256,256,.25);
}





.gradient {
/*     background: linear-gradient(270deg, #60209d, #205d9d, #39135d, #8734d6); */

background: linear-gradient(270deg, rgba(96,32,157,.65), rgba(32,93,157,.65), rgba(57,19,93,.65), rgba(135,52,214,.65));
    background-size: 800% 800%;

    -webkit-animation: gradient 30s ease infinite;
    -moz-animation: gradient 30s ease infinite;
    -o-animation: gradient 30s ease infinite;
    animation: gradient 30s ease infinite;
}

@-webkit-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}





#speechControlshidden {
  display: none;
}


#sSelect {
  display: block;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  color: #444;
  line-height: 1.3;
  padding: .6em 1.4em .5em .8em;
  width: 75%;
  
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 24px;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: .5em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
    for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
    
  */
  background-image: url('https://cdn.iconscout.com/icon/free/png-256/down-arrow-16-460295.png'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right .7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 1.5em auto, 100%;
}
/* Hide arrow icon in IE browsers */
#sSelect::-ms-expand {
  display: none;
}
/* Hover style */
#sSelect:hover {
  border-color: #888;
}
/* Focus style */
#sSelect:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222; 
  outline: none;
}

/* Set options to normal weight */
#sSelect option {
  font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] #sSelect, :root:lang(ar) #sSelect, :root:lang(iw) #sSelect {
  background-position: left .7em top 50%, 0 0;
  padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
#sSelect:disabled, #sSelect[aria-disabled=true] {
  color: graytext;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

#sSelect:disabled:hover, #sSelect[aria-disabled=true] {
  border-color: #aaa;
}





#announcements {
  position: absolute;
  z-index: 30;
  top:0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(256,256,256,.85);
    display: none;
}

#announceUserImage {
  border-radius: 50%;
  border: 12px solid rgba(256,256,256,.4);
  width: 30%;
  left: 5%;
  position: absolute;
  top: 50%;
  margin-top: -15%;
  z-index: 3;
}

#announceUserImageGradient {
  border-radius: 50%;
  width: 37%;
  left: 1%;
  position: absolute;
  top: 40%;
  margin-top: -13%;
  z-index: 2;
  opacity: .7
}


#messageArea {
  position: absolute;
  left: 37.5%;
  width: 55%;
  top: 20%;
  border-bottom: 2px solid rgba(0,0,0,.15);
  padding-bottom: 24px;
}

#announceMic {
  height: 200px;
  float: left;
}
#announcements h2, #announcements h1 {
  left: 24px;
  position: relative;
  top: 83px;
}

#announcements h2 {
  text-transform: inherit !important;
  font-weight: light;
  letter-spacing: 1px;
  font-size: 30px;
  position: relative;
  margin-bottom: -6px;
  left: 60px;
  color: #313335
}

#announcements h2 span {
  font-weight: bold;
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
     background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: 200% 200%;
    -webkit-animation: textAnimate 5s ease infinite;
    -moz-animation: textAnimate 5s ease infinite;
    animation: textAnimate 5s ease infinite;
   -webkit-background-clip: text;
}

#announcements h1 {
  font-weight: bold;
  color: #313335;
  font-size: 60px;
  text-transform: uppercase;
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
     background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: 200% 200%;
    -webkit-animation: textAnimate 5s ease infinite;
    -moz-animation: textAnimate 5s ease infinite;
    animation: textAnimate 5s ease infinite;
   -webkit-background-clip: text;
}

@media (max-width:1111px) {
  #announcements h1 {
    font-size: 36px;
    top: 106px;
  }
}

@media (max-width:722px) {
  #announcements h1 {
    font-size: 30px;
    top: 119px;
  }
    #announcements h2 { 
    font-size: 24px;   
      top: 110px;
  }
  #announceMic {
    height: 150px;
    top: 50px;
    position: relative;
  }
  #messageArea {
 
  border-bottom: 3px solid rgba(256,256,256,.25);
  padding-bottom: 60px;
}
}


#announcements p {
  position: absolute;
  width: 100%;
  padding-bottom: 12px;
  color: #313335;
  font-size: 4vw;;
  font-weight: bold;
  top: 115%;
  letter-spacing: -1px;
  line-height: 1.2;
}


.announcementLayer {
	opacity: 0;
	        	-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.announcementLayer.currentAnnouncement {
	opacity: 1;
}





/* Clear inputs */


.clearable-input {
  position: relative;
  display: block;
}
.clearable-input > input {
  padding-right: 44px;
}
.clearable-input >[data-clear-input] {
  display: none;
  position: absolute;
  height: 24px;
  width: 24px;
  top: 30px;
  right: 20%;
  font-weight: bold;
  font-size: 1.4em;
  padding-top: 3px;
  line-height: 1em;
  cursor: pointer;
  color: #4c078c;
  background: #f0f2f5 !important;
  border-radius: 50%;
  font-size: 18px;

}
.clearable-input > input::-ms-clear {
  display: none;
}







#country {
  background-color: none;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 20px #155;
  border-radius: 20px;
  border: 1px solid #111;
  overflow: hidden;
  top: 0px;
  left: 0px;
  z-index: 2;
  position: absolute;
   display: none;
}

#country #countryBoys {
  display: block;
 overflow: hidden;
  z-index: 1;
  width: 40%;

border-radius: 20px;
  background-color: #999999;
  box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
  position: fixed;
  -webkit-animation: moveX 8s linear 0s infinite alternate, moveY 12.4s linear 0s infinite alternate;
  -moz-animation: moveX 8s linear 0s infinite alternate, moveY 12.4s linear 0s infinite alternate;
  -o-animation: moveX 8s linear 0s infinite alternate, moveY 12.4s linear 0s infinite alternate;
  animation: moveX 8s linear 0s infinite alternate, moveY 12.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 60%; }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: 60%; }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: 60%; }
}
@keyframes moveX {
  from { left: 0; } to { left: 60%; }
}

@-webkit-keyframes moveY {
  from { top: 0; } to { top: 46%; }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: 46%; }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: 46%; }
}
@keyframes moveY {
  from { top: 0; } to { top: 46%; }
}






.loading {
  width: 20%;
  position: absolute;
  z-index: 9;
  left: 50%;
  margin-left: -10%;
  top:25%;
  opacity: .5;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.videoResult {
  opacity: 0;
z-index: 10
}



/*

.addVideoButton, #searchVideosButton, #play {
  color: #313335;
  font-weight: bold;
  text-transform: uppercase;
  padding: 16px;
  border-radius: 3px;
  border: none;
  font-size: 16px;
  border-radius: 15px;
background: #ececec;
border-radius: 15px;
background: #ececec;
border-radius: 15px;
background: #ececec;
box-shadow:  10px 10px 20px #afafaf,
             -10px -10px 20px #ffffff;
  border: 2px solid #fff;
}

body {
	background: #ececec;
}
*/





.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}






.rotateSlow {
  animation: rotation 12s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}



@-webkit-keyframes pulse-grow-on-hover {
  to {
    -webkit-transform: scale(0);
    transform: scale(0);
    
  }
}
@keyframes pulse-grow-on-hover {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
/* #userImgGradient {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#userImgGradient {
  -webkit-animation-name: pulse-grow-on-hover;
  animation-name: pulse-grow-on-hover;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
} */


#terms {
	position: absolute;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	bottom: 96px;
	border-top: 1px solid rgba(0,0,0, .15);
	padding-top: 18px;
}

#terms a {
	color: #313335;
	letter-spacing: .01px;
	font-size: 12px;
	opacity: .75;
	padding-left: 12px;
	padding-right: 12px;
	font-weight: 100;
}

#jukeBoxPage footer {
  position: fixed;
  bottom: 0px;
  z-index: 99;
background: #d4d5d8;
  width: 100%;
  padding: 6px 0px;
  text-align: center;
  margin: 0 auto;
  border-top: 1px solid rgba(0,0,0,.03);
  overflow: hidden;

}
#footerContainer {

}

.footerItem img {
  height: 18px;
}

.footerItem h3 {
  font-size: 12px;
  font-weight: bold;
  margin-top: 3px;
  color: #313335;
}

.footerItem {
  padding: 12px 0px 0px 0px;
float: left;
  text-align: center;
  border-radius: 6px;
  background: #e8eaed;
  width: 20%;
background: #d4d5d8;
box-shadow:  7px 7px 14px #b0b2b4,
             -7px -7px 14px #e0e2e6;
       	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#jukeboxFooter {
  margin-left: 10%;
}
#searchFooter {
  margin: 0% 10%;
}
#announceFooter {
  margin-right: 10%;
}

.footerCurrent {
	background: #202325;
background: #c8cacd;
box-shadow: inset 8px 8px 16px #bbbbbe,
            inset -8px -8px 16px #edeff2;
}



.hide {
	display: none;
}






#userWrapper {
		border-radius: 12px;
background: #f0f2f5;
 background-image: url("https://www.fartable.com/images/selfie.gif");
    background-repeat: no-repeat;
    background-position: 50% 20%;
    background-repeat: no-repeat;
    background-size: 75px;
            width: 180px;
            margin-top: 0px;
}



#uploadBoxText {
	position: relative;
	top: 36px;
	line-height: 18px;
	z-index:999;
	width: 150%;
	margin-left: -25%;;
	text-align: center;
    letter-spacing: 0px;

    font-weight: bold;
    font-size: 12px;
    
    color: #313335;
    opacity: .75;
}

#uploadBoxText span {
	text-transform: uppercase;
	display: block;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 0px;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
     background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: 200% 200%;
    -webkit-animation: textAnimate 5s ease infinite;
    -moz-animation: textAnimate 5s ease infinite;
    animation: textAnimate 5s ease infinite;
   -webkit-background-clip: text;

}

#userWrapper {
	border-radius: 50%;
	position:relative;
	z-index: 2;
}

#userImgLargeGradientTwo, #userImgLargeCircleTwo {
	top: 202px;
	z-index:1;
}

#userImgLargeGradientTwo, #userImgLargeCircleTwo {
	width: 220px;
	height: inherit;
	top: 197px;
	left: 50%;
     margin-left: -110px;
    
}

#userImgLargeGradientTwo {
	 opacity: 1;
	 top: 189px;
	 opacity: .35;
}

#userImgLargeCircleTwo {
    width: 200px;
    margin-left: -100px;
    height: inherit;
	
}

/* .slim-file-hopper {
	width: 400px !important;
} */


#homePageTop input::placeholder {
 color: rgba(256,256,256,.5);
}

#uploadBoxText span {
  padding: 3px !important;
}

#vetoesCounter .gradient:hover {
	cursor: pointer;
}


.restrict {
	display: none;
}

#userImageWrapGradient {
  display: none;
}


 #vetoesCounter h1.gradient {
  background: rgba(256,256,256,.85);
}

#mobileMessage {
  color: rgba(256,256,256,.75);
  position: relative;
  top: 150px;
  width: 300px;
  margin: 0 auto;
  font-weight: 100;
  border-top: 1px solid rgba(256,256,256,.25);
  padding-top: 12px;
}



html {
  height: 100%;
}

footer {
   position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}

#homepage, #homepage .container-fluid {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

#hero {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

#homepageScanImage {
  width: 140px;
  left: 50%;
  margin-left: -70px;
  position: relative;
  bottom: 120px;
  right: 0px;
  opacity: .75;
}



#troubleshoot {
  border-bottom: 1px solid rgba(0,0,0,.5);
  padding-bottom: 12px;
}
#troubleshoot h2 {
  font-size: 24px;
  letter-spacing: .03em;
  margin-bottom: 12px;
  margin-top: 0px;
   background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: auto;
    background-clip: border-box;
background-size: 200% 200%;
-webkit-animation: textAnimate 5s ease infinite;
-moz-animation: textAnimate 5s ease infinite;
animation: textAnimate 5s ease infinite;
-webkit-background-clip: text;
    background-clip: text;
-webkit-text-fill-color: transparent;
}
#troubleshoot p {
  font-size: 16px;
}



#vetoFix, #pageRefresh {
	font-weight: bold;
  letter-spacing: .02em;
  color: #4c078c !important;
            	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
   background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: auto;
    background-clip: border-box;
background-size: 200% 200%;
-webkit-animation: textAnimate 5s ease infinite;
-moz-animation: textAnimate 5s ease infinite;
animation: textAnimate 5s ease infinite;
-webkit-background-clip: text;
    background-clip: text;
-webkit-text-fill-color: transparent;
}
#vetoFix {
  display: inline-block;
  margin-bottom: 24px;
}

#vetoFix:hover, #pageRefresh:hover {
	cursor: pointer;
  text-decoration: none;
  opacity: .75;
}

#accessControls {
  display: inline-block;
  margin-top: 24px;
}


#gasOverlay {
  position: absolute;
  z-index: 2;
  width: 25%;
}

#gasOverlay video {
  width: 100%;
}


/* come back */
/*
img {
	display: none !important;
}
*/

#vetoScreenWrap {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

#vetoScreenText {
  width: 300px;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  bottom: 75px;
}

#vetoScreenText #accessOptions {
  font-weight: 100;
  line-height: 1.3;
}

#vetoScreenText #arrowDon {
  width: 100px;
}
#vetoScreenMenuIcon {
  width: 50px;
  position: relative;
  top: -12px;
}

#vetoScreenLogo {
 height: 15vh;
  margin-bottom: 12px;
}

#vetoWord {
  font-size: 30px;
  font-weight: bold;
  position: relative;
  top: 3px;
  background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: auto;
    background-clip: border-box;
background-size: 200% 200%;
-webkit-animation: textAnimate 5s ease infinite;
-moz-animation: textAnimate 5s ease infinite;
animation: textAnimate 5s ease infinite;
-webkit-background-clip: text;
    background-clip: text;
-webkit-text-fill-color: transparent;
  margin-bottom: -12px;
}

html {
  scroll-behavior: smooth;
}

#hostControls p {
  display: inline;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#hostControls #rightSide p {
  font-size: 11px;
}

#hostControls span {
  padding: 0px 8px;
  font-weight: 100;
  font-size: 8px;
  position: relative;
  bottom: 2px;
  color: transparent;
}

#hostControls #rightSide span {
  padding: 0px 4px;
  bottom: 2px;
  color:  inherit;
}
#leftSide {

}
#rightSide {
}

#hostControls p, #hostControls p a {
          	-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
  color: rgba(256,256,256,.75);
}
#hostControls p:hover, #hostControls p a:hover {
  cursor: pointer;
  color: rgba(256,256,256,1);
  text-decoration: none;
}
#hostControls .italicClass {
  font-weight: 100;
  font-style: italic;
  text-transform: inherit;
}

.topContentAddClass {
  background: rgba(0,0,0,.75);
  height: 100%;
  z-index: 9 !important;
  position: relative;
}

.videoBackgroundAddClass {
  z-index: 10 !important;
}


:root {
	--gradient-shadow: linear-gradient(
		45deg,
		#fb0094,
		#0000ff,
		#980bcc,
		#008aff,
		#c038b5,
		#fb0094,
		#3838d4,
		#af51ff,
		#00baff,
		#e71be0
	);
}


#userImageWrap:before,
#userImageWrap:after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	background: var(--gradient-shadow);
	background-size: 400%;
	width: calc(100% + 0px);
	height: calc(100% + 0px);
	z-index: -1;
	animation: animate 20s linear infinite;
  border-radius:  50%;
}

#userImageWrap:after {
	filter: blur(20px);
}

@keyframes animate {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 300% 0;
	}
	100% {
		background-position: 0 0;
	}
}

#hostControls p svg {
  position: relative;
  top: 4px;
  padding-right: 3px;
}

#accessOptions b {
     background: linear-gradient(270deg, #953497, #568fe6, #774ab2, #2e2c84);
    background-size: auto;
    background-clip: border-box;
background-size: 200% 200%;
-webkit-animation: textAnimate 5s ease infinite;
-moz-animation: textAnimate 5s ease infinite;
animation: textAnimate 5s ease infinite;
-webkit-background-clip: text;
    background-clip: text;
-webkit-text-fill-color: transparent;
}


.inlineClass {
	display: inline;
}
.hideOnStandard {
	display: none;
}

#the-count_commentTwo {
  position: absolute;
  -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
  left: 78%;
  margin-top: -73px;
  text-align: right;
  opacity: 0;
}







@keyframes addPersonAnimation{
  40%{
transform: scale(4); /* W3C */
-webkit-transform: scale(4); /* Safari & Chrome */
-moz-transform: scale(4); /* Firefox */
-ms-transform: scale(4); /* Internet Explorer */
-o-transform: scale(4); /* Opera */
  }
}



.animateGrow {
  animation: addPersonAnimation 2s;
}



#wrapTitleAndSubtitle {
  padding: 12px;

}

.limitedAccess {
  margin-top: 36px;
  color: #623286 !important;
  text-align: center;
  font-size: 18px !important;
  
}


.goodNews {
  font-weight: bold;
  margin-top: -12px;

  font-size: 16px;
  text-align: center;
}

.emailRequest {
  font-style: italic;
  margin: 0 auto;
  text-align: center;
  padding-top: 8px;
  width: 300px;
}