* {
    box-sizing: border-box;
}

body {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto','Helvetica','Arial',sans-serif;
    justify-content: space-between;
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    text-align: center;
    font-size:1em;
    color: black;
    direction: ltr;
    text-align: left;
  }
  
body {
    background: #6089C1 top left repeat;
    /* background: none; */
}

div.pagecontainer{
    background: #6089C1; /* for none css3 browsers */
    width: 95%;
    padding: 0px;
    margin: 0px auto 0px auto;
    min-width: 350px;
}
a {
    text-decoration: none;
}
a:link, a:visited, a:hover, a:active{
    text-decoration: none;
    color: #12C;
    cursor: pointer;
}
a:visited{
    color: #609;
}
.rtl{
    direction: rtl;
    text-align: right;
}
.ltr{
    direction: ltr;
    text-align: left;
}
.ital{
    text-decoration: italic;
}

/* header */ 
.toptitle{
    width: 100%;
    margin: 1em auto;
    text-align: center;
}
div.header {
    margin: 1em auto;
    padding: 1em 1em 0em;
    height: 10em;
    width: 100%;
}
div.photo {
    width: 100%;
    padding: 0;
    margin: 0;
    display: inline-block;
    top: 0;
}
div.photo img{
    max-width: 100%;
}
div.intro {
    width: 100%;
    padding: 1em 1em;
    margin: 0;
    display: inline-block;
    top: 0;
    /*border-bottom: solid 1px #6089C1;*/
    text-align: center;
    line-height: 2em;
    border: 1px solid #fff;
    border-radius: 10px; /*Fallback for if/when IE supports it*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #ffffff; /*fallback for IE*/
    background: -moz-linear-gradient(top, #f1f1f1, #fff 15%);
    background: -webkit-gradient(linear, 0 0, 0 15%, from(#f1f1f1), to(#fff));
    box-shadow: 10px 10px 5px #999;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
div.intro  a{
    text-decoration:none;
}
.atsgn{
    vertical-align: middle;
}
/* Menu */
div.menudiv {
    display: block;
    margin: 1em 1em 0;
    padding: 0em 0em;
    /* width: 100%; */
    text-align: center;
    height: auto;
    overflow: hidden;
    background-color: #2c3e50;
    background: rgb(96,137,193);
}

ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 7;
}
.menu li {
    float: left;
    height: 100%;
    margin: 0;
    border-right: 1px rgb(37, 52, 74, 0.4) solid;
    border-left: 1px rgb(113, 132, 157, 0.4) solid;

    background: -webkit-linear-gradient(top, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
    background: -o-linear-gradient(top, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
    background: -ms-linear-gradient(top, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
    background: -moz-linear-gradient(top, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
    background: linear-gradient(to bottom, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);

    width: 100%;
}

.menu li a {
    display: inline-block;
    padding: 0em 0.25em;
    line-height: 2em;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #8AB996;
    text-decoration: none;
    position: relative;
    font-size: 1em;
    z-index: 9;
}

.menu li:hover, .menu li:focus, .menu li:active{
    background-color: #16a085;
    background: rgb(96,137,193);
    background: -webkit-linear-gradient(top, rgb(124, 141, 165) 0%, rgb(70, 92, 123) 20%, rgb(43, 58, 79) 61%, rgb(48, 69, 101) 100%);
    background: -o-linear-gradient(top, rgb(124, 141, 165) 0%, rgb(70, 92, 123) 20%, rgb(43, 58, 79) 61%, rgb(48, 69, 101) 100%);
    background: -ms-linear-gradient(top, rgb(124, 141, 165) 0%, rgb(70, 92, 123) 20%, rgb(43, 58, 79) 61%, rgb(48, 69, 101) 100%);
    background: -moz-linear-gradient(top, rgb(124, 141, 165) 0%, rgb(70, 92, 123) 20%, rgb(43, 58, 79) 61%, rgb(48, 69, 101) 100%);
    background: linear-gradient(to bottom, rgb(124, 141, 165) 0%, rgb(70, 92, 123) 20%, rgb(43, 58, 79) 61%, rgb(48, 69, 101) 100%);
}
.menu li:hover a, .menu li:focus a, .menu li:active a {
    color: #ffffff;
}

/* content */
div.content {
    margin: 1em 0 0;
    padding: 0 1em;
}
div.section {
    margin: 1em 0 0;
    padding: 1em 1em 0em;
    /*border-bottom: solid 1px #6089C1;*/
    border: 1px solid #fff;
    border-radius: 10px; /*Fallback for if/when IE supports it*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #ffffff; /*fallback for IE*/
    /* background: -moz-linear-gradient(top, #f1f1f1, #fff 15%);
    background: -webkit-gradient(linear, 0 0, 0 15%, from(#f1f1f1), to(#fff)); */
    box-shadow: 10px 10px 5px #999;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
div.section .sectitle {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 1em;
}
div.section .sectitle:hover {
    color: black;
}
div.section ul {
    margin: 0;
    padding: 0 1em;
    list-style-image: url('img/bullet.png');
}
div.section ul li{
    padding: .25em 0;
    line-height: 1.5em;
    margin: 0;
    vertical-align: baseline;
}

div.subsection{
    margin: 1em 0;
}
.subsectitle{
    margin: 0 0 1em;
    font-weight: bold;
}

/* ordered list styles */
div.section ol {
    margin: 1em;
    padding: 0 1em;
    font-size: 0.9em; 
}
div.section ol li{
    padding: 0.2em 0;
    line-height: 1.5em;
}

/* footer */
div.lastmodif {
    font-size: 0.7em;
    line-height: 1.2em;
    font-weight: normal;
    text-align:center;
    margin: 2em 0 0;
    padding: 0 0 0.5em;
}


.grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
}   
.grid-container {
    display: grid;
    justify-content: center;
}

div.header {
    max-width: 22em;
    height: 42em;
}

div.photo {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}
div.intro {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
}

@media (min-width: 400px) {
    .menu li {
        width: 50%;
    }
}

@media (min-width: 775px) {
    .grid-container{
        grid-gap: 1em;
    }
    div.photo {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    div.intro {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 2;
        grid-column-end: 3;
    }
    div.header {
        max-width: 700px;
    }
    div.header {
        height: 21em;
    }
    div.menudiv{
        background: -webkit-linear-gradient(top, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
        background: -o-linear-gradient(top, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
        background: -ms-linear-gradient(top, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
        background: -moz-linear-gradient(top, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
        background: linear-gradient(to bottom, rgb(113, 132, 157) 0%, rgb(57, 81, 114) 20%, rgb(37, 52, 74) 61%, rgb(49, 69, 101) 100%);
    }
    .menu li {
        width: auto;
    }
    .menu li a {
        line-height: 3em;
    }
}
    
@media (min-width: 900px) {
    div.pagecontainer{
        width: 876px;
    }
    .menu li a {
        padding: 0em 1em;
        line-height: 4em;
    }
}