.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville-bold {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-baskerville-regular-italic {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
}


body {
    background-color: white;
    text-align: left;
   font-family: Libre Baskerville, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
line-height: 120%;
}
h1 {
    background-color: white;
    text-align: left;
   font-family: Libre Baskerville, serif;
font-weight: 600;
font-size: 3.5vw;
font-style: normal;
letter-spacing: 0px;
line-height: 105%;
}

.wrap-element {
  position: relative;
  overflow: hidden;
  padding-top: 52.25%;
}

.wrapped-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0 dotted;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

li
{list-style-type: square;
}

.work {
background-color: rgba(200,200,200,0.1); color: rgba(0,0,0,0.8);
border: 0px solid rgba(0,0,0,0.1); font-size: 13pt; text-align: right;
}


#bio  {
  background-color: rgba(255,255,255,0.3); color: rgba(0,0,0,0.80);
border: 0px dotted white; }

caption {font-size: 11pt;}


@media only screen and (orientation: landscape) {
.c-deskleft {width: 45%; padding: 0 5px;}
.c-deskright  {width: 45%; padding: 0 5px;}
}

@media only screen and (min-width: 400px)
  /* For phones: */
{
.c-tabtop {line-height: 150%; font-size: 12pt;}
.c-tabbottom {line-height: 120%; font-size: 11pt;}

}

@media only screen and (min-width: 650px)
  /* For tablets: */
{
.c-tabtop {line-height: 150%; font-size: 14pt;}
.c-tabbottom {line-height: 120%; font-size: 11pt;}

}

/* Large devices (laptops/desktops, 950px and up) */
@media only screen and (min-width: 950px)
{
.c-deskleft {line-height: 150%; font-size: 16pt; width: 60%;}
.c-deskright  {line-height: 120%;  font-size: 12pt; width: 35%;}
}

@media only screen and (min-width: 1200px)
  /* For desktop: */ {
.c-deskleft {line-height: 150%; font-size: 14pt; width: 65%;}
.c-deskright  {line-height: 120%;  font-size: 12pt; width: 30%;}
}


.c-deskleft {
  float: left;

}

.c-deskright
 {
  float: right;
}

.c-tabtop {
  float: left;
}

.c-tabbottom
 {
  float: left;
}





strong {
font-style: bold;

}



div {
  padding: 15px;
  margin: 10px;
border: 0px dotted white;
border-radius: 10px 10px 10px 10px; border-color: rgba(255,255,255,0.0);
}


#main
{
  background-color: rgba(100,0,0,0.1); color: rgba(0,0,0,0.80);
border: 0px solid white;
}

#section
{
  background-color: rgba(100,100,0,0.1); color: rgba(0,0,0,0.80);
border: 0px solid white;
}

#questions
{
  background-color: rgba(100,0,100,0.1); color: rgba(0,0,0,0.80);
border: 0px solid white;
}

#about
{
  background-color: rgba(100,100,100,0.1); color: rgba(0,0,0,0.80);
border: 0px solid white;


}



img {
  -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
  filter: grayscale(40%); border-radius: 6px; opacity: 0.95;
}

.truecolour {
  -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
  filter: grayscale(70%);
}


#title {
    color: rgba(0,0,0,0.8); font-size: 4.5vw; line-height: 105%; text-align: left; font-weight: 600;
background-color: rgba(255,255,255,0.0); width: 90%; border-style: solid; border-width: 0px;
}

#home {
    color: rgba(255, 255, 255, 0.9); font-size: 3vw; line-height: 100%; text-align: center; font-weight: 300;
background-color: rgba(50, 100, 100, 0.4); width: 25%; border-style: solid; border-width: 2px;
}

#footer
{
background-color: rgb(100, 85, 63); color: rgba(254,254,254,0.80);
border: 1px solid olive;

}

#licence
{
  background-color: rgba(255, 255, 255, 0.2); color: rgba(0,0,0,0.80);
border: 0px dotted white;
}

em {
font-family: Times, serif;
font-style: normal;
letter-spacing: 1px;
}


#caption {
font-size: 14pt; text-align: right;
border: 0.1vw dotted white; padding: 2px; line-height: 87%;

}






/* unvisited link */

a:link {
  color: rgba(100,0,0,1);
text-decoration: none;
}

/* visited link */
a:visited {
  color: rgba(100,0,0, 0.95);
text-decoration: none;
}

/* mouse over link */
a:hover {
  color: rgba(100,0,0,0.7);
text-decoration: none;
}

/* selected link */
a:active {
  color: rgba(100,0,0,0.6);
text-decoration: none;
}