.cadre-box {
  width: 94%;
  height: 27vw;  
  max-height: 495px;
  transition: transform .2s;
  position: relative;  
  cursor: pointer;
}

.cadre-box-bottom, .cadre-box-large {  
  height: 24vw !important;   
}

.cadre-box:before {
  position: absolute;
  content: "";
  width: 10%;
  height: 7%;
  top: -1px;
  left: -1px;  
  border-left: 1px solid rgb(145, 145, 145);  
  border-top: 1px solid rgb(145, 145, 145);
}

.cadre-box:after {
  position: absolute;
  content: "";
  width: 10%;
  height: 7%;
  right: -1px;
  bottom: -1px;  
  border-right: 1px solid rgb(145, 145, 145);
  border-bottom: 1px solid rgb(145, 145, 145);
}

.small-cadre:before {  
  width: 10% !important;
  height: 8% !important;  
}

.small-cadre:after {  
  width: 10% !important;
  height: 8% !important;  
}

.pseudo-small-cadre:before {  
  width: 10% !important;
  height: 8% !important;  
}

.pseudo-small-cadre:after {  
  width: 10% !important;
  height: 8% !important;  
}

.pseudo-cadre-box {
  width: 100%;
  height: 27vw;
  max-height: 495px;
  top: 0;
  left: 0;
  position: absolute;  
}

.pseudo-cadre-box-bottom {
  height: 24vw !important; 
}

.pseudo-cadre-box:before {
  position: absolute;
  content: "";
  width: 10%;
  height: 7%;
  top: -1px;
  right: -1px;  
  border-right: 1px solid rgb(145, 145, 145);
  border-top: 1px solid rgb(145, 145, 145);
}

.pseudo-cadre-box:after {
  position: absolute;
  content: "";
  width: 10%;
  height: 7%;
  left: -1px;
  bottom: -1px;  
  border-left: 1px solid rgb(145, 145, 145);
  border-bottom: 1px solid rgb(145, 145, 145);
}

.cadre-box-large {
  width: 98.5%;
  height: 26vw;
  transition: transform .2s;
  position: relative;
}

.cadre-box-large:before {
  position: absolute;
  content: "";
  width: 10%;
  height: 7%;
  top: -1px;
  left: -1px;  
  border-left: 1px solid rgb(145, 145, 145);  
  border-top: 1px solid rgb(145, 145, 145);
}

.cadre-box-large:after {
  position: absolute;
  content: "";
  width: 10%;
  height: 12%;
  right: -1px;
  bottom: -1px;  
  border-right: 1px solid rgb(145, 145, 145);
  border-bottom: 1px solid rgb(145, 145, 145);
}

.pseudo-cadre-box-bottom:before {
  position: absolute;
  content: "";
  width: 4.8%;
  height: 8.4%;
  top: -1px;
  right: -1px;  
  border-right: 1px solid rgb(145, 145, 145);
  border-top: 1px solid rgb(145, 145, 145);
}

.pseudo-cadre-box-bottom:after {
  position: absolute;
  content: "";
  width: 4.8%;
  height: 8.4%;
  left: -1px;
  bottom: -1px;  
  border-left: 1px solid rgb(145, 145, 145);
  border-bottom: 1px solid rgb(145, 145, 145);
}

.cadre-box-large:before {
  position: absolute;
  content: "";
  width: 4.8%;
  height: 8%;
  top: -1px;
  left: -1px;
  border-left: 1px solid rgb(145, 145, 145);  
  border-top: 1px solid rgb(145, 145, 145);
}

.cadre-box-large:after {
  position: absolute;
  content: "";
  width: 4.8%;
  height: 8%;
  right: -1px;
  bottom: -1px;  
  border-right: 1px solid rgb(145, 145, 145);
  border-bottom: 1px solid rgb(145, 145, 145);
}

.cadre-box:hover, .jalios-link-css:focus .cadre-box  {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);  
  transform: scale(1.03);
}

.cadre-box-large:hover, .jalios-link-large-css:focus .cadre-box-large {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transform: scale(1.03);
}

.cadre-box-block-category {  
  margin-left: 5%;
  padding-right: 5%;
  padding-top: 5%; 
}

.cadre-top-part {  
  height: 92.8%;
  overflow: visible;  
}

.cadre-box-block-category-title {
  font-family: 'Pluto Medium';
  font-style: normal;
  font-size: 21px;
  text-transform: uppercase;
  color: rgb(135, 135, 135);  
}

.cadre-box-block-description {  
  margin-left: 5%;
  padding-right: 15%;
  margin-top: 2%;
  text-overflow: ellipsis;  
}

.cadre-box-block-description-text {
  font-family: 'Roboto Medium';
  font-style: normal;
  font-size: 21px;  
  line-height: 1.05;
  color: rgb(88, 29, 116);  
}

.block-with-text {
  opacity: 0;	
}

.cadre-box-date {
  font-family: 'Roboto Regular';
  font-style: normal;
  font-size: 17px;   
  color: rgb(0, 0, 0);
  margin-left: 5%;
  padding-top: 2%;  
}

.tst-cadre-box-block-category-title {
  font-family: 'Pluto Medium';
  font-style: normal;
  font-size: 20px;
  text-transform: uppercase;
  color: rgb(135, 135, 135);  
}

.tst-cadre-box-block-description-text {
  font-family: 'Roboto Medium';
  font-style: normal;
  font-size: 20px; 
  line-height: 1.05;
  color: rgb(88, 29, 116);
}

.tst-cadre-box-date {
  font-family: 'Roboto Regular';
  font-style: normal;
  font-size: 16px;   
  color: rgb(0, 0, 0);
  margin-left: 5%;
  padding-top: 2%;  
}

.cadre-box-top-image-wrapper {   
  width: 100%;
  max-height: 73%;  
  overflow: hidden;  
}

.bottom-left-img {
  max-height: 68.5% !important;
}

.cadre-box-button-plus-wrapper {
  bottom: 0; 
  position: absolute; 
  width: 100%;
  height: 7%;
  background: #ffffff;  
  z-index: -1;
}

.cadre-box-button-plus {  
  margin: 0 auto !important; 
  max-width: 70px !important;
  width: 4vw;  
}

.jalios-link-css {
	
}

@media screen and (max-width: 768px) {	
	.cadre-box, .cadre-box-large, .cadre-box-bottom {
		width: 100%;
	}
	
	.cadre-box, .pseudo-cadre-box {
		height: 119vw;
		max-height: 1000px;
	}
	
	.cadre-box-large, .pseudo-cadre-box-bottom {
		height: 70vw !important;
		max-height: 500px;
	}
	
	.cadre-box-large:before {	    
	  	width: 10%;
	  	height: 12%;	  	
	}
	
	.cadre-box-large:after {	  	
	  	width: 10%;
	  	height: 12%;	  	
	}
	
	.pseudo-cadre-box-bottom:before {	    
	  	width: 10%;
	  	height: 12%;	  	
	}
	
	.pseudo-cadre-box-bottom:after {	  	
	  	width: 10%;
	  	height: 12%;	  	
	}
	
	.cadre-box-block-category-title {
	    font-size: 5.0vw;
	}
	  
	.cadre-box-block-description-text {
	    font-size: 5.0vw;
	}
	  
	.cadre-box-date {
	    font-size: 3.8vw;
	}
	  
	.cadre-box-button-plus {  	
	  	width: 18.0vw;
	  	max-width: 120px !important;
	}
	
	.cadre-box-block-description {
  		padding-right: 30%;  		
  	}
  	
}

@media screen and (min-width: 768px) and (max-width: 989px) {	
	.cadre-box {
		width: 96.5%;
	}
	
	.cadre-box-large {
		width: 100%;
	}
	
	.cadre-box-bottom {
		width: 100%;
	}
	
	.cadre-box, .pseudo-cadre-box {
		height: 58vw;
		max-height: 550px;
	}
	
	.cadre-box-large, .pseudo-cadre-box-bottom {
		height: 50vw !important;
		max-height: 500px;
	}
	
	.cadre-box-block-category-title {
	    font-size: 2.5vw;
	}
	  
	.cadre-box-block-description-text {
	    font-size: 2.5vw;
	}
	  
	.cadre-box-date {
	    font-size: 2.0vw;
	}
	  
	.cadre-box-button-plus {  	
	  	width: 7.5vw;
	}
	
	.cadre-box-block-description {
  		padding-right: 28%;
  	}
	
	.cadre-box-top-image-wrapper {    
    	max-height: 68.5%;    
  	}
}

@media screen and (min-width: 990px) and (max-width: 1199px) {
  .cadre-box, .pseudo-cadre-box {
	height: 39.8vw;
	max-height: 464px;
  }
  
  .cadre-box-bottom, .cadre-box-large, .pseudo-cadre-box-bottom {
		height: 35vw !important;
		max-height: 435px;
  }

  .cadre-box-block-category-title {
     font-size: 1.8vw;
  }
  
  .cadre-box-block-description-text {
  	 font-size: 1.8vw;
  }
  
  .cadre-box-date {
  	 font-size: 1.5vw;
  }
  
  .cadre-box-button-plus {  	
  	width: 5.5vw;
  }
  
  .cadre-box-top-image-wrapper {    
     max-height: 70.6%;    
  }
  
  .bottom-left-img {
  	max-height: 67.5% !important;
  }
  
  .cadre-box-block-description {
  	padding-right: 20%;
  }

}

@media screen and (min-width: 1200px) and (max-width: 1299px) {
  .cadre-box, .pseudo-cadre-box {
	height: 25.8vw;
	max-height: 464px;
  }
  
  .cadre-box-block-category-title {
     font-size: 1.2vw;
  }
  
  .cadre-box-block-description-text {
  	 font-size: 1.2vw;  	 
  }
  
  .cadre-box-date {
  	 font-size: 1.1vw;
  }
  
  .cadre-box-block-description {
  	 padding-right: 20%;
  }

}

@media screen and (min-width: 1300px) and (max-width: 1399px) {
  .cadre-box, .pseudo-cadre-box {
	height: 26.8vw;
	max-height: 464px;
  }
  
  .cadre-box-block-category-title {
     font-size: 1.2vw;
  }
  
  .cadre-box-block-description-text {
  	 font-size: 1.2vw;
  }
  
  .cadre-box-date {
  	 font-size: 1.1vw;
  }
  
  .cadre-box-block-description {
  	 padding-right: 20%;
  }

}

@media screen and (min-width: 1400px) and (max-width: 1529px) {
  .cadre-box, .pseudo-cadre-box {
	height: 27vw;
	max-height: 464px;
  }
  
  .cadre-box-block-category-title {
     font-size: 1.2vw;
  }
  
  .cadre-box-block-description-text {
  	 font-size: 1.2vw;
  }
  
  .cadre-box-date {
  	 font-size: 1.1vw;
  }
  
  .cadre-box-block-description {
  	 padding-right: 30%;
  }
  
  .cadre-box-top-image-wrapper {    
    max-height: 68%;    
  }

}

@media screen and (min-width: 1530px) and (max-width: 1704px) {
  .cadre-box, .pseudo-cadre-box {
	height: 26vw;
	max-height: 464px;
  }
  
  .cadre-box-block-category-title {
     font-size: 1.2vw;
  }
  
  .cadre-box-block-description-text {
  	 font-size: 1.2vw;
  }
  
  .cadre-box-date {
  	 font-size: 1.1vw;
  }
  
  .cadre-box-block-description {
  	 padding-right: 27%;
  }
  
  .cadre-box-top-image-wrapper {    
     max-height: 69.5%;    
  }

}

@media screen and (min-width: 1705px) and (max-width: 1980px) {
  .cadre-box, .pseudo-cadre-box {
	height: 27vw;
	max-height: 520px;
  }
  
  .cadre-box-block-category-title {
     font-size: 1.2vw;
  }
  
  .cadre-box-block-description-text {
  	 font-size: 1.2vw;
  }
  
  .cadre-box-date {
  	 font-size: 1.0vw;
  }  
  
  .cadre-box-block-description {
  	 padding-right: 26.5%;
  }
  
  .cadre-box-top-image-wrapper {    
     max-height: 69.5%;    
  }
  
  .bottom-left-img {
  	max-height: 67.8% !important;
  }
  
  .description-bottom-left {
  	padding-right: 24% !important;
  }	
  
}

@media screen and (min-width: 1981px) {
  .cadre-box, .pseudo-cadre-box, .cadre-box-large, .pseudo-cadre-box-large {
	height: 27vw;
	max-height: 520px;
  }
  
  .cadre-box-block-category-title {
     font-size: 23.5px;
  }
  
  .cadre-box-block-description-text {
  	 font-size: 23.5px;
  }
  
  .cadre-box-date {
  	 font-size: 19.8px;
  }  
  
  .cadre-box-block-description {
  	 padding-right: 26.5%;
  }
  
  .cadre-box-top-image-wrapper {    
     max-height: 69.5%;    
  }
  
  .bottom-left-img {
  	max-height: 67.8% !important;
  }
  
  .description-bottom-left {
  	padding-right: 24% !important;
  }	
  
}