/*
	Theme Name: Naro 2
	Theme URI: https://yozz.fr
	Description: Responsive Wordpress Theme
	Template: montoya
	Version: 1.0
	Author: You
	Author URI: https://yozz.fr
	Text Domain: Naro 2
*/



/*------------------------------------------------------------------

Add here your own styles
-------------------------------------------------------------------*/

@font-face {
    font-family: 'TroisMilleExtralight-25';
    src: url('fonts/troismilles/TroisMilleExtralight-25.woff') format('woff');
    font-weight: lighter;
    font-style: normal;}

@font-face {
    font-family: 'TroisMilleLight-25';
    src: url('fonts/troismilles/TroisMilleLight-25.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'TroisMilleRegular-25';
    src: url('fonts/troismilles/TroisMilleRegular-25.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'TroisMilleRegular-30';
    src: url('fonts/troismilles/TroisMilleRegular-30.woff') format('woff');
    font-weight: normal;
    font-style: normal;}


/*GLOBAL*/
#sidebar {display:none;}
hr.animated-line {padding-top:20px; padding-bottom:20px;}
.smooth-scroll #content-scroll {max-width:100vw;}
.preloader-wrap {background:linear-gradient(145deg, #000, #000);}
.preloader-list img {opacity:1;}
.button-border {border-color:#000; background:#000;}
.preloader-list img {opacity:.3 !important;}
#hero {z-index:10;}
#page-nav .next-hero-title-wrapper {margin-bottom:30px;}
#ball {border-width:1px !important;}


/*MENU*/
.fullscreen-menu .flexnav {display:block; padding:0 1.3vw;}
.fullscreen-menu .flexnav li {text-align:left;}
.fullscreen-menu .flexnav li ul li a {font-size:16px; line-height:1; padding:2px 0;}
.fullscreen-menu .flexnav .touch-button {height:55px;}
.fullscreen-menu .flexnav li ul li a { margin-left:5px; line-height: 25px;}
.fullscreen-menu.invert-header .flexnav li a {font-family:'TroisMilleLight-25', sans-serif; font-size:calc(1rem + 5.5vw); line-height:calc(1rem + 5.5vw);}
.burger-dots .button-text {font-size:13px; line-height:1.8;}
#main #hero .button-text, #main .large-btn .button-text {font-size:13px !important;}
.inner {vertical-align:bottom;}


/*HEADER*/
#logo img {height:43px;}
#logo a {line-height:1.5;}
#logo a span {font-family:'TroisMilleRegular-30', sans-serif; text-transform:lowercase}
#logo a:after {font-family:'TroisMilleLight-25', sans-serif; line-height:1; margin-top:-10px;}
#logo a span {font-size:2.2rem;transition:all ease .8s;}
#logo a span:hover {transition:all ease 1s; letter-spacing:3px; padding-left:10px;}
#logo a:after {content:"narrative & interactive design"; display:none; font-size:13px; width:90px;}
.over-white-section #logo a {color:#fff;}
.all-works {border-radius:30px;font-family:'TroisMilleRegular-25', sans-serif !important; line-height:2;}
.all-works a {font-size:13px; text-transform:lowercase;}
.hometopmenu {font-size:13px; text-align:right; padding-top:10px; clear:both; float:right; width:100px; text-transform:lowercase;}
.hometopmenu a {display:block; pointer-events: initial; transition: opacity .5s; opacity:1;}
.hometopmenu a:hover {opacity:.5; transition:  opacity .5s;}
.loginbuton {opacity:1; transition:  opacity .5s; float:right; font-size:13px; pointer-events: initial; text-transform:lowercase;}
.loginbuton:hover {opacity:.5; transition:  opacity .5s;}
.loopslide {display:block; padding:15% 3%; opacity:.4; transition:  opacity .5s;font-family:'TroisMilleLight-25', sans-serif !important;}
.button-text {font-size:13px; text-transform:lowercase;}
.loopslide:hover {opacity:1; transition:  opacity .5s;}


/*HERO HEADER*/
.hero-title img {margin-left:5px;}
.hero-title-wrapper, .next-hero-title-wrapper {margin-left:0px;}
.item-title span h3 {font-size:inherit; margin-bottom:0px;}


/*TYPO*/
.hero-title, h1, h2, h3, h4, h5, h6, p {color:#000;}
p {font-size:calc(1rem + 0.02vw); line-height:1.4; font-family:'TroisMilleLight-25', sans-serif !important; word-spacing:0em;}
b, strong {font-weight:bold; font-family:'TroisMilleLight-25', sans-serif;}
html, body, #page-nav .next-hero-subtitle,  textarea {font-family:'TroisMilleLight-25', sans-serif; letter-spacing:0em; word-spacing:.1em;}
input, textarea {font-size:1rem;}
.wpgb-select-placeholder input[type="text"], .wpgb-select {font-family:'TroisMilleLight-25', sans-serif;}
.marquee-title span {line-height:1.5;}
.preloader-intro li {font-size:5.5vw;font-family: 'TroisMilleLight-25', sans-serif;}
#main #hero .button-text, div#info-text, #share::before {font-family:'TroisMilleLight-25', sans-serif;}
#share::before {font-size:13px;}
h2 {line-height:1.2; font-size:calc(1rem + 4.2vw); font-family: 'TroisMilleExtralight-25', sans-serif;}
h3 {font-family: 'TroisMilleExtralight-25', sans-serif; line-height:1.1; font-size:calc(1rem + 2.5vw);letter-spacing:-.02em;}
h4 {line-height:1.2; font-size:calc(1rem + 1.2vw);font-family: 'TroisMilleExtralight-25', sans-serif;}
h5 {line-height:calc(1rem + 1vw); font-size:calc(1rem + 0.50vw);font-family: 'TroisMilleLight-25', sans-serif;}
h6 {font-family: 'TroisMilleLight-25', sans-serif;}
cite, dfn, em, i {font-family: 'TroisMilleLight-25', sans-serif;}
.homebloc h6 {font-size:calc(1rem + 0.30vw);}
.percentage-intro {font-family:'TroisMilleLight-25', sans-serif; letter-spacing:1px; text-transform:uppercase; font-size: 10px;}
li {font-size:calc(1rem + 0.02vw); margin-bottom:10px; line-height:1.6; color:#222;}
.fullscreen-menu .flexnav li ul li a {font-size:1.8vw; line-height:1.1;}
h2.has-mask, h5.has-mask,  h4.has-mask {margin-bottom:0px;}
h3.has-mask {margin-bottom:25px;}
.next-hero-subtitle {font-family: 'TroisMilleLight-25', sans-serif; font-size:13px;}
.socials-text, .copyright {font-size:13px; text-transform:lowercase;}
.primary-font-title {font-size:calc(1rem + 14.15vw); line-height:calc(1rem + 12.5vw); font-family:'TroisMilleLight-25', sans-serif; text-transform:lowercase;}
.slide-title.primary-font-title {font-family:'TroisMilleLight-25', sans-serif;}
.socials li a, .clapat-button a, .jssocials-share-link {font-family:'TroisMilleRegular-25', sans-serif;}
input[type="submit"] {font-family:'TroisMilleLight-25', sans-serif;}
input {font-family: 'TroisMilleLight-25', sans-serif; line-height:1;}

/*PROJETS*/
#show-filters {display:none;}
.item-caption {padding:10px 0;}
.wp-block-columns {gap:1em;}
figure {margin-bottom:.4em;}
.wp-container-5.wp-container-5 {gap:40px !important;}
.next-hero-progress, .next-hero-progress span {height:1px;}


/*POST*/
.post-prev-title span, .post-next-title span, .post-prev-caption, .post-next-caption {font-family: 'TroisMilleLight-25', sans-serif; font-size:calc(1rem + 1vw); line-height:calc(1rem + 1.2vw);}
#post-comments {display:none;}
.light-content #post-navigation {border-bottom:none;}
.post-prev-caption, .post-next-caption { opacity:.2; margin-bottom:0px;}
.collage-thumb:hover .thumb-info {display:none;}
#post-navigation .post-max-width {max-width:100%;}
.post-prev, .post-next {width:35%;}
.post-prev {margin-right:30%;}


/*PORTFOLIO*/
h6.marginmeta {margin-bottom:0px; margin-top:1vw; font-family:'TroisMilleRegular-25', sans-serif; font-size:13px; line-height: 1.2;}
.marginmeta {margin-bottom:0px; margin-top:3vw;}
p.metap {font-size:13px;}
p.marginmeta {font-size:14px; line-height:1.6;padding-top:20px; font-family:'TroisMilleExtralight-25', sans-serif !important;}


/*PAGE*/
.no-margin {margin-bottom:0px;}
.row_padding_bottom {padding-bottom:80px;}
.row_padding_top {padding-top:80px;}
figcaption {background:transparent;}
hr {height:6vw;}
.button-box {display:flex; width:100%; margin-top:2vw !important;}
.dark-content .button-border a {color:#fff;}
#hero-caption {padding-bottom:0px; min-height:25vw;}


/*CATÉGORIES*/
.showcase-list-holder {max-width:100vw; overflow:hidden;}
.sl-title {width:calc(100% - 300px); line-height:1; font-size:calc(1rem + 1vw);}
.sl-year {line-height:1; font-size:calc(1rem + 1vw);}
.sl-subtitle, article .entry-date {width:300px;}
.sl-subtitle span {line-height:1.5; font-size:calc(1rem + 0vw);}
.sl-title span br, .sl-subtitle span br, .entry-date span br, .item-cat br {display:none;}
.entry-date span {line-height:1.3; font-family:'TroisMilleLight-25', sans-serif; font-size:20px;}
.has-post-thumbnail .article-wrap .post-title {max-width:calc(100% - 220px);}
.item-cat span::before {text-align:left;}


@media screen and (min-width: 1466px) {
}


@media screen and (min-width: 1024px) and (max-width: 1466px) {
	/*PAGE*/
	.right h3, .right h5,.right h4, .right p {max-width:80% !important;}	
}


@media screen and (min-width: 1025px) {
	/*HEADER*/
	
	/*HOME*/
	.portfolio-page {margin-top:-320px;}
	.portfolio-wrap {margin-bottom:0px;}
	.parallax-grid .item-parallax {max-height:50vh; min-width:40vw;}
	
	.parallax-grid .item:nth-of-type(9n+1) .item-parallax {margin-top:18%; min-width:55%; min-height:65vh;}
	.parallax-grid .item:nth-of-type(9n+2) .item-parallax {min-width:35%; max-height:65%; margin-top:-12%;}
	.parallax-grid .item:nth-of-type(9n+3) .item-parallax {min-width:40%; max-width:40%;min-height:70vh; margin-top:5%;}
	.parallax-grid .item:nth-of-type(9n+3) .item-parallax .item-title, .parallax-grid .item:nth-of-type(9n+3) .item-parallax .item-cat, .parallax-grid .item:nth-of-type(9n+3) .item-cat span::before {float:right; text-align: right;}
	.parallax-grid .item:nth-of-type(9n+4) .item-parallax {min-width:55%; max-height:60vh; left:10%; margin-top:16%;}
	.parallax-grid .item:nth-of-type(9n+5) .item-parallax {margin-top:10%;}
	.parallax-grid .item:nth-of-type(9n+6) .item-parallax {margin-top:20%; width:55vw; left:20vw; min-height:60vh;}
	.parallax-grid .item:nth-of-type(9n+6) .item-parallax .item-title, .parallax-grid .item:nth-of-type(9n+6) .item-parallax .item-cat, .parallax-grid .item:nth-of-type(9n+6) .item-cat span::before {float:right; text-align: right;}
	.parallax-grid .item:nth-of-type(9n+7) .item-parallax {margin-top:20%; min-width:32vw; max-height:37vh;}
	.parallax-grid .item:nth-of-type(9n+8) .item-parallax {min-width:62%; max-height:70vh; height:70vh; margin-top:20%;}
	.parallax-grid .item:nth-of-type(9n+9) .item-parallax {margin-top:45%; left:10%;}
	.parallax-grid .item:nth-of-type(9n+9) .item-parallax .item-title, .parallax-grid .item:nth-of-type(9n+9) .item-parallax .item-cat, .parallax-grid .item:nth-of-type(9n+9) .item-cat span::before {float:right; text-align: right;}
	.parallax-grid .item:nth-of-type(9n+10) .item-parallax {margin-top:45%;}
	.parallax-grid .item:nth-of-type(9n+11) .item-parallax {margin-top:-6%;}
	.parallax-grid .item:nth-of-type(9n+12) .item-parallax {margin-top:20%; right:10%; min-height:70vh;}
	.parallax-grid .item:nth-of-type(9n+13) .item-parallax {margin-top:25%;}
	.parallax-grid .item:nth-of-type(9n+14) .item-parallax {margin-top:30%;}
	/*.parallax-grid .item:nth-of-type(9n+11) .item-parallax {margin-top:25%;}
	.parallax-grid .item:nth-of-type(9n+12) .item-parallax {top:100%; min-width:50%; left:42%;}
	.parallax-grid .item:nth-of-type(9n+13) .item-parallax {top:60%;}
	.parallax-grid .item:nth-of-type(9n+14) .item-parallax {margin-top:35%;}
	.parallax-grid .item:nth-of-type(9n+15) .item-parallax {margin-top:30%;}*/


	
	/*PAGES & PROJETS*/
	.worktextblock {max-width:80% !important; padding-right:0px;}
	.worktextleft {max-width:80% !important;}
	.scrolling-element.right {padding-left:0px;}
	.next-hero-subtitle-wrapper {max-width:50%;}
	.next-hero-title-wrapper {width:calc(100vw - 160px);}
	p.marginmeta {max-width:60%;}
	h2.marginmeta {line-height:1;}

}

@media screen and (max-width: 1024px) {
	/*HEADER*/
	#logo {top:26px;}
	#logo a {width:35px; height:17px; border-width:8px; top:15px;}
	#logo a:after {width:10px; height:10px; bottom:4px; left:4px; display:none;}
	.fullscreen-menu.invert-header .flexnav li a {font-size:12vw; line-height:1.1;}
	.nav-height {padding:40px 0 0 0;}
	.loginbuton, .hometopmenu {display:none;}
	.preloader-list img {width:100px;}
	
	/*HOME*/
	.homeblock {display:none;}
	.homecolumn {width:46%;}
	.homecolumn.mobile {display:none;}
	.snap-slider-captions .slide-subtitle {max-width:70vw;}
	.snap-slider-captions {mix-blend-mode:initial;}
	.snap-slider-captions .slide-title span, .in-view.snap-slide-caption .slide-subtitle span {color:inherit;}
	.item-cat {max-width:100%;}
	.hero-title h4 {font-size:5vw;}
	.hero-title h4 span {display:inline;}

	/*TYPO*/
	.hero-subtitle, #page-nav .next-hero-subtitle {font-size:calc(1rem + .9vw);}
	.slide-title {font-size:12vw;}
	.next-hero-title, .hero-title {font-size:12vw; line-height:1;}
	#main-page-content {line-height:1.1;}
	h3 {font-size:30px;}
	
	/*FOOTER*/
	#page-nav .next-hero-title-wrapper {margin-bottom:10px;}
	.copyright {margin: 0 20px;}
	#footer-container {background:none;}
	.socials li a {font-size:12px;}
	
	/*PORTFOLIO*/
	.scrolling-element.right {max-width:100% !important;}
	.row_padding_top {padding-top:20px;}
	.row_padding_bottom {padding-bottom:10px;}
	.wp-block-spacer {height:30px !important;}
	
	/*PAGE & PROJETS*/
	.scrolling-element.right {width:100%;}
	.right h3, .right h5,.right h4, .right p {max-width:100% !important;}
	#share {display:none;}
	p.marginmeta {padding-top:0px;}
}


/*OFF
/*HOME
.snap-slider-captions .slide-title-wrapper {margin:0;}
.snap-slider-captions .slide-subtitle {font-size:calc(1rem + .7vw); line-height:calc(1rem + 1vw); max-width:30vw;}
.snap-slide-caption .slide-subtitle span br {display:none;}
.homeblock {width:100%; padding:40px 0 0 0;}
.homecolumn {width:24%; border-top:1px solid #d1d1d1; float:left; margin:0 4% 0 0; padding:50px 0 0 0;}
.homecolumn2 {width:24%; border-top:1px solid #323232; float:left; margin:0 4% 0 0; padding:50px 0 0 0;}
.homecolumn h6, .homecolumn2 h6 {padding:0; margin-bottom:25px;}
.homecolumn p, .homecolumn2 p {line-height:1.2; font-size:15px; margin-bottom:0px;}
.homecolumn2 p {opacity:.2;}
a.lastlink {opacity:.5 !important; line-height:3; font-size:13px;}
.homecolumn a, .homecolumn2 a {opacity:1; transition: opacity .5s; cursor:pointer;}
.homecolumn a:hover, .homecolumn2 a:hover {opacity:.5; transition: opacity .5s;}
.snap-slide-caption span h3 {font-family:'TroisMilleLight-25', sans-serif;font-size:.4em; line-height:.6; color:#fff;}
.classic-grid .item {height:21vw;}
.hero-video-wrapper video.bgvid {width:125%;}
#show-filters.enabled {display:none;}
#hero {z-index:11;}
.page-nav-caption {padding-bottom:40px;}