*
{
    outline: none;
}

body
{
    padding: 110px 0;
    margin: 0px;
 
}

#cover
{
    width: 188px;
    margin: 0 auto;
    position: absolute;
    z-index: 9999;
    left:10%;
    right:80%;
    top:40%;
    bottom:40%;
    color:#000000 !important;
}
#cover:after
{
    display:none;
}


#checkbox
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

#label
{
    font-size: 20px;
    text-align: center;
    padding: 20px;
    margin: 0 auto;
    color:#000000;
}

#label:after
{
    display:none;
    content: '';
    position: absolute;
    margin: 0 auto;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    background-color: #2196f3;
    z-index: -1;
}

#modal
{
    right: 0px;
    left: 0px;
    max-width: 460px;
    font-size: 20px;
    padding: 25px;
    margin: 0 auto;
    margin-top: -32px;
    border:10px solid #f5f5f5;
}
#modal p
{
    
}

#yep
{
    width: 53px;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    padding: 20px;
    cursor: pointer;
}

#label, #modal, #yep
{
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 20px 40px #000000;
}

#modal,#yep
{
    position: fixed;
    color: #2196f3;
    text-align:center;
    font-weight: bold;
    transform: scale(0);
    transition:0.2s cubic-bezier(0, 0.79, 0.52, 1.28) transform;
    z-index: 1;
}

#checkbox:checked
{
    left: auto;
    right:auto;
    width: 93px;
    height: 64px;
    z-index: 3;
    padding-right:25px;
}

#yep,#checkbox:checked
{
    position: absolute;
    right: 30px;
    top:50px;
}

#modal,#yep,#checkbox:checked
{
    top: 114px;
}

#checkbox:checked + #label:after
{
    width: 100%;
    height: 100%;
}

#checkbox:checked ~ #modal,#checkbox:checked ~ #yep
{
    transform: scale(1);
    z-index: 2;
}