/*
Theme Name: FLORENCE HAMON
Author: Samuel Jan (http://www.samueljan.fr)
*/

@import url('https://fonts.googleapis.com/css?family=Questrial');

/* FONTELLO */
@import 'fonts/symbols/font.css';
@import 'fonts/sieges/font.css';


:root{
	--color0: rgb(42, 186, 160);
	--color1: rgb(220, 106, 111);
	--color2: rgb(121, 175, 63);
	--color3: rgb(235, 165, 30);
	--color4: rgb(217, 184, 211);
	--color5: rgb(121, 175, 63);
	--color6: rgb(235, 165, 30);
	--maincolor : var(--color0);
	--vTrans: 1.2s;
	--vOver: 0.2s;
	--colorbg: rgba(255, 255, 255, .8);
	--swiper-pagination-color: var(--maincolor);
	--swiper-theme-color: var(--maincolor);
	--swiper-pagination-bullet-inactive-color: #fff;
	--hautFoot: 140px;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {}
body{margin: 0;background: #ffffff;text-align: center;font-family: 'Questrial', sans-serif;}
#page{width: 100%;padding:0px;min-width:600px;overflow:hidden; position: relative;user-select:none; margin-bottom: var(--hautFoot);}
h1{text-rendering: geometricPrecision; font-size: 29px;letter-spacing: 4px;-webkit-font-smoothing: antialiased;margin-bottom: 0px; margin-top: 10px;font-weight: normal;}
img.logo{width: 440px;height: auto;user-select:none; margin-top: 0px}
a{color:#000;}
a:hover{color:#FFF;}
h3.baseline{font-size: 16px; letter-spacing: 2px; line-height: 22px;}
p{font-size: 16px;line-height: 19px;margin: 5px 0;}
h4{font-size: 18px;margin-bottom: 6px;font-weight: bold;line-height: 24px;}

.animation span{position:absolute;margin-left:-250px;top:0;width:100%;text-align: center;opacity: 0;font-size: 270px}
.animation span.visible{opacity: 1}
#defaultCanvas0{width: 1200px;height: 1000px;position: absolute;top: 50%;left: 50%;margin-left: -600px;margin-top: -500px;z-index: -100;}

.animation{
  position: absolute;
  width: 500px;
  margin-top: -25px;
  font-size: 200px;
  text-align: center;
  user-select: none;
  height: 250px;
}
#symbole_fh{
  width: 500px; height: 250px; position: relative;
}

#logo_fh{
  margin-bottom: 40px;
  margin-top: 10px;
}
#logo_fh.topleft{
  position: fixed;
  z-index: 10000;
  transform: scale(.4);
  transform-origin: top left;
  top: 7px;
  left: 77px;
  margin: 0;
  cursor: pointer;
}
#logo_fh.topleft img{margin: 0}
#logo_fh.topleft h1{margin: 0}

#symbole_fh.topleft{
  position: fixed;
  z-index: 10000;
  transform: scale(.17);
  transform-origin: top left;
  left: -2px;
  top: 7px;
  width: 450px;
  overflow: hidden;
  height: 250px;
  mix-blend-mode: multiply;
}

.demo-icon{font-size: 20px;user-select:none;}
.icon-alone{font-size: 32px;user-select:none;}
.picto-lieu{}

.swiper-button-next::after, .swiper-button-prev::after{font-size: 18px;color: black;}
.swiper-button-next::before, .swiper-button-prev::before{content:""; display:block; position: absolute; opacity: 0; top: -1px; left: -1px; z-index: -1000; width:100%; height:100%; background: var(--maincolor); border: solid 1px var(--maincolor); transition: all var(--vTrans), opacity var(--vOver); border-radius: 100px; }
.swiper-button-next, .swiper-button-prev {border: 1px solid black; border-radius: 100px; width: 40px; height: 40px; background: white; position: absolute; z-index: 1; top: calc(50% + 40px);}
.swiper-button-next:hover::before, .swiper-button-prev:hover::before {opacity: 1; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{opacity: 0}

a.btn, button.btn{cursor:pointer; position:relative; background-color: white; z-index: 0; border: solid 1px black; border-radius: 100px; padding: 7px 15px; margin-bottom: 1px; transition: all var(--vOver);}
a.btn:after, button.btn:after{content:""; display:block; position: absolute;top: -1px; opacity: 0; left: -1px; z-index: -1; width:100%; height:100%; background: var(--maincolor); border: solid 1px var(--maincolor); transition: all var(--vTrans), opacity var(--vOver); ; border-radius: 100px; }
a.btn:hover:after, button.btn:hover:after{opacity: 1;}

#scroll_bottom{font-family: swiper-icons; width: 40px; height: 40px; transform: scale(1); position: fixed; z-index: 10000; left: calc(50vw - 20px); bottom: 130px; transition: transform 1s; transform-origin: center;}
#scroll_bottom.onscroll{z-index: -1; transform: scale(0);}
#scroll_bottom span{transform: rotate(90deg); display: inline-block}

section{position: relative;margin-left: auto; margin-right: auto; margin: 100px auto; padding:100px 0 0;}
#intro{position: relative; margin-top:0px; height: calc(100vh - var(--hautFoot)); min-height: 540px; display: flex; flex-flow: column; justify-content: center; align-items:center; padding-top:0px;}
#siege_a_vendre{max-width: 1150px;}
#siege_a_vendre h2{margin-bottom: 35px;}

#swiper_portfolio{position: relative; height: 700px; width:100%;max-height: calc(100vh - 100px);}
#swiper_portfolio img{height: 100%; object-fit: cover}
#swiper_portfolio .swiper-slide{width: auto; display: block; flex-flow: column; max-width: 100vw; justify-content: space-between; height: 100%; gap:5px; row-gap:5px; column-gap:5px; margin-right: 5px;}
#swiper_portfolio .swiper-slide.petit{width:300px; height: 100%}
#swiper_portfolio .swiper-slide.petit img{width: 100%; height: 50%;}
#swiper_portfolio .swiper-slide.grand img{}
#swiper_portfolio .swiper-wrapper{transition-timing-function: linear;}

.swiper-scrollbar{
  background: rgba(255,255,255,.4);
}
.swiper-horizontal > .swiper-scrollbar{
  height: 10px;
  bottom: 6px;
}
.swiper-scrollbar-drag {
  background: transparent;
}
.swiper-scrollbar-drag:after {
  content: "";
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  background: var(--maincolor);
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;  
  border-radius: 110px;
  transition: all var(--vTrans);
}


#swiper_sieges{position: relative; height: 400px; width:calc(100% - 150px); max-width: 1000px}
#swiper_sieges .swiper-slide{width: 200px; margin-right: 0px; overflow: visible; display: flex; flex-flow: column; justify-content: space-between; align-items: center;}
#swiper_sieges .swiper-slide[data-fancybox]{cursor: pointer;}
#swiper_sieges .swiper-slide img{width: 100%; height: calc(100% - 50px); object-fit: cover; transition: transform .2s; transform-origin: center;}
.fancybox-slide{padding: 0}

#tissus .tissus_txt{max-width: 900px; width: calc(100% - 20px); margin: auto;}

footer{background:var(--maincolor); width: 100vw; height:var(--hautFoot);margin-top:-140px; position:fixed;top:100vh;z-index: 1000; transition: background-color var(--vTrans), margin-top 1s;}

div.row{clear: both; width: 100%; height: 100%; max-width: 900px; margin:0 auto; display: flex; flex-flow: row; align-items: center; justify-content: center;}
div.col33{width: 33%; height: auto; }
div.col33 p{margin: 0}
div.col33 h4{margin: 0}
div.col33.rs a{margin:0 7px;}
div.col33.rs p{font-size: 14px}

.mentions{clear:both;text-align: right;position:absolute;bottom:0; right:0; padding: 10px}
.mentions, .mentions a {
    font-size: 10px;
    font-weight: 300;
    color: #000;
    letter-spacing: 0.5px;
    font-family: helvetica, sans-serif;
    text-decoration: none;
    margin-right: 10px;
}

#menu {
  position: fixed;
  right: 0;
  text-align: right;
  z-index: 10000;
  padding: 10px;
  padding-right: 10px;
  padding-right: 10px;
  padding-right: 10px;
}

#menu a {
  color: white;
  padding: 7px;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 18px;
  transition: all .2s;
  text-decoration: none; 
  color:#000;
  position: relative;
}

#menu a:after{
  content:"";
  display: block;
  position: absolute;
  width: 0;
  height: 8px;
  border-radius: 20px;
  background: var(--maincolor);
  transition: all var(--vTrans), width var(--vOver);
  left: 5px;
  top: 13px;
  z-index: -1;
  transform: rotate(-1deg);
  opacity: .8;
}

#menu.topright {
  width: 100%;
}

#menu.topright .active a:after, #menu.topright a:hover:after, #menu a:hover:after {
   width: calc(100% - 10px);
}

#menu .link-container{
  display: flex;
  flex-flow: column;
}



/* Bandeau */
.fancybox-container{}
.fancybox-container.sav{}
.fancybox-container.sav .content_sav{width: 1000px; max-width: 100%; line-height:0; display: flex; flex-flow: row; justify-content: space-between;}
.fancybox-container.sav div.imgs{width:50%; height:700px; max-height: calc(100vh - 12px)}
.fancybox-container.sav div.imgs img{width: 100%; height: 100%; object-fit: cover; background: var(--maincolor) } 
.fancybox-container.sav div.imgs #swiper_imgsav{height: 100%; }

/*.fancybox-container.sav div.text{width: calc(50% - 10px)}*/
.fancybox-container.sav div.text{
  width: calc(50% - 10px);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 0 25px;
  line-height: 1;
}

.fancybox-content{
  padding: 6px;
  overflow-x: hidden;
}
.fancybox-container.sav div.text button{
  outline: none;
  margin-bottom: 5px;
}

.fancybox-container.sav div.text button:after{
  opacity: 1;
}

.fancybox-navigation .fancybox-button svg{
	display: none;
}
.fancybox-navigation .fancybox-button div::after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
  font-size: 18px;
  color: black;
}
.fancybox-navigation .fancybox-button--arrow_left div::after {
	content: 'prev';
}
.fancybox-navigation .fancybox-button--arrow_right div::after{
	content: 'next';
}

.fancybox-navigation .fancybox-button div::before {
  content: "";
  display: block;
  position: absolute;
  opacity: 0;
  top: -1px;
  left: -1px;
  z-index: -1000;
  width: 100%;
  height: 100%;
  background: var(--maincolor);
  border: solid 1px var(--maincolor);
  transition: all var(--vTrans), opacity var(--vOver);
  border-radius: 100px;
}
.fancybox-navigation .fancybox-button div{
  border: 1px solid black;
  border-radius: 100px;
  width: 40px;
  height: 40px;
  background: white;
  position: absolute;
  z-index: 1;
  background-color: transparent;
  padding:10px;
}
.fancybox-navigation .fancybox-button{
  background-color: transparent;
}
.fancybox-navigation .fancybox-button:hover div::before {
  opacity: 1;
}

.fancybox-navigation .fancybox-button[disabled]{
	display: none;
}
.fancybox-navigation .fancybox-button--arrow_left{left:20px;}
.fancybox-navigation .fancybox-button--arrow_right{right:20px;}


/* close */
.fancybox-close-small svg{
	transform: scale(1.3);
  /*margin: 11px;*/
}
.fancybox-close-small svg path{
	fill: black;
}

.fancybox-close-small{
  border: 1px solid black;
  border-radius: 100px;
  width: 40px;
  height: 40px;
  background: white;
  position: absolute;
  z-index: 1;
  background-color: transparent;
  padding:3px;
}
.fancybox-close-small::before {
  content: "";
  display: block;
  position: absolute;
  opacity: 0;
  top: -1px;
  left: -1px;
  z-index: -1000;
  width: 100%;
  height: 100%;
  background: var(--maincolor);
  border: solid 1px var(--maincolor);
  transition: all var(--vTrans), opacity var(--vOver);
  border-radius: 100px;
}
.fancybox-close-small:hover::before {
  opacity: 1;
}

/* contact */
#contact{
	display: flex;
	flex-flow: row;
	margin-bottom: 0;
  align-items: center;
}

#contact>div{
	width: 50vw;
	height: 50vw;
  max-height: calc(100vh - var(--hautFoot) - 37px);
}

#contact div.img .swiper{
	height: 100%;
}
#contact div.img .swiper img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#contact div.text{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

#contact div.text:after{
	content: "";
	background-color: var(--maincolor);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	opacity: .4;
	transition: all var(--vTrans);
}

#contact div.text img.logo{
  width: 250px;
  margin: 0 0 10px;
}

/* RESPONSIVE */
@media screen and (max-height: 950px) and (min-width: 601px) {
  footer.onscroll{margin-top:0px;}
  #page{margin-bottom: 0px;}
  footer.onscroll2{margin-top:0px; transition: background-color var(--vTrans); position: relative; top:0%;; width: 100%;}
}




@media screen and (max-width: 600px) {
  #menu{display: none;}
  #logo_fh.topleft{display: none}
  #symbole_fh.topleft{display: none}
	footer{height: auto;margin-top:0px;position:absolute;top:auto;}
  section{padding: 0}
	div.row{max-width: 100%;  flex-flow: column; margin:25px 0 40px;}
	div.col33{width: 100%; float: none; margin:15px auto;}
	#page{min-width:100%; margin: 0}
	/*.animation{transform: scale(0.9);}*/
	h1{font-size: 22px;}
	img.logo {width: 360px;}

  #contact {flex-flow: column-reverse;}
  #contact > div {
    width: 100%;
    height: 400px;
  }
  #logo_fh {
  /*  margin-bottom: 330px;
    margin-top: 30px;*/
    /*height: 110px;*/
  }
  .fancybox-container.sav .content_sav{
    display: block;
  }
  .fancybox-content{height: 100%}
  .fancybox-container.sav div.imgs{width:100%; height:calc(60vh - 10px); max-height: 60vh}
  .fancybox-container.sav div.text{width: 100%;height:calc(40vh - 10px); overflow-y: auto; min-height: 300px}
  .fancybox-container.sav div.text h2{margin:0 0 5px;}
  .fancybox-slide--html{padding: 0}
  .fancybox-navigation .fancybox-button div::before {opacity: 1}
  .fancybox-navigation {top: calc(60% - 20px);}
}


@media screen and (max-width: 500px) {
  #logo_fh {
    margin-bottom: 0px;
  }
  #symbole_fh {
    width: 500px;
    height: 210px;
  }
  #defaultCanvas0{transform: scale(0.8);}
  .animation{ transform: scale(0.8);}
	h1{font-size: 17px;}
	img.logo {width: 300px;}
	h3.baseline{}
	footer{top:auto;}
}


@media print {
}