@charset "UTF-8";
/* CSS Document */
/* font-family: 'Cinzel Decorative', cursive; */

/* ---------- CONTAINERS ---------- */
#wrapper {
	display:block;
	margin: 0 5%;
}

#header {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}

#header-subpage {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	height: 10vh;
	border-bottom:1px solid #ddd;
}

#portfolio {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.portfolio-piece {
	flex: 1 1 300px;
	text-align: center;	
	padding: 20px;
	border-bottom:1px solid #ddd;
	transition: box-shadow 500ms;
	max-width:500px;
}

.portfolio-piece:hover {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

#footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}


/* ---------- TEXT ---------- */
h1 {
	font-family:'Cinzel Decorative', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size:150%;
	font-weight: normal;
	color:#666;
	text-align:center;
	margin:0;
}

p {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color: #4E4E4E;
}

.note {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	line-height: 100%;
	font-size: .6em;
	font-weight: normal;
	color: #666;
	margin: 0 0 0 10px;
}

a:link, a:visited {
	color: #14B27C;
	text-decoration: none;
}
a:hover, a:active {
	text-decoration: underline;
}

#LogoName {
	font-family:'Cinzel Decorative', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size:230%;
	color:#666;
	text-align:center;
	margin:10px 0 0 0;
	padding-bottom:0;
}

#tagline {
	color:#999;
	margin:0;
	text-align: center;
	padding-bottom:1em;
	}

.Zrule {
	width:100%;
	border-top: solid 1px #999999;
	border-bottom:none;
	border-right:none;
	border-left:none;
	margin-bottom:10px;
}

.top-three {
	display: block;
	height: 20vh;
	font-family:'Cinzel Decorative', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size:180%;
	font-weight: normal;
	color:#666;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

.top-three li {
	margin-bottom: 20px;
}

.reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
}


/* ---------- IMAGES ---------- */
#mainLogo {
	max-height: 216px;
	margin: 30px auto 0 auto;
}

#subLogo {
	height: 9vh;
}

.portfolio-piece img {
	max-width: 100%;
}

/* ---------- SLIDE CAROUSEL ---------- */
.slide {
    display: none;
	width: 100%;
	margin-top: 10vh;
}

.slide-carousel {
    position: relative;
    display: flex;
    flex-basis: row wrap;
    align-items: flex-start; 
    width: 100%;
    height: 90vh;
    min-height: 20em;
    overflow: hidden;
}

.slide-1, .slide-2, .slide-3, .slide-4, .slide-5, .slide-6, .slide-7, .slide-8 {
    width: 100%;
    height: 70vh; 
    background-attachment: fixed;
    background-position: center center;
	object-fit: scale-down;
	padding: 0 auto;
	animation-name: fade;
    animation-duration: 1.5s;
}

.slide img {
	display: block;
	margin-top: -10vh;
}

.island {
	flex-direction: column;
	text-align: center;
	align-self: center;
	margin: 0 auto 0 auto !important;
}

.slide-caption {
	display: flex;
    flex-basis: column wrap;
    position: absolute;
	bottom: 0;
    justify-content: center;
    align-items: center;
    font-size: .9em;
	padding: 0;
    height: 20%;
    width: 100%;
    text-align: center;
	background-color: #2F2F2F;
    color: rgba(255,255,255,1.00);
}

.slide-caption p {
	text-align: left;
	font-size: 11pt;
	line-height: 14pt;
	color: #fff;
	margin: 0;
	padding: 0 25% 30px 25%;
}

.prev, .next {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: 40%;
    margin-top: -20px;
    width: 30px;
    height: 30px;
}

.next {
    right: 20px;
    border-bottom: 4px solid #ADADAD;
    border-right: 4px solid #ADADAD;
    transform: rotate(-45deg);
    transition: right 0.5s;
}

.prev {
    left: 20px;
    border-bottom: 4px solid #ADADAD;
    border-left: 4px solid #ADADAD;
    transform: rotate(45deg);
    transition: left 0.5s;
}

.next:hover {
    right: 1em;
}

.prev:hover {
    left: 1em;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #ADADAD;
    border-radius: 50%;
    margin: 0 4px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s;
}
  
.dot-container{
    display: flex;
    flex-basis: row wrap;
    position: absolute;
    justify-content: center;
    width: 100%;
    bottom: 1.5em;
}

.active, .dot:hover {
    opacity: 1;
}

.fade {
	width: 100%;
    animation-name: fade;
    animation-duration: 1.5s;
}
   
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

/* ---------- RESPONSIVE ---------- */
@media screen and (max-width:640px) {
	h1 {
		font-size-adjust: -20;
	}
	#portfolio, #footer {
		flex-direction: column;
	}
	#footer {
		align-items: center;
	}
	.top-three {
		font-size: 120%;
	}
	.slide-caption p {
		padding: 0 10% 30px 10%;
	}
	
}