@charset 'UTF-8';

html,
html * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 1.5vw;
    background: white;
}
header {
    position: fixed;
    padding-top: 2vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 2vw;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.2);
    text-align: center;
    font-size: 3vw;
    color: #FFFFFF;
}
nav {
    z-index: 400;
    top: 0;
    left: 0;
    opacity: .95;
    background: #fff;
    position: relative;
    display: block !important;
    float: right;
    width: 30%;
    padding: .75em 1em 0 0;
    height: 1.5em;
    font-size: small;
    text-shadow: 0px 0px #FFFFFF;
}

.site-nav {
	position: relative;
	float: right;
	z-index: 400;
	top: 0;
	left: 0;
	display: block !important;
	width: 80%;
	padding: .75em 1em 0 0;
	opacity: .95;
	background: none;
}
.site-nav ul {
	list-style-type: none;
	margin: 0;
	text-align: right;
}
.site-nav ul li {
	display: inline-block;
	margin-bottom: 0;
	margin-left: 1.5em;
}
.site-nav ul li a {
    font-size: .85em;
    padding-bottom: .5em;
    text-decoration: none;
    letter-spacing: .15em;
    text-transform: capitalize;
    color: #fff;
    -webkit-transition: color .3s;
    transition: color .3s;
}
.site-nav ul li a:hover {
	outline: none;
	border-bottom: 1px solid white;
}




.start {
    position: relative;
    height: 8.5vw;
    background-image: -webkit-linear-gradient(270deg,rgba(46,80,134,1.00) 0%,rgba(153,215,214,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(46,80,134,1.00) 0%,rgba(153,215,214,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(46,80,134,1.00) 0%,rgba(153,215,214,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(46,80,134,1.00) 0%,rgba(153,215,214,1.00) 100%);
}
.intro {
    position: relative;
    color: #343144;
    background: #fff;
    height: 20%;
    padding-top: 5%;
    padding-right: 10%;
    padding-left: 10%;
    padding-bottom: 5%;
    text-align: justify;
}

.artworks {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.artwork {
  display: flex;
}

.artwork .artwork-piece {
    padding-top: 2%;
    padding-right: 0;
    padding-bottom: 2%;
    width: 60%;
    background-color: #99D7D6;
}
.artwork figure {
    position: relative;
    vertical-align: middle;
    padding-top: 2%;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 2%;
    background: #99D7D6;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
}
.artwork .artwork-description {
    background: #26223e;
    width: 49%;
    padding-top: 2%;
    padding-right: 4em;
    padding-left: 4em;
    padding-bottom: 2%;
    color: #FFFFFF;
    text-align: justify;
}

footer {
    margin-top: 0em;
    padding-top: 5%;
    padding-right: 10%;
    padding-left: 10%;
    padding-bottom: 5%;
    height: 30vw;
    background-image: -moz-linear-gradient(270deg,rgba(153,215,214,1.00) 0%,rgba(46,80,134,1.00) 100%);
    background-image: -webkit-linear-gradient(270deg,rgba(153,215,214,1.00) 0%,rgba(46,80,134,1.00) 100%);
    background-image: -ms-linear-gradient( -45deg, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
    background-image: -o-linear-gradient(270deg,rgba(153,215,214,1.00) 0%,rgba(46,80,134,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(153,215,214,1.00) 0%,rgba(46,80,134,1.00) 100%);
}
.itch {
    background-color: #FFFFFF;
    text-align: left;
    margin-left: 7%;
    padding-left: 5%;
    padding-right: 5%;
}