body {
    background-image: url(/files/imgs/tiled-bg.jpg);
    background-size: 1350px;
    background-repeat: repeat;
}

main {
    background: white;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
}

/*Desktop*/
@media all and (min-width:768px) {

    iframe {
        width: 450px;
        height: 450px;
    }


    .ful-cont img {
        width: 95%;
        margin: 25px;
        border-radius: 10px;
    }
}

/*Mobile*/
@media all and (max-width:768px) {

    iframe {
        width: 250px;
        height: 250px;
    }

    .ful-cont img {
        width: 90%;
        margin: 25px;
        border-radius: 10px;
    }

    .ful-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-card {
        width: 100%;
    }
}




.about-cont {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.about-card {
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background: white;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
}

.dir-cont {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 20px;
    justify-content: space-between;
}

.copyable {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
}

    .copyable div {
        display: flex;
        align-items: baseline;
    }

.copy-btn {
    border: none;
    outline: none;
    transition: 0.15s;
    background: none;
    color: #006dbd
}

    .copy-btn:hover {
        color: #0094ff
    }


.hours-cont {
    display: flex;
    flex-direction: column;
}

    .hours-cont div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

.addr-cont {
    display: flex;
    flex-direction: column;
    text-align:start;
}

p {
    margin: 0;
}

strong {
    margin-bottom: 1rem;
}

/*Tooltip*/

.tooltiptext {
    /*visibility: hidden;*/
    opacity: 0;
    width: 60px;
    background-color: #0094ff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 0.8rem;
    /* Position the tooltip */
    z-index: 1;
    margin-left: -80px;
    margin-top: -5px;
    position: absolute;
    transition: 0.15s;
}


.copy-btn:hover span::after {
    opacity: 1;
    content: 'Copy'
}

.copy-btn:hover .tooltiptext {
    opacity: 1;
    /*visibility: visible;*/
}

.copy-btn:focus .tooltiptext::after {
    content: 'Copied!';
    /*visibility: visible;*/
}

.copy-btn:focus .tooltiptext {
    opacity: 0;
    transition: 1s;
    transition-delay: .5s;
    /*visibility: visible;*/
}

strong {
    margin-bottom: 0rem;
}





.contact-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;

}

.contact-form {
    width: 700px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.contact-top{
    display:flex;
    flex-direction:row;
}

.contact-label {
    text-align: start;
    padding: 5px;
    width: 100%;

}
.contact-label p{
    color:white;
    font-size:larger;
    font-weight:400;
}

    .contact-label input {
        width: 100%;
        background: rgb(255,255,255,0.8);
        color: black;
        outline:none;
        border:none;
        border-radius:5px;
        padding:5px;
    }

.contact-subject input {
    width: 100%;
}

.contact-body textarea {
    width: 100%;
    height: 300px;
    text-align: start;
    background: rgb(255,255,255,0.8);
    color: black;
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

.contact-submit {
    border:none;
    border-radius:5px;
    padding:5px;
    margin:5px;
    transition:0.15s;
}
.contact-submit:hover{
    color:white;
    background:#0094ff
}

.contact-cards {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 700px;
    justify-content: center;
}

.c-card {
    height: 240px;
    width: 240px;
    text-align: start;
    padding: 15px;
    gap: 15px;
    margin: 15px;
    background: rgb(0,0,0,0.7);
    color: white;
    border-radius: 10px;
    box-shadow: rgb(0,0,0,0.8) 0 0 10px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fadb8b
}

    .c-card i {
        font-size: 48px;
    }

    .c-card p {
        height: 50px;
    }

iframe {
    z-index: 10;
}