/* Fonts */
@font-face {
	font-family: 'Client Mono';
	src: url('fonts/ClientMono-Bold.woff2') format('woff2'), url('fonts/ClientMono-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'National';
	src: url('fonts/National-Bold.woff2') format('woff2'), url('fonts/National-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'National';
	src: url('fonts/National-Regular.woff2') format('woff2'), url('fonts/National-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*** Reset ***/
*{box-sizing:border-box;user-select: none; -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}

body{margin:0;font-family: "National", sans-serif;font-size:18px;background:#FFF;height:100vh;overflow:hidden;}
body.dev{background:url('../img/PANORAMA3.jpg') no-repeat; background-size:auto 100%; width:13000px; overflow-y: hidden; overflow-x: scroll; }
body.dev .object{opacity:0.5; border:1px solid #CCC;}

img{}
a{text-decoration:none;color:inherit;}
h1,h2,h3{margin:0;}
p{margin:0;}
figure{margin:0;}

.flex-container{display: flex; flex-wrap: wrap;}

/* Pages */
.page{position:absolute;width:100%;height:100%;background:#a2ccb6;z-index:99;transition:0.8s;}
.page header{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); color:#000;text-align: center;width:35%;}
.page header h2{font-size:1.8em;margin:0 0 1em 0;}
.page header p{font-size:1em;line-height:1.3em;}
.page-arrow{ position:absolute; top:50%; transform: translateY(-50%); cursor:pointer; color:#FFF;z-index:999;color:#000; font-size:0.6em; text-align: center; font-family: 'Client Mono'; z-index:99;}
.page-arrow, .page-arrow img, .page-arrow span{ cursor:pointer !important; }
.page-arrow span{display:block;margin-top:1em;}
.page-arrow img{width:3em;}

.header-logo{position:absolute;left:36px;top:20px;}
.header-logo img{height:50px;}

#page-arrow1{right:25px;}
#page-arrow2{left:25px;}
#page-arrow3{right:25px;}
#page-arrow4{left:25px;}
#master-arrow1{left:25px;}
#master-arrow2{right:25px;}
#page1{left:0;}
#page2{left:100%;}
#page2 header{width:70%;}
#page2 header .about-text{ height:60vh; padding-right:1em; margin-left:1em; overflow-y: scroll; text-align: justify;}
#page2 header .about-text .credits{font-size:0.8em;padding-top:2em;border-top:1px solid #000;}
#page2 header .about-text .credits img{ height:60px; vertical-align:middle; margin-right:2em;}
#page2 .pdf-link{position: absolute; display: block; left:90%; top:50%;
    transform: translate(0,-50%); font-family: 'Client Mono'; text-align: center; font-size: 0.6em;}
#page2 .pdf-link i{ display:block; margin-bottom:0.5em; font-size: 2em;}

#page3{left:100%; z-index:99999; background:url(../img/west_coast_capa2.jpg) no-repeat center #a2ccb6; background-size: auto 100%;}
#page3 header{width:auto; position:relative; transform: translate(-50%,-25%);}
#page3 h2{text-align:justify !important; color:#FFF; font-size:3.3em; line-height:1em; margin:0 0 0.5em 0;}
#page3 .flex-container div{ color:#FFF; font-family: 'Client Mono'; width:50%; font-size:1.6em; font-weight: 300; }
#page3 .flex-container div:nth-child(1){text-align:left;}
#page3 .flex-container div:nth-child(2){text-align:right; }

/* Objects containers */
#master{position:absolute;width:100vw;height:105vh;left:100%;overflow:hidden;overflow-x:scroll;transition:0.8s;}
#master .page-arrow{color:#000;}
.main-container{position:relative;height:100vh;left:0;overflow:hidden;}
#master, #master *{ cursor: url('../img/hand-rock-regular.png'), auto; }

/* Objects */
.object{position:absolute;cursor:default;/*transition:1s ease-out;*/width:auto;}
.object:hover{transition:0.2s;}
.object img{height:100%;display:block;transition: 0.3s;}
.object video{position:absolute;height:40vh;width:auto;top:50%;left:50%; transform: translate(-50%, -50%); display:none;z-index:999; background: #000;}

.object-number{position: absolute; bottom:100%; right:100%; background:#FFF; color:#000; padding:1em; border: 1px solid #CCC; }

.sound-object{ /*cursor: url('../img/sound-icon.png'), auto;*/}
.sound-object:after{content:'';display:block;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:25px;height:25px;background:#FFF;border-radius:50%;z-index:1;background:url('../img/sound-icon.png') no-repeat center #FFF;background-size:60% 60%;opacity:0;transition:8s ease-out;}
.sound-object:hover:after{opacity:1;transition:0.2s;}
.object:hover img{transform:scale(1.03);}
.video-object:hover{transform:none !important;}

#info-icon{position: absolute;left:159vh; top:50%;}
#info-hand{position:relative;animation:hand-anim 1.5s infinite linear;}
@keyframes hand-anim{ 0%{left:15px;}50%{left:-15px;}100%{left:15px;} }


#obj1{height:10vh;left:24vh;top:73vh;}
#obj2{height:43vh;left:56vh;top:12vh;}
#obj3{height:26vh;left:109vh;top:58vh;}
#obj4{height:65vh;left:182vh;top:18vh;}
#obj5{height:97vh;left:249vh;top:0vh;}
#obj6{height:13vh;left:324vh;top:30vh;}
#obj7{height:9vh;left:352vh;top:69.5vh;}
#obj8{height:49vh;left:367vh;top:37vh;}
#obj9{height:34vh;left:413vh;top:15vh;}
#obj10{height:79vh;left:510vh;top:10vh;}
#obj11{height:40vh;left:639vh;top:51vh;}
#obj12{height:34vh;left:662vh;top:10vh;}
#obj13{height:16vh;left:703vh;top:60vh;}
#obj14{height:30vh;left:705vh;top:14vh;}
#obj15{height:93vh;left:773vh;top:3vh;}
#obj16{height:19vh;left:818vh;top:31vh;}
#obj17{height:40vh;left:847vh;top:51vh;}
#obj18{height:28vh;left:910vh;top:6vh;}
#obj19{height:32vh;left:955vh;top:58vh;}
#obj20{height:87vh;left:985vh;top:7vh;}
#obj21{height:26vh;left:1076vh;top:38vh;}
#obj22{height:13vh;left:1104vh;top:20vh;}
#obj23{height:70vh;left:1103vh;top:16vh;}
#obj24{height:24vh;left:1212vh;top:46vh;}
#obj25{height:65vh;left:1260vh;top:18vh;}