.pageWrapper{
  
}

.hero{
  position: relative; 
  width: 100%; min-height: 100vh;
	overflow: hidden;

}

.hero .hero_bg{
  position: absolute; 
  top: 0; left: 50%;
  transform: translateX(-50%); 
  width: 150%; height: 100%; 
  background: url(images/background/bg-accueil-hero-1.svg) no-repeat;
  background-size: 3000px 1080px; 
  background-position: center bottom!important;
	overflow: hidden;

  
  
}

.hero_bg .bg_layout{
  position: absolute; top: 50%; left: 50%; 
  scale: 0.8;
}

.hero_bg .bubble{
  position: absolute; 
  top: 50%; left: 50%; 
  background-size: cover!important; 
  background-position: center!important;
}

.hero_bg .bubbleWrapper:nth-child(1) .bubble{display: none;background: url(images/background/leaf-hand.png) no-repeat;}
.hero_bg .bubbleWrapper:nth-child(2) .bubble{background: url(images/background/poeople-on-hill.png) no-repeat;}
.hero_bg .bubbleWrapper:nth-child(3) .bubble{background: url(images/background/leaf-hand.png) no-repeat;}

.hero_bg .bubbleWrapper{
  position: absolute; 
  top: 50%; left: 50%; 
}

.hero_bg .bubbleWrapper:nth-child(1) .bubble{
  position: absolute; 
  width: 510px; height: 510px; 
  transform: translateY(-50%) translateX(-50%);
  border-radius: 50%;
}

.hero_bg .bubbleWrapper:nth-child(1){
    transform: translateX(800px) translateY(0) rotate(60deg);
    opacity: 0;
    transition-duration: 1s;
}

.hero_bg.do_show .bubbleWrapper:nth-child(1){
    transform: translateX(0) translateY(0) rotate(0);
    opacity: 1;
}

#deck_2 p{font-size: 24px;}

.hero_bg .bubbleWrapper:nth-child(2){
  position: absolute; 
  transform: translateY(-194px) translateX(525px);
}

.hero_bg .bubbleWrapper:nth-child(2) .bubble{
  width: 350px; height: 350px; 
  position: absolute; 
  transform: translateX(800px) translateY(-50%) rotate(60deg);
  opacity: 1;
  border-radius: 50%;
  transition-duration: 1s;
  transition-delay: 0.1s;
}

.hero_bg.do_show .bubbleWrapper:nth-child(2) .bubble{
    transform: translateX(-50%) translateY(-50%) rotate(0);
    opacity: 1;
}

.hero_bg .bubbleWrapper:nth-child(3){
  position: absolute; 
  transform: translateY(500px) translateX(1000px) rotate(80deg);
  opacity: 0;
  transition-duration: 1s;
  transition-delay: 0.2s;
}

.hero_bg.do_show .bubbleWrapper:nth-child(3){
    transform: translateY(450px) translateX(350px) rotate(0);
    opacity: 1;
}

.hero_bg .bubbleWrapper:nth-child(3) .bubble{
  width: 350px; height: 350px; 
  position: absolute; 
  transform: translateY(-50%) translateX(-50%);
  border-radius: 50%;
}

.bubble_black{  background: black; width: 175px; height: 175px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.bubble_white{  background: #CDCDCD; width: 175px; height: 175px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}

.hero_bg .bubbleWrapper:nth-child(4){transform: translateX(780px) translateY(-275px);}
.hero_bg .bubbleWrapper:nth-child(5){transform: translateX(975px) translateY(577px);}
.hero_bg .bubbleWrapper:nth-child(5) > div{width: 193px; height: 193px;}
.hero_bg .bubbleWrapper:nth-child(6){transform: translateX(430px) translateY(75px);}
.hero_bg .bubbleWrapper:nth-child(7){transform: translateX(780px) translateY(-100px);}
.hero_bg .bubbleWrapper:nth-child(8){transform: translateX(780px) translateY(577px);}
.hero_bg .bubbleWrapper:nth-child(8) .bubble_white{width: 193px; height: 193px; background: #e2e2e2;}

.hero_bg .bubbleWrapper:nth-child(4) > div{transform: translateX(300px) translateY(0%); opacity: 0; transition-duration: 0.4s; transition-delay: 0.3;}
.hero_bg .bubbleWrapper:nth-child(5) > div{transform: translateX(300px) translateY(0%); opacity: 0; transition-duration: 0.3s; transition-delay: 0.4;}
.hero_bg .bubbleWrapper:nth-child(6) > div{transform: translateX(300px) translateY(0%); opacity: 0; transition-duration: 0.5s; transition-delay: 0.5;}
.hero_bg .bubbleWrapper:nth-child(7) > div{transform: translateX(300px) translateY(0%); opacity: 0; transition-duration: 0.2s; transition-delay: 0.3;}
.hero_bg .bubbleWrapper:nth-child(8) > div{transform: translateX(300px) translateY(0%); opacity: 0; transition-duration: 0.8s; transition-delay: 0.2;}

.hero_bg.do_show .bubbleWrapper:nth-child(4) > div{transform: translateX(0%) translateY(0%); opacity: 1;}
.hero_bg.do_show .bubbleWrapper:nth-child(5) > div{transform: translateX(0%) translateY(0%); opacity: 1;}
.hero_bg.do_show .bubbleWrapper:nth-child(6) > div{transform: translateX(0%) translateY(0%); opacity: 1;}
.hero_bg.do_show .bubbleWrapper:nth-child(7) > div{transform: translateX(0%) translateY(0%); opacity: 1;}
.hero_bg.do_show .bubbleWrapper:nth-child(8) > div{transform: translateX(0%) translateY(0%); opacity: 1;}


@media(min-width: 1024px){
    .hero h2, h2{font-size: 48px; font-weight: 700; }
    .hero h2, .hero p{padding-bottom: 0.5em;}
    
    .webWrapper_hero{
        width: calc(100% - 320px);
        max-width: 1900px;
        margin: 0 auto;
        height: 100vh; 
        position: relative;
        display: flex; 
        align-items: center;
      }
}


#deck_video{
	padding: 120px 0; 
	background: url(images/background/red-bg.svg) no-repeat;
	background-size: 3000px 3000px!important;
    background-position: center!important;
    position: relative;

	color: white;
}

#deck_video .grid{align-items: center;}

#deck_video h2{font-weight: 300; padding-bottom: 0.5em;}

#deck_video .video_wrapper{display: block; text-align: center; position: relative; z-index: 3;}

#deck_video .video_wrapper iframe{z-index: 15; position: relative;}


.webWrapper{
  width: calc(100% - 80px);
  max-width: 1900px;
  margin: 0 auto;
  position: relative;
  height: 100%; 
}

.webWrapper_hero{
  width: calc(100% - 80px);
  max-width: 1900px;
  margin: 0 auto;
  height: 100vh; 
  position: relative;
  display: flex; 
  align-items: center;
}

.webWrapper_hero > div{
  width: 40%;

  transform: translateY(300px);
  opacity: 0; 
  transition-duration: 1s;
  transition-delay: 0.5s;
}

@media(min-width: 840px){
	.webWrapper_hero > div{
		min-width: 400px;	
	}
}

.webWrapper_hero.do_show > div{
    transform: translateY(0);
    opacity: 1;
    
}

.webWrapper_hero > div h1{
  font-weight: 300;
  line-height: 1.5em;
  margin-bottom: 1.5em;
}

.webWrapper_hero > div h1 strong{font-weight: 700;}



@media(min-width: 1400px){
  .webWrapper_hero > div h1{
    font-size: 2.5em;
  }
}

.grid p{padding: 0; margin: 0;}

#deck_1{
    padding: 5vh 0;
    background: var(--light-grey);
}

#deck_1 .grid{
    padding: 70px 0;
}

#deck_1 .narrow_wrapper{
	padding: 70px 0;
	width: 100%;
	max-width: 640px; 
	margin: 0 auto;
}

#deck_1 .narrow_wrapper ol li{
	padding: 0.2em 0 0.2em 0.5em;
}

#deck_2{
    padding: 120px 0; 
    
}



#deck_2 .grid p{
    font-size: 24px; 
    
}

@media(min-widdth: 1400px){
    #deck_2 .grid p{
        font-size: 28px; 
        
    }
}

.wrapper_disc{
    display: block; 
    text-align: center;
    margin-bottom: 28px;
}

.wrapper_disc > div{
    display: inline-block; 
    width: 38px; height: 38px; 
    background: var(--primary-color);
    border-radius: 50%; 
    margin: 0 3px; 
}

#deck_2 .grid{
    margin-bottom: 20px;
}

#deck_2 a.button{margin-top: 40px; display: inline-block;}
#deck_2 a.button:hover{color: var(--primary-color);}

#deck_3{padding: 120px 0;}

#deck_3 h2{font-size: 1.4em; font-weight: normal;}

#deck_3 img{width: 100%; border-radius: 50%; }

#deck_3 > .webwrapper > .grid{
    margin: 80px 0 0 0;
}

#deck_3 .grid .textwrapper{
    padding: 0 0 120px 100px;
    position: relative;
}

#deck_3 .grid .textwrapper h3{
	font-size: 28px;
	padding-bottom: 0.5em;
}

#deck_3 .grid .textwrapper a{
    position: absolute; bottom: 0; left: 100px;
}

#deck_3 h3{font-size: 24px;}

#deck_3 .grid.grid_1_1 > div{position: relative;}

#deck_3 .grid > div .box{width: 100%; height: 100%; position: relative;}
#deck_3 .grid > div .box:hover{z-index: 5;}


#deck_3 .grid > div .box .bg{
    background: white;
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;
    transition-duration: 0.25s;
    transform: translateX(0) translateY(0);

}

#deck_3 .grid > div .box:hover .bg{
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    transform: translateX(-40px) translateY(-40px);
    background: var(--primary-color);
    box-shadow: 0 0 20px #999;
}


#deck_3 .grid > div .box h3, #deck_3 .grid > div .box p{color: var(--text-color); transition-duration: 0.25s;}
#deck_3 .grid > div .box:hover h3, #deck_3 .grid > div .box:hover p{color: white;}

#deck_3 .grid > div .icon{width: 85px; height: 85px; position: absolute; top: 0; left: 0; }
#deck_3 .grid > div .icon::before, #deck_3 .grid > div .icon::after{content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: 90%!important; background-position: left top!important;}

#deck_3 .grid > div .box .icon::before{opacity: 1; transition: 0.25s;}
#deck_3 .grid > div .box .icon::after{opacity: 0; transition: 0.25s;}

#deck_3 .grid > div .box:hover .icon::before{opacity: 0;}
#deck_3 .grid > div .box:hover .icon::after{opacity: 1;}

#deck_3 .grid > div .box::nth-child(1) .icon{
    
    
}

#deck_3 .grid.grid_1_1 > div:nth-child(1) .icon::before{background: url(images/buttons/service-1-red.svg) no-repeat; }
#deck_3 .grid.grid_1_1 > div:nth-child(1) .icon::after{background: url(images/buttons/service-1-white.svg) no-repeat; }

#deck_3 .grid.grid_1_1 > div:nth-child(2) .icon::before{background: url(images/buttons/service-2-red.svg) no-repeat; }
#deck_3 .grid.grid_1_1 > div:nth-child(2) .icon::after{background: url(images/buttons/service-2-white.svg) no-repeat; }

#deck_3 .grid.grid_1_1 > div:nth-child(3) .icon::before{background: url(images/buttons/service-3-red.svg) no-repeat; }
#deck_3 .grid.grid_1_1 > div:nth-child(3) .icon::after{background: url(images/buttons/service-3-white.svg) no-repeat; }

#deck_3 .grid.grid_1_1 > div:nth-child(4) .icon::before{background: url(images/buttons/service-4-red.svg) no-repeat; }
#deck_3 .grid.grid_1_1 > div:nth-child(4) .icon::after{background: url(images/buttons/service-4-white.svg) no-repeat; }

#deck_3 .grid.grid_1_1 > div:nth-child(5) .icon::before{background: url(images/buttons/service-5-red.svg) no-repeat; }
#deck_3 .grid.grid_1_1 > div:nth-child(5) .icon::after{background: url(images/buttons/service-5-white.svg) no-repeat; }

#deck_3 .grid > div .box a.button{
    position: absolute; 
    bottom: 20px; 
    left: 100px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    transition-duration: 0.25s;
}

#deck_3 .grid > div .box:hover a.button{
    border: 2px solid white; 
    color: white;
}


#deck_4{padding: 120px 0; background: var(--light-grey);}

#deck_4 .blog_slider{
    margin: 70px 0;
}

#deck_4 .item{
    background: white;
    margin: 50px 30px;
    box-shadow: 0 0 20px #999;
    transition-duration: 250ms;
}

#deck_4 .item.slick-current{
    transform: scale(1.1);
}

#deck_4 .item img{width: 100%; }

#deck_4 .item .textwrapper{
    padding: 40px 40px 120px 40px; display: block; 
    position: relative;
}

#deck_4 .item .textwrapper a.button{
    position: absolute; 
    bottom: 40px; left: 40px;
}

#deck_4 .slick-next{
    background: url(images/buttons/arrow-right-black.svg) no-repeat; background-size: 100%; 
    background-position: center;
}

#deck_4 .slick-next::before{opacity: 0;}

#deck_4 .slick-prev{
    background: url(images/buttons/arrow-left-black.svg) no-repeat; background-size: 100%; 
    background-position: center;
}

#deck_4 .slick-prev::before{opacity: 0;}

.slick-dots li button:before {font-size: 12px;}

#deck_5{padding: 120px 0; }

#deck_1 h2, #deck_2 h2, #deck_3 h2, #deck_4 h2, #deck_5 h2, #deck_6 h2, #deck_services h2{
    font-size: 2em; 
    font-weight: normal;
}

#deck_5 .logo_slider{
    margin: 80px auto;
    max-width: 840px;
}

#deck_5 .logo_slider .item{
    width: 175px; height: 130px; 
    margin: 40px 10px;
    position: relative;
    
}

#deck_5 .logo_slider .item .logo_wrapper{
    position: absolute; 
    width: 100%; height: 100%; 
    background-size: contain!important;
    background-position: center!important;
}

@media(max-width: 641px){
	#deck_5 .logo_slider .item .logo_wrapper{transform: scale(1.5);}
}

@media(min-width: 640px){
	
	#deck_5 .logo_slider .item:nth-child(odd) .logo_wrapper{transform: translateY(50px) scale(1.5);}
	#deck_5 .logo_slider .item:nth-child(even) .logo_wrapper{transform: translateY(-50px) scale(1.5);}	
}


#deck_5 .slick-prev, #deck_5 .slick-next{
    width: 38px; height: 38px;
    border-radius: 50%; 
    background: var(--primary-color);
}

#deck_5 .slick-prev{
    transform: translateY(-85px) translateX(-20px);
}

#deck_5 .slick-prev::after{
    content: "";
    width: 38px; height: 38px;
    border-radius: 50%; 
    background: var(--primary-color);
    transform: translateX(-45px) translateY(-50%);;
    display: block;

}

#deck_5 .slick-next::after{
    content: "";
    width: 38px; height: 38px;
    border-radius: 50%; 
    background: var(--primary-color);
    transform: translateX(45px) translateY(-50%);;
    display: block;

}

#deck_5 .slick-next{
    transform: translateY(50px) translateX(20px);
}

#deck_5 .slick-prev::before, #deck_5 .slick-next::before{
    content: "";
    width: 45px; height: 45px; 
    border-radius: 50%; 
    background: var(--primary-color);
}
#deck_5 .slick-next::after{opacity: 1;}

#deck_6{
    padding: 110px 0; 
    background: var(--light-grey);
	overflow: hidden;
}

#deck_6 .webwrapper{
    position: relative;
}

#deck_6 .text_wrapper{
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%) ;
}

#deck_6 .text_wrapper .button{margin-top: 30px; display: inline-block;}



.spin_block{
    width: 1000px; 
    height: 1000px;
    margin: 20px auto;
    position: absolute; 
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#deck_6 .webwrapper .spin_block .center_block{
    position: absolute; top: 50%; left: 50%;
    transform: rotate(-15deg);
    transition-duration: 1s;
}

#deck_6 .webwrapper:hover .spin_block .center_block{
    transform: rotate(30deg);
}

.spin_block .bubble_center{
    position: absolute; 
    top: 0; left: 0;
}

.spin_block .bubble_center .bubble{
    position: absolute; top: 50%; left: 340px; 
    width: 150px; height: 150px; 
    border-radius: 50%;
    background: #cdcdcd;
}

.spin_block .bubble_center .bubble .img{
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    width: 100%; height: 100%; 
    background-size: cover!important; 
    background-position: center!important;
    transition-duration: 1s;
}

.spin_block .bubble_center:nth-child(1) .bubble{transform: scale(0.15);}
.spin_block .bubble_center:nth-child(2) .bubble{transform: scale(0.2);}
.spin_block .bubble_center:nth-child(3) .bubble{transform: scale(1.1);}
.spin_block .bubble_center:nth-child(4) .bubble{transform: scale(0.3);}
.spin_block .bubble_center:nth-child(5) .bubble{transform: scale(0.4);}
.spin_block .bubble_center:nth-child(6) .bubble{transform: scale(0.5);}
.spin_block .bubble_center:nth-child(7) .bubble{transform: scale(1.1);}
.spin_block .bubble_center:nth-child(8) .bubble{transform: scale(0.5);}
.spin_block .bubble_center:nth-child(9) .bubble{transform: scale(0.6);}
.spin_block .bubble_center:nth-child(10) .bubble{transform: scale(1.2);}
.spin_block .bubble_center:nth-child(11) .bubble{transform: scale(0.7);}
.spin_block .bubble_center:nth-child(12) .bubble{transform: scale(0.8);}

#deck_6 .webwrapper .spin_block .bubble_center:nth-child(3) .bubble .img{background: url(https://co-devenir.com/wp-content/uploads/2023/08/management.jpg) no-repeat; transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1.5); }
#deck_6 .webwrapper .spin_block .bubble_center:nth-child(7) .bubble .img{background: url(https://co-devenir.com/wp-content/uploads/2023/09/co-dev-cover-2.jpg) no-repeat; transform: translateX(-50%) translateY(-50%) rotate(-165deg) scale(1.5); }
#deck_6 .webwrapper .spin_block .bubble_center:nth-child(10) .bubble .img{background: url(https://co-devenir.com/wp-content/uploads/2023/09/co-dev-cover-1.jpg) no-repeat; transform: translateX(-50%) translateY(-50%) rotate(-255deg) scale(1.5); }

#deck_6 .webwrapper:hover .spin_block .bubble_center:nth-child(3) .bubble .img{transform: translateX(-50%) translateY(-50%) rotate(-95deg) scale(1.5); }
#deck_6 .webwrapper:hover .spin_block .bubble_center:nth-child(7) .bubble .img{transform: translateX(-50%) translateY(-50%) rotate(-210deg) scale(1.5); }
#deck_6 .webwrapper:hover .spin_block .bubble_center:nth-child(10) .bubble .img{transform: translateX(-50%) translateY(-50%) rotate(-300deg) scale(1.5); }


@media(max-width: 1200px){
    .hero .hero_bg{
        transform: translateX(-47%);
      }
}

@media(max-width: 1100px){
    .webWrapper_hero > div{
        width: 50%;
		padding: 80px 0;
      }

      .hero .hero_bg{
        transform: translateX(-40%);
      }

      #deck_3 .grid.grid_1_2{
        grid-template-columns: 1fr;
      }
      #deck_3 .imgwrapper{text-align: center;}
      #deck_3 img{max-width: 350px; margin: 0 auto;}

      #deck_3, #deck_4, #deck_5, #deck_6{
        padding: 80px 0;
      }

      #deck_4 .blog_slider{padding: 30px;}

      #deck_4 .blog_slider{margin: 30px 0;}

      #deck_4 .item{max-width: 300px;}
}

.wishes--wrapper h1 {
	font-weight: bold!important;
	margin-bottom: 20px!important;
	}
.calendar--cards {
	position: relative;
    display: block;
    margin: 0;
    text-align: center;
}


@media(min-width: 1024px){
    .hero h2, h2{font-size: 48px; font-weight: 700; }

    .webWrapper_hero{
        width: calc(100% - 320px);
        max-width: 1900px;
        margin: 0 auto;
        height: 100vh; 
        position: relative;
        display: flex; 
        align-items: center;
      }
	.wishes--wrapper {
		width: 100%!important;
        max-width: 1440px!important;
		height: 100%!important;
		justify-content: space-evenly;
		align-items: flex-start;
		margin-top: 100px;
		margin-bottom: 60px;
	}
	.calendar {
		display: grid;
    	grid-template-columns: repeat(auto-fill, 180px);
	}
	.calendar--cards img {
		display: block;
  		width: 100%;
  		height: auto;
	}
	.calendar--title {
		position: absolute;
    	position: absolute;
  		top: 50%;
  		left: 50%;
  		-webkit-transform: translate(-50%, -50%);
  		-ms-transform: translate(-50%, -50%);
  		transform: translate(-50%, -50%);
  		text-align: center;
		color: #fff;
		font-size: 14px;
	}
	.overlay {
		position: absolute;
  		top: 50%;
        right: 50%;
        translate: 50% -50%;
        height: 154px;
        width: 159px;
        border-radius: 20px;
  		opacity: 0;
  		transition: .5s ease;
  		background-color: #f26460;
	}
	.calendar--cards:hover .overlay {
 		opacity: 1;
	}
	.icon--wishes {
		position: absolute;
		bottom: -160px;
	}
	.calendar--mobile {
		display: none;
	}
}
@media(max-width: 1023px) {
	.wishes--wrapper {
		flex-direction: column;
		height: 100%!important;
	}
	.calendar {
		display: none;
	}
	.icon--wishes {
		display: none;
	}
	.calendar--mobile {
		display: grid;
		grid-template-columns: repeat(auto-fill, 340px);
		justify-content: center;
		padding-top: 0!important;
	}
}

@media(max-width: 840px){
    #deck_4 .item{width: 280px;}

    .webWrapper_hero > div{width: 100%;}


    .hero .hero_bg{
        background: url(images/background/co-devenir-hero-bg-mobile.svg) no-repeat;
        background-size: 1200px 900px; 
        background-position: top center!important;
        position: relative; 
        top: initial; 
        width: 100%;
        margin-left: -55px;
        height: 60vh;
		overflow: hidden;
    }

    .webWrapper_hero{
        height: initial;
		padding-bottom: 5vh;
		margin: 0 20px;
		width: calc(100% - 40px);
    }

	.webWrapper_hero a{
		width: 100%;
		text-align: center;
		margin: 0.2em 0;
	}
    

    .hero_bg.do_show .bubbleWrapper:nth-child(1){
        transform: translateX(-260px) translateY(-210px) scale(0.7);
    }

    .hero_bg.do_show .bubbleWrapper:nth-child(2){
        transform: translateX(100px) translateY(-50px) scale(0.6);
    }

    .hero_bg.do_show .bubbleWrapper:nth-child(3){
        transform: translateX(0px) translateY(210px) scale(0.7);
    }
	
	#deck_4 .item .textwrapper{
		padding: 20px 20px 100px 20px;
	}
	
	#deck_4 .item .textwrapper a.button{left: 20px;}

}

@media(max-width: 640px){
    #deck_1, #deck_2, #deck_3, #deck_4, #deck_5, #deck_6{
        padding: 60px 0;
      }

      #deck_4 .blog_slider{margin: 20px 0; padding: 20px 0;}

      .webWrapper_hero > div h1{font-size: 1.5em;}

      #deck_4 .bubble_graph{height: initial;}
}


#deck_services{
    padding: 120px 0 120px 0;
}

#deck_services.padding_top_0{
padding-top: 0;
}

#deck_services img{width: 100%; border-radius: 50%; }

#deck_services > .webwrapper .grid_1_1{
margin: 80px 0 -4em 0;
}

#deck_services .grid .textwrapper{
padding: 0 0 100px 100px;
position: relative;
}

@media(max-width: 840px){
	#deck_services .grid .textwrapper{
		padding-left: 0;
	}
}

#deck_services .grid .textwrapper a{
position: absolute; bottom: 0; left: 100px;
}

#deck_services .grid.grid_1_1 > div{position: relative;}

#deck_services .grid > div .box{width: 100%; height: 100%; position: relative;}
#deck_services .grid > div .box:hover{z-index: 5;}

#deck_services .grid > div .box h2{font-size: 1.6em; padding-bottom: 0.5em;}

#deck_services .grid > div .box .bg{
position: absolute; top: 0; left: 0; 
width: 100%; height: 100%;
transition-duration: 0.25s;
transform: translateX(0) translateY(0);

}

#deck_services .grid > div .box:hover .bg{
width: calc(100% + 80px);
height: calc(100% + 80px);
transform: translateX(-40px) translateY(-40px);
background: var(--primary-color);
box-shadow: 0 0 20px #999;
}


#deck_services .grid > div .box h3, #deck_3 .grid > div .box p{color: var(--text-color); transition-duration: 0.25s;}
#deck_services .grid > div .box:hover h2, #deck_services .grid > div .box:hover p{color: white;}

#deck_services .grid > div .icon{width: 85px; height: 85px; position: absolute; top: 0; left: 0; }


@media(max-width: 840px){
	#deck_services .grid > div .box{
		padding-top: 90px;
	}
	
	#deck_services .grid > div .icon{
		left: 50%;
		transform: translateX(-50%);
	}
}

#deck_services .grid > div .icon .icon_1, #deck_services .grid > div .icon .icon_2{
position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
background-size: cover!important; background-position: center!important;
transition-duration: 0.25s;
}

#deck_services .grid > div .icon .icon_2{opacity: 0;}

#deck_services .grid > div:hover .icon .icon_1{opacity: 0;}
#deck_services .grid > div:hover .icon .icon_2{opacity: 1;}

#deck_services .grid > div .box a.button{
position: absolute; 
bottom: 20px; 
left: 100px;
border: 2px solid var(--primary-color);
color: var(--primary-color);
background: transparent;
transition-duration: 0.25s;
}

#deck_services .grid > div .box:hover a.button{
border: 2px solid white; 
color: white;
}

#deck_services .grid > div .box strong {
    font-size: 1.2em;
    padding-bottom: 0.5em;
    display: block;
}

.webWrapper_hero .button, .webWrapper_hero .red_button{display: inline-block; margin-right: 31px; transform: translateY(10px)!important; font-size: 14px;}

.imagewrapper{
	width: 100%; 
	height: 100%; 
	min-height: 50vh;
	min-height: 350px;
	background-size: cover!important; 
	background-position: center!important; 
	border-radius: 30px;
}