* {margin: 0; box-sizing: border-box;}
body {font-family: 'Arvo', serif; line-height: normal; color: black; font-weight: normal; background-image: url(../image/duckbanner2.jpg); background-attachment: fixed; background-size: cover; background-color: gray;}

.nav {display: block;}
li.nav {list-style-type: none; font-size: calc(7px + 0.7vw); padding: 20% 0; font-family: 'Coming Soon', cursive;}
li.nav:hover {background-color: white;}
ul.nav {background-color: #DEDEDE; text-align: center; padding: 2%;}
nav a {text-decoration: none;}
nav a:hover {text-decoration: none; color: black; font-weight: normal;}

header {background-color: #F7D7C2; padding: 3%; margin-top: 10%; background-image: url("../image/duckbanner.jpg"); background-attachment: fixed; background-size: cover; background-color: #005183;}
.page-wrapper {background-color: #FBF1D5; width: 80%; margin: auto;}
#container {float: left; width: 100%; background-color: #DEDEDE;}
nav {float: left; width: 15%; background-color: #DEDEDE;}
.main-content {padding: 2% 8%; float: left; width: 85%; background-color: #FBF1D5; font-family: 'Coming Soon', cursive;}
.article {font-size: calc(10px + 1vw); text-align: justify;} 
footer {background-color: #F7D7C2; text-align: center; padding: 0.25%; clear: both; margin-bottom: 10%;}

#websitename {font-size: calc(32.5px + 3.25vw); text-align: right; color: white;}
#pagename {font-size: calc(20px + 2vw); text-align: center;}
#tagline {font-size: calc(7px + 0.7vw); text-align: right; color: white;}
#credit {font-size: calc(7.5px + 0.75vw);}

a {color: black; text-decoration: underline;}
a:hover {text-decoration: none; font-weight: bold; color: black;}
img.center {display: block; margin: auto; width: 80%;}
blockquote {background-color: white; font-style: italic; padding: 3%; text-align: left;}
h1 {margin: 3% 0%; font-weight: bold; font-size: calc(20px + 2vw); line-height: 1.5;}
h2 {margin: 3% 0%; font-weight: bold; font-size: calc(15px + 1.5vw); line-height: 1.5;}
h3 {margin: 3% 0%; font-weight: bold; font-size: calc(10px + 1vw); line-height: 1.5;}
p {margin: 3% 0%; line-height: 1.5;}
#references {font-weight: bold;}
#model-begin {margin-top: 5%; margin-bottom: 10%;}

@media screen and (max-width: 768px) {nav, .main-content, #container{float: none; width: 100%;} li.nav {display: inline; padding: 2%; font-size: calc(8px + 0.8vw);} .extra {display: none;} #websitename {text-align: center;} #tagline {text-align: center;}}

.slider {width: 50%; margin: auto;}
.slick-slide {margin: 0;}
.slick-slide img {width: 80%; margin: auto;}
.slick-prev:before, .slick-next:before {color: black;}
.slick-slide {transition: all ease-in-out .3s; opacity: .2;}
.slick-active {opacity: .5;}
.slick-current {opacity: 1;}

#slideshow1 p {font-size: calc(7.5px + 0.75vw); text-align: center;}