@charset "UTF-8";

/*!
 * ConvergenWeb - info@convergenceweb.ch
 * realised_pub.css 
 * Copyright (c) 2021 ConvergenceWeb
 */
 
/************************************************** cellule haut gauche*/

#trame-pubactivity {
	padding: 0.5vh 5vw;
	display:flex;
	flex-direction: row;
}
#trame-pubactivity figure {
    margin: 0 0.5vw 0 0;
}

.snip1487 {
  position: relative;
  overflow: hidden;
  width: 97%;
  height: 20vh;
  text-align: center;
  background-color: #282828;
  border-radius:50vh 0 0 0;
}
.snip1487 *,
.snip1487 *:before,
.snip1487 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.snip1487 img {
  height: 24vh;
  width:auto;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1487 figcaption {
  position: absolute;
  top: 71%;
  width: 100%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  padding:0;
  opacity: 0;
  
}
.snip1487 h3 {
  background: linear-gradient(90deg, rgba(193,88,39,1), rgba(193,88,39,0));
  border-radius:0 ;
  font-family:'Sora', sans-serif;
  padding:1.5vh 0 1vh;
  letter-spacing: 0;
  font-size: 1.5vw;
  font-weight: 300;
  line-height:100%;
  color: #fff;
}
.snip1487 p {
  height:6vh;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  border-radius: 0 ;
  font-family:'Sora', sans-serif;
  letter-spacing: 0;
  font-size: 1.2vw;
  font-weight: 100;
  color: #fff;
}
.snip1487 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1487:hover img,
.snip1487.hover img {
  zoom: 1;
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -webkit-transform: translateX(-1.5vw);
  transform: translateX(-1.5vw);
}
.snip1487:hover figcaption,
.snip1487.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
}

/******************************************************* cellule centre haut*/

.snip1488 {
  position: relative;
  overflow: hidden;
  width: 97%;
  height: 20vh;
  text-align: center;
  background-color: #282828;
  border-radius:0;
}
.snip1488 *,
.snip1488 *:before,
.snip1488 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.snip1488 img {
  height: 24vh;
  width:auto;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1488 figcaption {
  position: absolute;
  top: 71%;
  width: 100%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  padding: 0;
  opacity: 0;
  
}
.snip1488 h3 {
   background: rgba(193,88,39,0.3);
  border-radius: 0;
  font-family:'Sora', sans-serif;
  padding:1.5vh 0 1vh;
  letter-spacing: 0;
  font-size: 1.5vw;
  font-weight: 300;
  line-height:100%;
  color: #fff;
}
.snip1488 p {
  height:6vh;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  border-radius: 0 ;
  font-family:'Sora', sans-serif;
  letter-spacing: 0;
  font-size: 1.2vw;
  font-weight: 100;
  color: #fff;
}
.snip1488 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1488:hover img,
.snip1488.hover img {
  zoom: 1;
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -webkit-transform: translateX(-1.5vw);
  transform: translateX(-1.5vw);
}
.snip1488:hover figcaption,
.snip1488.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
}

/************************************************** cellule haut droite*/

.snip1489 {
  position: relative;
  overflow: hidden;
  width: 97%;
  height: 20vh;
  text-align: center;
  background-color: #282828;
  border-radius:0 50vw 0 0;
}
.snip1489 *,
.snip1489 *:before,
.snip1489 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.snip1489 img {
  height: 24vh;
  width:auto;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1489 figcaption {
  position: absolute;
  top: 71%;
  width: 100%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  padding: 0;
  opacity: 0;
  
}
.snip1489 h3 {
  background: linear-gradient(270deg, rgba(193,88,39,1), rgba(193,88,39,0));
  border-radius: 0;
  font-family:'Sora', sans-serif;
  padding:1.5vh 0 1vh;
  letter-spacing: 0;
  font-size: 1.5vw;
  font-weight: 300;
  line-height:100%;
  color: #fff;
}
.snip1489 p {
  height:6vh;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  border-radius: 0 ;
  font-family:'Sora', sans-serif;
  letter-spacing: 0;
  font-size: 1.2vw;
  font-weight: 100;
  color: #fff;
}
.snip1489 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1489:hover img,
.snip1489.hover img {
  zoom: 1;
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -webkit-transform: translateX(-1.5vw);
  transform: translateX(-1.5vw);
}
.snip1489:hover figcaption,
.snip1489.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
}

/************************************************** cellule bas gauche*/

.snip1490 {
  position: relative;
  overflow: hidden;
  width: 97%;
  height: 20vh;
  text-align: center;
  background-color: #282828;
  border-radius:0 0 0 50vw;
}
.snip1490 *,
.snip1490 *:before,
.snip1490 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.snip1490 img {
  height: 24vh;
  width:auto;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1490 figcaption {
  position: absolute;
  top: 30%;
  width: 100%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  padding:0;
  opacity: 0;
  
}
.snip1490 h3 {
  background: linear-gradient(90deg, rgba(193,88,39,1), rgba(193,88,39,0));
  border-radius: 0;
  font-family:'Sora', sans-serif;
  padding:1.5vh 0 1vh;
  letter-spacing: 0;
  font-size: 1.5vw;
  font-weight: 300;
  line-height:100%;
  color: #fff;
}
.snip1490 p {
  height:6vh;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  border-radius: 0 ;
  font-family:'Sora', sans-serif;
  letter-spacing: 0;
  font-size: 1.2vw;
  font-weight: 100;
  color: #fff;
}
.snip1490 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1490:hover img,
.snip1490.hover img {
  zoom: 1;
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -webkit-transform: translateX(-1.5vw);
  transform: translateX(-1.5vw);
}
.snip1490:hover figcaption,
.snip1490.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
}


/******************************************************* cellule centre bas*/

.snip1488b {
  position: relative;
  overflow: hidden;
  width: 97%;
  height: 20vh;
  text-align: center;
  background-color: #282828;
  border-radius:0;
}
.snip1488b *,
.snip1488b *:before,
.snip1488b *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.snip1488b img {
  height: 24vh;
  width:auto;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1488b figcaption {
  position: absolute;
  top: 30%;
  width: 100%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  padding: 0;
  opacity: 0;
  
}
.snip1488b h3 {
   background: rgba(193,88,39,0.3);
  border-radius: 0;
  font-family:'Sora', sans-serif;
  padding:1.5vh 0 1vh;
  letter-spacing: 0;
  font-size: 1.5vw;
  font-weight: 300;
  line-height:100%;
  color: #fff;
}
.snip1488b p {
  height:6vh;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  border-radius: 0 ;
  font-family:'Sora', sans-serif;
  letter-spacing: 0;
  font-size: 1.2vw;
  font-weight: 100;
  color: #fff;
}

.snip1488b a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1488b:hover img,
.snip1488b.hover img {
  zoom: 1;
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -webkit-transform: translateX(-1.5vw);
  transform: translateX(-1.5vw);
}
.snip1488b:hover figcaption,
.snip1488b.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
}

/******************************************************* cellule centre bas DERNIERE*/

.snip1488z {
  position: relative;
  overflow: hidden;
  width: 97%;
  height: 20vh;
  text-align: center;
  background-color: #282828;
  border-radius:0;
}
.snip1488z *,
.snip1488z *:before,
.snip1488z *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.snip1488z img {
  height: 24vh;
  width:auto;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1488z figcaption {
  position: absolute;
  top: 30%;
  width: 100%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  padding: 0;
  opacity: 0;
  
}
.snip1488z h3 {
 background: linear-gradient(270deg, rgba(193,88,39,1), rgba(193,88,39,0));
  border-radius: 0;
  font-family:'Sora', sans-serif;
  padding:1.5vh 0 1vh;
  letter-spacing: 0;
  font-size: 1.5vw;
  font-weight: 300;
  line-height:100%;
  color: #fff;
}


.snip1488z a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1488z:hover img,
.snip1488z.hover img {
  zoom: 1;
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -webkit-transform: translateX(-1.5vw);
  transform: translateX(-1.5vw);
}
.snip1488z:hover figcaption,
.snip1488z.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
}

/************************************************** cellule bas droite*/

.snip1491 {
  position: relative;
  overflow: hidden;
  width: 97%;
  height: 20vh;
  text-align: center;
  background-color: #282828;
  border-radius:0 0 50vw 0;
}
.snip1491 *,
.snip1491 *:before,
.snip1491 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.snip1491 img {
  height: 24vh;
  width:auto;
  backface-visibility: hidden;
  vertical-align: top; 
}

.snip1491 figcaption {
  position: absolute;
  top: 30%;
  width: 100%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  padding:0;
  opacity: 0;
  
}
.snip1491 h3 {
  background: linear-gradient(270deg, rgba(193,88,39,1), rgba(193,88,39,0));
  border-radius: 0;
  font-family:'Sora', sans-serif;
  padding:1.5vh 0 1vh;
  letter-spacing: 0;
  font-size: 1.5vw;
  font-weight: 300;
  line-height:100%;
  color: #fff;
}
.snip1491 p {
  height:6vh;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  border-radius: 0 ;
  font-family:'Sora', sans-serif;
  letter-spacing: 0;
  font-size: 1.2vw;
  font-weight: 100;
  color: #fff;
}
.snip1491 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1491:hover img,
.snip1491.hover img {
  zoom: 1;
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -webkit-transform: translateX(-1.5vw);
  transform: translateX(-1.5vw);
}
.snip1491:hover figcaption,
.snip1491.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
}


/***MEDIA QUERIES ******/

@media only screen and (min-width: 1366px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.snip1487,
.snip1488,
.snip1488b,
.snip1488z,
.snip1489,
.snip1490,
.snip1491 {
  width: 95%;
}

}
@media screen and (max-width: 1199px) and (orientation: landscape) {

}

@media screen and (max-width: 1199px) and (orientation: portrait) {
#trame-pubactivity {
   padding: 0.5vh 20vw;
   flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
#trame-pubactivity figure {
    margin: 0 0 0 0;
}
.snip1487 {
    height: 30vh;
    border-radius: 20vh 20vh 0 0;
	margin-bottom:1vh !important;
}
.snip1487 img {
    height: 31vh;
}
.snip1488,
.snip1488b,
.snip1489,
.snip1490,
.snip1490 {
    height: 30vh;
	border-radius: 0 !important;
	margin-bottom:1vh !important;
}
.snip1488 img,
.snip1488b img,
.snip1489 img,
.snip1490 img {
    height: 31vh;
}
.snip1491 {
    height: 31vh;
    border-radius: 0 0 20vh 20vh;
}
.snip1491 img {
    height: 31vh;
	margin: 0 0vw 0 5vw;
}
.snip1487 figcaption,
.snip1488 figcaption,
.snip1488b figcaption,
.snip1489 figcaption,
.snip1490 figcaption,
.snip1491 figcaption {
    top: 50%;
}
.snip1487 h3,
.snip1488 h3,
.snip1488b h3,
.snip1489 h3,
.snip1490 h3,
.snip1491 h3 {
    font-size: 4.5vw;
}
.snip1487 p,
.snip1488 p,
.snip1488b p,
.snip1489 p,
.snip1490 p,
.snip1491 p {
    font-size: 3vw;
}
}

@media screen and (max-width: 575px) and (orientation: portrait) {
.snip1487 h3,
.snip1488 h3,
.snip1488b h3,
.snip1489 h3,
.snip1490 h3 {
    font-size: 4.5vw;
}
.snip1487 p,
.snip1488 p,
.snip1488b p,
.snip1489 p,
.snip1490 p {
    font-size: 3vw;
}
.snip1487 {
    height: 25vh;
}
.snip1487 img {
    height: 25vh;
}
.snip1488,
.snip1488b,
.snip1489,
.snip1490 {
    height: 25vh;
}
.snip1488 img,
.snip1488b img,
.snip1489 img,
.snip1490 img {
    height: 25vh;
}
.snip1491 {
    height: 25vh;
  
}
.snip1491 img {
    height: 25vh;
	margin:0;
	
}
}

@media screen and (max-width: 950px) and (orientation: landscape) {
.snip1487 {
  height: 30vh;
}
.snip1487 img {
    height: 30vh;
}
.snip1488 {
 height: 30vh;
}
.snip1488 img {
    height: 30vh;
}
.snip1488b {
   height: 30vh;
}
.snip1488b img {
    height: 30vh;
}
.snip1488d {
  height: 30vh;
}
.snip1488d img {
    height: 30vh;
}
.snip1488z {
  height: 30vh;
}
.snip1488z img {
    height: 30vh;
}
.snip1489 {
   height: 30vh;
}
.snip1489 img {
    height: 30vh;
}
.snip1490 {
  height: 30vh;
}
.snip1490 img {
    height: 30vh;
}
.snip1491 {
   height: 30vh;
}
.snip1491 img {
    height: 30vh;
}
}