@import url('https://fonts.googleapis.com/css2?family=Rasa:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

*, body, html {
   padding:0;
   margin:0;
}

body {
   font-family:'Rasa', serif;
   font-size:21px;
   line-height:30px;
   overflow-x:hidden;
   text-align:justify;
}

a {
   text-decoration:none;
   transition:0.2s;
}

a:hover,
a:focus {
   color:#90bfff;
   transition:0.2s;
}

header,
nav,
main,
section,
input,
footer,
label,
img,
figure,
figcaption {
   display:block;
}

img {
   max-width:100%;
   height:auto;
}

video {
   position:relative;
   width:100%;
   height:auto;
   min-width:1150px;
   z-index:8;
}

figcaption {
   margin-top:12px;
}

p {
   margin-bottom:30px;
   text-indent:20px;
}

p:last-child {
   margin-bottom:0;
}

h1 {
   font-size:70px;
   font-weight:400;
   line-height:86px;
   color:#000;
   text-align:center;
}

h2 {
   font-family:'Racing Sans One', cursive;
   font-size:46px;
   font-weight:400;
   font-style:italic;
   text-align:left;
   line-height:58px;
   color:#000;
   text-transform:uppercase;
   margin-bottom:30px;
}

.bleu {
   text-align:center!important;
   font-size:55px!important;
   color:#88b9f5!important;
   text-shadow:2px 2px 4px #000, 0px 0px 6px #000;
}

h3 {
   font-family:'arial', helvetica, sans-serif;
   font-size:28px;
   line-height:40px;
   text-transform:uppercase;
   margin-bottom:20px;
}

h4 {
   font-family:'arial', helvetica, sans-serif;
   font-weight:700;
   font-size:20px;
   line-height:30px;
   text-transform:uppercase;
}

h5 {
   font-family:'Racing Sans One', cursive;
   font-size:30px;
   line-height:20px;
   font-style:italic;
   text-align:center;
   text-transform:uppercase;
   margin-top:-25px;
   padding-bottom:20px;
}



.projets-001 {
font-family:'arial', helvetica, sans-serif;
font-weight:600;
font-size:20px;
line-height:1.10;
font-style:italic;
margin:0 auto 20px auto;
text-transform:uppercase;
text-align:center;
display:block;
}


main {
   position:relative;
}

.row {
   display:-ms-flexbox;
   display:flex;
   -ms-flex-wrap:nowrap;
   flex-wrap:nowrap;
   width:100%;
}

.flex {
   display:flex;
}

.container {
   max-width:1800px;
   width:100%;
   margin:0 auto;
   padding:0 40px;
   box-sizing:border-box;
}

.container-1920 {
   max-width:1920px;
   width:100%;
   margin:0 auto;
   padding:0 10px;
   box-sizing:border-box;
}

.col-2 {
   max-width:50%;
   width:100%;
   float:left;
}

.col-3 {
   max-width:33.3333%;
   width:100%;
   float:left;
}

input {
   width:100%;
   max-width:300px;
   height:32px;
   padding:0 10px;
   box-sizing:border-box;
   border:1px solid #cacaca;
}

input[type="submit"] {
   background-color:#32415c;
   max-width:300px;
   height:50px;
   margin-top:38px;
   border:none;
   color:#fff;
   padding:8px 16px;
   text-align:center;
   text-decoration:none;
   display:block;
   font-size:14px;
   cursor:pointer;
   text-transform:uppercase;
   transition:0.2s;
}

input[type="submit"]:hover {
   max-width:240px;
   background-color:#4f6a99;
   transition:0.2s;
}

label {
   margin-top:20px;
   padding-bottom:8px;
}

textarea {
   width:100%;
   max-width:300px;
   height:120px;
   padding:6px 10px;
   box-sizing:border-box;
   border:1px solid #cacaca;
}



.opacity {
   opacity:0;
   transition:3s;
}

.opacity.active {
   opacity:1;
   transition:3s;
}

.opacity_2 {
   opacity:0;
   transition:5s;
}

.opacity_2.active {
   opacity:1;
   transition:5s;
}

.droite {
   opacity:0;
}

.droite.active {
   animation:droite 0.75s forwards;
}

@keyframes droite {
   from {
      -webkit-transform:translateX(120%);
      transform:translateX(120%);
      opacity:0;
   }
   to {
      -webkit-transform:translateX(0);
      transform:translateX(0);
      opacity:1;
   }
}

.gauche {
   opacity:0;
}

.gauche.active {
   animation:gauche 0.75s forwards;
}

@keyframes gauche {
   from {
      -webkit-transform:translateX(-120%);
      transform:translateX(-120%);
      opacity:0;
   }
   to {
      -webkit-transform:translateX(0);
      transform:translateX(0);
      opacity:1;
   }
}


.zoom {
display:block;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

.zoom:hover  {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}


.push img{
display:block;
}

.push:hover  img{
animation:0.6s push forwards;
}

@keyframes push {
	0% { transform: scale(1);}
	50% { transform: scale(0.65);}
	100% { transform: scale(1);}
}




.grossissant {
   transform:scale(0);
}

.grossissant.active {
   animation:0.8s grossissant forwards;
}

@keyframes grossissant {
   from {
      transform:scale(0);
   }
   to {
      transform:scale(1);
   }
}

.grossissant_2 {
   transform:scale(0);
}

.grossissant_2.active {
   animation:2.5s grossissant-2 forwards;
}

@keyframes grossissant-2 {
   from {
      transform:scale(0);
   }
   to {
      transform:scale(1);
   }
}

.haut-page {
   background-image:url('images/structure_fond_001.jpg');
   background-repeat:repeat;
   height:300px;
}

.logo {
   position:relative;
   top:78px;
   margin:0 auto;
   max-width:450px;
   width:100%;
}

/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Header
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

header {
   background-color:rgba(25,32,47,0.85);
   opacity:0;
   line-height:85px;
   position:fixed;
   width:100%;
   top:0;
   z-index:999;
   transition:0.2s;
}

header nav ul {
   text-align:center;
}

header nav ul li {
   display:inline-block;
   margin:0 10px;
   font-family:'arial', helvetica, sans-serif;
   font-weight:bold;
   font-size:15px;
   text-transform:uppercase;
}

header nav ul li a {
   color:#fff;
   text-decoration:none;
   transition:2s;
}

header ul li a span {
   height:2px;
   width:0;
   background-color:#90bfff;
   top:-19px;
   left:50%;
   transform:translateX(-50%);
   position:relative;
   display:block;
}

header ul li a:hover {
   color:#90bfff;
   text-shadow:0px 0px 25px #fff, 0px 0px 15px #fff;
   transition:2s;
}

header ul li a:hover > span {
   animation:span-header 1s forwards;
}

@keyframes span-header {
   from {
      width:0;
      transition:width 0.24s;
   }
   to {
      width:100%;
      transition:width 0.24s;
   }
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Navigation (Hamburger / Adaptatif)
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.bar1, .bar2, .bar3 {
   width:44px;
   height:5px;
   background-color:#fff;
   border-radius:3px;
   margin:8px 0;
   transition:0.4s;
   z-index:10;
}

.change .bar1 {
   -webkit-transform:rotate(-45deg) translate(-8px, 9px);
   transform:rotate(-45deg) translate(-8px, 9px);
}

.change .bar2 {
   opacity:0;
}

.change .bar3 {
   -webkit-transform:rotate(45deg) translate(-8px, -12px);
   transform:rotate(45deg) translate(-8px, -12px);
}

.bascule {
   width:100%;
   position:absolute;
   z-index:99;
   opacity:0.94;
}

#hamburger {
   position:fixed;
   width:100%;
   top:59px;
   transform:translateY(-130%);
   visibility:hidden;
   z-index:9;
   transition:0.5s;
}

#hamburger.active {
   position:fixed;
   width:100%;
   top:59px;
   transform:translateY(0);
   visibility:visible;
   z-index:99999;
   transition:0.5s;
}

#hamburger ul {
   list-style-type:none;
   padding:0;
}

#hamburger li {
   background-color:#393939;
   line-height:60px;
}

#hamburger li a {
   color:#fff;
   cursor:pointer;
   border:none;
   text-align:left;
   outline:none;
   font-size:22px;
   font-weight:400;
   transition:0.4s;
   text-decoration:none;
   display:block;
   padding:2px 0px 0 0;
   text-align:center;
}

#hamburger li a:hover {
   background-color:#171717;
}

#hamburger li a:focus {
   background-color:#171717;
}

#hamburger li ul li {
   border-bottom:1px dotted #e1e1e1;
}

#hamburger li ul li a {
   font-size:14px;
   line-height:35px;
}

.menu-container {
   display:none;
   float:right;
   margin-top:6px;
   cursor:pointer;
}

/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Accueil
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.display-16-9,
.display-4-3,
.display-ipad,
.display-cell {
   position:fixed;
   top:0;
   z-index:1;
   width:100%;
}

.carrousel-4-3,
.carrousel-ipad,
.carrousel-cell {
   display:none;
}

.logo-carrousel {
   margin:0 auto;
   position:relative;
   top:-160px;
   max-width:510px;
   width:100%;
   padding:0 40px;
   box-sizing:border-box;
   animation:logo-carrousel 0.8s forwards;
   animation-delay:1s;
   z-index:7;
}

.logo-carrousel-video {
   margin:0 auto;
   position:absolute;
   top:-160px;
   max-width:510px;
   width:100%;
   padding:0 40px;
   left:50%;
   transform:translateX(-50%);
   box-sizing:border-box;
   animation:logo-carrousel 0.8s forwards;
   animation-delay:1s;
   z-index:9;
}

.logo-carrousel-contact {
margin:0 auto;
position:relative;
top:-160px;
max-width:480px;
width:100%;
padding:0 40px;
float:none;
box-sizing:border-box;
animation:logo-carrousel 0.8s forwards;
display:block;
animation-delay:1s;
z-index:9;
}

@keyframes logo-carrousel {
   from {
      top:-100px;
   }
   to {
      top:50px;
 }
}

.texte-carrousel {
   font-family:'Racing Sans One', cursive;
   font-size:70px;
   color:#fff;
   text-shadow:2px 2px 4px #000000, 0px 0px 6px #000000;
   line-height:75px;
   position:fixed;
   top:300px;
   text-transform:uppercase;
   z-index:2;
}

.texte-carrousel span {
   font-size:90px;
}

#main-accueil {
   margin-top:58%;
   z-index:3;
}

.section-accueil-001 h1,
.section-accueil-003 h1,
.section-accueil-005 h1 {
   color:#fff;
}

.section-accueil-001 {
   padding:40px 0;
   box-sizing:border-box;
   background-image:url(images/triplex-neuf-laurentides_001.jpg);
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center top;
}

.section-accueil-002 {
   padding:40px 0;
   box-sizing:border-box;
   background-image:url(images/background_03-001.jpg);
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center top;
   clear:both;
}

.boite-h3 {
   top:70px;
   margin-top:-57px;
   text-align:center;
   position:relative;
   padding-left:67px;
   -webkit-transform:translateY(0);
   transform:translateY(0);
   z-index:4;
}

.palissades {
   margin-left:60px;
   background-color:#fff;
   padding:36px 20px 20px;
   border:1px solid #d3d3d3;
   max-height:260px;
   transition:0.3s;
}

.palissades-2 {
   margin:0 auto;
   background-color:#fff;
   padding:36px 20px 20px;
   border:1px solid #d3d3d3;
   max-height:260px;
   transition:0.3s;
}

.palissades:hover,
.palissades:focus {
   -webkit-transform:translateY(-5%);
   transform:translateY(-5%);
   transition:0.3s;
}

.ombre-2 {
   display:none;
}

.ombre {
   display:inline-block;
   vertical-align:middle;
   -webkit-transform:perspective(1px) translateZ(0);
   transform:perspective(1px) translateZ(0);
   box-shadow:0 0 1px rgba(0, 0, 0, 0);
   position:relative;
   -webkit-transition-duration:0.3s;
   transition-duration:0.3s;
   -webkit-transition-property:transform;
   transition-property:transform;
}

.ombre::before {
   pointer-events:none;
   position:absolute;
   z-index:15;
   content:'';
   top:97.5%;
   left:21%;
   height:10px;
   width:73%;
   opacity:0;
   background:-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   background:radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   -webkit-transition-duration:0.3s;
   transition-duration:0.3s;
   -webkit-transition-property:transform, opacity;
   transition-property:transform, opacity;
}

.ombre:hover, .ombre:focus, .ombre:active {
   -webkit-transform:translateY(-5px);
   transform:translateY(-5px);
}

.ombre:hover:before, .ombre:focus:before, .ombre:active:before {
   opacity: 1;
   -webkit-transform:translateY(5px);
   transform:translateY(5px);
}

.ombre img {
   min-width:300px;
}

.section-accueil-003 {
   padding:40px 0;
   box-sizing:border-box;
   background-image:url(images/triplex-neuf-laurentides_002.jpg);
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center top;
}

.section-accueil-004 {
   padding:40px 0;
   box-sizing:border-box;
   background-image:url(images/background_05-001.jpg);
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center top;
}

.section-accueil-005 {
   padding:40px 0;
   box-sizing:border-box;
   background-image:url(images/triplex-neuf-laurentides_001.jpg);
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center top;
}

.section-accueil-006 {
   background-color:#fff;
}

.section-accueil-006 .container {
   padding:0;
}

.section-accueil-006 .col-2-1 {
   box-sizing:border-box;
   background-image:url(images/triplex-neuf-laurentides_003-01.jpg);
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center top;
   width:50%;
   height:auto;
}

.section-accueil-006 .col-2-2 {
   padding:40px;
   box-sizing:border-box;
   background-image:url(images/background_04-001.jpg);
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center top;
   width:50%;
}

/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Projets
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

#projets {
   height:auto;
   background:url('images/structure_fond_projet.jpg');
   background-size:cover;
   background-attachment:fixed;
   padding-bottom:80px;
}

#projets h2 {
   margin-top:60px;
   animation:projets-h1 0.6s forwards;
   text-align:center;
}

#projets img {
   margin:0 auto;
}

.cont {
   position:relative;
   max-width:1000px;
   width:100%;
   margin:0 auto;
}

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

.overlay {
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   height:100%;
   width:100%;
   opacity:0;
   transition:.5s ease;
   background-color:#000;
}

.cont:hover .overlay {
   opacity:1;
}

#projets .texte {
   font-family:'Roboto Condensed', sans-serif;
   font-size:46px;
   color:#fff;
   line-height:48px;
   position:absolute;
   top:50%;
   left:50%;
   -webkit-transform:translate(-50%, -50%);
   -ms-transform:translate(-50%, -50%);
   transform:translate(-50%, -50%);
   text-align:center;
}

.h2-grossissant {
   transform:scale(0);
   transition:0.4s;
}

.h2-grossissant.active {
   transform:scale(1);
   transition:0.4s;
}

/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Réalisations
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.main-realisations {
   margin-top:68%;
   width:100%;
   background-image:url('images/structure_fond_condos.jpg');
   background-repeat:no-repeat;
   background-size:cover;
   position:relative;
   top:0;
   padding-bottom:120px;
   z-index:9;
}

.main-realisations section {
   margin-top:80px;
}

.main-realisations section h2 {
   text-align:center;
   padding-top:25px;
}

.grid-container {
   display:grid;
   grid-template-columns:repeat(3, 1fr);
   margin:0 auto;
   grid-gap:10px 10px;
   max-width:1040px;
}

.grid-item {
   max-width:340px;
   width:100%;
   min-height:200px;
   max-height:240px;
   height:100%;
   background-size:cover;
   background-repeat:no-repeat;
   background-position:center;
   border:1px solid #bababa;
   position:relative;
   cursor:pointer;
   display:flex;
}

.grid-item-rollover-bas {
   display:table;
   max-width:340px;
   width:100%;
   max-height:240px;
   min-height:200px;
   height:100%;
   background-color:rgba(26,26,26,0.78);
   visibility:hidden;
   position:relative;
   transform:scale(0);
   opacity:0;
}

.grid-item-rollover-bas div {
   display:table-cell;
   vertical-align:middle;
   position:relative;
   color:#fff;
   font-weight:400;
   text-align:center;
   padding:20px;
   box-sizing:border-box;
}

.grid-item-rollover-haut {
   display:table;
   width:340px;
   height:240px;
   background-color:rgba(26,26,26,0.78);
   visibility:hidden;
   position:relative;
   top:-150px;
   opacity:0;
}

.grid-item-rollover-haut div {
   display:table-cell;
   vertical-align:middle;
   position:relative;
   color:#fff;
   font-weight:400;
   text-align:center;
   padding:20px;
   box-sizing:border-box;
}

.grid-item-rollover-bas.actif {
   visibility:visible;
   animation:grid-item-bas-actif 0.8s forwards;
}

.grid-item-rollover-bas.inactif {
   animation:grid-item-bas-inactif 0.8s forwards;
   visibility:visible;
}

.grid-item-rollover-haut.actif {
   visibility:visible;
   animation:grid-item-haut-actif 0.8s forwards;
}

.grid-item-rollover-haut.inactif {
   animation:grid-item-haut-inactif 0.8s forwards;
   bottom:0px;
   visibility:visible;
}

@keyframes grid-item-bas-actif {
   from {
      transform:scale(0);
      opacity:0;
   }
   to {
      transform:scale(1);
      opacity:1;
   }
}

@keyframes grid-item-bas-inactif {
   from {
      transform:scale(1);
      opacity:1;
   }
   to {
      transform:scale(0);
      visibility:hidden;
      opacity:0;
   }
}

@keyframes grid-item-haut-actif {
   from {
      top:-150px;
      opacity:0;
   }
   to {
      top:0px;
      opacity:1;
   }
}

@keyframes grid-item-haut-inactif {
   from {
      top:0;
      opacity:1;
   }
   to {
      top:-150px;
      visibility:hidden;
      opacity:0;
   }
}

#lightbox {
   transform:scale(0);
   opacity:0;
   position:fixed;
   overflow:auto;
   top:0;
   width:100%;
   height:100%;
   background-color:rgba(22,22,22,0.93);
   z-index:9999;
   transition:0.3s;
}

#lightbox.actif {
   transform:scale(1);
   opacity:1;
   transition:0.3s;
}

.projet {
   display:none;
}

.x {
   position:absolute;
   top:0;
   right:20px;
   font-size:72px;
   font-weight:900;
   line-height:72px;
   text-align:right;
   color:#fff;
   z-index:99999;
}

.x a {
   color:#fff;
   cursor:pointer;
}

.x a:hover {
   color:#fff;
}

.image-principale {
   display:flex;
   position:relative;
   top:20px;
   padding:0 20px;
   box-sizing:border-box;
   margin:0 auto;
}

.images-vignette {
   position:relative;
   margin-top:5%;
   width:100%;
}

.images-vignette-row {
   display:table;
   margin:0 auto;
   max-width:1255px;
   padding:0 20px;
   box-sizing:border-box;
   width:100%;
   text-align:center;
}

.img-001:hover,
.img-001:focus {
   max-width:100px;
   transform:translateY(-10px);
   transition:0.4s;
}

.img-002:hover,
.img-002:focus {
   max-width:100px;
   transform:translateY(-10px);
   opacity:0.55;
   transition:0.4s;
}

.img-003:hover,
.img-003:focus {
   box-shadow:0 0 14px #fef8e5;
   transition:0.4s;
}

.img-004:hover,
.img-004:focus {
   opacity:0.33;
   transition:0.4s;
}

.images-vignette-row img {
   display:inline-block;
   cursor:pointer;
   margin:5px 5px 0;
   max-width:130px;
   transition:0.4s;
}

/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Accompagnement
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.haut-page-accompagnement {
   background-image:url('images/accompagnement_16-9.jpg');
   background-repeat:no-repeat;
   background-position:center;
   background-size:cover;
   height:1000px;
}

.logo-accompagnement {
   position:relative;
   top:51px;
   left:45%;
   max-width:450px;
   width:100%;
}

.droite-gauche {
   animation:2.5s droite-gauche forwards;
   max-height:145px;
}

@keyframes droite-gauche {
   0% {
      transform:scale(0);
      left:36%;
   }
   50% {
      transform:scale(1);
      left:36%;
   }
   100% {
      left:1%;
   }
}

@keyframes droite-gauche-clear {
   0% {
      transform:translateX(0);
   }
}

.appel-de-service {
   position:fixed;
   right:2%;
   transform:scale(0);
   margin-top:30px;
   animation-delay:3s;
   animation-duration:1.2s;
   animation-fill-mode:forwards;
   animation-name:appel-de-service;
   cursor:pointer;
   z-index:99999;
}

@keyframes appel-de-service {
   from {
      transform:scale(0);
   }
   to {
      transform:scale(1);
   }

}

.accompagnement {
   display:table;
   margin:60px 0 80px;
   width:100%;
}

.accompagnement img {
   max-width:33.3333%;
   padding:10px 15px;
   box-sizing:border-box;
   float:left;
   position:relative;
   transition:0.3s;
}

.accompagnement img:hover,
.accompagnement img:focus {
   cursor:pointer;
   transform:scale(1.1);
   z-index:2;
   transition:0.3s;
}



@keyframes acc-opacity {
   from {
      opacity:0;
   }
   to {
      opacity:1;
   }
}

.acc-opacity-1 {
   opacity:0;
}

.acc-opacity-1.active {
   animation:acc-opacity 10s forwards;
}

.acc-opacity-2 {
   opacity:0;
}

.acc-opacity-2.active {
   animation:acc-opacity 1.9s forwards;
}


.acc-opacity-3 {
opacity:0;
}

.acc-opacity-3.active {
animation:acc-opacity 1s forwards;
}


.acc-opacity-4 {
opacity:0;
}

.acc-opacity-4.active {
animation:acc-opacity 2.5s forwards;
}


.acc-opacity-5 {
opacity:0;
}

.acc-opacity-5.active {
animation:acc-opacity 4.0s forwards;
}


.acc-opacity-6 {
opacity:0;
}

.acc-opacity-6.active {
animation:acc-opacity 5.0s forwards;
}


.acc-opacity-7 {
opacity:0;
}

.acc-opacity-7.active {
animation:acc-opacity 6s forwards;
}


.acc-opacity-8 {
opacity:0;
}

.acc-opacity-8.active {
animation:acc-opacity 7s forwards;
}


.acc-opacity-9 {
opacity:0;
}

.acc-opacity-9.active {
animation:acc-opacity 8s forwards;
}

.acc-opacity-10 {
opacity:0;
}

.acc-opacity-10.active {
animation:acc-opacity 9.0s forwards;
}


.acc-opacity-11 {
opacity:0;
}

.acc-opacity-11.active {
animation:acc-opacity 10.0s forwards;
}


/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Nous joindre
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */


.haut-page-nousjoindre {
   background-image:url('images/triplex-neuf-saint-jerome_16-9.jpg');
   background-repeat:no-repeat;
   background-position:center;
   background-size:cover;
   height:1000px;
}


#main-nous-joindre {
   font-family:'arial', helvetica, sans-serif;
   line-height:22px;
   font-size:17px;
}

#main-nous-joindre .container {
   max-width:1260px;
}

#main-nous-joindre p {
   text-indent:unset;
}

#main-nous-joindre a {
   color:#000;
}

#main-nous-joindre a:hover,
#main-nous-joindre a:focus {
   color:#90bfff;
}

#main-nous-joindre .section-accueil-001 .container {
   max-width:100%;
}

#main-nous-joindre .section-accueil-001 h1 {
   font-family:'Rasa', serif;
}

.section-nous-joindre-001 {
   background-image:url('images/triplex-neuf-saint-jerome_16-9.jpg');
   background-repeat:no-repeat;
   background-position:center;
   background-size:cover;
   height:1000px;
}

.section-nous-joindre-001 img {
   float:none;
}

.section-nous-joindre-001 #logo {
   float:none;
   margin-top:60px;
   margin-left:40px;
   max-height:260px;
   padding-right:30px;
   box-sizing:border-box;
   transform:scale(0);
   opacity:0;
   transition:1.5s;
}

.section-nous-joindre-001 #titre {
   opacity:0;
   transform:scale(0);
}

.section-nous-joindre-001 #freres {
   transform:scale(0);
   opacity:0;
   transition:1.5s;
}

.section-nous-joindre-001 #titre {
   opacity:0;
   transform:scale(0);
}

.section-nous-joindre-001 h2 {
   margin-bottom:50px;
   padding-top:100px;
}

.section-nous-joindre-002 {
   background-image:url('images/structure_fond_002.jpg');
   background-size:cover;
   background-repeat:no-repeat;
   padding-bottom:90px;
}

.section-nous-joindre-002 h2 {
   margin-bottom:0;
}

.section-nous-joindre-002 .col-2 {
   margin-top:60px;
}

.section-nous-joindre-002 .col-2:first-of-type {
   max-width:40%;
}

.section-nous-joindre-002 .col-2:nth-of-type(2) {
   max-width:60%;
   padding-left:60px;
}

.section-nous-joindre-002 .col-float-right {
   max-width:600px;
   float:right;
}

.section-nous-joindre-002 h2 {
   text-transform:unset;
}

.section-nous-joindre-002 p {
   margin-bottom:15px;
}

.section-nous-joindre-002 .entrepreneur {
   font-size:24px;
   font-weight:900;
}

.section-nous-joindre-002 .rbq {
   font-size:24px;
   letter-spacing:0.02em;
   line-height:32px;
}

.section-nous-joindre-002 figure {
   float:left;
   margin-top:20px;
   max-width:290px;
   font-size:20px;
   font-weight:900;
   line-height:20px;
}

.section-nous-joindre-002 .courriel {
   font-size:14px;
   font-weight:400;
   font-style:italic;
}

.section-nous-joindre-002 .spacer {
height:4px;
width:5px;
display:block;
}


.section-nous-joindre-003 {
   max-width:100%;
   height:300px;
}

.triplex-modele {
   font-family:'Racing Sans One', cursive;
   font-size:50px;
   color:#000;
   line-height:50px;
   text-align:center;
   background-color:#597cb5;
   padding:36px 10px;
   box-sizing:border-box;
   border-radius: 50%;
   margin-top:100px;
   max-width:510px;
   width:100%;
   height:auto;
   animation:triplexmodelezoom 1.1s;
   display:block;
}

.lumiere {
	position:relative;
}

.lumiere::before {
	position:absolute;
	top:50%;
	left:50%;
	z-index:15;
	display:block;
	content:'';
	width:0;
	height:0;
	background:rgba(255,255,255,0.2);
	border-radius:100%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	opacity:0;
}

.lumiere:hover::before {
	-webkit-animation:cercle 0.95s;
	animation:cercle 0.95s;
}

@-webkit-keyframes cercle {
	0% {
		opacity:1;
	}
	40% {
		opacity:1;
	}
	100% {
		width:200%;
		height:200%;
		opacity:0;
	}

}

@keyframes cercle {
	0% {
		opacity:1;
	}
	40% {
		opacity:1;
	}
	100% {
		width:200%;
		height:200%;
		opacity:0;
	}
}

.section-nous-joindre-002 .rendez-vous {
   font-size:24px;
   font-weight:500;
   font-style:italic;
   text-align:center;
   margin-top:10px;
   max-width:510px;
}

.section-nous-joindre-002 .rendez-vous span {
   text-transform:uppercase;
   font-weight:600;
}

.section-nous-joindre-002 .infos {
   clear:both;
   padding-top:30px;
}

.section-nous-joindre-002 h4 {
   margin-top:10px;
}

.section-nous-joindre-002 .infos img {
   margin:2px 8px 0 0;
   float:left;
}

/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Condos à louer
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

#condos-a-louer {   
margin-top:68%;
height:1000px;
background-image:url("images/condo-a-louer-saint-jerome_16-9.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:bottom left;
position:relative;
z-index:9;
}

.condos-bouton {
position:absolute;
width:600px;
max-width:600px;
margin-top:10%;
margin-left:55%;
cursor:pointer;
opacity:1;
transition:700ms;
display:block;
z-index:10;
}

.condos-bouton:hover {
opacity:0.75;
transition:600ms;
}

.condos-bouton a:hover {
opacity:0.75;
transition:600ms;
}



.mask-texte {
   padding:60px 25px;
   margin-top:160px;
   font-size:46px;
   color:#fff;
   font-family:'Roboto Condensed', sans-serif;
   line-height:60px;
   text-align:center;
   display:inline-block;
   vertical-align:middle;
   height:557px;
   width:100%;
   transform:translateX(-20px);
}

.mask-texte a {
   color:#fff;
   text-decoration:underline;
}

.view-fourth { 
position:relative;
   padding:60px 0;
   margin:0 auto; 
   max-width:1000px;
   height:557px;
}

.view-fourth img {    
	transition:all 0.4s ease-in-out 0.2s;
   opacity:1;
}

.view-fourth .mask {
   position:absolute;
   top:60px;
   max-width:1000px;
   width:100%;
   max-height:557px;
	background-color:rgba(0,0,0,0.8);
	opacity:0;
	transform:scale(0) rotate(-180deg);
	transition:all 0.4s ease-in;
   border-radius:0px;
   padding-right:60px;
   box-sizing:border-box;
}

.view-fourth h2 {
   opacity:0;
   border-bottom:1px solid rgba(0, 0, 0, 0.3);
   background:transparent;
   margin:20px 40px 0px 40px;
	transition:all 0.5s ease-in-out;
}

.view-fourth p {
	opacity:0;
	transition:all 0.5s ease-in-out;
}

.view-fourth a.info {
   opacity:0;
	transition:all 0.5s ease-in-out;
}

.view-fourth:hover .mask {
	opacity:1;
	transform:scale(1) rotate(0deg);
	transition-delay:0.2s;
}

.view-fourth:hover img {
	transform:scale(0);
   opacity:0;
	transition-delay:0s;
}

.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
   opacity:1;
   transition-delay:0.5s;
}

/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Footer
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.footer-separation {
   height:18px;
   width:100%;
   background-color:#070b14;
   position:relative;
   z-index:3;
}

footer {
   background-image:url(images/footer_image_005.jpg);
   background-repeat:no-repeat;
   background-size:180%;
   background-position:65%;
   clear:both;
   position:relative;
   font-family:'arial', helvetica, sans-serif;
   padding:80px 0 80px 0;
   z-index:3;
   transition:2s;
}

footer.active {
   background-image:url(images/footer_image_005.jpg);
   background-size:cover;
   background-position:50% top;
   transition:2s;
}

footer a {
   color:#fff;
}

footer .telephone {
   font-size:32px;
   font-weight:700;
}

footer .telephone a:focus {
   color:#90bfff;
}

footer .telephone a {
   color:#fff;
   text-decoration:none;
}

footer .container {
   padding:0;
}

footer .col-3 {
   padding:0 28px;
   box-sizing:border-box;
}

footer .col-3:nth-of-type(2) {
   padding-left:110px;
}

footer .col-3:nth-of-type(2) h4 {
   margin-bottom:8px;
}

footer .col-3:nth-of-type(2) img {
   float:left;
   max-width:42px;
   margin-right:30px;
}

footer h3,
footer h4,
footer label {
   color:#fff;
}

footer p {
   font-size:17px;
   color:#fff;
   text-indent:0;
}

.bas-de-page {
   width:100%;
   height:auto;
   background-color:#070b14;
   display:block;
   padding:30px 0;
   position:relative;
   clear:both;
}

.bas-de-page .container {
   max-width:1000px;
}

.bas-de-page img {
   margin:auto auto;
   float:left;
   padding:0 30px;
}

.bas-de-page img[alt="RBQ"],
.bas-de-page img[alt="APCHQ"],
.bas-de-page img[alt="Desjardins"],
.bas-de-page img[alt="BNC"] {
   max-width:110px;
}

.bas-de-page img[alt="GARANTIE construction résidentielle"] {
max-width:75px;
height:80px;
}

.bas-de-page img[alt="Banque Laurentienne"] {
max-width:75px;
height:80px;
}

/* --------------------------------------------------------------------------
-----------------------------------------------------------------------------
Adaptatif
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

@media screen and (min-width:1440px) {

.accompagnement img {
   max-width:33.3333%;
   padding:10px 9px;
   box-sizing:border-box;
   float:left;
   position:relative;
   transition:0.3s;
}

   .section-nous-joindre-001 {
      min-height:960px;
   }

}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_16-9.jpg');
   background-position:center;
   background-size:cover;
   height:900px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_16-9.jpg');
background-position:center;
background-size:cover;
height:900px;
}


   footer.active {
      background-position:50%;a
   }
   
   
#condos-a-louer {   
height:940px;
background-size:100%;
background-position:bottom left;
}

.condos-bouton {
width:500px;
margin-top:10%;
margin-left:55%;
}   

}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_4-3.jpg');
   background-position:center;
   background-size:cover;
   height:900px;
}

   #main-accueil,
   #condos--louer {
      margin-top:62%;
   }

   footer.active {
      background-position:45%;
   }
   
#condos-a-louer {   
height:800px;
background-size:100%;
background-position:bottom left;
}

.condos-bouton {
width:400px;
margin-top:10%;
margin-left:50%;
} 

}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_16-9.jpg');
   background-position:center;
   background-size:cover;
   height:760px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_16-9.jpg');
background-position:center;
background-size:cover;
height:760px;
}


   footer.active {
      background-position:44%;
   }

}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_4-3.jpg');
   background-position:center;
   background-size:cover;
   height:760px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_4-3.jpg');
background-position:center;
background-size:cover;
height:760px;
}


   .carrousel-16-9,
   .carrousel-ipad {
      display:none;
   }

   .carrousel-4-3 {
      display:block;
   }

   .section-accueil-006 .col-2-1 {
      background-image:url(images/triplex-neuf-laurentides_003-02.jpg);
      background-size:auto;
   }
   
footer .col-3:nth-of-type(2) {
padding-left:80px;
}

   .section-accueil-006 p:nth-child(4),
   .section-accueil-006 p:nth-child(5),
   .section-accueil-006 p:nth-child(6) {
      display:none;
   }

   .section-accueil-006 {
      font-size:19px;
      line-height:28px;
   }

}

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

.accompagnement img {
   max-width:33.3333%;
   padding:10px 10px;
   box-sizing:border-box;
   float:left;
   position:relative;
   transition:0.3s;
}

   .section-accueil-006 {
      font-size:18px;
      line-height:26px;
   }

   .section-accueil-006 h2 {
      font-size:40px;
      line-height:50px;
   }

   #projets h2 {
      font-size:44px;
   }

}

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

   footer {
      background-image:url(footer-image_02.jpg);
      background-color:#1a202d;
   }

   footer.active {
      background-image:url(footer-image_02.jpg);
      background-position:50% top;
   }

   footer .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   .col-3 {
      margin-top:60px;
      max-width:100%;
      text-align:center;
   }

   .col-3 img {
      margin:0 auto;
   }

   footer .col-3:nth-child(2) {
      padding:0;
   }
   



   footer .col-3:nth-child(2) p:last-child {
      float:none;
      width:160px;
      margin:0 auto;
   }
   
footer .col-3:nth-of-type(2) img {
float:none;
max-width:42px;
margin-right:15px;
margin-left:15px;
display:inline-block;
}

   .col-3 input {
      margin:0 auto;
   }

   .col-3 input[type="submit"] {
      margin:38px auto 0;
   }

   .col-3:nth-child(1) {
      margin-top:0;
      max-width:100%;
 }
   
.section-accueil-001 {
padding:40px 0;
box-sizing:border-box;
background-image:url(images/triplex-neuf-laurentides_001.jpg);
background-attachment:scroll;
background-repeat:no-repeat;
background-size:cover;
background-position:center top;
}

.section-accueil-002 {
padding:40px 0;
box-sizing:border-box;
background-image:url(images/background_03-001.jpg);
background-attachment:scroll;
background-repeat:no-repeat;
background-size:cover;
background-position:center top;
clear:both;
}

.section-accueil-003 {
padding:40px 0;
box-sizing:border-box;
background-image:url(images/triplex-neuf-laurentides_002.jpg);
background-attachment:scroll;
background-repeat:no-repeat;
background-size:cover;
background-position:center top;
}

.section-accueil-004 {
padding:40px 0;
box-sizing:border-box;
background-image:url(images/background_05-001.jpg);
background-attachment:scroll;
background-repeat:no-repeat;
background-size:cover;
background-position:center top;
}

.section-accueil-005 {
padding:40px 0;
box-sizing:border-box;
background-image:url(images/triplex-neuf-laurentides_001.jpg);
background-attachment:scroll;
background-repeat:no-repeat;
background-size:cover;
background-position:center top;
}
   
#projets {
height:auto;
background:url('images/structure_fond_projet_002.jpg');
background-size:cover;
background-attachment:scroll;
padding-bottom:80px;
}   

#condos-a-louer {   
height:740px;
background-size:100%;
background-position:bottom left;
}

.condos-bouton {
width:360px;
margin-top:10%;
margin-left:50%;
} 



}



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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_16-9.jpg');
   background-position:center;
   background-size:cover;
   height:650px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_16-9.jpg');
background-position:center;
background-size:cover;
height:650px;
}

.accompagnement img {
max-width:50%;
padding:10px 15px;
}

   .section-accueil-006 {
      font-size:17px;
      line-height:24px;
   }

   .section-accueil-006 h2 {
      font-size:36px;
      line-height:42px;
   }

}

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

   .view-fourth .mask {
      height:90%;
      max-height:500px;
   }

   .mask-texte {
      transform:translateX(0);
      max-height:500px;
   }

}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_4-3.jpg');
   background-position:center;
   background-size:cover;
   height:760px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_4-3.jpg');
background-position:center;
background-size:cover;
height:760px;
}

   #main-accueil,
   #condos-a-louer {
      margin-top:60%;
   }

   .section-accueil-006 .col-2-1 {
      background-image:url(images/triplex-neuf-laurentides_003-02.jpg);
      background-size:auto;
   }



   .view-fourth .mask {
      height:90%;
      max-height:525px;
   }

   .mask-texte {
      max-height:unset;
   }
   
.projets-001 {
font-family:'arial', helvetica, sans-serif;
font-weight:600;
font-size:18px;
line-height:1.10;
font-style:italic;
margin:0 auto 18px auto;
text-transform:uppercase;
text-align:center;
display:block;
}   

#condos-a-louer {   
height:700px;
background-size:100%;
background-position:bottom left;
}

.condos-bouton {
width:320px;
margin-top:10%;
margin-left:50%;
} 


}



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

.accompagnement img {
max-width:50%;
padding:10px 10px;
}

   .section-accueil-006 .col-2-1 {
      display:none;
   }

   .section-accueil-006 .col-2-2 {
      width:100%;
      font-size:21px;
      line-height:30px;
   }

   .accompagnement {
      padding:0px 10px 0px 10px;
      box-sizing:border-box;
   }



}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_16-9.jpg');
   background-position:center;
   background-size:cover;
   height:600px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_16-9.jpg');
background-position:center;
background-size:cover;
height:600px;
}

   header {
      height:59px;
   }

   header nav ul {
      display:none;
   }

   .menu-container {
      display:block;
   }

   .bas-de-page .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   .bas-de-page img {
      margin:0 auto;
   }

}

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

   .grid-container {
      grid-template-columns:repeat(2, 1fr);
   }

   #projets h2 {
      font-size:36px;
      margin-top:30px;
   }

   .section-nous-joindre-001 #logo {
      margin-top:0;
   }


.projets-001 {
font-family:'arial', helvetica, sans-serif;
font-weight:550;
font-size:17px;
line-height:1.10;
font-style:italic;
margin:0 auto 17px auto;
text-transform:uppercase;
text-align:center;
display:block;
}   

}




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

   .view-fourth .mask {
      height:90%;
      max-height:434px;
   }

   .mask-texte {
      margin-top:120px;
      font-size:34px;
      line-height:50px;
      max-height:434px;
   }
   
#condos-a-louer {   
height:660px;
background-size:100%;
background-position:bottom left;
}

.condos-bouton {
width:300px;
margin-top:10%;
margin-left:50%;
}    
   

}

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



   .section-nous-joindre-001 .row,
   .section-nous-joindre-002 .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }



   .section-nous-joindre-002 .col-float-right,
   .section-nous-joindre-002 .col-2 {
      max-width:100%!important;
      padding:0!important;
   }
   

   
   

}

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

   .logo-accompagnement {
      max-width:320px;
      top:67px;
   }

   .appel-de-service {
      max-width:180px;
   }

}

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

   #main-accueil,
   #condos-a-louer {
      margin-top:60%;
   }

}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_4-3.jpg');
   background-position:center;
   background-size:cover;
   height:760px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_4-3.jpg');
background-position:center;
background-size:cover;
height:760px;
}

   .carrousel-4-3 {
      display:none;
   }

   .carrousel-ipad {
      display:block;
   }

   .texte-carrousel {
      display:none;
   }

   #main-accueil,
   #condos-a-louer {
      margin-top:85%;
   }

}

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

   .section-accueil-002 .flex {
      display:unset;
   }

   .ombre {
      display:none;
   }

   .ombre-2 {
      display:block;
      margin:20px auto 0;
   }

   .boite-h3 {
      position:relative;
      right:unset;
      width:100%;
      top:84px;
   }

   .section-accueil-002 div:nth-child(2) {
      margin:0!important;
   }

#condos-a-louer {   
height:640px;
background-size:100%;
background-position:bottom left;
}

.condos-bouton {
width:290px;
margin-top:12%;
margin-left:50%;
}  

}





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

   .image-principale {
      margin-top:70px;
      top:0;
   }
   
.accompagnement img {
max-width:100%;
}

#projets h2 {
font-size:36px;
line-height:40px;
}


.acc-opacity-3 {
opacity:0;
}

.acc-opacity-3.active {
animation:acc-opacity 1s forwards;
}


.acc-opacity-4 {
opacity:0;
}

.acc-opacity-4.active {
animation:acc-opacity 1.5s forwards;
}


.acc-opacity-5 {
opacity:0;
}

.acc-opacity-5.active {
animation:acc-opacity 2.0s forwards;
}


.acc-opacity-6 {
opacity:0;
}

.acc-opacity-6.active {
animation:acc-opacity 2.5s forwards;
}


.acc-opacity-7 {
opacity:0;
}

.acc-opacity-7.active {
animation:acc-opacity 3s forwards;
}


.acc-opacity-8 {
opacity:0;
}

.acc-opacity-8.active {
animation:acc-opacity 3.5s forwards;
}


.acc-opacity-9 {
opacity:0;
}

.acc-opacity-9.active {
animation:acc-opacity 4s forwards;
}

.acc-opacity-10 {
opacity:0;
}

.acc-opacity-10.active {
animation:acc-opacity 4.25s forwards;
}


.acc-opacity-11 {
opacity:0;
}

.acc-opacity-11.active {
animation:acc-opacity 4.5s forwards;
}



#condos-a-louer {      
   height:1100px;
   background-image:url("images/condo-a-louer-saint-jerome_cellulaire.jpg");
   background-repeat:no-repeat;
   background-size:100%;
   background-position:bottom center;
}


.condos-bouton {
position:absolute;
width:360px;
margin-top:9%;
margin-left:25%;
}


}




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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_cellulaire-001.jpg');
   background-position:center;
   background-size:cover;
   height:960px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_cellulaire.jpg');
background-position:center;
background-size:cover;
height:960px;
}

   h1 {
      font-size:54px;
      line-height:68px;
   }

   .section-nous-joindre-002 figure {
      max-width:400px;
      margin:20px auto!important;
      float:unset;
   }

#condos-a-louer {      
height:950px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:340px;
margin-top:10%;
margin-left:22.5%;
}

   .view-fourth {
      height:334px;
   }

   .view-fourth .mask {
      height:334px;
      max-height:334px;
   }

   .mask-texte {
      margin-top:40px;
      font-size:30px;
      line-height:40px;
      max-height:334px;
   }

   footer {
      background-image:url(footer-image_03.jpg);
      background-color:#1a202d;
   }

   footer.active {
      background-image:url(footer-image_03.jpg);
      background-position:50% top;
   }


}

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

   .carrousel-cell {
      display:block;
   }

   .carrousel-ipad {
      display:none;
   }

   #main-accueil,
   #condos-a-louer,
   .main-realisations {
      margin-top:154.5%;
   }

   #condos-a-louer h3 {
      line-height:30px;
   }

   #projets .texte {
      font-size:32px;
      line-height:40px;
   }

#projets h2 {
font-size:38px;
line-height:42px;
}
   
.section-nous-joindre-002 {
padding-bottom:65px;
}

.section-nous-joindre-002 .infos {
padding-top:25px;
}

}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_cellulaire-001.jpg');
   background-position:center;
   background-size:cover;
   height:900px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_cellulaire.jpg');
background-position:center;
background-size:cover;
height:900px;
}

   h1 {
      font-size:42px;
      line-height:56px;
   }

   h2, .bleu {
      font-size:44px!important;
   }

   .grid-container {
      grid-template-columns:repeat(1, 1fr);
   }

   .grid-item {
      margin:0 auto;
   }


   .logo-accompagnement {
      max-width:220px;
      top:46px;
   }

   .appel-de-service {
      max-width:110px;
   }

   .accompagnement img {
      padding:5px 0;
   }

   .accompagnement {
      margin:5px 0 80px;
   }

#condos-a-louer {      
height:860px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:320px;
margin-top:15%;
margin-left:20%;
}

   .view-fourth {
      height:268px;
   }
   
   
#projets h2 {
font-size:36px;
line-height:40px;
}

   .view-fourth .mask {
      height:250px;
      max-height:250px;
      width:100%;
   }

   .mask-texte {
      margin-top:25px;
      font-size:22px;
      line-height:32px;
      max-height:268px;
   }
   
   
.triplex-modele {
font-size:40px;
line-height:40px;
padding:36px 10px;
border-radius: 50%;
margin-top:100px;
}   

.projets-001 {
font-family:'arial', helvetica, sans-serif;
font-weight:550;
font-size:16px;
line-height:1.15;
font-style:italic;
margin:0 auto 15px auto;
text-transform:uppercase;
text-align:center;
display:block;
}   
   

}



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

#condos-a-louer {      
height:790px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:300px;
margin-top:12%;
margin-left:21.5%;
}

}


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

#condos-a-louer {      
height:770px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:290px;
margin-top:11%;
margin-left:20%;
}

}




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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_cellulaire-001.jpg');
   background-position:center;
   background-size:cover;
   height:850px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_cellulaire.jpg');
background-position:center;
background-size:cover;
height:850px;
}

   h2, .bleu {
      font-size:36px!important;
      line-height:48px;
   }

   .section-accueil-002 .flex {
      display:unset;
   }

   .ombre {
      display:none;
   }


   .ombre-2 {
      display:block;
      margin:20px auto 0;
   }


   .ombre-2 img {
      padding:30px 0 10px;
   }


#projets h2 {
font-size:28px;
line-height:36px;
}

   .boite-h3 {
      position:relative;
      right:unset;
      width:100%;
      top:84px;
   }

   .section-accueil-002 div:nth-child(2) {
      margin:0!important;
   }
   
   
#condos-a-louer {      
height:740px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:250px;
margin-top:11%;
margin-left:20%;
}
   

}




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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_cellulaire-001.jpg');
   background-position:center;
   background-size:cover;
   height:740px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_cellulaire.jpg');
background-position:center;
background-size:cover;
height:740px;
}

#condos-a-louer {      
height:720px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:240px;
margin-top:12%;
margin-left:20%;
}

   .view-fourth {
      height:195px;
   }

   .view-fourth .mask {
      height:195px;
      max-height:195px;
      width:100%;
   }

   .mask-texte {
      margin-top:0;
      font-size:20px;
      line-height:30px;
      max-height:195px;
   }

}

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

.haut-page-accompagnement {
   background-image:url('images/accompagnement_cellulaire-001.jpg');
   background-position:center;
   background-size:cover;
   height:810px;
}

.section-nous-joindre-001 {
background-image:url('images/triplex-neuf-saint-jerome_cellulaire.jpg');
background-position:center;
background-size:cover;
height:810px;
}

   body {
      font-size:19px;
      line-height:28px;
   }

   header .container {
      padding:0 25px;
   }

   h2, .bleu {
      line-height:40px;
   }

   .container,
   .col-2-2 {
      padding:30px 25px;
   }

    .ombre-2 img {
      padding:20px 0 5px;
   }

   .section-accueil-006 .col-2-2 {
      padding:30px 25px;
   }

   #main-nous-joindre a {
      font-size:14px;
   }

   #images-vignette {
      position:relative;
      margin-top:18%;
   }

   .images-vignette-row {
      margin-top:60px;
   }

   .images-vignette-row img {
      max-width:100%;
      padding:10px 0;
      display:block;
      cursor:default;
   }

   .image-principale {
      display:none;
   }



   .logo-accompagnement {
      max-width:180px;
      top:44px;
   }

   .appel-de-service {
      max-width:85px;
   }

   .accompagnement img {
      padding:5px 0;
   }
   
.triplex-modele {
font-size:33px;
line-height:33px;
padding:30px 9px;
border-radius: 50%;
margin-top:100px;
}   


#condos-a-louer {      
height:750px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:220px;
margin-top:14%;
margin-left:20%;
}


}


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

#condos-a-louer {      
height:720px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:200px;
margin-top:18%;
margin-left:18%;
}

}



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


.triplex-modele {
font-size:28px;
line-height:28px;
padding:28px 9px;
border-radius: 50%;
margin-top:70px;
}   

#condos-a-louer {      
height:720px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:190px;
margin-top:18%;
margin-left:18%;
}

}


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


#condos-a-louer {      
height:730px;
background-position:bottom center;
}

.condos-bouton {
position:absolute;
width:180px;
margin-top:18%;
margin-left:17%;
}

}


@media screen and (min-width:1280px) {




}