/* general styles */
.code-featured{
  /* margin-bottom: 60px; */
  margin: 0 auto;
  padding: 0 3.5vw !important;
  max-width: 1500px !important;
}
.code-featured[class*='fcb']{
  margin-bottom: 60px;
}
.code-featured[class*='fcb'] .fwrap {
  display: grid;
  grid-gap: 0.5vw;
  grid-row-gap: 0.5vw;
  /* repeat(auto-fit, minmax(200px,1fr)); */
}
.code-featured[class*='fcb'] [class*='fc']{}

.code-featured[class*='fcb'] .fblock > .featured_link{
  position: relative;
  display: block;
  height: 100%;
  display: flex;
  color: #fff;
  padding: 2vw;
  overflow: hidden;
}
.code-featured[class*='fcb'] .fblock > .featured_link:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(22, 22, 22, 0.75);
}
.code-featured[class*='fcb'] .fblock > .featured_link.noimage:after{
  display: none;
}
.code-featured[class*='fcb'] .fblock > .featured_link .fcontent{
  display: inline-block;
  align-self: flex-end;
  position: relative;
  z-index: 100;
  /* margin-right: 7vw; */
}

 .code-featured[class*='fcb'] .fblock > .featured_link .fcontent h3{
   padding:0;
   font-size: 1.375rem;
   font-weight: 600;
   line-height: 1.4;
 }
 .code-featured[class*='fcb'] .fblock > .featured_link .fcontent p{
   font-weight: 400;
   padding: 0 0 0.5vw 0;
   font-size: .8125rem;
 }
 .code-featured[class*='fcb'] .fblock > .featured_link .fcontent p span{
   font-weight: 600;
   text-transform: uppercase;
   color: #61d4d1;
 }
 .code-featured[class*='fcb'] .fblock > .featured_link .fcontent p.excerpt{
   display: none;
   margin-top: 1.5vw;
   font-size: .9375rem;
 }
 .code-featured[class*='fcb'] .fblock > .featured_link .icon{
   width: 200px;
   height: auto;
   opacity: 0.10;
   position: absolute;
   right:-65px;
   bottom:-65px;
   display: none;
 }
 .code-featured[class*='fcb'] .fblock > .featured_link.noimage .icon{
   display: block;
 }
/* .code-featured[class*='fcb'] .fblock > .featured_link.noimage .icon svg{
  width: 1em;
  height: 1em;
} */


/* featured 1 display block */
 .code-featured.fcb1 .fwrap {
   display: grid;
   height: 100%;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   /* grid-gap: 1vw 1vw; */
   grid-template-areas: "code_featured_1";
 }
 .code-featured.fcb1 .fwrap .fc1 { grid-area: code_featured_1; }
 .code-featured.fcb1 .fblock.fc1 > .featured_link .fcontent h3{
  font-size: 2.625rem;
  line-height: 1.2;
 }
 .code-featured.fcb1 .fblock.fc1 > .featured_link .fcontent p.excerpt{
   display: block !important;
 }
 .code-featured.fcb1 .fblock.fc1 > .featured_link .icon{
   width: 400px;
 }
 .code-featured.fcb1 [class*='fc'] > a{
  min-height: 375px;
  max-height: 375px;
  height: 375px;
 }


/* featured 2 display block */
.code-featured.fcb2 .fwrap {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  /* grid-gap: 1vw 1vw; */
  grid-template-areas: "code_featured_1 code_featured_1 code_featured_2";
}
.code-featured.fcb2 .fwrap .fc1 { grid-area: code_featured_1; }
.code-featured.fcb2 .fwrap .fc2 { grid-area: code_featured_2; }
.code-featured.fcb2 .fwrap .fc1 > a{
 min-height: 375px;
 max-height: 375px;
 height: 375px;
}
.code-featured.fcb2 .fblock.fc1 > .featured_link .fcontent p.excerpt,
.code-featured.fcb2 .fblock.fc2 > .featured_link .fcontent p.excerpt{
  display: block !important;
}
.code-featured.fcb2 .fblock.fc1 > .featured_link .fcontent h3{
 font-size: 2.225rem;
 line-height: 1.2;
}
.code-featured.fcb2 .fblock.fc2 > .featured_link .fcontent h3{
  font-size: 2rem;
  line-height: 1.2;
}
.code-featured.fcb2 .fblock.fc1 > .featured_link .icon,
.code-featured.fcb2 .fblock.fc2 > .featured_link .icon{
  width: 400px;
}

/* featured 3 display block */
.code-featured.fcb3 .fwrap {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* grid-gap: 1vw 1vw; */
  grid-template-areas: "code_featured_1 code_featured_1 code_featured_2" "code_featured_1 code_featured_1 code_featured_3";
}

.code-featured.fcb3 .fwrap .fc1 { grid-area: code_featured_1; }
.code-featured.fcb3 .fwrap .fc2 { grid-area: code_featured_2; }
.code-featured.fcb3 .fwrap .fc3 { grid-area: code_featured_3; }
.code-featured.fcb3 .fwrap .fc1 > a{
 min-height: 375px;
 /* max-height: 375px; */
 /* height: 375px; */
}
.code-featured.fcb3 .fblock.fc1 > .featured_link .fcontent p.excerpt{
  display: block !important;
}
.code-featured.fcb3 .fblock.fc1 > .featured_link .fcontent h3{
 font-size: 2.625rem;
 line-height: 1.2;
}
.code-featured.fcb3 .fblock.fc1 > .featured_link .icon{
  width: 400px;
}

/* featured 4 display block */
.code-featured.fcb4 .fwrap {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* grid-gap: 1vw 1vw; */
  grid-template-areas: "code_featured_1 code_featured_2 code_featured_3" "code_featured_1 code_featured_2 code_featured_4";
}
.code-featured.fcb4 .fwrap .fc1 { grid-area: code_featured_1; }
.code-featured.fcb4 .fwrap .fc2 { grid-area: code_featured_2; }
.code-featured.fcb4 .fwrap .fc3 { grid-area: code_featured_3; }
.code-featured.fcb4 .fwrap .fc4 { grid-area: code_featured_4; }
.code-featured.fcb4 .fwrap .fc1 > a{
 min-height: 375px;
 /* max-height: 375px; */
 /* height: 375px; */
}
.code-featured.fcb4 .fblock.fc1 > .featured_link .fcontent h3,
.code-featured.fcb4 .fblock.fc2 > .featured_link .fcontent h3{
 font-size: 2rem;
 line-height: 1.2;
}
.code-featured.fcb4 .fblock.fc1 > .featured_link .fcontent p.excerpt,
.code-featured.fcb4 .fblock.fc2 > .featured_link .fcontent p.excerpt{
  display: block !important;
}

/* featured 5 display block */
.code-featured.fcb5 .fwrap {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* grid-gap: 1vw 1vw; */
  grid-template-areas: "code_featured_1 code_featured_2 code_featured_4" "code_featured_1 code_featured_3 code_featured_5";
}
.code-featured.fcb5 .fwrap .fc1 { grid-area: code_featured_1; }
.code-featured.fcb5 .fwrap .fc2 { grid-area: code_featured_2; }
.code-featured.fcb5 .fwrap .fc3 { grid-area: code_featured_3; }
.code-featured.fcb5 .fwrap .fc4 { grid-area: code_featured_4; }
.code-featured.fcb5 .fwrap .fc5 { grid-area: code_featured_5; }
.code-featured.fcb5 .fwrap .fc1 > a{
 min-height: 375px;
 /* max-height: 375px; */
 /* height: 375px; */
}
.code-featured.fcb5 .fblock.fc1 > .featured_link .fcontent h3{
  font-size: 2rem;
  line-height: 1.2;
}
.code-featured.fcb5 .fblock.fc1 > .featured_link .fcontent p.excerpt{
  display: block !important;
}


/* featured 6 display block */
.code-featured.fcb6 .fwrap {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* grid-gap: 1vw 1vw; */
  grid-template-areas: "code_featured_1 code_featured_2 code_featured_3" "code_featured_4 code_featured_5 code_featured_6";
}
.code-featured.fcb6 .fwrap .fc1 { grid-area: code_featured_1; }
.code-featured.fcb6 .fwrap .fc2 { grid-area: code_featured_2; }
.code-featured.fcb6 .fwrap .fc3 { grid-area: code_featured_3; }
.code-featured.fcb6 .fwrap .fc4 { grid-area: code_featured_4; }
.code-featured.fcb6 .fwrap .fc5 { grid-area: code_featured_5; }
.code-featured.fcb6 .fwrap .fc6 { grid-area: code_featured_6; }
.code-featured.fcb6 .fwrap .fc1 > a{
 min-height: 187px;
 max-height: 187px;
 height: 187px;
}

/* default styles for the featured blocks based on post type */
.code-featured .featured_ibmcode_articles{
  background: #41a7a5;
}
.code-featured .featured_ibmcode_events{
  background: #bb5458;
}
.code-featured .featured_ibmcode_patterns.noimage{
  background: #0d0d0d;
}
.code-featured .featured_ibmcode_patterns.noimage:after {
  display: block !important;
}
.code-featured .featured_ibmcode_tutorials{
  background: #3f3f3f;
}
.code-featured .featured_ibmcode_tutorials.noimage .icon{
  opacity: .32 !important;
}
.code-featured .featured_ibmcode_tutorials.noimage .icon svg{
  fill: #45918e;
}
.code-featured .featured_ibmcode_videos{
  background: #72a1b5;
}
.code-featured .featured_ibmcode_videos.featured_link:after {
  /* background: rgba(22, 22, 22, 0.2) !important; */
background: -moz-linear-gradient(top, rgba(22,22,22,0) 0%, rgba(22,22,22,0.75) 70%)!important;
background: -webkit-linear-gradient(top, rgba(22,22,22,0) 0%,rgba(22,22,22,0.75) 70%)!important;
background: linear-gradient(to bottom, rgba(22,22,22,0) 0%,rgba(22,22,22,0.75) 70%)!important;
}

.code-featured .featured_ibmcode_announce{
  background: #5da06e;
}


@media only screen and (max-width: 579px) and (min-width: 0){
  .code-featured[class*='fcb'] .fwrap {
    display: block !important;
  }
  .code-featured[class*='fcb'] .fblock{
  	margin-bottom: 10px !important;
  }
}