/*Front-end CSS code*/
.wrapper {
 position: relative;
 width: 960px;
 margin: 0 auto;
 }
 h1 {
 color: #fff;
 }
 .block {
 display: block;
 }
 .hide {
 display: none;
 }
 #notification-bar {
 position: fixed;
 width: 100%;
 top: 0;
 background-color: #444;
 border-bottom: 1px solid #333;
 clear: both;
 z-index: 999;
 }
 #notification-bar .container {
 width: 800px;
 height: 45px;
 margin: 0 auto;
 padding: 5px;
 }
 #notification-bar .fa-gift,
 #notification-bar .fa-newspaper-o {
 display: inline-block;
 font-size: 45px;
 float: left;
 margin-right: 20px;
 color: #ffbe03;
 }
 #notification-bar p {
 display: inline-block;
 font-size: 18px;
 font-weight: 300;
 float: left;
 margin: 0 25px 0 0;
 padding: 0;
 line-height: 45px;
 color: #fff;
 }
 
 .fa-times-circle {
 float: right;
 margin-top: 8px;
 font-size: 30px;
 color: #222;
 text-align: right;
 z-index: 9;
 cursor: pointer;
 }
 .fa-times-circle:hover {
 color: #fff;
 }
 
 /* Initial bar stage  */
 input[type=checkbox] ~ #notification-bar {
 /* Animation */
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 /* Start animation to go down */
 -webkit-animation-name: goDown;
 animation-name: goDown;
 }
 /* Close the bar */
 input[type=checkbox]:checked ~ #notification-bar {
 /* Animation */
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 /* Start animation to go up */
 -webkit-animation-name: goUp;
 animation-name: goUp;
 }
 input[type=checkbox] ~ .fa-long-arrow-down {
 position: absolute;
 display: none;
 right: 10%;
 cursor: pointer;
 }
 input[type=checkbox]:checked ~ .fa-long-arrow-down {
 display: block;
 top: -35px;
 padding: 10px;
 font-size: 50px;
 color: #ffbe03;
 background-color: #444;
 /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-radius: 5px;
 /* Firefox 1-3.6 */
 -moz-border-radius: 5px;
 /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-radius: 5px;
 }
 input[type=checkbox]:checked ~ .fa-long-arrow-down:hover {
 top: -15px;
 color: #ccc;
 }
 /* ANIMATION for go up */
 @-webkit-keyframes goUp {
 0% {
 -webkit-transform: none;
 transform: none;
 }
 100% {
 -webkit-transform: translate3d(0, -100px, 0);
 transform: translate3d(0, -100px, 0);
 }
 }
 @keyframes goUp {
 0% {
 -webkit-transform: none;
 transform: none;
 }
 100% {
 -webkit-transform: translate3d(0, -100px, 0);
 transform: translate3d(0, -100px, 0);
 }
 }
 /* ANIMATION for go down */
 @-webkit-keyframes goDown {
 0% {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 }
 100% {
 -webkit-transform: none;
 transform: none;
 }
 }
 @keyframes goDown {
 0% {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 }
 100% {
 -webkit-transform: none;
 transform: none;
 }
 }
 .find-me {
 position: relative;
 margin: 100px;
 color: #fff;
 }
 .find-me a {
 color: #fff;
 }

/* Button Styles */
.fm-button {
 display: inline-block;
 padding: 12px 24px;
 text-decoration: none;
 border: none;
 border-radius: 5px;
 font-size: 16px;
 font-weight: 500;
 text-align: center;
 cursor: pointer;
 transition: all 0.3s ease;
 min-width: 120px;
}

.fm-button:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#notify-2 {
    display: none;
}