#contactcontainer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100%;
    z-index: 100;
    display: none;
}

    #contactcontainer .overlay {
        background-color: #194268;
        opacity: 0.9;
        width: 100%;
        height: 100%;
        animation: contactoverlay 0.8s ease-in 1;
    }

        @keyframes contactoverlay {
            0%   
                {
                    opacity: 0;
                }
            100%   
                {
                    opacity: 0.9;
                }
        }

    #contactcontainer.hidden .overlay {
        opacity: 0;
        animation: contactoverlay-hide 1s ease-in-out 1;
    }

        @keyframes contactoverlay-hide {
            0%, 60%   
                {
                    opacity: 0.9;
                }
            100%   
                {
                    opacity: 0;
                }
        }


    #contactcontainer #contact-options {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        top: 0px;
        gap: 3rem;
    }

        #contactcontainer #contact-options a {
            background-color: #1CBA94;
            border-radius: 1.3rem;
            color: white;
            padding: 5rem 8rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

            #contactcontainer #contact-options #mail {
                animation: contact-option 1s ease-in 1;
            }

            #contactcontainer #contact-options #call {
                animation: contact-option 0.6s ease-in 1;
            }

            @keyframes contact-option {
                0%   
                    {
                        top: -10rem;
                        opacity: 0;
                    }
                60%   
                    {
                        top: 0rem;
                        opacity: 0.8;
                    }
                100%   
                    {
                        opacity: 1;
                    }
            }

            
            #contactcontainer.hidden #contact-options #mail {
                animation: contact-option-hide 0.6s ease-in 1;
                top: -10rem;
                opacity: 0;
            }

            #contactcontainer.hidden #contact-options #call {
                animation: contact-option-hide 1s ease-in 1;
                top: -10rem;
                opacity: 0;
            }
            
    
            @keyframes contact-option-hide {
                0%   
                    {
                        top: 0rem;
                        opacity: 1;
                    }
                60%   
                    {
                        top: 0rem;
                        opacity: 0.8;
                    }
                100%   
                    {
                        top: -10rem;
                        opacity: 0;
                    }
            }

            #contactcontainer #contact-options img {
                width: 5rem;
                margin-bottom: 0.8rem;
            }
            
            #contactcontainer #contact-options .title {
                font-family: PoppinsThin;
            }
            
            #contactcontainer #contact-options .address {
                font-family: PoppinsSemiBold;
            }
    
    #contactcontainer #close {
        position: absolute;
        bottom: 8rem;
        cursor: pointer;
        
        width: 100%;
        display: flex;
        justify-content: center;
        animation: close 1.3s ease-in 1;
    }

        #contactcontainer #close img {
            width: 1.5rem;
        }

        @keyframes close {
            0%, 90%   
                {
                    bottom: 4rem;
                    opacity: 0;
                }
            100%   
                {
                    bottom: 8rem;
                    opacity: 1;
                }
        }

        #contactcontainer.hidden #close {
            animation: close-hide 0.4s ease-in 1;
            bottom: 4rem;
            opacity: 0;
        }

        @keyframes close-hide {
            0%, 70%   
                {
                    bottom: 8rem;
                    opacity: 1;
                }
            100%   
                {
                    bottom: 4rem;
                    opacity: 0;
                }
        }