@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Sorts+Mill+Goudy:ital@0;1&display=swap');

@font-face{
    font-family:'PlayfairDisplay';
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-Bold.ttf");
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-BoldItalic.ttf");
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-Italic.ttf");
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-SemiBold.ttf");
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-SemiBoldItalic.ttf");
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-Medium.ttf");
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-MediumItalic.ttf");
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-ExtraBold.ttf");
    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-ExtraBoldItalic.ttf");

    src:url("fonts/PlayfairDisplay/static/PlayfairDisplay-Regular.ttf");
    font-weight:normal;
    font-style:normal
}

@font-face{
    font-family:'SortsMillGoudy';
    src:url("fonts/SortsMillGoudy/SortsMillGoudy-Italic.ttf");
    src:url("fonts/SortsMillGoudy/SortsMillGoudy-Regular.ttf");
    font-weight:normal;
    font-style:normal
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

.title-container {
    display: flex;
    background-color: Snow; /*  SeaShell LightSteelBlue #b1aba6 Lavender*/

    flex-wrap: wrap;
    flex-basis: auto;
    padding: 10px;

    justify-content: space-evenly;
    align-items: center;
    width: 100%;

    flex-grow: 1;

}

.title-list {
    font-family: "Playfair Display", serif;
    font-style: normal;
    text-align: center;
    list-style: none;
    padding: 10px;
}
/*justify-content: center;
border-radius: 10px;
padding: 20px;
stretch     width: 100%;
 */
/*
    align-content: space-between;
    align-items: center;
    background-color: white;  SeaShell LightSteelBlue #b1aba6 Lavender
 */
 /*
     display: flex;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    flex-flow: raw wrap;

    justify-content: center;
    /*centers items on the line (the x-axis by default)*/

/*
align-items: center;
width: 100%;
*/

.menu-word{
    display: flex;
    text-align: center;
    margin: 0px;
    padding: 15px;
    background-color: black; /*  SeaShell LightSteelBlue #b1aba6 Lavender*/
    color: snow;
    left: 0;
    font-style: normal;
    font-weight:bold;
}

    .bottom-navigation {
        display: flex;
        position: relative;
        padding: 5px;
        justify-content: space-around;
        flex-direction: row;
        align-content: stretch; /* also make the child elements full height so the mouse hovers within the li at all times */
        height: 100%; /* this height needs to match the parent so the hover remains inside the li at all times */

        list-style: none;
    }

    .bottom-navigation-div {
        display: inline-block;
        background-color: Snow;
        z-index: 10;
    }


.playfair-display-PlayfairDisplay {
                       font-family: "Playfair Display", serif;
                       font-optical-sizing: auto;
                       font-weight: 500;
                       font-style: normal;
}

.sorts-mill-goudy-regular {
    font-family: "Sorts Mill Goudy", serif;
    font-weight: 400;
    font-style: normal;
}

.sorts-mill-goudy-regular-italic {
    font-family: "Sorts Mill Goudy", serif;
    font-weight: 400;
    font-style: italic;
}

.container {
    display: flex;
    flex-direction: column;
    background-color: Snow; /*  SeaShell LightSteelBlue #b1aba6 Lavender*/
    padding: 50px;
}

.container-bio {
    display: flex;
    flex-direction: column;
    background-color: Snow; /*  SeaShell LightSteelBlue #b1aba6 Lavender*/
    background-image: url("img/backgraound_sci.jpeg");
    padding: 50px;
}

.back-to-word{
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: black; /*  SeaShell LightSteelBlue #b1aba6 Lavender*/
    color: snow;
    word-spacing: normal;
}

nav a {
    text-align: center;
    text-decoration: black;
    background-color: white;
    display: flex;
    margin: 5px;
    text-emphasis: #020202;
    color: black;
    padding: 6px;
}

nav input {
    display:none;
}
nav input:checked ~ label span:last-child {
    display:none;
}
nav input:not(:checked) ~ label span:first-child {
    display:none;
}
nav {
    position:fixed;
    top:70px;
    right:10px;
    min-width:30px;
    min-height:30px;
    overflow:hidden;
    background-color: white  /*sample color*/

}
nav ul {
    overflow:hidden;
    width:10px;
    height:0px;
    padding:0px;
    margin: 0px;
    transition:width 0.7s, height 0.7s;
    list-style: none;
}
nav input:checked ~ ul {
    width:200px;
    height:200px;
}

.site-navigation {
    padding: 100px;
    background-color: Seashell;
    text-align: right;
}

.site-navigation a {
        padding: 50px;
        text-decoration: none;
        color: Seashell;
}

.site-navigation ul li:first-child {
    border: none;
}

.site-navigation ul li a:hover {
    background-color: #f2f2f2;
}

.banners-main {
    display: flex;
    justify-content: left; /*stretch     width: 100%; */
    align-self: auto;
    margin: 0px;
    padding: 0px;
}

.banners-main img {
    width: 100%;
    height: auto;
}

.intro-main div {
    display: flex;
    background-color: LightSteelBlue;
    font-family: PlayfairDisplay, sans-serif;
    font-size: 100px;
    text-align: justify;
    margin: 0px;
    padding: 0px;
}

list-main {
    padding: 0px;
    font-style: normal;
}

.list-main ul {
/*       display: flex;
 background-color: LightSteelBlue;*/
    list-style-type: square;
    margin: 0px auto;
    font-style: normal;
}

.list-main ol {
    /*       display: flex;
     background-color: LightSteelBlue;*/
    margin: 0px auto;
    font-weight:normal;
    font-style: normal;
}

.list-main li, ol {
    font-family: SortsMillGoudy, sans-serif;
    font-size: 22px;
    margin: 10px;
    padding: 0px;
    font-style: normal;
}
.main-footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: black;
text-align: center;
}

.social-main li {
    display: inline-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 0;
    align-items: center;
    margin: 10px;
}

div.emptyDiv {
    border: 1px solid black;
    width:30em;
    margin: 15px;
    display: flex;
    align-self: center;
}
div.emptyDivLeft {
    border: 1px solid black;
    width:30em;
    margin: 15px;
    display: flex;
}

div.emptyDivFull {
    border: 1px solid black;
    width:62em;
}

body.boxItem { /*      <div class="boxItem">2</div> border: 0px solid black */
    border: 0px;
    padding: 3em;
}

a {
    text-decoration: none;
    color: CornflowerBlue;
    background-color: transparent;
    font-weight: 900;
}
a:active, a:hover {
    outline:0
}


html{
    font-family: PlayfairDisplay, sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}

body, html {
    margin: 0;
    /* The image used
        background-image: url('img/background_split_manchester.jpeg');
*/
    /* Full height */
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-style: normal;
    /* Center and scale the image nicely */
}

h1{
    font-family: PlayfairDisplay, sans-serif;
    font-size: 82px;
    margin:0.67em 0;
    font-style: normal;
}

h2{
    font-family: SortsMillGoudy, sans-serif;
    font-size: 38px; /*46*/
    margin:0.67em 0;
    font-style: normal; /*italic;*/

}

h3{
    font-family: SortsMillGoudy, sans-serif;
    font-size: 22px;
    margin:0.67em 0;
    font-weight: bolder;
    font-style: normal;
}

h4{
    font-family: SortsMillGoudy, sans-serif;
    font-size: 22px;
    margin:0.67em 0;
    font-weight: normal;
    font-style: normal;
}

.CV-text {
   font-family: SortsMillGoudy, sans-serif;
    font-size: 22px;
}

p {
    font-family: SortsMillGoudy, sans-serif;
    font-size: 22px;
    margin:0 0 20px 0;
    padding: 0px;
    text-align: justify;

}

b, strong {
    font-weight:bold
}

em {
    font-style:italic
}

strong {
    font-weight:bold
}

.bg {
        /* The image used */
        background-color: #b1aba6;

        /* Full height */
        height: 100%;

        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
}

main, menu, nav, article, section, footer, header, figcaption, figure {
    display: block;
    margin: 10px;

}

mark {
    background:#ff0;
    color:#000
}
small {
    font-size:80%
}

sub, sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}

sup {
    top:-0.5em
}
sub {
    bottom:-0.25em
}

img {
    border:0
}

figure {
    margin:1em 40px
}

button, input, select, textarea {
    color:inherit;
    font:inherit;
    margin:0
}

button {
    overflow:visible
}

button, select {
    text-transform:none
}

body{
    -webkit-tap-highlight-color:#FFF498
}

.gigantic,.huge,.large,.bigger,.big,h1,h2,h3,h4,h5,h6{
    color:#222;
    font-weight:bold
}
.gigantic {
    font-size:110px;
    line-height:1.09;
    letter-spacing:-2px
}
.huge,h1 {
    font-size:68px;
    line-height:1.05;
    letter-spacing:-1px
}
.large, h2 {
    font-size:42px;
    line-height:1.14
}
.bigger, h3 {
    font-size:26px;
    line-height:1.38
}
.big, h4 {
    font-size:22px;
    line-height:1.38
}
.small, small {
    font-size:10px;
    line-height:1.2
}

hr {
    border: solid #ddd;
    border-width: 1px 0 0;
    clear:both;margin:10px 0 30px;
    height:0
}
svg {
    position:absolute;
    height:100%
}
svg path {
    fill:#e3e3e3
}
.nav {
    visibility:hidden;
    position:absolute;
    top:75px;
    right:0;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:100px;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin:0;
    padding:0;
    list-style:none;
    background-color:#e3e3e3;
    border:1px solid #111;
    border:1px solid rgba(17,17,17,0.15);
    opacity:0;
    z-index:10;
    -webkit-transition:opacity .3s ease-in-out,visibility 0s .3s;
    transition:opacity .3s ease-in-out,visibility 0s .3s
}
.nav.open {
    visibility:visible;
    opacity:1;
    -webkit-transition:opacity .3s ease-in-out;
    transition:opacity .3s ease-in-out
}
.nav:before {
    content:"";
    position:absolute;
    top:-12px;
    left:50%;
    -webkit-transform:translateX(-50%) rotate(45deg);
    transform:translateX(-50%) rotate(45deg);
    width:25px;
    height:25px;
    border:1px solid #111;
    border:1px solid rgba(17,17,17,0.15);
    background-color:#e3e3e3
}
.nav li {
    position:relative;
    width:100%;
    text-align:center;
    border-bottom:1px solid #111;
    border-bottom:1px solid rgba(17,17,17,0.15);
    background-color:#e3e3e3;
    overflow:hidden;
    z-index:10
}
.nav li:last-child {
    border-bottom:none
}
.nav li a {
    display:block;
    width:100%;
    height:100%;
    padding:5px 0;
    color:#111;
    font-size:12px;
    font-family:"Raleway",Helvetica,sans-serif;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition:background-color .2s ease-in-out;
    transition:background-color .2s ease-in-out
}
.nav li a:hover {
    background-color:#dbdbdb
}

.copyright {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    margin-bottom: 0;
    font-family: "Raleway", Helvetica, sans-serif;
    font-size: 12px
}
.wrapper .welcome{
    width:45%
}
.wrapper .welcome:after{
    content:"";
    display:block;
    width:1px;
    height:70px;
    background-color:#111
}
.wrapper .welcome h1 {
    margin-top:0;
    margin-bottom:30px;
    font-size:42px;
    font-family:"Raleway", Helvetica, sans-serif;
    font-weight:100
}
@media (max-width: 640px){
    .wrapper .welcome h1 {
        margin-bottom:20px;
        font-size:30px
    }
}
.wrapper .welcome p {
    max-width:450px;
    margin-bottom:30px }
@media (max-width: 1180px) {
    .wrapper .welcome:after {
        display:none
    }
    .wrapper .welcome p {
        margin-bottom:0
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}



.nav-toggle {
    position:relative;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:80px;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    cursor:pointer
}#hero header
.nav-toggle p {
    margin-bottom:0;
    font-size:14px;
    font-family:"Raleway",Helvetica,sans-serif;
    text-transform:uppercase
}#hero header
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
    content:"";
    position:relative;
    display:block;
    width:23px;
    height:2px;
    background-color:#111
}#hero header
.nav-toggle span:before {
    bottom:7px
}#hero header
.nav-toggle span:after {
    top:5px
}#hero header

.nav-base {
    visibility:hidden;
    position:absolute;
    top:75px;
    right:0;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:100px;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin:0;
    padding:0;
    list-style:none;
    background-color:#e3e3e3;
    border:1px solid #111;
    border:1px solid rgba(17,17,17,0.15);
    opacity:0;
    z-index:10;
    -webkit-transition:opacity .3s ease-in-out,visibility 0s .3s;
    transition:opacity .3s ease-in-out,visibility 0s .3s
}
.nav-base.open {
    visibility:visible;
    opacity:1;
    -webkit-transition:opacity .3s ease-in-out;
    transition:opacity .3s ease-in-out
}
.nav-base:before {
    content:"";
    position:absolute;
    top:-12px;
    left:50%;
    -webkit-transform:translateX(-50%) rotate(45deg);
    transform:translateX(-50%) rotate(45deg);
    width:25px;
    height:25px;
    border:1px solid #111;
    border:1px solid rgba(17,17,17,0.15);
    background-color:#e3e3e3
}
.nav-base li {
    position:relative;
    width:100%;
    text-align:center;
    border-bottom:1px solid #111;
    border-bottom:1px solid rgba(17,17,17,0.15);
    background-color:#e3e3e3;
    overflow:hidden;
    z-index:10
}
.nav-base li:last-child {
    border-bottom:none
}
.nav-base li a{
    display:block;
    width:100%;
    height:100%;
    padding:5px 0;
    color:#111;
    font-size:12px;
    font-family:"Raleway",Helvetica,sans-serif;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition:background-color .2s ease-in-out;
    transition:background-color .2s ease-in-out
}
.nav-base li a:hover{
    background-color:#dbdbdb
}#hero {
    position:relative;
    width:1440px;
    max-width:95%;
    height:600px;
    margin:30px auto;
    background-color:#efefef;
    overflow:hidden}@media (max-width: 768px) {#hero{margin:15px auto}}#hero