.article {
background-color: white;
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    position:relative;
}

article > .content{
    padding-bottom: 30px !important;
}

article footer{
  position: absolute;
  bottom: 0px;
  font-style: italic;
  background-color: #f5f5f5;
  width: 100%;
  left: 0;
  color: #777;
  padding: 9px;
  border-radius: 4px;
}

.node-readmore{
  padding-bottom: 20px;
  padding-top: 20px;
}

article h2{
  font-size: revert;
}

.select-wrapper::after{
  color: #777;
}

.block-field-blocknodepagebody{
  background-color: white;
  padding: 15px;
  border-style: solid;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}


progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  background-color: red;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  transition: width 0.6s ease;
}


.training-module{
 position: relative;
float: left;
margin-top: -39px;
margin-left: -30px;
opacity: .95 !important;
max-width: none !important;
width: 23%;
font-size: 0.8em;
border-radius: 57%; 
}

.training-title {
    text-align: center;
    max-height: 27px;
    font-size: revert;
}

.img-formation {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    margin-top: 26px !important;
}

.complete {
    position: absolute;
    top: 135px;
    left: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: rotate(334deg);
    -moz-transform: rotate(329deg);
    -o-transform: rotate(334deg);
    writing-mode: bt-rl;
    background-color: red;
    text-align: center;
    opacity: 0.65;
    color: white;
    vertical-align: center;
    font-size: 1.5em;
    border-radius: 7px;
}

.training-date {
    color: black !important;
    padding-left: 0px;
    width: 100%;
    text-align: center;
}

.training-date-blanc {
    color: white !important;
    padding-left: 0px;
    width: 100%;
    text-align: center;
    opacity: 1.65 !important;
}
.thumbnail {
    display: block;
    padding: 0px !important;
    margin-bottom: 40px;
    line-height: 1.42857143;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.thumbnail2022 {
	display: block;
	padding: 0px !important;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 2px solid #4e8f93;
	border-radius: 25px;
	-webkit-transition: border .2s ease-in-out;
	-o-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out;
}

.thumbnail2023 {
	display: block;
	padding: 0px !important;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 2px solid #4e8f93;
	border-radius: 25px;
	-webkit-transition: border .2s ease-in-out;
	-o-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out;
}

.training-title2023 {
    text-align: center;
    max-height: 27px;
    font-size: revert;
    color: #ff9900;
}

.complete2023 {
    position: absolute;
    top: 135px;
    left: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: rotate(334deg);
    -moz-transform: rotate(329deg);
    -o-transform: rotate(334deg);
    writing-mode: bt-rl;
    background-color: red;
    text-align: center;
    opacity: 1.65;
    color: white;
    vertical-align: center;
    font-size: 1.5em;
    border-radius: 7px;
    border: 2px solid red;
}

.new2023{
    position: absolute;
    top: 81px;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: rotate(334deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(334deg);
    writing-mode: bt-rl;
    background-color: red;
text-align: center;
opacity: 1.65;
color:    white;
    vertical-align: center;
    font-size: 1.5em;
    border-radius: 7px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
}


.new{
    position: absolute;
    top: 81px;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: rotate(334deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(334deg);
    writing-mode: bt-rl;
    background-color: yellow;
text-align: center;
opacity: 1.65;
color:    red;
    vertical-align: center;
    font-size: 1.5em;
    border-radius: 7px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
}

.thumbnail {
    display: block;
    padding: 0px !important;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;

}
.post{
    position: absolute;
    top: 192px;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: rotate(334deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(334deg);
    writing-mode: bt-rl;
    background-color: #4e8f93;
text-align: center;
opacity: 1.65;
color:    #ff9900;
    vertical-align: center;
    font-size: 1.5em;
    border-radius: 7px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
}

.thumbnail {

    display: block;
    padding: 0px !important;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;

}

.blacktitle {
color:black;
}
.description{
font-size: 1.28em !important;
font-weight: normal !important;
margin-bottom: 28px !important;
text-align: justify;
}
.fas{
    margin-right: 5px;
}
.icontitle{
color: #4e8f93 !important;
}
.icontitle:hover{
color: #ff9900 !important;
}

.block-field-blocknodearticlefield-image img{
  border-radius:4px;
  box-shadow: 10px 10px 5px #ccc;
    -moz-box-shadow: 10px 10px 5px #ccc;
    -webkit-box-shadow: 10px 10px 5px #ccc;
    -khtml-box-shadow: 10px 10px 5px #ccc;
  margin:10px 10px 30px 10px;
}