html {
    position: relative;
    min-height: 100%;
}

body {
    animation: opacity-animation 0.1s;
    animation-timing-function: linear;
}

.title-rectangle {
    height: 13ex;
    width: 100%;
    background-color: #183B7A;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 9ex;
    margin-bottom: 3ex;
}

.title-text {
    color: white;
    font-size: 7.7ex;
}

.subtitle-container {
    margin: auto;
    width: 80%;
    text-align: center;
    padding-bottom: 3ex;
}

.subtitle-text {
    font-family: 'Oxygen', sans-serif;
    text-align: center;
    font-size: 2.8ex;
}

#note-dark-text, #privacy-note-dark-text {
    text-decoration: none;
    color: black;
}


.content-text {
    overflow-wrap: break-word;
    font-family: 'Oxygen', sans-serif;
    text-align: justify;
    font-size: 2.4ex;
}

.centered-text-square {
    height: 100%;
    font-family: 'Oxygen', sans-serif;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.rightside-container {
    height: 100%;
    width: 100%;
}

.contact-message {
    max-height: 40ex;
}

.alert-container {
    font-size: 1.8ex;
}

div.alert-container div:first-child {
    text-align: center;
}

/*Arrow*/
.dark-arrow, .light-arrow {
    margin-left: 0.5ex;
    width: 6%;
    height: 5%;
    margin-bottom: -0.5ex;
}

.light-arrow {
    content: url(/icons/right-arrow-light.png);
}

.dark-arrow {
    content: url(/icons/right-arrow-dark.png);
}

#paging-nav {
    text-align: center;
}

#paging-nav a.btn-primary {
    background-color: #183B7A;
    border-color: #183B7A;
    box-shadow: none;
}

@keyframes opacity-animation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*Idk why 'img' element in 'Team.cshtml' doesn't see 'Team.cshtml.css' styles*/
@media only screen and (min-width: 768px) and (max-width: 991px) {

    #photo_of_lawyer {
        width: 95%
    }
}