@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Shippori+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    /* background-color: #fcfbf7; */
    font-family: 'Roboto', 'Quicksand', "Shippori Antique", Calibri, 'Trebuchet MS', sans-serif;
    color: #343434;
    margin: 0;
    height: 0;
}

.header-bar {
    /* font-size: 1.2vw; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    height: 100px;
    position: fixed;
    width: 100%;
    top:0;
    line-height: normal;
    z-index: 20;
    border-bottom: 1px black solid;
}

header {
    text-align: left;
    position: relative;
    width: 45%;
    color: #fcfbf7;
    padding-left: 5.5%;
}

header>h2 {
    padding-left: 2%;
}

header>h2::first-letter {
    color: #b62127;
}

header>div.bar {
    width: 3.5vw;
    height: 3px;
    background-color: #b62127;
    margin: 6px 0;
    position: relative;
}

header>div.bar1 {
    margin-left: 2.3%;
    margin-right: 1.5%;
}

header>div.bar2 {
    margin-left: 1.5%;
}

.northern-accounting {
    display: inline-block;
    margin-top: 10px;
}

.services-pages {
    float: left;
    display: none;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: absolute;
    /* left: 50%; */
    top: 100px;
    background-color: rgba(0, 0, 0, 0.65);
    width: 150px;
    /* height: 130px; */
    text-align: left;
}

.service-page-wrapper:hover>div>.services-pages {
    display: flex;
}

.service-page-wrapper:hover>div>span {
    color: #b62127;
}

.services-pages>a {
    text-align: left;
}

.service-1 {
    padding-top: 15px;
    padding-bottom: 10px;
}

.service-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.service-3 {
    padding-top: 10px;
    padding-bottom: 20px;
}

.service-page-wrapper:hover {
    padding-top: 40px;
    padding-bottom: 40px;
}

.service-page-wrapper:hover>a {
    color: #b62127;
}

.northern-accounting, .services {
    font-size: 1.5vw;
}

.colored {
    color: #b62127;
}

.logo {
    width: 23vw;
    height: auto;
    float:  left;
    /* padding: .5%; */
    margin: 0 1vw 0 2px;    
}

header>hr {
    margin: 0;
    border-color: #1f1f1f;
}

nav {
    font-family: 'Poppins', 'Quicksand', 'Shippori Antique', 'Oswald', Calibri, 'Trebuchet MS', sans-serif;
}

nav>a, .current-page, .mobile-menu>a, nav>.service-page-wrapper {
    width: 150px;
    padding-top: 4%;
    padding-bottom: 4%;
    text-align: center;
}

.services-pages>a {
    text-align: left;
}

a:hover {
    color: #b62127;
    transform: scale(1.05);
    transition: 0.1s;
}

nav {
    /* float: right; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    color: #343434;
    width: 50%;
    margin-right: 5%;
}

.current-page{
    color: #b62127;
    /* transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1); */
    /* background-color: #34312a; */
}

.first {
    padding-left: 1%;
}
/* 
.current-page.first{
    padding-left: 12.4%;
    padding-right: 9.7%;
}

.current-page.last{
    padding-left: 9.7%;
    padding-right: 6%;  
} */

nav>a::after, a {
    color: #343434;
    text-decoration: none;
}

.background {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 1;
    top: 0;
}

.mobile-background {
    display: none;
    position: absolute;
    top: 16vw;
    height: auto;
}

section {
    text-align: left;
    margin: 13vh 20vw 2vh 20vw;
    line-height: 26px;
}

.opening-p {
    text-align: center;
    font-size: 25px;
    line-height: 35px;
    margin-top: 6vh;
    margin-bottom: 6vh;
    color: #b62127;
}

.line-break {
    margin-bottom: 3ch;
}

.service.break {
    padding-bottom: 110px;
}

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

article>p>a, article>p>a::after {
    font-weight: bold;
    color: #b62127  ;
    transition: 0.2s;
}   


h4 {
    font-size: 20px;
    padding-bottom: 7vh;
}

.service {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    /* align-items: center; */
}

.service-text {
    width: 40%;
}

.service-img {
    width: 60%;
    height: auto;
}

.image-span-left {
    width: 100%;
    height: auto;
    padding-right: 17%;
}

.image-span-right {
    width: 100%;
    height: auto;
    padding-left: 17%;
}

.mobile-span-services {
    display: none;
}

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.list-item>img {
    width: 6%;
    height: auto;
    float: left;
    vertical-align: middle;
}

.list-item>p {
    text-align: left;
    padding-left: 10%;
}

span>.list-item {
    padding-left: 50px;
    margin-top: 1vh;
    width: 350px;
}

.tighter {
    margin: 13vh 8vw 2vh 8vw;
}

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

.tighter>.justify {
    padding-left: 10vw;
    padding-right: 10vw;
}

.has-background-image {
    background-color: white;
    margin: 32vw 0 0 0;
    padding: 2% 22% 8vh 22%;
    width: 100%;
}

.has-background-image2 {
    background-color: white;
    margin: 10vw 0 0 0;
    padding: 11% 22% 8vh 22%;
    width: 100%;
}

article>p.ending-paragraph {
    margin-bottom: 3vh;
}

h3 {
    margin-bottom: 8vh;
    font-size: 30px;
    margin-top: 6vh;
}

.contact-title {
    margin-bottom: 6vh;
    margin-top: 12vh;
}

article.justify {
    justify-content: space-evenly;
}

.left-justify {
    align-items: left;
}

.justify.break {
    margin-top: 2vh;
}

.justify>a {
    padding: 1.5vh 2.5vw;
    background-color: #f5f5f5;
    color: #b62127;
    font-size: 30px;
    border-radius: 5px;
    width: 18vw;
    
    /* height: initial; */
}

.justify-col {
    flex-direction: column;
    justify-content: space-between;
}

.justify-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 1.5vh 0;
}

.index-grid-object {
    width: 250px !important;
    height: 350px !important;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 0 !important;
}

.middle-grid-object {
    margin: 0 2vw;
}

.index-grid-object>.grid-object-img {
    margin-top: 9.5vh;
    width: 40px;
    height: auto;
    fill: #b62127;
}

.index-grid-object>.grid-object-title {
    font-size: 18px;
    margin-top: 1.5vh;
    width: 240px;
}

.index-grid-object>.grid-object-rule {
    width: 100px;
    color: #343434;
    margin: 1vh 0;
}

.index-grid-object>.grid-object-info {
    font-size: 15px;
    width: 200px;
    color: #343434;
}

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

.service-line {
    border-color: #b62127;
}

.contact-p {
    margin-top: 6vh;
}

.contact-button {
    margin-left: 0;
    height: initial !important;
    position: fixed;
    left: 85%;
}

.contact-button-top {
    top: 48%;
}

.contact-button-bottom {
    top: 58%;
}

#contact-button {
    border-radius: 20px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #b62127;
    border: 3px solid #b62127;
    background-color: white;
    width: 14vw;
    padding: 10px 0;
}

#contact-button:hover {
    color: white;
    background-color: #b62127;
    cursor: pointer;
}

.justify>a:hover {
    color: #b62127;
}


.justify>a>ul>li {
    padding-left: 1vw;
    padding-top: 5px;
    font-size: 16px;
}

#title {
    list-style: none;
    font-size: 30px;
    padding-bottom: 5px;
    text-align: center;
    padding-left: 0;
}

#taxation, #accounting, #advice {
    position: absolute;
}

#taxation {
    top: 300px;
}

#accounting {
    top: 1250px;
}

#advice {
    top: 1990px;
}


.employee-intro {
    display: inline-block;
    margin-bottom: 6vh;
}

.employee-intro.last {
    margin: 0;
    margin-bottom: 2vh;
}

#g-intro {
    margin-bottom: 0;
}

#g-intro.open {
    display: none;
}

.more {
    display: block;
    color: #b62127;
    margin-bottom: 6vh;
    margin-top: 10px;
    width: 13%;
}

.more:hover {
    cursor: pointer;
}

.more::after {
    float: default;
}

#full-intro {
    display: none;
}

#full-intro.open {
    display: block;
}

/* article {
    width: 60vw;
    padding-left: 10vw;
    padding-right: 10vw;
} */

.g-map {
    width: 30vw;
    height: 53vh;
}

.big {
    font-size: xx-large;
    margin-bottom: 3vh;
}

.big>a {
    color: #b62127;
}

label {
    font-size: 18px;
    margin-bottom: 0.5vh;
}

input, textarea {
    border-radius: 10px;
    border: 1px solid #cacaca;
    margin-bottom: 0.5vh;
    padding-left: 10px;
    font-size: 1vw;
}

textarea {
    resize: none;
    margin-bottom: 10px;
}

.sent-form {
    margin-top: 20px;
    height: 45px;
    display: inline-block;
}

.form-error {
    color: #aa0000;
}

input:focus, textarea:focus {
    outline: none;
    border: none;
    box-shadow: 0 0 0 3px #b6b6b6;
    margin-bottom: 0.5vh;
}

.body>label, .field>label {
    padding-right: 27.5vw;
}

.field>input {
    width: 30vw;
    margin-top: 0.5vh;
    margin-bottom: 1vh;
    height: 4vh;
}

.body>textarea {
    width: 30vw;
    height: 15vh;
    margin-top: 0.5vh;
    font-family: inherit;
}

.button {
    border-radius: 20px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #b62127;
    /* border: 2px solid #333333; */
    border: 3px solid #b62127;
    background-color: white;
    /* width: 20%; */
    padding: 10px 10%;
    margin-left: 11vw;
    margin-top: 15px;
}

.button:hover {
    color: white;
    background-color: #b62127;
    transform: scale(1.05);
    transition: 0.1s;
}

.button:focus {
    box-shadow: none;
    border: 3px solid #b62127;
    background-color: #b62127;
    color: #343434 !important;
}

.mobile-address-wrap {
    margin-top: 5vh;
    margin-bottom: 5vh;
    text-align: center;
}

.mobile-address {
    display: none;
    color: #b62127;
    margin: 6px;
}

.mobile-address:hover {
    transition: none;
    transform: none;
}

.desktop-contact-info>h3 {
    margin: 0;
}

.desktop-contact-info>a {
    color: #b62127;
    
}

form {
    text-align: left;
}

/* form>label {
    text-align: left;
    margin-left: 25%;
}

form>input {
    text-align: right;
    margin-right: 10%;
} */

div.legal-stuff {
    text-align: center;
    background-color: white;
}

.legal-stuff>img:hover {
    transition: 0.2s;
    transform: scale(1.5)
}

img.cpa, img.tax-agent, img.simplefund {
    height: auto;
    vertical-align: middle;
}

img.cpa {
    width: 25vh;
}

img.tax-agent {
    width: 20vh;
    margin: 0 2.5vw;
}

img.simplefund {
    width: 20vh;
}

.split {
    border: 0.4vh solid #b62127;
    /* padding-bottom: 2vh; */
}

footer {
    /* background-color: #b62127; */
    text-align: center;
    background-color: #343434;
    /* font-size: 0.9vw; */
    /* border-top: 0.8px solid #1f1f1f; */
}

.liability_clause {
    text-align: center;
    font-size: x-small;
    /* padding-top: 1vh; */
    padding-left: 12px;
    padding-bottom: 0.5vh;
    background-color: white;
}

footer>div {
    padding-top: 2vh;
}

article {
    vertical-align: bottom;
}

.employee {
    margin-bottom: 1.2vh;
    font-size: 19px;
}

.employee>b {
    font-size: 23px;
}

.employee-top {
    margin-top: 0.5vh;
}

.offices {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 22vw;
    padding-right: 22vw;
    /* margin: 0 35vw; */
    background-color: #343434;
    text-align: left;
}

div.offices>div {
    margin-bottom: 2vh;
}

.office-name {
    padding-bottom: 1vh;
    font-size: 17px;
}

.office-name, .space {
    color: white;
}

.address {
    margin: 0;
    font-size: 16px;
    padding-bottom: 1.5vh;
}

.address>a, .address>span {
    padding: 0;
    font-weight: bold;
    text-decoration: underline;
    color: white;
}

.space {
    margin-bottom: 4px;
}

.hamburger {
    margin: auto 0;
    display: none;
    cursor: pointer;
    margin-left: 10%;
    margin-right: 10%;
}

.hamburger>div.bar {
    width: 35px;
    height: 3px;
    background-color: #343434;
    margin: 6px 0;
    transition: 0.4s;
    position: relative;
    /* z-index: 20; */
}

.open .bar1 {
    -ms-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
    opacity: 0;
    /* width: 0px; */
}

.open .bar3 {
    -ms-transform: rotate(45deg) translate(-6.5px, -7.3px);
    transform: rotate(45deg) translate(-6.5px, -7.3px);
}

.open .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.mobile-menu {
    display: none;
    position: absolute;
    vertical-align: top;
    top: 16vw;
    left: 0;
    height: calc(100vh - 16vw);
    width: 100vw;
    
    background-color: #b62127;
}

.mobile-menu>hr {
    border: 0.05vh solid #1f1f1fb4;
    width: 100%;
}

.mobile-menu>a {
    color: #ffffff;
}

@media only screen and (min-height: 1600px) {
    .opening-p {
        font-size: 30px;
    }
    
    p {
        font-size: 25px;
    }

    .index-grid-object {
        width: 350px !important;
        height: 350px !important;
    }

    .index-grid-object>.grid-object-img {
        margin-top: 3.5vh;
        width: 40px;
        height: auto;
        fill: #b62127;
    }
    
    .index-grid-object>.grid-object-title {
        font-size: 23px;
        margin-top: 1.5vh;
        width: 240px;
    }
    
    .index-grid-object>.grid-object-rule {
        width: 100px;
        color: #343434;
        margin: 1vh 0;
    }
    
    .index-grid-object>.grid-object-info {
        font-size: 20px;
        width: 200px;
        color: #343434;
    }
}

@media only screen and (max-width: 1200px) {
    .background {
        top: 100px;
    }

    .has-background-image {
        padding: 8% 14% 8vh 14%;
    }
    
    .has-background-image2 {
        padding: 18% 14% 8vh 14%;
    }
    
    .tighter {
        margin: 13vh 3vw 2vh 3vw;
    }

    .desktop-contact-info {
        width: 50%;
    }

    .g-map {
        width: 37vw;
        /* height: 32vh; */
    }

    .call-us {
        text-align: left;
        font-size: x-large
    }

    .index-grid-object {
        height: 30vw !important;
        width: 30vw !important;
    }

    .index-grid-object>.grid-object-img {
        margin-top: 2vw;
    }

    .index-grid-object>.grid-object-title {
        font-size: 16px;
    }

    #taxation {
        top: 280px;
    }
    
    #accounting {
        top: 1360px;
    }
    
    #advice {
        top: 2150px;
    }

    input, textarea {
        font-size: 2vw;
    }

    .g-recaptcha {
        transform:scale(0.77);
        transform-origin:0 0;
    }

    .offices {
        padding-left: 8vw;
        padding-right: 8vw;
    }
}

@media only screen and (max-width: 640px) {
    * {
        max-width: 100vw;
    }

    .background {
        display: none;
    }

    .mobile-background {
        display: block;
    }

    .header-bar {
        height: 16vw;
        width: 100vw;
    }
    nav {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .computer-logo {
        display: none;
    }

    .mobile-logo {
        display: block;
    }

    .logo {
        width: 50vw;
        margin: 0 0 0 0.3vw;    
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 30px;
        /* margin-bottom: 10px; */
        margin-top: 0;
    }

    p {
        font-size: 15px;
    }

    .big {
        font-size: 30px;
        width: 90vw;
    }

    article.justify {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .justify>a {
        width: 80vw;
    }

    .service-links {
        list-style-position: inside;
        padding-left: 10px;
        margin-bottom: 10px;
        height: 26vh;
    }

    header>br {
        display: none;
    }

    section {
        text-align: left;
        margin: 18vw 15vw 4vh 15vw;
    }

    section>hr {
        width: 20vw;
        margin: 1vh 0 1vh 25vw;
    }

    .opening-p {
        margin-top: 0;
        font-size: 25px;
    }

    p {
        font-size: 18px;
    }

    .tighter {
        margin: 17vw 4vw 0 4vw;
    }

    .has-background-image {
        margin: 50vw 0 0 0;
        padding: 30vw 4vw 6vh 4vw;
    }

    .has-background-image2 {
        margin: 50vw 0 0 0;
        padding: 30vw 4vw 6vh 4vw;
    }

    .tighter>.justify {
        padding-left: 0;
        padding-right: 0;
    }
    
    .justify-grid {
        flex-direction: column;
        margin: 0;
    }
    
    .index-grid-object {
        width: 80vw !important;
        height: 80vw !important;
        margin-top: 2vh;
    }

    .index-grid-object>.grid-object-img {
        margin-top: 15vw;
        width: 60px;
    }
    
    .index-grid-object>.grid-object-title {
        font-size: 25px;
        margin-top: 2vw;
        margin-bottom: 3vw;
        line-height: normal;
    }
    
    .index-grid-object>.grid-object-info {
        margin-top: 3vw;
        font-size: 20px;
    }
    
    .index-grid-object>.grid-object-rule {
        margin: 1vh 0;
        font-size: 20px;
    }

    #contact-button {
        width: 35%;
        font-size: 18px;
        top: 90%
    }

    .contact-button-top {
        left: 10%;
    }
    
    .contact-button-bottom {
        left: 56%
    }

    img.cpa {
        width: 13vh;
    }
    
    img.tax-agent {
        width: 13vh;
    }

    img.simplefund {
        width: 13vh;
    }

    .liability_clause {
        font-size: 2vw;
    }

    #taxation {
        top: 340px;
    }
    
    #accounting {
        top: 1515px;
    }
    
    #advice {
        top: 2590px;
    }

    .mobile-align-header {
        text-align: left;
        padding: 2vh 0;
    }

    .offices {
        padding-bottom: 2vh;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .address {
        font-size: 14px;
    }

    .address.phone>a {
        height: 48px;
    }

    .office-name {
        font-size: 15px;
    }

    .desktop-contact-info {
        display: none;
    }

    .mobile-contact-info {
        display: block;
    }

    .service {
        display: block;
        flex-wrap: none;
        justify-content: none;
        /* align-items: center; */
    }

    .service.break {
        padding-bottom: 2vh;
    }

    .image-span-left {
        display: none;
        padding-right: 0;
    }
    
    .image-span-right {
        width: 100%;
        height: auto;
        padding-left: 0;
    }

    span>.list-item {
        padding-left: 0;
    }

    .mobile-span-services {
        display: block;
        width: 100% !important;
    }

    .mobile-img {
        width: 100%;
        height: auto;
        margin-top: 5vh;
    }

    .service>p {
        width: 100%;
    }

    .service>img {
        display: none;
    }

    .more {
        width: 25%;
    }

    input {
        width: 92vw !important;
    }

    .button {
        width: 200px !important;
        margin: 0;
    }

    .mobile-address {
        display: block;
    }

    .justify-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    input, textarea {
        font-size: 16px;
    }

    .body>textarea {
        width: 92vw;
        height: 15vh;
        padding-top: 6px;
    }

}
@media only screen and (max-width: 465px) {
    .address {
        font-size: 12px;
    }
    
    .justify-grid {
        flex-direction: column;
        margin: 0;
    }
    
    .index-grid-object {
        width: 80vw !important;
        height: 80vw !important;
        margin-top: 1.5vh;
    }

    .index-grid-object>.grid-object-img {
        margin-top: 8vw;
        width: 50px;
        height: auto;
    }
    
    .index-grid-object>.grid-object-title {
        font-size: 22px;
        margin-top: 1vw;
        margin-bottom: 1vw;
        line-height: normal;
    }
    
    .index-grid-object>.grid-object-info {
        margin-top: 0;
        font-size: 18px;
    }
}

@media only screen and (max-width: 370px) {
    .index-grid-object>.grid-object-rule {
        /* margin: 0.5vw 0;
        font-size: 20px; */
        display: none;
    }
}

/* #c9af69 */