/*

    GENERAL

------------ */
.lights-out{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 99;
    background-color:var(--lights-out-color);
    display:none;
}

/*

    IMAGE BACKGROUND

-------------------- */
.bg-center,
.bg-left,
.bg-bottom,
.bg-top{
	background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-repeat:no-repeat;
}
.bg-left{
	background-position: left center;
}
.bg-top{
	background-position: top center;
}
.bg-bottom{
	background-position: bottom center;
}
.bg-contain{
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    -o-background-size: contain;
    background-repeat:no-repeat;
}

/*

    ANIMATION

------------- */
a, 
button,
.animo{
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

/*

    PLACEHOLDER

--------------- */

/* Chrome, Safari, newer versions of Opera and Edge */
::-webkit-input-placeholder {
    color: #ff0000;
}

/* Firefox 19+ */
::-moz-placeholder {
    color: #ff0000;
    opacity: 1;  /* Firefox lowers the opacity of the placeholder by default */
}

/* Internet Explorer 10+ */
:-ms-input-placeholder {
    color: #ff0000;
}

/* Standard syntax for most modern browsers */
::placeholder {
    color: #ff0000;
}

/*

    NO SCROLLBAR

----------------- */
.hidden-scrollbar {
  overflow: scroll; /* Enable scrolling */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for WebKit-based browsers (Chrome, Safari) */
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

/* For Edge and IE */
@supports (-ms-overflow-style: none) {
  .hidden-scrollbar {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }
}

/* For Firefox */
@supports (scrollbar-width: none) {
  .hidden-scrollbar {
    scrollbar-width: none; /* Firefox */
  }
}


/*

    NOTIFICATIONS

----------------- */
.notifications-container{
    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99;
    overflow-y: scroll;
}
.notification{
    position: absolute;
    top:30px;
    padding:30px;
    background-color:#fff;
    border-radius: 5px;
    width:300px;
    left:50%;
    margin-left:-150px;
    text-align: center;
    font-size:16px;
    line-height: 1.4;
}
.btn-close-notification{
    position: absolute;
    top:0;
    right:0;
    font-size:18px;
    line-height: 1;
    padding:8px 10px;
    color:#555;
}
.btn-close-notification:hover{
    color:#000;
}
.notification.success{
    background-color:#eff7e3;
}
.notification.alert{
    background-color:#f7e3e3;
}
@media(min-width:768px){
    .notification{
        padding:45px;
        width:500px;
        margin-left:-250px;
    }
    .btn-close-notification{
        font-size:20px;
        padding:13px 15px;
    }
}
@media(min-width:1200px){
    .notification{
        top:60px;
    }
}