@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');
*{
	margin:0;
	padding:0;
	font-family:'Quicksand',calibri,sans-serif;
	font-size:16px;
	line-height:1.7;
}
h1,h2,h3,.faux-titre{
	font-family:'Quicksand',calibri,sans-serif;
	font-size:1.6rem;
	font-weight:300;
	margin:20px 0 10px 0;
	display:block;
}
h1{
	font-size:1rem;
	font-weight:bold;
}
h3{
	font-size: 1.2rem;
	font-weight: 800;
	margin-top: 35px;
}
p{
	margin:2px 0 15px 0;
}
a{
	text-decoration:none;
	color:#1d1d1d;
}
p a{
	color:#179f94;
	text-decoration:underline;
	transition:0.4s;
}
p a:hover{
	color:#E69B38;
	transition:0.4s;
}
b,strong{
	font-weight:bold;
}
ul{
	list-style-type:none;
}
ul.list-with{
	list-style-type:disc;
	margin-left:3%;
	padding-left:1%;
}
body{

}
div#page{
	position:relative;
}

/* --- Styles General --- */
.capsule{
	width: 80%;
	padding: 40px 10%;
	height: 44vw;
	overflow: auto;
}
.capsule.height-auto{
	height:auto;
}
.flexblock{
	display:flex;
}
.flexblock-reverse{
	display: flex;
	flex-direction: row-reverse;
}
.midwidth{
	width:50%;
}
.midwidth.equal{
	height:50vw;
}
.width55pourcent{
	width:55%;
}
.quartwidth{
	width:25%;
}
.tierwidth{
	width:75%;
}
.center{
	text-align:center;
	margin:0 auto;
}
.maj{
	text-transform:uppercase;
}


/* color */
.bg-vert{
	background-color:#179f94;
}
.orange{
	color:#E69B38;
}
.vert{
	color:#179f94;
}

/* boutons */
button.cta{
	width:fit-content;
	padding:2px 20px;
	border:none;
	background-color: #ffffff;
	box-shadow: none;
	border-radius: 25px;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1.1px;
	transition: 0.4s;
}

button.cta.border-vert{
	border:2px solid #179f94;
	transition:0.4s;
	color:#179f94;
}
button.cta.border-vert:hover{
	border:2px solid #179f94;
	background-color:#179f94;
	color:#ffffff;
	transition:0.4s;
	cursor:pointer;
}
button.cta.bg-vert{
	border:2px solid #179f94;
	background-color:#179f94;
	transition:0.4s;
	color:#ffffff;
}
button.cta.bg-vert:hover{
	background-color:#ffffff;
	color:#179f94;
	transition:0.4s;
	cursor:pointer;
}

button.cta.border-orange{
	border:2px solid #E69B38;
	transition:0.4s;
	color:#E69B38;
}
button.cta.border-orange:hover{
	border:2px solid #E69B38;
	background-color:#E69B38;
	color:#ffffff;
	transition:0.4s;
	cursor:pointer;
}
button.cta.bg-orange{
	border:2px solid #E69B38;
	background-color:#E69B38;
	transition:0.4s;
	color:#ffffff;
}
button.cta.bg-orange:hover{
	background-color:#ffffff;
	color:#E69B38;
	transition:0.4s;
	cursor:pointer;
}

/* margin padding */
.mt220{
	margin-top:220px;
}
.pr40pourcent{
	padding-right:40%;
}
.mt35pourcent{
	margin-top:35%;
}
.mt40pourcent{
	margin-top:40%;
}
.pb30{
	padding-bottom:30px;
}
.mb30{
	margin-bottom:60px;
}
.mt-moins10{
	margin-top:-10px;
}

/* --- images --- */
img{
	width:100%;
}

/* --- HEADER --- */
aside#coord-top{
	position: absolute;
	top: 0;
	right: 0;
	background-color: #179f94;
	padding: 0 2%;
	height: 37px;
	border-bottom-left-radius: 20px;
	color: #fff;
}
aside#coord-top a,
aside#coord-top p a{
	color:#ffffff;
	text-decoration:none;
}
button.bta-vertical-top{
	background-color: #179f94;
	border: none;
	box-shadow: none;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	padding:35px 5px 3px 5px;
}
button.bta-vertical-top img{
	width:25px;
}

header#header{
	position:relative;
}
div#bg-header{
	background-image:url('../../img/bg-sophie.png');
	height:110px;
	width:100%;
	position:absolute;
	background-repeat: repeat;
	background-size: cover;
	top:0;
	right:0;
	z-index:-1;
	
}

/* -- logo -- */
figure#logo-header{
	position: absolute;
	width: 40%;
	left: 45%;
	top: 90px;
}

/* --- MENU PRINCIPAL --- */
/*nav#main-menu{
	position:absolute;
	right:0;
	top:30px;
}*/
/* --- MENU BURGER --- */
	header#header-mobile{
		position:relative;
		background-color: #fff6f3;
		margin: 0;
	}
	#hamburger-button {
		position:absolute;
	  z-index: 10;
	  display: inline-block;
	  height:50px;
	  width:50px;
	  top: 13vh;
	right: -10px;
	padding: 20px;
	}

	#hamburger-button:hover {
	  cursor:pointer;
	}

	#hamburger-button > span {
	  display: block;
	  height: 4px;
	  margin-bottom: 6px;
	  width: 30px;
	  background-color:#000000;
	  border-radius:5px;
	 -webkit-transition-timing-function: linear; /* Safari and Chrome */
	transition-timing-function: linear;
	transition-duration:0.6s;
	}
	
	#hamburger-button > span:first-child{
		width:26px
	}
	#hamburger-button > span:last-child{
		width:22px
	}

	#hamburger-button.open > span:first-child {
	-webkit-transform: translateY(9px) rotate(45deg); /* Chrome, Safari, Opera */
	transform:translateY(9px) rotate(45deg);
	width:30px;
	}


	#hamburger-button.open > span:nth-child(2) {
	   -webkit-transform: rotateY(90deg); /* Safari */
		transform: rotateY(90deg);
	  /* rotates the second child on the Y AXIS ONLY 90 degrees so it disappears into a point */
	}

	#hamburger-button.open > span:last-child {
	 -webkit-transform: translateY(-10px) rotate(-45deg); /* Chrome, Safari, Opera */
		transform: translateY(-10px) rotate(-45deg);
		width:30px;
	}
	span#menu{
		position: absolute;
		z-index: 10;
		display: inline-block;
		height: 50px;
		width: 50px;
		top: 12vh;
		right: 60px;
		padding: 20px;
		text-align: t;
		text-transform: uppercase;
		font-size: 1.3rem;
		transition:0.2s;
	}
	#hamburger-button.open > span#menu{
		display:none !important;
	}

	.navbar{
	  position:absolute;
	  opacity:.975;
	  z-index:8; /*so its above the content but below the burger button*/
	  height:100vh;
	  width: 100vw;
	  left:-100vw;
	  transition:1s;
	  background-color:rgba(255,255,255,0.985);
	  color:white;
	  top:-20px;
	  padding-top:20px;
	}

	.navbar.open{
	  left:0;
	}
	.navbar ul{
	  list-style:none;
	  margin-top:100px;
	  font-size:1.5em;
	}

	.navbar ul li{
	  margin-bottom: 10px;
		padding: 5px;
		text-align: center;
		font-family: 'Alata';
		font-size: 24px;
		font-weight: 500;
		text-transform: uppercase;
	}
	.navbar ul li a{
		font-size: 2rem;
		font-weight: 500;
		text-transform: uppercase;	
		color:#000000;
	}
	.navbar ul li:hover{
	  cursor:pointer;
	}
	
	/* -- */
	/* --- submenu on click -- */
	.has-children:hover{
	cursor:hand;
}

.children {
	display:none;
margin-top:20px !important;	
}
.children li,
.children li a{
	font-size:1.25rem !important;
}
.mobile-menu .children li:first-child {
  margin-top: 0px;
}

.icon-arrow {
	position: absolute;
	display: block;
	font-size: 0.7em;
	color: black;
	top: 5px;
	right: 10px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg); 
	transition: .6s;
  -webkit-transition: .6s;
  -moz-transition: .6s;	 
}
  
.icon-arrow:after {
    content: "\25BC";
}

.icon-arrow.open {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg); 
  transition: .6s;
  -webkit-transition: .6s;
  -moz-transition: .6s; 		
}
	
	/* -- */


/* --- Page accueil --- */
div#img-bg-top-header,
div#img-bg-services-home,
div#img-bg-about-home,
div#img-bg-seo-home{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}
div#img-bg-top-header{
	background-image:url('../../img/statut-loi.jpg');
}
div#img-bg-services-home{
	background-image:url('../../img/body.jpg');
}
div#img-bg-about-home{
	background-image:url('../../img/sophie-kerzerho-avocate-1200px.png');
	background-position:top;
}
div#img-bg-seo-home{
	background-image:url('../../img/balance-juridique.jpg');
}


/* - pictos services home - */
section#all-pictos-services a{
	display:block;
	text-align:right;
	margin:20px 0;
}
div#services-home{
	position:relative;
}
section#all-pictos-services{
	position:absolute;
	right: 42%;
	top: 25vh;
}

/* --- FOOTER --- */
figure.picto-coord{
	width:30px;
	margin-right:15px;
}
ul#coord li p{
	transition:0.4s;
}
ul#coord li p:hover{
	transition:0.4s;
	margin-left:5px;
}

/* with bg */
div#footer-with-bg{
	background-image:url('img/bg-sophie.png');
	background-repeat: repeat;
	background-size: cover;
}
ul#coord{
	padding: 25px 3%;
	background-color: rgba(255,255,255,0.8);
	width:fit-content;
}
div#footer-with-bg a{
	text-decoration:none;
}

/* -- logo footer -- */
figure#logo-footer{
	max-width: 70%;
	display: block;
	margin: 0 0 0 auto;
}

/* - menu footer - */
nav#menu-footer{
	margin-top:60px;
}
nav#menu-footer ul li,
nav#menu-footer ul a,
nav#menu-footer2 ul a,
nav#menu-footer2 ul li{
	color:#ffffff;
	transition:0.4s;
}
nav#menu-footer ul a:hover,
nav#menu-footer2 ul a:hover{
	transition:0.4s;
	color:#E69B38;
}

/* -- menu legal -- */
nav#menu-legal{
	margin-top:20px;
}
nav#menu-legal ul li,
nav#menu-footer ul li,
nav#menu-footer2 ul li{
	display:inline-block;
}
nav#menu-legal ul li:after,
nav#menu-footer ul li:after,
nav#menu-footer2 ul li:after{
	content:"|";
	margin:0 5px;
	color:#ffffff;
}
nav#menu-legal ul li:last-child:after,
nav#menu-footer ul li:last-child:after,
nav#menu-footer2 ul li:last-child:after{
	content:" ";
}
nav#menu-legal ul li,
nav#menu-legal ul a{
	font-size:0.7rem;
	color:#ffffff;
	transition:0.4s;
}
nav#menu-legal ul a:hover{
	transition:0.4s;
	color:#1d1d1d;
}


/* ///// SERVICES  ///// */
div#img-bg-top-services,
div#img-bg-acc-circulation,
div#img-bg-acc-medical,
div#img-bg-acc-travail,
div#img-bg-acc-vie,
div#img-bg-acc-violences,
div#img-bg-top-actus{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}
div#img-bg-top-services{
	background-image:url('img/balance-juridique.jpg');
}
div#img-bg-acc-circulation{
	background-image:url('../../img/accident-circulation2.jpg');
}
div#img-bg-acc-medical{
	background-image:url('../../img/accident-medical.jpg');
}
div#img-bg-acc-travail{
	background-image:url('../../img/accident-travail.jpg');
}
div#img-bg-acc-vie{
	background-image:url('../../img/accident-vie.jpg');
}
div#img-bg-acc-violences{
	background-image:url('../../img/accident-violences2.jpg');
	background-position:bottom;
}
div#img-bg-top-actus{
	background-image:url('../../img/actus.png');
	/*background-position:bottom;*/
}

span.titre-service{
	color: #1d1d1d;
	font-size: 1.3rem;
	border-bottom: 1px solid #1d1d1d;
	padding-left: 15%;
	margin: 20px -15% 40px;
	display:block;
	width:fit-content;
}

button.cta-dde-rdv{
	margin: 30px 0 30px auto;
	display: block;
}


/* -- single service -- */
div#img-bg-all-services{
	background-image:url('https://sophiekerzerho-avocat.fr/img/all-services.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top;
}
section#autres-services a{
	display:block;
	margin:25px auto;
}
section#autres-services div.capsule{
	border-bottom: 2px solid #179f94;
	margin-top: -2px;
}

/* ///// ABOUT ///// */



/* ///// HONORAIRES ///// */
div#img-bg-top-honoraires{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-image:url('img/honoraires.jpg');
}

/* ///// CONTACT ///// */
div#img-bg-top-contact{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}
div#img-bg-top-contact{
	background-image:url('img/top-contact.jpg');
}
ul#coord-contact li a{
	color:#212121;
	text-decoration:none;
}
/* -- form -- */
form#contact,
form#formulaire-contact{
	margin-top:13%;
}
form#contact label,
form#formulaire-contact label,
form#contact input,
form#formulaire-contact input,
form#contact textarea,
form#formulaire-contact textarea{
	width:100%;
	display:block;
}
form#contact input,
form#formulaire-contact input{
	margin-bottom:25px;
	padding:0 5px;
}
form#contact input,
form#formulaire-contact input,
form#contact textarea,
form#formulaire-contact textarea{
	padding:0 5px;
}

p.rgpd{
	font-size:0.7rem;
	display:block;
	width:100%;
}
p.rgpd a{
	font-size:0.7rem;
	color:#179f94;
	transition:0.4s;
}
p.rgpd a:hover{
	transition:0.4s;
	color:#E69B38;
}


/* /// ACTUALITES /// */
section#all-actus{
	border-top:5px solid #179f94;
	border-bottom:5px solid #179f94;
}
article.actu-on-all{
	margin:50px auto;
}
div.img-article,
div.excerpt-article{
	margin:0 2%;
}

section#all-actus article.actu-on-all div.quartwidth.img-article{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-width:25%;
	max-width:25%;
}


/* --- single actu --- */
div.content-single-actu{
	max-width:800px;
	height:auto;
	margin:40px auto 75px auto;
}




/* actualites mars 2021 : attente "vrai" espace */
ul#liste-actus{
	list-style-type:disc;
	margin-left:5%;
}
div#accordion h3:hover{
	cursor:pointer;
}
div#accordion h3.ui-accordion-header:before{
	content:"+";
	margin:0 10px;
	color:#179f94;
}
div#accordion h3.ui-accordion-header.ui-accordion-header-active.ui-state-active:before{
	content:"-";
	margin:0 10px;
	color:#179f94;
}
div.ui-accordion-content{
	height:auto !important;
	-webkit-box-shadow: 3px 3px 15px 1px #A1A1A1; 
	box-shadow: 3px 3px 15px 1px #A1A1A1;
	padding:20px;
}


.noordi{
	display:none;
}

/* /////////// RESPONSIVEE ////////// */

@media screen and (min-width: 1200px) and (max-width: 1399px){
	.midwidth.equal.equalmore{
		height:65vw;
	}
	.midwidth.equal.equalmoreplus{
		height:85vw;
	}
	.midwidth.equal.equalmoreplusplus{
		height:105vw;
	}
	.midwidth.equal.equalmore .capsule,
	.midwidth.equal.equalmoreplus .capsule,
	.midwidth.equal.equalmoreplusplus .capsule{
		height:100%;
	}
}

@media screen and (min-width: 1000px) and (max-width: 1199px){
	.midwidth.equal.equalmore{
		height:80vw;
	}
	.midwidth.equal.equalmoreplus{
		height:115vw;
	}
	.midwidth.equal.equalmoreplusplus{
		height:120vw;
	}
	.midwidth.equal.equalmore .capsule,
	.midwidth.equal.equalmoreplus .capsule,
	.midwidth.equal.equalmoreplusplus .capsule{
		height:100%;
	}
}


@media screen and (max-width: 840px) {
	.noordi{
		display:block;
	}
	.nomobile{
		display:none !important;
	}
	.flexblock{
		display:block;
	}
	.flexblock-reverse {
		display:block;
		flex-direction:row;
	}
	.capsule{
		height:auto;
	}
	.midwidth,
	.quartwidth{
		width:100%;
	}
	.width55pourcent{
		width:80%;
	}
	
	footer ul#coord li.flexblock{
		display:flex;
	}
	.mt40pourcent{
		margin-top:0;
	}
	.midwidth.equal{
		height:auto;
	}
	.pr40pourcent{
		padding-right:0;
	}
	.overflow-mobile{
		max-height:500px;
		overflow:auto;
	}
	
	/* --- header --- */
	figure#logo-header{
		position:relative;
		width:90%;
		padding-top:100px;
		margin:0px auto 20px auto;
		top:0;
		left:0;
		display:block;
	}
	#hamburger-button{
		top: 15px;
		left: 20px;
	}
	
	/* //// ACCUEIL //// */
	div.img-bg{
		width:100% !important;
		height:310px !important;
	}
	section#all-pictos-services{
		position:relative;
		top:0;
		right:0;
	}
	section#all-pictos-services a{
		text-align:center;
	}
	
	/* ///// FOOTER ///// */
	figure#logo-footer{
		max-width:100%;
	}
	
	
	
	/* /// ACTUS /// */
	/* single actu */
	/* --- single actu --- */
	div.content-single-actu{
		width: 80%;
		padding: 40px 10%;
		margin-top:-80px;
	}
	div.content-single-actu h2,
	div.content-single-actu h3{
		font-size:1rem;
		font-weight:600;
		border-bottom:0.5px solid #8181;
		margin-top:65px;
	}
	
	
}