@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */


/* OVERLAY CSS FOR 360 PANORAMA */
/* 1. Make the container relative so absolute children align to it */
.dogtrainer {
    position: relative;
    width: 100%;
    /* Adjust as needed */
    margin: 0 auto;
}

/* 2. Center your existing iframe layout */
.catcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Adjust to your iframe's height */
.thebox-iframe {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 225px;
    border: none;
    outline: none;
}

@media (max-width: 750px) {
    .thebox-iframe {
        height: 320px;
    }

}

/* 3. Style and position the text overlay perfectly in the center */
.bigbox-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Ensures it sits on top of the iframe */
    color: white;
    /* Choose a contrasting color */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.7rem;
    font-weight: bold;
    text-shadow: 1.5px 1.5px 1px rgba(0, 0, 0, 0.5);
    /* Adds readability */
    pointer-events: none;
    /* Allows clicks to pass through the text onto the iframe */
}

.bigbox-text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Ensures it sits on top of the iframe */
    color: white;
    /* Choose a contrasting color */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.0rem;
    font-weight: bold;
    text-shadow: 1.5px 1.5px 1px rgba(0, 0, 0, 0.5);
    /* Adds readability */
    pointer-events: none;
    /* Allows clicks to pass through the text onto the iframe */
}

.bigbox-text3 {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Ensures it sits on top of the iframe */
    color: white;
    /* Choose a contrasting color */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    text-shadow: 1.5px 1.5px 1px rgba(0, 0, 0, 0.5);
    /* Adds readability */
    pointer-events: none;
    /* Allows clicks to pass through the text onto the iframe */
    opacity: 1.0;
    /* 50% transparent */
}

.bigbox-text4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Ensures it sits on top of the iframe */
    color: white;
    /* Choose a contrasting color */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.1rem;
    font-weight: bolder;
    text-shadow: 1.5px 1.5px 1px rgba(0, 0, 0, 0.5);
    /* Adds readability */
    pointer-events: none;
    /* Allows clicks to pass through the text onto the iframe */
    opacity: 1.0;
    /* 50% transparent */
}


@media (max-width: 750px) {

    .bigbox-text2 {
        font-size: 3.0rem;
    }

    .bigbox-text3 {
        top: 80%;
        font-size: 1.4rem;
    }

}