*, *:before,*:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

body{color:#000; margin: 0; padding: 0; text-align: center;}
html{background-color:#FFF; font: 300 20px 'Open Sans', sans-serif; line-height: 1.35rem}

a:link, a:visited{color: #17529e; text-decoration:none;}
a:focus{outline: 0;}
a:hover{color: #5d3f8f;}

a, i, span, .action, iframe, header, header img, #fond-intro img, #realisations #lstrea .rea img{-webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s;}

a img{border:none;}

p, ul, li, hr, h1, h2, h3, h4, h5, h6, form{margin: 0; padding: 0;}

h1{font: 400 2rem/2.2rem 'Montserrat', sans-serif; margin-bottom: 1.5rem;}
h1 span, h2 span, h3 span{color: #17529e}
h2{font: 400 1.8rem/2rem 'Montserrat', sans-serif; margin-bottom: 1.5rem;}
h3{font: 400 1.9rem/2.1rem 'Montserrat', sans-serif; margin-bottom: 1.2rem;}
h2:after, h3:after{content:""; background-color:#161616; display: block; height:1px; margin: 1rem auto 1.5rem auto; width: 6%}
h4{font: 400 1.4rem/1.6rem 'Montserrat', sans-serif; margin-bottom: .8rem;}
h5{font: 400 1rem/1.1rem 'Montserrat', sans-serif; margin-bottom: .3rem;}

p{font-size: .9rem; margin-bottom: 1rem;}

input, select, textarea{background-color:#FBFBFB; border:1px solid #999; font-size:1rem; padding:1px;}

.action{background-color: #5d3f8f; border: none; border-radius: 20px; color: #FFF!important; cursor: pointer; font-weight: 300; padding: .5rem 1.2rem;}
.action:hover{background-color: #221737; color: #FFF;}

.ws{white-space : nowrap;}

header{background-color: rgba(0, 0, 0, .94); color: #FFF; left: 0; padding: 1.5rem 0; position: fixed; right: 0; text-align: center; top: 0; z-index: 2}
header.sticky{background-color: rgba(0, 0, 0, .98); padding: 1rem 0;}
header .logo img{display: block; margin: 0 auto;}
header.sticky .logo img{height: auto; width: 250px}

.menu-expand-wrapper{position: absolute; right: 50px; top: 65px; z-index: 1000}
header.sticky .menu-expand-wrapper{top: 35px;}
.menu-expand-wrapper .menu-expand{border: 2px solid rgba(255, 255, 255, .8); border-radius: 25px; cursor: pointer; display: block; height: 50px; transition: all .5s cubic-bezier(.19,1,.22,1) 0s; width: 50px;}
.menu-expand-wrapper .menu-expand:hover{border: 2px solid rgba(255, 255, 255, 1);}
.menu-expand-wrapper .menu-expand .menu-expand-lines{display: inline-block; height: 50px; position: relative; width: 50px;}
.menu-expand-wrapper .menu-expand .menu-expand-lines::after, .menu-expand-wrapper .menu-expand .menu-expand-lines::before{content: ""; background: rgba(255, 255, 255, .8); display: block; height: 2px; left: 11px; position: absolute; transform-origin: 50% 50%; transition: all .3s cubic-bezier(.645, .045, .355, 1) 0s; margin: 0; width: 25px;}
.menu-expand-wrapper .menu-expand .menu-expand-lines::before{top: 18px;}
.menu-expand-wrapper .menu-expand .menu-expand-lines::after{top: 28px;}

.expanded-menu{background: rgba(27, 27, 27, .99); display: block; height: 100%; padding: 1rem 2rem; position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform .65s cubic-bezier(.645, .045, .355, 1) 0ms; width: 35rem; z-index: 10000;}
.expanded-menu.open{transform: translateX(0);}
.expanded-menu img{margin: 1.7rem 0 3.8rem 0; max-width: 100%;}
header.sticky .expanded-menu img{height: auto; margin: .5rem 0 2.5rem 0; width: 200px;}
.expanded-menu #close_menu{color: rgba(255, 255, 255, .8); cursor: pointer; display: none; font-size: 2.5rem; position: absolute; right: 50px; top: 65px;}
header.sticky .expanded-menu #close_menu{top: 35px;}
.expanded-menu #close_menu:hover{color: rgba(255, 255, 255, 1);}
.expanded-menu nav ul{list-style: none;}
.expanded-menu nav ul li.item{font: 300 1.25rem 'Montserrat', sans-serif; margin-bottom: 2rem; position: relative; text-align: left;}
.expanded-menu nav ul li.ssitem{margin-left: 2rem; margin-top: -.8rem;}
.expanded-menu nav ul li a{color: #FFF; text-decoration: none;}
.expanded-menu nav ul li a:hover{color: #b4daf8}
.expanded-menu nav ul li span{color: #FFF; cursor: pointer}
.expanded-menu nav ul li span:hover{color: #b4daf8}
.expanded-menu nav ul li.item::before, .expanded-menu nav ul li.ssmenu span::before{content: ""; background-color: #7350a7; border-radius: 7px; display: inline-block; height: 12px; margin-right: 1rem; vertical-align: middle; width: 12px;}
.expanded-menu nav ul li.ssitem::before{background-color: #b4daf8;}

input[type="text"], input[type="password"], textarea{background-color: rgba(255, 255, 255, 0); border-top: none; border-left: none; color: #111; font-size: 1rem; outline: 0; position: relative; padding: .5rem 1.2rem .2rem 0; width: 100%; z-index: 2;}
input[type="text"], input[type="password"]{border-right: none;}
textarea{height: 160px;}

.anim{opacity: .1}
.scale{opacity: 0; transform: scale(0); transition: all 1s;}
.scale.animate{opacity: 1; transform: scale(1);}

.form{margin-bottom: 2rem; position: relative;}
.form input, .form textarea{border-bottom-width: 1px; border-right-width: 1px;}
.form.input label, .form.textarea label{color: #78808a; font-size: .9rem; left: 0; padding: .5rem 0; position: absolute; top: 0;}
.form.input label span.info{font-size: .75rem;}
.form .message_error{color: #ff5a64; margin-bottom: 1rem; margin-top: .4rem; font-size: .75rem; font-weight: bold;}
.form.saisie label{color: #17529e; font-size: .75rem; top: -1.7rem;}
.form.saisie input[type="text"]{border-bottom-color: #17529e;}
.form.saisie textarea{border-bottom-color: #17529e; border-right-color: #17529e;}
.form.error label, .form.error i, .form.error select, .form .error.checkbox{color: #ff5a64;}
.form.error input[type="text"]{border-bottom-color: #ff5a64;}
.form.error textarea{border-bottom-color: #ff5a64; border-right-color: #ff5a64;}

.loader{animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite; border: 16px solid #f1f1f1; border-bottom: 16px solid #17529e; border-top: 16px solid #17529e; border-radius: 50%; height: 45px; width: 45px;}
@keyframes spin{0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg); } 100% {-webkit-transform: rotate(360deg);}}

#accueil{padding: 0 2rem}

#fond-intro img{-webkit-filter: grayscale(100%); filter: grayscale(100%); height: auto; width: 100%}
#fond-intro img:hover{-webkit-filter: grayscale(0%); filter: grayscale(0%);}

section{margin: 2rem 0 3rem 0}

#services #lstservices{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 1.5rem; padding: 0 .5rem}
#services #lstservices .service{background-color: #000; color: #FFF; margin-bottom: 2rem; padding: 2rem 4rem; width: 30%}
#services #lstservices .service i{color: #b4daf8; display: block; font-size: 3rem; margin: 0 auto 2rem 0;}
#services #lstservices .service h4{color: #266cc0; font-size: 1.2rem}
#services #lstservices .service p{font: .85rem; text-align: center!important}

#realisations h4 i{color: #17529e; font-size: 1.1rem; margin-right: .5rem}
#realisations #lstrea{background-color: #EEE; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1.5rem 0; padding: 1rem}
#realisations #lstrea .rea{margin-bottom: 1rem; width: 48%}
#realisations #lstrea .rea img{-webkit-filter: grayscale(100%); filter: grayscale(100%); width: 100%;}
#realisations #lstrea .rea img:hover{-webkit-filter: grayscale(0%); filter: grayscale(0%);}
#realisations #lstrea .rea h4{margin: 1rem 0 .4rem 0}
#realisations #lstrea .rea h5{font-size: .85rem}
#realisations #lstrea .rea .plus{text-align: center!important;}
#realisations #lstrea .rea .plus a{font-weight: 400}
#realisations #lstrea .rea .desc{display: none}
#realisations #lstrea .rea .desc .intro{font-weight: 400}
#realisations #lstrea .rea .desc .intro::before{content: ""; background-color: #17529e; border-radius: 7px; display: inline-block; height: 12px; margin-right: 1rem; vertical-align: middle; width: 12px;}
#realisations #lstrea .rea .desc .link{margin-top: 2rem; text-align: center!important;}
#realisations #lstlogos{background-color: #000; margin: 1.5rem 0; padding: 2rem 1rem;}
#realisations #lstlogos #carousel{position: relative;}
#realisations #lstlogos #carousel .imageup{bottom: 0; left: 0; position: absolute; right: 0; top: 0;}
#realisations #lstlogos #carousel img{height: auto; max-width: 100%; width: 750px}
#realisations #lstlogos #carousel .description{color: #FFF; font: 300 1.15rem/1.3rem 'Indie Flower', cursive; margin-top: 1.5rem}
#realisations #logos_cache{display:none}
#realisations #lstphotos{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1.5rem 0;}
#realisations #lstphotos .photo{background-color: #000; margin-bottom: 1.5rem; padding: 1.5rem; width: 49%}
#realisations #lstphotos .photo img{height: auto; max-width: 100%; width: 100%;}

#contact .tel{text-align: center!important;}
#contact .tel a{color: #17529e; font: 600 2rem 'Montserrat', sans-serif;}
#contact .tel a:hover{color: #000}
#contact #form{margin: 2rem auto 0 auto; width: 85%}
#contact #form > div{align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: .5rem;}
#contact #form .form{width: 48%}
#contact #form .onecolumn .form{width: 100%}
#contact #form .action{display: block; margin: 0 auto;}
#contact #form .loader{display: none; margin: 0 auto;}
#contact #form .message_end{color: #17529e; display: none; font: 400 1rem 'Indie Flower', cursive; margin-top: .6rem; text-align: center;}

footer{background-color: #000; color: #AAA; font-size: .75rem; padding: .8rem 1rem; text-align: center;}
footer #signature span{padding: 0 .2rem;}


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

	#services #lstservices{padding: 0}
	#services #lstservices .service{width: 32%}
	#services #lstservices .service{margin-bottom: 1rem;}

}

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

	#services #lstservices .service{padding: 2rem; width: 48%}

}

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

	#contact #form{width: 100%}

}

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

	html{font-size: 18px}

}

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

	#services #lstservices .service{margin: 0 auto 1rem auto; width: 70%}

	#realisations #lstrea{background-color: inherit; padding: 0}
	#realisations #lstrea .rea{width: 100%}

	#realisations #lstphotos .photo{padding: 1rem; width: 100%}

}

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

	header .logo img{height: auto; width: 250px}
	header .menu-expand-wrapper{right: 25px; top: 35px;}

	#contact #form > div{margin-bottom: 0}
	#contact #form div.form{width: 100%}

}

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

	.expanded-menu{padding: 1.5rem; width: 100%;}
	.expanded-menu #close_menu{right: 30px;}
	.expanded-menu nav ul li{margin-bottom: 1.5rem}

	section{margin: 1.5rem 0 2rem 0}
	section p{text-align: justify;}

	#services #lstservices .service{width: 100%}

	#realisations #lstphotos .photo{padding: .3rem;}

}

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

	#fond-intro img{visibility: hidden;}

}

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

	header .logo img{width: 190px!important;}
	header .menu-expand-wrapper{right: 10px; top: 35px!important;}
	header.sticky .menu-expand-wrapper{top: 16px!important;}

}