:root {    

    --primary-color:#f7913b;

    --heading-color:#2c4767;

    --white-color: #ffffff;

    --text-color:#6a87a8;

    --input-color:#bdc9d7;

    --grey-color:#5b7899;

    --border-color:#edf3ff; 

    --dark-color:#353b48; 

    --header-bg:#f9fafe;  

    --body-color:#fff4ea;

    --menu-color:#91aac8;

}

body {

    margin: 0;

    padding: 0;

    box-sizing: border-box;	  	

	-webkit-font-smoothing: antialiased;

    font-family: 'Nunito Sans', sans-serif;        

}

html {

  scroll-behavior: smooth;

}

*,*:before,*:after{

	box-sizing: border-box;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

}

h1, h2, h3, h4, h5, h6{	

	-webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

	margin:0;

	padding:0;	

	word-break: break-word;

}

a{

    text-decoration: none;

}

img, video {

	max-width: 100%;

}

input, textarea, select, button, label, svg, svg path, svg rect, svg polygon, img, a, :after, :before, :hover, :focus, .form-control:focus{

	outline: none !important;

	box-shadow:none;

}

input::placeholder, textarea::placeholder{

    text-transform: capitalize;

    font-size: 13px;

    color: var(--input-color);

    font-weight: 400;

}

ul, ol{

	padding:0;

	margin:0;

	list-style-type: none;

}

p {

  margin: 0px;

  word-break: break-word;

}

/* loader css start */

.loader {

	position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    margin: auto;

    z-index: 999999;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: var(--white-color);

}

.loader img {

	width: 100px;

}
/* upload loader css start */
#uploader .loader img {
	width: 180px;
}
/* upload locader css end */
/* loader css start end */

/* button css start */

.px_btn {

    width: 100%;

    height: 56px;

    background: var(--primary-color);

    border-radius: 5px;

    color: var(--white-color);

    font-size: 16px;

    font-weight: 700;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;    

    position: relative;

    text-transform: capitalize;

    text-decoration: none;

    transition: 0.3s transform ease-in-out;

    will-change: transform;

    z-index: 0;

    box-shadow: 0px 8px 36.8px 3.2px rgba(247, 145, 59, 0.32);

}

.px_btn::after {

    background-color:var(--dark-color);

    border-radius: 5px;

    content: '';

    display: block;

    height: 100%;

    width: 100%;

    position: absolute;

    left: 0;

    top: 0;

    transform: translate(-100%, 0) rotate(10deg);

    transform-origin: top left;

    transition: 0.3s transform ease-out;

    will-change: transform;

    z-index: -1;

}

.px_btn:hover {

    transform: scale(1.05);

    will-change: transform;

    box-shadow: 0px 8px 36.8px 3.2px rgba(44, 71, 103, 0.32);

}

.px_btn:hover::after {

    transform: translate(0, 0);    

}

/* button css end */

/* login page css start */

.px_login_main_wrapper{

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    padding: 30px 15px;

    text-align: center;

    overflow: auto;

    background-color:var(--body-color);    

}

.px_login_main_wrapper:before{

    content: '';

    width: 1px;

    height: 100%;

    display: inline-block;

    vertical-align: middle;

}

.px_login_wrapper{

    max-width: 884px;

    width: 100%;

    margin: auto;

    background-color: var(--white-color);

    border-radius: 5px;        

    box-shadow:0px 18px 60px rgba(247,145,59,0.2);

    display: inline-flex;

    vertical-align: middle;

    position: relative;

}

.px_login_parent {

    display: flex;

    align-items: center;

    width: 100%;

}

.px_login_left_content{

    max-width: 450px;

    width: 100%;

    padding: 50px 45px;

}

.px_login_logo {

    text-align: left;

}

.px_login_heading{

    text-align: left;

}

.px_login_heading h5{

    font-size: 28px;

    color: var(--heading-color);

    font-weight: 700;

    text-transform: capitalize;

    padding-top: 40px;    

}

.px_login_heading p{

    font-size: 15px;    

    color: var(--text-color);

    font-weight: 400; 

    padding-bottom: 30px;   

}

.px_input_field {

    position: relative;

    margin-bottom: 20px;

    max-width: 370px;

}

.px_input_field input {

    width: 100%;    

    height: 70px;

    border-radius: 5px;            

    padding: 20px 20px 0 60px;

    font-size: 15px;

    color: var(--grey-color);

    font-weight: 600;

    border:1px solid var(--border-color);    

}

.px_input_field input:focus{    

    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.06);

}

.px_input_field label{

    font-size: 13px;        

    font-weight: 400;

    color: var(--input-color);

    position: absolute;

    top: 27px;

    left: 60px;      

    transition: all 0.3s;     

}

.px_input_field input:focus label {

    color: var(--primary-color);

}

.px_input_field.px_label_float label {    

    top: 15px;  

}

.px_input_field img{

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 20px;

}

.px_input_footer{

    display: flex;

    align-items: center;    

}

.px_input_footer .px_forgot_paswrd{

    margin-left: auto;

}

/* checkbox css start */

.px_remember label input{     

    display: none;

}

.px_remember label{

    position: relative;

    display: flex;

    margin: .6em 0;

    align-items: center;

    font-size: 13px;    

    font-weight: 600;

    color: var(--menu-color);

    cursor: pointer;  

    transition: color 250ms cubic-bezier(.4,.0,.23,1);

}

.px_remember label span{

    display: flex;

    justify-content: center;

    align-items: center;

    margin-right: 10px;

    width: 16px;

    height: 16px;

    border-radius: 4px;

    background-color: var(--input-color);              

    opacity: 0.3;

    transition: all 250ms cubic-bezier(.4,.0,.23,1);

}

.px_remember label:hover, .px_remember label:focus{    

    color:var(--primary-color);

}

.px_remember label + input[type='checkbox']:checked{

    color: var(--primary-color);

}

.px_remember input[type='checkbox']:checked + span {

    border: 8px solid var(--primary-color);

    animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);

    background: var(--primary-color);

    opacity: 1;

}

.px_remember input[type='checkbox']:checked + span:before{

    content: "";

    position: absolute;

    top: 8px;

    left: 4px;

    border-right: 2px solid transparent;

    border-bottom: 2px solid transparent;

    transform: rotate(45deg);

    transform-origin: 0% 100%;

    animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;

}

@keyframes shrink-bounce{

  0%{

    transform: scale(1);

  }

  33%{    

    transform: scale(.85);

  }

  100%{

    transform: scale(1);    

  }

}

@keyframes checkbox-check{

  0%{

    width: 0;

    height: 0;

    border-color: var(--white-color);

    transform: translate3d(0,0,0) rotate(45deg);

  }

  33%{

    width: 2px;

    height: 0;

    transform: translate3d(0,0,0) rotate(45deg);

  }

  100%{    

    width: 4px;

    height: 8px;    

    border-color: var(--white-color);

    transform: translate3d(0,-.5em,0) rotate(45deg);

  }

}

/* checkbox css end */

.px_forgot_paswrd p{

    font-size: 13px;

    color: var(--menu-color);

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

}

.px_forgot_paswrd p:hover{

    color: var(--primary-color);

}

.px_login_btn { 

    display: flex;

    margin-top: 30px;

}

.px_login_right_img{    

    position: relative;

    z-index: 1;

}

.px_login_right_img .px_shapes{    

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: -1;   

}

/* notification css start */

.px_login_notification{

    min-width: 301px;

    height: 67px;

    line-height:70px;

    border-radius: 12px; 

    display: flex;    

    align-items: center;

    position: fixed;   

    right: 50px;

    bottom: 50px;

    z-index: 999;

    display: none;  

}

.px_error{

    background-color: #ff5d5d;    

}

.px_success{

    background-color: #2cdd77;    

}

.px_login_notification p{

    font-size: 16px;

    color: var(--white-color);

    padding-left: 70px;

    font-weight: 500;

    font-family: 'Hind', sans-serif;

}

.px_error:before {

    content: '';

    background-image: url(../images/error_icon.png);

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    top: 0px;

    left: 0;    

    width: 67px;

    height: 67px;    

    background-color: rgba(0,0,0,0.1);    

    border-radius: 12px 0 0 12px;

}

.px_success:before {

    content: '';

    background-image: url(../images/success_icon.png);

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    top: 0px;

    left: 0;    

    width: 67px;

    height: 67px;    

    background-color: rgba(0,0,0,0.1);    

    border-radius: 12px 0 0 12px;

}

/* notification css end */

/* login page css end */



/* header css start */

.px_header_wrapper{

    background-color: var(--header-bg);

    padding: 18px 0;

}

.container-fluid{

    padding: 0 190px;

}

.px_header_inner {

    display: flex;

    align-items: center;    

}

.px_header_left{

    display: flex;

    align-items: center;

}

.px_header_right {    

    display: flex;

    align-items: center;

    margin-left: auto;

}

.pc_header_albm_upld_btn {

    display: flex;

    align-items: center;     

}

.px_header_menu{

    margin-left: 100px;

}

.px_header_menu ul.px_menu > li{

    display: inline-block;

    vertical-align: middle;

    margin-right: 45px;

}

.px_header_menu ul.px_menu > li:last-child{

    margin-right: 0;

}

.px_header_menu ul.px_menu > li > a{

    font-size: 15px;

    font-weight: 600;

    color: var(--menu-color);

    text-transform: capitalize;

    position: relative;

    padding: 31px 0;

    transition: all 0.3s;

}

.px_header_menu ul.px_menu > li > a:before{

    content: '';

    width: 0;

    height: 5px;

    background-color: var(--primary-color);

    position: absolute;    

    bottom: -2px;

    border-radius: 5px 5px 0 0;

    transition: all 0.3s;

}

.px_header_menu ul.px_menu > li > a:hover, .px_header_menu ul.px_menu > li.active > a{

    color: var(--primary-color);

}

.px_header_search {

    margin-right: 50px;

}

.px_search_input{

    max-width: 380px;

    position: relative;

}

.px_search_input input{

    width: 100%; 

    height: 50px;   

    background-color: var(--white-color);

    color: var(--input-color);

    border-radius: 5px;

    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.03);

    padding: 0 30px 0 70px;

    border: none;

}

.px_search_input span.px_header_srch_icon svg{       

    fill:var(--input-color);    

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 30px;

}

.px_header_album {

    margin-right: 35px;

}

.px_header_album span.px_header_albm_icon{

    font-size: 15px;

    font-weight: 600;

    color: var(--menu-color);

    text-transform: capitalize;

    display: flex;

    align-items: center;  

    cursor: pointer;  

    transition: all 0.3s;

}

.px_header_album span.px_header_albm_icon:hover{

    color: var(--primary-color);

}

.px_header_album span.px_header_albm_icon svg{    

    fill:var(--input-color);

    margin-right: 10px;    

    transition: all 0.3s;

}

.px_header_album span.px_header_albm_icon:hover svg{

    fill: var(--primary-color);

}

.px_header_upload{

    background-color: rgb(247, 145, 59, 0.078);

    border-radius: 5px;

    min-width: 188px;

    min-height: 50px;

    display: inline-block;

    position: relative;

    cursor: pointer;

    transition: all 0.5s;

}

.px_header_upload:before{

    content: '';        

    width: 0;

    background-color: var(--dark-color);

    border-radius: 5px;

    position: absolute;

    top: 0;    

    bottom: 0;

    left: 0;    

    right: 0;           

    opacity: 0;

    transition: all 0.5s;

}

.px_header_upload:hover span.px_header_upload_icon svg, .px_header_upload:hover h4{

    fill: var(--white-color);

}

.px_header_upload:hover h4{

    color: var(--white-color);

}

.px_header_upload:hover:before{

    width: 100%;   

    opacity: 1;

}

.px_header_upload:hover span.px_header_upload_icon{

    box-shadow: none;

}

.px_header_upload span.px_header_upload_icon{

    width: 40px;

    height: 40px;

    display: flex;       

    justify-content: center;

    align-items: center;

    background-color:var(--primary-color);

    border-radius: 3px;

    box-shadow: 0px 6px 28.2px 1.8px rgba(247, 145, 59, 0.4); 

    position: absolute;   

    left: 0;

    margin: 5px;

    transition: all 0.5s;

}

.px_header_upload span.px_header_upload_icon svg{    

    fill:var(--white-color);  

    transition: all 0.5s;     

}

.px_header_upload h4{

    font-size: 15px;

    font-weight: 600;

    color: var(--primary-color);

    text-transform: capitalize;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    right: 30px;

    cursor: pointer;

    transition: all 0.5s;

}
/* hader logout btn css start  */ 
.px_logout_btn span.px_header_upload_icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(247, 145, 59, 0.078);
    border-radius: 3px;
    transition: all 0.5s;
    cursor: pointer;
}
.px_logout_btn:before{
    content: '';   
    width: 0;
    background-color: var(--dark-color);
    border-radius: 5px;
    position: absolute;
    top: 0;    
    bottom: 0;
    left: 0;  
    right: 0; 
    opacity: 0;
    transition: all 0.4s;
} 
.px_logout_btn:hover:before{
    width: 100%;
    opacity: 1;
}
 
.px_logout_btn span.px_header_upload_icon svg {
    fill: var(--primary-color);
    transition: all 0.5s;
    z-index: 9;
}

.px_logout_btn:hover span.px_header_upload_icon svg{
    fill: var(--white-color); 
}

.px_logout_btn {
    position: relative;
    cursor: pointer;
    margin-left: 10px;

}
/* header logout btn css end */
/* header css end */



/* album section css start */

.px_album_wrapper, .px_single_albm_title_wrapper {

    padding: 80px 0;

}

.px_album_inner {

    display: flex;

    flex-wrap: wrap;

    margin: 0 -10px;

}

.px_album_box {

    position: relative;

    flex: 0 0 20%;

    padding: 0 10px;

    margin-bottom: 30px;

    cursor: pointer;

}

.px_album_img {
    font-size: 0;
    overflow: hidden;
}

.px_album_img img, .px_album_img video{
    height: 303px;
    width: 100%;
    transition: all 0.3s;

    border-radius: 5px;

    object-fit: cover;

}

.px_album_box_inner {

    position: relative;

    transition: all 0.3s;

    overflow: hidden;

    border-radius: 5px;

}

.px_album_box_inner:hover .px_album_img img{

    transform: scale(1.1);    

}

.px_albm_dot {

    position: absolute;

    top: 5px;

    right: 25px;    

    cursor: pointer;

    z-index: 9;

}

.px_almb_options ul.px_options {

    background-color: var(--white-color);

    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);

    border-radius: 5px;    

    width: 155px;

    padding: 25px 10px 30px 25px;

    position: absolute;

    top: 30px;

    right: 5px;

    opacity: 0;

    visibility: hidden;    

    transition: all 0.5s;

}

.px_albm_dot:hover .px_almb_options ul.px_options{ 

    transform: translateX(12px);   

    opacity: 1;

    visibility: visible;    

}

.px_almb_options ul.px_options > li {

    margin-bottom: 18px;

    transition: all 0.3s;

}

.px_almb_options ul.px_options > li:last-child{

    margin-bottom: 0;

}

.px_almb_options ul.px_options > li > a {

    font-size: 13px;

    font-weight: 400;

    color: var(--text-color);

    text-transform: capitalize; 

    display: flex;

    align-items: center;

    transition: all 0.3s;

}

.px_almb_options ul.px_options > li > a > span > svg{

    fill: var(--menu-color);    

    margin-right: 15px;

    transition: all 0.3s;

}

.px_almb_options ul.px_options > li:hover{

    transform: translateX(5px);

}

.px_almb_options ul.px_options > li > a:hover{

    color: var(--primary-color);

}

.px_almb_options ul.px_options > li > a:hover span > svg{

    fill: var(--primary-color);

}

.px_album_title_rectngl {

    background-color: var(--white-color);

    border-radius: 3px;

    padding: 10px 20px;

    position: absolute;

    bottom: 5px;

    left: 5px;

    right: 5px;

    margin: auto;

    transition: all 0.3s;

    z-index: 9;

}

.px_album_box_inner:hover .px_album_title_rectngl{

    bottom: 5px;

}

.px_album_title_rectngl h5.px_albm_title{

    font-size: 16px;    

    font-weight: 600;

    color: var(--grey-color);

    text-transform: capitalize;    

}

.px_album_title_rectngl ul.px_phot_videos > li{

    display: inline-block;

    vertical-align: middle;    

}

.px_album_title_rectngl ul.px_phot_videos > li:last-child{

    margin-left: 20px;

}

.px_album_title_rectngl ul.px_phot_videos > li > a {

    font-size: 13px;

    font-weight: 400;

    color: var(--menu-color);

    text-transform: capitalize;

    transition: all 0.3s;

}

.px_album_title_rectngl ul.px_phot_videos > li > a:hover{

    color: var(--primary-color);

}

/* album section css end */



/* album single section css start */

.px_sngle_albm_title_inner{

    display: flex;

    align-items: center;

}

.px_sngle_albm_icons{

    margin-left: auto;

}

.px_sngle_albm_inner_left {

    display: flex;

    align-items: center;

}

.px_sngle_albm_title h4.px_albm_title svg{

    fill: var(--grey-color);

    margin-right: 18px;

}

.px_sngle_albm_title h4.px_albm_title{

    font-size: 28px;

    font-weight: 700;

    color: var(--heading-color);

    text-transform: capitalize;

    display: flex;

    align-items: center;

    padding-right: 42px;

}

ul.px_title_menus > li {

    display: inline-block;

    vertical-align: middle;

    margin-right: 22px;    

}

ul.px_title_menus > li:last-child{

    margin-right: 0;

}

ul.px_title_menus > li > a{

    font-size: 15px;

    font-weight: 600;

    color: var(--menu-color);

    text-transform: capitalize;

    position: relative;

    transition: all 0.3s;

}

ul.px_title_menus > li > a:hover{

    color: var(--primary-color);

}

ul.px_title_menus > li > a:hover:before{

    background-color: var(--primary-color);

}

ul.px_title_menus > li > a:before {

    content: '';

    width: 7px;

    height: 7px;

    background-color: var(--menu-color);

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: -12px;

    transform: translateY(-50%);

    transition: all 0.3s;

}

.px_sngle_albm_date p{

    font-size: 15px;

    font-weight: 600;

    color: var(--menu-color);

    padding:10px 0 0 43px;     

}

ul.px_albm_icon > li{

    display: inline-block;

    vertical-align: middle;

    margin-right: 5px;

}

ul.px_albm_icon > li:last-child{

    margin-right: 0px;

}

ul.px_albm_icon > li > a > span{

    width: 40px;

    height: 40px;

    border-radius: 5px;

    background-color: #f9fbff;

    border: 1px solid var(--border-color);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: all 0.3s;

}

ul.px_albm_icon > li > a:hover span{

    background-color: var(--primary-color);

    border: 1px solid var(--primary-color);

    transform: translateY(-5px);

}

ul.px_albm_icon > li > a > span > svg{

    fill: var(--menu-color);

    transition: all 0.3s;

}

ul.px_albm_icon > li > a:hover span svg{

    fill: var(--white-color);

}

/* gallery css  start */

.px_albm_sngle_gallery_wrapper{

    padding-top: 40px;

    display: flex;

    flex-wrap: wrap;

    margin: 0 -5px;

}
.px_albm_sngle_gallery_wrapper_loading{
    /* padding-top: 40px; */

    display: flex;

    flex-wrap: wrap;

    margin: 0 -5px;
}
.px_grid_item{

    padding: 0 5px;

    margin-bottom: 10px;

}

.px_galley_main {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}
.px_galley_main:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient( 0deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgb(0,0,0) 100%);
    transition: all 0.3s;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
}
.px_galley_main:hover:before{
    opacity: 1;
    visibility: visible;    
}
.px_gallery_inner {

    position: relative;

    overflow: hidden;

    font-size: 0;

}
.px_gallery_inner img{

    border-radius: 5px;     

    height:240px;

    object-fit:cover;

    transition: all 0.3s;

}

.px_galley_main:hover .px_gallery_inner img{

    transform: scale(1.1);

}

.px_gallery_inner video{

    border-radius: 5px;     

    height:240px;

    object-fit:cover;

    transition: all 0.3s;

}

.grid-item {

    margin-bottom: 10px;

}

.px_glry_icons {

    position: absolute;

    bottom: 0;

    right: 0;

    left: 0;

    margin: auto;

    text-align: center;

    z-index: 99;

    opacity:0;

    visibility: hidden;

    transition: all 0.3s;    

}

.px_galley_main:hover .px_glry_icons{

    opacity: 1;

    visibility: visible;

    transform: translate3d(0px, -10px, 0);      

}

/* magnific popup css start */

button.mfp-close {
    font-size: 40px;
    color: #fff;
    opacity: 1;
    font-weight: 100 !important;    
    right: 5px !important;
}
.mfp-arrow {
    opacity: 1 !important;
}
.mfp-bg {
    /* position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    overflow: hidden;
    opacity: 1;
}
  .mfp-wrap {
    height: 100% !important;
    position: fixed !important;
    top: 0 !important;
}
.mfp-arrow-right {
    right: 80px;
    opacity: 1;
}
.mfp-arrow-left {
    left: 80px;
    opacity: 1;
}
.mfp-arrow:before {
    opacity: 1;
}
.mfp-arrow-right:after {
    border-left: 17px solid var(--primary-color);
}
.mfp-arrow-left:before {
    border-right: 27px solid var(--white-color) !important;
}
.mfp-arrow-left:after {
    border-right: 17px solid var(--primary-color) !important;
}
.mfp-arrow-right:before {
    border-left: 27px solid #ffffff;
}


body.mfp-active {
	overflow: hidden;
	-webkit-overflow-scrolling: auto;
	width: 100%;
	position: fixed;
	overflow: auto;
}
body .mfp-wrap {
	position: fixed;
	overflow: auto;
	top: 0 !important;
}

/* magnific popup css end */

.px_gallery_inner a.px_glry_popup {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;    

    margin: auto; 

    transition: all 0.3s;

    z-index: 9;

}

.px_gallery_inner a.px_glry_vid_btn{

    width: 42px;

    height: 42px;

    background-color: var(--primary-color);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    transform: scale(1);

    opacity: 1;

    visibility: visible;

}

.px_gallery_inner a.px_glry_vid_btn svg{

    width: 6px;

    height: 11px;

    fill: var(--white-color);

}

.px_gallery_inner a.px_glry_popup:hover svg{

    fill: var(--white-color);

}

.px_albm_sngle_checkbx .px_remember label span {

    background-color: rgba(255,255,255,0.7);

}

.px_albm_sngle_checkbx {

    position: absolute;

    top: 5px;

    right: 0;

    display: flex;

    align-items: center;

    z-index: 9;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s;

}

.px_albm_sngle_checkbx .px_remember input[type='checkbox'] + span {

    width: 16px;

    height: 16px;

    border: 1px solid var(--white-color);

    opacity: 1;

}

.px_albm_sngle_checkbx .px_remember input[type='checkbox']:checked + span {

    border: 8px solid var(--primary-color);

}

.px_albm_sngle_checkbx .px_remember input[type='checkbox']:checked + span:before {   

    top:7px;

}

.px_galley_main:hover .px_albm_sngle_checkbx {

    opacity: 1;

    visibility: visible;

    transform: translateX(-25px);

}

.px_imgname {

    position: absolute;

    top: 15px;

    left:0;

    right:80px;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s;

    z-index: 99;

    text-transform: uppercase;

}

.px_imgname p {

    font-size: 13px;

    color: var(--white-color);

    font-weight: 600;

    text-transform: uppercase;

    width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.px_galley_main:hover .px_imgname {

    opacity: 1;

    visibility: visible;

    transform: translateX(15px);

}

.px_albmfavorite {

    position: absolute;

    top: 13px;

    right: 12px;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s;

    z-index: 99;

    cursor:pointer;

}

.px_galley_main:hover .px_albmfavorite{

   opacity:1;

   visibility:visible;

   transform:translateX(-2px);

}
.px_albmfavorite img.px_fav_svg {
    width: 14px;
    height: auto;
    object-fit: cover;
}

/* gallery css end */
/* album single checkbox show css start */
.px_remember_visible.px_albm_sngle_checkbx{
    opacity: 1;
    visibility: visible;
    transform: translateX(-2px);
}
/* album single checkbox show css end */
/* album single section css end */
/* upload modal css start */

.modal {

    text-align: center;

  }  

.modal:before {

    display: inline-block;

    vertical-align: middle;

    content: " ";

    height: 100%;

}  

.modal-dialog {

    display: inline-block;

    text-align: left;

    vertical-align: middle;

}

.px_album_modal_wrapper .modal-dialog {

    width: 456px !important;

    border-radius: 5px;

    background-color: var(--white-color);

    padding: 40px 30px 30px 30px;        

}

.modal-content {

    border: none !important;

}

.modal-header { 

    padding: 0 !important;

    border-bottom: 0 !important;

    border-top-left-radius: 0 !important;

    border-top-right-radius: 0 !important;

}

.modal-body { 

    padding: 0;

}

.modal-dialog span.close_btn {

    background: transparent;

    border: none;

    color: var(--menu-color);

    display: block;

    position: absolute;

    top: -40px;

    right: -22px;   

    transition: all 0.3s;

    cursor: pointer;

    font-size: 18px;

}

.modal-dialog span.close_btn:hover, .modal-dialog span.close_btn:focus{

    color: red;

}

.px_album_modal label.px_album_modal_heading{

    font-size: 13px;

    color: var(--menu-color);

    font-weight: 400;

    display: block;

}

.px_album_modal .nice-select {        

    width: 100%;

    height: 49px;

    font-size: 14px;

    color: var(--grey-color);

    font-weight: 700;
    text-transform: capitalize;
    font-family: "Open Sans";

    line-height: 49px;

    border-radius: 5px;

    background-color: #f9fbff;

    border: 1px solid #f5f6f8;

    margin-top: 15px;

    float: none;

}

.nice-select:after {

    border-bottom: 2px solid var(--grey-color);

    border-right: 2px solid var(--grey-color);    

}

.nice-select .option.focus, .nice-select .option.selected.focus, .nice-select .option:hover {

    background-color: var(--body-color);

}

.px_album_modal .nice-select ul.list {

    width: 100%;    

}

.px_albm_modal_uplod{

    background-color: #f9fbff;

    border: 2px dashed var(--border-color);

    padding: 30px;

    border-radius: 5px;

    margin-top: 20px;

    text-align: center;

    cursor: pointer;

    position: relative;

}

.px_albm_modal_uplod input{

    font-size: 0;

    opacity: 0;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0; 

    cursor: pointer;   

}

.px_albm_modal_uplod img{

    display: block;

    margin: auto;

}

.px_albm_modal_uplod h5 {

    font-size: 14px;

    color: var(--grey-color);

    font-weight: 600;

    padding-top: 20px;

    line-height: 1.5;

}

.px_albm_modal_uplod h5 span{

    color: var(--primary-color);

    font-weight: 700;

}

.modal-backdrop {    

    background-color: rgba(0,0,0,0.3);

    backdrop-filter: blur(10px);

}

.modal-backdrop.show {

    opacity: 1;

}

.px_upladalbm_btn{

    margin-top:20px;

}

/* upload modal css end */



/* drag drop modal css start */

.px_upld_modal_wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    overflow: auto;
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    opacity:0;
    visibility: hidden;
    transition: all 0.3s;
    transform: scale(0.5);
    z-index: 9;
}

.px_upld_modal_wrapper:before{

    content: '';

    width: 1px;

    height: 100%;

    display: inline-block;

    vertical-align: middle;

}

.px_upld_modal_inner{           

    display: inline-block;

    vertical-align: middle;

    position: relative;

}
.px_modal_uplod {
    position: relative;
}
/* .px_modal_uplod input.px_dragdropfile{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 0;
    opacity: 0;
    cursor: pointer;
} */

.px_upld_modal_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

form#dropzone_form {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.dropzone .dz-message { 
    display: none;
}
.px_modal_uplod h5 {

    padding-top: 20px;
    font-size: 22px;

    font-weight: 700;

    color: var(--heading-color);

}
.dropzone {    
    border: none !important;
    border-radius: 0!important;
    padding: 0!important;
}
.px_upld_modal_wrapper span.close_btn {
    width: 25px;
    height: 25px;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    position: absolute;
    top: 0;
    right: 0;
}
/* drag drop modal css end */



/* create album modal css start */

.px_createalbm_modal label.px_album_modal_heading {

    font-size: 18px;

    color: var(--heading-color);

    font-weight: 600;

    display: block;

}

.px_createalbm_modal input {

    width: 100%;

    height: 55px;

    border-radius: 5px;

    padding: 0px 20px;

    font-size: 15px;

    color: var(--grey-color);

    font-weight: 600;

    border: 1px solid var(--border-color);

    margin: 20px 0;

}

.px_createalbm_btn .px_btn {

    max-width: 140px;

    height: 45px;

    font-size: 14px;

    font-weight: 400;

    transition:all 0.3s;

}

.px_createalbm_btn .px_btn:hover{

    color:var(--white-color);

}

/* create album modal css end */



/*share modal css start*/

.px_shremodal_wrapper .px_album_modal .form-control {

    margin: 10px 0 0 0;

}

.px_shremodal_wrapper .px_dltmodal_btn {

    justify-content: flex-start;

    padding-top: 30px;

}

/*share modal css end*/

/*delete modal css start*/

.px_dltmodal_wrapper .modal-dialog{

    max-width:400px !important;

}

.px_dltmodal_wrapper label.px_album_modal_heading {

    font-size: 16px;

    color: var(--heading-color);

    font-weight: 600;

    display: block;

}

.px_dltmodal_btn {

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    padding-top: 40px;

}

.px_dltmodal_btn .modalBtn {

    max-width: 70px;

    width: 100%;

    height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 14px;

    font-weight: 600;

    background-color: var(--primary-color);

    color: var(--white-color);

    text-transform: capitalize;

    border-radius: 4px;

    transition:all 0.3s;

}

.px_dltmodal_btn .modalBtn:hover{

    background-color:var(--dark-color);

}

.px_dltmodal_btn a.modalBtn.cncl_btn {

    background-color:var(--dark-color);

}

.px_dltmodal_btn a.modalBtn.cncl_btn:hover{

    background-color:var(--primary-color);

}

.px_album_modal .form-control {

    margin: 10px 0 5px 0;

}

/*delete modal css end*/
/* body.mfp-zoom-out-cur {
    position: fixed;
    top: 0;    
} */
/* -------------------------- responsive css start ------------------------------------- */

@media(min-width:768px){

    .px_header_menu ul.px_menu > li > a:hover:before, .px_header_menu ul.px_menu > li.active a:before{

        width: 100%;

    }

}

@media(max-width:1600px){

    .container-fluid {

        padding: 0 15px;

    }

}

@media(max-width:1500px){

    .px_album_title_rectngl {                       

        padding: 10px;        

    }

}

@media(max-width:1199px){

    .px_header_menu {

        margin-left: 50px;

    }

    .px_header_menu ul.px_menu > li {     

        margin-right: 20px;

    }

    .px_header_search {

        margin-right: 20px;

    }

    .px_header_album {

        margin-right: 20px;

    }

    .px_album_box{

        flex: 0 0 25%;

    }    

}
@media(max-width:1080px){
    .px_search_input {
        max-width: 250px;     
    }
    .px_search_input input {        
        padding: 0 15px 0 50px;        
    }
    .px_search_input span.px_header_srch_icon svg{
        left:15px;
    }
    .px_header_menu ul.px_menu > li {
        margin-right: 10px;
    }
    .px_header_menu {
        margin-left: 30px;
    }
}
@media(max-width:1024px){

    .px_header_upload {        

        min-width: 50px;             

    }

    .px_header_upload h4{

        display: none;

    }

    .px_header_album {

        margin-right: 10px;

    }

    .px_search_input input {        

        padding: 0 15px 0 45px;        

    }

    .px_search_input span.px_header_srch_icon svg {             

        left: 15px;

    }

}

@media(max-width:991px){

    .px_login_main_wrapper:before{

        display: none;

    }

    .px_header_menu {

        margin-left: 25px;

    }

    .px_header_menu ul.px_menu > li {

        margin-right: 15px;

    }

    .px_search_input {

        max-width: 150px;     

    }

    .px_album_box{

        flex: 0 0 30%;

    }  
    .px_album_inner {        
        justify-content: center;
    }  

}

@media(max-width:767px){

    .px_login_wrapper{

        display: block;

        max-width: 450px;        

    }

    .px_login_right_img{

        display: none;

    }

    .px_header_inner, .px_header_left, .px_header_right {     

        display: block;

    }  

    .px_header_menu {     

        position: absolute;

        top: 95px;

        left: 0;

    }

    .px_search_input {

        max-width: 200px;

        position: absolute;

        top: 25px;

        right: 15px;

    }  

    .px_search_input input {

        padding: 0 16px 0 40px;

    }

    .px_search_input span.px_header_srch_icon svg {

        left: 12px;

        width: 16px;

        height: 16px;

    }

    .pc_header_albm_upld_btn {

        width: 50%;

        margin-left: auto;

        justify-content: flex-end;

        padding-top: 20px;

    }

    .px_album_box{

        flex: 0 0 50%;

    }

    .px_sngle_albm_title_inner {     

        align-items: baseline;

    }

    .px_sngle_albm_inner_left {     

        display: block;

    }

    .px_sngle_albm_title h4.px_albm_title{

        padding-right: 0;

    }

    ul.px_title_menus {

        padding-left: 53px;

    }    

    .px_login_notification {

        min-width: 250px;

        height: 55px;

        line-height: 55px;

        right: 20px;

        top: 25px;

        z-index: 999;

    }

    .px_success:before, .px_error:before {

        width: 55px;

        height: 55px;

    }

    .px_login_notification p {

        padding-left: 50px;

    }

}

@media(max-width:575px){

    .px_album_box{

        flex: 0 0 100%;

    }

    .px_album_wrapper, .px_single_albm_title_wrapper {

        padding: 50px 0;

    }

    .px_album_title_rectngl {        
        text-align: center;

    }    

    .px_sngle_albm_title h4.px_albm_title svg {     

        margin-right: 10px;

        width: 18px;

        height: 18px;

    }

    .px_sngle_albm_title h4.px_albm_title {

        font-size: 18px;     

    }

    ul.px_title_menus {

        padding-left: 40px;

    }

    .px_sngle_albm_date p {     

        padding: 10px 0 0 30px;

    }

}

@media(max-width:480px){

    .modal:before{

        display: none;

    }

    .modal{

        margin-top: 50px;

    }

    .px_album_modal_wrapper .modal-dialog {

        width: 350px !important;     

    }


    .px_albm_sngle_gallery_wrapper {     

        justify-content: center;

    }
    .px_albm_sngle_gallery_wrapper, .px_albm_sngle_gallery_wrapper_loading  {     

        justify-content: center;

    }

}

@media(max-width:425px){

    .px_login_left_content {     

        padding: 30px 20px;

    }

    .px_search_input {

        max-width: 140px;     

    }

    .px_sngle_albm_title_inner {     

        display: block;

    }

    .px_sngle_albm_icons {

        padding: 15px 0 0 30px;

    }  
    .px_header_wrapper {     
        padding: 18px 0 30px 0;
    }  
    .px_header_album {
        position: absolute;
        left: 25px;
        top: 130px;
    }

}

@media(max-width:375px){

    .px_header_logo a img {

        width: 150px;

        height: auto;

        object-fit: contain;

    }

    .px_header_menu {     

        margin-left: 15px;

    }

    .px_header_menu ul.px_menu > li {

        margin-right: 10px;

    }

    .pc_header_albm_upld_btn {

        width: 55%;  

        padding-top: 25px;   

    }

    .px_header_album {

        margin-right: 10px;

    }

    .px_search_input {     

        top: 20px;

    }

    .px_search_input {

        max-width: 100px;

    }

    .px_search_input input {     

        height: 45px;

    }

    .px_search_input span.px_header_srch_icon svg {     

        width: 15px;

        height: 15px;

    }
    .px_header_menu {     

        top: 90px;        

    }
    .px_header_album {     
        left: 15px;
        top: 120px;
    }

    .px_header_upload {

        min-width: 40px;

        min-height: 40px;

    }

    .px_header_upload span.px_header_upload_icon {

        width: 35px;

        height: 35px;        

        margin: 3px;

    }
    .px_logout_btn span.px_header_upload_icon {
        width: 40px;
        height: 40px;     
    }

    .px_header_upload span.px_header_upload_icon svg {     

        width: 13px;

        height: auto;

    }

    .px_album_modal_wrapper .modal-dialog {

        width: 300px !important;     

    }

}

/* responsive css end */

/* added by saifi */
:root {
    --animation_bg: rgba(130, 130, 130, 0.2);
    --animation_bg1: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
    --animation_bg2: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
    --animation_size: 800px 100px;
    --animation_key: animation-squares 2s infinite ease-out;
}
.dsl_15 {
    height: 15px;
}
.dsmb_10 {
    margin-bottom: 10px;
}
.dis_skeletonCircle, .dis_skeletonRectangle, .dis_skeleton_line {
    background: var(--animation_bg);
    background: var(--animation_bg1);
    background: var(--animation_bg2);
    background-size: var(--animation_size);
    animation: var(--animation_key);
}
.dis_postAnimation {
    width: 20%;
    background: #fff;
}

.dis_postAnimation_body{
    padding: 6px;
}
.dis_skeletonRectangle{
    height: 280px;
}
@keyframes animation-lines {
    0% {
        background-position: -468px 0;
    }
     100% {
        background-position: 610px 0;
    }
}
 @keyframes animation-squares {
    0% {
        background-position: -468px 0;
    }
     100% {
        background-position: 610px 0;
    }
}

.px_zip_success:before {

    content: '';

    background-image: url(../images/success_icon.png);

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    top: 0px;

    left: 0;    

    width: 67px;

    height: 67px;    

    background-color: rgba(0,0,0,0.1);    

    border-radius: 12px 0 0 12px;

}

.px_zip_success{

    background-color: #2cdd77;    

}

.px_zip_success:before, .px_error:before {

        width: 55px;

        height: 55px;

    }

/* added by saifi */

/* added by saddam sir via saifiyan */
.mfp-arrow-left {
    left: 0px;
    opacity: 1;
}
.mfp-arrow-right {
    right: 5px;
    opacity: 1;
}
/* added by saddam sir via saifiyan */