/* font-family: 'Lato', sans-serif;
font-family: 'Roboto', sans-serif; */

html {
    font-size: 110%;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background-color: #d4d9f0;
    background-image: url(../img/elastoplast.png);
}

h1,h2,h3,h4 {
    font-family: 'Lato', sans-serif;
}

#button-1 {
    border: #9c89b8 2px solid;
    border-radius: 10px;
    background-color: #f6dcadbb;
    padding: 5px;
    box-shadow: #2a2a2a 2px 2px 5px;
    position: absolute;
    top: 10px;
    right: 10px;
}

p {
    line-height: 150%;
}

figure {
    border: thin #9c89b8 solid;
    padding: 5px;
    max-width: 320px;
    margin: auto;
}

img {
    max-width: 320px;
    max-height: 205px;
    transition: transform 0.3s ease-in;
}

img:hover {
    -webkit-transform:scale(2);
    transform:scale(2);
    /* border: solid #9c89b8 5px; */
    border-radius: 10px;
    box-shadow: #9c89b8 5px 5px 10px;
}

figcaption {
    background-color: #f6dcad;
    color: #2a2a2a;
    padding: 3px;
    text-align: center;
    font-size: 13px;
}

.img-tips {
    font-size: 10px;
    font-style: italic;
}

header {
    width: 100%;
    background-color: #9c89b8;
    padding: 10px;
    color: #fff;
    text-align: center;
    border-bottom: #f6dcad solid 5px;
}

h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: #f7ede2 1px 1px 2px;
}

h2 {
    margin-bottom: 0;
    font-size: 80%;
}

#sidebar {
    text-align: center;
    background-color: #9c89b8;
    color: #f7ede2;
    word-spacing: 20px;
}

#sidebar a {
    text-decoration: none;
    color: #fff;
    width: 90%;
}

#sidebar a:hover {
    color: #fad597;
}

#container{
    width: 85%;
    position: relative;
    top: 5px;
    margin: 50px auto;
}

#left {
    width: 45%;
    float: left;
    margin-right: 10%;
}

#right {
    width: 45%;
    float: right;
}

section h3 {
    border: #9c89b8 solid 2px;
    border-radius: 10px;
    box-shadow: #fad597 5px 5px 10px;
    padding: 10px;
    background-color: #9c89b8;
    color: #f7ede2;
}

#intro h3 {
    text-align: center;
}

section h4, section p {
    width: 90%;
    margin: 5px auto;
}

section h4 {
    font-size: 1.13em;
    color:#9c89b8;
    text-shadow: rgba(255, 204, 0, 0.644) 1px 0 3px;
    margin-top: 20px;
}

.detail {
    padding-bottom: 20px;
    border-bottom: thin #9c89b8 solid;
}

.detail:last-of-type {
    border: none;
}

.detail figure {
    float: right;
    margin: 0 10px 0 20px;
}

.detail::after {
    content: "";
    display: block;
    clear: both;
}

#fig5 {
    clear: both;
    margin-top: 5px;
}

#internal-link {
    color: #9c89b8;
    text-decoration: none;
    font-style: italic;
}

table {
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
    table-layout: auto;
    width: 85%;
}

table:hover {
    box-shadow: #9c89b8 5px 5px 10px;
}

th {
    background-color: #9c89b8;
}

tr:first-child {
    border-bottom: white solid 3px;
}

tr:nth-child(even) {
    background-color: #fad6976b;
}

tr:nth-child(odd) {
    background-color: #9c89b86b;
}

th, td {
    padding: 8px;
}

#clearfix a {
    text-decoration: none;
    color: #9c89b8;
}

footer{
    clear: both;
    width: 100%;   
    background-color: #9c89b8;
    padding: 5px;
    color: #f7ede2;
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
}