body{overflow-x:hidden;font-family:'Roboto',"Helvetica Neue","Helvetica Neue",Helvetica,Arial,sans-serif; }
.text-muted{color:#777}
.text-primary{color:#0069BE}
a,a:hover,a:focus,a:active,a.active{outline:0}a{color:#ffffff}a:hover,a:focus,a:active,a.active{color:#ffffff}
h1,h2,h3,h4,h5,h6, h7,h8 {font-family:'Roboto', sans-serif;;text-transform:uppercase;font-weight:700}
h7,h8{font-family:"Arial", sans-serif;;text-transform:none;font-weight:200}
h2color{font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#0069BE; font-size: 40px}.img-centered{margin:0 auto}.bg-light-gray{background-color:#f7f7f7}.bg-darkest-gray{background-color:#222}.btn-primary{color:#fff;background-color:#0069BE;border-color:#0069BE;font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#0072bc;border-color:#f6bf01}.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#0069BE;border-color:#0069BE}.btn-primary .badge{color:#0069BE;background-color:#fff}.btn-xl{color:#fff;background-color:#0069BE;border-color:#0069BE;font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;border-radius:3px;font-size:12px;padding:20px 40px}.btn-xl:hover,.btn-xl:focus,.btn-xl:active,.btn-xl.active,.open .dropdown-toggle.btn-xl{color:#fff;background-color:#ffffff;border-color:#f6bf01}.btn-xl:active,.btn-xl.active,.open .dropdown-toggle.btn-xl{background-image:none}.btn-xl.disabled,.btn-xl[disabled],fieldset[disabled] .btn-xl,.btn-xl.disabled:hover,.btn-xl[disabled]:hover,fieldset[disabled] .btn-xl:hover,.btn-xl.disabled:focus,.btn-xl[disabled]:focus,fieldset[disabled] .btn-xl:focus,.btn-xl.disabled:active,.btn-xl[disabled]:active,fieldset[disabled] .btn-xl:active,.btn-xl.disabled.active,.btn-xl[disabled].active,fieldset[disabled] .btn-xl.active{background-color:#0069BE;border-color:#0069BE}.btn-xl .badge{color:#0069BE;background-color:#fff}.navbar-default{background-color:#222;border-color:transparent}.navbar-default .navbar-brand{color:#000000;font-family:'Roboto',"Helvetica Neue",Helvetica,Arial}.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:active,.navbar-default .navbar-brand.active{color:#0072bc}.navbar-default .navbar-collapse{border-color:rgba(255,255,255,.02)}.navbar-default .navbar-toggle{background-color:#0069BE;border-color:#0069BE}.navbar-default .navbar-toggle .icon-bar{background-color:#fff}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#0069BE}.navbar-default .nav li a{font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:1px;color:#000}.navbar-default .nav li a:hover,.navbar-default .nav li a:focus{color:#0069BE;outline:0}.navbar-default .navbar-nav>.active>a{border-radius:0;color:#fff;background-color:#0069BE}.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#fff;background-color:#0072bc}@media (min-width:768px){.navbar-default{background-color:transparent;padding:25px 0;-webkit-transition:padding .3s;-moz-transition:padding .3s;transition:padding .3s;border:0}.navbar-default .navbar-brand{font-size:2em;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.navbar-default .navbar-nav>.active>a{border-radius:3px}
.navbar-default.navbar-shrink{background-color:#222;padding:10px 0}
.navbar-default.navbar-shrink .navbar-brand{font-size:1.5em}}
header{background-image:url(../img/logos/map.png);background-repeat:none;background-attachment:scroll;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;text-align:center;color:#fff}
header .intro-text{padding-top:100px;padding-bottom:50px}header .
intro-text .intro-lead-in{font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:22px;line-height:22px;margin-bottom:25px}
header .intro-text .intro-heading{font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:50px;line-height:50px;margin-bottom:25px}@media (min-width:768px)
{header .intro-text{padding-top:00px;padding-bottom:300px}header .intro-text .intro-lead-in{font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:40px;line-height:40px;margin-bottom:25px}
header .intro-text .intro-heading{font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:75px;line-height:75px;margin-bottom:50px}}
section{padding:50px 0}
section h2.section-heading{font-size:40px;margin-top:0;margin-bottom:5px}
section h3.section-subheading{font-size:16px;font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:none;font-style:none;font-weight:400;margin-bottom:75px}@media (min-width:768px){section{padding:20px 20px 30px 20px}}
.service-heading{margin:15px 0;text-transform:none}#portfolio .portfolio-item{margin:left: 100px;right:0px}#portfolio .portfolio-item .portfolio-link{display:block;position:relative;max-width:400px;margin:0 auto}#portfolio .portfolio-item .portfolio-link .portfolio-hover{background:rgba(0,114,188,.9);position:absolute;width:100%;height:100%;opacity:0;transition:all ease .5s;-webkit-transition:all ease .5s;-moz-transition:all ease .5s}#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{opacity:1}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{position:absolute;width:100%;height:20px;font-size:20px;text-align:center;top:50%;margin-top:-12px;color:#fff}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{margin-top:-12px}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{margin:0}#portfolio .portfolio-item .portfolio-caption{max-width:400px;margin:15 auto;background-color:#fff;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionBasic{max-width:400px;margin:15 auto;background-color:#4D4D4D   ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionChild{max-width:400px;margin:15 auto;background-color:#33A3DC   ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionEducation{max-width:400px;margin:15 auto;background-color:#D44E5B;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionFood{max-width:400px;margin:15 auto;background-color:#00B26B   ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionHealth{max-width:400px;margin:15 auto;background-color:#9ECF7C  ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionLivelihoods{max-width:400px;margin:15 auto;background-color:#00A9B7   ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionIM{max-width:400px;margin:15 auto;background-color:#000000  ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionProtection{max-width:400px;margin:15 auto;background-color:#0077C0   ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionSGBV{max-width:400px;margin:15 auto;background-color:#0077C0  ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionShelter{max-width:400px;margin:15 auto;background-color:#FDBD3B  ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionSocial{max-width:400px;margin:15 auto;background-color:#F47521   ;text-align:left;padding:20px}
#portfolio .portfolio-item .portfolio-captionEnergy{max-width:400px;margin:15 auto;background-color:#756AAC  ;text-align:left;padding:20px}

#portfolio .portfolio-item .portfolio-caption h4{text-transform:none;margin:0}
#portfolio .portfolio-item .portfolio-caption p{font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:16px;margin:0}#portfolio .portfolio-item .portfolio-captionBasic h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionChild h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionEducation h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionFood h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionHealth h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionLivelihoods h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionProtection h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionSGBV h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionShelter h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionSocial h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionEnergy h4{text-transform:none;margin:0; color: #fff}
#portfolio .portfolio-item .portfolio-captionIM h4{text-transform:none;margin:0; color: #fff}
#portfolio *{z-index:2}@media (min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}}.timeline{list-style:none;padding:0;position:relative}.timeline:before{top:0;bottom:0;position:absolute;content:"";width:2px;background-color:#f1f1f1;left:40px;margin-left:-1.5px}.timeline>li{margin-bottom:50px;position:relative;min-height:50px}.timeline>li:before,.timeline>li:after{content:" ";display:table}.timeline>li:after{clear:both}.timeline>li .timeline-panel{width:100%;float:right;padding:0 20px 0 100px;position:relative;text-align:left}.timeline>li .timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto}.timeline>li .timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto}.timeline>li .timeline-image{left:0;margin-left:0;width:80px;height:80px;position:absolute;z-index:100;background-color:#0069BE;color:#fff;border-radius:100%;border:7px solid #f1f1f1;text-align:center}.timeline>li .timeline-image h4{font-size:10px;margin-top:12px;line-height:14px}.timeline>li.timeline-inverted>.timeline-panel{float:right;text-align:left;padding:0 20px 0 100px}.timeline>li.timeline-inverted>.timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto}.timeline>li.timeline-inverted>.timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto}.timeline>li:last-child{margin-bottom:0}.timeline .timeline-heading h4{margin-top:0;color:inherit}.timeline .timeline-heading h4.subheading{text-transform:none}.timeline .timeline-body>p,.timeline .timeline-body>ul{margin-bottom:0}@media (min-width:768px){.timeline:before{left:50%}.timeline>li{margin-bottom:100px;min-height:100px}.timeline>li .timeline-panel{width:41%;float:left;padding:0 20px 20px 30px;text-align:right}.timeline>li .timeline-image{width:100px;height:100px;left:50%;margin-left:-50px}.timeline>li .timeline-image h4{font-size:13px;margin-top:16px;line-height:18px}.timeline>li.timeline-inverted>.timeline-panel{float:right;text-align:left;padding:0 30px 20px 20px}}@media (min-width:992px){.timeline>li{min-height:150px}.timeline>li .timeline-panel{padding:0 20px 20px}.timeline>li .timeline-image{width:150px;height:150px;margin-left:-75px}.timeline>li .timeline-image h4{font-size:18px;margin-top:30px;line-height:26px}.timeline>li.timeline-inverted>.timeline-panel{padding:0 20px 20px}}@media (min-width:1200px){.timeline>li{min-height:170px}.timeline>li .timeline-panel{padding:0 20px 20px 100px}.timeline>li .timeline-image{width:170px;height:170px;margin-left:-85px}.timeline>li .timeline-image h4{margin-top:40px}.timeline>li.timeline-inverted>.timeline-panel{padding:0 100px 20px 20px}}.team-member{text-align:center;margin-bottom:50px}.team-member img{margin:0 auto;border:7px solid #fff}.team-member h4{margin-top:25px;margin-bottom:0;text-transform:none}.team-member p{margin-top:0}aside.clients img{margin:50px auto}section#contact{background-color:#000;background-position:center;background-repeat:no-repeat}section#contact .section-heading{color:#fff}section#contact .form-group{margin-bottom:25px}section#contact .form-group input,section#contact .form-group textarea{padding:20px}section#contact .form-group input.form-control{height:auto}section#contact .form-group textarea.form-control{height:236px}section#contact .form-control:focus{border-color:#0069BE;box-shadow:none}section#contact ::-webkit-input-placeholder{font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#bbb}section#contact :-moz-placeholder{font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#bbb}section#contact ::-moz-placeholder{font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#bbb}section#contact :-ms-input-placeholder{font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#bbb}section#contact .text-danger{color:#e74c3c}
footer{padding:25px 25px 25px 0px;text-align:left}
footer span.copyright{line-height:40px;font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;text-transform:none}footer ul.quicklinks{margin-bottom:0;line-height:40px;font-family:'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;text-transform:none}ul.social-buttons{margin-bottom:0}ul.social-buttons li a{display:block;background-color:#222;height:40px;width:40px;border-radius:100%;font-size:20px;line-height:40px;color:#fff;outline:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}ul.social-buttons li a:hover,ul.social-buttons li a:focus,ul.social-buttons li a:active{background-color:#0069BE}.btn:focus,.btn:active,.btn.active,.btn:active:focus{outline:0}.portfolio-modal .modal-content{border-radius:0;background-clip:border-box;-webkit-box-shadow:none;box-shadow:none;border:0;min-height:100%;padding:100px 0;text-align:center}.portfolio-modal .modal-content h2{margin-bottom:5px;font-size:3em}.portfolio-modal .modal-content p{margin-bottom:10px}.portfolio-modal .modal-content h8.item-intro{margin:20px 0 30px;font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:16px}.portfolio-modal .modal-content ul.list-inline{margin-bottom:30px;margin-top:0}.portfolio-modal .modal-content img{margin-bottom:30px}.portfolio-modal .close-modal{position:absolute;width:75px;height:75px;background-color:transparent;top:25px;right:25px;cursor:pointer}.portfolio-modal .close-modal:hover{opacity:.3}.portfolio-modal .close-modal .lr{height:75px;width:1px;margin-left:35px;background-color:#222;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);z-index:1051}.portfolio-modal .close-modal .lr .rl{height:75px;width:1px;background-color:#222;transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);z-index:1052}.portfolio-modal .modal-backdrop{opacity:0;display:none}::-moz-selection{text-shadow:none;background:#0069BE}::selection{text-shadow:none;background:#0069BE}img::selection{background:0 0}img::-moz-selection{background:0 0}body{webkit-tap-highlight-color:#0069BE}

#hexGrid {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    padding:0.866% 0;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}
#hexGrid:after {
    content: "";
    display: block;
    clear: both;
}
.hex {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
.hex * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent;
}
.hexIn {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
}

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

.hex h7, .hex h8 {
    width: 100%;
    left:-1%;
    padding: 5%;
    font-family: 'Roboto'; 
        font-weight: 700px;
    box-sizing:border-box;
    background-color: rgba(50, 50, 50, 0.75);
        -webkit-transition:  -webkit-transform .1s ease-out, opacity .1s ease-out;
            transition:          transform .1s ease-out, opacity .1s ease-out;
}
.hex h7 {
    bottom: 50%;
    padding-top:50%;
    font-size: 1.25em;
    font-weight: 600;
    z-index: 1;
    -webkit-transform:translateY(-100%) translatez(-1px);
        -ms-transform:translateY(-100%) translatez(-1px);
            transform:translateY(-100%) translatez(-1px);
}
.hex h7:after {
    content: '';
    position:absolute;
    bottom: 7%;
    left: 25%;
    width: 50%;
    text-align: center;
    border-bottom: 1px solid #fff;
}
.hex h8 {
    top: 50%;
    padding-top: 0%;
    padding-bottom:50%;
    font-weight: 300;
    font-size: 1em;
    -webkit-transform:translateY(100%) translatez(-1px);
        -ms-transform:translateY(100%) translatez(-1px);
            transform:translateY(100%) translatez(-1px);
}


/*** HOVER EFFECT  **********************************************************************/
.hexIn:hover h7, .hexIn:focus h7,
.hexIn:hover h8, .hexIn:focus h8{
    -webkit-transform:translateY(0%) translatez(-1px);
        -ms-transform:translateY(0%) translatez(-1px);
            transform:translateY(0%) translatez(-1px);
}

/*** SPACING AND SIZING *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */
    .hex {
        width: 19.2%; /* = (100-4) / 5 */
        padding-bottom: 22.170%; /* =  width / sin(60deg) */
    }
    .hex:nth-child(9n+6),
    .hex:nth-child(9n+7),
    .hex:nth-child(9n+8),
    .hex:nth-child(9n+9) {
        margin-top: -4.676%;
        margin-bottom: -4.676%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(9n+6):last-child,
    .hex:nth-child(9n+7):last-child,
    .hex:nth-child(9n+8):last-child,
    .hex:nth-child(9n+9):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(9n+6) {
        margin-left: 0.5%;
        clear: left;
    }
    .hex:nth-child(9n+10) {
        clear: left;
    }
    .hex:nth-child(9n+2),
    .hex:nth-child(9n+ 7) {
        margin-left: 1%;
        margin-right: 1%;
    }
    .hex:nth-child(9n+3),
    .hex:nth-child(9n+4),
    .hex:nth-child(9n+8) {
        margin-right: 1%;
    }
}
@media (max-width: 1200px) and (min-width:901px) {/* <- 4-3  hexagons per row */
    .hex {
        width: 24.25%; /* = (100-3) / 4 */
        padding-bottom: 28.001%; /* =  width / sin(60deg) */
    }
    .hex:nth-child(7n+5),
    .hex:nth-child(7n+6),
    .hex:nth-child(7n+7) {
        margin-top: -6.134%;
        margin-bottom: -6.134%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(7n+5):last-child,
    .hex:nth-child(7n+6):last-child,
    .hex:nth-child(7n+7):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(7n+2),
    .hex:nth-child(7n+6) {
        margin-left: 1%;
        margin-right: 1%;
    }
    .hex:nth-child(7n+3) {
        margin-right: 1%;
    }
    .hex:nth-child(7n+8) {
        clear: left;
    }
    .hex:nth-child(7n+5) {
        clear: left;
        margin-left: 0.5%;
    }
}
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
    .hex {
        width: 32.666%; /* = (100-2) / 3 */
        padding-bottom: 37.720%; /* =  width / sin(60) */
    }
    .hex:nth-child(5n+4),
    .hex:nth-child(5n+5) {
        margin-top: -8.564%;
        margin-bottom: -8.564%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(5n+4):last-child,
    .hex:nth-child(5n+5):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(5n+4) {
        margin-right: 1%;
        margin-left: 0.5%;
    }
    .hex:nth-child(5n+2) {
        margin-left: 1%;
        margin-right: 1%;
    }
    .hex:nth-child(5n+6) {
        clear: left;
    }
}
@media (max-width: 600px) { /* <- 2-1  hexagons per row */
    .hex {
        width: 49.5%; /* = (100-1) / 2 */
        padding-bottom: 57.158%; /* =  width / sin(60) */
    }
    .hex:nth-child(3n+3) {
        margin-top: -13.423%;
        margin-bottom: -13.423%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(3n+3):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(3n+3) {
        margin-left: 0.5%;
    }
    .hex:nth-child(3n+2) {
        margin-left: 1%;
    }
    .hex:nth-child(3n+4) {
        clear: left;
    }
}
@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
}