/*	Theme Name: JOGA P.020
Author: Jorge Garcia . JOGA
Author URL: http://www.joga.designs
Description: CSS Style for the portfolio of Jorge Garcia . JOGA / MAR 2020.
Version: 0.0.1 MVP*/

html {
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	/*color: #222;*/
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 100;
	line-height: 1.2;
	/*cursor: none;*/
}

body {
	margin: 0;
	/*transition: background 0.5s ease;*/
	/*background-color: #fff;*/
	/*cursor: none;*/
	background-color: #090808;
}

/* LOADING */

#sidebar {
	width: 300px;
	height: 100%;
	position: fixed;
		left: 0;

	background: #efe8d8;
}

	#bar {
		width: 0;
		height: 10px;
		background: #3091ce;
		transition: width 0.3s ease-out, height 0.3s ease-out 0.2s;
	}

		#bar.hidden {
			height: 0;
		}

	#loaded {
		padding: 15px 20px;
		white-space: nowrap;
	}

/* SELECTION */

::selection {
	background: #ffffff; /* WebKit/Blink Browsers */
	mix-blend-mode: difference;
  }
  ::-moz-selection {
	background: #ffffff; /* Gecko Browsers */
	mix-blend-mode: difference;
  }

/* VIDEO */

  .video-play {
	width: 100%;
	height: 100%;
  }

  .video-play2 {
	width: 100%;
	height: 70%;
  }



/* CURSOR */

.cursor {
	z-index: 9999;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	mix-blend-mode: difference;
  }
  .cursor .cursor__inner {
	z-index: 9999;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	mix-blend-mode: difference;
  }
  .cursor .cursor__inner--dot {
	width: 5px;
	height: 5px;
	background: #ffffff;
	mix-blend-mode: difference; 
  }
  .cursor .cursor__inner--circle {
	width: 80px;
	height: 80px;
	border: 1px solid#ffffff;
	mix-blend-mode: difference;
  }
  .cursor .cursor__inner--text {
	width: 25rem;
	font-size: 20px;
	display: flex;
  }
  .cursor .cursor__inner--text::after {
	content: ' →';
	margin-left: 1rem;
	display: block;
	color: #ffffff;
	font-size: 4rem;
	mix-blend-mode: difference;
  }
  
  @media screen and (min-width: 53em) {
	*,
	*::after,
	*::before {
	  cursor: none !important;
	}
  }


/*TEXT ANIMATION*/

.city:before {
	content: 'CLO ⤷ (08)';
	color: #ffffff;
	animation: switch 10s linear infinite;
	text-align: right;
  }
  
  @keyframes switch {
	10% { content: 'BOG ⤷ (010)'; color: #ffffff; }
	20% { content: 'CPT ⤷ (013)' }
	30% { content: 'AMS ⤷ (014)' }
	40% { content: 'LAX ⤷ (015)' }
	50% { content: 'LDИ ⤷ (016)' }
  }

/*LOCOMOTIV SCROLL*/

a {
	background-color: transparent;
	text-decoration: none;
}

html:not(.has-scroll-init) {
	cursor: wait;
	overflow: hidden;
}

html.has-scroll-smooth {
	backface-visibility: hidden;
	overflow: hidden;
	transform: translateZ(0);
}

[data-load-container] {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

html.has-scroll-dragging {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.has-scroll-smooth body {
	overflow: hidden;
}

.o-layout {
	padding: 0;
	list-style: none;
	font-size: 0;
	margin: 0;
}

.o-scroll {
	box-sizing: border-box;
	overflow: hidden;
	width: 100vw;
	transition: background 0.5s linear;
	background-color: #090808;
}

.has-scroll-smooth .o-scroll {
	position: relative;
}

.c-scrollbar {
	width: 3px;
	position: absolute;
	right: 0;
	top: 0;
	height: 100vh;
	transform-origin: center right;
	transform: scaleX(1);
	transition: transform .2s linear;
}

.c-scrollbar:hover {
	transform: scaleX(1.3);
	cursor: -webkit-grab;
	cursor: grab;
}

.c-scrollbar_thumb {
	background-color:#090808;;
	position: absolute;
	top: 0;
	left: 0;
	right: 0
}

.c-scrollbar_thumb:hover {
	cursor: pointer;
}

.o-container {
	margin-right: auto;
	margin-left: auto;
	max-width: 90vw;
}

@media (max-width:699px) {
	.o-container {
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media (min-width:700px) {
	.o-container {
		padding-right: 2.5rem;
		padding-left: 2.5rem;
	}
}

.o-title {
	margin: 0;
	padding: 2.5rem 0;
	perspective: 800px;
	-webkit-perspective: 800px;
}

.o-title_line {
	display: block;
	opacity: 0;
	transition: opacity 1s
}

.o-title.is-inview .o-title_line {
	transform: none;
	opacity: 1;
}

.o-title.is-inview .o-title_line:first-child {
	transition-delay: .1s;
}

.o-title.is-inview .o-title_line:nth-child(2) {
	transition-delay: .2s;
}

.o-title.is-inview .o-title_line:nth-child(3) {
	transition-delay: .3s;
}

.o-title.is-inview .o-title_line:nth-child(4) {
	transition-delay: .4s;
}

.o-title_line span {
	display: inline-block;
	min-width: .05em;
	font-size: 4vw;
	color: #FFF;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 100;
}

.o-image_wrapper {
	position: relative;
	overflow: hidden;
	background-color: #000;
	margin: 0 0;
	padding: 0 0;
}

.o-image {
	opacity: 1;
	/*mix-blend-mode: normal;*/
	margin: 0 0;
	padding: 0 0;
}

.o-image img {
	width: 100%;
	opacity: 0;
	/*transform: scale(1.15);*/
	transition: opacity 1.2s; /*cubic-bezier(.215, .61, .355, 1), transform 1.2s cubic-bezier(.215, .61, .355, 1)*/
	margin: 0 0;
	padding: 0 0;
}

.o-image.is-inview img {
	opacity: 1;
	/*transform: scale(1);*/
	transition-delay: .5s;
}

.c-header {
	position: relative;
}

@media (max-width:699px) {
	.c-header {
		height: 90vh;
		min-height: 90vh;
	}

	.c-header_title_line {
		font-size: 17vw;
	}
}

@media (min-width:700px) and (max-width:999px) {
	.c-header {
		height: 90vh;
		min-height: 90vh;
	}
}

@media (min-width:1000px) {
	.c-header {
		height: 95vh;
		min-height: 95vh;
		margin-bottom: 150px;
	}
}

.c-header_title {
	padding: 2.5rem 0;
	perspective: 600px;
	-webkit-perspective: 600px;
}

.c-header_line,
.c-header_title {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
}

.c-header_line {
	right: 0;
	transform: scaleX(0);
	transition: transform .6s cubic-bezier(.215, .61, .355, 1)
}

.c-header_line.is-inview {
	transform: scaleX(1)
}

.c-header_title_line {
	display: block;
	opacity: 0;
	transform-origin: center top;
	transform-style: preserve-3d;
	transform: translateY(100%) rotateX(-80deg);
	transition: opacity 0s cubic-bezier(.215, .61, .355, 1), transform 0s cubic-bezier(.215, .61, .355, 1);
	font-size: 7vw;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 200;
	color: #FFF;
	line-height: 1;
}

html.is-ready .c-header_title_line {
	transform: none;
	opacity: 1;
	transition-duration: .8s;
}

html.is-ready .c-header_title_line:first-child {
	transition-delay: .1s;
}

html.is-ready .c-header_title_line:nth-child(2) {
	transition-delay: .2s;
}

html.is-ready .c-header_title_line:nth-child(3) {
	transition-delay: .3s;
}

html.is-ready .c-header_title_line:nth-child(4) {
	transition-delay: .4s;
}

.c-header_title_line span {
	display: inline-block;
}

.c-header_title_line.-version {
	text-transform: none;
	font-size: 0;
}

.c-header_heading {
	padding: 0;
}

.c-header_heading_label {
	display: block;
	font-size: 1.2vw!important;
	transition: opacity 1s;
	color: #FFF;
	opacity: 0;
}

html.is-ready .c-header_heading_label {
	transform: none;
	opacity: 1;
	transition-delay: 1s;
}

html.is-ready .o-layout_item:nth-child(2) .c-header_heading_label {
	transition-delay: 1s;
	opacity: 1;
}

.c-fixed_wrapper {
	position: relative;
	overflow: hidden;
	background-color: #000;
}

@media (min-width:1000px) {
	.c-fixed_wrapper {
		height: 100vh;
	}
	
}

@media (max-width:999px) {
	.c-fixed_wrapper {
		height: 50vh;
	}
}

.c-fixed_target {
	bottom: -100vh;
}

.c-fixed,
.c-fixed_target {
	position: absolute;
	top: -100vh;
	right: 0;
	left: 0;
}

.c-fixed {
	height: 100%;
	background-size: cover;
	background-position: 50%;
	opacity: 100%;
	mix-blend-mode: multiply
}

html:not(.has-scroll-smooth) .c-fixed {
	top: 0;
}


.c-section {
	position: relative;
}

@media (max-width:1199px) {
	.c-section {
		padding-bottom: 10vh;
		margin-bottom: 10vh;
	}
}

@media (min-width:1200px) {
	.c-section {
		margin-bottom: 35vh;
	}
}

.c-section_infos {
	position: relative;
	max-width: 500px;
	z-index: 0;
}

@media (min-width:1000px) {
	.c-section_infos {
		padding-top: 7.5rem;
	}
	.c-section_infos.-padding {
		padding-top: 35vh;
	}
}

@media (max-width:999px) {
	.c-section_infos {
		margin-bottom: 1.875rem;
	}
}

.c-section_infos_inner>* {
	opacity: 0;
	transform: translateY(60px);
	transition: opacity .6s cubic-bezier(.215, .61, .355, 1), transform .6s cubic-bezier(.215, .61, .355, 1)
}

.c-section_infos_inner.is-inview>* {
	opacity: 1;
	transform: none;
}

.c-section_infos_inner.is-inview>:first-child {
	transition-delay: .06s;
}

.c-section_infos_inner.is-inview>:nth-child(2) {
	transition-delay: .12s;
}

.c-section_infos_inner.is-inview>:nth-child(3) {
	transition-delay: .18s;
}

.c-speed-block {
	position: relative;	
}

@media (min-width:1000px) {
	.c-speed-block.-margin {
		margin: 15px 0;
	}
}

@media (max-width:999px) {
	.c-speed-block {
		margin: 15px 0;
	}

	.c-header_heading_label {
		font-size: 4.5vw!important;
	}
}

@media (max-width:699px) {
	.c-speed-block {
		margin: 15px 0;
	}

	.o-title_line span {
		font-size: 7vw;
		line-height: 9vw;
	}

	.c-header_title_line {
		font-size: 8vw;
		line-height: 9vw;
	}

	.c-header_heading_label {
		font-size: 4.5vw!important;
	}

	.video-play {
		width: 100%;
		height: 360px;
		padding: 0 0;
		margin: 0 0;
	  }

	  .video-play2 {
		width: 100%;
		height: 360px;
		padding: 0 0;
		margin: 0 0;
	  }
}

.c-speed-block_image {
	margin-top: 0px;
	margin-bottom: 0px;
}

.c-speed-block_title {
	font-size: 1.1rem;
	text-transform: sentense;
	font-weight: 500;
	color: #FFF;
	text-align: center;
	position: absolute;
	bottom: 3.75rem;
	right: 0;
	left: 0;
	opacity: 0;
	transform: translateY(60px);
	transition: opacity .6s cubic-bezier(.215, .61, .355, 1), transform .6s cubic-bezier(.215, .61, .355, 1)
}

.c-speed-block_title.is-inview {
	opacity: 1;
	transform: none;
	transition-delay: .3s;
}

@media (max-width:1199px) {
	.c-speed-block_title {
		display: none;
	}

	.c-header_heading_label {
		font-size: 4.5vw!important;
	}
	
}