/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/




:root{
  --green-color: #81BB23;


}

.month_container p{
  color: white;
  font-family: Open Sans;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.8em;
  font-size: 22px;

}



.month_container{
  position: relative;

  margin: 220px auto;
}

.month_container .dnd-section {
  padding: 110px 10px
}

.month_container:after{ 

  display: block!important;
  position: absolute;
  top: 75px;
  right: 116px;
  font-size: 40px;
  font-weight: 700;
  text-align: right;
  color: white;
}

.januar:after {  content: "Januar"!important; }
.februar.month_container:after {  content: "Februar"!important; }
.marz.month_container:after {  content: "März"!important; }
.april.month_container:after {  content: "April"!important; }
.mai.month_container:after {  content: "Mai"!important; }
.juni.month_container:before {  content: "Juni"!important; }
.juli.month_container:after {  content: "Juli"!important; }
.august.month_container:after {  content: "August"!important; }
.september.month_container:after {  content: "September"!important; }
.oktober.month_container:after {  content: "Oktober"!important; }
.november.month_container:after {  content: "November"!important; }
.dezember.month_container:after {  content: "Dezember"!important; }

.month_container:nth-child(2n+1):after{
  left: 116px;
  text-align: left;
}

/*** FIRST RECTANGLE ***/

.month_container:before {
  content: 'Januar!important';
  display: block;
  height: 100%;
  width: 66vw;
  position: absolute; 
  z-index: -10;
  /* box-shadow: 8px 2px 20px #6F767A; */
  padding: 10%;
  box-shadow: 1px 3px 7px #3d3d3d;
}


.month_container:nth-child(2n+1):before {
  background: #81BB23;
  left: 0;
}

.month_container:nth-child(2n):before {
  background: #6F767A;
  right: 0;
}




/*** OTHER RECTANGLE ***/  


.month_container .dnd-section { position: relative; } 
.month_container .dnd-section:before {
  content: '';
  display: block;
  height: 90%;
  width: 66vw;
  position: absolute;
  z-index: -10;
  top: 0%;   
  /* left: -50px; */
  box-shadow: 1px 3px 7px #3d3d3d;

}



.month_container .dnd-section:first-child:before{
  display:none;
}

.month_container:nth-child(2n+1) .dnd-section:before{
  background: #6F767A; /* grau */
}

.month_container:nth-child(2n) .dnd-section:before{
  background: #81BB23; /* grün */
}

.month_container .dnd-section:nth-child(2n+3):before{
  DISPLAY:NONE; 
}

/**** Grau ***/

.month_container:nth-child(2n) .dnd-section:nth-child(2n):before{
  left: 0;
}
.month_container:nth-child(2n) .dnd-section:nth-child(2n+1):before{
  right: 0;
}


/**** Grün ***/

.month_container:nth-child(2n+1) .dnd-section:nth-child(2n+1):before{
  left: 0;
}
.month_container:nth-child(2n+1) .dnd-section:nth-child(2n):before{
  right: 0;
}

.month_container img{
  filter: saturate(0.7) brightness(1);
  box-shadow: 1px 3px 7px #3d3d3d;
}

.month_container:first-of-type, .januar{
  margin-top: 0;
}

.month_container .dnd-section:first-of-type{
  padding-top: 200px;
}
















/*
.month_container:nth-child(2n) .dnd-section:nth-child(2n) .widget-type-rich_text:before{

LEFT: calc( -60vw + 100% );
}

.month_container:nth-child(2n) .dnd-section:nth-child(2n+1) .widget-type-rich_text:before{

RIGHT: calc( -60vw + 100% );
}

.month_container:nth-child(2n+1) .dnd-section:nth-child(2n) .widget-type-rich_text:before{
RIGHT: calc( -60vw + 100% );

}

.month_container:nth-child(2n+1) .dnd-section:nth-child(2n+1) .widget-type-rich_text:before{
LEFT: calc( -60vw + 100% );

}
*/




/*
.month_container .dnd-section .widget-type-rich_text{ position: relative; }
.month_container .dnd-section .widget-type-rich_text:before {
content: '';
display: block;
height: 180%;
width: 180%;
position: absolute;
z-index: -10;
top: -30%;

/* left: -50px; */
/*box-shadow: 8px 2px 20px #6f767a; */
/*
opacity: .98;
}

.month_container .dnd-section:nth-child(2n) .widget-type-rich_text:before{
background: #81BB23;
left: -11%;
}


.month_container .dnd-section:nth-child(2n+1) .widget-type-rich_text:before{
background: #6F767A;
right: -13%;
}
*/






/*
.month_container .dnd-section{ position: relative; }
.month_container .dnd-section:before {
content: '';
display: block;
height: 85%;
width: 50%;
position: absolute; 
z-index: -10;
background: #ECE9E9;
}
/*