@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist&display=swap');

* {
    box-sizing: border-box;
    font-size: 1rem;
    font-family: 'Urbanist', sans-serif;
    color: #000;
}

body {
    margin: 0;
    opacity: 0;
}

content {
    width: 100%;
    height: 100%;
    display: block;
    max-width: 1920px;
    margin: 0 auto;
}

wrapper {
    background: transparent;
    float: left;
    width: 100%;
}

header {
    float: left;
    background: #000;
    min-height: 100px;
    width: 100%;
    padding: 1rem;
}

div.header-logo-container {
    width: 50%;
    float: left;
}

div.header-contact-us {
    float: left;
}

div.header-contact-us p {
    color: #fff;
}

div.header-contact-us xd-nav-button button {
    color: #fff;
    float: left;
}

div.header-contact-us xd-nav-button button:hover {
    border-color: #D4AF37;
}

button:hover {
    cursor: pointer;
    border-color: #000;
}

img.header-logo {
    width: 100%;
}

main {
    float: left;
    background: #fdfdfd;
    width: 100%;
    padding: 1rem;
}

div.content-block {
    min-height: 20px;
    float: left;
    padding: 1rem;
}

div.intro-block {
    min-height: 548px;
}

/*div.intro-block div {
    min-height: 512px;
}*/

div.content-background {
    background: #fafafa;
    padding: 1rem;
    margin-bottom: 1rem;
}

footer {
    float: left;
    background: #000;
    min-height: 100px;
    width: 100%;
    padding: 1rem;
    color: #fafafa;
}

div.footer-text {
    float: left;
}

div.footer-text p {
    font-size: 0.6rem;
    color: #fafafa;
}

div.sra-logo-container {
    width: 275px;
    height: 163px;
    float: left;
}

div.law-society-logo-container {
    width: 250px;
    height: 163px;
    float: left;
    background-color: #fff;
    padding: 1rem;
}

div.law-society-logo-container img {
    width: 100%;
}

div.cls-logo-container {
    width: 112px;
    height: 163px;
    float: left;
}

div.cls-logo-container img {
    width: 100%;
}

h1 {
    font-family: 'Poiret One', cursive;
    font-size: 2rem;
    color: #D4AF37;
}

h2 {
    font-family: 'Poiret One', cursive;
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: underline;
}

p,
span,
label,
input {
    color: #000;
}

gmp-map {
    height: 300px;
}

p {
    text-align: justify;
}

input {
    text-align: left;
    border: none;
    border-bottom: 1px dotted #fff;
    background: none;
}

input:focus-visible {
    border: none;
    border-bottom: 1px solid #000;
    outline: none;
}

input[type=button] {
    cursor: pointer;
}

button {
    background: none;
    border: 1px solid #ddd;
    padding: 0.5rem;
}

button:hover {
    cursor: pointer;
    border-color: #000;
}

button:hover xd-data-element {
    color: #000;
    font-weight: bold;
}

body.page_loading {
    transition: opacity 0s;
    opacity: 0;
}

body.page_started {
    transition: opacity 2s;
    opacity: 1;
}

.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.text-align-justify {
    text-align: justify;
}

.center {
    margin: 0 auto;
}

.no-list-style {
    list-style: none;
    padding: 0;
}

.menu-list li {
    padding-bottom: 0.5rem;
}

.menu-list button {
    width: 15rem;
}

.home-tile button {
    background-image: url('../rsrc/images/homeBkg.png');
}

.contact-us-tile button {
    background-image: url('../rsrc/images/contactUsBkg.png');
}

.areas-tile button {
    background-image: url('../rsrc/images/areasBkg.png');
}

.fees-tile button {
    background-image: url('../rsrc/images/feesBkg.png');
}

.about-us-tile button {
    background-image: url('../rsrc/images/aboutUsBkg.png');
}

.width-12 {
    width: 100%;
}

.width-11 {
    width: 100%;
}

.width-10 {
    width: 100%;
}

.width-9 {
    width: 100%;
}

.width-8 {
    width: 100%;
}

.width-7 {
    width: 100%;
}

.width-6 {
    width: 100%;
}

.width-5 {
    width: 100%;
}

.width-4 {
    width: 100%;
}

.width-3 {
    width: 100%;
}

.width-2 {
    width: 100%;
}

.width-1 {
    width: 100%;
}

@media only screen and (min-width: 781px) {   
    div.sra-logo-container {
        float: right;
    }
}

@media only screen and (min-width: 1000px) {
    .width-12 {
        width: 100%;
    }

    .width-11 {
        width: 91.666667%;
    }

    .width-10 {
        width: 83.333333%;
    }

    .width-9 {
        width: 75%;
    }

    .width-8 {
        width: 66.666667%;
    }

    .width-7 {
        width: 58.333333%;
    }

    .width-6 {
        width: 50%;
    }

    .width-5 {
        width: 41.666667%;
    }

    .width-4 {
        width: 33.333333%;
    }

    .width-3 {
        width: 25%;
    }

    .width-2 {
        width: 16.666667%;
    }

    .width-1 {
        width: 8.333333%;
    }

    div.header-contact-us xd-nav-button button {
        float: right;
    }

    div.header-contact-us {
        float: right;
    }

    div.header-contact-us p {
        text-align: right;
    }

    div.header-logo-container {
        width: 25%;
    }
}