/* CSS */
:root {
    /* Change this to change the appearance of the hexaons */
    --hex-width: 200px; 
    --hex-between: 10px;
    
    /* Other hexagon dimentions */
    --hex-height: calc(var(--hex-width) / 1.73 /* sqrt(3) */);
    --hex-margin: calc(var(--hex-width) / 2);
    --hex-border: calc(var(--hex-margin) / 1.73 /* sqrt(3) */);
    --hex-transition: all .2s ease;
    
    /* Colors */
    --color-hex-default: #000000;
    --color-hex-hover:   #FFFFFF;
    --color-angular:     #DD0031;
    --color-atom:        #66595C;
    --color-bootstrap:   #563D7C;
    --color-circleci:    #343434;
    --color-css:         #1572B6;
    --color-git:         #F14E32;
    --color-gulp:        #DA4648;
    --color-haskell:     #5D4F85;
    --color-html:        #E34F26;
    --color-javascript:  #F7DF1E;
    --color-meteor:      #DE4F4F;
    --color-python:      #3776AB;
    --color-rails:       #CC0000;
    --color-sass:        #CC6699;
    --color-vuejs:       #4FC08D;
    --color-webpack:     #8DD6F9;
  }
  
.rapid_home_services{
    overflow-x: hidden;
    padding-bottom: 50px;
}

#hexGrid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    font-family: sans-serif;
    list-style-type: none;
    padding: 0;
}

.hex {
    position: relative;
    visibility:hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    transition: all 0.5s;
    backface-visibility: hidden;
    will-change: transform;
    transition: all 0.5s;
}
.hex::after{
    content:'';
    display:block;
    padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{
    position: absolute;
    width:96%;
    padding-bottom: 110.851%; /* =  width / sin(60) */
    margin: 2%;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
        -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
            transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    transition: all 0.5s;
}
.hexIn * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}




/*** HEX CONTENT **********************************************************************/
.hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

.hex h3, .hex p {
    width: 100%;
}
.hex:hover #demo1,
.hex:hover #demo2{
    color: #fff;
}
#demo1 {
    color: #0b497c;
    text-transform: capitalize;
    text-align: center;
    bottom: 50%;
    padding-top:50%;
    font-size: 1.5em;
    z-index: 1;
    font-weight: 600;
}
.hex h3:before, .hex h3:after {
}

#demo2 {
    top: 50%;
    text-align: center;
    color: #062F52;
    padding-inline: 10px;
}
.hex:hover #service-title,
.hex:hover .service_price {
    color: #fff;
}
.hex.qr_hex #service-title{
    top: 25px;
}
#service-title.promo_hex{
	top: 25%;
    font-size: 1.2rem;
}
#service-title{
    top: 30%;
    text-align: center;
    color: #0b497c;
    padding-inline: 10px;
    font-size: 1.4rem;
    font-weight: bold;
}
.hex.red #service-title{
    color: #fff;
}

.hex .inquire{
    bottom: 20%;
    text-align: center;
    width: 100%;
    display: flex;
    color: #062F52;
    font-weight: 400;
    text-decoration: underline;
}
.hex .inquire svg{
    width: 20px;
}
.hex .arrow{
    bottom: 30%;
    text-align: center;
    width: 100%;
}
.hex .arrow svg{
    width: 40px;
    margin-left: -20px;
    stroke: #0b497c;
}
.hex:hover .arrow svg{
    stroke: #fff;
}

.hex .qr_code_scan{
    bottom: 210px;
    text-align: center;
    width: 100%;
}
.hex .qr_code_scan svg{
    width: 150px;
    margin-left: -75px;
    fill: #0b497c;
}
.hex:hover .qr_code_scan svg{
    fill: #fff;
}

.hex.red .arrow svg{
    stroke: #ffffff;
}
.hex.red:hover .arrow svg{
    stroke: #ffffff;
}
.hex.red .service_price{
    color: #ffffff;
}
.hex .service_price{
    color: #b02929;
    top: 50%;
    text-align: center;
    padding-inline: 10px;
    font-size: 1.3rem;
    font-weight: bold;
}
.img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: #ecf7ff;
}
.hex.red .img{
    background-color: #b3262a;
}
.hex.red:hover .img{
    background-color: #8b171b;
}
.hex:hover .img{
    background-color: #2979b0;
    box-shadow: -1px 4px 6px #594e4c36;
}
.hex .icon{
    color: #0b497c;
    text-transform: capitalize;
    text-align: center;
    top: -70px;
    padding-top: 50%;
    font-size: 1.5em;
    z-index: 1;
    font-weight: 600;
    width: 100%;
}
.hex .icon img{
    width: 60px;
}
.img:before, .img:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    opacity: 0;
    transition: opacity 0.5s;
}
.img:before {
    background: rgba(22, 103, 137, 0.3)
}
.img:after {
    background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5), transparent);
}


/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */
    #hexGrid{
    padding-bottom: 4.4%
    }
    .hex.contact{
        width: 33.33%;
    }
    .hex {
    width: 25%; /* = 100 / 5 */
    }
    .hex:nth-child(7n+5){ /* first hexagon of even rows */
    margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
    }
}

@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
    #hexGrid{
    padding-bottom: 5.5%;
    font-size: 13px;
    }
    .hex {
    width: 30%; /* = 100 / 4 */
    }
    .hex:nth-child(7n+5){ /* first hexagon of even rows */
    margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
    }
}

@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
    #hexGrid{
    padding-bottom: 7.4%;
    font-size: 14px;
    }
    .hex {
    width: 33.333%; /* = 100 / 3 */
    }
    .hex:nth-child(5n+4){ /* first hexagon of even rows */
    margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
    }
    #service-title{
        font-size: 1rem;
    }
    .rapid_home_services.shelf{
        padding-bottom: 500px;
    }
    .rapid_home_services.contact{
        padding-bottom: 250px; 
    }
    .rapid_home_services.dol{
        padding-bottom: 100px;
    }
    .rapid_home_services.cipc{
        padding-bottom: 1600px;
    }
}

@media (max-width: 600px) { /* <- 2-1  hexagons per row */
    #hexGrid{
    padding-bottom: 11.2%;
    font-size: 12px;
    }
    .hex {
    width: 50%; /* = 100 / 3 */
    }
    .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
    }
    #service-title{
        font-size: 1rem;
    }
    .rapid_home_services{
        padding-bottom: 400px;
    }
    .rapid_home_services.cipc{
        padding-bottom: 2800px;
    }
    .rapid_home_services.sars{
        padding-bottom: 1800px;
    }
	.rapid_home_services.shelf{
        padding-bottom: 500px;
    }
    .rapid_home_services.dol{
        padding-bottom: 1300px;
    }
    .rapid_home_services.contact{
        padding-bottom: 750px; 
    }
}

@media (max-width: 530px) {
    .rapid_home_services.cipc{
        padding-bottom: 2400px;
    }
	.rapid_home_services.shelf{
        padding-bottom: 800px;
    }
    .rapid_home_services.dol{
        padding-bottom: 1100px;
    }
    .rapid_home_services.contact{
        padding-bottom: 650px; 
    }
    .rapid_home_services{
        padding-bottom: 300px;
    }
}
@media (max-width: 510px) {
    .rapid_home_services.cipc{
        padding-bottom: 2300px;
    }
	.rapid_home_services.shelf{
        padding-bottom: 750px;
    }
    .rapid_home_services.dol{
        padding-bottom: 1050px;
    }
    .rapid_home_services.contact{
        padding-bottom: 650px; 
    }
    .rapid_home_services{
        padding-bottom: 250px;
    }
}

@media (max-width: 470px) {
    .rapid_home_services.cipc{
        padding-bottom: 2100px;
    }
    .rapid_home_services.sars{
        padding-bottom: 1500px;
    }
	.rapid_home_services.shelf{
        padding-bottom: 650px; 
    }
    .rapid_home_services.dol{
        padding-bottom: 950px; 
    }
    .rapid_home_services.contact{
        padding-bottom: 550px; 
    }
    .rapid_home_services{
        padding-bottom: 150px;
    }
}

@media (max-width: 400px) {
    #hexGrid {
        font-size: 8px;
    }
    .rapid_home_services.cipc{
        padding-bottom: 1800px;
    }
	.rapid_home_services.shelf{
        padding-bottom: 700px;
    }
    .rapid_home_services.dol{
        padding-bottom: 900px; 
    }
    .rapid_home_services.contact{
        padding-bottom: 450px; 
    }
    .rapid_home_services{
        padding-bottom: 100px;
    }
    .hex .qr_code_scan svg {
        width: 120px;
        margin-left: -60px;
        top: 50px;
        fill: #0b497c;
    }
}
.rapid_form input,
.rapid_form select{
    border: 1px solid #0B497C;
    border-radius: 5px;
}
.rapid_form .gform_required_legend,
.rapid_form .gform_title{
    display: none;
}

.rapid_form .gform_button{
    background-color: #0B497C;
    color: #fff;
    width: 100%;
    font-weight: bold;
    padding: 10px 20px;
}
.gfield_radio,
.gfield_checkbox{
    display: grid;
    display: -ms-grid;
    grid-auto-flow: dense;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 800px) {
    .gfield_radio,
    .gfield_checkbox {
        grid-template-columns: repeat(2, 1fr);
    }
}
.gform_wrapper.gravity-theme .gfield_radio input[type="radio"],
.gform_wrapper.gravity-theme .gfield_checkbox input[type="checkbox"]{
    display: none;
}
.gform_wrapper.gravity-theme .gfield_radio .gform-field-label,
.gform_wrapper.gravity-theme .gfield_checkbox .gform-field-label{
    padding: 20px;
    border: 2px solid #0B497C;
    border-radius: 5px;
    display: flex;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    font-weight: 600;
    color: #094a7c;
}
.gfield_radio .gfield-choice-input:checked +  .gform-field-label,
.gfield_checkbox .gfield-choice-input:checked +  .gform-field-label{
    border: 2px solid #ae2b23;
    color: #fff;
    background-color: #ae2b23;
}