body {
	    font-family: 'Noto Sans', sans-serif;
	    color: #28346A;
	}
	
@media screen and (min-width: 990px) {
	.wrapper-global {
	    display: flex;
	    flex-wrap: wrap;
	}
	.head {
	    order: 2;
	    width: 430px;
	    background: #D23230;
	}
		
	.main {
	    order: 1;
	    width: calc(100% - 430px);
	}
	
	.wrapper-header {
		position: fixed;
		top: 0;
		bottom:0;
		right: 0;
		max-width: 430px;
		width: 100%;
		background: #D23230 url(../img/arrow-menu.png) no-repeat right center;
	}
	
}

	 
	.head .wrapper-header .logo {
	    margin: auto;
	    text-align: center;
	    margin-top: 71px;
	    margin-bottom: 75px;
	}
	
	.head .wrapper-header .main-menu {
	    margin: 0;
	    padding: 0;
	    font-family: 'Raleway', sans-serif;
	    list-style: none;
	    text-align: center;	
	
	}
	
	.head .wrapper-header .main-menu li {
	    margin: 0 0 40px;
	}
	
	.head .wrapper-header .main-menu a {
	    color: #fff;
	    text-decoration: none;
	    color: #FFFFFF;
	    font-family: Raleway;
	    font-size: 20px;
	    font-weight: 300;
	    letter-spacing: 0.92px;
	    line-height: 40px;
	    text-align: center;
	}
	.respo-menu{
		display:none;
	}
	.resp-logo {display:none}
	.foot {
	    height: 50px;
	    padding-top: 10px;
	    color: #FFFFFF;
	    font-family: "Noto Sans";
	    font-size: 14px;
	    letter-spacing: 1px;
	    line-height: 25px;
	    text-align: center;
	    width: 100%;
	    background-color: #28346A;
	}
	.foot a ,.foot a:hover{
		color: #FFFFFF;
	   text-decoration:none;
	}
	
	.d-flex {
	    display: flex;
	}
	
	h2 {
	    color: #D23230;
	    font-family: Raleway;
	    font-size: 60px;
	    font-weight: 600;
	    letter-spacing: 1.6px;
	    line-height: 70px;
	}
	
	#section-top img {
	    max-width: 100%;
	}
	
	#section-1 {
	    padding: 0 30px;
	}
	
	#section-1 .wrapper {
	    max-width: 1440px;
	    padding-bottom: 110px;
	    border-bottom: 1px solid #28346A;
	    margin: 100px auto 80px;
	}
	
	#section-1 .d-flex {
	    margin-left: -25px;
	}
	
	#section-1 .d-flex .block {
	    width: calc( (100% - 324px) * 1/2 - 25px);
	    margin-left: 25px;
	}
	
	#section-1 .d-flex .block-1 p {
	    font-size: 24px;
	    line-height: 33px;
	}
	
	#section-1 .d-flex .block-2 p {
	    font-size: 15px;
	    line-height: 20px;
	}
	
	#section-1 .d-flex .block-3 {
	    width: 324px;
	    text-align: right;
	}
	
	#section-1 .d-flex .block-3 img {
	    max-width: 100%;
	}
	
	
	#section-2 {
	    margin-bottom: 80px;
	}
	#section-2 .block{
	    width: calc( 100% * 1/2);
	}
	#section-2 .wrapper-image {
	    margin-right: 70px;
		height:100%;
		max-height:912px;
		overflow:hidden;
	}
	#section-2 .wrapper-image img {
	    width:100%;
		height:100%;
		object-fit:cover;
	}
	
	#section-2 .block-txt {
	    font-size: 20px;
	    line-height: 30px;
	    border-bottom: 1px solid #28346A;
	    margin-right: 80px;
	}
	
	#section-2 .ctn {
	    font-size: 17px;
	    line-height: 24px;
	}
	
	.wrapper-list-quest {
	    position: relative;
	}
	
	.list-quest.d-flex {
	    margin-left: -25px;
	    flex-wrap: wrap;
	}
	
	.list-quest.d-flex > * {
	    width: calc(100% * 1/2 - 25px);
	    margin-left: 25px;
	   
	}
	
	.list-quest.d-flex .item-title {
	    margin-bottom: 30px;
	    width: 100%;
	    align-items: center;
	    padding-left: 20px;
	    background-color: #28346A;
	    display: inline-flex;
	    height: 80px;
	    color: #FFFFFF;
	    font-family: "Fira Sans";
	    font-size: 20px;
	    font-weight: 600;
	    line-height: 29px;
	}
	
	.list-quest.d-flex .item-title:before {
	    height: 52px;
	    width: 52px;
	    content: '';
	    display: inline-block;
	    margin-right: 20px;
	    background-repeat: no-repeat;
	    background-position: center center;
	}
	
	.list-quest.d-flex .item-title.item-plomb:before {
	    background-image: url(../img/icons/drop_wh.png);
	}
	
	.list-quest.d-flex .item-title.item-chauf:before {
	    background-image: url(../img/icons/plumbing_wh.png);
	}
	
	.list-quest.d-flex .item-title.item-elect:before {
	    background-image: url(../img/icons/bolt_wh.png);
	}
	
	.list-quest.d-flex .item-title.item-clim:before {
	    background-image: url(../img/icons/aircon_wh.png);
	}
	
	.list-quest.d-flex p {
	    margin: 0;   margin-bottom: 20px;
	    font-size: 16px;
	    line-height: 26px;
	    text-align: justify;
	}
	
	.list-quest .wrapper-item{	  
	   position:relative;
	   overflow:hidden;
	}
	 
	.list-quest .quest {
	  position:absolute;
	  top:0;
	  left:200%;
	  transition: left 0.5s linear;
	    
	}
	.list-quest .quest.current {
		position:relative;
		left:0;
	}
	.actions-quest {
	    position: absolute;
	    right: -40px;
	    top: 70px; 
	}
	
	.actions-quest ul {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	}
	
	.actions-quest ul li {
	    height: 17.85px;
	    width: 17.85px;
	    border-radius: 50%;
	    margin-bottom: 10px;
	    border: 3px solid #28346A;
		 background: #fff;
		cursor:pointer;
			-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-moz-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-o-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000); /* easeOutQuint */
		
	}
	
	.actions-quest ul li:hover,
	.actions-quest ul li.current {
	    background: #28346A;
	}
	
	#section-3 {
	    margin-left: 80px
	}
	
	#section-3 .wrapper-ctn {
	    margin-bottom: 80px
	}
	
	#section-3 .wrapper-thumb {
	    flex-direction: column;
	    justify-content: space-between;
	    margin-right: 20px;
		margin-top:-20px;
		max-height:715px;
	}
	#section-3 .wrapper-thumb  > *{
	  height:calc(100% * 1/4 - 0px );
	  margin-top: 20px;  overflow: hidden;
	}
	
	#section-3 .wrapper-thumb img {
	    cursor: pointer;
		width:100%;
		height:100%;
		object-fit:cover;
		max-height:100%;
	}
	#section-3 .wrapper-zoom img {
	    max-width:100%;
	}
	
	#section-contact {
	    padding: 100px 0px 0px;
	    margin: 0px 80px;
	    background-image: url(../img/pattern_02.jpg);
	    background-repeat: no-repeat;
	    background-position: top right;
	}
	
	#section-contact h2 {
	    margin-bottom: 40px;
	}
	
	#section-contact .location {
	    margin-bottom: 40px;
	}
	
	#section-contact .location strong {
	    display: inline-block;
	    margin: 0 20px;
	}
	
	#section-contact .d-flex {
	    margin-left: -15px;
	}
	
	#section-contact .d-flex > div {
	    width: calc(100% * 1/2 - 10px);
	    margin-left: 10px;
	}
	
	#section-contact .d-flex > div:last-child {
	    margin-top: 15px;
	}
	
	#section-contact form {
	    max-width: 1080px;
		width: calc(100% - 230px);
		margin-bottom: 0;
		padding-bottom:20px;
	}
	
	#section-contact .form-group {
	    margin-top: 15px;
	    display: flex;
		background:#fff;
	    border: 1px solid #E5E5E5;
	    padding: 8px 5px;
	    font-size: 14px;
	    line-height: 19px;
	    position: relative;
	}
	
	#section-contact .form-group label {
	    margin: 0;
	    margin-left: 10px;
	}
	
	#section-contact .form-group input {
	    margin: 0;
	    padding: 0 5px;
	    border: none;
	    flex: 1;
	    color: #333
	}
	
	#section-contact .form-textarea {
	    padding: 5px;
	    display: flex;
	    flex-direction: column;
	    margin-bottom: 15px;
	    height: 100%;
	    font-size: 14px;
	    line-height: 19px;
	    border: 1px solid #E5E5E5;
		min-height:190px;
	}
	
	#section-contact .form-textarea label {
	    display: block;
	    width: 100%
	}
	
	#section-contact .form-textarea textarea {
	    flex: 1;
	    width: 100%;
	    border: none;
	}
	
	#section-contact button {
	    float: right;
	    width: 160px;
	    background-color: #28346A;
	    border-color: #28346A;
	    padding: 5px;
	    color: #fff;
	    font-size: 14px;
	    line-height: 25px;
	    text-align: center;
			-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-moz-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-o-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000); /* easeOutQuint */
		
	}
	#section-contact button:hover {
	    background-color: #fff;
	    color: #28346A;
	}
	
	.wrapper-rgpd {
	    position: relative
	}
	
	.wrapper-rgpd label {
	    display: inline;
	}
	
	label.error {
	    position: absolute;
	    bottom: -12px;
	    left: 0px;
	    color: red;
	    font-size: 10px;
	    background: top;
	}
@media screen and (max-width: 1680px) {
	.head {
	    width: 300px;
	    
	}
	
	.main {
	   width: calc(100% - 300px);
	}
	
	
	.wrapper-header {
		
		max-width: 300px;
	}
	
	.head .wrapper-header .logo img {
	   max-width:220px;
	}
	h2 {
	    font-size: 40px;
	    letter-spacing: 1.4px;
	    line-height: 50px;
	}
	#section-1 .wrapper {
		padding-bottom:50px; 
		margin:50px auto 60px;
	}
	#section-2 .wrapper-image {
	    margin-right: 20px;
	}
	
	.list-quest.d-flex .item-title {
		margin-bottom: 20px;
		padding-left: 10px;
		height: 60px;
	}
	#section-2 .block-txt {
		 margin-right: 40px;
	}
	.actions-quest {
		right: -30px;
		
	}
} 
@media screen and (max-width: 1440px) {
	 
	.head {
	    width: 250px;
	    
	}
	.wrapper-header {
		
		max-width: 250px;
	}
	
	.main {
	   width: calc(100% - 250px);
	}
	.head .wrapper-header .logo img {
	   max-width:180px;
	}
	
	#section-2 .ctn,
	.list-quest.d-flex p {
		font-size: 15px;
		line-height: 20px;
	}
	 
	.list-quest.d-flex .item-title {
		
		font-size: 14px;
		line-height: 20px;
	}
	.list-quest.d-flex .item-title::before {
		height: 40px;
		width: 40px;		
		background-size: contain;
		margin-right:10px;
	}
	.list-quest.d-flex .resp {
		font-size: 13px;
		line-height: 20px;
		
	}
}

@media screen and (max-height: 800px) {
	head .wrapper-header .logo img {
		max-width: 150px;
	}
	.head .wrapper-header .main-menu li {
		margin: 0 0 15px;
	}
}	

@media screen and (max-width: 1280px) {
	
	
	#section-1 .d-flex  {
		flex-wrap:wrap;
		margin-left:0;
	}
	#section-1 .d-flex .block-1 {
		width: calc(100% - 257px );
		margin-left:0;
	}
	#section-1 .d-flex .block-2 {
		width:100%;
		margin-left:0;
		margin-bottom:30px;
		order:4;
		 
	}
	#section-1 .d-flex .block-3 {
		width: 257px;
		text-align: right;
		margin-left:0;
		margin-bottom:30px;
	}
		
	#section-3 {
	    margin-left: 30px
	}
	
	#section-contact .wrapper-ctn {
		width: calc(100% - 230px);
	}
	#section-contact {
		padding: 40px 0px;
		margin: 0px 30px;
		
	}
	
	#section-contact form {
		max-width: 600px;
	}
	
	
	#section-contact .d-flex {
		flex-wrap:wrap;
	}
	#section-contact .d-flex > div {
		width: calc(100% * 1/1 - 10px);
		margin-left: 10px;
	}
	
	
	#section-contact .location {
		max-width: 290px;
		margin-bottom:0px;
	}
	#section-contact .location img {
		margin-bottom:20px;
	}
}

@media screen and (max-width: 1125px) {
	
	#section-2 .d-flex {
		flex-wrap:wrap;
	}
	#section-2 .block {
		width: 100% ;
		max-width:800px;padding:30px; margin:auto;
	}	
	#section-2 .wrapper-image {
		margin-right: 0px;
	}
}
@media screen and (max-width: 990px) {
	
	.head {
	    position:fixed;
		height:60px;
		left:0;
		right:0;
		top:0;
		width: 100%;
	    background: #D23230 url(../img/arrow-menu.png) no-repeat right center;
		z-index: 2; 
	}
	.main {
	    padding-top:60px;
		max-width:800px;
		width:100%;
		margin:auto;
	}
	#section-contact form {
		max-width: 480px;
	}
	
	.wrapper-menu{
			-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-moz-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-o-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000); /* easeOutQuint */
		
		position:absolute;transform:translate(100%,0);right:0;padding:20px;background:#D23230; top:48px;padding-top:60px;padding-bottom:40px; }
	
	.wrapper-menu.open{ transform:translate(0,0) ;  }
	
	
	.head .wrapper-header .main-menu li {
	    margin: 0 0 20px;
	}
	
	
	.head .wrapper-header .logo {
		margin:0px;
		padding:5px;
		
	}
	.head .wrapper-header .logo img {
		max-height: 50px;
	}
	.resp-logo {display:initial}
	.desk-logo {display:none}
	
	.respo-menu {
		background-image: url('../img/icon-menu.png');
		width:28px;
		height:28px;
		background-repeat:no-repeat;
		background-position:center;
		display:block;
		color:#fff;
		position:absolute;
		right:15px;
		top:15px;
		font-size: 28px;
		cursor:pointer;
		}
 			
}

 
@media screen and (max-width: 769px) {
	.wrapper-menu{ width:100%;max-width:initial; }
	#section-3 {
		margin-left: 0px;
	}
	
	
	#section-contact {
		padding: 40px 0px;
		margin: 0px 30px;
		background-image: url(../img/pattern_02.jpg);
		background-position: top 0 right -100px;
	}
	#section-contact form ,
	#section-contact .wrapper-ctn {
		width: calc(100% - 130px);
	}
	 
	
	
}

@media screen and (max-width: 575px) {
	
	#section-1 {
		padding: 0 15px;
	}
	#section-2 .block {
		padding:20px 15px;
	}
	
	
	#section-1 .d-flex .block-1 {
		width:100% ; 
	}
	#section-1 .d-flex .block-2 {
		width:100%;
		order:2;
		 
	}
	#section-1 .d-flex .block-3 {
		width: 100%;
		order:3;
		text-align: center;
	}
	
	#section-3 h2 {
		margin-left: 15px;
	}
	#section-contact {
		background-image:none;
		margin: 0 15px;
	}
	#section-contact form ,
	#section-contact .wrapper-ctn {
		width:100%;
	}
	 
	.list-quest.d-flex { margin-top:40px;}
	
	.actions-quest {
		position: absolute;
		right: initial;
		top: -30px;
		left:50%;
		transform: translate(-50%, 0);
	}
	.actions-quest ul {

		display: flex;

	}
	.actions-quest ul li{

		margin:0 5px;
	}
	#rc-imageselect,
    .g-recaptcha {
        transform:scale(0.77);
        transform-origin:0;
        transform:scale(0.77);
        transform-origin:0 0;
        -webkit-transform:scale(0.77);
        transform:scale(0.77);
        -webkit-transform-origin:0 0;
        transform-origin:0 0;
    }
	
}

@media screen and (max-width: 420px) {
	.list-quest.d-flex > * {
		width: calc(100% * 1/1 - 25px);
		margin-left: 25px;
	}
	h2 {
	    font-size: 30px;
	    letter-spacing: 1.2px;
	    line-height: 35px;
	}
}