@charset "UTF-8";

/* FONT RULES */
@font-face {
    font-family: 'Palantino';
    src: url('../fonts/Palantino.woff2') format('woff2'),
         url('../fonts/Palantino.woff') format('woff');
    font-display: swap;}

/* TAG RULES */

/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

/*html5 display rule*/
address, article, aside, canvas, details, div, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: inline-block;
}

body {
	font-family: 'Palantino'; 
	color: black;
	background-color: lavender;
	font-size: 1em;
	width: 100%;
	margin: 0 auto;
}

@media only screen and (min-width: 1300px){
    body {
        font-size: 1.2em;
        width: 90%;
    }
}

header {
	position: relative;
	width: 100%;
	text-align: center;
	padding: 1em 0;
}

article {
	padding: 0 1em;
	float: left;
    width: 60%;
	margin: 0.25em 0;
}

@media only screen and (min-width: 860px){
	article {
        width: 70%;
	}
}

@media only screen and (max-width: 1300px){
    article {
        padding: 0 .5em;
    }
}

aside {
	float: right;
	padding-top: 1em;
	width: 40%;
}

@media only screen and (max-width: 1300px){
    aside {
    	padding-right: 1em;
    }

}

@media only screen and (min-width: 860px){
	aside {
        width: 25%;
	}
}

a:link {
	color: #01618C;
}

a:visited {
	color: #01618C;
}

a:hover {
	color: #01618C;
}

a:active {
	color: #01618C;
}

address {
	padding: 0 1em;
}

section {
	width: 100%;
	float: left;
	margin-bottom: .75em;
	margin-top: .75em;
	padding: .75em;
	background-color: white;
	box-shadow: 3px 3px 10px #330033;
	border-radius: 1px;
}

figure {
	width: 100%;
	text-align: center;
}

figure img {
	max-width: 100%;
}

figcaption {
	font-style: italic;
}

aside section {
	overflow-y: auto;
	margin-bottom: unset;
}

aside figure {
	margin-bottom: 2em;
}

@media only screen and (min-width: 860px){
    aside figure {
        margin-bottom: 1em;
    }
}

aside figure img {
	max-height: 20em;
}

ul > li {
	margin-left: 1.5em;
}

table, tr {
	width: 100%;
}

p {
	padding: .5em;
}

nav, footer {
	background-color: #016FA1;
	width: 100%;
}

@media only screen and (max-width: 1300px){
    nav, footer {
        width: 110%;
        margin-left: -5%;
    }
}

nav{
    float: left;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    font-size: 1.1em;
    z-index: 1;
}

@media only screen and (max-width: 860px){
    nav{
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        color: lavender;
        height: 50px;
        padding: 1em;
    }
}

@media only screen and (min-width: 1300px){
    nav{
        font-size: 1.2em;
    }
}

footer {
	font-size: .75em;
	color: lavender;
}

header img {
	width: 75%;
}

nav ul {
	list-style: none;
	width: 100%;
	justify-content: center;
	display: flex;
}

nav ul li {
	text-align: center;
	padding: .5em;
	margin: 0 1em;
}

@media only screen and (min-width: 860px){
    nav ul li {
        float: left;
    }
}

nav ul li a, footer table tr td a, .nomark {
	text-decoration: none;
}

nav a:link, footer a:link {
	color: lavender;
}

nav a:visited, footer a:visited {
	color: lavender;
}

nav a:hover, footer a:hover {
	color: lavender;
}

nav a:active, footer a:active {
	color: lavender;
}

footer p{
	width: 50%;
	text-align: center;
	float: left;
}

form label {
	display: block;
	margin-bottom: 10px;
	text-align: right;
}

form label > span {
	float: left;
	width: 15%;
}

form input[type=text], form input[type=email], form input[type=tel], form input[type=date], form input[type=time], form input[type=datetime-local], form input[type=password], form input[type=file], form textarea, form select {
	background: transparent;
	border: none;
	border-bottom: 1px dashed #330033;
	width: 83%;
	outline: none;
	padding: 0px;
}

form input[type=submit], form input[type=button] {
	background: #016FA1;
	border: none;
	padding: 8px 10px 8px 10px;
	border-radius: 5px;
	color: lavender;
}

/* CLASS RULES */

.full {
	width: 100%;
}

@media only screen and (max-width: 860px){
    .wide {
        display: none;
    }
}

@media only screen and (min-width: 860px){
    .narrow {
        display: none;
    }
}

@media only screen and (max-width: 1300px){
    .fullportrait {
        display: none;
    }
}

@media only screen and (min-width: 1300px){
    .narrportrait {
        display: none;
    }
}

.menu {
    float: left;
}

.left {
	float: left;
}

.right {
	float: right;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.text {
	width: 70%;
}

.images {
	width: 25%;
}

.portrait {
	max-height: 100%;
}

@media only screen and (720px <= width <= 860px){
	.appear .one {
		display: none;
	}
}

@media only screen and (575px <= width <= 860px){
	.appear .two {
		display: none;
	}
}

@media only screen and (max-width: 575px){
	.appear figure {
		margin-bottom: 3em;
	}
}

@media only screen and (max-width: 550px){
	.appear figure {
		margin-bottom: 4em;
	}
}

@media only screen and (max-width: 510px){
	.appear figure {
		margin-bottom: 5em;
	}
}

.spaced {
	margin: 0 3em;
}

@media only screen and (max-width: 860px){
    .tag {
        width: 40%;
    }
}

.tagline {
	text-align: center;
	font-style: italic;
}

@media only screen and (max-width: 860px){
    .tagline {
    	font-size: medium;
    }
}

.references {
	padding: 0;
}

@media only screen and (max-width: 860px){
    .references {
        width: 30%;
    }
}
.references section {
	margin-top: 0em;
	margin-bottom: 0em;
}

.reference {
	text-decoration: none;
}

.reference figure {
	width: unset;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

@media only screen and (max-width: 1300px){
    .reference figure {
    	margin-bottom: 1em;
    }
}

.reference figcaption {
    font-size: .75em;
}

.reference img {
	width: unset;
	max-height: 4em;
	max-width: 6em;
}

@media only screen and (min-width: 860px){
    .reference img {
        max-width: 8em;
    }
}

@media only screen and (min-width: 1300px){
    .reference img {
        max-height: 5em;
        max-width: 10em;
    }
}

@media only screen and (max-width: 860px){
    .gallery {
        text-align: center;
        width: 70%;
    }
}

.gallery figure {
	width: 75%;
	padding: 1em;
}

@media only screen and (min-width: 860px){
    .gallery figure {
        width: 49%;
    }
}

.gallery figure:hover {
    /* transform: translate(-3px, -3px); */
    transform: scale(110%);
    box-shadow: 3px 3px 10px #330033;
    background-color: lavender;
    /*0 .6em 1.1em #330033*/
}

@media only screen and (max-width: 1300px){
    .expand {
        width: 100%;
    }

    .expand section figure {
        width: 40%;
        float: right;
        margin: 1em;
    }
}

@media only screen and (max-width: 860px){
    aside .bottom {
    	margin-bottom: 1em;
    }
}

/* ID RULES */

#menu_toggle {
    display: none;
}

#builder {
	width: 100%;
}

/* MENU SETTINGS */
@media only screen and (max-width: 860px){
    #menu_toggle {
    opacity: 0;
    }
    #menu_toggle:checked + .menu_btn > span {
    transform: rotate(45deg);
    }
    #menu_toggle:checked + .menu_btn > span::before {
    top: 0;
    transform: rotate(0deg);
    }
    #menu_toggle:checked + .menu_btn > span::after {
    top: 0;
    transform: rotate(90deg);
    }
    #menu_toggle:checked ~ .menu {
    left: 0 !important;
    }

    .menu_btn {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 26px;
        height: 26px;
        cursor: pointer;
        z-index: 1;
    }

    .menu_btn > span,
    .menu_btn > span::before,
    .menu_btn > span::after {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: lavender;
        transition-duration: .25s;
    }

    .menu_btn > span::before {
        content: '';
        top: -8px;
    }

    .menu_btn > span::after {
        content: '';
        top: 8px;
    }

    .menu {
        display: block;
        position: fixed;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        margin: 0;
        padding: 80px 0;
        list-style: none;
        background-color: #016FA1;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
        transition-duration: .25s;
    }

    .menu_item {
        display: block;
        padding: 12px 24px;
        color: lavender;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
        transition-duration: .25s;
    }
}