/* FUNCTION AREAS */
.content__block--function-area {  padding: 0px 0px 0px 0px !important; }

.function__area__bg {  position: absolute; top: 16px; left: 16px; bottom: 16px; right: 16px;  background-size: cover;  background-position: 50% center; background-repeat: no-repeat;    }
.content__block--function-area-dark_green .function__area__bg {  background-color: #15601a;  }
.content__block--function-area-light_green .function__area__bg {  background-color: #e8fdc9;  }
.content__block--function-area-white .function__area__bg {  background-color: #FFFFFF;  }

/* .content__block--function-area-dark_green a:focus { border: 2px solid transparent;   } */

.function__area__inner { position: relative; }
.content__block--1_column.content__block--h-half_column .function__area__inner {  padding-bottom: calc(50% + 16px); }
.content__block--1_column.content__block--h-1_column .function__area__inner { padding-bottom: 100%; }
.content__block--1_column.content__block--h-2_columns .function__area__inner { padding-bottom: calc(200% - 32px); }
.content__block--1_column.content__block--h-3_columns .function__area__inner { padding-bottom: calc(300% - 64px); }
.content__block--1_column.content__block--h-4_columns .function__area__inner { padding-bottom: calc(400% - 96px); }

.content__block--2_columns.content__block--h-half_column .function__area__inner { padding-bottom: calc(25% + 16px); }
.content__block--2_columns.content__block--h-1_column .function__area__inner { padding-bottom: 50%; }
.content__block--2_columns.content__block--h-2_columns .function__area__inner { padding-bottom: calc(100%); }
.content__block--2_columns.content__block--h-3_columns .function__area__inner { padding-bottom: calc(150% - 16px); }
.content__block--2_columns.content__block--h-4_columns .function__area__inner { padding-bottom: calc(200% - 32px); }

.content__block--3_columns.content__block--h-half_column .function__area__inner { padding-bottom: calc((100% / 6) + 16px); }
.content__block--3_columns.content__block--h-1_column .function__area__inner { padding-bottom: calc(100% / 3);  }
.content__block--3_columns.content__block--h-2_columns .function__area__inner { padding-bottom: calc((200% / 3) - 32px); }
.content__block--3_columns.content__block--h-3_columns .function__area__inner { padding-bottom: calc(100%); }
.content__block--3_columns.content__block--h-4_columns .function__area__inner { padding-bottom: calc((400% / 3) - 32px); }



.function__area__text {   display: flex; flex-direction: row;  justify-content: center; align-items: center;  padding: 24px; position: absolute;  top: 16px; left: 16px; bottom: 16px; right: 16px; font-size: 18px; line-height: 24px; pointer-events: none; z-index: 149;  }
.function__area__text a  {  word-wrap: break-word; white-space: normal; pointer-events: all; }
.function__area__text { color: #FFFFFF;   }
.function__area__text a  { color: #e8fdc9 !important;  }
.function__area__text a:hover  { color: #FFFFFF !important;  }
.function__area__text .title { font-size: 24px; line-height: 30px; font-family: "futura-pt-bold", sans-serif; font-weight: 700;  }

.content__block--h-no_fixed_height .function__area__text {  position: relative; display: block; top: auto; left: auto; bottom: auto; right: auto; padding: 32px 24px; }

.content__block--function-area-light_green .function__area__text { color: #15601a;   }

.content__block--function-area--link:hover .function__area__text a { color: #FFFFFF !important;   }

.content__block--function-area--bottom .function__area__text { display: block; top: auto; background-color: rgba(21,96,26,0.9);  padding: 10px 16px;  text-align: left; }

.function__area__link { position: absolute; left: 16px; top: 16px; bottom: 16px ; right: 16px; border: 0px solid red; z-index: 150;  }

.function__area__theme-icon { position: relative; display: inline-block; margin: 2px;  width: 48px;  height: 48px; border-radius: 14px;  z-index: 149; background-position: 50% 50%; background-repeat: no-repeat; }
.function__area__theme-icon-connect { background-color: #855a06; background-image: url('../img/connect_icon.svg');  background-size: 32px;  }
.function__area__theme-icon-protect { background-color: #8140a5; background-image: url('../img/protect_icon.svg');  background-size: 36px;  }
.function__area__theme-icon-enhance { background-color: #04778c; background-image: url('../img/enhance_icon.svg');  background-size: 32px;   }

.function__area__icons { position: absolute; top: 18px; right: 18px;  }

@media only screen and (max-width: 501px) { /* CYAN */
  .content__block--function-area.content__block--1_column { max-width: 320px;   }
  .function__area__text { font-weight: 400; font-size: 16px; line-height: 21px;  }
  .content__block--function-area--bottom .function__area__text { font-size: 14px; line-height: 18px;  }
  .function__area__text .title { font-family: "futura-pt",sans-serif;  font-weight: 600;  font-size: 20px; line-height: 24px;  }
  
  .function__area__theme-icon {  width: 40px;  height: 40px; border-radius: 12px; }
  .function__area__theme-icon-connect { background-size: 27px;  }
  .function__area__theme-icon-protect {  background-size: 29px; }
  .function__area__theme-icon-enhance { background-size: 27px; }
}

@media only screen and (max-width: 360px) {
  
}

@media only screen and (min-width: 502px) and (max-width: 580px) { /* BLUE */
  .content__block--function-area.content__block--1_column { max-width: 320px;   }
  
  .function__area__text { font-weight: 400; font-size: 16px; line-height: 21px;  }
  .content__block--function-area--bottom .function__area__text { font-size: 14px; line-height: 18px;  }
  .function__area__text .title { font-family: "futura-pt",sans-serif;  font-weight: 600;  font-size: 20px; line-height: 24px;  }
  
  .function__area__theme-icon {  width: 40px;  height: 40px; border-radius: 12px; }
  .function__area__theme-icon-connect { background-size: 27px;  }
  .function__area__theme-icon-protect {  background-size: 29px; }
  .function__area__theme-icon-enhance { background-size: 27px; }
  
}

@media only screen and (min-width: 581px) and (max-width: 767px) { /* RED */
    .content__block--function-area.content__block--1_column { width: 50% !important; max-width: 302px !important;  min-width: 240px !important;   }
    
    .function__area__text { font-weight: 400; font-size: 16px; line-height: 21px;  }
    .function__area__text .title { font-family: "futura-pt",sans-serif;  font-weight: 600;  font-size: 20px; line-height: 24px;  }
    
    .function__area__theme-icon {  width: 40px;  height: 40px; border-radius: 12px; }
    .function__area__theme-icon-connect { background-size: 27px;  }
    .function__area__theme-icon-protect {  background-size: 29px; }
    .function__area__theme-icon-enhance { background-size: 27px; }
    
}

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

@media only screen and (min-width:  768px) and (max-width: 840px)   { /* PINK */
  .content__block--function-area.content__block--1_column { max-width: 302px; min-width: 240px !important;   }
  .function__area__text { font-weight: 400; font-size: 16px; line-height: 21px;  }
  .function__area__text .title { font-family: "futura-pt",sans-serif;  font-weight: 600;  font-size: 20px; line-height: 24px;  }
  .content__block--function-area--bottom .function__area__text { font-size: 16px; line-height: 21px; padding: 8px 12px; }
  .function__area__bg, .function__area__text { top: 8px; left: 8px; right: 8px; bottom: 8px;   }
  
  .function__area__theme-icon {  width: 40px;  height: 40px; border-radius: 12px; }
  .function__area__theme-icon-connect { background-size: 27px;  }
  .function__area__theme-icon-protect {  background-size: 29px; }
  .function__area__theme-icon-enhance { background-size: 27px; }
  
}

@media only screen  and (min-width: 841px) and (max-width: 1000px)  { /* YELLOW */
  .content__block--function-area.content__block--1_column { max-width: 302px; min-width: 302px !important;   }
  .function__area__text { font-weight: 400; font-size: 16px; line-height: 21px;  }
  .content__block--function-area--bottom .function__area__text { font-size: 16px; line-height: 21px;  }
  .function__area__text .title { font-family: "futura-pt",sans-serif;  font-weight: 600;  font-size: 22px; line-height: 28px;  }
}

@media only screen  and (min-width: 1001px) and (max-width: 1264px)  { /* BLACK */
      .content__block--function-area--bottom .function__area__text { font-size: 16px; line-height: 21px;  }
}