body {
font-family: Montserrat, sans-serif;
font-weight: 400;
font-style: regular;
}
a {
text-decoration: none;
/*color: rgba(64,64,192,1);*/
color: rgba(16,16,255,1);
}
a:link, a:visited {
text-decoration: none;
/*color: rgba(64,64,192,1);*/
color: rgba(16,16,255,1);
}
a:hover {
text-decoration: underline;
}
a.textlink {
color: black;
text-decoration: none;
}
.more-link {
color: rgba(64,64,192,1);
font-weight: 500;
line-height: 30px;
}
a.more-link {
color: rgba(64,64,192,1);
font-weight: 500;
}
e {
font-weight: 400;
font-style: italic;
}
.small-note {
font-weight: 300;
font-style: italic;
font-size: small;
}
strong {
font-weight: 700;
/*font-style: bold;*/
}
.left {
width:15%;
position:absolute;
left: 0;
height: 100vh;
}
.middle {
width: 70%;
position:absolute;
left: 15%;
height: 100vh;
/*background-color: gray;*/
}
.right {
width:15%;
position:absolute;
left: 85%;
height: 100vh;
}
h1 {
text-align:center;
line-height: 1;
font-family: Montserrat, sans-serif;
font-size: 340%;
font-weight: 400;
margin-top: 5vh;
margin-bottom: 5vh;
letter-spacing: 0.1em;
}
h1.page {
margin-top: 10vh;
}
h2 {
margin-top: 5vh;
text-align:center;
line-height: 1;
font-family: Montserrat, sans-serif;
font-weight: 500;
letter-spacing: 0.2em;
font-size: 180%;
}
h2.page {
text-align: left;
}
h3 {
text-align:center;
line-height: 0.2;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 100%;
letter-spacing: 0.2em;
margin-top: 6vh;
margin-bottom: 3vh;
}
h3.page {
text-align: left;
}
h4 {
text-align: center;
line-height: 1;
font-family: Montserrat, sans-serif;
font-weight: 450;
font-size: 100%;
letter-spacing: 0.2em;
margin-top: 8vh;
}
h4.index {
text-align: center;
line-height: 1;
font-family: Montserrat, sans-serif;
font-weight: 450;
font-size: 150%;
letter-spacing: 0.2em;
margin-top: 1vh;
}
.link-header {
text-align:center;
line-height: 0.2;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 100%;
letter-spacing: 0.2em;
margin-bottom: 10vh;
}
.active-header {
text-align:center;
line-height: 0.2;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 100%;
letter-spacing: 0.2em;
margin-bottom: 10vh;
}
#scroll-header {
display: none;
position: fixed;
text-align: center;
min-width: 100%;
background-color: rgb(255,255,255);
padding: 1vh;
border: none;
right: 0%;
top: 0%;
font-size: 120%;
border-bottom: solid thin;
z-index: 39999;
animation: fadeIn 1s;
}
#main-subpage-header {
display: block;
position: fixed;
text-align: center;
min-width: 100%;
background-color: rgb(255,255,255);
padding: 1vh;
border: none;
right: 0%;
top: 0%;
font-size: 120%;
border-bottom: solid thin;
z-index: 39999;
animation: fadeIn 1s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#scroll-header strong {
font-size: 122%;
}
.year {
font-size: 200%;
font-weight: 500;
margin-top: 8vh;
}
.cv-work-title{
font-weight: bold;
}
img {
max-width: 100%;
min-width: 100%;
height: auto;
margin-bottom: 1vh;
}
.img-logo {
max-width: 50%;
min-width: 50%;
}
.img-round {
border-radius: 50%;
max-width: 65%;
min-width: 65%;
}
/* the below will make an image centre when img is within a p or span with this style */
.img-center {
text-align: center;
display: block;
}
.text-content {
  display: block;
  width: 65%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5vh;
  margin-top: 4vh;
  line-height: 1.3;
}
ul {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
ol {
  width: 65%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5vh;
  margin-top: 4vh;
  line-height: 1.3;
}
hr {
text-align: center;
width: 65%;
margin-top: 5vh;
margin-bottom: 5vh;
}
hr.style-eight {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top:1px solid rgba(0, 0, 0, 1); 
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    /*content: "\00a7";*/ 
    /* section sign § */
    content: "~";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}
.social {
margin-bottom: 10vh;
}
/*
hover: none means it is a touch device, even if mouse is plugged in doesnt' matter as hover:none means primary pointing device 
downside is that it can't distinguish between phones and tablets, and possibly touch laptops like Surface etc
see https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets
or https://dev.opera.com/articles/media-features/
or https://css-tricks.com/touch-devices-not-judged-size/
*/
@media (hover: none) {
.left {
width: 5%;
position:absolute;
left: 0;
height: 100vh;
}
.middle {
width: 90%;
position:absolute;
left: 5%;
height: 100vh;
/*background-color: gray;*/
}
.right {
width: 5%;
position:absolute;
left: 95%;
height: 100vh;
}
p {
font-family: Montserrat, sans-serif;
font-weight: 400;
font-size: 150%;
font-style: regular;
}
.text-content {
  display: block;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5vh;
  margin-top: 4vh;
  line-height: 1.3;
  font-size: 100%;
}
ul {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
ol {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5vh;
  margin-top: 4vh;
  line-height: 1.3;
  font-size: 100%;
}
}