/*
Theme Name: Rubic v2
Version: 1.0
Description: version 2015
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rubic
*/


/* WEBFONT
--------- */

@font-face {
	font-family: 'Mairet';
	font-weight: 400;
	src: url('fonts/Mairet-Regular.woff');
	src: url('fonts/Mairet-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Mairet';
	font-weight: 700;
	src: url('fonts/Mairet-Bold.woff');
	src: url('fonts/Mairet-Bold.woff2') format('woff2');
}

* {
	box-sizing: border-box;
}

:root {
	font-size: 4.4444vw;

	--size-S: 0.95rem;/* avant=1rem */
	--size-M: 1.4rem;/* avant=1.5rem */
	--size-L: 2.3rem;/* avant=2.625rem */

	--line-height-S: 1.2em;
	--line-height-M: 1.2em;
	--line-height-L: 1.3em;

	--yellow: #f2f75d;/* #fdfe0a */
	--white: #faf9f9;
}

@media (min-width: 900px) {
	:root {
		font-size: 1.1111vw;
	}
}

@media (min-width: 1800px) {
	:root {
		font-size: 20px;
	}
}

body {
	-webkit-font-smoothing: antialiased !important;
	font-family: Mairet, Helvetica, Arial;
	font-weight: 400;
	margin: 0;
	padding: 0;
	color: #000;
	box-sizing: border-box;

	background-color: var(--white);
	/* nico */

}

a {
	color: #000;
	text-decoration: none;
}

ul {
	list-style-type: none;
}

h1,
h2,
h3 {
	font-weight: normal;
	margin: 0;
}

h1,
h2,
h3 {
	font-size: var(--size-S);
	line-height: var(--line-height-L);
}

figure {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
}

/* HEADER
--------- */
header {





	/* max-width: 1328px; */
}

@media (max-width: 899px) {
	header {
		position: relative;
		z-index: 5;
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 0.5rem 1rem;
	}
}


@media (min-width: 900px) {
	header {
		position: sticky;
		z-index: 5;
		top: 0px;
		width: 90rem;
		margin: 0 auto;
	}
}

header nav.primary {
	display: none;
}

header nav a {
	font-size: var(--size-M);
	line-height: var(--line-height-M);
}

header nav a.active {
	text-decoration: underline;
	text-decoration-thickness: 0.1rem;
	text-underline-offset: 0.4rem;
}

body.home header nav a.back-to-project {
	display: none;
}

header ul {
	padding: 0;
	margin: 0;

}

header a.back-to-project {
	font-size: 2rem;
}

body.page header a.back-to-project {
	display: none;
}


header .social {
	margin-top: 4px;
	font-size: 14px;

	position: absolute;
	right: 66px;
	top: 176px;
}

header .social li {
	display: block;
	font-size: 2em;
	margin: 10px 0;
	text-align: center;
}

header .social li.email {
	/* margin-right:10px; */
	/* letter-spacing:-2px; */
}

header .social li.facebook {
	/* margin-right:10px; */
	/* letter-spacing:-2px; */
}

header .social li.gmap a {
	/* font-size:14px; */
	/* letter-spacing:-2px; */
}

@media (min-width: 900px) {

	header {
		z-index: 5;
		padding: 1rem 2.7rem 0;
		/* position: fixed; */
	}

	header nav.primary {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	header nav.primary .nav-item {
		display: flex;
		align-items: center;
	}

	header nav.primary .nav-item.logo {
		width: 31.5rem;
		justify-content: space-between
	}

	header nav.primary .nav-item.projects {
		gap: 1rem;
	}

	header nav.primary .nav-item.infos {
		text-align: right;
	}

	/* header nav .logo h3,
	header nav.primary .projects,
	header nav.primary .infos,
	nav.categories,
	footer .year {
		display: block;
	} */

	header nav .burger,
	header nav.responsive,
	footer .responsive-year {
		display: none;
	}

	header nav.categories {
		/* position: absolute; */
		/* bottom: 5px; */
	}

	header .language {
		margin-top: 14px;
	}


	header nav.primary {
		height: 5rem;
		/* margin-top: 46px; */
	}

}

/* BURGER MENU
--------------------- */

.burger {
	/* position: fixed;
	top: 0.5rem;
	right: 0rem; */
	font-size: 1.875em;
	line-height: 0.0667em;
	width: 2.125rem;
}

.burger ul {
	margin: 0 0 0.1em;
	padding: 0.25em 0 0 0;
	width: 1.1333em;
	height: 1.1333em;
	box-sizing: border-box;
}

.burger ul li {

	width: 100%;
	margin-top: 0.1667em;
	opacity: 1;
	height: 0.0667em;
}

.burger ul li:nth-child(1) {
	-webkit-transition: opacity 100ms 100ms, margin-top 100ms 100ms;
	transition: opacity 100ms 100ms, margin-top 100ms 100ms;
}

.burger ul li:nth-child(2) {
	-webkit-transition: opacity 100ms 0ms, margin-top 100ms;
	transition: opacity 100ms 0ms, margin-top 100ms;
}

body.burger-open .burger ul li:nth-child(1),
body.burger-open .burger ul li:nth-child(2) {
	opacity: 0;
}

body.burger-open .burger ul li:nth-child(1) {
	transition: opacity 100ms 0ms, margin-top 100ms;
	margin-top: 0.0667em;
}

body.burger-open .burger ul li:nth-child(2) {
	transition: opacity 100ms 100ms, margin-top 100ms 100ms;
	margin-top: 0.0333em;
}

header nav.responsive {
	opacity: 0;
	transition: opacity 100ms 0ms;
	pointer-events: none;

	position: absolute;
	right: 0;
	top: 3rem;
}

header nav.responsive ul {
	text-align: right;
	margin: 0 10px;
}

header nav.responsive ul li {
	font-size: 30px;
	line-height: 34px;
}

body.burger-open header nav.responsive {
	opacity: 1;
	pointer-events: auto;
}

@media (min-width: 900px) {
	.logo-mobile,
	.burger {
		display: none;
	}
}

/* Language
--------------------- */

header .language {
	position: absolute;
	right: 0;
	bottom: 0;
}

header .language ul {
	display: flex;
}

header .language li {
	text-transform: uppercase;
	display: flex;
	align-items: baseline;
}

header .language li a {
	font-size: var(--size-S);
	line-height: var(--line-height-L);
}

header .language li a:hover {}

header .language li.current a {
	display: none
}

/* header .language li:after {
	content: ' / ';
} */

/* header .language li:last-child:after {
	content: none;
} */


/* CATEGORY NAV
--------------------- */

ul.categories {
	margin: 0;
	padding: 0;
	display: flex;
	align-self: stretch;
}

ul.categories li {
	display: flex;
}

ul.categories li a {
	width: 3.3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;

}

ul.categories li a .picto {
	width: 3.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8em;/* pictos menu */
}

ul.categories li a .category-name {
	font-size: var(--size-S);
	line-height: var(--line-height-L);
	opacity: 0;
}

ul.categories li a:hover .category-name,
ul.categories li.active a .category-name {
	opacity: 1;
}

ul.categories li a:hover .picto,
ul.categories li.active a .picto {
	background-color: transparent;/* var(--white); */
}


/* Eyes
------------------ */
.eyes-container {
	position: relative;
}

.eyes-container .eyes {
	position: absolute;
}

.eyes {
	/* width: 10rem; */
	/* height: 4rem; */
	display: flex;
	gap: 0.5rem;
	/* justify-content: space-between; */
}

.eyes .orbite {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: white;
	outline: 2px solid black;/* 1.5px; */
	position: relative;
}

.eyes .pupille {
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background-color: black;
}

/* MAIN
--------- */
main {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	/* position: absolute; */
	top: 106px;
	left: 0px;
	right: 0px;
	width: 100%;

	z-index: 1;
	/* transition: top 100ms 100ms; */
}

body.burger-open main {
	/* -webkit-transition: top 100ms 0ms;
	transition: top 100ms 0ms;
	top: 400px; */
}

/* main .container {
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 50px;
	position: relative;
} */

main .thumbs {
	min-height: 100vw;
}

main .thumb {
	width: 100%;
	float: left;
}

main .thumb .thumb-content {
	margin: 0 auto;
	max-width: 284px;
	position: relative;
}

main .thumb img {
	width: 100%;
	height: auto;
}

main .thumb .thumb-title {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0px;
	display: block;
	opacity: 0;
	-webkit-transition: opacity 200ms;
	transition: opacity 200ms;
}

main .thumb a:hover .thumb-title {
	opacity: 1;
	background-color: var(--yellow);
}



main .thumb .thumb-title-content {
	position: relative;
	z-index: 3;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

main .thumb .thumb-title h2 {
	/* display: table-cell;
	vertical-align: middle; */
	text-align: center;
	font-weight: normal;
	font-size: var(--size-M);
	line-height: var(--line-height-M);
}

main h1 {}

/* SINGLE
--------- */
/*
body.single main {
	max-width: 1784px;
	width: 100%;
}
 */
.single-content {
	margin: 0 10px 0 10px;
}

.single-content h1,
.single-content h2 {
	/* margin-bottom: 20px; */
}

.single-content img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 0;
}

.single-content ul {
	margin-top: 0;
	padding-left: 15px;
}

.single-content ul li {
	position: relative;
}

.single-content ul li:before {
	content: '–';
	position: absolute;
	left: -15px;
}



/* INFOS
--------- */
section {
	padding: 0 10px;
}

section ul {
	margin: 0;
	padding-left: 45px;
}

section ul li {
	position: relative;
}

section ul li:before {
	content: '\2015';
	position: absolute;
	left: -45px;
}

section.template-logo {
	margin-left: 35px;
	/* nico */
	text-align: center;
}

section.template-contact {
	text-align: center;
	position: relative;
	top: -30px;
}

section.template-we-are {
	font-size: 30px;
	line-height: 34px;
	text-align: center;
	margin-top: -30px;
	/* nico */
}

section.template-we-do {
	font-size: 30px;
	line-height: 34px;
	margin-bottom: 1em;
}

section.template-we-do p {
	margin: 0;
}

section.template-about {}

section .subsection {}

section .subsection h1 {
	margin-top: 0;
}



/* Footer
--------- */
footer {
	font-size: var(--size-M);
	line-height: var(--line-height-M);
}

footer .footer-content {
	margin: 0 1rem;
	display: flex;
	flex-direction: column;
}

@media (min-width: 900px) {
	footer .footer-content {
		margin: 0 2.7rem;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 5rem;
	}

	footer .footer-content .tagline {
		display: flex;
		justify-content: space-between;
		width: 37.8rem;
	}
}


/* Footer Hand
------------------ */
.handup {
	display: grid;
}

.handup span {
	font-size: 2rem;
	grid-area: 1 / 1 / 2 / 2;
	animation: wink step-start infinite paused 600ms;
	padding: 0.5rem 0;
}

.handup:hover span {
	animation-play-state: running
}

.handup span:first-child {
	animation-direction: reverse;
}

.handup span:last-child {}

@keyframes wink {
	0% {
		visibility: visible;
	}

	50% {
		visibility: hidden;
	}
}


/* MEDIA QUERIES
--------- */

@media (min-width: 900px) {

	/* h1,
	h2,
	section.template-we-do,
	section.template-we-are {
		font-size: 38px;
		line-height: 42px;
	}

	header {
		z-index: 5;
		padding: 0 56px;
		position: fixed;
		background-color: none;
		opacity: 1;
	}

	header nav .logo h3,
	header nav.primary .projects,
	header nav.primary .infos,
	nav.categories,
	footer .year {
		display: block;
	}

	header nav .burger,
	header nav.responsive,
	footer .responsive-year {
		display: none;
	}

	header .language {
		margin-top: 14px;
	}


	header nav.primary {
		margin-top: 46px;
	} */

	main,
	body.burger-open main {
		top: 168px;
	}

	/* main .container {
		margin-left: 56px;
		margin-right: 56px;
	} */

	section {
		padding: 0;
	}

	section.template-logo {
		position: absolute;
		top: 10px;
		left: 17%;
		z-index: -1;
	}

	section.template-contact {
		position: absolute;
		top: 50px;
		left: -12px;
		width: 200px;
	}

	section.template-contact p {
		margin-bottom: 27px;
	}

	section.template-we-are {
		position: absolute;
		top: 20px;
		/* left:33.3334%; */
		/* width: 66.6667%; */
		right: 0;
		width: 62%;
	}

	section.template-we-do {
		position: absolute;
		top: 390px;
		left: 10px;
		width: 33.3334%;
		min-width: 380px;
	}

	section.template-about {
		position: relative;
		top: 690px;
		left: 0px;
		width: 100%;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		-webkit-justify-content: space-between;
	}

	section .subsection {
		width: 304px;
		float: left;
		padding: 0 10px;
		box-sizing: border-box;
	}

	section .subsection:nth-child(1) {
		order: 1;
		-webkit-order: 1;
	}

	section .subsection:nth-child(2) {
		order: 0;
		-webkit-order: 0;
	}

	section .subsection:nth-child(3) {
		order: 2;
		-webkit-order: 2;
	}

	/* body.page footer {
		position: relative;
		top: 820px;
	}

	footer .bottom-nav ul li:last-child {
		margin-top: 0;
	} */

	.single-content {
		margin: 0 10px 0 10px;
	}
}



@media (min-width: 720px) {

	main .thumb {
		width: 50%;
	}

}

@media (min-width: 900px) {

	main {
		width: 84.6rem;
	}

	main .thumb {
		width: 33.333%;
	}

}

@media (min-width: 1200px) {

	main .thumb {
		width: 25%;
	}

}

@media (min-width: 1500px) {

	main .thumb {
		width: 20%;
	}

}




/* gutenberg
-------------------- */

.wp-block-columns {
	display: flex;
	gap: 2.7rem;
	flex-direction: column;
}

@media (min-width: 900px) {
	.wp-block-columns {
		flex-direction: row;
	}
}

.wp-block-column {
	min-width: 0;
}

.wp-block-column:last-child {
	flex-shrink: 0;
}

.wp-block-group {
	padding: 2rem 1rem;
	margin: 0 0 0rem;
}

.wp-block-group:hover {
	background-color: var(--yellow);
}

.wp-block-group p:first-child {
	margin-top: 0;
}

.wp-block-group p:last-child {
	margin-bottom: 0;
}

.has-large-font-size {
	font-size: var(--size-L);
	line-height: var(--line-height-L);
}

.has-medium-font-size {
	font-size: var(--size-M);
	line-height: var(--line-height-M);
}

ul.wp-block-list {
	list-style-type: "⟶";
	padding: 0;

}

ul.wp-block-list li {
	display: flex;
	gap: 0.2rem;
}

ul.wp-block-list li::before {
	content: "⟶";
	font-size: var(--size-S);
}


/* asteroid
-------------------- */

#asteroid {

/* Adjust animation duration to change the element’s speed */
        animation: fly 50s linear infinite;
        pointer-events: none !important;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	animation-delay: 1s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */

@keyframes fly {

	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
	}

	15% {
		transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
	}

	40% {
		transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
	}

	65% {
		transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
	}

	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
	}

	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
	}
}