:root {
--base:#6058a1;  /* purple */
--accent:#967987; /* desaturated purple */
--contrast:#bf191c; /* red */
--shade:#2f748e; /* teal */
--link:#6ba5f5; /* pale blue */
--saturated:#3f8cc8; /* saturated blue */
--dark:#123955; /* even darker blue */
}
 
 
body {
background: url("images/bg.jpg") repeat #fff;
font:22px/26px 'PT Serif', 'lato', 'lucida sans unicode', 'lucida grande', helvetica, arial, verdana, sans-serif;
color:#222;
margin:0;
padding:0;
}

/* structure */

div#container {
margin:0 auto;
width:866px;
}

header {
margin:0 auto;
width:866px;
height:587px;
background-size:cover;
}

header img { 
margin:0 auto !important;
border:0 !important;
padding:0 !important;
display: block;
max-width:100%;
height: auto;
}

/*nav ul {
margin:0;
padding:0;
text-align:center;
}

nav ul li {
display:inline;
list-style-type:none;
margin:0 20px;
padding:0;
} 

nav ul li a {
font:30px 'Solitreo', georgia, 'times new roman', serif;
color:var(--base);
text-decoration:none;
text-transform:lowercase;
font-weight:normal;
padding:5px 10px;
text-shadow:0 2px 2px #444;
transition:color 0.5s ease;
}

nav ul li a:hover { color:var(--contrast); }*/

section {
width:800px;
margin:0 auto 0;
text-align:left;
}

section p {
margin:10px 0;
padding:0;
}

footer {
text-align:right;
background:url(images/footer.jpg) bottom right no-repeat;
clear:right;
font-size:14px; 
line-height:18px;
color:#666;
padding:50px 260px 60px 0;
}

/* front page nav */

nav.front {
clear:both;
}

/*li.img img {
padding:0 !important;
margin:0 !important;
height:auto;
max-width:100%;
position:relative;
}

li.img span {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color:#eee;
font: italic 30px/25px 'DM Serif display', 'lucida sans unicode', arial, sans-serif;
}*/

li.img span { display:none; }

.nav {
padding:0;
margin:0 10px 20px 10px;
background:url(images/imgbg.png);
width:30%;
float:left;
}

.nav ul {
background:rgba(255,255,255,0.8);
margin:20px 0;
padding:0;
}

.nav ul li {
text-align:center;
list-style-type:none;
padding:0;
margin:0;
}

.nav ul li a {
text-decoration:none;
font-style:italic;
display:block;
padding:5px 0;
}

.nav ul li a:hover {
background:url(images/imgbg3.png);
color:#000;
}

.navfoot, hr.clear {
clear:both;
}

.navfoot ul {
padding:20px auto;
text-align:center;
}

.navfoot ul li {
list-style-type:none;
display:inline;
}

.navfoot ul li a {
text-decoration:none;
font-style:italic;
}

.half {
width:45%;
margin:0 20px 0;
float:left;
}

/* headers */

h1 {
margin:10px 0 0 0;
font: normal 40px 'DM Serif display', 'lucida sans unicode', arial, sans-serif;
color:var(--base);
text-transform:lowercase;
border-radius:5px;
font-style:italic;
padding:10px 0 30px 50px;
height:70px;
background:url(images/h1.jpg) top left no-repeat;
}

h2, h4 {
margin:5px 0 5px;
font: normal 25px 'DM Serif display', 'lucida sans unicode', arial, sans-serif;
color:var(--saturated);
text-transform:lowercase;
border-radius:5px;
padding:5px 0;
background:url(bg.gif);
}

h2 + blockquote { margin-top:-10px; }

h3 {
margin:10px 0;
font: normal 20px 'DM Serif display', 'lucida sans unicode', arial, sans-serif;
color:var(--saturated);
text-align:center;
text-transform:lowercase;
clear:both;
}

/* text styling & utility */

a {
color:var(--link);
font-weight:bold;
cursor:crosshair;
transition:color 0.5s ease;
}
a:hover { color:var(--accent); }


b, strong {
font-family:'DM Serif Display', 'lucida sans unicode', arial, sans-serif;
color:var(--accent);
font-weight:700;
}

i, em {
font-family:'DM Serif Display', 'lucida sans unicode', arial, sans-serif;
color:var(--shade);
}

code { font-family:'Ubuntu Mono', 'courier new', monospace; }
small { font-size:17px; line-height:18px; }
span { color:var(--contrast); }

.center { text-align:center; }
.help { cursor:help; }


p.bg { text-align:center; }
p.bg img { background-color:#fff; }

blockquote {
border-left:5px solid var(--link);
margin:10px 10px 0;
}

blockquote p {
margin:0 !important;
padding:0 5px 0 !important;
}

blockquote:hover { border-color:var(--accent); }
blockquote span {
text-transform:uppercase;
font-family:'DM Serif display', 'lucida sans unicode', arial, sans-serif;
}

ul li { 
list-style-type:square;
}

hr { 
background:url(images/hr.png) top center no-repeat;
border:0;
height:51px;
}

p.next {
text-align:right;
}

p.next a {
text-decoration:none;
font-style:italic;
font-size:30px;
}

/* images */

img, a img { 
padding:0;
margin-right:20px;
background:none;
}

img:hover { border-color:var(--accent); }

img.right {
float:right;
margin:0 0 5px 15px;
padding:10px;
background:url(images/imgbg.png);
}

img.right:hover {
background:url(images/imgbg3.png);
}


img.left { float:left; margin:0 5px 5px 0; }

img.inset {
border-radius:150px;
background:url(images/frame1.png) top center no-repeat;
padding:30px;
margin:0;
}

img.bg {
padding:20px;
background:url(images/imgbg3.png);
border-radius:50px;
}

a img.bg, img.bg { transition:background 1s steps(1, jump-end); }
a:hover img.bg, img.bg:hover {
background-position:bottom right;
}

a img.inset { transition:background 2s ease; }
a:hover img.inset {
background-image:url("images/frame2.png");
}

/* responsive */


@media (max-width:420px) {

    header {
    width:100%;
    height:auto;
    }
    
    div#container {
    width:80%;
    }
    
    
    div#container {
    width:90%;
    margin:0 auto !important;
    padding:0 0 !important;
    }

    section {
    margin:0 auto;
    width:80%;
    }
    
    nav ul li a, h1 { font-size:20px !important; }
    
    .nav {
    width:50%;
    }

}

@media (min-width:420px) and (max-width:768px) {

    header {
    width:100%;
    height:auto;
    }
    

    div#container {
    margin:0 auto;
    width:100%;
    }

    section {
    margin:0 auto;
    width:90%;
    }
    
    nav ul li a, h1 { font-size:22px !important; }

    .nav {
    width:50%;
    margin:0 auto;
    }
    
}

@media (min-width:768px) and (max-width:1200px) {

    header {
    width:100%;
    height:auto;
    }
    
    
    div#container {
    width:80%;
    }

    section {
    float:none !important;
    margin:0 auto;
    clear:both;
    width:100%;
    }

    
}


@media (min-width:1200px) and (max-width:1450px) {


    div#container {
    width:80%;
    }

    section {
    float:none !important;
    margin:0 auto;
    clear:both;

    }
    

}