/* POP IN
__________________________________________________________*/


div[popin]:hover {
	cursor:pointer;
}

#popin-wrapper {
    position: absolute;
    width:100%;
    height: 100%;
    top:0;
    z-index:1991205;
}


#popin {
    position: absolute;
    width:100%;
    -webkit-box-shadow: 0 0 50px 10px rgba(0,0,0,1);
    box-shadow: 0 0 50px 10px rgba(0,0,0,1);
    height: 100%;
    top:0;
	left:0;
    z-index:1101;
    transition: all 0.4s ease;
	opacity:1;
}

#popin-wrapper.in #popin {
	opacity:1;
}

#popin-mask {
    position: absolute;
    width:1000%;
    background-color:rgba(0,0,0,0.5);
    left:100vw;
    height: 100%;
    top:0;
	left:0;
    z-index:1099;
	opacity:0;
	transition: all 0.4s ease;
}

#popin-wrapper.in #popin-mask {
    opacity:1;
}

#popin-media {
	position: absolute;
	height: 100%;
	width:75%;
	transition: all 0.4s ease;
	transform: translate3d(-100%,0,0);
	background-color:#000;
}

	#popin-wrapper.in #popin-media {
		transform: translate3d(0%,0,0);
	}

	#popin-media img {
		position: relative;
		max-width:100%;
		left:auto;
		top:auto;
		transform: none;
	}

	#popin-media [video-container] {
		position: relative;
		max-width:85%;
		left:auto;
		top:auto;
		transform: none;
	}


	#popin-media .popin-close {
		position: absolute;
		left:0;
		top:0;
		padding:40px;
		z-index:10;
		color:rgba(255,255,255,0.75);
	}

	#popin-media .popin-close:before {
		position: absolute;
		content: "\f00d";
		font-family: "Font Awesome 5 Pro";
		font-style: normal;
		font-weight: 300;
		left:50%;
		top:50%;
		transform: translate3d(-50%,-50%,0);
		z-index:15;
		font-size:40px;
	}

	#popin-media .popin-close:hover {
		color:#fff;
		cursor:pointer;
	}


#popin-content {
	position: absolute;
	height: 100%;
	width:25%;
	transition: all 0.4s ease;
	transform: translate3d(400%,0,0);
	background-color:var(--bg-color);
}

    #popin-content [comments] > [comments-list] {
        overflow-y: auto;
        padding: 0 30px;
    }

    #popin-content [comments] hr.divider {
        margin-left:30px;
    }

    #popin-content [comment-bar] {
        margin:30px;
        width:calc(100% - 60px);
    }

    @media (max-width: 990px) {

        
        #popin-content [comment-bar] {
            position: absolute;
            bottom:0;
            left: 0;
            background-color:var(--bg-color);
            margin:0;
            padding:30px;
            z-index:500;
            
        }
        
        #popin-content [comments] {
            overflow-y: auto;
            height: 200px;
          }
        
    }


	#popin-wrapper.in #popin-content {
		transform: translate3d(300%,0,0);
	}


#popin-content [popin-content] {
    padding: 0 30px;
}

#popin-content [popin-description] {
    max-height: 300px;
    overflow-y: auto;
    padding: 0 30px;
    font-weight: 400;
    font-size: 0.90rem;
    line-height: 1.6 !important;
    color: var(--text-color-alt);
}

#popin-content [popin-description] textarea {
    height: 200px;
    overflow-y: auto;
    width:100%;
    font-weight: 400;
    font-size: 0.90rem;
    line-height: 1.6 !important;
    color: var(--text-color-alt);
    border:0;
    padding:0;
}

#popin-content [popin-likes] {
    margin: 0 20px;
}

#popin-media .swiper-slide {
    text-align: center;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color:transparent;
}

#popin-media .swiper-button-next, 
#popin-media .swiper-button-prev {
    top:50%;
    transform: translateY(-50%);
}


.popin-content {
    display:none;
}


.popin-visible {
    display:none;
}

.popin-hidden {
    display:block;
}

#popin .popin-visible {
    display:block;
}

#popin .popin-hidden {
    display:none;
}




#popin-gallery {
    position: absolute;
    width:calc(100% - 650px);
    top:50%;
    left: 0;
    transform: translate3d(100vw,-50%,0);
    z-index:1100;
    transition: all 0.6s ease;
    overflow: hidden;
    height: 100%;
    opacity:0;
    background-color:var(--bg-color);
}

#popin-wrapper.in #popin-gallery {
    transform: translate3d(0,-50%,0);
    opacity:1;
}

#popin-gallery ul {
    padding:20px 40px 80px 40px;
    overflow: hidden;
}

    #popin-gallery ul li {
        width:calc(33% - 20px);
        float:left;
        margin:10px;
        filter:brightness(75%);
        height: 210px;
    }

        #popin-gallery ul li:hover {
            cursor:pointer;
            filter:brightness(100%);
        }


        #popin-gallery ul li.active {
            filter:brightness(125%);
        }

        #popin-gallery ul li img {
            border:solid 1px transparent;
        }

            #popin-gallery ul li.active img {
                border:solid 1px #fff;
            }


#popin-gallery-header {
    overflow: hidden;
    padding:20px 40px;
}

#popin-gallery-title {
    font-size:22px;
    margin-top:20px;
}




/* SM */
@media (max-width: 1200px) { 
		
	#popin-media {
		position: absolute;
		height: 40%;
		width:100%;
		transition: all 0.4s ease;
		transform: translate3d(0,-100%,0);
		background-color:#000;
		overflow: hidden;
	}
	
	
		#popin-wrapper.in #popin-media {
			transform: translate3d(0%,0,0);
		}
	
	#popin-content {
		position: absolute;
		height: 60%;
		width:100%;
		bottom:0;
		transition: all 0.4s ease;
		transform: translate3d(0,100%,0);
		background-color:var(--bg-color);
		overflow: hidden;
	}
	
		#popin-wrapper.in #popin-content {
			transform: translate3d(0,0,0);
		}
	
	
	
	#popin-media .popin-close {
		padding:25px;
	}

	#popin-media .popin-close:before {
		font-size:25px;
	}
    
    #popin-media .swiper-slide {
        height: 100%;    
    }
    
    
    #popin [swiper-gallery],
    #popin [swiper-gallery-content],
    #popin .swiper-normal{
        height: 100%;
    }
	
	
}






[search-wrapper] {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9999;
}

[search-wrapper] [search-input] {
    position: absolute;
    width: 500px;
    max-width:90%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index:100;
}



[search-wrapper] [search-input] input {
    background-color: var(--bg-color);
    display: block;
    border: solid 1px transparent;
    color: var(--text-color) !important;
    
    width: 100%;
    border-radius: 30px;
    padding: 20px 60px;
    font-size:16px;
}


[search-wrapper] [search-input]::before {
    position: absolute;
    content: "\f002";
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 500;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    font-size:20px;
    
}


[search-wrapper] [search-bg] {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
}