/*
Theme Name: oscarlachaud
Theme URI: https://oscarlachaud.com
Author: Oscar Lachaud
Author URI: https://oscarlachaud.com
Description: theme portfolio
Version: 1.0
*/

*{
	margin: 0px;
	padding: 0px;

	font-family: Roboto;
	color: black;
	font-weight:100;

	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
body{
	overflow-y: scroll;
	background-color: white;}
section{
	top:133px;}

h1{
	font-size: 26px;
	font-weight: 400;
	text-transform:capitalize;}
h2{
	font-size: 26px;
	font-weight: 400;
	text-transform: uppercase;
	padding:0px;
	display:inline;}
h3{
	font-size: 20px;
	font-weight: 300;
	color:grey;
margin: 0px 20px 0px 0px;}
p{
	font-size: 20px;
	font-weight: 300;}
a{
	text-decoration: none;
	cursor:pointer;}

.header-bar{
		position: fixed;
		margin: 60px 0 40px 0;
		padding:0% 8%;
		width:100%;
		display: flex;
		justify-content: space-between;
		opacity: 1;
		transition: opacity 0.2s;
		}
.menu{
	display: flex;
	list-style: none;
	gap: 14px;}

button{
	background: none;
	border: none;}
.button{
	text-transform: capitalize;
	font-size: 26px;
	font-weight: 400;}
.is-checked{
  border-bottom:solid 3px black;}
.button:hover{
	cursor: pointer;
  border-bottom:solid 3px black;}

.home{}
.single-portfolio{}
.home-section{
	padding:0% 8%;
	position: relative;}
.project-section{
	padding:0% 18%;
	position:relative;}
.about-section{
	padding:0% 8%;
	position:relative;
  top:130px;
	margin-bottom: 250px;}
 .about-section > *{

	gap:3vw !important;
	margin: 3vw 0px;
	list-style:none;
 }


.grid{
	margin-bottom: 250px;}
.grid-sizer{
width: 17.6%;}
.grid-gutter{
width: 3%;}
.grid:after {
  content: '';
  display: block;
  clear: both;}
.item{
	width: 17.6%;
	aspect-ratio: 1 / 1;

	border-radius: 0%;

	overflow: hidden;
	position: absolute;
	background-color: #F5F5F5;}

.h1w2{
	width: 38.2%;
	aspect-ratio: 21704.545454545 / 10000;
	border-radius: 0%/0%;}
.h2w1{
	width: 17.6%;
	aspect-ratio: 10000 / 21704.545454545;
	border-radius: 0%/0%;}
.h2w2{
	width: 38.2%;
	aspect-ratio: 1 / 1;
	border-radius: 0%;}
.item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	transform-origin: center;
	position: absolute;}	
.item_3d{
width: 100%;
height: 100%;
position: absolute;}

.the-content-portfolio{
	margin: 0px 0px;
position:relative;
margin-bottom: 250px;}
.the-content-portfolio > *{
	gap:3vw !important;
	margin: 3vw 0px;}


.project-header {
  display: grid;
  padding: 0% 8% 0% 8%;
  gap:20px;
  position:relative;
	top:130px;}
.aligncenter{
 	margin: 3vw auto;}
.return-button{
	text-transform:capitalize;}
.wp-block-image figcaption{
 	margin:0px;
 	padding:0px;
 	position:absolute;
 }


@media (min-width: 1800px){
		.grid-sizer{
			width: 17.6%;}
		.grid-gutter{
			width: 3%;}
		.item{
			width: 17.6%;}
		.h1w2{
			width: 38.2%;
			aspect-ratio: 21704.545454545 / 10000;}
		.h2w1{
			width: 17.6%;
			aspect-ratio: 10000 / 21704.545454545;}
		.h2w2{
			width: 38.2%;}}
@media (min-width: 1200px) and (max-width: 1800px){
		.grid-sizer{
			width: 22.75%;}
		.grid-gutter{
			width: 3%;}
		.item{
			width: 22.75%;}
		.h1w2{
			width: 48.5%;
			aspect-ratio: 21318.681318681 / 10000;}
		.h2w1{
			width: 22.75%;
			aspect-ratio: 10000 / 21318.681318681;}
		.h2w2{
			width: 48.5%;}}
@media (min-width: 800px) and (max-width: 1200px){
		.grid-sizer{
			width: 30%;}
		.grid-gutter{
			width: 5%;}
		.item{
			width: 30%;}
		.h1w2{
			width: 65%;
			aspect-ratio: 21666.666666667 / 10000;}
		.h2w1{
			width: 30%;
			aspect-ratio: 10000 / 21666.666666667;}
		.h2w2{
			width: 65%;}
		}

@media (max-width: 1200px){

		.project-section{
			padding:0% 8%;}
		.project-header {
			padding-bottom: 20px;}
		.the-content-portfolio{
			margin-bottom: 200px;}}

@media (max-width: 800px){
		.grid-sizer{
			width: 46.25%;
		}
		.grid-gutter{
			width: 7.5%;
		}
		.item{
			width: 46.25%;
		}
		.h1w2{
			width: 100%;
			aspect-ratio: 10 / 6;
			border-radius: 0%/0%;
		}
		.h2w1{
			width: 46.25%;
			aspect-ratio: 10000 / 21621.621621622;
		}
		.h2w2{
			width: 100%;
			aspect-ratio: 10 / 9;
			border-radius: 0%/0%;
		}
		.header-bar{
			margin: 40px 0px 30px 0px;
			padding: 0px 7%;
			flex-direction : column;
			gap:5px;}	
		.header-bar-project{
			flex-direction : column-reverse;
			gap:10px;}	
		.home-section{
			padding:0% 7%;}	

		.project-section{
			padding:0% 7%;
		}
		.project-header {
		  padding: 0% 7%;
			gap: 15px;
			padding-bottom:13px;}
		.wp-block-image{
		  width:100% !important;
		  height:auto;}
		.the-content-portfolio > *{
			gap:30px !important;
			margin: 30px 0px;}}

		.about-section > *{
			gap:30px !important;
			margin: 30px 0px;
		 }

@media (max-width: 500px){
		.header-bar{
			gap: 3px;}
		.header-bar-project{
			gap:10px;}
		.menu{
			gap: 10px;}
		h1{
		font-size:25px;}
		.button{
	font-size: 19px;
	font-weight:500;}
	.return-button{
	font-size: 19px;
	font-weight:500;	
	}
		h3{
			font-size: 17px;}
		p{
			font-size: 17px;}}

.admin-bar .header-bar {
  top: 46px;}
@media (min-width: 48.9375em) {
  .admin-bar .header-bar {
    top: 32px;
  }}