.frame {
    width: 600px;
    height: 350px;
    position: relative;
    background: #435d77;
    border-radius: 0 0 40px 40px;
}

#button_open_envelope {
    width: 180px;
    height: 50px;
    position: absolute;
    z-index: 311;
    top: 250px;
    left: 208px;
    border-radius: 10px;
    color: #000;
    font-size: 18px;
    border: 2px solid #fff;
    transition: .3s;
}

#button_open_envelope:hover {
    background: #FFf;
    color: #2b67cb;
    transform: scale(1.1);
    transition: background .25s, transform .5s, ease-in;
    cursor: pointer;
}

.message {
    position: relative;
    width: 100%;
    min-height: 300px;
    height: auto;
    background: #fff;
    margin: 0 auto;
    top: 30px;
    box-shadow: 0 0 5px 2px #333;
    transition: 2s ease-in-out;
    transition-delay: 1.5s;
    z-index: 300;
    border-radius: 10px;
}

.left,
.right,
.top {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    z-index: 310;
}

.left {
    border-left: 300px solid #337efc;
    border-top: 160px solid transparent;
    border-bottom: 160px solid transparent;
}

.right {
    border-right: 300px solid #337efc;
    border-top: 160px solid transparent;
    border-bottom: 160px solid transparent;
    left: 300px;
}

.top {
    border-right: 300px solid transparent;
    border-top: 200px solid #03A9F4;
    border-left: 300px solid transparent;
    transition: transform 1s, border 1s, ease-in-out;
    transform-origin: top;
    transform: rotateX(0deg);
    z-index: 500;
}

.bottom {
    width: 600px;
    height: 224px;
    position: absolute;
    background: #2b67cb;
    top: 160px;
    border-radius: 0 0 30px 30px;
    z-index: 310;
}

.open {
    transform-origin: top;
    transform: rotateX(180deg);
    transition: transform .7s, border .7s, z-index .7s ease-in-out;
    border-top: 200px solid #2c3e50;
    z-index: 200;
}

.pull {
    -webkit-animation: message_animation 2s 1 ease-in-out;
    animation: message_animation 2s 1 ease-in-out;
    -webkit-animation-delay: .9s;
    animation-delay: .45s;
    transition: 1.5s;
    transition-delay: 1s;
    z-index: 350;
}

#name,
#email,
#phone,
#messarea,
#send {
    margin: 0;
    padding: 0 0 0 10px;
    width: 570px;
    height: 40px;
    float: left;
    display: block;
    font-size: 18px;
    color: #2b67cb;
    border: none;
    border-bottom: 1px solid #bdbdbd;
    letter-spacing: normal;
}

#messarea {
    height: 117px;
    width: 560px;
    overflow: auto;
    border: none;
    padding: 10px;
}

#send {
    width: 580px;
    padding: 0;
    border: none;
    cursor: pointer;
    background: #7CB342;
    color: #fff;
    transition: .35s;
    letter-spacing: 1px;
}

#send:hover {
    background: tomato;
    transition: .35s;
}

::-moz-placeholder {
    color: #7CB342;
    font-family: 'Ubuntu';
    font-size: 20px;
    opacity: 1;
}

::-webkit-input-placeholder {
    color: #7CB342;
    font-family: 'Ubuntu';
    font-size: 20px;
}

*:focus {
    outline: none;
}

input:focus:invalid,
textarea:focus:invalid {
    /* when a field is considered invalid by the browser */
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border: 1px solid #b03535;
}

input:required:valid,
textarea:required:valid {
    /* when a field is considered valid by the browser */
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}


@-webkit-keyframes message_animation {
    0% {
        transform: translatey(0px);
        z-index: 300;
        transition: 1s ease-in-out;
    }

    50% {
        transform: translatey(-340px);
        z-index: 300;
        transition: 1s ease-in-out;
    }

    51% {
        transform: translatey(-340px);
        z-index: 350;
        transition: 1s ease-in-out;
    }

    100% {
        transform: translatey(0px);
        z-index: 350;
        transition: 1s ease-in-out;
    }
}

@keyframes message_animation {
    0% {
        transform: translatey(0px);
        z-index: 300;
        transition: 1s ease-in-out;
    }

    50% {
        transform: translatey(-340px);
        z-index: 300;
        transition: 1s ease-in-out;
    }

    51% {
        transform: translatey(-340px);
        z-index: 350;
        transition: 1s ease-in-out;
    }

    100% {
        transform: translatey(0px);
        z-index: 350;
        transition: 1s ease-in-out;
    }
}

@media (min-width:320px) and (max-width:375px) {

    .top {
        border-right: 170px solid transparent;
        border-top: 180px solid #03A9F4;
        border-left: 170px solid transparent;
        
    }

    .left {
        border-left: 180px solid #337efc;
        border-top: 149px solid transparent;
        border-bottom: 149px solid transparent;
        
    }

    .right {
        border-right: 180px solid #337efc;
        border-top: 149px solid transparent;
        border-bottom: 149px solid transparent;
        left: 160px;
        
    }

    .bottom {
        width: 340px;
        height: 180px;
        
    }

    #button_open_envelope {
        width: 154px;
        height: 39px;
        position: absolute;
        z-index: 311;
        top: 250px;
        left: 103px;
        border-radius: 10px;
        color: #000;
        font-size: 14px;
        border: 2px solid #fff;
        transition: .3s;
    }

    .message {
        position: absolute;
        width: 100%;
        top: 0;
        border-radius: 10px;
    }

    .frame {
        width: 100%;
        height: 328px;
    }

}

@media (min-width:376px) and (max-width:414px) {

    .top {
        border-right: 188px solid transparent;
        border-top: 185px solid #03A9F4;
        border-left: 187px solid transparent;
    }

    .left {
        border-left: 180px solid #337efc;
        border-top: 149px solid transparent;
        border-bottom: 149px solid transparent;

    }

    .right {
        border-right: 180px solid #337efc;
        border-top: 149px solid transparent;
        border-bottom: 149px solid transparent;
        left: 194px;

    }

    .bottom {
        width: 374px;
        height: 188px;

    }

    #button_open_envelope {
        width: 154px;
        height: 39px;
        position: absolute;
        z-index: 311;
        top: 250px;
        left: 103px;
        border-radius: 10px;
        color: #000;
        font-size: 14px;
        border: 2px solid #fff;
        transition: .3s;
    }

    .message {
        position: absolute;
        width: 100%;
        top: 0;

        border-radius: 10px;
    }

    .frame {
        width: 100%;
        height: 328px;
    }

}