/*
Theme Name: CourtKings
Theme URI: https://www.dotsquares.com/
Author: wstheme
Author URI: https://www.dotsquares.com/
Description: Custom WordPress theme for CourtKings project.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: courtkings
*/
html {
  scroll-behavior: smooth;
}
.popup-overlay{position:fixed;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;overflow:auto}
#court-design-form{padding:15px 0px 30px;}
#exp-img{height:100%;object-fit:cover;padding:2px;}
.success-message{color:green;font-weight:600;margin:10px 0;}
.wpcf7-response-output{background:white}
.wpcf7-not-valid-tip{margin-top:5px !important;}

.design-scene {
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: visible !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: center;
}



#field {
    text-align: center;
    width: 1100px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#field.rotated-and-scaled {
    flex-direction: column;
}

#field.rotated-and-scaled svg {
    transform: rotate(90deg) scale(0.45);
}

#field.rotated-270 svg {
    transform: rotate(270deg);
}
@media (max-width: 768px) {
     .court-design {
        margin-left: auto;
        width: 100%;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .design-scene {
        transform-origin: center center;
        /*transform: rotate(-90deg) translate(-100%);*/
        transform: rotate(-90deg) translate(-55%) scale(0.55);
        /*transform: rotate(90deg) translate(25%, 45%);*/
        white-space: nowrap;
        /*width: 95vw;*/
        margin: 0 auto;
        height: fit-content;
        flex-direction: row;
        justify-content: flex-start;
    }

    #field svg {
        transform-origin: top right;
    }

    #field.rotated-and-scaled svg {
        transform: rotate(0deg);
    }

    #field.rotated-270 svg {
        transform: rotate(0deg);
    }


}


@media screen and (max-width:767px){

}