html {box-sizing: border-box;}*, *:before, *:after {  box-sizing: inherit;}
body {
	font-family: Work Sans,Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1.8;
	color:#1f2435;
	margin: 0;
	padding: 0;
}
a{color:#3d4765;}a:hover{color:#3187eb;}a:focus{color:#3187eb;}a:active{color:#3187eb;}
h1{font-weight: 300;font-size: 2em;}h2{font-weight: 500;margin:.25em;margin-bottom: 2em;}
.h2fat{
	font-weight: 700;
	font-size: 1.18em;
	margin:1em 0;
}
hr{border-top: 1px solid #039cff;}
svg{width: 100%;max-width:500px;}
.menu {
	position:fixed;
	z-index:104;
	text-align:right;
	color:#ffffff;
	top: 2em;
    right: 1em;
	text-shadow: 1px 1px #000000;
	overflow:hidden;
	height:84px;
	display: none;
}
#nav {
	background:rgba(0,35,99,0.6);
	background: linear-gradient(to right, #007eccee, #003899ee);
	position:fixed;
	height: 60px;
	width: 100%;
	z-index: 103;
	display:block;
}
#nav ul {
	position:relative;
	margin: 0;
	z-index:104;
	text-align:center;
	list-style:none;
}
#nav li {
	display: inline-block;
}
#nav li a {
	margin:.6em;
	padding:0.25em 1.5em;
	display:inline-block;
	color:#e8f0fb;
	text-decoration:none;
	line-height:2em;
	font-size:.8em;
	transition: all 150ms ease-in-out;
}
#nav li a:hover {
	color: #e8f0fbcc;
	transform: scale(1.2);
	transition: all 150ms ease-in-out;
}

#nav.show {
  animation: menu-fade-in .4s forwards;
}
#nav.hide {
  animation: menu-fade-out .25s forwards;
}
@keyframes menu-fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes menu-fade-in {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  1% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
header {
	background-image: url('https://ouestbat.fr/img/header.jpg');
	background-size: cover;
	background-position: center;
}
#intro{
	background: linear-gradient(to right, #039cffff, #0274e6dd, #0048cbff);
	position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
	color:#ffffff;
	min-height:500px;
	width:100%;
	height: 100vh;
	overflow:hidden;
	margin:0;
	border-bottom: 2px solid #ffffff;
}
#intro .row {
	margin: 0;
}

#top{
	background: linear-gradient(to right, #039cff, #0048cb);
	position:relative;
	overflow: hidden;
	margin:0;
	padding:100px 0 1em 0;
	text-align:center;
	min-height:10em;
	width:100%;
}

#top  svg{
	max-height:8em;
	width: 240px;
}

#lg{
	position:relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height:500px;
	min-width:100px;
	max-width:90%;
	margin:auto;
}
#sl{
	background: url(../img/sl.png) no-repeat left center;
	min-height:500px;
	max-width:90%;
	margin:auto;
	background-size: contain;
	background-position: center;
	text-indent:-9999px;
}
#house{
	background: url(../img/house.b.svg) no-repeat top center;
	display:block;
	margin:50px 0 200px 0;
	padding-top:180px;
	min-height:360px;
	
}
#house div{font-weight:bold;margin: auto;}
.rea{
	z-index:101;
	margin-top: 40px;
	position: relative;
    display: inline-block;
}
.anchornav{
	display: inline-grid;
	align-items: center;
}
.line {
	z-index:100;
	width: 100%;
	height: 4px;
	position: relative;
	display:inline-block;
	background: linear-gradient(90deg,transparent 0%, #039cff 10%, #039cff 90%,transparent 100%);
}
.nav{
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav-item{
	background-color: #039cff;
	padding:0.6em 0;
	margin:0.4em 0;
	border: none;
	transition: all 150ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.nav-item:hover{
	background-color: #1059ad;
}
.nav-link{
	color: #fff;
	display:block;
	padding:0.6em 1em;
	font-weight: 700;
	font-size: 0.8em;
	cursor: pointer;
	text-decoration:none;
}
.nav-link:hover{
	color: #fff;
}
#skill{margin:auto;}
#sktext{padding:0 4em 0 4em;overflow-y:hidden;}
#sktext .detail{
	overflow-y: auto;
	display:none;
	transition:all 1.25s ease-in-out;	
}
#sktext .detail.active{
	overflow-y: auto;
	display:block;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-iteration-count: 1;
}
#select{margin:1em 0;}
#photo{
	background: linear-gradient(to right, #039cff, #0048cb);	
	min-height:500px;
	max-height:500px;
	padding:0px;
	color:#ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#photo img{
	mix-blend-mode: multiply;
	filter: grayscale(100%);
	min-height:100%;
	display:none;
	transition:all 1.25s ease-in-out;
}
#photo img.active{
	display:block;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-iteration-count: 1;
}
#photo h2{
	position: absolute;
	z-index:103;
}
.services{
	list-style: none;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}
.services li{
	display: list-item;
	width:50%;
	transition: color .15s ease-in-out;
}
.legend i,.services i{
	color:#039cff;
}
.btn{
	background-color: #039cff;
	color: #fff;
	font-weight: 700;
	font-size: 0.8em;
	padding: 1em;
	border: none;
	transition: all 150ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	cursor: pointer;
	text-decoration:none;
}
.btn:hover{
	background-color: #1059ad;
	color: #fff;
}

.btnega{
	background-color: #1059ad;
}

.btnega:hover{
	background-color: #3187eb;
}

.hidden{
	display: none;
	visibility: hidden;
	opacity: 0;
}

.container{
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.container-fluid {
    margin: auto 2em;
}

.row {
	margin: 5em 0;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 20px;
}

footer {
	text-align:center;
	font-size: 0.8em;
	height: 50px;
	margin-top: 30px;
}

footer a{
	font-size: 0.8em;
}
#present{
	overflow-x: hidden;
}
.logo svg{
	width:120px;
	height:120px;
	transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	margin-bottom:0.4em;
}
.logo svg:hover{
	transform: scale(1.2);
	margin-bottom:0;
}
.circlebg{
	transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.svglightblue:hover .circlebg{
	fill: #1059ad;
}
.svgdarkblue:hover .circlebg{
	fill: #039cff;
}
.coord svg{
	width:80px;height:80px;
}
.coord p{
	font-size: .9em;
}
#gallery{
	overflow:hidden;
}
.picture span{
	position: relative;
	bottom: 1em;
	display:block;
	text-align: center;
	transition: .5s ease-in-out;
	opacity: 0;
}
.picture:hover span {
	bottom: 0;
	opacity: 1;
}

figure {
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* Shine */
.picture figure {
	position: relative;
}
.picture figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}
.picture figure:hover::before {
	animation: shine .5s;
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
.embed-responsive {
	position: relative;
    display: block;
	width: 100%;
	min-height: 500px;
    border: 0;
    overflow: hidden;
}

.txt{font-weight: 300;}
.text-center {text-align: center;}.text-left {text-align: left;}.text-right {text-align: right;}

.image {
	display: block;
	max-width: 100%;
	height: auto;
}

.image-circle {
	border-radius: 50%;
}

.thumbnail{
	display:inline-block;
	padding: 4px;
	line-height: 1.42857143;
	border:1px solid #ddd;
	border-radius:4px;
	max-width: 100%;
    height: auto;
}

input, textarea{
	font-family: Work Sans,Helvetica,Arial,sans-serif;
	font-weight: 400;
	outline:0;
	padding: 1em;
    font-size: 1em;
	border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
	display: block;
	width: 100%;
	margin-top: 1em;
	box-shadow:0 2px 0.25em rgba(0,0,0,0.1);
}
.form-control:focus {
	border: 1px solid rgba(3, 156, 255, 1);
	box-shadow:0 2px 0.25em rgba(3, 156, 255, 0.15);
}
#cnt .row{
	width:600px;
	margin: 0 auto;
}
#social a{
	transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	display:inline-block;
	text-decoration:none;
	font-size:1.4em;
}
#social a:hover{
	transform:translate(0,-5px);
}
a.next,a.back{
	transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	text-decoration:none;
	display:inline-block	
}
a.next:hover{transform:translate(5px,0);}
a.back:hover{transform:translate(-5px,0);}
.alert {padding: .75rem 1.25rem;margin-bottom: 1rem;border: 1px solid transparent;border-radius: .25rem;}
.alert-primary {color: #004085;background-color: #cce5ff;border-color: #b8daff;}
.alert-success {color: #155724;background-color: #d4edda;border-color: #c3e6cb;}
.alert-danger {color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;}
.alert-warning {color: #856404;background-color: #fff3cd;border-color: #ffeeba;}
.scrolloff {pointer-events: none;}
q{
	background: #3187eb;
	font-family: 'Roboto Slab', serif;
	font-weight:300;
    border-radius: 1em;
    padding:1em;
    margin:2em 0;
    display: inline-block;
    quotes: "“\00A0" "\00A0”";
    color: #fff;
    font-size: 1.2em;
}
@media(max-width:767px){
	.menu {display: block;}
	#nav {
		background:rgba(0,35,99,0.6);
		position:fixed;
		height:100%;
		width:100%;
		z-index:103;
		display:none;
	}
	#nav ul {
		position:relative;
		z-index:104;
		text-align:center;
		list-style:none;
		width: 90%;
		height:100%;
		margin:5em auto;
	}
	#nav li {
		display: block;
	}
	#nav li a {
		background-size: 200% 100%;
		background-image: linear-gradient(to right, #039cff 50%, #1059ad 50%);	
		margin:0.6em;
		padding:0.25em 1.5em;
		color:#e8f0fb;
		text-decoration:none;
		line-height:2em;
		display:inline-block;
		font-size:1.6em;
		transition: all 150ms ease-in-out;
	}
	#nav li a:hover {
		background-position: 100% 0;
		transform: scale(1);
		transition: none;
	}
	#nav li a:hover i{
		transition: all 300ms ease-in-out;
		transform: scale(1.2);
	}
	#nav.show {
		display: block;
	}
	#top {
		padding: 1em 0;
	}
	#nav li a{font-size:1.2em;margin:0.4em;}
	.menu img{transform:scale(0.8);}
	#lg,#sl{min-height:400px;max-width:80%;}
	/*path.o,path.b{fill: rgba(1, 15, 39,.3);}*/
	#house{background-size: contain;font-size: 0.9em;padding-top: 30%;margin:50px 0 100px 0;}
	#house div{background-color:#fff;width: 90%;}
	.line{top:80px;height:3px;}
	#skill{height:700px;overflow-y:hidden;}#photo{min-height:700px;position: relative;top:-700px; z-index: 101;}#sktext,.detail{height:600px;z-index: 102;color:#fff;text-shadow: 1px 1px 1px #000}
	.skbut {border: 1px #fff solid; box-shadow: 0 1px 5px #fff;}
	#select{margin:0.5em 0;}
	.container-fluid {overflow-x:hidden;	margin: auto 0.5em;}
	.thumbnail{filter: grayscale(0);}
	.picture span {font-size:0.8em;}
	.services li{width:100%;}
	#cnt .row{width:100%;}
	h1{overflow-x:hidden;}
	footer a{display:none;}
}
@media(max-width:667px){
	#house div{font-size: .8em;}
	#skill{height:900px;}#photo{min-height:900px;top:-900px;}#sktext,.detail{height:800px;}
}
@media(max-width:565px){
	#house div{font-size: .8em;}
	#skill{height:1200px;}#photo{min-height:1200px;top:-1200px;}#sktext,.detail{height:1100px;overflow-x:hidden;}
}
@media (min-width: 768px) {
	#lg,#sl{min-height:500px;min-width:200px;}
	#sktext,#photo,.detail{min-height:500px;max-height:500px;}
	#sktext{padding:1.5em;}
	.line{top: 85px;}
	.container {	width: 750px;}
	.title {	height: 500px;}
	#nav a.bounceInLeft, #nav a.bounceInRight {animation: none;}
}

@media (min-width: 992px) {
	#nav {height: 75px;}
	#nav li a {font-size: 1em;}
	#lg,#sl{min-height:600px;min-width:250px;}
	#sktext,#photo,.detail{min-height:600px;max-height:600px;}	
	#sktext{padding:0 4em;}
	.rea{margin-top: 60px;}
	.line{top: 105px;}
	.container {width: 970px;}
	.title {height: 600px;}
	.title h1{margin-right:0.5em;}
}

@media (min-width: 1200px) {
	#lg,#sl{min-height:700px;min-width:300px;}
	#sktext,#photo,.detail{min-height:700px;max-height:700px;}
	.rea{font-size:1.1em;}
	.line{top: 115px;}
	.detail{padding:0 2em;}
	.container {width: 1170px;}
	.title {height: 700px;}
	.title h1{margin-right:1em;}
}
@media (min-width: 1600px) {
	#lg,#sl{min-height:800px;min-width:400px;max-height:800px;}
	#sktext,#photo{min-height:800px;}
	.rea{font-size:1.2em;margin-top: 80px;}
	.line{top: 140px;}
	.container {width: 1570px;}
	.title {height: 900px;}
	.title h1{font-size: 2.4em;}
	.row {margin: 7em 0;}
}


.col-xs-0{display: none;}.col-xs-12 {grid-column: span 12}.col-xs-11 {grid-column: span 11}.col-xs-10 {grid-column: span 10}.col-xs-9 {grid-column: span 9}.col-xs-8 {grid-column: span 8}.col-xs-7 {grid-column: span 7}.col-xs-6 {grid-column: span 6}.col-xs-5 {grid-column: span 5}.col-xs-4 {grid-column: span 4}.col-xs-3 {grid-column: span 3}.col-xs-2 {grid-column: span 2}.col-xs-1 {grid-column: span 1}

@media (min-width: 768px) {
.col-xs-0{display: block;}.col-sm-12 {grid-column: span 12}.col-sm-11 {grid-column: span 11}.col-sm-10 {grid-column: span 10}.col-sm-9 {grid-column: span 9}.col-sm-8 {grid-column: span 8}.col-sm-7 {grid-column: span 7}.col-sm-6 {grid-column: span 6}.col-sm-5 {grid-column: span 5}.col-sm-4 {grid-column: span 4}.col-sm-3 {grid-column: span 3}.col-sm-2 {grid-column: span 2}.col-sm-1 {grid-column: span 1}
}

@media (min-width: 992px) {
.col-xs-0{display: block;}.col-md-12 {grid-column: span 12}.col-md-11 {grid-column: span 11}.col-md-10 {grid-column: span 10}.col-md-9 {grid-column: span 9}.col-md-8 {grid-column: span 8}.col-md-7 {grid-column: span 7}.col-md-6 {grid-column: span 6}.col-md-5 {grid-column: span 5}.col-md-4 {grid-column: span 4}.col-md-3 {grid-column: span 3}.col-md-2 {grid-column: span 2}.col-md-1 {grid-column: span 1}
}

@media (min-width: 1200px) {
.col-xs-0{display: block;}.col-lg-12 {grid-column: span 12}.col-lg-11 {grid-column: span 11}.col-lg-10 {grid-column: span 10}.col-lg-9 {grid-column: span 9}.col-lg-8 {grid-column: span 8}.col-lg-7 {grid-column: span 7}.col-lg-6 {grid-column: span 6}.col-lg-5 {grid-column: span 5}.col-lg-4 {grid-column: span 4}.col-lg-3 {grid-column: span 3}.col-lg-2 {grid-column: span 2}.col-lg-1 {grid-column: span 1}
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: .65s;
  animation-iteration-count: 1; 
}
.bounceInLeft {
  animation-name: bounceInLeft;
  animation-duration: 1.25s;
  animation-iteration-count: 1; 
}
.bounceInRight {
  animation-name: bounceInRight;
  animation-duration: 1.25s;
  animation-iteration-count: 1; 
}

/* icon svg anim */
.clock-big,.clock-lit,.phone{
	transform-origin: 60px 60px;
}
.clock-big{
	animation: 40s clockspin infinite linear;
}
.clock-lit{
	animation: 10s clockspin infinite linear;
}
@keyframes clockspin{
	0%{transform: rotate(0deg)}
	100%{transform: rotate(360deg)}
}

.truck-arm{
	transform-origin: 65px 60px;
	animation: 6s armMove infinite ease-in-out;
}
.truck{
	animation: 6s truckMove infinite linear;
}
.truck-cup{
	transform-origin: 30px 65px;
	animation: 6s cupMove infinite ease-in-out;
}
@keyframes armMove{
	0%,100%{transform: rotate(0deg)}
	50%{transform: rotate(-30deg)}
}
@keyframes cupMove{
	0%,100%{transform: rotate(0deg)}
	50%{transform: rotate(140deg)}
}
@keyframes truckMove{
	0%,100%{transform: translate(0,0)}
	25%{transform: translate(-5px,0)}
	75%{transform: translate(5px,0)}
}

.ear-wave-1,.ear-wave-2,.ear-wave-3,.mail-arrowbase,.mail-letter{
	transform-origin:50% 50%;
}
.ear-wave-1{
	animation: 2s waveM1 infinite linear;
}
.ear-wave-2{
	animation: 2s waveM2 infinite linear;
}
.ear-wave-3{
	animation: 2s waveM3 infinite linear;
}
.ear{
	transform-origin:30px 60px;
	animation: 4s earMove infinite linear;
}
@keyframes waveM1{
	00%,100%{transform: translate(0,0)}
	050%{transform: translate(10px,-5px)}
}
@keyframes waveM2{
	00%,100%{transform: translate(0,0)}
	50%{transform: translate(10px,0)}
}
@keyframes waveM3{
	00%,100%{transform: translate(0,0)}
	050%{transform: translate(10px,5px)}
}
@keyframes earMove{
	00%,050%,100%{transform: scale(1)}
	025%,075%{transform: scale(1.1)}
}

.phone-screen{
	animation: 4s screenCall infinite ease;
}
.phone{
	animation: 2s phoneCall infinite linear;
}
@keyframes phoneCall{
	00%,20%,40%,100%{transform: rotate(0deg)}
	10%{transform: rotate(-3deg)}
	30%{transform: rotate(3deg)}
}
@keyframes screenCall{
	00%,20%,40%,100%{fill:none}
	10%,30%{fill: rgba(255,255,255,0.3)}
}

.house{
	stroke-dasharray:200;
	animation: 4s houseDraw infinite linear;
}
@keyframes houseDraw{
	0%{stroke-dashoffset:200}
	100%{stroke-dashoffset:0}
}

.mail-arrowbase{
	animation: 4s arrowbaseScale infinite linear;
}
.mail-letter{
	animation: 4s sendMail infinite linear;
}
@keyframes arrowbaseScale{
	30%,50%{transform:scale(1);opacity:1}
	40%{transform:scale(1.3)}
	0%,60%,100%{opacity:0}
}
@keyframes sendMail{
	0%,45%{opacity:0}
	55%{transform:scale(1);opacity:1}
	90%,100%{transform:scale(0)}
}

/*---Hide reCaptcha v3 visible seal---*/
.grecaptcha-badge,time.updated,.screen-reader-text,.nav-subtitle,svg.icon {
display: none !important;opacity:0 !important;visibility: collapse !important; 
}
.post-navigation{min-height: 200px;}
.entry-footer span,.entry-footer,.entry-meta {display: block;font-size: small;}
.nav-previous{float: left;margin: 5%;}
.nav-next{float: right;margin: 5%;}