/* BEGIN CUSTOM SETTINGS */
body, h1, h2, h3, h4, h5, h6 {
    font-family: Poppins;
}
a{ 
    color: lightblue;
    -webkit-transition: color 0.3s, text-decoration 0.3s;
    transition: color 0.3s, text-decoration 0.3s;
}
a:hover {
    color: orange;
    text-decoration: none;
}            
.login .content {
    min-width: 450px;
    /*width: 450px;*/
    width: unset;
    margin: 0px auto 0px;
    padding: 10px 40px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 20px 10px 80px 0px rgba(200, 200, 200, 0.6);
    -moz-box-shadow: 20px 10px 80px 0px rgba(200, 200, 200, 0.6);
    box-shadow: 20px 10px 80px 0px rgba(200, 200, 200, 0.6);
    border: 1px solid rgba(255,255,255,0.5);    
    -webkit-transition: -webkit-box-shadow 0.5s, background-color 0.5s, border 0.5s;
    -webkit-transition: -moz-box-shadow 0.5s, background-color 0.5s, border 0.5s;
    -webkit-transition: box-shadow 0.5s, background-color 0.5s, border 0.5s;
    transition: -webkit-box-shadow 0.5s, background-color 0.5s, border 0.5s;
    transition: -moz-box-shadow 0.5s, background-color 0.5s, border 0.5s;
    transition: box-shadow 0.5s, background-color 0.5s, border 0.5s;
}
.login .content.loginform.resetpass h3{
    color:white;
}
.login .content.loginform.resetpass{
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255,255,255,1);    
}
.login .content.loginform.resetpass:hover{
    background-color: rgba(0, 0, 0, 0.5);
    border: 4px solid orangered;    
}

.login .content.loginform{
    width: 450px;
}
.login .content:hover {
    -webkit-box-shadow: 0px 0px 80px 0px rgba(248, 198, 249, 0.6);
    -moz-box-shadow: 0px 0px 80px 0px rgba(248, 198, 249, 0.6);
    box-shadow: 0px 0px 80px 0px rgba(248, 198, 249, 0.6);
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(248, 198, 249, 0.5); 
}
.login .content h3 {
    font-size: 1.9rem;
    font-weight:200 !important;
    color:#ffd7ff;
}
.login .content h4 {
    font-size: 1.1rem;
    font-weight:200 !important;
    color:#ffd7ff;
    margin-top: -7px;
}
.login .content .forget-password {
    color: rgba(255,255,255,0.5);
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
 }
.login .content .forget-password:hover {
    color: rgba(255,255,255,0.7); 
}
.login .copyright {
    color: #ffd7ff;
    position: relative;
 }
 .login .content .form-actions {
    border-bottom: 0px;
}
.login .content .form-control {
    color: #555;
}
.login .content .forget-form, .login .content .login-form {
	color: #ccc;
}
.login .logo{
    position: relative;
}
.custom-btn-login{
    background-color: dimgray;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;    
}
.custom-btn-login:hover{
    background-color: purple;
    border: 1px solid white;    
    color: white;
}
/* END CUSTOM SETTINGS */

/* START LAYOUT SETTINGS */
/* RESPONSIVE MANIPULATIONS */
@media (min-width: 768px) {
	.display-show-desktop{
		display:""!important;
	}
	.display-hide-desktop{
		display: none!important;
	}	
}

@media (min-width: 768px) and (max-width: 991px) {
	.display-show-tablet{
		display:""!important;
	}
	.display-hide-tablet{
		display: none!important;
	}    
}

@media (max-width: 991px) {  
    html, body{
        font-size: 11px !important;
    }
    #login_div_list_modal img {
        max-height: 130px !important;
    } 
    #login_div_list_modal{
        margin: 0% 10% !important; 
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);          
    }  
    .login .copyright {
        font-size: 1rem;
    }
    .login .content .form-control {
        height: 3rem;
    }    
    img {
        max-height:60px !important;
    } 
    .login .logo {
        margin: 10px auto 0;
    }
    .login .content .form-title {
        margin-bottom: 10px;
    }
    .login .content .form-actions {
        padding: 15px 30px;
    }
    .login .content .forget-password {
        font-size: 1.1rem;
        margin-top: 15px;
    }
    .btn-group-sm>.btn, .btn-sm {
        font-size: 1rem;
    }
    .form-control, output {
        font-size: 1.3rem;
    }     
    .landing-favorites-div{
        margin:10px !important;
    }    
    .landing-favorites-div img {
        height: inherit;
    } 
    .landing-buttons{
        max-height: 8rem !important;
    }
    .login .content-landing .landing-buttons:hover{
        max-height: 9rem !important;
    }                                
} 

@media (min-width: 581px) and (max-width: 767px) { 
	.page-footer {
	    font-size: 1rem;
	}
	.display-show-tablet{
		display:""!important;
	}
	.display-hide-tablet{
		display: none!important;
    }
} 

@media (max-width: 580px) {
	.login .content h3 {
	    font-size: 1.8rem;
	}	
	.display-show-mobile{
		display:""!important;
	}
	.display-hide-mobile{
		display: none!important;
    }
    .login .content {
        padding: 0px 40px 0px;
    }
    .login .content .form-actions {
        padding: 0px 30px 20px;
    }        	
}

canvas {
  display: block;
  vertical-align: bottom;
}
#particles-js {
  top:0px;    
  position: absolute;
  width: 100%;
  height: 100%;  
}
.cb-slideshow,
.cb-slideshow:after { 
    color: transparent;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1; 
    background: transparent url(../../../assets/global/img/pattern/pattern.png) repeat top left; 
    filter: brightness(0.5);
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../../../assets/global/img/pattern/pattern.png) repeat top left;
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 60s linear infinite 0s; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../../../assets/global/img/bg/1.jpg);
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../../../assets/global/img/bg/2.jpg);
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../../../assets/global/img/bg/3.jpg);
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../../../assets/global/img/bg/4.jpg);
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../../../assets/global/img/bg/5.jpg);
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../../../assets/global/img/bg/6.jpg);
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(7) span { 
    background-image: url(../../../assets/global/img/bg/7.jpg);
    animation-delay: 36s; 
}
.cb-slideshow li:nth-child(8) span { 
    background-image: url(../../../assets/global/img/bg/8.jpg);
    animation-delay: 42s; 
}
.cb-slideshow li:nth-child(9) span { 
    background-image: url(../../../assets/global/img/bg/9.jpg);
    animation-delay: 48s; 
}
.cb-slideshow li:nth-child(10) span { 
    background-image: url(../../../assets/global/img/bg/10.jpg);
    animation-delay: 54s; 
}

@keyframes imageAnimation { 
	0% {
	    opacity: 0;
        transform: scale(1) rotate(1deg);
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05) rotate(1.5deg);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1) rotate(2deg);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.1) rotate(2deg);
	}
	100% { 
	   opacity: 0;
       transform: scale(1) rotate(2.2deg); 
    }
} 
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}
/* END LAYOUT SETTINGS */

/* LANDING PAGE */
.login .content-landing{
    max-width: 90vw;
    width: fit-content;
    width: -moz-fit-content;
    background-color: rgba(0, 0, 0, 0.5);
    margin-top:5px;
    transition: all 0.3s linear;
}
.landing-favorites-div{
    text-align: center;
    margin:15px;
    margin-top: 0px;
}
.landing-header{
    text-align: center;
    color: beige;    
}
.landing-buttons{
    opacity: 0.8;
    /*width: 9rem;*/
    max-height: 9rem;
    transition: all 0.3s linear;
}
.login .content-landing:hover{
    background-color: rgba(0, 0, 0, 0.5);
}
.login .content-landing:hover .landing-buttons{
    opacity: 1;
    filter: hue-rotate(170deg);
}
.login .content-landing .landing-buttons:hover{
    opacity: 1;
    /*width: 11rem;*/
    /*transform: scale3d(1.2,1.2,1);*/
    max-height: 10rem;
    filter: hue-rotate(110deg);
    transform: matrix3d(1,0,0.00,0,0.00,1,0.00,-0.0007,0,0,1,0,0,0,0,1);
}
.landing-buttons.sub{
    width: 6.5rem;
    height: 6.5rem;
}
.landing-buttons.sub:hover{
    filter: hue-rotate(0deg);
    opacity: 1;
}
.landing-buttons-pending.sub{
    opacity: 0.8;
    width: 6.5rem;
    height: 6.5rem;
    filter: grayscale(100%);
    transition: all 0.3s linear;
}
.landing-buttons-pending{
    opacity: 0.8;
    width: 8rem;
    filter: grayscale(100%);
    transition: all 0.3s linear;
}
.landing-buttons-pending:hover{
    opacity: 1;
    filter: grayscale(80%);
}
.login .content-landing h3,.login .content-landing h4 {
    transition: all 0.5s ease-in-out;
}
.login .content-landing:hover h3,.login .content-landing:hover h4 {
    color:aliceblue;
}
.landing-logout{
    position: absolute;
    top: 20px;
    right: 16px;
}
.landing-logout a{
    color: gray;    
}
.landing-logout a:hover{
    transition: all 0.3s ease-in-out;
    color: orangered;    
}
.landing-image{
    position: absolute;
    top: 16px;
    left: 16px;
}
.login .content .form-control {
    height: 43px !important;
}
.popover.top{
    margin-top: -4px;
}
.popover-content {
    padding: 5px;
}
.popover {
    background-color: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3) !important;
}
.popover-title {
    font-size: 1rem;
    background-color: dodgerblue;
    text-align: center;
    font-weight: 400;
    color: aliceblue;
}

/* NEW LOGIN MODAL PAGE */
.modal-login-close-btn-container{
    display:flex; 
    justify-content:flex-end;    
}
.modal-login-close-btn{
    font-weight: bold;
}
.modal-login-items{
    display:flex; 
    justify-content:center;    
    align-items: center;
}
.login-security-question h4{
    margin-top:0px;
}
#login_div_list_modal{
    box-shadow: 0px 0px 5px 1px rgba(255, 68, 68, 1);
    left: 0%;
    right: 0%;
    margin: 0% 30%;
    width: unset;
    /*transition: all 0.3s ease-in-out;*/
    border: 2px solid black;
    position: absolute;
    top: 50%;  
}
#login_div_list_modal img{
    max-height: 170px;
    filter: grayscale(1);
    transition: all 0.3s ease-in-out;
}
#login_div_list_modal:hover{
    -webkit-box-shadow: 10px 10px 50px 0px rgba(149, 147, 147, 0.5);
    -moz-box-shadow: 10px 10px 50px 0px rgba(149, 147, 147, 0.5);
    box-shadow: 10px 10px 50px 0px rgba(149, 147, 147, 0.5);
    border: 2px solid maroon;
}

#login_div_list_modal:hover #modal_login_userimage{
    filter: grayscale(0);
}

.login-logo{
    max-height: 70px;
}

#login_div_list_modal .modal-body{
    background: #FFF url(../img/pattern/inspiration-geometry.png) repeat top left;
    transition: all 0.3s ease-in-out;
}

#login_div_list_modal .modal-body:hover{
    background: #FFF url(../img/pattern/debut-light.png) repeat top left;
}