/* HAUT DE PAGE  */
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.5) url(../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;

}

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}

.cd-top.cd-is-visible {visibility: visible; opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
.no-touch .cd-top:hover {background-color: #ffe600;opacity: 1;}

#neutre .no-touch .cd-top:hover {background-color:#ffe600;}
#residentiel .cd-top:hover {background-color: #e20236;}
#commercial .cd-top:hover {background-color: #0aa0e6;}
#public .cd-top:hover {background-color: #71cb10;}
#social .cd-top:hover {background-color: #12ecb6;}




/*  ANIMATION FADEIN  BOUNCE  */

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
	-webkit-animation-timing-function: ease; 
    animation-timing-function: ease; 


} 

.animated-late{
    -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
	-webkit-animation-timing-function: ease; 
    animation-timing-function: ease; 
	-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 2s;
}

.animated-infinite { 
    -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-iteration-count:infinite; 
    animation-iteration-count:infinite; 
} 


.animatedBounce { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.55); 
    } 

    70% { 
        -webkit-transform: scale(.9); 
    } 

    100% { 
         -webkit-transform: scale(1); 
    } 
} 

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.55); 
    } 

    70% { 
        transform: scale(.9); 
    } 

    100% { 
        transform: scale(1); 
    } 
} 

.bounceIn { 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
}



@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

.bounce { -webkit-animation-name: bounce; animation-name: bounce; }


@-webkit-keyframes fadeInLeft { 
    0% { opacity: 0; -webkit-transform: translateX(-40px); } 
    100% { opacity: 1; -webkit-transform: translateX(0); } 
} 


@keyframes fadeInLeft { 
    0% { opacity: 0; transform: translateX(-40px); } 
    100% { opacity: 1; transform: translateX(0); } 
} 


.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }




@-webkit-keyframes fadeInRight { 
    0% { opacity: 0; -webkit-transform: translateX(40px); } 
    100% { opacity: 1; -webkit-transform: translateX(0); } 
} 

@keyframes fadeInRight { 
    0% { opacity: 0; transform: translateX(40px); } 
    100% { opacity: 1; transform: translateX(0); } 
} 

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }



@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 

@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 


.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }




@-webkit-keyframes bounceInDown { 
   0% { 
       opacity: 0; 
        -webkit-transform: translateY(-2000px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateY(30px); 
    } 
    80% { 
        -webkit-transform: translateY(-10px); 
    } 
    100% { 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-2000px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateY(30px); 
    } 
    80% { 
        transform: translateY(-10px); 
    } 
    100% { 
        transform: translateY(0); 
    } 
} 

.bounceInDown { 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}







/*  PARRALAX    */


.module.parallax {
	height: auto;
	min-height:500px;
	background-position:50%  100%;
	background-repeat: no-repeat;
	-webkit-background-attachment: fixed;
	-moz-background-attachment: fixed;
	-o-background-attachment: fixed;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-box-shadow: 0 0 140px 32px rgba(0, 0, 0, 1.00) inset;
	-moz-box-shadow: 0 0 140px 32px rgba(0, 0, 0, 1.00) inset;
	box-shadow: 0 0 140px 32px rgba(0, 0, 0, 1.00) inset;
	padding:100px 0 70px;
/*
	-webkit-transform: translateZ(0x);
*/
}

.module.parallax-acc01 {background-image: url("../img/fond/parallax-acceuil-01.jpg");}
.module.parallax-acc02 {background-image: url("../img/fond/parallax-acceuil-02.jpg");background-position:50% bottom;}
.module.parallax-acc03 {background-image: url("../img/fond/parallax-acceuil-03.jpg");background-position:50% bottom;}

.module.parallax-apropos01 {background-image: url("../img/fond/parallax-apropos.jpg");background-position:50% bottom;}
.module.parallax-apropos02 {background-image: url("../img/fond/parallax-apropos-02.jpg");background-position:50% bottom;}
.module.parallax-apropos03 {background-image: url("../img/fond/parallax-apropos-03.jpg");background-position:50% bottom;}

.module.parallax-services01 {background-image: url("../img/fond/parallax-services-01.jpg");background-position:50% bottom;}
.module.parallax-services02 {background-image: url("../img/fond/parallax-services-02.jpg");background-position:50% bottom;}

.module.parallax-client01 {background-image: url("../img/fond/parallax-client-01.jpg");background-position:50% bottom;}
.module.parallax-client02 {background-image: url("../img/fond/parallax-client-02.jpg");background-position:50% bottom;}

.module.parallax-realisation {background-image: url("../img/fond/paralax-realisation.jpg");background-position:50% bottom;}

.module.parallax-presse01 {background-image: url("../img/fond/parallax-presses-01.jpg");background-position:50% bottom;}
.module.parallax-presse02 {background-image: url("../img/fond/parallax-presses-02.jpg");background-position:50% bottom;}
.module.parallax-presse03 {background-image: url("../img/fond/parallax-presses-03.jpg");background-position:50% bottom;}






.module.fresque-wendake{background-image: url("../img/exposition/fesque-wendake.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-quebec {background-image: url("../img/exposition/fresque-quebec.jpg");background-position:50% bottom;box-shadow:none}

.module.fresque-montjoli{background-image: url("../img/exposition/fresque-mont-joli.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-eustache{background-image: url("../img/exposition/fresque-st-eustache.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-beaupre{background-image: url("../img/exposition/fesque-beaupre.jpg");background-position:50% bottom;box-shadow:none}


.module.fresque-TR{background-image: url("../img/exposition/fresque-trois-rivieres.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-VICTO{background-image: url("../img/exposition/fesque-victoriaville.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-stb{background-image: url("../img/exposition/fesque-stbasile.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-pointec{background-image: url("../img/exposition/fesque-pointe-claire.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-boisbriand{background-image: url("../img/exposition/fesque-boisbriand.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-malbaie{background-image: url("../img/exposition/fesque-malbaie.jpg");background-position:50% bottom;box-shadow:none}
.module.fresque-joliette{background-image: url("../img/exposition/fesque-joliette.jpg");background-position:50% bottom;box-shadow:none}






#head-page.module.parallax ,#head-page.module.parallax{
	min-height:650px;
	box-shadow:none;
	padding:140px 0 70px}


#head-page.module.parallax.headApropos{background-image: url("../img/fond/haut-apropos.jpg");background-position:50% bottom;}
#head-page.module.parallax.headServices{background-image: url("../img/fond/haut-services.jpg");background-position:50% bottom;}
#head-page.module.parallax.headCLients{background-image: url("../img/fond/haut-clients.jpg");background-position:50% bottom;}
#head-page.module.parallax.headExpositions{background-image: url("../img/fond/haut-expositions.jpg");background-position:50% bottom;}
#head-page.module.parallax.headPresses{background-image: url("../img/fond/haut-presses.jpg");background-position:50% bottom;}
#head-page.module.parallax.headContact{background-image: url("../img/fond/haut-contact.jpg");background-position:50% bottom;}


#head-page.module.parallax.headResidentiel{background-image: url("../img/fond/haut-residentiel.jpg");background-position:50% bottom;}
#head-page.module.parallax.headCommercial{background-image: url("../img/fond/haut-commercial.jpg");background-position:50% bottom;}
#head-page.module.parallax.headPublic{background-image: url("../img/fond/haut-public.jpg");background-position:50% bottom;}
#head-page.module.parallax.headSocial{background-image: url("../img/fond/haut-social.jpg");background-position:50% bottom;}





/*  APPEAR ON SCROLL  */
.bloc-scroller{overflow: hidden;}

.scrollside {
	/*overflow: hidden;*/  /* supprimer car le texte des logos (page apropos / equipe) disparaissait */
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-moz-transition: -moz-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

/* Initial state (hidden or anything else) */
.cbp-so-init .scrollside {
	opacity: 0;
}

.cbp-so-init .appearLeft {
	-webkit-transform: translateX(-80px);
	-moz-transform: translateX(-80px);
	transform: translateX(-80px);
}

.cbp-so-init .appearRight {
	-webkit-transform: translateX(80px);
	-moz-transform: translateX(80px);
	transform: translateX(80px);
}


	
.cbp-so-init .appearFadeDown {
	-webkit-transform: translateY(80px);
	-moz-transform: translateY(80px);
	transform: translateY(80px);
	
	}


.scrollSection.cbp-so-animate .appearLeft,
.scrollSection.cbp-so-animate .appearRight {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
	opacity: 1;
}

.scrollSection.cbp-so-animate .appearFadeDown{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
	}




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

.module.parallax {
		-webkit-background-attachment: scroll;
	-moz-background-attachment: scroll;	
	background-attachment:scroll; 
	
}



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

.module.parallax {
	height: auto;
	min-height:300px;
	padding:30px 0;
	-webkit-background-attachment: scroll;
	-moz-background-attachment: scroll;	
	background-attachment:scroll; 
	
}
#head-page.module, #head-page.module.parallax{
	min-height:300px;
	padding:100px 0 50px
	}
}