/***** OPTION 2 *****/
/**** MOBILE first styles <= 280 ***/
.hexGridSec{
    margin-bottom: 50em; /*10em*/
}
.main-hex {
  display:flex;
  --s: 120px; /* 300pxsize */
  --r: 0.8; /* ratio */
  /* clip-path */
  --h: 0.25;  
  --v: 0.55;
  --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ;
  --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r));
  /*margin */
  --mv: 1px; /* vertical */
  --mh: calc(var(--mv) + (var(--s) - 4*var(--hc))/2); /* horizontal */
  /*--mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); * horizontal */
  /* for the float*/
  --f: calc(2*var(--s)*var(--r) + 2*var(--mv) - 2*var(--vc) - 2px);
 /* --f: calc(2*var(--s)*var(--r) + 4*var(--mv)  - 2*var(--vc) - 2px); */
  
}

.container-hex {
  font-size: 0; /*disable white space between inline block element */
}

.container-hex div {
  width: var(--s);
  margin: var(--mv) var(--mh);
  height: calc(var(--s)*var(--r)); 
  display: inline-block;
  font-size:initial;
  clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,100% var(--vc),100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%,0 calc(100% - var(--vc)),0 var(--vc));
  background: red;
  margin-bottom: calc(var(--mv) - var(--vc)); 
}
/*.container-hex div:nth-child(odd) {
  background:green;
}*/
.container-hex div.grey{
    background: #4C4A4F;
    color:#FFFFFF;
    position: relative;
}
.container-hex div.grey a {
    color: #ffffff;
}
.container-hex div.grey a:hover, .container-hex div.grey a:focus, .container-hex div.orange a:hover, .container-hex div.light-grey a:hover, .container-hex div.orange a:focus, .container-hex div.light-grey a:focus{
    font-weight:700;
}
.container-hex div.orange{
    background: #CB4900;
     color:#FFFFFF;
     position: relative;
}

.container-hex div.orange a, .container-hex div.orange a:hover, .container-hex div.orange a:focus{
	 color: #ffffff;
}
.container-hex div.light-grey{
    background: #EAEAEA;
    color: #cb4900;
    position: relative;
}
.container-hex div.light-grey a:hover, .container-hex div.light-grey a:focus{
     color: #cb4900;
}

.container-hex::before {
  content: "";
  width: calc(var(--s)/1.3 + var(--mh));
  float: left;
  height: 195%;
  shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--f) - 2px),      
                   #000  0 var(--f));
    /*width: calc(var(--s)/2 + var(--mh));
  height: 135%;*/
}

/*** CONTENT INSIDE HEX**/
.hex-subtitle{
    font-family: "Red Hat Display",sans-serif;
    text-transform: uppercase;
    font-size: .6rem;
    /* padding: 0.5em 1em 0; */
    margin: 0px;
    text-align: center;
    width: 80%;
    position: absolute;
    line-height: 1em;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hex-title{
    font-size: 1.5rem;
    font-family: "Patua One",cursive;
    /* width: 90%; */
    position: absolute;
    /* font-size: 2.7rem;
    padding: 0.5em 1em 0; */
    margin: 0px;
    text-align: center;
    width: 70%;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1em;
}
.hex-title-only{
    top: 50%!important;
    width: 70%!important;
    font-size: 1.1rem!important;
    line-height:0.9em;
}
.hex-img{
    position:relative;
    overflow: hidden;

}
.hex-imgs{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}
.hex-credit {
    font-size: .45rem;
    line-height: 1.2em;
    bottom: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}
/*.panel {position: fixed;top: 20px;right: 20px;padding: 10px;border: 1px solid;border-radius: 10px;background: #fff;font-family: sans-serif;opacity:.5}
.panel:hover {opacity:1}
.panel > div:not(:last-child) {border-bottom: 1px solid;padding-bottom: 10px;margin-bottom: 10px;}
*,*::before {transition:0.5s linear}*/

@media screen and (min-width: 360px){
.hexGridSec {
    margin-bottom: 10em;
}
.main-hex {
    --s: 160px;
}
.hex-title {
  font-size: 1.4rem;
  line-height:.85em;
  
}
.hex-subtitle {
  font-size: .55rem;
  line-height: 1.2em;
  top: 65%;
}
.hex-title-only {
    font-size: 1.3rem!important;
}
}
@media screen and (min-width: 390px){
.main-hex {
    --s: 180px;
}
.hex-title {
    font-size: 1.3rem;
    line-height: .9em;
}
.hex-subtitle {
    font-size: 0.8rem;
    line-height: 1.2em;
} 
.hex-title-only {
    font-size: 1.5rem!important;
    line-height: 1em;
}
}
@media screen and (min-width: 500px){
  .main-hex {
    --s: 260px;
}
.hex-title {
    font-size: 2.4rem;
}

.hex-subtitle {
    font-size: 1.1rem;
    top: 70%;
} 
.hex-title-only {
    font-size: 2rem!important;
    line-height: 1em;
}
}
@media screen and (min-width: 768px){
.hexGridSec {
    margin-bottom: 20em;
}
  .main-hex {
   --s: 380px;
}
.hex-title {
    font-size: 3.2rem;
}
.hex-subtitle {
    font-size: 1.4rem;
    line-height: 1.6em;
} 
.hex-title-only {
    font-size: 2.8rem!important;
    line-height: 1.1em;
}
}
@media screen and (min-width: 820px){
  .main-hex {
    --s: 160px;
    }
  .container-hex::before {
    width: calc(var(--s)/2 + var(--mh));
  }
  .hex-title {
    font-size: 1.9rem;
    line-height: .9em;
    }
.hex-subtitle {
    font-size: .8rem;
    line-height: 1.1em;
    top: 75%;
    }
.hex-title-only {
    font-size: 1.4rem!important;
}
}
@media screen and (min-width: 900px){
  .main-hex {
    --s: 180px;
    }  
  .hex-subtitle {
    width: 70%;
  }
}
@media screen and (min-width: 1024px){
  .main-hex {
    --s: 200px;
    } 
   .hex-title {
    font-size: 2.1rem;
    line-height: 1.1em;
    }
  .hex-subtitle {
    font-size: .9rem;
  }
  .hex-title-only {
    font-size: 1.5rem!important;
}
}
@media screen and (min-width: 1280px){
.main-hex {
    --s: 300px;
    --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2);
    } 
   .hex-title {
    font-size: 2.4rem;
    line-height: .9em;
    }
  .hex-subtitle {
    font-size: 1.1rem;
    top:70%;
  }
  .hex-title-only {
    font-size: 2rem!important;
}
}
@media screen and (min-width: 1325px){
    .hexGridSec {
    margin-bottom: 15em;
}
    .hex-title {
    font-size: 2.6rem;
    }
    .hex-subtitle {
    font-size: 1.1rem;
    line-height:1.2em;
  }
  .hex-title-only {
    font-size: 2.2rem!important;
     line-height: 1.1em;
}
}
@media screen and (min-width: 1440px){
    .main-hex {
    --s: 19.5rem;
    }
}