@charset "UTF-8";
/* CSS Document */

body {
	margin:0;
	padding:0;
	font-family: "Trebuchet MS", Helvetica, sans-serif !important;
	color: #000;
}

h1 {
	font-size:2.5vw;
	font-weight: 900;
}

h2 {
	font-size:2.2vw;
}

h3 {
	font-size:1.7vw;
}

h4 {
	font-size: 1.5vw;
	text-transform: uppercase;
}

h5 {
	font-size: 1.75vw;
}

p {
	font-size: 1.05vw;
	line-height: 1.15;
}

a {
	text-decoration: none;
}

li li {
	margin-left:30px;
}


li li li {
	margin-left:60px;
}

.desktop {
	display:block;
}
.mobile {
	display:none;
}

.navControl-left {
	position: fixed;
	left: 5px;
	top: 30px;
	width: 63px;
	height: 45px;
	background: #ffffffa1;
	z-index: 999999;
	outline: .5px solid #b3b3b3;
	border: 1px solid #e1e1e1cc;
	cursor:pointer;
	overflow:hidden;
	transition:all .3s;
	
	display: none;
}

.info span {
	display: inline-block;
	border: 1px solid;
	padding: 6px;
	margin-top: -5px;
	border-radius: 50%;
}

.accordion {
	max-height: 20px;
 	overflow: hidden;
	margin-top:20px;
	margin-bottom:20px;
 	transition: all .7s ease-out;
}

.moveUL {
	margin-top:20px;
}

.openAcc {
	max-height:2000px;
	transition: all .7s ease-out;
}

.navControl-left p {
	color: #00000052;
	font-size: 10px;
	text-align: center;
	line-height: 0.6;
	transition:all .2s;
}

.navLeft-Open {
	width: 73px;
	height: 223px;
	background: #fff;
	outline: 1px solid #b3b3b3;
	border: 1px solid #e1e1e1;
}

.navLeft-Open p {
	color: #00000052;
	font-size: 12px;
}

.navLeft-Open .info {
	opacity:0;
}

.closer {
	margin-top:150px;
}

.navControl-right {
	position: fixed;
	right: 13px;
	top: 10px;
	height: 111px;
	width: 90px;
	background: #ffffff4a;
	z-index: 99999;
}

.navControl-right img {
	width: 80%;
	margin-left: 10%;
	margin-top: 5%;
	opacity: .8;
}

.navControl-right p {
	font-size: 12px;
	text-align: center;
	line-height: 1;
	margin-top: 2px;
	color: #404040;
	padding: 0 1px;
}

.mainMat {
	width:100vw;
	height:auto;
	min-height: 100vh;
	background:url("../img/arte bg.jpg");
	background-size: cover;
	background-position: center;
}

.placard {
	position:absolute;
	height: 270px;
	bottom: 31px;
	left: calc(80px + 50vw);
	padding: 5px 39px 9px 26px;
	background: rgb(255,255,250);
	background: linear-gradient(180deg, rgba(255,255,250,0.9598039899553571) 15%, rgba(250,250,242,1) 67%, rgba(250,248,244,1) 100%);
	width: auto;
	min-width:28vw;
	border: 3px dashed #eaeae494;
	outline: 5px solid #fdfdf7;
	box-shadow: -8px 9px 7px 7px #00000026;
}

.placard h1 {
	font-size: 33px;
	letter-spacing: 2px;
	color: #000000b8;
	margin: 30px 0  40px 0;
}

.placard h2 {
	color: #00000063;
	font-size: 20px;
	margin: 10px 0;
}

.placard h3 {
	font-size: 17px;
	font-weight: 300;
	margin: 10px 0 12px;
	color: #49665d;
	line-height:1.2;
}

.placard h4 {
  font-size: 22px;
  font-weight: 200;
  letter-spacing: 4px;
  color: #00000096;
  margin: 10px 0;
}

.placard h5 {
	margin: 30px 0 20px;
	font-size: 17px;
	font-weight: 100;
	font-style: italic;
	color: #7db0f2;
	padding-left: 10px;
	text-align: right;
}

.afterText {
	color:#717171cf;
}

.textDesc {
	position:relative;
	left: 40px;
	top:10vw;
	width: calc(46vw - 40px);
	background:url("../img/text desc bg.jpg");
	padding: 20px 30px;
	background-size: cover;
	cursor:pointer;
	transform: rotate(-.4deg);
	box-shadow: 0px 4px 10px -4px #00000082;
	transition:all .7s ease-in-out;
}

.read, 
.close {
	display:inline-block;
}

.close{
	display:none;
}

.hideText {
	display:none;
}

.viewText {
	display:inline-block;
}

.innerBound {
	max-height:58px;
	overflow: hidden;
	transition:all .7s linear;
}

.textTab {
	position: absolute;
	transform: translate(-33px, -52px);
	transition:all .7s ease-in-out;
	
}

.textTab p {
	font-size: 16px;
	background: #fff;
	padding: 5px 21px;
	color: #3374d9;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	box-shadow: 0px -3px 7px -4px #00000082;
	cursor:pointer;
	transition:all .7s ease-in-out;
}

.textDesc p {
	font-size: 14px;
	line-height: 1.3;
	color: #0000008f;
	margin: 5px 3px;
}

.iB-overlay {
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background: rgba(255,255,255,0);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgb(237, 237, 237) 80%);
	transition:all .7s ease-in-out;
}

.ib-dis {
	top:100%;
}


.textHide {
	max-height: 800px !important;;
}

.videoMat {
	width: 40vw;
	display: flex;
	background: #000;
	position: relative;
	top: 351px;
	right: 140px;
}

.videoTag {
	color: #000;
	font-size: 13px;
	padding: 6px 13px;
	background: #ffffffdb;
	transform: rotate(-.4deg);
	box-shadow: -5px 4px 5px 0px #00000026;
	font-weight: 200;
	line-height: 1;
	margin-top: 0 !important;
	width: 200px;
	display: table;
	cursor:pointer;
	transition:all .7s ease-in-out;
}

audio {
	box-shadow: -5px 4px 5px 0px #00000026;
}

.videoTag a {
    color: #000;
}

.photoMat {
	width: 46vw;
	position: relative;
	background: #000;
	left: 40px;
	top: 85px;
	padding-bottom: calc(29.8% + 1px);
	right: unset;
	transition:all .7s ease-in-out;
}

.photoTag {
	color: #000;
	position: absolute;
	top: 12px;
	font-size: 18px;
	padding: 6px 13px;
	background: #fff;
	transform: rotate(0.9deg);
	left: 40px;
	box-shadow: -5px 4px 5px 0px #00000026;
	transition: all .7s ease-in-out;
}

.audioPlayer,
.videoPlayer {
	width: 280px;
	position: absolute;
	right: calc(50vw - 340px);
	top:120px;
	transition: all .7s ease-in-out;
}

@media all and (min-width:1100px) {
	.audioPlayer,
	.videoPlayer {
		transform: scale(1.15);
		transform-origin: left;
	}
}

.videoPlayer {
	top: 235px;
}

figure {
	margin: 0;
	transform: scale(.75);
	transform-origin: left;
}

.left,
.right {
	width: 20%;
	display: inline-block;
}

.right {
	width:78%;
}

.right figcaption {
	margin-bottom:7px;
}

.audio, 
.video {
	width: 87%;
	margin-left: 5%;
	opacity: .5;
	transform: scale(.7);
	cursor:pointer;
}

.audio {
	animation: iconFlex 3s infinite; 
}

.video {
	cursor:pointer;
}

@keyframes iconFlex {
	0% {
		filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
		opacity: .5;
		transform: scale(.7);
	}
	
	50% {
		filter: invert(23%) sepia(69%) saturate(3945%) hue-rotate(225deg) brightness(70%) contrast(106%);
		opacity: .9;
		transform: scale(.9);
	}
	
	100% {
		filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
		opacity: .5;
		transform: scale(.7);
	}
}

.holdFlex {
	filter: invert(23%) sepia(69%) saturate(3945%) hue-rotate(225deg) brightness(70%) contrast(106%) !important;
	opacity: .9 !important;
	transform: scale(.9) !important;
}

#slides{
	position: absolute;
	height: 100%;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	width: 100%;
}

.slide{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;

	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

.showing{
	opacity: 1;
	z-index: 2;
}


.controls{
	display: none;
}


/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide{
	font-size: 40px;
	padding: 40px;
	box-sizing: border-box;
	background: #333;
	color: #fff;
  
  background-size: cover;
}

.slide:nth-of-type(1){
	background-color: #7b7b73;
  background-image: url("../img/6.jpg");
}

.slide:nth-of-type(2){
	background-color: #7b7b73;
	 background-image: url("../img/1.jpg");
}

.slide:nth-of-type(3){
	background-color: #7b7b73;
  	background-image: url("../img/2.jpg");
}

.slide:nth-of-type(4){
	background-color: #7b7b73;
  	background-image: url("../img/3.jpg");
}

.slide:nth-of-type(5){
	background-color: #7b7b73;
  	background-image: url("../img/4.jpg");
}

.slide:nth-of-type(6){
	background-color: #7b7b73;
  	background-image: url("../img/5.jpg");
}

.slide:nth-of-type(7){
	background-color: #7b7b73;
  	background-image: url("../img/8.jpg");
}

.slide:nth-of-type(8){
	background-color: #7b7b73;
  	background-image: url("../img/7.jpg");
}

.controls{
	background: #e3bf79bf;
	color: #fff;
	border: none;
	padding: 9px 0px;
	font-size: 20px;
	cursor: pointer;
	border: 0px solid #fff;
	margin: 10px 0px 0px 28px;
	width: 44px;
}

.controls:hover,
.controls:focus{
  background: #eee;
  color: #333;
}

.container{
  	position: absolute;
	width: 100%;
	height: 100%;
}

.buttons{
	position: absolute;
	bottom: 0px;
	z-index: 10;
	font-size: 0px;
	margin-left: 23.5vw;
	width: 188px;
	transform: translateX(-50%);
	transition:all .7s ease-in-out;
}

.footNote {
	display:none;
	position: absolute;
	top: calc(100vh - 63px);
	left: 30px;
	opacity: .7;
	font-size: 21px;
	cursor:pointer;
}

@media all and (max-width:1300px) {
	
	.placard {
		transform: scale(.9);
	}
	
	.textDesc {
		top:11vw;
	}
	
	.textDesc p {
  		font-size: 13px;
	}
}

@media all and (max-width:1150px) {
	.placard {
		transform: scale(.8);
	}
	
	.textDesc {
		top:16vw;
	}
	
	.audioPlayer, 
	.videoPlayer {
		  transform: scale(.9);
	}
	
	.right {
		  width: 76%;
		}
}

@media all and (max-width:1100px) {
	
	.textTab, 
	.iB-overlay {
		display:none;
	}
	
	.innerBound {
  		overflow:visible;
		max-height:none;
	}
	
	.textDesc {
		top: 12vw;
	}
	
}

@media all and (max-width:890px) {
	html {
		overflow-y: scroll;
		overflow-x:hidden;
		width:100vw;
	}
	
	.mainMat {
		height: auto;
	}
	
	.placard {
		position: absolute;
		display: inline-block;
		width: 44vw;
		top: 2px;
		left: -12px;
		transform: scale(.74);
		min-width: 235px;
	}
	
	.textDesc {
		top: 69px;
		left: 45px;
		right: unset;
		width: calc(95vw - 120px);
		position: relative;
		padding: 10px 30px;
		margin-top: calc(43vw + 130px);
	}
	
	.textDesc p {
	  font-size: 15px;
	  line-height: 1.3;
	}
	
	.audioPlayer, 
	.videoPlayer {
		top: calc(370px + 53vw);
		right: unset;
		left: 23px;
		width: 39vw;
	}
	
	.videoPlayer {
		margin-left: 47vw;
		margin-top: 5px;
	}
	
	.photoMat {
		position: relative;
		width: 76vw;
		left: 12vw;
		top: 341px;
		padding-bottom: calc(49.4% + 1px);
	}
	
	.photoTag {
		  position: absolute;
		  left: calc(100vw - 216px);
		  width: 202px;
		  bottom: unset;
		  top: 269px;
	}
	
	.buttons {
	  	margin-left: 38vw;
		left: 0;
		transform: translateX(-94px);
	}
	
	.footNote {
		position: relative;
		top: 128px;
		font-size: 20px;
		text-align: center;
		left: 0;
	}
	
	.textTab, 
	.iB-overlay {
		display:block;
	}
	
	.innerBound {
  		max-height: 58px;
		overflow:hidden;
	}
	
	.textTab {
  		transform: translate(-33px, -43px);
	}
}

@media all and (max-width:720px) {
	.textDesc {
		margin-top: calc(43vw + 190px);
	}
}

@media all and (max-width:560px) {
	.desktop {
		display:none;
	}
	
	.mobile {
		display:block;
	}
	
	.photoTag {
		top: 330px;
	}

	.photoMat {
		position: relative;
		width: calc(100vw - 30px);
		left: 15px;
		top: 420px;
		padding-bottom: calc(61.4% + 1px);
	}
	
	.buttons {
		margin-left: 50vw;
		transform: translateX(-109px);
	}
	
	.textDesc p {
	  font-size: 14px;
	  line-height: 1.5;
	}
	
	.textDesc {
		margin-top: 0;
		width: calc(95vw - 120px);
		top: 60px;
		left: 44px;
	}
	
	.audioPlayer,
	.videoPlayer {
		top:0;
		transform: scale(1);
		position: relative;
		width: 80vw;
		left: 10vw;
		margin-top: calc(320px + 30vw);
	}
	
	.videoPlayer {
		margin-left: 0;
		margin-top: 0;
	}
	
	.footNote {
		top: 147px;
	}
	
	.textTab, 
	.iB-overlay {
		display:none;
	}
	
	.innerBound {
		max-height: none;
		overflow: visible;
	}
}

@media all and (max-width:380px) {
	.audioPlayer {
		margin-top: calc(350px + 30vw);
	}
}
.footNote a {
	color: #000;
	opacity: .76;
}