@font-face {
    font-family: "FSSienaWeb-ExtraLight";
    src: url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-ExtraLight.eot');
    src: url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-ExtraLight.eot') format('embedded-opentype'),
        url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-ExtraLight.woff2') format('woff2'),
        url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: "FSSienaWeb-Light";
    src: url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Light.eot');
    src: url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Light.eot') format('embedded-opentype'),
        url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Light.woff2') format('woff2'),
        url('FSSienaWeb-Light.woff') format('woff');
}

@font-face {
    font-family: "FSSienaWeb-Regular";
    src: url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Regular.eot');
    src: url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Regular.eot') format('embedded-opentype'),
        url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Regular.woff2') format('woff2'),
        url('FSSienaWeb-Regular.woff') format('woff');
}


@font-face {
    font-family: "FSSienaWeb-Medium";
    src: url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Medium.eot');
    src: url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Medium.eot') format('embedded-opentype'),
        url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Medium.woff2') format('woff2'),
        url('https://sywebhosting.co.uk/45_charles_street/assets/fonts/FSSienaWeb-Medium.woff') format('woff');
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    outline: 0;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {

    font-family: FSSienaWeb-Regular, sans-serif;
    background: #007b72;
    margin: 0 auto;
}


a:link,
a:visited,
a:active {
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: underline;
}



p {
    text-align: left;

}

.text-inner-left p {
    color: #ffffff;

}



body:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url("https://sywebhosting.co.uk/45_charles_street/assets/images/waves.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h1 {
    text-align: left;
    color: #ffffff;
    line-height: 40px
}


.header {
    background: transparent;
    height: 100vh
}

#panel--brand-intro__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 800px
}


img {
    display: block;
    width: 100%;
    height: auto;
}

.text-outer-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    height: 100vh
}

.text-inner-right .bnp__logo {
    width: 240px
}

.text-inner-right .eia__logo {
    width: 140px
}

.text-inner-right .beam__logo {
    width: 210px
}


.text-inner-left {
    flex: 0 0 60%;
    padding-right: 2%;
    align-self: center;
    /* background-color: aqua; */


}

.text-inner-right {
    flex: 0 0 20%;
    padding-left: 0%;
    align-self: center;
    /* background-color: burlywood; */
}

@media only screen and (min-width: 1980px) {


    .dev__base {
        padding-top: 10px;
    }




    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        /* background: orange; */
        padding-left: 40px
    }

    .text-inner-left p {
        font-size: 31px;
        margin: 48px 0 0 0;
        line-height: 59px;
        letter-spacing: 1px;
        /* color: orange */
    }

    .text-inner-right p {
        font-size: 19px;
        letter-spacing: 0px;
        margin: 30px 0;
        line-height: 25px;
        color: #ffffff;
    }

    h1 {
        font-size: 42px;
        line-height: 50px;
        letter-spacing: 2px;
    }



    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }

}



@media only screen and (min-width: 1920px) and (max-width: 1979px) {

    .dev__base {
        padding-top: 10px;
    }




    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        /* background: orange; */
        padding-left: 40px
    }

    .text-inner-left p {
        font-size: 30px;
        margin: 48px 0 0 0;
        line-height: 58px;
        letter-spacing: 1px;
        /* color: blue */
    }

    .text-inner-right p {
        font-size: 19px;
        letter-spacing: 0px;
        margin: 26px 0;
        line-height: 25px;
        color: #ffffff;
    }

    h1 {
        font-size: 40px;
        letter-spacing: 2px;
    }



    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }








}

@media only screen and (min-width: 1700px) and (max-width: 1919px) {

    .dev__base {
        padding-top: 20px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        /* background: green; */
        padding-left: 40px
    }

    .text-inner-left p {
        font-size: 28px;
        margin: 40px 0 0 0;
        line-height: 55px;
        letter-spacing: 1px;
        /* color: red */
    }



    .text-inner-right p {
        font-size: 18px;
        letter-spacing: 0px;
        margin: 20px 0;
        line-height: 23px;
        color: #ffffff;
    }


    h1 {
        font-size: 37px;
        letter-spacing: 2px;

    }

    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }


}




@media only screen and (min-width: 1550px) and (max-width: 1699px) {

    .dev__base {
        padding-top: 10px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        padding-left: 40px;
        /* background: lightcoral */
    }

    .text-inner-left p {
        font-size: 25px;
        margin: 40px 0 0 0;
        line-height: 52px;
        letter-spacing: 1px;
        /* color: yellow */
    }



    .text-inner-right p {
        font-size: 17px;
        letter-spacing: 0px;
        margin: 18px 0;
        line-height: 23px;
        color: #ffffff;
    }

    h1 {
        font-size: 33px;
        letter-spacing: 2px;

    }

    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }


}

@media only screen and (min-width: 1461px) and (max-width: 1549px) {

    .dev__base {
        padding-top: 10px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        /* background: lightseagreen; */
        padding-left: 40px
    }

    .text-inner-left p {
        font-size: 24px;
        margin: 30px 0 0 0;
        line-height: 52px;
        letter-spacing: 1px;
        /* color: aqua */
    }

    .text-inner-right p {
        font-size: 17px;
        letter-spacing: 0px;
        margin: 16px 0;
        line-height: 22px;
        color: #ffffff;
    }

    h1 {
        font-size: 30px;
        letter-spacing: 2px;

    }

    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


}

@media only screen and (min-width: 1367px) and (max-width: 1460px) {

    .dev__base {
        padding-top: 10px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        /* background: thistle; */
        padding-left: 40px
    }

    .text-inner-left p {
        font-size: 22px;
        margin: 30px 0 0 0;
        line-height: 52px;
        letter-spacing: 1px;
        /* color: thistle */
    }

    .text-inner-right p {
        font-size: 17px;
        letter-spacing: 0px;
        margin: 16px 0;
        line-height: 22px;
        color: #ffffff;
    }

    h1 {
        font-size: 27px;
        letter-spacing: 2px;
        line-height: 33px;

    }

    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


}


@media only screen and (min-width: 1240px) and (max-width: 1366px) {

    .dev__base {
        padding-top: 0px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        /* background: darkkhaki; */
        padding-left: 40px
    }

    .text-inner-left p {
        font-size: 20px;
        margin: 30px 0 0 0;
        line-height: 49px;
        letter-spacing: 1px;
        /* color: bisque */
    }

    .text-inner-right p {
        font-size: 17px;
        letter-spacing: 0px;
        margin: 16px 0;
        line-height: 22px;
        color: #ffffff;
    }

    h1 {
        font-size: 25px;
        letter-spacing: 2px;
        line-height: 33px;

    }

    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


}



@media only screen and (min-width: 1200px) and (max-width: 1239px) {

    .dev__base {
        padding-top: 0px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        /* background: crimson; */
        padding-left: 40px
    }

    .text-inner-left p {
        font-size: 20px;
        margin: 30px 0 0 0;
        line-height: 49px;
        letter-spacing: 1px;
        /* color: yellow */
    }

    .text-inner-right p {
        font-size: 17px;
        letter-spacing: 0px;
        margin: 16px 0;
        line-height: 22px;
        color: #ffffff;
    }

    h1 {
        font-size: 23px;
        letter-spacing: 2px;
        line-height: 33px;

    }

    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


}

@media only screen and (min-width: 1099px) and (max-width: 1199px) {

    .dev__base {
        padding-top: 0px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        /* background: lightsteelblue; */
        padding-left: 40px
    }


    .text-inner-left p {
        font-size: 17px;
        margin: 30px 0 0 0;
        line-height: 46px;
        letter-spacing: 1px;
        /* color: lightsalmon */
    }

    .text-inner-right p {
        font-size: 17px;
        letter-spacing: 0px;
        margin: 10px 0;
        line-height: 22px;
        color: #ffffff;
    }

    h1 {
        font-size: 22px;
        letter-spacing: 2px;
        line-height: 30px;

    }

    .text-inner-right p.dev__small {
        margin: 20px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


}

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

    .dev__base {
        padding-top: 10px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        padding-left: 40px;
        /* background: red */
    }



    .text-inner-left p {
        font-size: 16px;
        margin: 30px 0 0 0;
        line-height: 44px;
        letter-spacing: 1px;
        /* color: lightgoldenrodyellow */
    }

    /*.text-inner-left p br {display:none;}*/

    .text-inner-right p {
        font-size: 15px;
        letter-spacing: 0px;
        margin: 15px 0;
        line-height: 18px;
        color: #ffffff;
    }

    h1 {
        font-size: 20px;
        letter-spacing: 2px;
        line-height: 30px;

    }

    .text-inner-right p.dev__small {
        margin: 10px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


}


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

    .dev__base {
        padding-top: 10px;
    }


    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        padding-left: 40px;
        /* background: orange */
    }

    .text-inner-left p {
        font-size: 14px;
        margin: 30px 0 0 0;
        line-height: 45px;
        letter-spacing: 1px;
        /* color: pink */
    }





    /* .text-inner_frame-left p br {
        display: none
    } */

    /*.text-inner-left p br {display:none;}*/

    .text-inner-right p {
        font-size: 15px;
        letter-spacing: 0px;
        margin: 15px 0;
        line-height: 18px;
        color: #ffffff;
    }

    h1 {
        font-size: 20px;
        letter-spacing: 2px;
        line-height: 30px;

    }

    .text-inner-right p.dev__small {
        margin: 10px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


}



@media only screen and (min-width: 769px) and (max-width: 899px) {


    .dev__base {
        padding-top: 10px;
    }



    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #ffffff;
        padding-left: 40px;
        /* background: lightblue */
    }

    .text-inner-left p {
        font-size: 16px;
        margin: 22px 0 0 0;
        line-height: 26px;
        letter-spacing: 1.4px;


    }

    .text-inner-left p {
        font-size: 16px;
        margin: 28px 0 0 0;
        line-height: 30px;
        letter-spacing: 1.4px;
        /* color: orange */
    }

    /* .text-inner_frame-left p br {
        display: none
    } */

    /*.text-inner-left p br {display:none;}*/

    .text-inner-right p {
        font-size: 15px;
        letter-spacing: 0px;
        margin: 15px 0;
        line-height: 18px;
        color: #ffffff;
    }

    h1 {
        font-size: 24px;
        letter-spacing: 2px;

    }

    .text-inner-right p.dev__small {
        margin: 10px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


}





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

    .dev__base {
        padding-top: 10px;
    }

    .mobile_footer-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .mobile_footer {
        flex: 0 0 50%;
    }

    .text-inner-left {
        flex: 0 0 calc(100% - 80px);
        padding-right: 0px;
        padding-left: 40px;
        align-self: center;
        padding-right: 40px;

    }

    .text-inner-right {
        flex: 0 0 calc(100% - 40px);

        padding-left: 40px;
        align-self: center;
        padding-top: 40px
    }

    .text-inner_frame-left {
        vertical-align: top;
    }

    .text-inner_frame-right {
        vertical-align: top;
        height: 100%;
        border-left: 0px solid #ffffff;
        padding-left: 0px
    }

    .text-inner-left p {
        font-size: 19px;
        margin: 30px 0 0 0;
        line-height: 40px;
        letter-spacing: 1px;
        /* color: aqua */
    }

    .text-inner-left p br {
        display: none;
    }

    .text-inner-right p {
        font-size: 18px;
        letter-spacing: 0px;
        margin: 20px 0;
        line-height: 22px;
        color: #ffffff;
    }

    h1 {
        font-size: 24px;
        letter-spacing: 2.3px;

    }

    h1 br {
        display: none;
    }

    .text-inner-right p.dev__small {
        margin: 10px 0 0px 0;
    }

    .text-inner-right .bnp__logo {
        width: 220px;
        padding-bottom: 15px;
    }

    .text-inner-right .eia__logo {
        width: 120px
    }

    .text-inner-right .beam__logo {
        width: 190px
    }


    #panel--brand-intro__logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 80%;
    }

}





.lazy-fadeup {
    transition: transform 1s, opacity 1s;
    transform: translateY(100px);
    opacity: 0.2;
}

.lazy-fadeup.is-loaded {
    transform: translateY(0px);
    opacity: 1;
}