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


@font-face {
	font-family: 'NotCourierSans';
	src: url(fonts/NotCourierSans.otf);
}



section {
  	background-color: #fff;
	background-size: cover; 
	background-position: center center;
  	
	h1,h2,h3 {
    	color: #000;
    	font-size:5vw;
    	small {color: rgba(0,0,0,0.75);}
		
  	}
  
	p, a, .lead {
		color: rgba(0,0,0,0.5); 
		font-size:1.5vw;
	}
  	a {
		color:rgba(0,0,0,0.75);
	}
}

body, section {
   min-height:100vh;
	font-size: 2vw;
}

@media only screen and (orientation:landscape) and (min-width: 1281px){
	section:nth-child(1) {background-image: url(img/back/horizontal/L.jpg)}
	.info_computer{visibility: visible!important;}
	.info_phone{visibility: hidden!important;}
}
@media only screen and (orientation:landscape) and (max-width: 1280px){
	section:nth-child(1) {background-image: url(img/back/horizontal/M.jpg)}
	.info_computer{visibility: visible!important;}
	.info_phone{visibility: hidden!important;}
}
@media only screen and (orientation:landscape) and (max-width: 960px){
	section:nth-child(1) {background-image: url(img/back/horizontal/S.jpg)}
	.info_computer{visibility: visible!important;}
	.info_phone{visibility: hidden!important;}
}

@media only screen and (orientation:portrait) {
    section:nth-child(1) {background-image: url(img/back/vertical/background.jpg)}
	.info_phone{visibility: visible!important;}
	.info_computer{visibility: hidden!important;}
}

.info_extra{
	transition-duration: 0.2s;
	visibility:hidden;
	width:100vw;
	height:100vh;
	pointer-events: none;
	background: rgba(0,0,0,0.7);
	text-align: center;
	display:flex;
	align-content: center;
	position: absolute;
	top:0;
	left:0;
	margin:0!important;
} 

.center-box{
    
	position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:99;
    margin:auto;
    height:80vh;
    width:80vw;
    text-align:left;
	padding:2vw;
	color:white;
	font-family: 'Major Mono Display', monospace;/*NotCourierSans*/
	pointer-events: auto;
	font-size: 1.2em!important;
}

.titler{
    
	position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    height:2.2vw;
    width:80vw;
    text-align:center;
	z-index: 9999;
	color:#000!important;
	font-family: 'Major Mono Display', monospace;/*NotCourierSans*/
	pointer-events: none;
	font-size: 2vw!important;
	display: none;
	
}
.tooltip-inner{
	font-family: 'NotCourierSans', sans-serif!important;
	font-size: 1.5em!important;
	color:#000000;
	background-color: #fff;
	border-radius: 0px;
}
.tooltip>.arrow{visibility: hidden;}


.bottom_list{
	margin-top:5vw;
}



.brd{
	border:1px solid #fff;
	padding:0.5vw;
	margin:2vw;
	height:3vw;
	font-size: 2vw;
	line-height:1.9vw;
	cursor:pointer;
	transition-duration: 0.3s;
	color:#fff!important;
	text-decoration: none!important;
	
}

.navigation{
	background:#fff;
	min-height:100%;
	min-width:100%;

}

.size-1 {
	min-width: 1.5vw!important;
	min-height:1.5vw!important;
	margin-left:-0.75vw!important;
	margin-top:-0.75vw!important;
}

.size-2 {
	min-width: 1.8vw!important;
	min-height:1.8vw!important;
	margin-left:-0.9vw!important;
	margin-top:-0.9vw!important;
	
	/*
	animation-name: pulse;
	animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
	*/
}

.size-3 {
	min-width: 2vw!important;
	min-height:2vw!important;
	margin-left:-1vw!important;
	margin-top:-1vw!important;
	
	/*
	animation-name: pulse;
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
	*/
}

.size-4 {
	min-width: 2.2vw!important;
	min-height:2.2vw!important;
	margin-left:-1.1vw!important;
	margin-top:-1.1vw!important;
	
	/*
	animation-name: pulse;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;	
	*/
}

.size-5 {
	min-width: 2.5vw!important;
	min-height:2.5vw!important;
	margin-left:-1.25vw!important;
	margin-top:-1.25vw!important;
	
	/*
	animation-name: pulse;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
	*/
}

.group-1 {
	top:0!important;
	left:0!important;	
}

.group-2 {
	top:0!important;
	left:48vw!important;	
}

.group-3 {
	top:48vh!important;
	left:48vh!important;	
}

.group-4 {
	top:48vh!important;
	left:0!important;	
}

.item{
	min-height:1.5vw;
	max-height:2.5vw;
	min-width:1.5vw;
	max-width:2.5vw;
	content: '&nbsp';
	position:absolute;
	top:0;
	left:0;
	z-index: 9998;
	/*background-size: 300% 300%!important;*/
	
	/*
	-webkit-animation: Gradient 3.5s ease infinite!important;;
	-moz-animation: Gradient 3.5s ease infinite!important;;
	animation: Gradient 3.5s ease infinite!important;
	*/
}
	
.visited {
    animation: none!important;
    background-color: grey!important;
    opacity: 0.3!important;
}

.preview{
	position:absolute;
	overflow:hide;
	width:10vw!important;
	height:10vw!important;
	min-width:10vw!important;
	min-height:10vw!important;
	z-index: 99999!important;
	display:none;
	margin:0; 
	background-size: contain!important;
	-webkit-box-shadow: 0px 0px 69px -11px rgba(0,0,0,0.51);
	-moz-box-shadow: 0px 0px 69px -11px rgba(0,0,0,0.51);
	box-shadow: 0px 0px 69px -11px rgba(0,0,0,0.51);
	
}

.royalSlider{
			margin-top:0!important;
			height:100vh!important;
			width:100vw!important;
			min-height:100vh!important;
			min-width:100vw!important;
			overflow: hidden!important;
			display:flex!important;
			align-items: center!important;
			padding:0!important;
		}
		
		.royalSlider img{
			
			object-fit: scale-down;
			
		}

section span{top:50vh!important; position: absolute; background:none; width:20px;z-index: 99999!important; pointer-events: none;}
section span:first-child{
	left:20px!important;
}
section span:nth-child(2){
	right:20px!important;
}

@keyframes pulse { 0% { opacity: 1; } 100% { opacity: 0.3; } }

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

.brd:hover{
	background-color: #fff!important;
	color:#000!important;
}

.brd:first-child{margin-left:0;}
.brd:last-child{margin-right:0;}


.btn1 {
  	width: 3vw;
  	height: 4vw;
  	transition-duration: 0.2s;
}

.shown{visibility: hidden;}
.hidden{visibility:visible;}

.btn1 .icon-left {
  transition-duration: 0.5s;
  position: absolute;
  height: 0.35vw; 
  width: 1.5vw;
  top: 1.9vw;
  background-color: #fff;
  left: 0;
}
.btn1 .icon-left:before {
  transition-duration: 0.5s;
  position: absolute;
  width: 1.5vw;
  height: 0.35vw;
  background-color: #fff;
  content: "";
  top: -1.4vw;
}
.btn1 .icon-left:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 1.5vw;
  height: 0.35vw;
  background-color: #fff;
  content: "";
  top: 1.4vw;
}
.btn1 .icon-left:hover {
  cursor: pointer;
}
.btn1 .icon-right {
  transition-duration: 0.5s;
  position: absolute;
  height: 0.35vw;
  width: 1.5vw;
  top: 1.9vw;
  background-color: #fff;
  left: 1.5vw;
}
.btn1 .icon-right:before {
  transition-duration: 0.5s;
  position: absolute;
  width: 1.5vw;
  height: 0.35vw;
  background-color: #fff;
  content: "";
  top: -1.4vw;
}
.btn1 .icon-right:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 1.5vw;
  height: 0.35vw;
  background-color: #fff;
  content: "";
  top: 1.4vw;
}
.btn1.open .icon-left {
  transition-duration: 0.5s;
  background: transparent;
}
.btn1.open .icon-left:before {
  -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(0.45vw, 0.45vw);
          transform: rotateZ(45deg) scaleX(1.4) translate(0.45vw, 0.45vw);
}
.btn1.open .icon-left:after {
  -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(0.45vw, -0.45vw);
          transform: rotateZ(-45deg) scaleX(1.4) translate(0.45vw, -0.45vw);
}
.btn1.open .icon-right {
  transition-duration: 0.5s;
  background: transparent;
}
.btn1.open .icon-right:before {
  -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-0.45vw, 0.45vw);
          transform: rotateZ(-45deg) scaleX(1.4) translate(-0.45vw, 0.45vw);
}
.btn1.open .icon-right:after {
  -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-0.45vw, -0.45vw);
          transform: rotateZ(45deg) scaleX(1.4) translate(-0.45vw, -0.45vw);
}
.btn1:hover {
  cursor: pointer;
}



.info_phone{
	display:none;
	position:absolute;
	top:35vh;
	left:50vw;
	height:35.5vw;
	color:white;
	font-size:9vw;
	font-family: 'Major Mono Display', monospace;
	line-height: 12.1vw;
	
	padding-top:5vw;
	margin-left:-34vw;  
}


.info_computer{
	display:none;
	position:absolute;
	top:3vw;
	left:3vw;
	color:white;
}

.name {
	height:5.5vw;
	font-size:1.9vw;
	font-family: 'Major Mono Display', monospace;
	line-height: 2vw;
	margin-left: 1vw;
	transition-duration: 0.1s;
	
}


section > .gal{
	height:100vh!important;
	overflow-x:scroll;
	position: absolute;
	margin:0;
	top:0;
	left:0;
}	
.gal > img {
	height:100%;
}


#toNavigation	{position:fixed; top:20px; left:50vw; margin-left:-10px; color:#000000;}

.arrow {
	color:inherit;
	display: inline-block;
  	width: 20px;
  	height: 20px;
  	border-top: 2px solid #C20003!important;
  	border-right: 2px solid #C20003!important;
}

.arrow-top {
  transform: rotate(-45deg);
}
.arrow-right {
  transform: rotate(45deg);
}
.arrow-bottom {
  transform: rotate(135deg);
}
.arrow-left {
  transform: rotate(-135deg);
}

.foot {
	position:absolute; 
	bottom:0!important;
	height:150px;
	width:100vw;
	margin-left:-15px;
	margin-bottom: 30px;
	cursor: s-resize;
}


.d_arrow {
    opacity: 1;
    position: absolute;
        left: 50%;
        top: 95%;
    transform-origin: 50% 50%;
    transform: translate3d(-50%, -50%, 0);
}
/*
.arrow-first {
    animation: arrow-movement 3s  ease-in-out infinite;
}
.arrow-second {
    animation: arrow-movement 3s 1s ease-in-out infinite;
}
*/

.d_arrow:before,
.d_arrow:after {
    background-color:#933000;
    content: '';
    display: block;
    height: 3px; 
    position: absolute;
        top: 0;
        left: 0;
    width: 37px;
}

.d_arrow:before {
    transform: rotate(45deg) translateX(-23%);
    transform-origin: top left;
}

.d_arrow:after {
    transform: rotate(-45deg) translateX(23%);
    transform-origin: top right;
}

@keyframes arrow-movement {
    0% { 
        opacity: 0;
        top: 45%;
    }
    70% {
        opacity: 1;
    }
    100% { 
        opacity: 0;
    }
}


.oO b{
	font-weight:inherit!important;
	text-transform: uppercase!important;
	font-style: normal!important;
}


.work-description{
	min-height:2em;
	height:auto;
	font-size:1em;
	position:absolute;
	bottom:0;
	left:50%;
	padding:0.5em;
	margin-left:-30vw;
	width:60vw;
	-webkit-box-shadow: 0px 0px 69px -11px rgba(0,0,0,0.51);
	-moz-box-shadow: 0px 0px 69px -11px rgba(0,0,0,0.51);
	box-shadow: 0px 0px 69px -11px rgba(0,0,0,0.51);
	font-family: 'Major Mono Display', monospace;/*NotCourierSans*/
	z-index:99999!important;
	background: rgba(255,255,255,0.85);
	overflow: hidden;
	max-height: 2em;
	transition: max-height 1s ease-out;
}

.collapsed{
	max-height:0!important;
	
}
.work-description:hover{
	max-height: 6em!important;
	transition-delay: 0.1s!important;
}


.work-description>h2{ /* title */
	font-size:1em;
	text-transform: lowercase!important;
	
}	

.work-description>h2::after{
	content:"\2026";
	position: absolute;
	right: 0.5em;
    margin-top: -0.5em;
    font-size: 1.5em;
	font-family: 'NotCourierSans', sans-serif!important;
}

.work-description>h3{ /* description */
	font-size:0.7em;
	font-family: 'NotCourierSans', sans-serif!important;
}	
.work-description>h4{ /* technique */
	font-size:0.7em;
	font-family: 'NotCourierSans', sans-serif!important;
}	

.center-box>h1{
    font-size:0.8em;
}