.coolshadow, input{
box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
}

.g-recaptcha {
    display: inline-block;
    margin-top: 8px;
}

.center{
  text-align: center;
}

.bold{
    font-weight: bold;
}



body{
	padding-top: unset;
}

.listofplaylists a:hover{
	color: unset;
}

a{
	color: unset;
}

.bluebutton, .bluebutton:hover{
	background-color: #005c97 !important;
	border-color: #005c97 !important;
}

.grayheadline{
	color: #3d3d3d !important;
}

.py-5{
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

  #mobileimage {
    display: none;
  }
  #desktopimage{
  	display: block;
  }

@media only screen and (max-width: 992px) {
  #mobileimage {
    display: block;
  }
  #desktopimage{
  	display: none;
  }
}

#hero{
  background: url(/verselocker/collections/img/banner-4.png) no-repeat; background-size: 100% 80%
}

#about{
  background: url(/verselocker/collections/img/service-bg.svg) no-repeat; background-size: cover
}

input{
   width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  
}

.errormessage, #passwordalert{
  color: red;
}


.float-in-right {
    transform: translateX(100%); /* Start off-screen to the right */
    animation: floatIn 2s forwards; /* Adjust time as needed */
}

@keyframes floatIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

h1 {
    opacity: 0; /* Initially make the text transparent */
    animation: slideAndFadeIn 1.0s ease-in-out forwards; /* Apply animation */
    transform: translateX(-50px); /* Initially position the element off-screen to the left */
}

@keyframes slideAndFadeIn {
    from {
        opacity: 0; /* Start with full transparency */
        transform: translateX(-50px); /* Start off-screen to the left */
    }
    to {
        opacity: 1; /* End with full opacity */
        transform: translateX(0); /* Slide in from the left */
    }
}

.app_graphics img{
  margin-top: 5px !important;
  display: inline-block;
  margin: auto;
}




 .app_graphics{
  text-align: center;
}



.rating{
  max-width: 100px;
  display: block;
  margin: auto;
  margin-top: 15px;
}