
.comipa-page .page-lock-overlay{
        /* visibility:hidden; */
        opacity: 0;
        transition: opacity 0.75s cubic-bezier(0.6, 0.02, 0.81, 0.09),  height 0.75s step-end, width 0.75s step-end;
        /* padding-top:200%; */

        background:rgba(0,0,0,0.5);
        
        
        display:flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        
        color:#FFF;
        font-weight:Bold;
        height:0;
        width:0;
        position:absolute;

        top:0;
        left:0;
        /* padding:60px; */
        box-sizing: border-box;
        pointer-events: none;
        
        h1 {
            padding: 0px 60px;
            font-size:5em;
            font-family: 'Eva Heading', serif;
            line-height: 1;
            text-transform: uppercase;
            
        }

        div {
            padding: 0px 60px;
            text-transform: uppercase;
            font-weight:normal;

        }

        a {
            padding: 0px 60px;
            margin-top:20px;
            display:block;
            text-transform: uppercase;
            pointer-events: all;
            font-size:1.2em;
            color:var(--enfold-main-color-primary);
        }

        #monolith {
            position:absolute;
            left:50%;
            transition: top 0.5s cubic-bezier(0.6, 0.02, 0.81, 0.09);
            top:-50%;
            transform: translate(-50%, -50%);
            z-index:0;
        }

        .lock-timer{
            overflow: visible;
            margin:0px 0px 20px 0px;
            padding:0;
            width:100%;
            box-sizing: border-box;
            /* position:relative; */
            position:absolute;
            height:0%;
            
            transition: top 0.5s cubic-bezier(0.6, 0.02, 0.81, 0.09);
            top:100%;
            
            /* height:150px; */
            min-height:150px;

            .timer-graphic {
                height:100%;
                width:100%;
            }
            /* background: #c43523; */
            /* background: linear-gradient(to right,#c43523, #dec400,#34701c); */

           

            .actions {
                position:absolute;
                padding: 0;
                left: calc(100px / 600px * 100%);
                top: calc(108px / 150px * 100% + 8px);
                
                display:flex;
                gap:20px;

                .locked-action-btn {
                    margin:0;
                    display:block;
                    border:1px solid #ef950b;
                    padding:2px 5px 10px 5px;
                    border-radius:3px;
                    color:#ef950b;
                    font-family: sans-serif;
                    font-size:14px;
                    line-height:16px;
                    text-transform:uppercase;
                    background:black; 
                    position:relative;
                    min-width:100px;
                    flex:1;
                    text-align: left;
                    pointer-events: all;
                    cursor:pointer;
                    overflow:hidden;


                    &:hover::after{
                        content:"";
                        display:block;
                        width:100%;
                        height:10px;
                        background-color:#c43523;
                        position:absolute;
                        bottom:0;
                        left:0;
                    }

                    &[disabled]{
                        cursor:inherit;
                        color:#333;
                        border-color:#333;
                        pointer-events: none;
                    }
                }
            }

            .tl-locked:before {
                content:"ACTIVE";
                
            }

            .time-reached {
                 #timer-labels {  animation: pulse-fade 0.75s ease-in-out infinite alternate; }
                
                .timer-time, .timer-label {
                    transition:fill 0.5s ease;
                    fill: #c43523 !important; 
                }
                
                .frame {
                    transition:stroke 0.5s ease;
                    stroke: #c43523 !important;
                }

                .tl-locked, .tl-time-remaining {
                    visibility: hidden !important;
                }

                .tl-active, .tl-refresh-imminent {
                    visibility:visible !important;
                }
            }
            .tl-active {
                /* transform: scaleX(.95); */
                transform: translateX(5px) scaleX(.95);
            }
        }

        .lock-timerz{
            box-sizing:border-box;
            /* color:#ef950b; */

            background: linear-gradient(to right,#c43523, #dec400,#34701c);
            /* background:RGBA(0,0,0,.6); */
            /* border:4px solid #FFF; */
            /* #ef950b;  */
            /* border-width:1px 8px 1px 8px; */
            margin-bottom:20px;
            /* margin:40px 0px 40px 0px; */
            /* color: #ef950b; */
            position:relative;
            width:100%;
            padding:0;
            /* padding:15px 0px; */
            

            /* &:before, &:after{
                content:"";
                display:block;
                background: linear-gradient(to right,#c43523, #dec400,#34701c);
                position:absolute;
                height:15px;
                width:100%;
            }
            
            &:before {top:-16px;}
            &:after {bottom:-16px;} */

            h2 {      
                margin:0px;
                /* margin: 0px 10px; */
            }
            h3 {
                background:#000;
                /* margin:15px 10px 0px 10px; */
                margin:-15px 5px 0px -20px;
                /* margin-left:-20px; */
            }

            .lock-timer-frame {
                box-sizing:border-box;
                background:black;
                margin: 20px 0px 10px 75px;
                border:4px solid #ef950b; 
                border-width:2px 0px 2px 2px;
                padding:5px;
                /* width:100%; */
            }

        }

        h2 {
            /* margin:0; */
            font-family:Eva Timer;
            font-size:5em;
            font-weight:normal;
            margin:0;
            margin-bottom:-10px;
            /* line-height:0.9em; */
        }
        
        h3 {
            font-family: Eva Heading;
            font-weight:normal;
            margin:0;
            display:inline-block;
            font-size:2em;
            /* font-size:3em; */
            text-transform: uppercase;
        }
        
        h4 {
            font-weight:normal;
            margin:0;
            font-size:1em;
            display:inline-block;
            text-transform: uppercase;
            /* font-size:3em; */
        }
}
.comipa-locked-page {
    img {
        /* filter:blur(10px) !important; */
    }

    img.locked {
        opacity:1;
        /* z-index: */
        
    }
    
    a.comipa-page-link-next{
        display:none;
    }
    
    .page-lock-overlay{
        /* content:"SIGN UP FOR MORE"; */
        /* visibility: visible; */
        opacity:1 !important;
        height:100% !important;
        width:100% !important;
        /* padding-top:0%; */
        /* position:relative; */

        .lock-timer {
            top:50% !important;;
        }

        #monolith {
            top:50% !important;;
        }
        
       
        
    }
}



.comipa-page {
    overflow:hidden;
    img {
        /* transition:filter 1s ease; */
        /* filter:blur(0.0); */
    }
    img.locked {
        transition:opacity 1s;
        opacity:0;
        position:absolute;
        top:0;
        left:0;
    }
    .page-lock-overlay {
        position:absolute;
        z-index:100;
    }
}

@keyframes pulse-fade {
  0% { opacity: 1; }
  100% { opacity: 0.25; }
}


@media only screen and (min-width: 989px)
{
    .comipa-locked-page .page-lock-overlay .lock-timer{
        /* height:150px; */
        min-height:150px;
    }

}

@media only screen and (max-width: 920px) {
  /* Add your Desktop Styles here */
  .comipa-locked-page .page-lock-overlay .lock-timer{
    /* height:125px; */
    min-height:125px;
    }
}

/* @media only screen and (min-width: 767px) {
  .comipa-locked-page .page-lock-overlay .lock-timer{
    height:150px;
    min-height:150px;
    }
} */


/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    .comipa-locked-page .page-lock-overlay .lock-timer{
        /* height:150px; */
        min-height:150px;
    }
}
@media only screen and (max-width: 480px) {
    /* Add your Mobile Styles here */
    .comipa-locked-page .page-lock-overlay .lock-timer{
        /* height:125px; */
        min-height:125px;
    }



}
@media only screen and (max-width: 420px) {
    /* Add your Mobile Styles here */
    .comipa-locked-page .page-lock-overlay .lock-timer{
        /* height:125px; */
        min-height:110px;
    }



}

