/* Main Styling */

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--lightBlue);
}

:root {
    --lightBlue: #00aeef;
    --darkBlue: #00395d;
    --grey0: #f1f3f8;
    --grey1: #d6e0f0;
    --grey2: #8d93ab;
    --grey3: #393b44;
}

* {
    box-sizing: border-box;
}

/* Menu Bar */

#menuBar {
    width: 100vw;
    height: 10vh;
    background: var(--darkBlue);
}


#menuLogo {
    width: 15%;
    height: 100%;
    background-image: url("/images/Barclays-logo.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


/* Main Body */

#mainBodyContainer {
    width: 100vw;
    background: var(--grey1);
}

/* Body Sections */

.bodySection {
    width: 100vw;
    height: 60vh;
    /* background: coral; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.bodySectionTall {
    width: 100vw;
    height: 90vh;
    /* background: coral; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.s-1 {
    width: 10%;
    height: 100%;
}

.s-2 {
    width: 20%;
    height: 100%;
}

.s-3 {
    width: 30%;
    height: 100%;
}

.s-4 {
    width: 40%;
    height: 100%;
}

.s-5 {
    width: 50%;
    height: 100%;
}

.s-6 {
    width: 60%;
    height: 100%;
}

.s-7 {
    width: 70%;
    height: 100%;
}

.s-8 {
    width: 80%;
    height: 100%;
}

.s-9 {
    width: 90%;
    height: 100%;
}

.s-10 {
    width: 100%;
    height: 100%;
}

.col {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
}

.center {
    align-items: center;
    justify-content: center;
}

.textHolder {
    max-width: 80%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.textHolder h1 {
    color: #2d3436;
    width: 100%;
    font-size: 3vw;
    margin: 0;
    margin-bottom: 0.5vw;
}

.textHolder p {
    color: #2d3436;
    width: 100%;
    margin: 0;
}


/* PlaceHolder */

.imagePlaceholder {
    width: 80%;
    height: 80%;
    background-color: crimson;
    background-image: url("../images/phonePlaceholder.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.iframeContainer {
    height: 80vh;
    width: 37vh;
    max-width: 90vw;
}

/* Footer */

#footerContainer {
    width: 100vw;
    height: 15vh;
    background: var(--grey3);
}