, li/*
Theme Name: Créative & Nous
Theme URI: http://creative-et-nous.fr/
Description: Le thème du site Créative & Nous.
Version: 1.0
Author: Thibaud Lenthéric.
*/

body{
	background: #ffffff;
}

*{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


*::-moz-selection { /* Pour firefox */
	background:#4b1e3d;
	color:white;
}
*::-webkit-selection { /* Pour firefox */
	background:#4b1e3d;
	color:white;
}
*::selection { /* Pour les autres */
	background: #4b1e3d;
	color:white;
}

a{
	text-decoration: none;
}

input, textarea {
  outline: none;
}


/*--------------------------IMPORT FONT-------------------------------------*/

@font-face {
  font-family: Hatton;
  src: url(../fonts/Hatton-Regular.ttf) format('truetype');
}

@font-face {
  font-family: Hatton Light;
  src: url(../fonts/Hatton-Light.ttf) format('truetype');
}

@font-face {
  font-family: Devanagari;
  src: url(../fonts/AdobeDevanagari-Regular.otf) format('opentype');
}

@font-face {
  font-family: Devanagari It;
  src: url(../fonts/AdobeDevanagari-Italic.otf) format('opentype');
}

@font-face {
  font-family: Devanagari Bold;
  src: url(../fonts/AdobeDevanagari-Bold.otf) format('opentype');
}

@font-face {
  font-family: Devanagari BoldIt;
  src: url(../fonts/AdobeDevanagari-BoldItalic.otf) format('opentype');
}







/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------GENERAL------------------------------------------------
----------------------------------------------------------------------------------------------------------*/



h1{
	font-family: Hatton Light, Times, serif;
	font-size: 80px;
	line-height: 90px;
	letter-spacing: 1px;
	color: #222;
	text-transform: uppercase;
	text-align: center;
	font-weight: inherit;
	margin: 0;
}

h2{
	font-family: Hatton Light, Times, serif;
	font-size: 60px;
	line-height: 70px;
	letter-spacing: 1px;
	color: #222;
	text-transform: uppercase;
	text-align: center;
	font-weight: inherit;
	margin: 0;
	margin-bottom: 20px;
}

h3{
	font-family: Hatton Light, Times, serif;
	font-size: 40px;
	line-height: 50px;
	letter-spacing: 1px;
	color: #222;
	text-transform: uppercase;
	font-weight: inherit;
	margin: 0;
	margin-bottom: 20px;
}

h4{
	font-family: Hatton, Times, serif;
	font-size: 40px;
	line-height: 50px;
	letter-spacing: 1px;
	color: #222;
	font-weight: inherit;
	margin: 0;
}

p{
	font-family: Devanagari, Times, serif;
	font-size: 18px;
	line-height: 30px;
	color: #222222;
	margin: 0;
}

p strong, ul li strong{
	font-family: Devanagari Bold, Times, serif;
	font-weight: inherit;
}

p em, ul li em{
	font-family: Devanagari It, Times, serif;
	font-style: inherit;
}

p strong em, p em strong, ul li strong em, ul li em strong{
	font-family: Devanagari BoldIt, Times, serif;
	font-weight: inherit;
	font-style: inherit;
}

#outil ul li{
	font-family: Devanagari, Times, serif;
	font-size: 18px;
	line-height: 30px;
	color: #222222;
	margin: 0;
	list-style-type: "- ";
}

a:hover{color: #4b1e3d;}

.btn{
  margin: 10px 0;
}

.btn.center{
	margin: auto;
  display: block;
  margin: 10px 0;
}

.btn.right{
	float: right;
  display: block;
  margin: 10px 0;
}

.btn a{
	font-family: Hatton, Times, serif;
	font-size: 20px;
	line-height: 50px;
	letter-spacing: 1px;
	color: #222222;
	text-transform: uppercase;
}

.btn:hover a{
	letter-spacing: 2px;
	color: #4b1e3d;
}


header nav .container, header nav .container .row,
#cover .container, #cover .container .row{
	height: 100%;
}

.stop-scrolling {
  overflow: hidden;
}

img{max-width: 100%;}

.grecaptcha-badge{display: none;}

/*-----------------------------------------------------------------------------------
--------------------------------SCROLL BAR-------------------------------------------
-----------------------------------------------------------------------------------*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #4b1e3d;
  -moz-box-shadow: inset 0px 0px 7px 0px #222;
  -webkit-box-shadow: inset 0px 0px 7px 0px #222;
  -o-box-shadow: inset 0px 0px 7px 0px #222;
  box-shadow: inset 0px 0px 7px 0px #222;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#222, Direction=NaN, Strength=2);
  border: 0px double #ffffff;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4b1e3dcc;
}
::-webkit-scrollbar-thumb:active {
  background: #4b1e3db3;
  -moz-box-shadow: inset 0px 0px 5px 0px #222;
  -webkit-box-shadow: inset 0px 0px 5px 0px #222;
  -o-box-shadow: inset 0px 0px 5px 0px #222;
  box-shadow: inset 0px 0px 5px 0px #222;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#222, Direction=NaN, Strength=2);
}
::-webkit-scrollbar-track {
  background: rgba(240,240,240,0.9);
  border: 0px none #ffffff;
  border-radius: 0px;
  z
}
::-webkit-scrollbar-track:hover {
  background: #f0f0f0;
}
::-webkit-scrollbar-track:active {
  background: #f0f0f0;
}
::-webkit-scrollbar-corner {
  background: transparent;
}







/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------HEADER------------------------------------------------
----------------------------------------------------------------------------------------------------------*/

header{
	position: fixed;
	background: #ffffff40;
	width: 100%;
	top: 0;
	left: 0;
	border-bottom: 1px solid #222222;
	z-index: 1;
}

header *{
	-webkit-transition: all 0.75s ease-in-out;
	-moz-transition: all 0.75s ease-in-out;
	-o-transition: all 0.75s ease-in-out;
	-ms-transition: all 0.75s ease-in-out;
	transition: all 0.75s ease-in-out;
}

header.scroll{
	background: #ffffff80;
}

	header.scroll #logo svg{
		width: 100px;
		height: auto;
	}

	header.scroll #btn_menu{
		top: 22px;
		right: 45px;
	}

	header #logo{
		position: relative;
    width: fit-content;
		margin: 10px 0 0 50px;
		z-index: 1001;
	}

	header #btn_menu{
		display: block;
		position: fixed;
		width: 60px;
		height: 30px;
		right: 85px;
		top: 48px;
		cursor: pointer;
		z-index: 1001;
	}

		header #btn_menu span{
			position: absolute;
			background: #222222;
			width: 40px;
			height: 1px;
			top: 0;
			right: 0px;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .35s ease-in-out;
			-moz-transition: .35s ease-in-out;
			-o-transition: .35s ease-in-out;
			transition: .35s ease-in-out;
		}

			header #btn_menu span.icon01{
				-webkit-transform-origin:  right top;
				 -moz-transform-origin:  right top;
				 -o-transform-origin:  right top;
				 transform-origin:  right top;
			}

			header #btn_menu span.icon02{
				top: 15px;
				-webkit-transform-origin:  right;
				 -moz-transform-origin:  right;
				 -o-transform-origin:  right;
				 transform-origin:  right;
			}

			header #btn_menu span.icon03{
				top: 30px;
				-webkit-transform-origin:  right bottom;
				 -moz-transform-origin:  right bottom;
				 -o-transform-origin:  right bottom;
				 transform-origin:  right bottom;
			}

			header.open #btn_menu span{
				background: #4b1e3d;
				width: 42px;
				right: 0;
			}

			header.open #btn_menu span.icon01{
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			header.open #btn_menu span.icon02{
				width: 0px;
				right: -80px;
			}

			header.open #btn_menu span.icon03{
				top: 29px;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

header nav{
	position: fixed;
	background: #ffffffE6;
	width: 100%;
	height: 0%;
	opacity: 0;
	z-index: 0;
	top: 0;
	left: 0;
	text-align: center;
  overflow: hidden;
}

header nav *{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

header.open nav{
	height: 100%;
	opacity: 1;
	z-index: 1000;
}

header nav a{
	font-family: Devanagari, Times, serif;
	font-size: 20px;
	line-height: 50px;
	color: #222;
	letter-spacing: 1px;
	text-transform: uppercase;
}

header nav li.current-menu-item a{
	color: #4b1e3d;
}

header nav a:hover{
	color: #4b1e3d;
	letter-spacing: 2px;
}







/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------ACCUEIL------------------------------------------------
----------------------------------------------------------------------------------------------------------*/

#cover{
	min-height: 550px;
	border-bottom: 1px solid #222222;
}

#pres{
	margin: 110px 0 130px;
}
	#pres p{
		text-align: center;
	}

#valeurs{background: #f0f0f0; padding: 130px 0;}
#valeurs h2, #valeurs p{text-align: right;}
#valeurs .img{text-align: center;}

#nos-outils .pres p{
	text-align: right;
}

#decouvrir h1{
	font-family: Hatton, Times, serif;
	font-size: 120px;
	line-height: 150px;
	letter-spacing: 1px;
	text-align: center;
	margin-top: 190px;
}

#decouvrir:hover h1{
	color: #4b1e3d;
}

#decouvrir p{
	font-family: Devanagari It;
	font-size: 20px;
	color: #4b1e3d;
	text-align: center;
}







/*----------------------------------------------------------------------------------------------------------
-------------------------------------------------QUI SOMMES NOUS--------------------------------------------
----------------------------------------------------------------------------------------------------------*/

#qui-sommes-nous h1{
	margin: 265px 0 160px 0;
}

#qui-sommes-nous .equipe{

}

	#qui-sommes-nous .equipe h3{
		font-size: 60px;
		line-height: 60px;
		color: #4b1e3d;
		letter-spacing: 1px;
		text-align: center;
		margin: 20px 0 0 0 ;
	}

	#qui-sommes-nous .equipe .membre p{
		text-align: center;
		color: #4b1e3d;
	}

	#qui-sommes-nous .equipe .pres p{
		text-align: justify;
		margin-top: 40px;
	}

	#qui-sommes-nous .equipe .pres p::first-letter, #qui-sommes-nous .pres p::first-letter{
		font-family: Hatton, Times, serif;
		font-size: 100px;
		line-height: 40px;
		color: #4b1e3d;
		padding: 10px 0px;
		margin: 0px;
		float: left;
	}

	#qui-sommes-nous .pres h2{
		font-family: Hatton, Times, serif;
		font-size: 30px;
		line-height: 40px;
		color: #4b1e3d;
		text-transform: none;
		margin: 50px 0 70px 0;
	}

	#qui-sommes-nous .pres .btn{
		margin: 30px 0 10px 0;
	}

	#qui-sommes-nous .valeurs{
		background: #f0f0f0;
		padding: 100px 0;
		margin-top: 90px;
	}


	#qui-sommes-nous .valeurs h2{
		font-size: 80px;
		line-height: 90px;
		margin: 0;
	}

	#qui-sommes-nous .valeurs .liste_valeurs{
		margin-top: 70px;
	}

	#qui-sommes-nous .valeurs .liste_valeurs .col{
		margin-bottom: 20px;
	}

	#qui-sommes-nous .valeurs h3{
		text-align: center;
		margin: 0;
	}

	#qui-sommes-nous .valeurs p{
		text-align: center;
	}







/*----------------------------------------------------------------------------------------------------------
------------------------------------------------------PAGE-------------------------------------------------
----------------------------------------------------------------------------------------------------------*/

#page{
	margin-top: 250px;
}

#page #texte *{
	text-align: center;
}

#page #mise-en-avant {
	background: #f0f0f0;
	padding: 100px 0;
	margin-top: 90px;
}

#page #mise-en-avant *{
	text-align: center;
}







/*----------------------------------------------------------------------------------------------------------
-------------------------------------------------ACCOMPAGNEMENT--------------------------------------------
----------------------------------------------------------------------------------------------------------*/

#notre-accompagnement h1{
	font-size: 70px;
	line-height: 80px;
	margin: 150px 0 0 0;
}

	#notre-accompagnement #type-outils{
		background: #f0f0f0;
		padding: 100px 0;
		margin-top: 90px;
	}

		#notre-accompagnement #type-outils h2{
			font-family: Hatton Light, Times, serif;
			font-size: 30px;
			line-height: 40px;
			margin-bottom: 40px;
		}

		#notre-accompagnement #type-outils .col{
			margin-bottom: 30px;
		}

		#notre-accompagnement #type-outils h3{
			font-family: Hatton, Times, serif;
			font-size: 20px;
			line-height: 30px;
			margin: 0;
		}

#nos-outils{
	margin-top: 150px;
	border-bottom: 1px solid #222;
}

#nos-outils h2{
	text-align: right;
	margin: 0;
}

#nos-outils #type{
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
}

#nos-outils #type .row{
	margin: 0 -15px;
}

#nos-outils #type li{
	padding-top: 5px;
	text-align: center;
}

#nos-outils #type li a{
	font-family: Devanagari, Times, serif;
	font-size: 20px;
	line-height: 50px;
	letter-spacing: 1px;
	color: #222;
	text-transform: uppercase;
}

#nos-outils #type li.active a, #nos-outils #type li:hover a{
	color: #4b1e3d;
}

#nos-outils #items-outils{
	margin-bottom: -1px;
	/*display: block;
	flex-wrap: inherit;*/
}

#nos-outils #items-outils:after {
  content: '';
  display: block;
  clear: both;
}
#nos-outils .itemsize{
	height: 0	;
}

#nos-outils .item.future{
	opacity: 0.9;
}

#nos-outils .item{
	float: left;
	padding: 0;
	margin: 0;
}

#nos-outils .item .content{
	min-height: 591px;
	border: 1px solid #222;
	margin: -1px 0 0 -1px;
	padding: 30px;
	display: grid;
}

#nos-outils .item .infos{
	font-family: Devanagari, Times, serif;
	font-size: 18px;
	line-height: 30px;
	color: #222;
	text-transform: uppercase;
	padding: 0 15px;
}

#nos-outils .item .infos .date{
	text-align: right;
}

#nos-outils .item img{
	width: 100%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#nos-outils .item:hover img{
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}

#nos-outils .item.future a{
	cursor: default;
}

#nos-outils .item.future img{
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}

#nos-outils .item.future:hover img{
	-webkit-filter: grayscale(50%);
	filter: grayscale(50%);
}

#nos-outils .item h3{
	font-family: Hatton, Times, serif;
	font-size: 20px;
	line-height: 30px;
	margin: 30px 0 0 0;	
}

#nos-outils .citation .content .container,
#nos-outils .citation .content .row{
	height: 100%;
}

#nos-outils .citation h4{
	text-align: center;
}







/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------Outil------------------------------------------------
----------------------------------------------------------------------------------------------------------*/

#outil #infos{
	text-align: center;
	margin: 260px 0 0 0;
}

#outil #infos .date{
	margin-bottom: 20px;
}

#outil #infos .date p, #outil #infos .type p{
	font-family: Devanagari, Times, serif;
	font-size: 20px;
	line-height: 30px;
	color: #222;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}

#outil #infos .date p{
	font-size: 25px;
}

#outil #infos img{
	max-width: 100%;
	margin-top: 40px;
}

#outil #content{
	margin-top: 100px;
}

#outil #content *{
	text-align: left;
}

#outil #content h2{
	font-family: Hatton, Times, serif;
	font-size: 30px;
	line-height: 40px;
	margin: 0;
}

#outil #content h3{
	font-size: Hatton Light, Times, serif;
	font-size: 30px;
	line-height: 40px;
	margin: 0;
}

#outil #content .heateor_sss_sharing_container {
	margin-top: 80px;
}

#outil #content .heateor_sss_sharing_container .heateor_sss_sharing_title {
	font-family: Hatton Light, Times, serif;
	font-size: 20px;
	line-height: 40px;
	letter-spacing: 1px;
	color: #222222;
	font-weight: inherit !important;
	text-transform: uppercase;
	width: fit-content;
	float: left;
	margin-right: 15px;
}

#outil #content .heateor_sss_sharing_container .heateor_sss_sharing_ul {
	float: left;
}

#outils #nos-outils{
	margin-top: 300px;
}







/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------CONTACT------------------------------------------------
----------------------------------------------------------------------------------------------------------*/


.wpcf7 label{
	width: 100%;
	margin: 0 0 -1px 0;
}

.wpcf7 input{ 
	width: 100%; 
	height: 38px;
	background: #fafafa;
	border: none;
	border-bottom: 1px solid #f0f0f0;
	font-family: Devanagari, sans-serif;
	font-size: 18px;
	line-height: 38px;
	letter-spacing: 1px;
	padding: 0 0 0 10px;
	margin: 10px 0;
}

.wpcf7 input:focus, .wpcf7 textarea:focus{ 
	background: #fafafa;
	border-bottom: 1px solid #875678;
}

#top .wpcf7 select{ 
	width: inherit; 
}

.wpcf7 textarea{ 
	width: 100%; 
	background: #fafafa;
	border: none;
	border-bottom: 1px solid #f0f0f0;
	font-family: Devanagari, sans-serif;
	font-size: 18px;
	line-height: 38px;
	letter-spacing: 1px;
	padding: 0 0 0 10px;
	margin: 10px 0;
}

.wpcf7 .submit{
	text-align: center;
}

.wpcf7 input[type="submit"]{ 
	background: #fff;
	width: fit-content; 
	height: 48px;
	border: none;
	font-family: Hatton, Times, serif;
	font-size: 20px;
	line-height: 50px;
	letter-spacing: 1px;
	color: #222222;
	text-transform: uppercase;
	padding: 0 30px 0;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover{ 
	background: #4b1e3d;
	color: #ffffff;
	letter-spacing: 2px;
}

.wpcf7 form .wpcf7-response-output{
	margin: 0;
	font-family: Devanagari, sans-serif;
	font-size: 14px;
	font-style: italic;
	line-height: 20px;
	text-align: center;
}

.wpcf7 .wpcf7-not-valid-tip{ 
	font-family: Devanagari It, sans-serif;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1px;
	padding: 0 10px;
}

.wpcf7 .wpcf7-spinner{
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -12px ;
}








/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------FOOTER------------------------------------------------
----------------------------------------------------------------------------------------------------------*/
footer{text-align: center;margin-top: 120px;}
	footer #mentionsfooter{margin-top: 10px;}
		footer #mentionsfooter p, footer #mentionsfooter a{
			font-family: Devanagari, Times, serif;
			font-size: 10px;
			line-height: 20px;
			letter-spacing: 1px;
			color: #999999;
			margin: 0;
		}