/*!
Theme Name: On participe
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: on-participe
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

On participe is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
    font-family: 'Lexend Exa';
    src: url('./fonts/LexendExa-Regular.woff2') format('woff2'),
        url('./fonts/LexendExa-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Petites_Mains';
    src: url('./fonts/Petites_Mains.woff2') format('woff2'),
        url('./fonts/Petites_Mains.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html{
	width:100%;
	height:100%;
}


body{
	height:100%;
	width:100%;
	margin:0;
	overflow: hidden;
	user-select:none;
	-webkit-tap-highlight-color: transparent;
}

.mailpoet_message{
	padding:0 !important;
	color:white;
}

#mailpoet_form_1 form.mailpoet_form{
	width:60%;
	padding : 0 !important;
	
}

.mailpoet_submit{
	border-radius:50px;
	background-color : #ff6145;
	border:none;
	font-family: Lexend Exa;
	font-size:16px;
	cursor:pointer;
}

.mailpoet_submit:hover{
	background-color:white;
}

.mailpoet-manage-subscription{
    font-family : Lexend Exa;
    color :#474151;
}

.mailpoet-manage-subscription input, select{
    font-family : Lexend Exa;
    color :#474151;
    font-size:16px;
}

.mailpoet-manage-subscription label{
    margin-right:5px;
}

.mailpoet-manage-subscription input[type="text"]{
    border-radius: 50px;
    border-style: none;
    padding:10px;
}


.mailpoet-manage-subscription input[type="submit"], select{
    background-color :#ff6145;
    border-radius: 50px;
    border-style: none;
    padding:10px;
}

.mailpoet-manage-subscription fieldset{
    border-radius: 50px;
    border-color: #474151;
}

.mailpoet-manage-subscription div{
    margin-bottom:15px;
}
.op_arrow{
	font-family : Petites_Mains;
}

.op_header{
	width:100%;
	height:10vw;
}

.site{
	width:100%;
	height:100%;
	background-color: #63cf7f;
}

.op_top_content_container {
	width: 90%;
	height: calc(100vh - 10vw);
	position: relative;
	float: left;
  }

.top_home{
	width:100% !important;
}

.op_content_container{
	height:100%;
	width:87vw;
	position: relative;
	float:left;
	overflow-y:auto;
	overflow-x:hidden;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	
}

.op_scrollbar{
	width:3vw;
	height:100%;
	background-color: #ebebeb;
	position:relative;
	border-radius:50px;
	float:left;
	visibility: hidden;
}

.op_left_panel{
	width:10vw;
	height:calc(100% - 10vw);
	background:transparent;
	position: relative;
	float:left;
}

.op_intro{
	width:calc(49% - 20px);
}

#op_nav_footer{
	height:100%;
}

#op_homepage_img_container{
	width:100%;
	flex: 3;
	margin-bottom:20px;
	overflow:hidden;
}

#op_homepage_img_container img{
	width:100%;
	height:100%;
	object-fit:cover;
}

#intro_text_container p{
	width:100%;
	height:auto;
	font-size:clamp(16px, 2.2vw, 38px);
	margin-top:0;
	color: #474151;
	font-family: Lexend Exa;
}

#intro_leg_text{
	font-family: Lexend Exa;
	font-size: clamp(13px, 2vw, 20px);
	color: #474151;
	position: relative;
	float: left;
	width: 100%;
	margin-bottom:60px;
}

#intro_leg_text:before{
	content:  "↑ "
}

@keyframes opdot{
	0%{
		transform:scale(0);
		filter:opacity(1);
	}
	100%{
		transform:scale(1);
		filter:opacity(1);
	}
}

.dot_intro{
	animation : opdot 0.3s forwards ease-in-out;
}

.op_dot{
	border-radius:50px;
	width:50px;
	height:50px !important;
	position:absolute;
	cursor:pointer;
	z-index:999;
}


.menu-item:hover{
	margin-top:-10px;
}

#op_dot_blue{
	background-color: #474151;
	left:80%;
	top:60%;
	filter:opacity(0);
}

#op_dot_orange{
	background-color: #ff6145;
	left:40%;
	top:85%;
}

.op_bottom_menu{
	background-color: transparent;
	width:100%;
	/*position: relative;*/
	float:left;
}

.op_bottom_menu .menu{
	height:auto;
	
}

.op_arrow{
	width: 100%;
	
	font-size:112px;
	text-align : center;
	color : #ebebeb;
	margin:0;
}

@keyframes dot_move{
	0%{
		filter:opacity(1);
	}
	50%{
		top: 40%;
		filter:opacity(1);
	}
	100%{
		filter:opacity(1);
		
	}
	
}

.dot-move{
	animation : dot_move 1s forwards ease;
}

@keyframes arrowselec{
	0%{
		
	}
	20%{
		transform: rotate(10deg);
	}
	60%{
		transform: rotate(-20deg);
	}
	100%{
		transform: rotate(0deg);
	}
}

.op_arrow:hover{
	animation : arrowselec 1s forwards;
}

.op_left_panel_bottom_corner{
	position:absolute;
	bottom:0;
	display:flex;
	align-items: center;
	height:10vw;
	width:100%;
}

.op_bg_blue{
	background-color: #474151;
	color : #ebebeb;
}

.op_bg_blue .wp-element-caption{
	color : #ebebeb;
}

.op_bg_green{
	background-color: #63cf7f;
	color : rgb(71, 65, 81);
}

.op_bg_green .wp-element-caption{
	color : rgb(71, 65, 81);
}

.op_bg_orange{
	background-color: #ff6145;
	color : #ebebeb;
}

.op_bg_orange .wp-element-caption{
	color : #ebebeb;
}

.op_left_panel_bottom_corner p{
	text-align:center;
	width:100%;
}

.op_bottom_menu li{
	margin-right:50px;
}

.op_top_menu li{
	margin-right:50px;
}

.op_top_menu .menu{
	margin-left:50px;
}

.menu-primary-container{
	height:100%;
	
}

.op_left_panel a{
	width:100%;
}

.op_content_intro_page p{
	font-size:26px;
	width:50%;
	margin-left:auto;
	margin-right:auto;
	font-family: Lexend Exa;
	text-align: center;
}

.op_post a{
	color:inherit;

}

.op_hover_post{

}

.op_hover_post:hover{
	transform:scale(1.1);

}


.op_content_intro_page{
	margin-bottom:150px;
}

.up_arrow{
	position:sticky;
	top:0;
	font-size:80px;
	color:#ebebeb;
	margin-top:0;
	margin-right:40px;
}

.up_arrow_container{
	position:absolute;
	top:0;
	right:0;
}

a{
	text-decoration: none;
}

.menu{
	display:flex;
	height:100%;
	margin-top:0;
	align-items: center;
	list-style: none;
	font-size:40px;
	font-family: Petites_Mains;
	padding:0;
	width:100%;
}

.menu a{
	color: #ebebeb;
}

.op_logo_container{
	width:10vw;
	height:100%;
	position:relative;
	float:left;
}

.custom-logo{
  width: 100%;
  height: 100%;
}


.op_nav_container{
	width:calc(100% - 10vw);
	height:100%;
	position:relative;
	float:left;
}

#op_footer{
	flex:1;
	margin-bottom: 40px;
}

.op_full_content li{
	color:#ebebeb;
	font-family: Lexend Exa;
	list-style:none;
	font-size: 18px;
}

.op_bg_green li{
	color:#474151;
}

.op_full_content ul{
	padding:0;
}

.op_full_content li:before{
	content: "→ ";
}

.op_content_page_title h1{
	font-size: 112px;
	color: #ebebeb;
	text-align: center;
	transform:rotate(346deg);
	font-family: Petites_Mains;
}

.op_content_single_title h1{
	font-size: 112px;
	color: #ebebeb;
	text-align: center;
	font-family: Petites_Mains;
}

.op_single_info{
	width:100%;
	margin-top:30px;
	margin-bottom:60px;
}

.op_single_image_container{
	width:100%;
	overflow:hidden;
	height:100%;
}

.op_full_content{
	max-width:900px;
	min-width:900px;
	margin-left:auto;
	margin-right:auto;
	height:auto;
	margin-bottom:200px;
}

figure{
	margin:0em;
}

.wp-block-column p{
	margin-right:50px;
}

.op_full_content p{
	font-size:18px;
	font-family: Lexend Exa;
	margin-top:0;
	margin-bottom:20px;
	line-height:27px;
}

.op_color_annexe .wp-element-caption{
	color : #474151;
}

.op_default_color{
	color: #ebebeb;
}

.op_color_annexe{
	color: #474151;
}

.op_full_content h1, h2, h3, h4, h5, h6{
	color: #ebebeb;
	font-family:Petites_Mains;
}

.op_full_content h1{
	font-size:60px;
}

.op_full_content h2{
	font-size:50px;
}

.op_full_content h3{
	font-size:40px;
}

.op_full_content h4{
	font-size:30px;
}

.op_full_content h5{
	font-size:20px;
}



.op_separator{
	margin-top:100px;
	margin-bottom:100px;
}

.op_single_featured_image{
	width:100%;
}

.op_single_pre{
	width:70%;
	text-align: center;
	font-family: Lexend Exa;
	font-size:25px;
	margin-left:auto;
	margin-right:auto;
}

h3{
	font-size: 60px;
	font-family: Petites_Mains;
}

.op_post{
	text-align: center;
	width:70%;
	margin-left:auto;
	margin-right:auto;
}

.op_post p{
	font-size: 16px;
	font-family: Lexend Exa;
}

.op_content_page_title{
	width:90%;
	height:auto;
	position: relative;
	margin-bottom:10%;
	margin-left: auto;
margin-right: auto;
}

.op_content_projects_list{
	width:100%;
	display:grid;
	grid-template-columns: 1fr 1fr;
}

.op_logo{
	width:100%;
}

#op_scrollbar_top{
	border-radius:50px;
	width: 100%;
	height: auto;
	padding-top: 100%;
	position:absolute;
}

#op_scrollbar_bottom{
	border-radius:50px;
	background-color:#474151;
	width: 100%;
	height: auto;
	padding-top: 100%;
	bottom:0;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
 .op_content_container::-webkit-scrollbar {
	display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .op_content_container {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
  } 

.op_full_content a{
	text-decoration:underline;
	color:inherit;
}

.op_full_content a:before{
	content:"→ ";
}

  .movebottomright{
	offset-path : path("m 143.04596,291.99416 c 0,0 79.1337,-84.53582 -68.866886,-118.8913 C -73.821524,138.74737 -20.018814,50.986361 20.214825,53.576911");
	animation : movebottomleft 1s forwards ease-in-out;
  }

  .flex_content_centered{
	display:flex;
	align-items: center;
  }

  .reversed{
	transform:rotate(180deg);
  }

.op_separator{
	animation : dotanim 0.5s forwards ease-in-out;
}

  .dot_container{
	width:100%;
	margin-bottom:200px;
	margin-top:30px;
  }

  .dot{
	width:30px;
	height:30px;
	border-radius: 50px;
	margin-left:auto;
	margin-right:auto;
  }

@keyframes dotanim{
	0%{
		margin-top:0px;
		width:1px;
		height:10px;
		background-color:white;
	}
	100%{
		margin-top:100px;
		width:30px;
		height:30px;
	}
}

.op_content_intro_page > .dot{
	animation : dotanim 0.5s forwards ease-in-out;
}



.content_home{
	width: 80% !important;
	margin-left:auto;
	margin-right:auto;
	float:none;
	display:flex;
	flex-wrap : wrap;
	height:100%;
	flex-direction: column;
}

.home_menu{
		  flex : 1;
		  position:relative;
		  margin-bottom:40px;
	  }

.home_menu .menu-primary-container{
	height: auto;
  	position: absolute;
  	bottom: 0;
  	right: 0;
}
	  

  @keyframes movebottomleft{
	0%{
		filter:opacity(0);	
		offset-distance: 0%;
	}
	100%{
		filter:opacity(1);
		offset-distance: 100%;
	}
  }

  @keyframes entering{
	0%{
		filter:opacity(0);
	}
	100%{
		filter:opacity(1);
	}
  }

 @media screen and (max-width : 500px){
	 .op_full_content h2{
		 font-size: 35px;
	 }
	 
	 .op_full_content h3{
		 font-size:25px;
	 }
	 
	 .op_full_content h4{
		 font-size: 20px;
		 line-height:27px;
	 }
	 .op_content_intro_page p{
		 font-size:14px !important;
	 }
	 
	 
	 .custom-logo {
  height: 100%;
		  
}
	  .imgcontainer{
width: 100%;
	  }
	  
	  .imgcontainer a{
		  position: relative;
width: 100%;
display: block;
	  }
	 
	 .op_logo_container{
		width:50%;
		  display: flex;
justify-content: center;
align-items: center;
	  }
	 
	 .op_logo_container{
		  display: flex !important;
	  }
	 
	 
}

  @media screen and (max-width : 1081px){

	.op_top_menu .menu{
		margin-left:0;
	}

	.op_top_menu li{
		margin-right:0;
	}
	.content_home{
		flex-direction: column;
	}

	.op_intro{
		flex: 1;
		width:100%;
		margin-bottom : 10px;
	}
	  
	  .op_full_content li{
		  font-size: 14px;
line-height: 19px;
	  }
	  
	  .menu-item:hover{
	margin-top: 0px !important;
}

	  
	  .op_bottom_menu .menu-primary-container{
		  margin-left:0;
	  }
	  
	  .home_menu li{
		  margin-right:0 !important;
	  }
	  
	  .op_bottom_menu li{
		  margin-right:0px;
	  }
	  
	  .op_full_content{
		  width:80%;
		  max-width:unset;
		  min-width:unset;
	  }
	  
	  .op_arrow{
		  font-size: 80px;
	  }
	  
	  
	  
	  .op_intro p{
		  font-size:30px;
	  }
	  
	  #op_dot_blue{
		  top:70%;
		  left:0;
	  }
	  

	  
	  .custom-logo {
  height: 100%;
		  
}
	  .imgcontainer{
width: 200px;
	  }
	  
	  .imgcontainer a{
		  position: relative;
width: 100%;
display: block;
	  }
	  
	.op_header {
		height: 200px;
	  }

	  .op_nav_container {
		width: calc(50% - 20px);
	  }

	  .op_top_menu{
		padding-right: 20px;
	  }

	  .op_top_menu li{
		margin-bottom:8px;
	  }

	  .op_logo_container{
		width:50%;
		  display: block;
justify-content: center;
align-items: center;
	  }

	  .op_logo{
		height:100%;
		width:auto;
	  }

	  .menu{
		display:inline;
		position:relative;
		text-align: right;
		right:0;
		padding:0;
		font-size:25px;
		top:14px;
	  }

	  .op_left_panel {
		width: 100%;
		height: 100px;
		position: relative;
	  }
	  
	  .op_content_container{
		width:93%;
		
	  }

	  .op_top_content_container{
		height: calc(100% - 300px);
	  }
	  
	  .home_content{
		  height: calc(100% - 200px);
	  }

	  .op_scrollbar{
		height: 100%;
	  }
	  

	  .op_scrollbar{
		width:7%;
	  }

	  .op_content_page_title h1 {
		font-size: 40px;
	  }

	  .op_single_pre{
		font-size:16px;
	  }
	  
	  .wp-block-column p{
		margin-right:0;
	  }

	  .op_full_content p{
		font-size:14px;
		  line-height:19px;
	  }
	  
	  .op_content_page_title{
		width:80%;
		margin-left:auto;
		margin-right:auto;
		word-wrap: break-word;
		hyphens: auto;
	  }

	  .op_content_intro_page p {
		font-size: 20px;
		width: 70%;
	  }

	  .op_top_content_container{
		width:100%;
	  }

	  .op_content_projects_list{
		display:block;
		height:auto;
	  }

	  .op_post{
		width:70%;
	  }

	  .op_post p{
		font-size:14px;
	  }

	  h3{
		font-size:35px;
	  }

	  .op_bottom_menu li {
		margin-bottom: 8px;
	  }
  }

  @media screen and (max-height : 600px){
	#op_homepage_img_container{
		display:none;
	}
	#intro_leg_text{
		display:none;
	}

	.op_bottom_menu .menu-primary-container{
		position:absolute;
		height:auto;
		right:0;
		bottom:40px;
	}
  }